朱兆平 / vue_cli · 提交

转到一个项目

作者 xudada
提交 d289184062d2059eedf2296966fb7e8d2e1dac37 1 个父辈 7dafbf10

客户配置页面添加

内嵌 并排对比
正在显示 3 个修改的文件 包含 588 行增加 和 1 行删除
  1 +import axios from 'axios'
  2 +import http from "../http";
  3 +
  4 +let baseServiceURL = 'cross-border-service'
  5 +
  6 +//新增客户配置
  7 +export const insertCustomer = params => { return http.post(`${baseServiceURL}/customer/insertCustomer`, params); };
  8 +//删除客户配置
  9 +export const delCustomer = params => { return axios.get(`${baseServiceURL}/customer/delCustomer`, { params: params }); };
  10 +//更新客户配置
  11 +export const ediCustomer = params => { return http.post(`${baseServiceURL}/customer/ediCustomer`, params); };
  12 +//客户配置列表
  13 +export const selectCustomers = params => { return axios.get(`${baseServiceURL}/customer/selectCustomers`, { params: params }); };
@@ -195,6 +195,7 @@ import satellite from "./views/deploy/satellite"; @@ -195,6 +195,7 @@ import satellite from "./views/deploy/satellite";
195 195
196 /*出口订单*/ 196 /*出口订单*/
197 import ExortOrder from './views/exportorder/Exportorder.vue' 197 import ExortOrder from './views/exportorder/Exportorder.vue'
  198 +import CustomerConfig from './views/exportorder/CustomerConfig.vue'
