cloud-web-corejs 1.0.54-dev.680 → 1.0.54-dev.682

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.680",
+  "version": "1.0.54-dev.682",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/components/baseArea/index.vue

@@ -88,7 +88,9 @@
         <div class="base-area-level-nav">
           <el-button
             size="mini"
+            class="base-area-nav-btn"
             :disabled="!canPrevLevel"
+            @mousedown.prevent
             @click="prevLevel"
           >
             <i class="el-icon-arrow-left"></i>
@@ -96,8 +98,9 @@
           <span class="base-area-level-label">{{ currentLevelLabel }}</span>
           <el-button
             size="mini"
-            type="primary"
+            class="base-area-nav-btn"
             :disabled="!canNextLevel"
+            @mousedown.prevent
             @click="nextLevel"
           >
             <i class="el-icon-arrow-right"></i>
@@ -132,6 +135,8 @@
 
 <script>
 const LEVEL_LABELS = ["省份", "城市", "区县", "乡镇"];
+const AREA_LEVEL_KEYS = ["province", "city", "district", "town"];
+const MAX_AREA_DEPTH = 4;
 const SEARCH_DEBOUNCE = 300;
 
 export default {
@@ -185,10 +190,10 @@ export default {
       type: Number,
       default: 630,
     },
-    /** path: 逗号分隔各级 id，如 1,2,3,4；leaf: 仅末级 id */
+    /** leaf: 绑定末级 id；path: 兼容旧版逗号分隔路径 */
     valueFormat: {
       type: String,
-      default: "path",
+      default: "leaf",
     },
   },
   data() {
@@ -206,6 +211,9 @@ export default {
       searchTimer: null,
       syncToken: 0,
       skipValueSync: false,
+      committedBrowseSnapshot: null,
+      committedBoundValue: null,
+      lastSelectionPayload: null,
     };
   },
   computed: {
@@ -216,20 +224,20 @@ export default {
       return this.searchDropdownVisible && this.hasSearchKeyword;
     },
     displayText() {
+      if (this.labelValue) {
+        return this.labelValue;
+      }
       const pathLabel = this.selectedPath.length
         ? this.buildPathLabel(this.selectedPath)
         : "";
       if (this.popoverVisible && pathLabel) {
         return pathLabel;
       }
-      if (this.labelValue) {
-        return this.labelValue;
-      }
       return pathLabel || "";
     },
     tabs() {
       const tabs = [];
-      for (let i = 0; i < this.maxLevel; i++) {
+      for (let i = 0; i < this.browseLevelCount; i++) {
         tabs.push({
           level: i + 1,
           label: LEVEL_LABELS[i] || `第${i + 1}级`,
@@ -251,10 +259,13 @@ export default {
     },
     canNextLevel() {
       return (
-        this.activeLevel < this.maxLevel &&
+        this.activeLevel < this.browseLevelCount &&
         this.isTabEnabled(this.activeLevel + 1)
       );
     },
+    browseLevelCount() {
+      return Math.max(this.maxLevel, this.selectedPath.length, 1);
+    },
     currentLevelLabel() {
       return LEVEL_LABELS[this.activeLevel - 1] || `第${this.activeLevel}级`;
     },
@@ -269,10 +280,6 @@ export default {
     labelValue(val) {
       if (!val && !this.value) {
         this.resetBrowseState(false);
-        return;
-      }
-      if (this.value && !this.isValueSynced(this.parseValueIds(this.value))) {
-        this.syncFromValue();
       }
     },
   },
@@ -280,47 +287,79 @@ export default {
     clearTimeout(this.searchTimer);
   },
   methods: {
+    getResolveDepthLimit(item) {
+      if (item && item.treePath) {
+        const ids = this.parseTreePathIds(item.treePath);
+        return Math.min(Math.max(ids.length, this.maxLevel, 1), MAX_AREA_DEPTH);
+      }
+      return MAX_AREA_DEPTH;
+    },
+    isPathResolvedForItem(path, item) {
+      if (!path || !path.length || !item || item.id == null) {
+        return false;
+      }
+      return this.getAreaId(path[path.length - 1]) == item.id;
+    },
     isSearchItemActive(item) {
       if (!item || this.value == null || this.value === "") {
         return false;
       }
-      const ids = this.parseValueIds(this.value);
-      if (!ids.length) {
+      const leafId = this.parseValueId(this.value);
+      if (leafId == null) {
         return false;
       }
-      return ids[ids.length - 1] == this.getAreaId(item);
+      return leafId == this.getAreaId(item);
     },
-    parseValueIds(val) {
+    parseValueId(val) {
       if (val == null || val === "") {
-        return [];
+        return null;
       }
       const str = String(val).trim();
-      if (this.valueFormat === "path" && str.includes(",")) {
-        return str.split(",").map((part) => part.trim()).filter((part) => part !== "");
+      if (this.isLegacyPathValue(str)) {
+        const parts = str.split(",").map((part) => part.trim()).filter(Boolean);
+        return parts.length ? parts[parts.length - 1] : null;
+      }
+      return str;
+    },
+    parseLegacyPathIds(val) {
+      if (val == null || val === "") {
+        return [];
       }
-      return [str];
+      return String(val)
+        .split(",")
+        .map((part) => part.trim())
+        .filter((part) => part !== "");
     },
-    isPathValue(val) {
+    isLegacyPathValue(val) {
       return (
         this.valueFormat === "path" &&
         val != null &&
-        String(val).includes(",")
+        String(val).includes(",") &&
+        !String(val).startsWith(",")
       );
     },
-    formatPathValue(path) {
-      if (!path || !path.length) {
-        return null;
+    parseTreePathIds(treePath) {
+      if (treePath == null || treePath === "") {
+        return [];
       }
-      const ids = path
-        .map((item) => this.getAreaId(item))
-        .filter((id) => id != null && id !== "");
-      if (!ids.length) {
+      return String(treePath)
+        .split(",")
+        .map((part) => part.trim())
+        .filter((part) => part !== "");
+    },
+    formatBoundValue(path, item) {
+      const last = item || (path && path.length ? path[path.length - 1] : null);
+      const leafId = this.getAreaId(last);
+      if (leafId == null) {
         return null;
       }
-      if (this.valueFormat === "leaf") {
-        return ids[ids.length - 1];
+      if (this.valueFormat === "path") {
+        const ids = (path || [])
+          .map((node) => this.getAreaId(node))
+          .filter((id) => id != null && id !== "");
+        return ids.length ? ids.join(",") : String(leafId);
       }
-      return ids.join(",");
+      return leafId;
     },
     getAreaId(item) {
       if (!item) {
@@ -337,11 +376,14 @@ export default {
       }
       return null;
     },
-    isValueSynced(ids) {
-      if (!ids.length || this.selectedPath.length !== ids.length) {
+    isValueSynced(leafId) {
+      if (leafId == null || leafId === "" || !this.selectedPath.length) {
         return false;
       }
-      return ids.every((id, index) => this.getAreaId(this.selectedPath[index]) == id);
+      const currentLeaf = this.getAreaId(
+        this.selectedPath[this.selectedPath.length - 1]
+      );
+      return currentLeaf == leafId;
     },
     buildPathLabel(path) {
       if (!path || !path.length) {
@@ -356,6 +398,92 @@ export default {
         .filter((name) => !!name)
         .join("");
     },
+    createEmptyAreaPathResult(value) {
+      return {
+        value: value != null && value !== "" ? value : null,
+        label: null,
+        path: [],
+        province: null,
+        city: null,
+        district: null,
+        town: null,
+      };
+    },
+    formatAreaPathResult(value, path, label) {
+      const result = this.createEmptyAreaPathResult(value);
+      result.label =
+        label != null && label !== ""
+          ? label
+          : this.buildPathLabel(path) || this.labelValue || null;
+      result.path = path || [];
+      (path || []).forEach((node, index) => {
+        const key = AREA_LEVEL_KEYS[index];
+        if (key && Object.prototype.hasOwnProperty.call(result, key)) {
+          result[key] = node;
+        }
+      });
+      return result;
+    },
+    async ensurePathDetail(path) {
+      const result = [];
+      for (let i = 0; i < path.length; i++) {
+        const node = path[i];
+        const id = this.getAreaId(node);
+        if (id != null) {
+          const detail = await this.fetchAreaById(id);
+          result.push(detail || node);
+        } else {
+          result.push(node);
+        }
+      }
+      return result;
+    },
+    async getAreaPath(value) {
+      const val = value !== undefined ? value : this.value;
+      if (val == null || val === "") {
+        return this.createEmptyAreaPathResult(null);
+      }
+      const leafId = this.getLeafIdFromValue(val);
+      let path = null;
+      if (
+        leafId != null &&
+        this.isValueSynced(leafId) &&
+        !this.shouldResyncBrowsePath() &&
+        this.selectedPath.length
+      ) {
+        path = this.selectedPath.map((item) => ({ ...item }));
+      }
+      if (!path || !path.length) {
+        if (this.isLegacyPathValue(val)) {
+          path = await this.resolvePathByIds(this.parseLegacyPathIds(val));
+        } else if (leafId != null) {
+          const area = await this.fetchAreaById(leafId);
+          if (area) {
+            path = await this.resolveAreaPath(area);
+          } else {
+            path = [{ id: leafId, fullName: this.labelValue || undefined }];
+          }
+        }
+      }
+      if (!path || !path.length) {
+        return this.createEmptyAreaPathResult(val);
+      }
+      path = await this.ensurePathDetail(path);
+      return this.formatAreaPathResult(val, path);
+    },
+    hasDisplayLabel() {
+      return !!(this.labelValue && String(this.labelValue).trim());
+    },
+    getLeafIdFromValue(val) {
+      if (val == null || val === "") {
+        return null;
+      }
+      if (this.isLegacyPathValue(val)) {
+        const ids = this.parseLegacyPathIds(val);
+        return ids.length ? ids[ids.length - 1] : null;
+      }
+      return this.parseValueId(val);
+    },
     emitResolvedLabelIfNeeded() {
       if (this.popoverVisible || this.labelValue) {
         return;
@@ -382,11 +510,89 @@ export default {
       return level === 1 || this.selectedPath.length >= level - 1;
     },
     handlePopoverShow() {
+      this.saveCommittedBrowseSnapshot();
+      this.$emit("popover-open");
       this.$nextTick(() => {
         this.$refs.searchInputRef && this.$refs.searchInputRef.focus();
       });
       this.initBrowseStateFromValue();
     },
+    saveCommittedBrowseSnapshot() {
+      this.committedBoundValue = this.value;
+      this.committedBrowseSnapshot = {
+        boundValue: this.value,
+        leafId: this.getLeafIdFromValue(this.value),
+        selectedPath: this.selectedPath.map((item) => ({ ...item })),
+        activeLevel: this.activeLevel,
+      };
+    },
+    isSameBoundValue(a, b) {
+      const normalize = (val) => {
+        if (val == null || val === "") {
+          return null;
+        }
+        return String(val);
+      };
+      return normalize(a) === normalize(b);
+    },
+    emitChangeIfCommitted() {
+      const snapshot = this.committedBrowseSnapshot;
+      if (!snapshot) {
+        return;
+      }
+      const oldVal = snapshot.boundValue;
+      const newVal = this.value;
+      if (!this.isSameBoundValue(oldVal, newVal)) {
+        const payload = this.lastSelectionPayload || {
+          value: newVal,
+          row: null,
+          label: this.labelValue,
+        };
+        this.$emit("change", {
+          value: payload.value != null ? payload.value : newVal,
+          row: payload.row || null,
+          label: payload.label != null ? payload.label : this.labelValue,
+          path: payload.path || [],
+        });
+      }
+      this.committedBoundValue = null;
+      this.lastSelectionPayload = null;
+    },
+    restoreBrowseStateIfUncommitted() {
+      const snapshot = this.committedBrowseSnapshot;
+      if (!snapshot) {
+        return;
+      }
+      if (!this.isSameBoundValue(this.value, snapshot.boundValue)) {
+        this.levelItems = [];
+        this.committedBrowseSnapshot = null;
+        return;
+      }
+      const committedLeafId = snapshot.leafId;
+      if (this.isValueSynced(committedLeafId)) {
+        this.levelItems = [];
+        this.committedBrowseSnapshot = null;
+        return;
+      }
+      if (snapshot.selectedPath && snapshot.selectedPath.length) {
+        this.selectedPath = snapshot.selectedPath.map((item) => ({ ...item }));
+        this.activeLevel = snapshot.activeLevel;
+      } else if (committedLeafId) {
+        this.selectedPath = [
+          {
+            id: committedLeafId,
+            fullName: this.labelValue || undefined,
+            name: this.labelValue || undefined,
+          },
+        ];
+        this.activeLevel = 1;
+      } else {
+        this.selectedPath = [];
+        this.activeLevel = 1;
+      }
+      this.levelItems = [];
+      this.committedBrowseSnapshot = null;
+    },
     syncFromValue() {
       if (this.skipValueSync) {
         return;
@@ -396,34 +602,68 @@ export default {
         this.resetBrowseState(false);
         return;
       }
-      const ids = this.parseValueIds(val);
-      if (this.isValueSynced(ids)) {
+      if (!this.hasDisplayLabel()) {
+        this.resolveLabelFromValue();
+      }
+    },
+    async resolveLabelFromValue() {
+      const val = this.value;
+      if (!val || this.hasDisplayLabel()) {
         return;
       }
-      if (this.isPathValue(val)) {
-        this.syncBrowseStateFromPathIds(ids);
+      const leafId = this.getLeafIdFromValue(val);
+      if (leafId == null) {
         return;
       }
-      this.syncBrowseStateFromArea({
-        id: ids[0],
-        fullName: this.labelValue || undefined,
-      });
+      const token = ++this.syncToken;
+      const area = await this.fetchAreaById(leafId);
+      if (token !== this.syncToken || this.hasDisplayLabel()) {
+        return;
+      }
+      const label =
+        (area && area.fullName) ||
+        (area && area.name) ||
+        null;
+      if (label) {
+        this.$emit("update:labelValue", label);
+      }
     },
-    initBrowseStateFromValue() {
-      if (!this.value) {
+    shouldResyncBrowsePath() {
+      if (!this.labelValue || !this.selectedPath.length) {
+        return false;
+      }
+      const pathLabel = this.buildPathLabel(this.selectedPath);
+      return pathLabel !== String(this.labelValue).trim();
+    },
+    syncBrowseStateForPopover() {
+      const val = this.value;
+      if (!val) {
         if (!this.levelItems.length) {
           this.loadLevelItems(this.getParentId());
         }
         return;
       }
-      const ids = this.parseValueIds(this.value);
-      if (!this.isValueSynced(ids)) {
-        this.syncFromValue();
+      const leafId = this.getLeafIdFromValue(val);
+      if (this.isValueSynced(leafId) && !this.shouldResyncBrowsePath()) {
+        const expectedActive = this.selectedPath.length || 1;
+        if (this.activeLevel !== expectedActive) {
+          this.activeLevel = expectedActive;
+          this.loadLevelItems(this.getParentId());
+          return;
+        }
+        if (!this.levelItems.length) {
+          this.loadLevelItems(this.getParentId());
+        }
         return;
       }
-      if (!this.levelItems.length) {
-        this.loadLevelItems(this.getParentId());
+      if (this.isLegacyPathValue(val)) {
+        this.syncBrowseStateFromPathIds(this.parseLegacyPathIds(val));
+        return;
       }
+      this.syncBrowseStateFromLeafId(leafId);
+    },
+    initBrowseStateFromValue() {
+      this.syncBrowseStateForPopover();
     },
     getAreaRequestData(extra = {}) {
       return {
@@ -482,22 +722,36 @@ export default {
       if (id == null || id === "") {
         return Promise.resolve(null);
       }
-      return this.requestAreaList({ id }).then(
-        (rows) => rows.find((row) => this.getAreaId(row) == id) || null
-      );
+      return new Promise((resolve) => {
+        this.$http({
+          url: USER_PREFIX + "/area/get",
+          method: "post",
+          data: this.getAreaRequestData({ id }),
+          success: (res) => {
+            const objx = res && res.objx;
+            if (objx && typeof objx === "object" && !Array.isArray(objx)) {
+              resolve(objx);
+              return;
+            }
+            resolve(null);
+          },
+          error: () => resolve(null),
+        });
+      });
     },
     isAreaObject(node) {
       return node && typeof node === "object" && node.id != null;
     },
-    buildAreaPath(item) {
+    buildAreaPath(item, depthLimit) {
+      const limit = depthLimit == null ? this.maxLevel : depthLimit;
       if (item.pathList && Array.isArray(item.pathList) && item.pathList.length > 1) {
         if (this.isAreaObject(item.pathList[0])) {
-          return item.pathList.slice(0, this.maxLevel);
+          return item.pathList.slice(0, limit);
         }
       }
       if (item.areaPath && Array.isArray(item.areaPath) && item.areaPath.length > 1) {
         if (this.isAreaObject(item.areaPath[0])) {
-          return item.areaPath.slice(0, this.maxLevel);
+          return item.areaPath.slice(0, limit);
         }
       }
       return null;
@@ -518,7 +772,7 @@ export default {
       }
       return null;
     },
-    async resolvePathByFullName(item) {
+    async resolvePathByFullName(item, depthLimit) {
       const fullName = (item.fullName || "").trim();
       if (!fullName) {
         return null;
@@ -526,7 +780,7 @@ export default {
       const path = [];
       let parentId = 0;
       let prefix = "";
-      for (let level = 0; level < this.maxLevel; level++) {
+      for (let level = 0; level < MAX_AREA_DEPTH; level++) {
         const children = await this.fetchChildren(parentId);
         if (!children.length) {
           break;
@@ -551,13 +805,13 @@ export default {
           path.push(item);
         }
       }
-      return path.length ? path.slice(0, this.maxLevel) : null;
+      return path.length ? path : null;
     },
-    async resolvePathByParentChain(item) {
+    async resolvePathByParentChain(item, depthLimit) {
       const chain = [];
       let current = item;
       let safety = 0;
-      while (current && safety < this.maxLevel + 5) {
+      while (current && safety < MAX_AREA_DEPTH + 2) {
         safety += 1;
         chain.unshift(current);
         const parentId = this.getParentIdFromRow(current);
@@ -570,23 +824,93 @@ export default {
         }
         current = parent;
       }
-      return chain.length ? chain.slice(0, this.maxLevel) : null;
+      return chain.length ? chain : null;
     },
-    async resolveAreaPath(item) {
-      const presetPath = this.buildAreaPath(item);
-      if (presetPath && presetPath.length) {
+    async resolvePathFromTreePath(area, depthLimit) {
+      const ids = this.parseTreePathIds(area && area.treePath);
+      if (!ids.length) {
+        return area && area.id != null ? [area] : null;
+      }
+      const path = [];
+      for (let i = 0; i < ids.length; i++) {
+        const id = ids[i];
+        let node = null;
+        if (area && this.getAreaId(area) == id) {
+          node = area;
+        } else {
+          node = await this.fetchAreaById(id);
+        }
+        path.push(node || { id });
+      }
+      if (area && area.id != null) {
+        const exists = path.some((node) => this.getAreaId(node) == area.id);
+        if (!exists) {
+          path.push(area);
+        }
+      }
+      return path.length ? path : null;
+    },
+    async resolveAreaPath(item, options = {}) {
+      if (!item || item.id == null) {
+        return item ? [item] : [];
+      }
+      const parentPath = await this.resolvePathByParentChain(item);
+      if (this.isPathResolvedForItem(parentPath, item)) {
+        return parentPath;
+      }
+      const depthLimit =
+        options.depthLimit != null
+          ? options.depthLimit
+          : this.getResolveDepthLimit(item);
+      if (item.treePath) {
+        const treePath = await this.resolvePathFromTreePath(item, depthLimit);
+        if (this.isPathResolvedForItem(treePath, item)) {
+          return treePath;
+        }
+      }
+      const presetPath = this.buildAreaPath(item, depthLimit);
+      if (this.isPathResolvedForItem(presetPath, item)) {
         return presetPath;
       }
-      const fullNamePath = await this.resolvePathByFullName(item);
-      if (fullNamePath && fullNamePath.length) {
+      const fullNamePath = await this.resolvePathByFullName(item, depthLimit);
+      if (this.isPathResolvedForItem(fullNamePath, item)) {
         return fullNamePath;
       }
-      const parentPath = await this.resolvePathByParentChain(item);
       if (parentPath && parentPath.length) {
         return parentPath;
       }
+      if (item.treePath) {
+        const treePath = await this.resolvePathFromTreePath(item, depthLimit);
+        if (treePath && treePath.length) {
+          return treePath;
+        }
+      }
+      if (presetPath && presetPath.length) {
+        return presetPath;
+      }
+      if (fullNamePath && fullNamePath.length) {
+        return fullNamePath;
+      }
       return [item];
     },
+    async syncBrowseStateFromLeafId(id) {
+      if (id == null || id === "") {
+        return;
+      }
+      const token = ++this.syncToken;
+      const area = await this.fetchAreaById(id);
+      if (token !== this.syncToken) {
+        return;
+      }
+      if (area) {
+        await this.syncBrowseStateFromArea(area);
+        return;
+      }
+      await this.syncBrowseStateFromArea({
+        id,
+        fullName: this.labelValue || undefined,
+      });
+    },
     async syncBrowseStateFromArea(item) {
       const token = ++this.syncToken;
       let seed = item || {};
@@ -625,21 +949,16 @@ export default {
       if (token !== this.syncToken) {
         return;
       }
-      path = path.slice(0, this.maxLevel);
       this.selectedPath = path;
-      const pathLen = path.length;
-      if (pathLen >= this.maxLevel) {
-        this.activeLevel = this.maxLevel;
-      } else {
-        this.activeLevel = pathLen;
-      }
+      this.activeLevel = path.length || 1;
       this.loadLevelItems(this.getParentId());
       this.emitResolvedLabelIfNeeded();
     },
-    async resolvePathByIds(ids) {
+    async resolvePathByIds(ids, depthLimit) {
+      const limit = depthLimit == null ? ids.length : depthLimit;
       const path = [];
       let parentId = 0;
-      for (let i = 0; i < ids.length && i < this.maxLevel; i++) {
+      for (let i = 0; i < ids.length && i < limit; i++) {
         const targetId = ids[i];
         const children = await this.fetchChildren(parentId);
         let matched = children.find((row) => this.getAreaId(row) == targetId);
@@ -661,7 +980,8 @@ export default {
     },
     async syncBrowseStateFromPathIds(ids) {
       const token = ++this.syncToken;
-      const path = await this.resolvePathByIds(ids);
+      const depthLimit = Math.min(Math.max(ids.length, this.maxLevel, 1), MAX_AREA_DEPTH);
+      const path = await this.resolvePathByIds(ids, depthLimit);
       if (token !== this.syncToken) {
         return;
       }
@@ -671,9 +991,8 @@ export default {
         }
         return;
       }
-      this.selectedPath = path.slice(0, this.maxLevel);
-      const pathLen = this.selectedPath.length;
-      this.activeLevel = pathLen >= this.maxLevel ? this.maxLevel : pathLen;
+      this.selectedPath = path;
+      this.activeLevel = path.length;
       this.loadLevelItems(this.getParentId());
       this.emitResolvedLabelIfNeeded();
     },
@@ -681,6 +1000,9 @@ export default {
       this.searchKeyword = "";
       this.searchList = [];
       this.searchDropdownVisible = false;
+      this.cancelPendingSync();
+      this.emitChangeIfCommitted();
+      this.restoreBrowseStateIfUncommitted();
     },
     handleSearchInput() {
       const keyword = (this.searchKeyword || "").trim();
@@ -720,7 +1042,7 @@ export default {
       });
     },
     switchLevel(level) {
-      if (level > this.maxLevel || !this.isTabEnabled(level)) {
+      if (level > this.browseLevelCount || !this.isTabEnabled(level)) {
         return;
       }
       this.cancelPendingSync();
@@ -745,7 +1067,9 @@ export default {
         this.searchKeyword = "";
         this.searchList = [];
         this.searchDropdownVisible = false;
-        this.applySelection(item);
+        this.applySelection(item).then(() => {
+          this.popoverVisible = false;
+        });
       });
     },
     selectItem(item) {
@@ -756,37 +1080,66 @@ export default {
       const level = this.activeLevel;
       this.selectedPath = this.selectedPath.slice(0, level - 1);
       this.selectedPath.push(item);
-      if (level >= this.maxLevel) {
-        this.applySelection(item);
-        this.popoverVisible = false;
-        return;
-      }
-      this.activeLevel = level + 1;
-      this.loadLevelItems(this.getAreaId(item));
+      this.applySelection(item).then(() => {
+        if (level >= this.maxLevel) {
+          this.popoverVisible = false;
+          return;
+        }
+        this.fetchChildren(this.getAreaId(item)).then((children) => {
+          if (!children.length) {
+            this.popoverVisible = false;
+            return;
+          }
+          this.activeLevel = level + 1;
+          this.levelItems = children;
+        });
+      });
     },
-    applySelection(item) {
+    async applySelection(item) {
       const path = this.selectedPath.length ? this.selectedPath : [item];
-      const last = path[path.length - 1] || item;
-      const label = this.buildPathLabel(path);
-      let formattedValue = this.formatPathValue(path);
-      if (formattedValue == null) {
-        const leafId = this.getAreaId(last);
-        if (leafId != null) {
-          formattedValue =
-            this.valueFormat === "leaf" ? leafId : String(leafId);
+      let last = path[path.length - 1] || item;
+      const leafId = this.getAreaId(last);
+      if (leafId != null && !last.fullName) {
+        const detail = await this.fetchAreaById(leafId);
+        if (detail) {
+          last = detail;
+          if (path.length) {
+            this.$set(this.selectedPath, this.selectedPath.length - 1, detail);
+          }
         }
       }
+      const label = last.fullName || this.buildPathLabel(path);
+      const formattedValue = this.formatBoundValue(path, last);
+      this.lastSelectionPayload = {
+        value: formattedValue,
+        row: last,
+        label,
+        path: path.map((node) => ({ ...node })),
+      };
       this.skipValueSync = true;
       this.$emit("input", formattedValue);
       this.$emit("update:labelValue", label);
-      this.$emit("change", { value: formattedValue, row: last, label });
       this.$nextTick(() => {
         this.skipValueSync = false;
       });
     },
     handleClear() {
-      this.resetBrowseState(true);
+      const oldVal = this.value;
+      const wasOpen = this.popoverVisible;
+      this.lastSelectionPayload = { value: null, row: null, label: null };
+      this.skipValueSync = true;
+      this.$emit("input", null);
+      this.$emit("update:labelValue", null);
+      this.resetBrowseState(false);
       this.popoverVisible = false;
+      this.$nextTick(() => {
+        this.skipValueSync = false;
+        if (!wasOpen && !this.isSameBoundValue(oldVal, null)) {
+          this.$emit("change", this.lastSelectionPayload);
+          this.committedBoundValue = null;
+          this.lastSelectionPayload = null;
+        }
+      });
     },
     resetBrowseState(emitEvent) {
       this.searchKeyword = "";
@@ -794,10 +1147,10 @@ export default {
       this.selectedPath = [];
       this.activeLevel = 1;
       this.levelItems = [];
+      this.committedBrowseSnapshot = null;
       if (emitEvent) {
         this.$emit("input", null);
         this.$emit("update:labelValue", null);
-        this.$emit("change", { value: null, row: null });
       }
     },
   },
@@ -1016,7 +1369,42 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 4px;
+  margin-top: 8px;
+
+  .base-area-nav-btn {
+    min-width: 32px;
+    padding: 7px 10px;
+    border-radius: 8px;
+    color: #fff;
+    border-color: $baseColor;
+    background-color: $baseColor;
+
+    i {
+      font-weight: bold;
+    }
+
+    &.el-button:focus,
+    &.el-button:active {
+      color: #fff;
+      border-color: $baseColor;
+      background-color: $baseColor;
+    }
+
+    &.el-button:hover:not(.is-disabled) {
+      color: #fff;
+      border-color: $baseColor;
+      background-color: $baseColor;
+      opacity: 0.92;
+    }
+
+    &.is-disabled,
+    &.el-button.is-disabled {
+      color: #c0c4cc;
+      border-color: #eee;
+      background-color: #f5f7fa;
+      opacity: 1;
+    }
+  }
 
   .base-area-level-label {
     flex: 1;
@@ -1090,6 +1478,26 @@ export default {
     box-sizing: border-box;
   }
 
+  .base-area-nav-btn.el-button {
+    border-radius: 8px;
+    color: #fff;
+    border-color: $baseColor;
+    background-color: $baseColor;
+  }
+
+  .base-area-nav-btn.el-button:focus,
+  .base-area-nav-btn.el-button:active {
+    color: #fff;
+    border-color: $baseColor;
+    background-color: $baseColor;
+  }
+
+  .base-area-nav-btn.el-button.is-disabled {
+    color: #c0c4cc;
+    border-color: #eee;
+    background-color: #f5f7fa;
+  }
+
   .base-area-tab.disabled {
     color: #c0c4cc;
     cursor: not-allowed;

package/src/components/xform/form-designer/form-widget/field-widget/area-select-widget.vue

@@ -22,6 +22,7 @@
     />
     <baseArea
       v-else
+      ref="baseAreaRef"
       v-show="!isReadMode"
       class="full-width-input"
       :style="widgetStyle"
@@ -33,11 +34,11 @@
       :disabled="field.options.disabled"
       :readonly="field.options.readonly"
       :clearable="field.options.clearable"
-      value-format="path"
       :placeholder="getI18nLabel(field.options.placeholder || '请选择地区')"
       :size="field.options.size || 'small'"
       @input="handleAreaInput"
       @change="handleAreaChange"
+      @popover-open="handleAreaPopoverOpen"
     />
     <template v-if="isReadMode">
       <span class="readonly-mode-field">{{ readModeText }}</span>
@@ -102,9 +103,12 @@ export default {
       return this.field.options.areaName || null;
     },
     maxLevel() {
-      const areaDataType = this.field.options.areaDataType * 1 || 3;
-      if (areaDataType === 1) return 2;
-      if (areaDataType === 2) return 3;
+      const areaDataType = this.field.options.areaDataType;
+      const type =
+        areaDataType == null || areaDataType === "" ? 3 : areaDataType * 1;
+      if (type >= 0 && type <= 3) {
+        return type + 1;
+      }
       return 4;
     },
     readModeText() {
@@ -177,27 +181,45 @@ export default {
       }
       this.commitAreaValue(val);
     },
+    handleAreaPopoverOpen() {
+      if (this.designState) {
+        return;
+      }
+      this.oldFieldValue = deepClone(this.fieldModel);
+    },
     handleAreaChange(payload) {
       if (this.designState) {
         return;
       }
-      const row =
-        payload && Object.prototype.hasOwnProperty.call(payload, "row")
-          ? payload.row
-          : payload;
       const value =
         payload && Object.prototype.hasOwnProperty.call(payload, "value")
           ? payload.value
           : this.fieldModel;
-      const label =
-        payload && payload.label != null
-          ? payload.label
-          : row
-            ? row.fullName || row.name || null
-            : null;
-      this.commitAreaValue(value, label);
       this.handleChangeEvent(value);
     },
+    createEmptyAreaPathResult(value) {
+      return {
+        value: value != null && value !== "" ? value : null,
+        label: null,
+        path: [],
+        province: null,
+        city: null,
+        district: null,
+        town: null,
+      };
+    },
+    async getAreaPath(value) {
+      if (this.designState) {
+        return this.createEmptyAreaPathResult(value);
+      }
+      const areaRef = this.$refs.baseAreaRef;
+      if (areaRef && areaRef.getAreaPath) {
+        const targetValue =
+          value !== undefined && value !== null ? value : this.getValue();
+        return areaRef.getAreaPath(targetValue);
+      }
+      return this.createEmptyAreaPathResult(value);
+    },
     getValue() {
       const fieldKey = this.fieldKeyName;
       if (this.fieldModel != null && this.fieldModel !== "") {

package/src/components/xform/form-designer/setting-panel/property-editor/field-area-select/areaDataType-editor.vue

@@ -1,6 +1,7 @@
 <template>
   <el-form-item :label="i18nt('designer.setting.areaDataType')">
     <el-select v-model="optionModel.areaDataType" style="width: 100%">
+      <el-option :label="i18nt('designer.setting.areaDataType0')" :value="0" />
       <el-option :label="i18nt('designer.setting.areaDataType1')" :value="1" />
       <el-option :label="i18nt('designer.setting.areaDataType2')" :value="2" />
       <el-option :label="i18nt('designer.setting.areaDataType3')" :value="3" />

package/src/components/xform/lang/en-US.js

@@ -192,6 +192,7 @@ export default {
           htmlContent: "HTML",
           clearable: "Clearable",
           areaDataType: "Area Level",
+          areaDataType0: "Province",
           areaDataType1: "Province/City",
           areaDataType2: "Province/City/District",
           areaDataType3: "Province/City/District/Town",

package/src/components/xform/lang/zh-CN.js

@@ -355,6 +355,7 @@ export default {
       htmlContent: "HTML",
       clearable: "可清除",
       areaDataType: "地区层级",
+      areaDataType0: "省",
       areaDataType1: "省/市",
       areaDataType2: "省/市/区",
       areaDataType3: "省/市/区/乡镇",