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>
					<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,
		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,
				maxHeight: 510,
				form: {
					address: [],
				},
				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: "邮箱格式不正确"
						},
					],
				},
			};
		},
		methods: {
			init(v) {
				console.log("111")
				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;
			},
			changePass(v, grade, strength) {
				this.form.passStrength = strength;
			},
			submit() {
				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

							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;
				} else {
					// 添加
					//this.$refs.shopAreaTree.setData("", "");
					this.form = {
						/*type: 0,
						sex: "",
						address: [],*/
					};
				}
				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>