<!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>