1

src/views/app/shop/addEdit.vue

@@ -20,8 +20,8 @@
 					</Row>
 					<Row :gutter="32">
 						<Col span="12">
-						<FormItem label="所属区域" class="form-noheight">
-							<shopArea-tree-choose @on-change="handleSelectShopAreaTree"
+						<FormItem label="所属区域" prop="shopArea" class="form-noheight">
+							<shopArea-tree-choose @on-change="handleSelectShopAreaTree" :root-id="shopAreaRootId"
 								ref="shopAreaTree"></shopArea-tree-choose>
 						</FormItem>
 						</Col>
@@ -289,11 +289,13 @@
 			},
 		},
 		data() {
+			const userInfo = JSON.parse(this.getStore("userInfo") || "{}");
 			return {
 				roleList: [],
 				roleList2: [],
 				shopAreaList: [],
 				businessDistrictLevelList: [],
+				userDepartmentId: userInfo.departmentId || "",
 				visible: this.value,
 				title: "",
 				passColor: "",
@@ -368,6 +370,11 @@
 						},
 						trigger: "change"
 					}],
+					shopArea: [{
+						required: true,
+						message: "请选择所属区域",
+						trigger: "change"
+					}],
 					shopDeliveryLocation: [{
 						validator: (rule, value, callback) => {
 							if (this.form.supportShopDelivery == 1 && !value) {
@@ -422,6 +429,9 @@
 			};
 		},
 		computed: {
+			shopAreaRootId() {
+				return this.form.regionId || this.userDepartmentId || "";
+			},
 			boundWorkerText() {
 				if (!this.form.workerId) return "";
 				return `${this.form.workerName || ""} ${this.form.workerPhone || ""}`;

src/views/my-components/hiver/shopArea-tree-choose.vue

@@ -105,6 +105,7 @@
 							}
 						});
 						this.dataDep = res.result;
+						this.syncSelectedTitle();
 					}
 				});
 			},
@@ -183,14 +184,49 @@
 				this.$emit("on-clear");
 			},
 			setData(ids, title) {
-				this.shopAreaTitle = title;
 				if (this.multiple) {
-					this.shopArea = ids;
+					this.shopArea = Array.isArray(ids) ? ids : (ids ? [ids] : []);
 				} else {
 					this.shopArea = [];
-					this.shopArea.push(ids);
+					if (ids) {
+						this.shopArea.push(ids);
+					}
+				}
+				this.shopAreaTitle = title || "";
+				this.syncSelectedTitle();
+				this.emitChange();
+			},
+			emitChange() {
+				if (this.multiple) {
+					this.$emit("on-change", this.shopArea);
+				} else {
+					this.$emit("on-change", this.shopArea[0] || "");
 				}
-				this.$emit("on-change", this.shopArea);
+			},
+			syncSelectedTitle() {
+				if (this.shopAreaTitle || !this.shopArea.length || !this.dataDep.length) {
+					return;
+				}
+				const selectedIds = this.shopArea.map(item => String(item));
+				const titles = [];
+				const findTitles = (list) => {
+					list.forEach((item) => {
+						if (selectedIds.includes(String(item.id))) {
+							titles.push(item.title);
+						}
+						if (item.children && item.children.length) {
+							findTitles(item.children);
+						}
+					});
+				};
+				findTitles(this.dataDep);
+				this.shopAreaTitle = titles.join("、");
+			},
+		},
+		watch: {
+			rootId() {
+				this.searchKey = "";
+				this.initShopAreaData();
 			},
 		},
 		mounted() {