chaoshi/src/pages/erp/out/storeReceipt.vue

<template>
	<div class="form-submit">
		<div class="i-layout-page-header">
			<PageHeader class="product_tabs" hidden-breadcrumb>
				<div slot="title">
					<router-link :to="{ path: `${roterPre}/erp/out_list` }">
						<!-- <Button icon="ios-arrow-back" size="small" class="mr20"
              >返回</Button
            > -->
						<div class="font-sm after-line">
							<span class="iconfont iconfanhui"></span>
							<span class="pl10">返回</span>
						</div>
					</router-link>
					<span v-text="type == 1 ?'门店收货':'添加入库'" class="mr20 ml16"></span>
				</div>
			</PageHeader>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form class="formValidate mt20" ref="formValidate" :rules="ruleValidate" :model="formValidate"
				:label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
				<Row :gutter="24" type="flex">
					<Col span="24">
					<FormItem label="出库单号: " prop="out_order_id">
						<div>{{formValidate.out_order_id}}</div>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="运费: " prop="freight">
						<Input v-model="formValidate.freight" placeholder="请输入运费" v-width="'150'" type="number" />
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="创建人：" prop="create_uid" v-if="type == 1">
						<el-cascader placeholder="请选择创建人" class="input-add" size="mini"
							v-model="formValidate.create_uid" :options="authList" :props="propsss"
							@change="userSearchsss" filterable clearable v-width="'400'">
						</el-cascader>
					</FormItem>
					</Col>
					<Col span="24">
					<FormItem label="商品：" prop="goods">
						<Card>
							<div class="user-info" v-for="(goods,gindex) in chooseGoods">
								<!-- <Button type="primary" @click="delGood(gindex)" class="del-btn">删除</Button> -->
								<div class="section-hd">{{goods.product_name}}</span> </div>
								<div v-if="goods.group.length > 0 && type == 1" v-for="(item,index) in goods.group"
									class="section">
									<div class="section-bd">
										<div class="item">
											<div>批次编号：</div>
											<div class="value">{{ item.batch_code || '/'}}</div>
										</div>
										<div class="item">
											<div>单价（元/{{item.unit_name}}）：</div>
											<div class="value">{{ item.price}}</div>
										</div>
										<!-- <div class="item">
											<div>是否称重：</div>
											<div class="value">{{ item.is_weigh == 1? '是':'否'}}</div>
										</div> -->
										<div class="item">
											<div>数量({{ item.unit_name}})：</div>
											<div class="value">
												{{item.pur_number}}
											</div>
										</div>
										<div class="item" v-if="item.is_weigh == 1">
											<div>总重量(kg)：</div>
											<div class="value">{{item.weight}}</div>
										</div>
										<div class="item" v-if="item.is_weigh == 1">
											<div>皮重（kg）：</div>
											<div class="value"><Input
													v-model="chooseGoods[gindex].group[index].tare_weight"
													placeholder="请输入皮重" v-width="'150'" type="number" /></div>
										</div>
										<div class="item" v-if="item.is_weigh == 1">
											<div>净重（kg）：</div>
											<div class="value"><Input
													v-model="chooseGoods[gindex].group[index].net_weight"
													placeholder="请输入净重" v-width="'150'" type="number" /></div>
										</div>
										<!-- <a v-if="goods.group.length > 1" @click="delBatch(gindex,index)" class=" del-btn-1">删除</a> -->
									</div>

								</div>
								<div class="section" v-if="type == 2">
									<div class="section-bd">
										<div class="item">
											<div>仓位：</div>
											<div class="value" v-if="goods.bin_number">{{goods.bin_number}}</div>
											<el-cascader placeholder="请选择仓位" v-if="!goods.bin_number" class="value"
												size="mini" v-model="goods.bin_number" :options="positionList"
												:props="props" filterable clearable v-width="'400'">
											</el-cascader>
											<a @click="addPosition" v-if="!goods.bin_number">添加仓位</a>
										</div>
									</div>
								</div>

								<div v-if="goods.batchs.length > 0 && type == 2" v-for="(item,index) in goods.batchs"
									class="section">
									<div class="section-bd">
										<div class="item">
											<div>批次编号：</div>
											<div class="value">{{ item.batch_code || '/'}}</div>
										</div>
										<div class="item">
											<div>单价（元/{{item.unit_name}}）：</div>
											<div class="value">{{ item.price}}</div>
										</div>

										<div class="item">
											<div>数量({{ item.unit_name}})：</div>
											<div class="value">
												{{item.pur_number}}
											</div>
										</div>
										<div class="item" v-if="item.is_weigh == 1">
											<div>总重量(kg)：</div>
											<div class="value">{{item.weight}}</div>
										</div>
										<div class="item" v-if="item.is_weigh == 1">
											<div>皮重（kg）：</div>
											<div class="value"><Input
													v-model="chooseGoods[gindex].batchs[index].tare_weight"
													placeholder="请输入皮重" v-width="'150'" type="number" /></div>
										</div>
										<div class="item" v-if="item.is_weigh == 1">
											<div>净重（kg）：</div>
											<div class="value"><Input
													v-model="chooseGoods[gindex].batchs[index].net_weight"
													placeholder="请输入净重" v-width="'150'" type="number" /></div>
										</div>
										<!-- <a v-if="goods.group.length > 1" @click="delBatch(gindex,index)" class=" del-btn-1">删除</a> -->
									</div>

								</div>
							</div>
						</Card>
						<!-- <Button type="primary" class="submission" style="margin-top:20px;" @click="getGoods()"
							>添加商品</Button> -->
					</FormItem>
					</Col>
				</Row>
			</Form>
		</Card>
		<Card :bordered="false" dis-hover class="fixed-card"
			:style="{ left: `${!menuCollapse ? '200px' : isMobile ? '0' : '80px'}` }">
			<Form>
				<FormItem>
					<Button type="primary" class="submission" @click="handleSubmit('formValidate')">保存</Button>
				</FormItem>
			</Form>
		</Card>
		<good-detail ref="goodDetail" @setGoods="setGoods"></good-detail>
		<Modal v-model="modalPosition" scrollable title="添加仓位" class="order_box" :closable="false"
			:mask-closable="false">
			<Form ref="remarks" :model="remarks" :rules="rulePosition" :label-width="100" @submit.native.prevent>
				<Col span="24">
				<FormItem label="仓位名称：" prop="title">
					<Input v-model="remarks.title" placeholder="请输入仓位名称/编号" v-width="'200'" />
				</FormItem>
				</Col>
				<Col span="24">
				<FormItem label="通道：" prop="passageway">
					<Input v-model="remarks.passageway" placeholder="请输入通道" type="number" v-width="'200'"
						:disabled="remarks.id != 0" /> (1~99)
				</FormItem>
				</Col>
				<Col span="24">
				<FormItem label="左右：" prop="control">
					<RadioGroup v-model="remarks.control">
						<Radio label="L" :disabled="remarks.id != 0">
							<Icon type="social-apple"></Icon>
							<span>左</span>
						</Radio>
						<Radio label="R" :disabled="remarks.id != 0">
							<Icon type="social-android"></Icon>
							<span>右</span>
						</Radio>
					</RadioGroup>
				</FormItem>
				</Col>
				<Col span="24">
				<FormItem label="层数：" prop="layer">
					<Input v-model="remarks.layer" placeholder="请输入层数" type="number" v-width="'200'"
						:disabled="remarks.id != 0" /> (1~9)
				</FormItem>
				</Col>
				<Col span="24">
				<FormItem label="仓位编号：" prop="number">
					<Input v-model="remarks.number" placeholder="请输入仓位编号" type="number" v-width="'200'"
						:disabled="remarks.id != 0" /> (1~999)
				</FormItem>
				</Col>
			</Form>
			<div slot="footer">
				<Button type="primary" @click="putRemark()">提交</Button>
				<Button @click="cancel()">取消</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		staffListInfo
	} from "@/api/store";
	import {
		wareDelivery,
		getGodownList,
		createGodown,
		getGodownInfo,
		getUserList,
		getOutGoods,
		createWant,
		getWantInfo,
		getProductBatch,
		createOut,
		storeReceipt,
		getOutInfo,
		getOutSimpleList,
		getPositionList,
		createPosition
	} from "@/api/erp";
	import {
		keyApi,
		storeGetInfoApi,
		cityApi,
		storeUpdateApi,
		cascaderList
	} from '@/api/store';
	import {
		productSpecs,
		productSpecsInfo
	} from "@/api/product";
	import Setting from "@/setting";
	import goodDetail from './goodDetail.vue'

	const jy = (min, max) => {
		return {
			validator(rule, value) {
				if (!value || value > max || value < min) {
					return [{
						message: `范围为${min}~${max}`
					}];
				} else {
					return [];
				}
			}
		}
	}
	export default {
		name: "specsAdd",
		components: {
			goodDetail
		},
		data() {
			return {
				type: 0,
				info: {},
				loading: false,
				authList: [],
				chooseGoods: [],
				staffData: [],
				addresData: [],
				props: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "bin_number",
					label: "bin_number"
				},
				propss: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "id",
					label: "name"
				},
				propsss: {
					emitPath: false,
					multiple: false,
					checkStrictly: true,
					value: "id",
					label: "staff_name"
				},
				roterPre: Setting.roterPre,
				data1: [],
				grid: {
					xl: 7,
					lg: 7,
					md: 12,
					sm: 24,
					xs: 24,
				},
				formValidate: {
					freight: 0,
					out_order_id: '',
					id: 0,
					wid: 0,
					store_id: 0,
					goods: [],
					my_store_id: 0,
					create_uid: 0,
					create_admin_id: 0,
				},
				ruleValidate: {
					// freight: [{
					// 	type: "number",
					// 	required: true,
					// 	message: "输入运费",
					// 	trigger: "blur"
					// }, ],
				},
				rulePosition: {
					title: [{
						required: true,
						message: "请输入仓位名称",
						trigger: "blur"
					}, ],
					wid: [{
						required: true,
						message: "请选择仓库",
						trigger: "blur"
					}, ],
					passageway: [{
						required: true,
						message: "请输入通道",
						trigger: "blur"
					}, jy(1, 99)],
					control: [{
						required: true,
						message: "请选择左右",
						trigger: "blur"
					}, ],
					layer: [{
						required: true,
						message: '请输入层数',
						trigger: 'blur',
					}, jy(1, 9)],
					number: [{
						required: true,
						message: '请输入仓位编号',
						trigger: 'blur',
					}, jy(1, 999)],
				},
				positionList: [],
				modalPosition: false,
				remarks: {
					id: 0,
					title: "",
					wid: '0',
					passageway: '',
					control: "L",
					layer: '',
					number: ''
				},
			};
		},
		computed: {
			...mapState("admin/layout", ["isMobile", "menuCollapse"]),
			labelWidth() {
				return this.isMobile ? undefined : 120;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getGodownList()
			let data = {
				pid: 0
			}
			// this.cityInfo(data);
		},
		mounted() {
			// this.setCopyrightShow({
			// 	value: false
			// });
			this.staffList()
			if (this.$route.query.id != 0) {
				this.formValidate.out_order_id = this.$route.query.id
				this.type = this.$route.query.type
				this.getOutSimpleList(this.$route.query.id)

			}
		},
		destroyed() {
			// this.setCopyrightShow({
			// 	value: true
			// });
		},
		methods: {
			...mapMutations("admin/layout", ["setCopyrightShow"]),
			addPosition() {
				this.modalPosition = true
				this.remarks.wid = this.formValidate.wid
			},
			putRemark() {
				this.$refs.remarks.validate((valid) => {
					if (valid) {
						// this.remarks.id = this.$route.query.id;
						createPosition({
							id: this.remarks.id,
							title: this.remarks.title,
							wid: this.remarks.wid,
							passageway: this.remarks.passageway,
							control: this.remarks.control,
							layer: this.remarks.layer,
							number: this.remarks.number
						}).then(res => {
							this.$Message.success(res.msg);
							this.getPositionList()
							this.cancel()
							// this.$router.push({
							// 	path: this.roterPre + "/erp/position_list"
							// });
						}).catch(err => {
							this.$Message.error(err.msg);
						})
					} else {
						// this.$Message.error("请输入参数模板名称");
					}
				});
			},
			cancel() {
				this.modalPosition = false
				this.remarks = {
					id: 0,
					title: "",
					wid: '0',
					passageway: '',
					control: "L",
					layer: '',
					number: ''
				}
			},
			getPositionList() {
				getPositionList({
					wid: this.formValidate.wid,
					not_used: 1,
					page: 1,
					limit: 1000
				}).then(res => {
					this.positionList = res.data.data
				})
			},
			delGood(index) {
				this.chooseGoods.splice(index, 1)
			},
			delBatch(in1, in2) {
				console.log((in1, in2));
				this.chooseGoods[in1].batch.splice(in2, 1)
			},
			jyNum(a = 0, b = 0, item) {
				console.log(a, b, 'jiaoyan');
				if (a * 1 < b * 1) {
					item.pur_number = 0
					return this.$Message.error('输入值大于可调出商品的库存')
				}
			},
			getOutSimpleList(id) {
				getOutSimpleList(id).then(res => {
					getOutSimpleList({
						out_order_id: id,
						type: this.type
					}).then(res => {
						console.log(res);
						this.info = res.data.data[0]
						if (this.type == 1) {
							this.chooseGoods = this.info.product.map(item => {
								let obj = {
									bar_code: item.bar_code,
									product_code: item.product_code || "",
									product_id: item.id,
									product_name: item.store_name,
									group: item.group.map(e => {
										let ob = {
											batch_code: e.batch_code,
											is_weigh: e.is_weigh,
											net_weight: '',
											price: e.price,
											pur_number: e.pur_number,
											rate: e.rate,
											shelf_life: e.shelf_life,
											tare_weight: '',
											unit_name: e.unit_name,
											unit_type: e.unit_type,
											weight: e.weight,
										}

										return ob
									})
								}
								return obj
							})
						} else {
							this.chooseGoods = this.info.product.map(item => {
								let obj = {
									bin_number: item.bin_number,
									bar_code: item.bar_code,
									product_code: item.product_code || "",
									product_id: item.id,
									product_name: item.store_name,
									total_price: item.total_price,
									pur_number: item.pur_number,
									unit_type: 0,
									unit_name: item.p_unit_name,
									batchs: item.group.map(e => {
										let ob = {
											batch_code: e.batch_code,
											is_weigh: e.is_weigh,
											net_weight: '',
											price: e.price,
											pur_number: e.pur_number,
											rate: e.rate,
											shelf_life: e.shelf_life,
											tare_weight: '',
											unit_name: e.unit_name,
											unit_type: e.unit_type,
											weight: e.weight,
										}

										return ob
									})
								}
								return obj
							})
							console.log(this.chooseGoods, 'batchs');
						}

						if (this.type == 1) {
							this.formValidate.to_store_id = this.info.to_store_id * 1
							this.getUserList()
						} else {
							this.formValidate.wid = this.info.to_wid * 1
							this.getPositionList()
							this.getUserList()
						}
						// that
					})
					// let data = res.data
					// if (data.wid) {
					// 	this.formValidate.outType = 0
					// 	this.formValidate.wid = data.wid*1
					// } else {
					// 	this.formValidate.outType = 1
					// 	this.formValidate.store_id = data.store_id*1
					// }
					// if (data.to_wid) {
					// 	this.formValidate.to_wid = data.to_wid*1
					// 	this.formValidate.inType == 0
					// } else {
					// 	this.formValidate.inType == 1
					// 	
					// }
					// this.getUserList()
					// this.formValidate.create_uid = data.create_uid
					// this.formValidate.create_admin_id = data.create_admin_id
					// this.chooseGoods = data.product.map(item => {
					// 	item.name = item.store_name
					// 	item.product_id = item.id
					// 	if(item.group.length > 0) {
					// 		item.batch = item.group
					// 	}else {
					// 		item.batch = []
					// 	}
					// 	return item
					// })
					// console.log(res, 'ddddd');
					// let data = res.data
					// this.formValidate.id = data.id
					// this.formValidate.create_uid = data.create_uid
					// this.chooseGoods = data.info
					// this.formValidate.store_id = data.store_id
					// console.log(this.formValidate.goods, 'this.formValidate.goods');
					// if (data.wid) {
					// 	this.formValidate.inType = 0
					// 	this.formValidate.wid = data.wid
					// 	this.getUserList({
					// 		wid: this.formValidate.wid
					// 	})
					// } else {
					// 	this.formValidate.inType = 1
					// 	this.getUserList({
					// 		store_id: this.formValidate.store_id
					// 	})
					// }
				})
			},
			setGoods(e) {
				console.log(e, 'ddd');
				// try {
				// 	let arr = e.map(item => {
				// 		item.unitList = [{
				// 			value: 0,
				// 			label: item.info.unit_name
				// 		}]
				// 		if (item.info.unit_name_1) {
				// 			item.unitList.push({
				// 				value: 1,
				// 				label: item.info.unit_name_1
				// 			})
				// 		}
				// 		if (item.info.unit_name_2) {
				// 			item.unitList.push({
				// 				value: 2,
				// 				label: item.info.unit_name_1
				// 			})
				// 		}
				// 		item.want_product_num = 0
				// 		return item
				// 	})
				// 	this.chooseGoods = this.chooseGoods.concat(arr)
				// } catch (e) {
				// 	//TODO handle the exception
				// 	console.log('err', e);
				// }
				// console.log(this.chooseGoods, 'this.chooseGoods');

				// 校验商品是否重复
				if (this.chooseGoods.find(item => e.product_id == item.product_id)) {
					console.log('55');
					this.$refs.goodDetail.clearAll()
					return this.$Message.error('该商品已选择');
				} else {
					this.$refs.goodDetail.modals = false
					let qdata;
					console.log('this.formValidate.outType', this.formValidate.outType);
					if (this.formValidate.outType == 1) {
						try {
							qdata = {
								store_id: this.formValidate.store_id,
								product_id: e.product_id
							}
						} catch (e) {
							//TODO handle the exception
							console.log('err', e);
						}

					} else {
						qdata = {
							wid: this.formValidate.wid,
							product_id: e.product_id
						}
					}
					console.log(qdata, 'qdata');
					getProductBatch(qdata).then(res => {
						if (res.data.length > 0) {
							this.chooseGoods = this.chooseGoods.concat({
								bar_code: e.bar_code,
								is_weigh: e.info.is_weigh,
								name: e.product_name,
								product_id: e.product_id,
								product_num: e.product_num,
								pur_number: '',
								unit_name: e.unit_name,
								weight: '',
								batch: res.data.map(item => {
									item.weight = 0
									item.pur_number = 0
									return item
								})
							})
						} else {
							this.chooseGoods = this.chooseGoods.concat({
								bar_code: e.bar_code,
								is_weigh: e.info.is_weigh,
								name: e.product_name,
								product_id: e.product_id,
								product_num: e.product_num,
								pur_number: 0,
								unit_name: e.unit_name,
								weight: 0,
								batch: []
							})
						}
					})
					// this.chooseGoods = this.chooseGoods.concat(e)

				}
			},
			getGoods() {
				console.log(this.formValidate.store_id, this.formValidate.wid);
				if (this.formValidate.wid == 0 && this.formValidate.store_id == 0) {
					return this.$Message.error('请选择调出仓库或门店');
				}
				try {
					this.$refs.goodDetail.formValidate.outType = this.formValidate.outType
					this.$refs.goodDetail.formValidate.wid = this.formValidate.wid
					this.$refs.goodDetail.formValidate.store_id = this.formValidate.store_id
					this.$refs.goodDetail.modals = true
					this.$refs.goodDetail.getList()

				} catch (e) {
					//TODO handle the exception
					console.log('err', e);
				}

			},
			getUserList() {
				let qdata = {}
				if (this.type == 1) {
					// if (this.formValidate.outType == 1) {
					// 	qdata.store_id = this.formValidate.store_id
					// } else {
					// 	qdata.wid = this.formValidate.wid
					// }
					qdata.store_id = this.formValidate.to_store_id
				} else {
					qdata.wid = this.formValidate.wid
				}

				getUserList(qdata).then(res => {
					// console.log(res);
					this.authList = res.data.data
					// .map(item => {
					// 		item.id += ''
					// 		return item
					// 	});
				})
			},
			staffList() {
				staffListInfo()
					.then((res) => {
						this.staffData = res.data
						// .map(item => {
						// 	item.id += ''
						// 	return item
						// });
					})
					.catch((err) => {
						this.$Message.error(err.msg);
					});
			},
			getGodownInfo(id) {
				getGodownInfo(id).then(res => {
					this.formValidate = res.data
					this.formValidate.addressSelect = this.formValidate.addressSelect.map(item => item * 1)
					console.log(this.formValidate.addressSelect);
				})
			},
			addchack(e, selectedData) {
				console.log(selectedData, 'selectedData');
				e.forEach((i, index) => {
					if (index == 0) {
						this.formValidate.province = i
					} else if (index == 1) {
						this.formValidate.city = i
					} else if (index == 2) {
						this.formValidate.area = i
					} else {
						this.formValidate.street = i
					}
				})
				this.formValidate.address = (selectedData.map(o => o.label)).join('/')
				// console.log('this.formValidate.addressSelect',this.formValidate.addressSelect);

			},
			cityInfo(data) {
				cityApi(data).then(res => {
					this.addresData = res.data
				})
			},
			loadData(item, callback) {
				item.loading = true;
				cityApi({
					pid: item.value
				}).then(res => {
					item.children = res.data;
					item.loading = false;
					callback();
				});


			},
			getGodownList() {
				getGodownList().then(res => {
					console.log(res);
					this.data1 = res.data.data
					// .map(item => {
					// 		item.id += ''
					// 		return item
					// 	});
				})
			},
			del(index) {
				this.chooseGoods.splice(index, 1);
			},
			userSearchse(e) {
				this.formValidate.create_uid = "";
				this.authList = []
				this.getUserList()
			},
			userSearchs(e) {
				this.formValidate.wid = 0
				this.goods = []
			},
			userSearchss(e) {
				this.formValidate.create_uid = "";
				this.formValidate.store_id = 0
				this.authList = []
				this.getUserList()
			},
			checkOutWare(e) {
				this.formValidate.create_uid = "";
				this.authList = []
				this.chooseGoods = []
				if (e) {
					this.getUserList()
				}
			},
			changeOutType(e) {
				this.formValidate.wid = 0
				this.formValidate.store_id = 0
				this.checkOutWare(0)
			},
			userSearchsss(e) {
				if (e) {
					let obj = this.authList.find(item => item.id == e)
					this.formValidate.create_admin_id = obj.admin_id
				}
			},
			checkWid(e) {

			},
			handleSubmit(name) {
				let that = this
				let errIndex = 0
				let err1 = 0
				this.chooseGoods.forEach(item => {
					// if(item)
					if (that.type == 1) {
						item.group.forEach(e => {
							if (e.is_weigh == 1 && e.net_weight == 0) {
								errIndex++
							}
						})
					} else {
						item.batchs.forEach(e => {
							if (e.is_weigh == 1 && e.net_weight == 0) {
								errIndex++
							}
						})
						if(!item.bin_number) {
							err1++
						}
					}

				})
				if (errIndex > 0) {
					return this.$Message.error('称重商品需填写净重')
				}
				if(err1 > 0) {
					return this.$Message.error('请选择仓位')
				}
				console.log(this.chooseGoods, '最后');
				this.$refs[name].validate((valid) => {
					if (valid) {
						try {
							let pdata = {
								freight: this.formValidate.freight,
								info: this.chooseGoods,
								out_order_id: this.formValidate.out_order_id,
							}
							console.log('2');
							let pf;
							if (that.type == 1) {
								pf = storeReceipt
								pdata.store_id = that.formValidate.to_store_id
							} else {
								pf = wareDelivery
								pdata.wid = that.formValidate.wid
								pdata.create_uid = this.formValidate.create_uid
								pdata.create_admin_id = this.formValidate.create_admin_id
							}
							pf(pdata).then(res => {
								this.$Message.success(res.msg);
								this.$router.push({
									path: this.roterPre + "/erp/out_list"
								});
							}).catch(err => {
								this.$Message.error(err.msg);
							})
						} catch (e) {
							//TODO handle the exception
							console.log(e, 'errr');
						}


					} else {
						// this.$Message.error("请输入参数模板名称");
					}
				});
			},
		},
	};
