school-manage/src/views/sys/order-manage/addEdit.vue

<template>
	<div class="order-edit">
		<!-- Drawer抽屉 -->
		<Drawer :title="title" v-model="visible" width="720" draggable :mask-closable="type == '0'">
			<div :style="{ maxHeight: maxHeight }" class="drawer-content">
				<div class="drawer-header">
					<div style="margin-right: 16px">单号:{{form.orderNumber}}</div>
				</div>

				<Form ref="form" :model="form" :rules="formValidate" label-position="top">
					<Row :gutter="32">
						<Col span="8">
						<FormItem label="发站" prop="kdOrderId">
							<Input v-model="form.goStationName" />
						</FormItem>
						</Col>
						<Col span="8">
						<FormItem label="到站" prop="kdOrderId">
							<Input v-model="form.arrivalStationName" />
						</FormItem>
						</Col>
						<Col span="8">
						<FormItem label="收货人" prop="kdOrderId">
							<Input v-model="form.receiverName" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="重量" prop="kdOrderId">
							<Input v-model="form.weight" />
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="件数" prop="kdOrderId">
							<Input v-model="form.count" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="运输费" prop="kdOrderId">
							<Input v-model="form.freight" />
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="小费" prop="kdOrderId">
							<Input v-model="form.tips" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="月付" prop="kdOrderId">
							<Input v-model="form.yuefu" />
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="现金" prop="kdOrderId">
							<Input v-model="form.xianjin" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="总费用" prop="kdOrderId">
							<Input v-model="form.allCost" />
						</FormItem>
						</Col>
						<Col span="24">
						<FormItem label="备注">
							<Input type="textarea" v-model="form.remark" :rows="4" />
						</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 {
		getAllRoleList,
		addOrder,
		editogisticsOrder
	} from "@/api/index";
	import {
		validateUsername,
		validateMobile,
		validatePassword,
	} from "@/libs/validate";
	import departmentTreeChoose from "@/views/my-components/hiver/department-tree-choose";
	import uploadPicInput from "@/views/my-components/hiver/upload-pic-input";
	import SetPassword from "@/views/my-components/hiver/set-password";
	import dict from "@/views/my-components/hiver/dict";
	export default {
		name: "addEdit",
		components: {
			departmentTreeChoose,
			uploadPicInput,
			SetPassword,
			dict,
		},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
			},
			type: {
				type: String,
				default: "0",
			},
		},
		data() {
			return {
				roleList: [],
				visible: this.value,
				title: "",
				passColor: "",
				submitLoading: false,
				maxHeight: 510,
				form: {
					orderAddress: [],
				},
				formValidate: {

				},
			};
		},
		methods: {
			init() {
				this.getRoleList();
			},
			getRoleList() {
				getAllRoleList().then((res) => {
					if (res.success) {
						this.roleList = res.result;
					}
				});
			},
			changePass(v, grade, strength) {
				this.form.passStrength = strength;
			},
			submit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						if (this.type == "1") {
							// 编辑
							this.submitLoading = true;
							editogisticsOrder(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;
							addOrder(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						}
					}
				});
			},
			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;
					// 地址
					if (data.orderAddress) {
						data.orderAddress = data.orderAddress.split(",");
					} else {
						data.orderAddress = [];
					}
					// 回显
					this.form = data;
				} else {
					this.form = {
						type: 0,
						orderAddress: [],
					};
				}
				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>