|
|
|
<template>
|
|
|
|
<section>
|
|
|
|
<!--工具条-->
|
|
|
|
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
|
|
|
|
<el-form :inline="true" :model="filters">
|
|
|
|
<el-form-item>
|
|
|
|
<el-input v-model="filters.companyName" placeholder="关键字查询"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-button type="primary" v-on:click="getConsigner()">查询</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-button type="primary" @click="companyAdd">新增</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
<!--列表-->
|
|
|
|
<el-table :data="consignerList" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
|
|
|
|
<el-table-column type="selection" width="55">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="序号" type="index">
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="companyName" label="发货人公司" >
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="conCity" label="发货人城市" >
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="country" label="发货人国家代码" >
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="conPhone" label="发货人电话" >
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="enterprise" label="发货人企业代码" >
|
|
|
|
</el-table-column>
|
|
|
|
<el-table-column label="操作" min-width="150">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
|
|
|
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
<!--编辑界面-->
|
|
|
|
<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
|
|
|
|
<el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
|
|
|
|
<el-form-item label="ID">
|
|
|
|
<span>{{editForm.id}}</span>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="公司" prop="companyName">
|
|
|
|
<el-input v-model="editForm.companyName" auto-complete="on" placeholder="公司"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="发货人名称" prop="conName">
|
|
|
|
<el-input v-model="editForm.conName" auto-complete="on" placeholder="发货人名称"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="电话" prop="conPhone">
|
|
|
|
<el-input v-model="editForm.conPhone" auto-complete="on" placeholder="电话"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="传真" prop="conFax">
|
|
|
|
<el-input v-model="editForm.conFax" auto-complete="on" placeholder="传真"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="国家代码" prop="country">
|
|
|
|
<el-input v-model="editForm.country" auto-complete="on" placeholder="国家代码"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="城市" prop="conCity">
|
|
|
|
<el-input v-model="editForm.conCity" auto-complete="on" placeholder="城市"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="邮编" prop="conPostcode">
|
|
|
|
<el-input v-model="editForm.conPostcode" auto-complete="on" placeholder="邮编"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="地址" prop="conAddress">
|
|
|
|
<el-input v-model="editForm.conAddress" auto-complete="on" placeholder="地址"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="发货人AEO" prop="conAeo">
|
|
|
|
<el-input v-model="editForm.conAeo" auto-complete="on" placeholder="发货人AEO"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-row>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-form-item label="企业代码" prop="enterprise">
|
|
|
|
<el-select v-model="editForm.enterprise" placeholder="请选择">
|
|
|
|
<el-option
|
|
|
|
v-for="item in options"
|
|
|
|
:key="item.value"
|
|
|
|
:label="item.label"
|
|
|
|
:value="item.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="10">
|
|
|
|
<el-form-item label="+" prop="enterprise">
|
|
|
|
<el-input v-model="editForm.ent"/>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<el-button @click.native="editFormVisible = false">取消</el-button>
|
|
|
|
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
<!--新增界面-->
|
|
|
|
<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
|
|
|
|
<el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
|
|
|
|
<el-form-item label="公司" prop="companyName">
|
|
|
|
<el-input v-model="addForm.companyName" auto-complete="on" placeholder="公司"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="发货人名称" prop="conName">
|
|
|
|
<el-input v-model="addForm.conName" auto-complete="on" placeholder="发货人名称"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="电话" prop="conPhone">
|
|
|
|
<el-input v-model="addForm.conPhone" auto-complete="on" placeholder="电话"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="传真" prop="conFax">
|
|
|
|
<el-input v-model="addForm.conFax" auto-complete="on" placeholder="传真"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="国家代码" prop="country">
|
|
|
|
<el-input v-model="addForm.country" auto-complete="on" placeholder="国家代码"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="城市" prop="conCity">
|
|
|
|
<el-input v-model="addForm.conCity" auto-complete="on" placeholder="城市"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="邮编" prop="conPostcode">
|
|
|
|
<el-input v-model="addForm.conPostcode" auto-complete="on" placeholder="邮编"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="地址" prop="conAddress">
|
|
|
|
<el-input v-model="addForm.conAddress" auto-complete="on" placeholder="地址"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="发货人AEO" prop="conAeo">
|
|
|
|
<el-input v-model="addForm.conAeo" auto-complete="on" placeholder="发货人AEO"></el-input>
|
|
|
|
</el-form-item>
|
|
|
|
<el-row>
|
|
|
|
<el-col :span="6">
|
|
|
|
<el-form-item label="企业代码" prop="enterprise">
|
|
|
|
<el-select v-model="addForm.enterprise" placeholder="请选择">
|
|
|
|
<el-option
|
|
|
|
v-for="item in options"
|
|
|
|
:key="item.value"
|
|
|
|
:label="item.label"
|
|
|
|
:value="item.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
<el-col :span="10">
|
|
|
|
<el-form-item label="+" prop="enterprise">
|
|
|
|
<el-input v-model="addForm.ent"/>
|
|
|
|
</el-form-item>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-form>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
<el-button @click.native="addFormVisible = false">取消</el-button>
|
|
|
|
<el-button type="primary" @click.native="addSubmit">提交</el-button>
|
|
|
|
</div>
|
|
|
|
</el-dialog>
|
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import util from '../../common/js/util'
|
|
|
|
import NProgress from 'nprogress'
|
|
|
|
import { getList, remove, add, edit} from '../../api/consigner/consigner';
|
|
|
|
import moment from 'moment'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
|
|
|
|
options: [{
|
|
|
|
value: 'USCI',
|
|
|
|
label: 'USCI'
|
|
|
|
}, {
|
|
|
|
value: 'OC',
|
|
|
|
label: 'OC'
|
|
|
|
}, {
|
|
|
|
value: '9999',
|
|
|
|
label: '9999'
|
|
|
|
}],
|
|
|
|
|
|
|
|
filters: {
|
|
|
|
companyName: ''
|
|
|
|
},
|
|
|
|
consignerList: [],
|
|
|
|
total: 0,
|
|
|
|
pageSize: 1,
|
|
|
|
limitSize: 5,
|
|
|
|
listLoading: false,
|
|
|
|
//编辑界面是否显示
|
|
|
|
editFormVisible: false,
|
|
|
|
editLoading: false,
|
|
|
|
editFormRules: {
|
|
|
|
|
|
|
|
companyName: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
],
|
|
|
|
|
|
|
|
conName: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
],
|
|
|
|
country: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
],
|
|
|
|
enterprise: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
],
|
|
|
|
conCity: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
],
|
|
|
|
conAddress: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
]
|
|
|
|
},
|
|
|
|
//编辑界面数据
|
|
|
|
editForm: {
|
|
|
|
id:'',
|
|
|
|
companyName: '',
|
|
|
|
conAddress: '',
|
|
|
|
conAeo: '',
|
|
|
|
conCity: '',
|
|
|
|
conFax: '',
|
|
|
|
conName: '',
|
|
|
|
conPhone: '',
|
|
|
|
conPostcode: '',
|
|
|
|
country: '',
|
|
|
|
enterprise: '',
|
|
|
|
ent: ''
|
|
|
|
},
|
|
|
|
//新增界面是否显示
|
|
|
|
addFormVisible: false,
|
|
|
|
addFormRules: {
|
|
|
|
companyName: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
],
|
|
|
|
conName: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
],
|
|
|
|
country: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
],
|
|
|
|
enterprise: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
],
|
|
|
|
conCity: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
],
|
|
|
|
conAddress: [
|
|
|
|
{ required: true, message: '不能为空！！!', trigger: 'blur' }
|
|
|
|
]
|
|
|
|
},
|
|
|
|
|
|
|
|
//新增界面数据
|
|
|
|
addForm: {
|
|
|
|
companyName: '',
|
|
|
|
conAddress: '',
|
|
|
|
conAeo: '',
|
|
|
|
conCity: '',
|
|
|
|
conFax: '',
|
|
|
|
conName: '',
|
|
|
|
conPhone: '',
|
|
|
|
conPostcode: '',
|
|
|
|
country: '',
|
|
|
|
enterprise: '',
|
|
|
|
ent: ''
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.getConsigner();
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
//获取发货人列表
|
|
|
|
getConsigner() {
|
|
|
|
let para = {
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
limitSize: this.limitSize,
|
|
|
|
companyName: this.filters.companyName
|
|
|
|
};
|
|
|
|
this.listLoading = true;
|
|
|
|
getList(para).then((res) => {
|
|
|
|
this.total = res.data.data.total;
|
|
|
|
this.consignerList = res.data.data.list;
|
|
|
|
this.listLoading = false;
|
|
|
|
}).catch((error) => {
|
|
|
|
this.listLoading = false;
|
|
|
|
if(null!= error.response && error.response!==undefined){
|
|
|
|
let status= error.response.status;
|
|
|
|
let msg = error.response.statusText;
|
|
|
|
alert(status+msg);
|
|
|
|
}else {
|
|
|
|
alert(error);
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
//删除
|
|
|
|
handleDel: function (index, row) {
|
|
|
|
this.$confirm('确认删除该记录吗?', '提示', {
|
|
|
|
type: 'warning'
|
|
|
|
}).then(() => {
|
|
|
|
this.listLoading = true;
|
|
|
|
let para = {id: row.id };
|
|
|
|
remove(para).then((res) => {
|
|
|
|
if (res.data.code == 200){
|
|
|
|
this.listLoading = false;
|
|
|
|
this.$message({
|
|
|
|
message: '删除成功',
|
|
|
|
type: 'success'
|
|
|
|
});
|
|
|
|
this.getConsigner();
|
|
|
|
}else {
|
|
|
|
this.listLoading = false;
|
|
|
|
this.$message({
|
|
|
|
message: '删除失败',
|
|
|
|
type: 'error'
|
|
|
|
});
|
|
|
|
this.getConsigner();
|
|
|
|
}
|
|
|
|
|
|
|
|
}).catch((error) => {
|
|
|
|
this.listLoading = false;
|
|
|
|
alert(error);
|
|
|
|
});
|
|
|
|
}).catch();
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 显示编辑界面
|
|
|
|
* @param index
|
|
|
|
* @param row 为这行的数据对象
|
|
|
|
*/
|
|
|
|
handleEdit: function (index, row) {
|
|
|
|
this.editFormVisible = true;
|
|
|
|
let strings = row.enterprise.split("+");
|
|
|
|
row.enterprise = strings[0];
|
|
|
|
row.ent = strings[1]
|
|
|
|
this.editForm = Object.assign({}, row);
|
|
|
|
this.getConsigner();
|
|
|
|
},
|
|
|
|
|
|
|
|
//编辑
|
|
|
|
editSubmit: function () {
|
|
|
|
|
|
|
|
this.$refs.editForm.validate((valid) => {
|
|
|
|
if (valid) {
|
|
|
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
|
|
|
this.editLoading = true;
|
|
|
|
this.editForm.enterprise = this.editForm.enterprise+"+"+this.editForm.ent;
|
|
|
|
let para = Object.assign({}, this.editForm);
|
|
|
|
this.editLoading = true;
|
|
|
|
edit(para).then((res) => {
|
|
|
|
if (res.data.code == 200){
|
|
|
|
this.$message({
|
|
|
|
message: '提交成功',
|
|
|
|
type: 'success'
|
|
|
|
});
|
|
|
|
this.$refs['editForm'].resetFields();
|
|
|
|
this.editFormVisible = false;
|
|
|
|
this.getConsigner();
|
|
|
|
}else {
|
|
|
|
this.$message({
|
|
|
|
message: '提交失败',
|
|
|
|
type: 'error'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
}).catch(error => alert(error));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
//显示新增界面，每次点开初始化数据
|
|
|
|
companyAdd: function () {
|
|
|
|
this.addFormVisible = true;
|
|
|
|
this.getConsigner();
|
|
|
|
},
|
|
|
|
//新增
|
|
|
|
addSubmit: function () {
|
|
|
|
this.$refs.addForm.validate((valid) => {
|
|
|
|
if (valid) {
|
|
|
|
this.$confirm('确认提交吗？', '提示', {}).then(() => {
|
|
|
|
//NProgress.start();
|
|
|
|
this.listLoading = true;
|
|
|
|
this.addForm.enterprise = this.addForm.enterprise+"+"+this.addForm.ent;
|
|
|
|
let para = Object.assign({}, this.addForm);
|
|
|
|
add(para).then((res) => {
|
|
|
|
if (res.data.code == 200){
|
|
|
|
//NProgress.done();
|
|
|
|
this.$message({
|
|
|
|
message: '提交成功',
|
|
|
|
type: 'success'
|
|
|
|
});
|
|
|
|
this.$refs['addForm'].resetFields();
|
|
|
|
this.addFormVisible = false;
|
|
|
|
this.getConsigner();
|
|
|
|
}else {
|
|
|
|
this.$message({
|
|
|
|
message: '提交失败',
|
|
|
|
type: 'error'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}).catch(error => alert(error));
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
selsChange: function (sels) {
|
|
|
|
this.sels = sels;
|
|
|
|
},
|
|
|
|
//批量删除
|
|
|
|
batchRemove: function () {
|
|
|
|
var ids = this.sels.map(item => item.id).toString();
|
|
|
|
this.$confirm('确认删除选中记录吗？', '提示', {
|
|
|
|
type: 'warning'
|
|
|
|
}).then(() => {
|
|
|
|
this.listLoading = true;
|
|
|
|
//NProgress.start();
|
|
|
|
let para = { ids: ids };
|
|
|
|
batchRemove(para).then((res) => {
|
|
|
|
this.listLoading = false;
|
|
|
|
//NProgress.done();
|
|
|
|
this.$message({
|
|
|
|
message: '删除成功',
|
|
|
|
type: 'success'
|
|
|
|
});
|
|
|
|
this.getConsigner();
|
|
|
|
});
|
|
|
|
}).catch(() => {
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
}
|
|
|
|
</script> |
|
|
\ No newline at end of file |
...
|
...
|
|
