school-manage/src/views/app/business/lineManage/addEdit.vue

<template>
	<div class="company-edit">
		<!-- Drawer抽屉 -->
		<Drawer :title="title" v-model="visible" width="500" draggable :mask-closable="type == '0'">
			<div :style="{ maxHeight: maxHeight }" class="drawer-content">
				<div class="drawer-header">
					<div style="margin-right: 16px">线路配置</div>
				</div>
				<Form ref="form" :model="form" :rules="formValidate" label-position="top">
					<Row :gutter="32">
						<Col span="24">
						<FormItem label="线路名称" prop="circuitName">
							<Input v-model="form.circuitName" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="出发站" prop="goStation">
							<Input v-model="form.goStation" />
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="到达站" prop="arrivalStation">
							<Input v-model="form.arrivalStation" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="24">
						<FormItem label="保费规则" prop="premiumRules">
							<Input v-model="form.premiumRules" placeholder="每公斤/元" />
						</FormItem>
						</Col>
					</Row>
				</Form>
			</div>
			<div class="drawer-footer br" v-show="type != '0'">
				<Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
				<Button @click="visible = false">取消</Button>
			</div>
		</Drawer>
	</div>
</template>

<script>
	import {
		addLogisticsRoute,
		updateLogisticsRoute
	} from "@/api/app";
	import dict from "@/views/my-components/hiver/dict";
	import uploadPicInput from "@/views/my-components/hiver/upload-pic-input";
	import regionTreeChoose from "@/views/my-components/hiver/region-tree-choose";
	export default {
		name: "company",
		components: {
			dict,
			uploadPicInput,
			regionTreeChoose
		},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
			},
			type: {
				type: String,
				default: "0",
			},
		},
		data() {
			return {
				roleList: [],
				visible: this.value,
				title: "",
				data: [],
				passColor: "",
				submitLoading: false,
				maxHeight: 510,
				form: {
					circuitName: '',
					goStation: '沧州',
					arrivalStation: '',
					premiumRules: ''
				},
				formValidate: {
					// 表单验证规则
					circuitName: [{
						required: true,
						message: "请输入线路名称",
						trigger: "change"
					}, ],
					goStation: [{
						required: true,
						message: "请输入出发站",
						trigger: "change"
					}, ],
					arrivalStation: [{
						required: true,
						message: "请输入到达站",
						trigger: "change"
					}, ],
					premiumRules: [{
						required: true,
						message: "请输入保费规则",
						trigger: "change"
					}, ],
				},
			};
		},
		methods: {
			init() {

			},
			changePass(v, grade, strength) {
				this.form.password = strength;
			},
			submit() {

				this.$refs.form.validate((valid) => {
					if (valid) {
						if (this.type == "1") {
							// 编辑
							this.submitLoading = true;
							updateLogisticsRoute(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						} else {
							// 添加
							this.submitLoading = true;
							addLogisticsRoute(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						}
					}
				});
			},
			handleSelectRegion(v) {
				this.form.region = v;
			},
			setCurrentValue(value) {
				if (value === this.visible) {
					return;
				}
				if (this.type == "1") {
					this.title = "编辑线路";
					this.maxHeight =
						Number(document.documentElement.clientHeight - 121) + "px";
				} else if (this.type == "2") {
					this.title = "添加线路";
					this.maxHeight =
						Number(document.documentElement.clientHeight - 121) + "px";
				} else {
					this.title = "线路详情";
					this.maxHeight = "100%";
				}
				// 清空数据
				this.$refs.form.resetFields();
				if (this.type == "0" || this.type == "1") {
					// 回显数据
					let data = this.data;
					
					// 回显
					this.form = data;
				} else {
					// 添加
					this.form = {
						companyAddress: [],
						signCompany: "0",
					};
				}
				this.visible = value;
			},
		},
		watch: {
			value(val) {
				this.setCurrentValue(val);
			},
			visible(value) {
				this.$emit("input", value);
			},
		},
		mounted() {
			this.init();
		},
	};
</script>

<style lang="less">
	@import "@/styles/drawer-common.less";
</style>