|
|
<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 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' }
|
|
|
],
|
|
|
},
|
|
|
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> |
...
|
...
|
|