<template>
<div>
<!-- 第一行 -->
<el-row :gutter="24" >
<el-col :span="4">
<el-input size="medium" v-model="query.clientCode" placeholder="客户编码" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input size="medium" v-model="query.ebcname" placeholder="电商企业名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input size="medium" v-model="query.ebpname" placeholder="平台企业名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input size="medium" v-model="query.logisticsName" placeholder="物流企业名称" clearable></el-input>
</el-col>
<el-col :span="4">
<el-input size="medium" v-model="query.agentName" placeholder="申报企业名称" clearable></el-input>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row :gutter="24" >
<el-col :span="4">
<el-input size="medium" v-model="query.customsName" placeholder="申报口岸名称" clearable></el-input>
</el-col>
</el-row>
<!-- 第三行 -->
<el-row :gutter="24" >
<el-col :span="1.5">
<el-button size="medium" @click="getList">查询</el-button>
</el-col>
<el-col :span="1.5">
<el-button size="medium" type="info" @click="exportDataToExcel">导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button size="medium" type="success" @click="addForm">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button size="medium" type="danger">删除</el-button>
</el-col>
</el-row>
<el-row :gutter="24" style="margin-left: 3px">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%;"
size="medium"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="clientCode"
label="客户编码"
width="120"
>
</el-table-column>
<el-table-column
prop="clientName"
label="客户名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
label="电商企业代码"
prop="ebccode"
width="120">
</el-table-column>-->
<el-table-column
prop="ebcname"
label="电商企业名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="ebpcode"
label="电商平台代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="ebpname"
label="电商平台名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="logisticsCode"
label="物流企业代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="logisticsName"
label="物流企业名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="agentCode"
label="申报企业代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="agentName"
label="申报企业名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="customsCode"
label="申报口岸代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="customsName"
label="申报口岸名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="portCode"
label="出口口岸代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="portName"
label="出口口岸名称"
width="120"
show-overflow-tooltip>
</el-table-column>
<!--<el-table-column
prop="ownerCode"
label="生产销售企业代码"
show-overflow-tooltip>
</el-table-column>-->
<el-table-column
prop="ownerName"
label="生产销售企业"
width="120"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="loctNo"
label="监管场所"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
show-overflow-tooltip>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="120">
<template slot-scope="scope">
<el-button
@click.native.prevent="ediForm(scope.row)"
type="text"
style="color: #5BB75B"
size="small">
更新
</el-button>
<el-button
@click.native.prevent="deleteRow(scope.row.id)"
type="text"
style="color: #5BB75B"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="query.pageNum"
:page-sizes="[100, 200, 300, 400]"
:page-size="query.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-row>
<el-dialog
:title="'客户信息'+textMap[dialogStatus]"
:visible.sync="dialogVisible"
width="65%"
:before-close="handleClose">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="客户编码" prop="clientCode">
<el-input size="medium" v-model="ruleForm.clientCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="客户名称" prop="clientName">
<el-input size="medium" v-model="ruleForm.clientName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="电商企业代码" prop="ebccode">
<el-input size="medium" v-model="ruleForm.ebccode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="电商企业名称" prop="ebcname">
<el-input size="medium" v-model="ruleForm.ebcname"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="电商平台代码" prop="ebpcode">
<el-input size="medium" v-model="ruleForm.ebpcode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="电商平台名称" prop="ebpname">
<el-input size="medium" v-model="ruleForm.ebpname"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="物流企业代码" prop="logisticsCode">
<el-input size="medium" v-model="ruleForm.logisticsCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="物流企业名称" prop="logisticsName">
<el-input size="medium" v-model="ruleForm.logisticsName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="申报企业代码" prop="agentCode">
<el-input size="medium" v-model="ruleForm.agentCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="申报企业名称" prop="agentName">
<el-input size="medium" v-model="ruleForm.agentName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="申报口岸代码" prop="customsCode">
<el-input size="medium" v-model="ruleForm.customsCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="申报口岸名称" prop="customsName">
<el-input size="medium" v-model="ruleForm.customsName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="出口口岸代码" prop="portCode">
<el-input size="medium" v-model="ruleForm.portCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="出口口岸名称" prop="portName">
<el-input size="medium" v-model="ruleForm.portName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="出口口岸代码" prop="portCode">
<el-input size="medium" v-model="ruleForm.portCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="出口口岸名称" prop="portName">
<el-input size="medium" v-model="ruleForm.portName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="生产销售企业代码" prop="ownerCode">
<el-input size="medium" v-model="ruleForm.ownerCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="生产销售企业名称" prop="ownerName">
<el-input size="medium" v-model="ruleForm.ownerName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="10">
<el-form-item label="监管场所" prop="loctNo">
<el-input size="medium" v-model="ruleForm.loctNo"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<el-form-item>
<el-button size="medium" type="primary" @click="dialogStatus==='create'?addsubmitForm('ruleForm'):edisubmitForm('ruleForm')">保存</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</div>
</template>
<script>
import {insertCustomer,delCustomer,ediCustomer,selectCustomers} from '../../api/consigner/customerconfig'
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
export default {
data() {
return {
dialogStatus: '',
dialogVisible: false,
textMap: {
update: '更新',
create: '新增'
},
ruleForm: {
id:0,
userId:'',
userName:'',
ext1:'',
ext2:'',
ext3:'',
clientCode: '',
clientName:'',
ebccode:'',
ebcname: '',
ebpcode:'',
ebpname:'',
logisticsCode:'',
logisticsName:'',
agentCode:'',
agentName:'',
customsCode:'',
customsName:'',
portCode:'',
portName:'',
ownerCode:'',
ownerName:'',
loctNo:''
},
rules: {
clientCode: [
{ required: true, message: '请输入客户编码', trigger: 'blur' },
{ min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
clientName: [
{ required: true, message: '请输入客户名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
ebccode: [
{ required: true, message: '请输入电商企业代码', trigger: 'blur' },
{ min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
ebcname: [
{ required: true, message: '请输入电商企业名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
ebpcode: [
{ required: true, message: '请输入电商平台代码', trigger: 'blur' },
{ min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
ebpname: [
{ required: true, message: '请输入电商平台名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
logisticsCode: [
{ required: true, message: '请输入物流企业代码', trigger: 'blur' },
{ min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
logisticsName: [
{ required: true, message: '请输入物流企业名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
agentCode: [
{ required: true, message: '请输入申报企业代码', trigger: 'blur' },
{ min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
agentName: [
{ required: true, message: '请输入申报企业名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
customsCode: [
{ required: true, message: '请输入申报口岸代码', trigger: 'blur' },
{ min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
],
customsName: [
{ required: true, message: '请输入申报口岸名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
portCode: [
{ required: true, message: '请输入出口口岸代码', trigger: 'blur' },
{ min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
],
portName: [
{ required: true, message: '请输入出口口岸名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
],
ownerCode: [
{ required: true, message: '生产销售企业代码', trigger: 'blur' },
{ min: 1, max: 4, message: '长度在 1 到 18 个字符', trigger: 'blur' }
],
ownerName: [
{ required: true, message: '生产销售企业名称', trigger: 'blur' },
{ min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
]
},
total:0,
tableData: [],
multipleSelection: [],
query: {
clientCode: '',
ebcname: '',
ebpname: '',
logisticsName: '',
agentName: '',
customsName: '',
pageNum:1,
pageSize:20
},
};
},
mounted() {
this.getList();
},
methods: {
addForm(){
this.dialogVisible = true;
this.dialogStatus = 'create';
},
ediForm(row){
this.dialogVisible = true;
this.dialogStatus = 'update';
this.ruleForm=row;
},
//Dialog关闭提示
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {
});
},
addsubmitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.ruleForm.id='';
insertCustomer(this.ruleForm).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('资源添加，失败！')
}
this.$message.success('资源添加，成功！')
this.dialogVisible = false;
this.getList();
}).catch(error => {
// 关闭加载
this.$message.warning('资源添加，失败！')
})
} else {
console.log('error submit!!');
return false;
}
});
},
edisubmitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
ediCustomer(this.ruleForm).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('更新资源添加，失败！')
}
this.$message.success('更新资源添加，成功！')
this.dialogVisible = false;
this.getList();
}).catch(error => {
// 关闭加载
this.$message.warning('更新资源添加，失败！')
})
} else {
console.log('error submit!!');
return false;
}
});
},
getList(){
selectCustomers(this.query).then((response) => {
const res = response.data
if (res.code !== '200') {
return this.$message.error('获取消息收发记录，失败！')
}
// 获取列表数据
this.tableData = res.data.list
// 获取列表的总记录数
this.total = res.data.total
this.$message.success('获取消息收发记录，成功！');
}).catch(error => {
// 关闭加载
this.$message.error(error.toString())
})
},
handleSizeChange(val) {
this.query.pageSize=val;
this.getList();
},
handleCurrentChange(val) {
this.query.pageNum=val;
this.getList()
},
deleteRow(id) {
this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
confirmButtonText: '确定删除',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
delCustomer({id: id}).then((response) => {
const res = response.data
this.$message.success(res.msg)
this.getList()
}).catch(error => {
this.$message.error('删除车载运单，失败！')
})
}).catch(() => {
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
exportDataToExcel() {
// 获取当前日期作为文件名的一部分
const currentDate = new Date();
const fileName = `导出数据_${currentDate.toISOString().split('T')[0]}.xlsx`;
// 将表格数据转换为Excel格式
const ws = XLSX.utils.json_to_sheet(this.tableData);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 导出为Excel文件
XLSX.writeFile(wb, fileName);
// 或者使用file-saver保存文件
// const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
// try {
// saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName);
// } catch (e) {
// if (typeof console !== 'undefined') console.log(e, wbout);
// }
}
}
};
</script>
<style scoped>
</style>