school-manage/src/views/app/shop/addEdit.vue

<template>
	<div class="user-edit">
		<!-- Drawer抽屉 -->
		<Drawer :title="title" v-model="visible" width="720" draggable :mask-closable="type == '0'">
			<div :style="{ maxHeight: maxHeight }" class="drawer-content">


				<Form ref="form" :model="form" :rules="formValidate" label-position="top">
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="店铺名称" prop="shopName">
							<Input v-model="form.shopName" autocomplete="off" :maxlength="16" />
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="店铺图标" class="form-noheight">
							<upload-pic-input v-model="form.shopIcon"></upload-pic-input>
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="所属区域" class="form-noheight">
							<shopArea-tree-choose @on-change="handleSelectShopAreaTree"
								ref="shopAreaTree"></shopArea-tree-choose>
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="店铺分类" class="form-noheight">
							<dict dict="shopType" v-model="form.shopType" transfer />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="24">
						<FormItem label="店铺详细地址" prop="shopAddress">
							<Input v-model="form.shopAddress" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="联系方式" prop="contactPhone">
							<Input v-model="form.contactPhone" autocomplete="off" :maxlength="16" />
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="副标题" prop="contactPhone">
							<Input v-model="form.subtitle" autocomplete="off" :maxlength="16" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="支付宝账号" prop="contactPhone">
							<Input v-model="form.aliAccount" autocomplete="off" :maxlength="16" />
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="支付宝户名" prop="contactPhone">
							<Input v-model="form.aliName" autocomplete="off" :maxlength="16" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="排名" prop="shoprank">
							<Input v-model="form.shoprank" autocomplete="off" :maxlength="16" />
						</FormItem>
						</Col>
					</Row>
					<Divider>商家自配送</Divider>
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="是否支持商家自配送" prop="supportShopDelivery">
							<RadioGroup v-model="form.supportShopDelivery">
								<Radio :label="1">是</Radio>
								<Radio :label="0">否</Radio>
							</RadioGroup>
						</FormItem>
						</Col>
						<Col span="12" v-if="form.supportShopDelivery == 1">
						<FormItem label="自配送配送费" prop="orderBkge">
							<InputNumber v-model="form.orderBkge" :min="0" :step="0.1" style="width: 100%" @on-change="handleOrderBkgeChange" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32" v-if="form.supportShopDelivery == 1">
						<Col span="12">
						<FormItem label="送达位置" prop="shopDeliveryLocation">
							<Select v-model="form.shopDeliveryLocation" transfer>
								<Option :value="1">送到宿舍</Option>
								<Option :value="2">送到楼下</Option>
							</Select>
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="配送时长(分钟)" prop="shopDeliveryDuration">
							<InputNumber v-model="form.shopDeliveryDuration" :min="1" :precision="0" style="width: 100%" />
						</FormItem>
						</Col>
					</Row>
					<Row :gutter="32" v-if="form.supportShopDelivery == 1">
						<Col span="12">
						<FormItem label="配送员手机号">
							<Input v-model="workerMobile" autocomplete="off" :maxlength="16" placeholder="输入配送员手机号">
								<Button slot="append" :loading="workerLoading" @click="findWorker">查询</Button>
							</Input>
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="已绑定配送员" prop="workerId">
							<Input :value="boundWorkerText" readonly placeholder="暂未绑定配送员" />
						</FormItem>
						</Col>
					</Row>
					<Divider />
					<Row :gutter="32">

						<Col span="24">
						<FormItem label="备注">
							<Input type="textarea" v-model="form.remark" :rows="4" />
						</FormItem>
						</Col>
					</Row>
					<Divider />



				</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 {
		getUsersByRoleName,
		getDictDataByType
	} from "@/api/index";
	import {
		validateUsername,
		validateMobile,
		validatePassword,
	} from "@/libs/validate";
	import shopAreaTreeChoose from "@/views/my-components/hiver/shopArea-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";
	import {
		addShop,
		editShop,
		findShopWorkerByMobile,
		initShopArea,
		loadShopArea,
	} from "@/api/app";
	export default {
		name: "addEdit",
		components: {
			shopAreaTreeChoose,
			uploadPicInput,
			SetPassword,
			dict,
		},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
			},
			type: {
				type: String,
				default: "0",
			},
		},
		data() {
			return {
				roleList: [],
				roleList2: [],
				shopAreaList: [],
				businessDistrictLevelList: [],
				visible: this.value,
				title: "",
				passColor: "",
				submitLoading: false,
				workerLoading: false,
				workerMobile: "",
				maxHeight: 510,
				form: {
					address: [],
					supportShopDelivery: 0,
					orderBkge: 0,
				},
				formValidate: {
					// 表单验证规则
					username: [{
							required: true,
							message: "请输入登录账号",
							trigger: "blur"
						},
						{
							validator: validateUsername,
							trigger: "blur"
						},
					],
					nickname: [{
						required: true,
						message: "请输入用户名",
						trigger: "blur"
					}, ],
					mobile: [{
							required: true,
							message: "请输入手机号",
							trigger: "blur"
						},
						{
							validator: validateMobile,
							trigger: "blur"
						},
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							validator: validatePassword,
							trigger: "blur"
						},
					],
					email: [{
							required: true,
							message: "请输入邮箱地址"
						},
						{
							type: "email",
							message: "邮箱格式不正确"
						},
					],
					workerId: [{
						validator: (rule, value, callback) => {
							if (this.form.supportShopDelivery == 1 && !this.form.workerId) {
								callback(new Error("请查询并绑定配送员"));
							} else {
								callback();
							}
						},
						trigger: "change"
					}],
					shopDeliveryLocation: [{
						validator: (rule, value, callback) => {
							if (this.form.supportShopDelivery == 1 && !value) {
								callback(new Error("请选择送达位置"));
							} else {
								callback();
							}
						},
						trigger: "change"
					}],
					shopDeliveryDuration: [{
						validator: (rule, value, callback) => {
							if (this.form.supportShopDelivery == 1 && (!value || value <= 0)) {
								callback(new Error("请输入配送时长"));
							} else {
								callback();
							}
						},
						trigger: "change"
					}],
				},
			};
		},
		computed: {
			boundWorkerText() {
				if (!this.form.workerId) return "";
				return `${this.form.workerName || ""} ${this.form.workerPhone || ""}`;
			},
		},
		methods: {
			init(v) {
				this.getRoleList(v);
			},
			getRoleList(v) {
				getUsersByRoleName("ROLE_OWNER").then((res) => {
					if (res.success) {
						this.roleList = res.result;
					}
				});
				getUsersByRoleName("ROLE_MANAGER").then((res) => {
					if (res.success) {
						this.roleList2 = res.result;
					}
				});
				getDictDataByType("mallMuseumType").then((res) => {
					if (res.success) {
						this.businessDistrictLevelList = res.result;
					}
				});
				initShopArea().then((res) => {

					if (res.success) {
						res.result.forEach(function(e) {
							if (e.isParent) {
								e.loading = false;
								e.children = [];
								e._loading = false;
							}
						});
						this.data = res.result;
					}
				});
				getDictDataByType("shopType").then((res) => {
					if (res.success) {
						this.shopType = res.result;
					}
				});
			},
			handleSelectShopAreaTree(v) {
				this.form.shopArea = v;
			},
			handleOrderBkgeChange(value) {
				const numberValue = Number(value || 0);
				this.$set(this.form, "orderBkge", Number(numberValue.toFixed(1)));
			},
			findWorker() {
				if (!this.workerMobile) {
					this.$Message.warning("请输入配送员手机号");
					return;
				}
				this.workerLoading = true;
				findShopWorkerByMobile({
					mobile: this.workerMobile
				}).then((res) => {
					this.workerLoading = false;
					if (res.success) {
						this.$set(this.form, "workerId", res.result.workerId);
						this.$set(this.form, "workerName", res.result.workerName);
						this.$set(this.form, "workerPhone", res.result.workerPhone || res.result.mobile);
						this.$Message.success("配送员绑定成功");
					} else {
						this.$Message.error(res.message || "未查询到配送员");
					}
				}).catch(() => {
					this.workerLoading = false;
				});
			},
			normalizeSelfDeliveryForm() {
				if (this.form.supportShopDelivery == null) {
					this.$set(this.form, "supportShopDelivery", 0);
				}
				this.form.supportShopDelivery = Number(this.form.supportShopDelivery);
				this.form.orderBkge = Number(Number(this.form.orderBkge || 0).toFixed(1));
				if (this.form.supportShopDelivery != 1) {
					this.form.orderBkge = 0;
					this.form.shopDeliveryLocation = null;
					this.form.shopDeliveryDuration = null;
					this.form.workerId = "";
					this.form.workerName = "";
					this.form.workerPhone = "";
				}
			},
			changePass(v, grade, strength) {
				this.form.passStrength = strength;
			},
			submit() {
				this.normalizeSelfDeliveryForm();
				this.$refs.form.validate((valid) => {
					if (valid) {
						if (typeof this.form.chargeTime == "object") {
							this.form.chargeTime = this.format(this.form.chargeTime, "yyyy-MM-dd");
						}
						if (typeof this.form.startTime == "object") {
							this.form.startTime = this.format(this.form.startTime, "yyyy-MM-dd");
						}
						if (typeof this.form.endTime == "object") {
							this.form.endTime = this.format(this.form.endTime, "yyyy-MM-dd");
						}
						debugger;
						if (this.form.users == '' || this.form.users == null) {
							delete this.form.users;
						}
						// 处理商品分类的名称
						if (this.form.shopType != '' && this.form.shopType != null) {
							this.shopType.forEach(item => {
								debugger;
								if (this.form.shopType == item.value) {
									this.form.shopTypeTitle = item.title;
								}
							});
						}
						this.form.shopMangerId = this.form.shopOwnerId
						if (this.type == "1") {
							// 编辑
							this.submitLoading = true;
							delete this.form.products
							delete this.form.saleCount
							delete this.form.shopTakeaway
							delete this.form.storeFlag
							delete this.form.printingMethod
							delete this.form.printingMethod

							editShop(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;
							addShop(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.address) {
						data.address = data.address.split(",");
					} else {
						data.address = [];
					}
					// 商圈
					this.$refs.shopAreaTree.setData(data.shopArea, data.shopAreaTitle);
					// 回显
					this.form = data;
					this.form.supportShopDelivery = data.supportShopDelivery == null ? 0 : Number(data.supportShopDelivery);
					this.form.orderBkge = data.orderBkge == null ? 0 : Number(data.orderBkge);
					this.workerMobile = data.workerPhone || "";
				} else {
					// 添加
					//this.$refs.shopAreaTree.setData("", "");
					this.form = {
						/*type: 0,
						sex: "",
						address: [],*/
						supportShopDelivery: 0,
						orderBkge: 0,
					};
					this.workerMobile = "";
				}
				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>