<!DOCTYPE html> <html> <head> <title>入境登记-添加/修改</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- 所有的 css js 资源 --> <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css"> <link rel="stylesheet" href="../../static/sa.css"> <script src="../../static/kj/vue.min.js"></script> <script src="../../static/kj/element-ui/index.js"></script> <script src="../../static/kj/httpVueLoader.js"></script> <script src="../../static/kj/jquery.min.js"></script> <script src="../../static/kj/layer/layer.js"></script> <script src="../../static/sa.js"></script> <script src="../../static/kj/upload-util.js"></script> <style type="text/css"> .c-panel .el-form .c-label { width: 8em !important; } .c-panel .el-form .c-panel .el-form { width: 200px; } .item-num .el-input__inner { width: 130px; } .xj { display: inline; color: red; margin-left: 9px; font-weight: bold; } .hj { color: red; margin-left: 9px; font-weight: bold; } </style> </head> <body> <div class="vue-box sbot" style="display: none;" :style="'display: block;'"> <!-- ------- 内容部分 ------- --> <div class="s-body"> <div class="c-panel"> <div class="c-title">数据添加</div> <el-form v-if="m" label-position="left"> <el-row> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>基本资料</span> </div> <div> <el-row> <el-col span=8> <div class="c-item"> <label class="c-label"><span style="color: red;">*</span>补录原因:</label> <el-input v-model="m.supplementReason" placeholder="补录原因" clearable> </el-input> </div> <div class="c-item"> <label class="c-label">支付状态:</label> <el-select v-model="m.payStatus" placeholder="请选择" > <el-option label="未支付" :value="1"> </el-option> <el-option label="已支付" :value="3"> </el-option> </el-select> </div> <div class="c-item"> <label class="c-label"><span style="color: red;">*</span>业务项目:</label> <el-select v-model="m.goodsId" placeholder="请选择" disabled> <el-option v-for="item in goodsList" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </div> <div class="c-item" v-if="goods.needDeclare==1"> <label class="c-label"> <span style="color: red;">*</span> 申报单号:</label> <el-input v-model="m.declareNo" placeholder="选择申报单" :readonly="goods.needDeclare==1" disabled> </el-input> </div> </el-col> <el-col span=8> <div class="c-item" v-if="goods.needCustomer"> <label class="c-label"><span style="color: red;">*</span>客户:</label> <el-select disabled v-model="m.customerId" placeholder="请选择"> <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </div> <div class="c-item" v-if="goods.needOwner==1" > <label class="c-label"> <span style="color: red;">*</span> 货主:</label> <el-input v-model="m.owner" placeholder="填写货主" disabled> </el-input> </div> </el-col> <el-col span=8> <div class="c-item" v-if="m.payStatus===3"> <label class="c-label">支付时间:</label> <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="m.payTime"></el-date-picker> </div> <div class="c-item"> <label class="c-label">作业人员:</label> <el-input v-model="m.operator" placeholder="作业人员" disabled> </el-input> </div> <div class="c-item"> <label class="c-label"><span style="color: red;" v-if="goods.needOperateTime==1">*</span>作业时间:</label> <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" disabled v-model="m.operateTime"></el-date-picker> </div> </el-col> </el-row> <div class="c-item" v-if="m.payStatus==3" > <label class="c-label"> <span style="color: red;">*</span> 微信支付单号:</label> <el-input v-model="m.transactionId" placeholder="微信支付单号"> </el-input> </div> </div> </el-card> </el-row> <el-row> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>车辆</span> <el-button style="float: right;" icon="el-icon-plus" type="primary" @click="showAddModal" v-if="goods.mulCar==1||car.list.length==0">添加 </el-button> </div> <el-table :data="car.list"> <el-table-column prop="carNo" label="车牌号" width="100"> </el-table-column> <el-table-column prop="carSize" label="规格" width="90"> </el-table-column> <el-table-column prop="carType" label="类型" width="90"> </el-table-column> <el-table-column prop="netWeight" label="载重" width="90"> </el-table-column> <el-table-column prop="realInTime" label="入场时间" align="center"> <template slot-scope="s"> <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="s.row.realInTime"></el-date-picker> </template> </el-table-column> <el-table-column prop="realOutTime" label="离场时间" align="center" > <template slot-scope="s"> <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="s.row.realOutTime"></el-date-picker> </template> </el-table-column> <el-table-column prop="payType" label="支付" align="center" > <template slot-scope="s"> <el-select v-model="s.row.payType" placeholder="请选择" > <el-option label="未支付" value="未支付"> </el-option> <el-option label="已支付" value="已支付"> </el-option> <el-option label="免费" value="免费"> </el-option> </el-select> </template> </el-table-column> <el-table-column prop="payTime" label="支付时间" align="center" > <template slot-scope="s"> <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :disabled="s.row.payType!=='已支付'" v-model="s.row.payTime"></el-date-picker> </template> </el-table-column> </el-table> </el-card> </el-row> <el-row> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>收费项</span> </div> <div> <el-form-item v-for="(type,index) in itemTypeList"> <el-row justify="center"> <el-col span="9"> <label>{{type.name}}:</label> <el-select v-model="type.itemId" style="width: 120px;" disabled placeholder="请选择"> <el-option v-for="item in type.items" :key="item.id" :label="item.itemName" :value="item.id"> </el-option> </el-select> </el-col> <el-col span="7"> <el-input-number style="margin-left: 60px;" class="item-num" v-model="type.num" :min="1" :max="10" size="mini" :disabled="type.inc==0"></el-input-number> <div class="xj" v-if="type.itemId"> {{type.price*type.num}}元 </div> </el-col> <el-col span="8"> <label class="c-label"> 备注:</label> <el-input v-model="type.remark" placeholder="请输入备注" disabled> </el-input> </el-col> </el-row> <el-divider></el-divider> </el-form-item> <div class="hj" v-if="totalPrice>0"> 合计业务费用:{{totalPrice}}<label>元</label> </div> </div> </el-card> </el-row> </el-form> </div> </div> <!-- ------- 底部按钮 ------- --> <div class="s-foot"> <el-button type="primary" @click="ok()">确定</el-button> <el-button @click="closeFn()">取消</el-button> </div> <el-dialog title="车辆录入" :visible.sync="car.visible" width="400"> <span> <el-form label-position="left"> <div class="c-item"> <label class="c-label"><span style="color: red;">*</span>车牌号:</label> <el-autocomplete v-model="car.form.carNo" placeholder="请输入车牌号" value-key='carNo' :fetch-suggestions="queryCarAsync"> </el-autocomplete> </div> <div class="c-item"> <label class="c-label">车辆类型:</label> <el-select v-model="car.form.carType" placeholder="请选择" @change="carTypeChange"> <el-option :label="item.name" :value="item.name" v-for="(item,index) in carTypeList"> </el-option> </el-select> </div> <div class="c-item"> <label class="c-label"> <span style="color: red;" v-if="goods.needCarSize==1">*</span> 规格(米):</label> <el-input-number class="item-num" v-model="car.form.carSize" :min="1" :max="50"> </el-input-number> </div> <div class="c-item" v-if="car.form.carType&&car.form.carType.indexOf('空')==-1"> <label class="c-label"> <span style="color: red;" v-if="goods.needCarSize==1">*</span> 载重(kg):</label> <el-input-number class="item-num" v-model="car.form.netWeight" :min="1" :max="999999"> </el-input-number> </div> </el-form> </span> <span slot="footer" class="dialog-footer"> <el-button @click="car.visible = false">取 消</el-button> <el-button type="primary" @click="confirmAdd">确 定</el-button> </span> </el-dialog> <el-dialog title="申报单" :visible.sync="declare.visible" width="90%"> <div class="delect-search"> 申报人: <el-input style="width: 140px;" v-model="declare.p.declarePeople" placeholder="申报人"> </el-input> <el-button type="primary" @click="getDeclareList">搜索</el-button> <el-button type="info" @click="resetDclare">重置</el-button> </div> <el-card class="box-card" style="margin-top: 20px;"> <div slot="header"> <span>列表</span> </div> <el-table :data="declare.list" ref="declareTable"> <el-table-column type="selection"> </el-table-column> <el-table-column prop="declarePeople" label="申报人"> </el-table-column> <el-table-column prop="customerName" label="申报公司" width=200> </el-table-column> <el-table-column prop="sendUnit" label="货主" width=200> </el-table-column> <el-table-column prop="createTime" width="140" label="申报时间"> </el-table-column> <el-table-column prop="declareNo" width="180" label="申报单号"> </el-table-column> <el-table-column prop="goodsName" label="产品学名"> </el-table-column> <el-table-column prop="carNo" label="越南车牌"> </el-table-column> <el-table-column prop="grossWeight" label="毛重(kg)"> </el-table-column> </el-table> <div class="block"> <el-pagination layout="prev, pager, next" @current-change="getDeclareList" :page-size="declare.p.pageSize" :total="declare.p.dataCount" :current-page="declare.p.pageNo"> </el-pagination> </div> </el-card> <span slot="footer" class="dialog-footer"> <el-button @click="declare.visible = false">取 消</el-button> <el-button type="primary" @click="confirmSelectDeclare">确 定</el-button> </span> </el-dialog> </div> <script> var app = new Vue({ components: { "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'), "sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue') }, el: '.vue-box', data: { m: { id: sa.p('id', ''), // 主键 customerId: '', // 客户id customerName: '', // 客户名称 operateTime: '', no: '', // 编号 goodsId: '', goodsName: '', // 商品 }, // 实体对象 customerList: [], carList: [], currentCustomerId: 1, itemTypeList: [], filterTypeList: [], goodsList: [], tableData: [], car: { visible: false, list: [], form: { carNo: '', carType: '', netWeight: '', carSize: '' } }, declare: { visible: false, list: [], p: { pageNo: 1, pageSize: 8, dataCount: 0, declarePeople: '', production: '', declareNo: '1' } }, goods: { id: '', name: '', needWeight: 1, needCarSize: 1, needDeclare: 1, needOperateTime: 1, mulCar: 0 }, carTypeList: [], intiItems: [] }, computed: { totalPrice() { let itemList = this.itemTypeList.filter(obj => obj.itemId); let price = 0; for (let i in itemList) { let type = itemList[i]; let num = type.num; let items = type.items; for (let j in items) { let item = items[j]; if (item.id == type.itemId) { price += num * item.price; break; } } } return price; } }, methods: { resetDclare() { this.declare.p.pageNo = 1; this.declare.p.pageSize = 8; this.declare.p.production = ''; this.declare.p.declarePeople = ''; this.getDeclareList(); }, handlerDeclare() { this.declare.visible = true; this.getDeclareList(); }, getDeclareList() { let currentCustomerId = this.currentCustomerId; if (currentCustomerId != '1') { this.declare.p.customerId = this.currentCustomerId; } let declareNo = this.m.declareNo; if (declareNo) { this.declare.p.declareNo = declareNo; } sa.ajax('/TbDeclare/getNotBindList', sa.removeNull(this.declare.p), function(resp) { let list = resp.data; this.declare.list = list; this.declare.p.pageNo = resp.pageNo; this.declare.p.dataCount = resp.dataCount; list.forEach(row => { if (row.declareNo == this.m.declareNo) { this.$nextTick(() => { this.$refs['declareTable'].toggleRowSelection(row, true) }) } }) }.bind(this)) }, confirmSelectDeclare() { // 获取选中元素的id列表 let selection = this.$refs['declareTable'].selection; let declareNo = sa.getArrayField(selection, 'declareNo'); if (selection.length == 0) { return sa.msg('请至少选择一条数据') } if (selection.length > 1) { return sa.msg('只能选择一条数据') } let declare = selection[0]; let oldNo = this.m.declareNo; if (oldNo && oldNo !== declare.declareNo) { this.car.list = []; } if (oldNo !== declare.declareNo) { this.m.declareNo = declare.declareNo; this.m.customerId = declare.customerId; this.m.customerName = declare.customerName; this.m.owner = declare.sendUnit; let carNo = declare.carNo; let grossWeight = declare.grossWeight; let carList = this.car.list; let exit = carList.filter(obj => obj.carNo == carNo).pop(); if (!exit) { let car = { carNo: carNo, netWeight: grossWeight, carType: '载重' } this.car.list.push(car) } this.m.cardNo = declare.carNo; this.m.chinaCarNo = declare.chinaCarNo; this.m.netWeight = declare.grossWeight; let chinaCarNo = declare.chinaCarNo; if (chinaCarNo) { let list = []; chinaCarNo.replace(",", ",").split(",").forEach(carNo => { let exit = carList.filter(obj => obj.carNo == carNo).pop(); if (!exit) { let car = { carNo: carNo, carType: '空车' } this.car.list.push(car) } }) } this.filterItems(); } this.declare.visible = false; }, cleanItem(type) { type.itemId = ''; type.itemName = ''; type.price = ''; }, itemChange(type) { let itemId = type.itemId; let item = type.items.filter(obj => obj.id == itemId).pop(); if (item) { type.inc = item.inc; type.price = item.price; } this.validBefore(); }, confirmAdd() { let list = this.car.list; let weightCar = list.filter(car => car.carType && car.carType.indexOf('空') == -1).pop(); let carNo = this.car.form.carNo; let netWeight = this.car.form.netWeight; let goods = this.goods; let form = this.car.form; let carType = form.carType; if (!carNo) { sa.error('请录入车牌号') return false; } if (!form.carSize && goods.needCarSize == 1) { sa.error('请填入车辆规格') return false; } if (carType.indexOf('空') !== -1) { netWeight = 0; } let index = list.map(obj => obj.carNo).indexOf(carNo); if (index > -1) { list.splice(index, 1); } let carSize = form.carSize; let car = { id: form.id, carNo: form.carNo.toUpperCase(), carType: carType, carSize: carSize, netWeight: netWeight } this.car.list.push(car); this.car.visible = false; if (weightCar) { if (weightCar.carType == carType && carSize == weightCar.carSize && netWeight == weightCar.netWeight) { return; } } this.filterItems(); }, filterItems() { let carList = this.car.list; let filterTypeList = JSON.parse(JSON.stringify(this.filterTypeList)); if (carList.length == 0) { this.itemTypeList = filterTypeList; return; } let car = this.car.form; if (car == null) { let checkList = carList.filter(obj => obj.carType.indexOf('空') === -1); if (checkList.length > 0) { car = checkList[0]; } } let carSize = car.carSize; let carType = car.carType; if (carType.indexOf('空') !== -1 && carList.length > 1) { return; } let netWeight = car.netWeight; let tempList = []; for (let i in filterTypeList) { let type = filterTypeList[i]; let items = type.items; if (carType) { items = items.filter(item => item.itemType && item.itemType.indexOf(carType) !== -1); } if (carSize && carSize > 1) { items = items.filter(item => item.minLength <= carSize && item.carLength >= carSize); } if (netWeight && netWeight > 1 && carType && carType.indexOf('空') == -1) { items = items.filter(item => item.minWeight <= netWeight && item.maxWeight >= netWeight); } let itemIds = items.map(item => item.id); if (itemIds.indexOf(type.itemId) == -1) { this.cleanItem(type); } type.items = items; tempList.push(type); } this.itemTypeList = tempList; }, showAddModal() { this.car.visible = true; this.car.form.carNo = ''; this.car.form.carSize = ''; this.car.form.netWeight = ''; }, editFn(data) { Object.assign(this.car, { visible: true, form: JSON.parse(JSON.stringify(data)) }) }, deleteFn(data) { this.car.list.splice(this.car.list.indexOf(data), 1); this.filterItems(); }, getGoods() { sa.ajaxNoLoading('/TbGoods/getList', { pageNo: 1, pageSize: 10 }, function(resp) { let list = resp.data; this.goods = list.filter(goods => goods.id == this.m.goodsId).pop(); this.goodsList = list; this.getTypeByGoodsId(); }.bind(this)) }, goodsChange(v) { let goodsList = this.goodsList; let goods = goodsList.filter(goods => goods.id == v).pop(); this.goods = goods; this.m.goodsName = goods.name; this.getTypeByGoodsId(); }, getTypeByGoodsId() { sa.ajax('/TbItemType/getTypeByGoodsId', { goodsId: this.m.goodsId }, function(resp) { let list = resp.data; let initItems = this.intiItems; for (let i in initItems) { let initItem = initItems[i]; for (let j in list) { let type = list[j]; if (type.id == initItem.itemTypeId) { type.num = initItem.num; type.price = initItem.itemPrice; type.itemId = initItem.itemId; type.remark = initItem.remark; } } } this.itemTypeList = list; this.filterTypeList = JSON.parse(JSON.stringify(this.itemTypeList)); }.bind(this)) }, getItemType() { sa.ajax('/TbItem/getItemType', function(resp) { let list = resp.data; if (list.length > 0) { this.car.form.carType = list[0].name; } this.carTypeList = list; }.bind(this)) }, carTypeChange(v) { }, getCustomerList() { sa.ajax('/TbCostomer/getList', { pageNo: 1, pageSize: 30, sortType: 20, judgeStatus: 2 }, function(res) { let list = res.data; this.customerList = list; }.bind(this)); }, queryCarAsync(queryStr, cb) { sa.ajaxNoLoading('/TbBusinessCar/searchByNo', { carNo: queryStr }, function(resp) { cb(resp.data) }.bind(this)) }, closeFn() { parent.app.f5(); sa.closeCurrIframe(); }, validBefore() { let goods = this.goods; let needCustomer = goods.needCustomer; let m = this.m; if (goods.needOperateTime == 1 && !m.operateTime) { sa.error('请选择作业时间'); return false; } if (!m.owner && goods.needOwner == 1) { sa.error('请填写货主'); return false; } if (this.car.list.length == 0) { sa.error('请录入车辆'); return false; } let needCarSize = goods.needCarSize; let carList = this.car.list; for (let i in carList) { let car = carList[i]; if (needCarSize == 1 && !car.carSize) { sa.error('请补充' + car.carNo + '规格'); return; } } }, // 提交数据 ok: function() { let goods = this.goods; let m = this.m; if (!m.supplementReason) { sa.error('请填写补录原因'); return false; } if (m.payStatus == 3&&!m.transactionId) { sa.error('请录入微信订单号'); return false; } let carList = this.car.list; let needCarSize = goods.needCarSize; for (let i in carList) { let car = carList[i]; if(!car.realInTime){ sa.error('请填写入场时间') return; } if(!car.realOutTime){ sa.error('请填写离场时间') return; } } m.carJson = JSON.stringify(carList); let chinaCarNo = carList .filter(car => sa.isCarNo(car.carNo.toUpperCase())) .map(car => car.carNo.toUpperCase()) .join("、"); let yueCarNo = carList .filter(car => !sa.isCarNo(car.carNo.toUpperCase())) .map(car => car.carNo.toUpperCase()) .join("、"); m.cardNo = yueCarNo; m.chinaCarNo = chinaCarNo; m.cars = null; m.items = null; sa.ajax('/TbBusiness/selectErrorBusiness', sa.removeNull(m), function(res) { sa.alert('补录成功', this.clean); }.bind(this)); }, // 添加/修改 完成后的动作 clean: function() { parent.app.f5(); // 刷新父页面列表 sa.closeCurrIframe(); // 关闭本页 }, getCurrentCustomer() { sa.ajax('/TbCostomer/getCurrentCustomerId', function(resp) { let id = resp.data; this.currentCustomerId = id; }.bind(this)); }, getOtherBusinessById() { sa.ajax('/TbBusiness/getOtherBusinessById?id=' + this.m.id, function(resp) { let data = resp.data; this.car.list = data.cars; this.intiItems = data.items; this.m = resp.data; this.getGoods(); }.bind(this)) }, }, mounted: function() { this.getCurrentCustomer(); this.getOtherBusinessById(); this.getCustomerList(); this.getItemType(); } }) </script> </body> </html>