198 199
199 let routes = [ 200 let routes = [
200 { 201 {
@@ -225,7 +226,8 @@ let routes = [ @@ -225,7 +226,8 @@ let routes = [
225 name: '出口订单管理', 226 name: '出口订单管理',
226 iconCls: 'el-icon-collection', 227 iconCls: 'el-icon-collection',
227 children: [ 228 children: [
228 - {path: '/ExortOrder', component: ExortOrder, name: '出口订单'} 229 + {path: '/ExortOrder', component: ExortOrder, name: '出口订单'},
  230 + {path: '/CustomerConfig', component: CustomerConfig, name: '客户配置'}
229 ] 231 ]
230 }, 232 },
231 { 233 {
  1 +<template>
  2 + <div>
  3 + <!-- 第一行 -->
  4 + <el-row :gutter="24" >
  5 + <el-col :span="4">
  6 + <el-input size="medium" v-model="query.clientCode" placeholder="客户编码" clearable></el-input>
  7 + </el-col>
  8 + <el-col :span="4">
  9 + <el-input size="medium" v-model="query.ebcname" placeholder="电商企业名称" clearable></el-input>
  10 + </el-col>
  11 + <el-col :span="4">
  12 + <el-input size="medium" v-model="query.ebpname" placeholder="平台企业名称" clearable></el-input>
  13 + </el-col>
  14 + <el-col :span="4">
  15 + <el-input size="medium" v-model="query.logisticsName" placeholder="物流企业名称" clearable></el-input>
  16 + </el-col>
  17 + <el-col :span="4">
  18 + <el-input size="medium" v-model="query.agentName" placeholder="申报企业名称" clearable></el-input>
  19 + </el-col>
  20 + </el-row>
  21 +
  22 + <!-- 第二行 -->
  23 + <el-row :gutter="24" >
  24 + <el-col :span="4">
  25 + <el-input size="medium" v-model="query.customsName" placeholder="申报口岸名称" clearable></el-input>
  26 + </el-col>
  27 + </el-row>
  28 +
  29 + <!-- 第三行 -->
  30 + <el-row :gutter="24" >
  31 + <el-col :span="1.5">
  32 + <el-button size="medium" @click="getList">查询</el-button>
  33 + </el-col>
  34 + <el-col :span="1.5">
  35 + <el-button size="medium" type="info" @click="exportDataToExcel">导出</el-button>
  36 + </el-col>
  37 + <el-col :span="1.5">
  38 + <el-button size="medium" type="success" @click="addForm">新增</el-button>
  39 + </el-col>
  40 + <el-col :span="1.5">
  41 + <el-button size="medium" type="danger">删除</el-button>
  42 + </el-col>
  43 + </el-row>
  44 + <el-row :gutter="24" style="margin-left: 3px">
  45 + <el-table
  46 + ref="multipleTable"
  47 + :data="tableData"
  48 + tooltip-effect="dark"
  49 + style="width: 100%;"
  50 + size="medium"
  51 + @selection-change="handleSelectionChange">
  52 + <el-table-column
  53 + type="selection"
  54 + width="55">
  55 + </el-table-column>
  56 + <el-table-column
  57 + prop="clientCode"
  58 + label="客户编码"
  59 + width="120"
  60 + >
  61 + </el-table-column>
  62 + <el-table-column
  63 + prop="clientName"
  64 + label="客户名称"
  65 + width="120"
  66 + show-overflow-tooltip>
  67 + </el-table-column>
  68 + <!--<el-table-column
  69 + label="电商企业代码"
  70 + prop="ebccode"
  71 + width="120">
  72 + </el-table-column>-->
  73 + <el-table-column
  74 + prop="ebcname"
  75 + label="电商企业名称"
  76 + width="120"
  77 + show-overflow-tooltip>
  78 + </el-table-column>
  79 + <!--<el-table-column
  80 + prop="ebpcode"
  81 + label="电商平台代码"
  82 + show-overflow-tooltip>
  83 + </el-table-column>-->
  84 + <el-table-column
  85 + prop="ebpname"
  86 + label="电商平台名称"
  87 + width="120"
  88 + show-overflow-tooltip>
  89 + </el-table-column>
  90 + <!--<el-table-column
  91 + prop="logisticsCode"
  92 + label="物流企业代码"
  93 + show-overflow-tooltip>
  94 + </el-table-column>-->
  95 + <el-table-column
  96 + prop="logisticsName"
  97 + label="物流企业名称"
  98 + width="120"
  99 + show-overflow-tooltip>
  100 + </el-table-column>
  101 + <!--<el-table-column
  102 + prop="agentCode"
  103 + label="申报企业代码"
  104 + show-overflow-tooltip>
  105 + </el-table-column>-->
  106 + <el-table-column
  107 + prop="agentName"
  108 + label="申报企业名称"
  109 + width="120"
  110 + show-overflow-tooltip>
  111 + </el-table-column>
  112 + <!--<el-table-column
  113 + prop="customsCode"
  114 + label="申报口岸代码"
  115 + show-overflow-tooltip>
  116 + </el-table-column>-->
  117 + <el-table-column
  118 + prop="customsName"
  119 + label="申报口岸名称"
  120 + width="120"
  121 + show-overflow-tooltip>
  122 + </el-table-column>
  123 + <!--<el-table-column
  124 + prop="portCode"
  125 + label="出口口岸代码"
  126 + show-overflow-tooltip>
  127 + </el-table-column>-->
  128 + <el-table-column
  129 + prop="portName"
  130 + label="出口口岸名称"
  131 + width="120"
  132 + show-overflow-tooltip>
  133 + </el-table-column>
  134 + <!--<el-table-column
  135 + prop="ownerCode"
  136 + label="生产销售企业代码"
  137 + show-overflow-tooltip>
  138 + </el-table-column>-->
  139 + <el-table-column
  140 + prop="ownerName"
  141 + label="生产销售企业"
  142 + width="120"
  143 + show-overflow-tooltip>
  144 + </el-table-column>
  145 + <el-table-column
  146 + prop="loctNo"
  147 + label="监管场所"
  148 + show-overflow-tooltip>
  149 + </el-table-column>
  150 + <el-table-column
  151 + prop="createTime"
  152 + label="创建时间"
  153 + show-overflow-tooltip>
  154 + </el-table-column>
  155 +
  156 + <el-table-column
  157 + fixed="right"
  158 + label="操作"
  159 + width="120">
  160 + <template slot-scope="scope">
  161 + <el-button
  162 + @click.native.prevent="ediForm(scope.row)"
  163 + type="text"
  164 + style="color: #5BB75B"
  165 + size="small">
  166 + 更新
  167 + </el-button>
  168 + <el-button
  169 + @click.native.prevent="deleteRow(scope.row.id)"
  170 + type="text"
  171 + style="color: #5BB75B"
  172 + size="small">
  173 + 移除
  174 + </el-button>
  175 + </template>
  176 + </el-table-column>
  177 + </el-table>
  178 + </el-row>
  179 + <el-row>
  180 + <div class="block">
  181 + <el-pagination
  182 + @size-change="handleSizeChange"
  183 + @current-change="handleCurrentChange"
  184 + :current-page="query.pageNum"
  185 + :page-sizes="[100, 200, 300, 400]"
  186 + :page-size="query.pageSize"
  187 + layout="total, sizes, prev, pager, next, jumper"
  188 + :total="total">
  189 + </el-pagination>
  190 + </div>
  191 + </el-row>
  192 + <el-dialog
  193 + :title="'客户信息'+textMap[dialogStatus]"
  194 + :visible.sync="dialogVisible"
  195 + width="65%"
  196 + :before-close="handleClose">
  197 + <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
  198 + <el-row :gutter="20">
  199 + <el-col :span="10">
  200 + <el-form-item label="客户编码" prop="clientCode">
  201 + <el-input size="medium" v-model="ruleForm.clientCode"></el-input>
  202 + </el-form-item>
  203 + </el-col>
  204 + <el-col :span="10">
  205 + <el-form-item label="客户名称" prop="clientName">
  206 + <el-input size="medium" v-model="ruleForm.clientName"></el-input>
  207 + </el-form-item>
  208 + </el-col>
  209 + </el-row>
  210 + <el-row :gutter="20">
  211 + <el-col :span="10">
  212 + <el-form-item label="电商企业代码" prop="ebccode">
  213 + <el-input size="medium" v-model="ruleForm.ebccode"></el-input>
  214 + </el-form-item>
  215 + </el-col>
  216 + <el-col :span="10">
  217 + <el-form-item label="电商企业名称" prop="ebcname">
  218 + <el-input size="medium" v-model="ruleForm.ebcname"></el-input>
  219 + </el-form-item>
  220 + </el-col>
  221 + </el-row>
  222 + <el-row :gutter="20">
  223 + <el-col :span="10">
  224 + <el-form-item label="电商平台代码" prop="ebpcode">
  225 + <el-input size="medium" v-model="ruleForm.ebpcode"></el-input>
  226 + </el-form-item>
  227 + </el-col>
  228 + <el-col :span="10">
  229 + <el-form-item label="电商平台名称" prop="ebpname">
  230 + <el-input size="medium" v-model="ruleForm.ebpname"></el-input>
  231 + </el-form-item>
  232 + </el-col>
  233 + </el-row>
  234 + <el-row :gutter="20">
  235 + <el-col :span="10">
  236 + <el-form-item label="物流企业代码" prop="logisticsCode">
  237 + <el-input size="medium" v-model="ruleForm.logisticsCode"></el-input>
  238 + </el-form-item>
  239 + </el-col>
  240 + <el-col :span="10">
  241 + <el-form-item label="物流企业名称" prop="logisticsName">
  242 + <el-input size="medium" v-model="ruleForm.logisticsName"></el-input>
  243 + </el-form-item>
  244 + </el-col>
  245 + </el-row>
  246 + <el-row :gutter="20">
  247 + <el-col :span="10">
  248 + <el-form-item label="申报企业代码" prop="agentCode">
  249 + <el-input size="medium" v-model="ruleForm.agentCode"></el-input>
  250 + </el-form-item>
  251 + </el-col>
  252 + <el-col :span="10">
  253 + <el-form-item label="申报企业名称" prop="agentName">
  254 + <el-input size="medium" v-model="ruleForm.agentName"></el-input>
  255 + </el-form-item>
  256 + </el-col>
  257 + </el-row>
  258 + <el-row :gutter="20">
  259 + <el-col :span="10">
  260 + <el-form-item label="申报口岸代码" prop="customsCode">
  261 + <el-input size="medium" v-model="ruleForm.customsCode"></el-input>
  262 + </el-form-item>
  263 + </el-col>
  264 + <el-col :span="10">
  265 + <el-form-item label="申报口岸名称" prop="customsName">
  266 + <el-input size="medium" v-model="ruleForm.customsName"></el-input>
  267 + </el-form-item>
  268 + </el-col>
  269 + </el-row>
  270 + <el-row :gutter="20">
  271 + <el-col :span="10">
  272 + <el-form-item label="出口口岸代码" prop="portCode">
  273 + <el-input size="medium" v-model="ruleForm.portCode"></el-input>
  274 + </el-form-item>
  275 + </el-col>
  276 + <el-col :span="10">
  277 + <el-form-item label="出口口岸名称" prop="portName">
  278 + <el-input size="medium" v-model="ruleForm.portName"></el-input>
  279 + </el-form-item>
  280 + </el-col>
  281 + </el-row>
  282 + <el-row :gutter="20">
  283 + <el-col :span="10">
  284 + <el-form-item label="出口口岸代码" prop="portCode">
  285 + <el-input size="medium" v-model="ruleForm.portCode"></el-input>
  286 + </el-form-item>
  287 + </el-col>
  288 + <el-col :span="10">
  289 + <el-form-item label="出口口岸名称" prop="portName">
  290 + <el-input size="medium" v-model="ruleForm.portName"></el-input>
  291 + </el-form-item>
  292 + </el-col>
  293 + </el-row>
  294 + <el-row :gutter="20">
  295 + <el-col :span="10">
  296 + <el-form-item label="生产销售企业代码" prop="ownerCode">
  297 + <el-input size="medium" v-model="ruleForm.ownerCode"></el-input>
  298 + </el-form-item>
  299 + </el-col>
  300 + <el-col :span="10">
  301 + <el-form-item label="生产销售企业名称" prop="ownerName">
  302 + <el-input size="medium" v-model="ruleForm.ownerName"></el-input>
  303 + </el-form-item>
  304 + </el-col>
  305 + </el-row>
  306 + <el-row :gutter="20">
  307 + <el-col :span="10">
  308 + <el-form-item label="监管场所" prop="loctNo">
  309 + <el-input size="medium" v-model="ruleForm.loctNo"></el-input>
  310 + </el-form-item>
  311 + </el-col>
  312 + </el-row>
  313 + <el-row :gutter="20">
  314 + <el-col :span="20">
  315 + <el-form-item>
  316 + <el-button type="primary" @click="dialogStatus==='create'?addsubmitForm('ruleForm'):edisubmitForm('ruleForm')">保存</el-button>
  317 + </el-form-item>
  318 + </el-col>
  319 + </el-row>
  320 + </el-form>
  321 + </el-dialog>
  322 + </div>
  323 +</template>
  324 +
  325 +<script>
  326 + import {insertCustomer,delCustomer,ediCustomer,selectCustomers} from '../../api/consigner/customerconfig'
  327 + import * as XLSX from 'xlsx';
  328 + import { saveAs } from 'file-saver';
  329 + export default {
  330 + data() {
  331 + return {
  332 + dialogStatus: '',
  333 + dialogVisible: false,
  334 + textMap: {
  335 + update: '更新',
  336 + create: '新增'
  337 + },
  338 + ruleForm: {
  339 + id:0,
  340 + userId:'',
  341 + userName:'',
  342 + ext1:'',
  343 + ext2:'',
  344 + ext3:'',
  345 + clientCode: '',
  346 + clientName:'',
  347 + ebccode:'',
  348 + ebcname: '',
  349 + ebpcode:'',
  350 + ebpname:'',
  351 + logisticsCode:'',
  352 + logisticsName:'',
  353 + agentCode:'',
  354 + agentName:'',
  355 + customsCode:'',
  356 + customsName:'',
  357 + portCode:'',
  358 + portName:'',
  359 + ownerCode:'',
  360 + ownerName:'',
  361 + loctNo:''
  362 + },
  363 + rules: {
  364 + clientCode: [
  365 + { required: true, message: '请输入客户编码', trigger: 'blur' },
  366 + { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  367 + ],
  368 + clientName: [
  369 + { required: true, message: '请输入客户名称', trigger: 'blur' },
  370 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  371 + ],
  372 + ebccode: [
  373 + { required: true, message: '请输入电商企业代码', trigger: 'blur' },
  374 + { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  375 + ],
  376 + ebcname: [
  377 + { required: true, message: '请输入电商企业名称', trigger: 'blur' },
  378 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  379 + ],
  380 + ebpcode: [
  381 + { required: true, message: '请输入电商平台代码', trigger: 'blur' },
  382 + { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  383 + ],
  384 + ebpname: [
  385 + { required: true, message: '请输入电商平台名称', trigger: 'blur' },
  386 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  387 + ],
  388 + logisticsCode: [
  389 + { required: true, message: '请输入物流企业代码', trigger: 'blur' },
  390 + { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  391 + ],
  392 + logisticsName: [
  393 + { required: true, message: '请输入物流企业名称', trigger: 'blur' },
  394 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  395 + ],
  396 + agentCode: [
  397 + { required: true, message: '请输入申报企业代码', trigger: 'blur' },
  398 + { min: 1, max: 18, message: '长度在 1 到 18 个字符', trigger: 'blur' }
  399 + ],
  400 + agentName: [
  401 + { required: true, message: '请输入申报企业名称', trigger: 'blur' },
  402 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  403 + ],
  404 + customsCode: [
  405 + { required: true, message: '请输入申报口岸代码', trigger: 'blur' },
  406 + { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
  407 + ],
  408 + customsName: [
  409 + { required: true, message: '请输入申报口岸名称', trigger: 'blur' },
  410 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  411 + ],
  412 + portCode: [
  413 + { required: true, message: '请输入出口口岸代码', trigger: 'blur' },
  414 + { min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' }
  415 + ],
  416 + portName: [
  417 + { required: true, message: '请输入出口口岸名称', trigger: 'blur' },
  418 + { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
  419 + ],
  420 + },
  421 + total:0,
  422 + tableData: [],
  423 + multipleSelection: [],
  424 + query: {
  425 + clientCode: '',
  426 + ebcname: '',
  427 + ebpname: '',
  428 + logisticsName: '',
  429 + agentName: '',
  430 + customsName: '',
  431 + pageNum:1,
  432 + pageSize:20
  433 + },
  434 + };
  435 + },
  436 + mounted() {
  437 + this.getList();
  438 + },
  439 + methods: {
  440 + addForm(){
  441 + this.dialogVisible = true;
  442 + this.dialogStatus = 'create';
  443 + },
  444 + ediForm(row){
  445 + this.dialogVisible = true;
  446 + this.dialogStatus = 'update';
  447 + this.ruleForm=row;
  448 + },
  449 + //Dialog关闭提示
  450 + handleClose(done) {
  451 + this.$confirm('确认关闭？')
  452 + .then(_ => {
  453 + done();
  454 + })
  455 + .catch(_ => {
  456 + });
  457 + },
  458 + addsubmitForm(formName) {
  459 + this.$refs[formName].validate((valid) => {
  460 + if (valid) {
  461 + this.ruleForm.id='';
  462 + insertCustomer(this.ruleForm).then((response) => {
  463 + const res = response.data
  464 + if (res.code !== '200') {
  465 + return this.$message.error('资源添加，失败！')
  466 + }
  467 + this.$message.success('资源添加，成功！')
  468 + this.dialogVisible = false;
  469 + this.getList();
  470 + }).catch(error => {
  471 + // 关闭加载
  472 + this.$message.warning('资源添加，失败！')
  473 + })
  474 + } else {
  475 + console.log('error submit!!');
  476 + return false;
  477 + }
  478 + });
  479 + },
  480 + edisubmitForm(formName) {
  481 + this.$refs[formName].validate((valid) => {
  482 + if (valid) {
  483 + ediCustomer(this.ruleForm).then((response) => {
  484 + const res = response.data
  485 + if (res.code !== '200') {
  486 + return this.$message.error('更新资源添加，失败！')
  487 + }
  488 + this.$message.success('更新资源添加，成功！')
  489 + this.dialogVisible = false;
  490 + this.getList();
  491 + }).catch(error => {
  492 + // 关闭加载
  493 + this.$message.warning('更新资源添加，失败！')
  494 + })
  495 + } else {
  496 + console.log('error submit!!');
  497 + return false;
  498 + }
  499 + });
  500 + },
  501 + getList(){
  502 + selectCustomers(this.query).then((response) => {
  503 + const res = response.data
  504 + if (res.code !== '200') {
  505 + return this.$message.error('获取消息收发记录，失败！')
  506 + }
  507 + // 获取列表数据
  508 + this.tableData = res.data.list
  509 + // 获取列表的总记录数
  510 + this.total = res.data.total
  511 + this.$message.success('获取消息收发记录，成功！');
  512 + }).catch(error => {
  513 + // 关闭加载
  514 + this.$message.error(error.toString())
  515 + })
  516 + },
  517 + handleSizeChange(val) {
  518 + this.query.pageSize=val;
  519 + this.getList();
  520 + },
  521 + handleCurrentChange(val) {
  522 + this.query.pageNum=val;
  523 + this.getList()
  524 + },
  525 + deleteRow(id) {
  526 + this.$confirm('此操作永久删除该消息收发记录, 是否继续?', '警告', {
  527 + confirmButtonText: '确定删除',
  528 + cancelButtonText: '取消',
  529 + type: 'warning'
  530 + }
  531 + ).then(() => {
  532 + delCustomer({id: id}).then((response) => {
  533 + const res = response.data
  534 + this.$message.success(res.msg)
  535 + this.getList()
  536 + }).catch(error => {
  537 + this.$message.error('删除车载运单，失败！')
  538 + })
  539 + }).catch(() => {
  540 + })
  541 + },
  542 + handleSelectionChange(val) {
  543 + this.multipleSelection = val;
  544 + },
  545 + exportDataToExcel() {
  546 + // 获取当前日期作为文件名的一部分
  547 + const currentDate = new Date();
  548 + const fileName = `导出数据_${currentDate.toISOString().split('T')[0]}.xlsx`;
  549 +
  550 + // 将表格数据转换为Excel格式
  551 + const ws = XLSX.utils.json_to_sheet(this.tableData);
  552 + const wb = XLSX.utils.book_new();
  553 + XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  554 +
  555 + // 导出为Excel文件
  556 + XLSX.writeFile(wb, fileName);
  557 +
  558 + // 或者使用file-saver保存文件
  559 + // const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  560 + // try {
  561 + // saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName);
  562 + // } catch (e) {
  563 + // if (typeof console !== 'undefined') console.log(e, wbout);
  564 + // }
  565 + }
  566 + }
  567 + };
  568 +</script>
  569 +
  570 +<style scoped>
  571 +
  572 +</style>