</script>

<style scoped lang="stylus">
	.table {
		/deep/.ivu-table-header table {
			border: 0 !important;
		}

		/deep/.ivu-table-header thead tr th:nth-of-type(1) {
			padding-left: 16px;
		}

		/deep/.ivu-table td:nth-of-type(1) {
			padding-left: 16px;
		}

		/deep/.ivu-table-cell {
			padding: 0 !important;
		}

		/deep/.ivu-table-border th,
		/deep/.ivu-table-border td {
			border-right: unset;
		}

		/deep/.ivu-table td {
			height: 59px;
		}
	}

	.form-submit {
		/deep/.ivu-card {
			border-radius: 0;
		}

		margin-bottom: 79px;

		.fixed-card {
			position: fixed;
			right: 0;
			bottom: 0;
			left: 200px;
			z-index: 99;
			box-shadow: 0 -1px 2px rgb(240, 240, 240);

			/deep/ .ivu-card-body {
				padding: 15px 16px 14px;
			}

			.ivu-form-item {
				margin-bottom: 0;
			}

			/deep/ .ivu-form-item-content {
				margin-right: 124px;
				text-align: center;
			}

			.ivu-btn {
				height: 36px;
				padding: 0 20px;
			}
		}
	}

	.after-line {
		display: inline-block;
		position: relative;
		margin-right: 16px;
	}

	.ml16 {
		margin-left: 16px;
	}

	.user-info {
		position: relative;
		padding: 20px;

		.section {
			padding: 25px 25px;
			border-bottom: 1px dashed #EEEEEE;
			position: relative;

			&-hd {
				padding-left: 10px;
				border-left: 3px solid #1890FF;
				font-weight: 500;
				font-size: 14px;
				line-height: 16px;
				color: #303133;
			}

			&-bd {
				display: flex;
				flex-wrap: wrap;
			}

			.item {
				// flex: 0 0 calc(~"(100% - 60px) / 3");
				width: 25%;
				min-width: 250px;
				display: flex;
				margin: 16px 30px 0 0;
				font-size: 13px;
				color: #606266;

				&:nth-child(3n+3) {
					margin: 16px 0 0;
				}
			}

			.value {
				flex: 1;
			}

			.avatar {
				width: 60px;
				height: 60px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.del-btn {
		position: absolute;
		right: 20px;
		top: 10px;
	}

	.del-btn-1 {
		position: absolute;
		right: 80px;
		bottom: 20px;
	}

	/deep/ .ivu-modal-content {
		// width: 600px;
	}
</style>