qzyReal
/
pco


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
							<!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: 7em !important;
			}

			.c-panel .el-form .c-panel .el-form {
				width: 180px;
			}

			.item-num .el-input__inner {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div class="vue-box" :class="{sbot: id}" style="display: none;" :style="'display: block;'">
			<!-- ------- 内容部分 ------- -->
			<div class="s-body">
				<div class="c-panel">
					<div class="c-title" v-if="id == 0">数据添加</div>
					<div class="c-title" v-else>数据修改</div>
					<el-form v-if="m" label-position="left">
						<el-card class="box-card">
							<div slot="header" class="clearfix">
								<span>基本资料</span>
							</div>
							<el-row>
								<el-col :span='12'>
									<div class="c-item" v-if="currentCustomerId=='1'">
										<label class="c-label"><span style="color: red;">*</span>客户：</label>
										<el-select 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">
										<label class="c-label"><span style="color: red;">*</span>车牌号：</label>
										<el-autocomplete v-model="m.carNo" placeholder="请输入车牌号"
											@select="handleSelectCar" value-key='carNo'
											:fetch-suggestions="queryCarAsync">
										</el-autocomplete>
									</div>
									<sa-item type="num" name="车辆规格(米)" placeholder="请输入车辆规格" v-model="m.carSize" br>
									</sa-item>
									<sa-item name="作业人员" placeholder="请输入作业人员" v-model="m.operator" br>
									</sa-item>
								</el-col>
								<el-col :span='12'>
									<div class="c-item">
										<label class="c-label">车辆类型：</label>
										<el-select v-model="m.carType" placeholder="请选择" @change="carTypeChange">
											<el-option :label="item.name" :value="item.name"
												v-for="(item,index) in carTypeList">
											</el-option>
										</el-select>
									</div>
									<sa-item v-if="m.carType.indexOf('重')!==-1" type="num" name="载重(kg)"
										placeholder="请输入车辆载重" v-model="m.carWeight" br>
									</sa-item>
									<div class="c-item">
										<label class="c-label"><span style="color: red;">*</span>作业时间：</label>
										<el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
											v-model="m.operateTime"></el-date-picker>
									</div>
								</el-col>
							</el-row>
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<span>收费明细<label style="color: red;">(总共{{totalPrice}}元)</label></span>
									<el-select v-model="m.itemTypeId" placeholder="请选择" @change="itemChange"
										style="float: right; padding: 3px 0">
										<el-option v-for="(item,index) in itemTypeList" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</div>
								<div>
									<el-checkbox-group v-model="checkList">
										<el-row v-for="(item,index) in items"
											style="border-bottom: 1px solid #E4E4E4;line-height: 90px;">
											<el-col :span="11">
												<el-checkbox :disabled="item.need==1" :label="item.id">
													<div>{{item.itemName}}(<label
															style="color: red;">{{item.price}}{{item.unit}}</label>)
													</div>
												</el-checkbox>
											</el-col>
											<el-col :span="6">
												<el-input-number :disabled="item.inc==0" class="item-num"
													v-model="item.num" :min="1" :max="10"></el-input-number>
											</el-col>
											<el-col :span="7">
												<sa-item type="textarea" name="备注" placeholder="请输入备注"
													v-model="item.remark" br>
												</sa-item>
											</el-col>
										</el-row>
									</el-checkbox-group>
								</div>
							</el-card>
					</el-form>
				</div>
			</div>
			<!-- ------- 底部按钮 ------- -->
			<div class="s-foot">
				<el-button type="primary" @click="ok()">确定</el-button>
				<el-button @click="sa.closeCurrIframe()">取消</el-button>
			</div>
		</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: {
					id: sa.p('id', ''),
					p: { // 查询参数
						business: 0,
						pageNo: 1, // 当前页 
						pageSize: 50, // 页大小 
						sortType: 0 // 排序方式 
					},
					id: sa.p('id', 0), // 获取超链接中的id参数（0=添加，非0=修改） 
					m: {
						id: '', // 主键 
						carNo: '',
						carSize: '',
						carType: '载重',
						carWeight: '',
						itemTypeId: ''
					}, // 实体对象 
					itemTypeList: [],
					items: [],
					businessItems: [],
					checkList: [],
					customerList: [],
					carTypeList: [],
					currentCustomerId: ''
				},
				computed: {


					totalPrice() {
						let checkList = this.checkList;
						let items = this.items
							.filter(obj => checkList.indexOf(obj.id) !== -1);
						let price = 0;
						for (let i in items) {
							let item = items[i];
							price = price + item.price * item.num;
						}
						return price;
					}
				},
				methods: {
					queryCarAsync(queryStr, cb) {
						if(!queryStr){
							cb([]);
							return;
						}
						sa.ajaxNoLoading('/TbBusinessCar/searchInNotOutCar',{carNo:queryStr},function(resp){
							cb(resp.data)
						}.bind(this))
					},
					handleSelectCar(data) {
						this.m.carNo = data.carNo;
						if(!this.m.carSize){
							this.m.carSize=data.carSize;
						}
					},
					itemChange() {
						sa.ajax('/TbItem/getTypeItemList', {
							pageNo: 1,
							pageSize: 30,
							typeId: this.m.itemTypeId
						}, function(resp) {
							let list = resp.data;
							if (this.m.carType) {
								list = list.filter(obj => obj.itemType && obj.itemType.indexOf(this.m
									.carType) !== -1);
							}
							this.items = list;
							this.checkList = list.filter(obj => obj.need == 1 || obj.itemType.indexOf(this.m
								.carType) !== -1).map(obj => obj.id);
							let businessItems = this.businessItems;
							list.forEach(obj => {
								businessItems.forEach(item => {
									if (obj.id == item.itemId) {
										obj.remark = item.remark;
										obj.num = item.num;
									}
								})
							})
						}.bind(this))
					},
					getCustomer() {
						sa.ajax('/TbCostomer/getCurrentCustomerId', function(resp) {
							let id = resp.data;
							if (id == '1') {
								this.getCustomerList();
							} else {
								this.m.customerId = id;
							}
							this.currentCustomerId = id;
						}.bind(this));
					},
					carTypeChange(v) {
						this.getItems();
					},
					getItemType() {
						sa.ajax('/TbItem/getItemType', function(resp) {
							this.carTypeList = resp.data;
						}.bind(this))
					},
					getCustomerList() {
						sa.ajax('/TbCostomer/getList', {
							pageNo: 1,
							pageSize: 30,
							sortType: 20,
							judgeStatus: 2
						}, function(res) {
							this.customerList = res.data; // 数据
						}.bind(this));
					},
					getItemTypeList() {
						sa.ajax('/TbItemType/getList', sa.removeNull(this.p), function(res) {
							let list = res.data;
							this.itemTypeList = list;

							this.getItems();
						}.bind(this));
					},
					getItems() {
						sa.ajax('/TbItem/getTypeItemList', {
							pageNo: 1,
							pageSize: 30,
							typeId: this.m.itemTypeId
						}, function(resp) {
							let list = resp.data;
							if (this.m.carType) {
								list = list.filter(obj => obj.itemType && obj.itemType.indexOf(this.m
									.carType) !== -1);
							}
							this.items = list;
							this.checkList = list.filter(obj => obj.need == 1 || obj.itemType.indexOf(this.m
								.carType) !== -1).map(obj => obj.id);
							let businessItems = this.businessItems;
							list.forEach(obj => {
								businessItems.forEach(item => {
									if (obj.id == item.itemId) {
										obj.remark = item.remark;
										obj.num = item.num;
									}
								})
							})
						}.bind(this))
					},
					ok() {
						let m = this.m;
						if (!m.carNo) {
							sa.error('请输入车牌号')
							return false;
						}
						if (!m.operateTime) {
							sa.error('请选择作业时间')
							return false;
						}
						let checkList = this.checkList;
						let itemList = this.items;
						let list = itemList.filter(obj => checkList.indexOf(obj.id) !== -1);
						m.itemJson = JSON.stringify(list);
						m.items = null;
						sa.ajax('/api/editOtherBusiness', sa.removeNull(m), function(resp) {
							parent.app.f5(); // 刷新父页面列表
							sa.closeCurrIframe(); // 关闭本页 
						}.bind(this))
					},
					getOtherBusinessById() {
						sa.ajax('/TbBusiness/getOtherBusinessById', {
							id: this.id
						}, function(resp) {
							let data = resp.data;
							this.m = data
							this.businessItems = data.items;
							this.checkList = data.items.map(obj => obj.itemId);
							console.log(this.checkList);
							this.getItemTypeList();
							this.getItemType();
						}.bind(this))
					}
				},
				mounted: function() {
					this.getOtherBusinessById();
					this.getCustomer();


				}
			})
		</script>
	</body>
</html>