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

package/package.json

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

package/src/components/baseArea/index.vue

@@ -33,7 +33,7 @@
                 v-for="item in searchList"
                 :key="'search-' + item.id"
                 class="base-area-result-item"
-                :class="{ on: value === item.id }"
+                :class="{ on: isSearchItemActive(item) }"
                 @mousedown.prevent
                 @click="selectSearchItem(item)"
               >
@@ -48,46 +48,57 @@
             </div>
           </transition>
         </div>
-        <div class="base-area-tabs">
-          <span
-            v-for="(tab, index) in tabs"
-            :key="index"
-            class="base-area-tab"
-            :class="{
-              active: activeLevel === index + 1,
-              selected: !!tab.selected,
-              disabled: !isTabEnabled(index + 1),
-            }"
-            @click="switchLevel(index + 1)"
-          >{{ getTabLabel(tab, index) }}</span>
-        </div>
-        <div class="base-area-grid" v-loading="browseLoading">
-          <div
-            v-for="item in pageItems"
-            :key="item.id"
-            class="base-area-item"
-            :class="{ on: isSelected(item) }"
-            @click="selectItem(item)"
-          >
-            <span>{{ item.name }}</span>
+        <div class="base-area-path">
+          <div class="base-area-tabs">
+            <template v-for="(tab, index) in tabs">
+              <span
+                v-if="index > 0"
+                :key="'sep-' + index"
+                class="base-area-path-sep"
+              >/</span>
+              <span
+                :key="'tab-' + index"
+                class="base-area-tab"
+                :class="{
+                  active: activeLevel === index + 1,
+                  selected: !!tab.selected,
+                  disabled: !isTabEnabled(index + 1),
+                }"
+                @click="switchLevel(index + 1)"
+              >{{ getTabLabel(tab) }}</span>
+            </template>
           </div>
-          <div v-if="!browseLoading && !pageItems.length" class="base-area-empty">
-            {{ emptyText }}
+        </div>
+        <div class="base-area-grid-wrap">
+          <div class="base-area-grid" v-loading="browseLoading">
+            <div
+              v-for="item in levelItems"
+              :key="item.id"
+              class="base-area-item"
+              :class="{ on: isSelected(item) }"
+              @click="selectItem(item)"
+            >
+              <span>{{ item.name }}</span>
+            </div>
+            <div v-if="!browseLoading && !levelItems.length" class="base-area-empty">
+              {{ emptyText }}
+            </div>
           </div>
         </div>
-        <div class="base-area-pagination">
+        <div class="base-area-level-nav">
           <el-button
             size="mini"
-            :disabled="currentPage <= 1"
-            @click="prevPage"
+            :disabled="!canPrevLevel"
+            @click="prevLevel"
           >
             <i class="el-icon-arrow-left"></i>
           </el-button>
+          <span class="base-area-level-label">{{ currentLevelLabel }}</span>
           <el-button
             size="mini"
             type="primary"
-            :disabled="!hasNextPage"
-            @click="nextPage"
+            :disabled="!canNextLevel"
+            @click="nextLevel"
           >
             <i class="el-icon-arrow-right"></i>
           </el-button>
@@ -121,7 +132,6 @@
 
 <script>
 const LEVEL_LABELS = ["省份", "城市", "区县", "乡镇"];
-const PAGE_SIZE = 28;
 const SEARCH_DEBOUNCE = 300;
 
 export default {
@@ -175,6 +185,11 @@ export default {
       type: Number,
       default: 630,
     },
+    /** path: 逗号分隔各级 id，如 1,2,3,4；leaf: 仅末级 id */
+    valueFormat: {
+      type: String,
+      default: "path",
+    },
   },
   data() {
     return {
@@ -188,8 +203,9 @@ export default {
       searchLoading: false,
       searchDropdownVisible: false,
       referenceFocused: false,
-      currentPage: 1,
       searchTimer: null,
+      syncToken: 0,
+      skipValueSync: false,
     };
   },
   computed: {
@@ -200,14 +216,16 @@ export default {
       return this.searchDropdownVisible && this.hasSearchKeyword;
     },
     displayText() {
+      const pathLabel = this.selectedPath.length
+        ? this.buildPathLabel(this.selectedPath)
+        : "";
+      if (this.popoverVisible && pathLabel) {
+        return pathLabel;
+      }
       if (this.labelValue) {
         return this.labelValue;
       }
-      if (this.selectedPath.length) {
-        const last = this.selectedPath[this.selectedPath.length - 1];
-        return last.fullName || last.name || "";
-      }
-      return "";
+      return pathLabel || "";
     },
     tabs() {
       const tabs = [];
@@ -220,13 +238,6 @@ export default {
       }
       return tabs;
     },
-    pageItems() {
-      const start = (this.currentPage - 1) * PAGE_SIZE;
-      return this.levelItems.slice(start, start + PAGE_SIZE);
-    },
-    hasNextPage() {
-      return this.currentPage * PAGE_SIZE < this.levelItems.length;
-    },
     showClearIcon() {
       return (
         this.clearable &&
@@ -235,11 +246,33 @@ export default {
         !!this.displayText
       );
     },
+    canPrevLevel() {
+      return this.activeLevel > 1;
+    },
+    canNextLevel() {
+      return (
+        this.activeLevel < this.maxLevel &&
+        this.isTabEnabled(this.activeLevel + 1)
+      );
+    },
+    currentLevelLabel() {
+      return LEVEL_LABELS[this.activeLevel - 1] || `第${this.activeLevel}级`;
+    },
   },
   watch: {
-    value(val) {
-      if (!val) {
+    value: {
+      immediate: true,
+      handler() {
+        this.syncFromValue();
+      },
+    },
+    labelValue(val) {
+      if (!val && !this.value) {
         this.resetBrowseState(false);
+        return;
+      }
+      if (this.value && !this.isValueSynced(this.parseValueIds(this.value))) {
+        this.syncFromValue();
       }
     },
   },
@@ -247,18 +280,103 @@ export default {
     clearTimeout(this.searchTimer);
   },
   methods: {
-    getTabLabel(tab, index) {
+    isSearchItemActive(item) {
+      if (!item || this.value == null || this.value === "") {
+        return false;
+      }
+      const ids = this.parseValueIds(this.value);
+      if (!ids.length) {
+        return false;
+      }
+      return ids[ids.length - 1] == this.getAreaId(item);
+    },
+    parseValueIds(val) {
+      if (val == null || val === "") {
+        return [];
+      }
+      const str = String(val).trim();
+      if (this.valueFormat === "path" && str.includes(",")) {
+        return str.split(",").map((part) => part.trim()).filter((part) => part !== "");
+      }
+      return [str];
+    },
+    isPathValue(val) {
+      return (
+        this.valueFormat === "path" &&
+        val != null &&
+        String(val).includes(",")
+      );
+    },
+    formatPathValue(path) {
+      if (!path || !path.length) {
+        return null;
+      }
+      const ids = path
+        .map((item) => this.getAreaId(item))
+        .filter((id) => id != null && id !== "");
+      if (!ids.length) {
+        return null;
+      }
+      if (this.valueFormat === "leaf") {
+        return ids[ids.length - 1];
+      }
+      return ids.join(",");
+    },
+    getAreaId(item) {
+      if (!item) {
+        return null;
+      }
+      if (item.id != null && item.id !== "") {
+        return item.id;
+      }
+      if (item.value != null && item.value !== "") {
+        return item.value;
+      }
+      if (item.areaId != null && item.areaId !== "") {
+        return item.areaId;
+      }
+      return null;
+    },
+    isValueSynced(ids) {
+      if (!ids.length || this.selectedPath.length !== ids.length) {
+        return false;
+      }
+      return ids.every((id, index) => this.getAreaId(this.selectedPath[index]) == id);
+    },
+    buildPathLabel(path) {
+      if (!path || !path.length) {
+        return "";
+      }
+      const last = path[path.length - 1];
+      if (last && last.fullName) {
+        return last.fullName;
+      }
+      return path
+        .map((item) => item.name || "")
+        .filter((name) => !!name)
+        .join("");
+    },
+    emitResolvedLabelIfNeeded() {
+      if (this.popoverVisible || this.labelValue) {
+        return;
+      }
+      const label = this.buildPathLabel(this.selectedPath);
+      if (label) {
+        this.$emit("update:labelValue", label);
+      }
+    },
+    cancelPendingSync() {
+      this.syncToken += 1;
+    },
+    getTabLabel(tab) {
       if (tab.selected) {
-        if (index === this.selectedPath.length - 1 && tab.selected.fullName) {
-          return tab.selected.fullName;
-        }
-        return tab.selected.name;
+        return tab.selected.name || tab.label;
       }
       return tab.label;
     },
     isSelected(item) {
       const current = this.selectedPath[this.activeLevel - 1];
-      return current && current.id === item.id;
+      return current && this.getAreaId(current) === this.getAreaId(item);
     },
     isTabEnabled(level) {
       return level === 1 || this.selectedPath.length >= level - 1;
@@ -267,10 +385,298 @@ export default {
       this.$nextTick(() => {
         this.$refs.searchInputRef && this.$refs.searchInputRef.focus();
       });
+      this.initBrowseStateFromValue();
+    },
+    syncFromValue() {
+      if (this.skipValueSync) {
+        return;
+      }
+      const val = this.value;
+      if (!val) {
+        this.resetBrowseState(false);
+        return;
+      }
+      const ids = this.parseValueIds(val);
+      if (this.isValueSynced(ids)) {
+        return;
+      }
+      if (this.isPathValue(val)) {
+        this.syncBrowseStateFromPathIds(ids);
+        return;
+      }
+      this.syncBrowseStateFromArea({
+        id: ids[0],
+        fullName: this.labelValue || undefined,
+      });
+    },
+    initBrowseStateFromValue() {
+      if (!this.value) {
+        if (!this.levelItems.length) {
+          this.loadLevelItems(this.getParentId());
+        }
+        return;
+      }
+      const ids = this.parseValueIds(this.value);
+      if (!this.isValueSynced(ids)) {
+        this.syncFromValue();
+        return;
+      }
       if (!this.levelItems.length) {
         this.loadLevelItems(this.getParentId());
       }
     },
+    getAreaRequestData(extra = {}) {
+      return {
+        enabled: true,
+        locale: this.locale || null,
+        ...extra,
+      };
+    },
+    normalizeAreaRows(res) {
+      const objx = res && res.objx;
+      if (Array.isArray(objx)) {
+        return objx;
+      }
+      if (objx && Array.isArray(objx.records)) {
+        return objx.records;
+      }
+      return [];
+    },
+    requestAreaList(extra = {}) {
+      return new Promise((resolve) => {
+        this.$http({
+          url: USER_PREFIX + "/area/list",
+          method: "post",
+          data: this.getAreaRequestData(extra),
+          success: (res) => resolve(this.normalizeAreaRows(res)),
+          error: () => resolve([]),
+        });
+      });
+    },
+    fetchChildren(parentId) {
+      return new Promise((resolve) => {
+        this.$http({
+          url: USER_PREFIX + "/area/getChildren",
+          method: "post",
+          data: this.getAreaRequestData({ id: parentId }),
+          success: (res) => resolve(this.normalizeAreaRows(res)),
+          error: () => resolve([]),
+        });
+      });
+    },
+    getParentIdFromRow(row) {
+      if (!row) return null;
+      if (row.parentId != null && row.parentId !== "") {
+        return row.parentId;
+      }
+      const parent = row.parent;
+      if (parent == null || parent === undefined || parent === "") {
+        return null;
+      }
+      if (typeof parent === "object") {
+        return parent.id != null ? parent.id : null;
+      }
+      return parent;
+    },
+    fetchAreaById(id) {
+      if (id == null || id === "") {
+        return Promise.resolve(null);
+      }
+      return this.requestAreaList({ id }).then(
+        (rows) => rows.find((row) => this.getAreaId(row) == id) || null
+      );
+    },
+    isAreaObject(node) {
+      return node && typeof node === "object" && node.id != null;
+    },
+    buildAreaPath(item) {
+      if (item.pathList && Array.isArray(item.pathList) && item.pathList.length > 1) {
+        if (this.isAreaObject(item.pathList[0])) {
+          return item.pathList.slice(0, this.maxLevel);
+        }
+      }
+      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 null;
+    },
+    matchAreaByPrefix(fullName, prefix, children) {
+      const sorted = [...children].sort(
+        (a, b) => (b.name || "").length - (a.name || "").length
+      );
+      for (let i = 0; i < sorted.length; i++) {
+        const child = sorted[i];
+        const name = child.name || "";
+        if (!name) {
+          continue;
+        }
+        if (fullName.startsWith(prefix + name)) {
+          return child;
+        }
+      }
+      return null;
+    },
+    async resolvePathByFullName(item) {
+      const fullName = (item.fullName || "").trim();
+      if (!fullName) {
+        return null;
+      }
+      const path = [];
+      let parentId = 0;
+      let prefix = "";
+      for (let level = 0; level < this.maxLevel; level++) {
+        const children = await this.fetchChildren(parentId);
+        if (!children.length) {
+          break;
+        }
+        const matched = this.matchAreaByPrefix(fullName, prefix, children);
+        if (!matched) {
+          break;
+        }
+        path.push(matched);
+        prefix += matched.name || "";
+        if (matched.id == item.id) {
+          return path;
+        }
+        parentId = matched.id;
+      }
+      if (path.length && path[path.length - 1].id != item.id) {
+        const siblings = await this.fetchChildren(path[path.length - 1].id);
+        const leaf = siblings.find((row) => row.id == item.id);
+        if (leaf) {
+          path.push(leaf);
+        } else if (item.name && fullName.endsWith(item.name)) {
+          path.push(item);
+        }
+      }
+      return path.length ? path.slice(0, this.maxLevel) : null;
+    },
+    async resolvePathByParentChain(item) {
+      const chain = [];
+      let current = item;
+      let safety = 0;
+      while (current && safety < this.maxLevel + 5) {
+        safety += 1;
+        chain.unshift(current);
+        const parentId = this.getParentIdFromRow(current);
+        if (!parentId) {
+          break;
+        }
+        const parent = await this.fetchAreaById(parentId);
+        if (!parent || parent.id != parentId) {
+          break;
+        }
+        current = parent;
+      }
+      return chain.length ? chain.slice(0, this.maxLevel) : null;
+    },
+    async resolveAreaPath(item) {
+      const presetPath = this.buildAreaPath(item);
+      if (presetPath && presetPath.length) {
+        return presetPath;
+      }
+      const fullNamePath = await this.resolvePathByFullName(item);
+      if (fullNamePath && fullNamePath.length) {
+        return fullNamePath;
+      }
+      const parentPath = await this.resolvePathByParentChain(item);
+      if (parentPath && parentPath.length) {
+        return parentPath;
+      }
+      return [item];
+    },
+    async syncBrowseStateFromArea(item) {
+      const token = ++this.syncToken;
+      let seed = item || {};
+      if (
+        seed.id != null &&
+        !seed.fullName &&
+        !seed.name &&
+        !this.getParentIdFromRow(seed)
+      ) {
+        const detail = await this.fetchAreaById(seed.id);
+        if (detail) {
+          seed = detail;
+        }
+      } else if (seed.id != null && !seed.fullName && this.labelValue) {
+        seed = { ...seed, fullName: this.labelValue };
+      }
+      let path = await this.resolveAreaPath(seed);
+      if (token !== this.syncToken) {
+        return;
+      }
+      if (!path.length) {
+        path = [seed];
+      }
+      const last = path[path.length - 1];
+      if (last && last.id != seed.id && seed.id != null) {
+        const siblings = await this.fetchChildren(
+          path.length > 1 ? path[path.length - 2].id : 0
+        );
+        const exact = siblings.find((row) => row.id == seed.id);
+        if (exact) {
+          path = path.slice(0, -1).concat(exact);
+        } else {
+          path = path.concat(seed);
+        }
+      }
+      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.loadLevelItems(this.getParentId());
+      this.emitResolvedLabelIfNeeded();
+    },
+    async resolvePathByIds(ids) {
+      const path = [];
+      let parentId = 0;
+      for (let i = 0; i < ids.length && i < this.maxLevel; i++) {
+        const targetId = ids[i];
+        const children = await this.fetchChildren(parentId);
+        let matched = children.find((row) => this.getAreaId(row) == targetId);
+        if (matched) {
+          path.push(matched);
+          parentId = matched.id;
+          continue;
+        }
+        const fetched = await this.fetchAreaById(targetId);
+        if (fetched) {
+          path.push(fetched);
+          parentId = fetched.id;
+        } else {
+          path.push({ id: targetId });
+          break;
+        }
+      }
+      return path;
+    },
+    async syncBrowseStateFromPathIds(ids) {
+      const token = ++this.syncToken;
+      const path = await this.resolvePathByIds(ids);
+      if (token !== this.syncToken) {
+        return;
+      }
+      if (!path.length) {
+        if (!this.levelItems.length) {
+          this.loadLevelItems(0);
+        }
+        return;
+      }
+      this.selectedPath = path.slice(0, this.maxLevel);
+      const pathLen = this.selectedPath.length;
+      this.activeLevel = pathLen >= this.maxLevel ? this.maxLevel : pathLen;
+      this.loadLevelItems(this.getParentId());
+      this.emitResolvedLabelIfNeeded();
+    },
     handlePopoverHide() {
       this.searchKeyword = "";
       this.searchList = [];
@@ -294,24 +700,9 @@ export default {
     },
     doSearch(keyword) {
       this.searchLoading = true;
-      this.$http({
-        url: USER_PREFIX + "/area/listPage",
-        method: "post",
-        data: {
-          name: keyword,
-          enabled: true,
-          locale: this.locale || null,
-          pageNum: 1,
-          pageSize: 200,
-        },
-        success: (res) => {
-          this.searchList = res.objx?.records || res.objx || [];
-          this.searchLoading = false;
-        },
-        error: () => {
-          this.searchList = [];
-          this.searchLoading = false;
-        },
+      this.requestAreaList({ name: keyword }).then((rows) => {
+        this.searchList = rows;
+        this.searchLoading = false;
       });
     },
     getParentId() {
@@ -319,47 +710,49 @@ export default {
         return 0;
       }
       const parent = this.selectedPath[this.activeLevel - 2];
-      return parent ? parent.id : 0;
+      return parent ? this.getAreaId(parent) : 0;
     },
     loadLevelItems(parentId) {
       this.browseLoading = true;
-      this.$http({
-        url: USER_PREFIX + "/area/getChildren",
-        method: "post",
-        data: {
-          id: parentId,
-          locale: this.locale || null,
-          enabled: true,
-        },
-        success: (res) => {
-          this.levelItems = res.objx || [];
-          this.browseLoading = false;
-        },
-        error: () => {
-          this.levelItems = [];
-          this.browseLoading = false;
-        },
+      this.fetchChildren(parentId).then((rows) => {
+        this.levelItems = rows;
+        this.browseLoading = false;
       });
     },
     switchLevel(level) {
       if (level > this.maxLevel || !this.isTabEnabled(level)) {
         return;
       }
+      this.cancelPendingSync();
       this.activeLevel = level;
-      this.currentPage = 1;
-      if (level <= this.selectedPath.length) {
-        this.selectedPath = this.selectedPath.slice(0, level - 1);
-      }
       this.loadLevelItems(this.getParentId());
     },
+    prevLevel() {
+      if (!this.canPrevLevel) {
+        return;
+      }
+      this.switchLevel(this.activeLevel - 1);
+    },
+    nextLevel() {
+      if (!this.canNextLevel) {
+        return;
+      }
+      this.switchLevel(this.activeLevel + 1);
+    },
     selectSearchItem(item) {
-      this.applySelection(item);
-      this.popoverVisible = false;
+      this.cancelPendingSync();
+      this.syncBrowseStateFromArea(item).then(() => {
+        this.searchKeyword = "";
+        this.searchList = [];
+        this.searchDropdownVisible = false;
+        this.applySelection(item);
+      });
     },
     selectItem(item) {
       if (!this.isTabEnabled(this.activeLevel)) {
         return;
       }
+      this.cancelPendingSync();
       const level = this.activeLevel;
       this.selectedPath = this.selectedPath.slice(0, level - 1);
       this.selectedPath.push(item);
@@ -369,14 +762,27 @@ export default {
         return;
       }
       this.activeLevel = level + 1;
-      this.currentPage = 1;
-      this.loadLevelItems(item.id);
+      this.loadLevelItems(this.getAreaId(item));
     },
     applySelection(item) {
-      const label = item.fullName || item.name || "";
-      this.$emit("input", item.id);
+      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);
+        }
+      }
+      this.skipValueSync = true;
+      this.$emit("input", formattedValue);
       this.$emit("update:labelValue", label);
-      this.$emit("change", item);
+      this.$emit("change", { value: formattedValue, row: last, label });
+      this.$nextTick(() => {
+        this.skipValueSync = false;
+      });
     },
     handleClear() {
       this.resetBrowseState(true);
@@ -387,22 +793,11 @@ export default {
       this.searchList = [];
       this.selectedPath = [];
       this.activeLevel = 1;
-      this.currentPage = 1;
       this.levelItems = [];
       if (emitEvent) {
         this.$emit("input", null);
         this.$emit("update:labelValue", null);
-        this.$emit("change", null);
-      }
-    },
-    prevPage() {
-      if (this.currentPage > 1) {
-        this.currentPage -= 1;
-      }
-    },
-    nextPage() {
-      if (this.hasNextPage) {
-        this.currentPage += 1;
+        this.$emit("change", { value: null, row: null });
       }
     },
   },
@@ -500,55 +895,86 @@ export default {
   }
 }
 
+.base-area-path {
+  padding: 6px 10px;
+  margin-bottom: 10px;
+  background: #f5f7fa;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
 .base-area-tabs {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   width: 100%;
-  margin-bottom: 8px;
-  gap: 6px;
+  gap: 0;
+}
+
+.base-area-path-sep {
+  flex-shrink: 0;
+  padding: 0 2px;
+  font-size: 12px;
+  color: #c0c4cc;
+  line-height: 24px;
+  user-select: none;
 }
 
 .base-area-tab {
-  flex: 1;
+  flex-shrink: 1;
   min-width: 0;
-  display: inline-block;
   max-width: 100%;
-  padding: 0 10px;
-  height: 28px;
-  line-height: 28px;
-  border: 1px solid #eee;
-  border-radius: 4px;
+  padding: 0 4px;
+  height: 24px;
+  line-height: 24px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
   font-size: 12px;
-  color: #606266;
+  color: #909399;
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  transition: color 0.15s, border-color 0.15s;
 
   &.active {
-    background: $baseColor;
-    border-color: $baseColor;
-    color: #fff;
+    color: $baseColor;
+    border-bottom-color: $baseColor;
+    font-weight: 500;
+    background: transparent;
   }
 
   &.selected:not(.active) {
-    color: $baseColor;
-    border-color: rgba($baseColor, 0.35);
+    color: #303133;
   }
 
   &.disabled {
     color: #c0c4cc;
     cursor: not-allowed;
-    background: #f5f7fa;
-    border-color: #eee;
+    background: transparent;
     pointer-events: none;
   }
+
+  &:hover:not(.disabled):not(.active) {
+    color: $baseColor;
+  }
+}
+
+.base-area-grid-wrap {
+  padding: 8px;
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 8px;
 }
 
 .base-area-grid {
   display: flex;
   flex-wrap: wrap;
   min-height: 120px;
+  max-height: 294px;
+  overflow-y: auto;
   margin: 0 -4px;
 }
 
@@ -586,10 +1012,20 @@ export default {
   font-size: 12px;
 }
 
-.base-area-pagination {
+.base-area-level-nav {
   display: flex;
+  align-items: center;
   justify-content: space-between;
   margin-top: 4px;
+
+  .base-area-level-label {
+    flex: 1;
+    text-align: center;
+    font-size: 12px;
+    color: #606266;
+    line-height: 28px;
+    user-select: none;
+  }
 }
 </style>
 
@@ -657,8 +1093,7 @@ export default {
   .base-area-tab.disabled {
     color: #c0c4cc;
     cursor: not-allowed;
-    background: #f5f7fa;
-    border-color: #eee;
+    background: transparent;
     pointer-events: none;
   }
 }

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

@@ -11,19 +11,32 @@
     :sub-form-col-index="subFormColIndex"
     :sub-form-row-id="subFormRowId"
   >
+    <el-input
+      v-if="designState"
+      class="full-width-input design-area-preview"
+      :style="widgetStyle"
+      readonly
+      disabled
+      :size="field.options.size || 'small'"
+      :placeholder="getI18nLabel(field.options.placeholder || '请选择地区')"
+    />
     <baseArea
+      v-else
       v-show="!isReadMode"
       class="full-width-input"
       :style="widgetStyle"
-      v-model="fieldModel"
-      :label-value.sync="areaLabel"
+      :value="fieldModel"
+      :label-value="areaNameLabel"
+      @update:labelValue="handleAreaLabelUpdate"
       :max-level="maxLevel"
       :locale="field.options.locale"
       :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"
     />
     <template v-if="isReadMode">
@@ -38,6 +51,7 @@ import emitter from "../../../../../components/xform/utils/emitter";
 import i18n from "../../../../../components/xform/utils/i18n";
 import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
 import baseArea from "@base/components/baseArea/index.vue";
+import { deepClone } from "../../../../../components/xform/utils/util";
 
 export default {
   name: "area-select-widget",
@@ -94,7 +108,7 @@ export default {
       return 4;
     },
     readModeText() {
-      return this.areaLabel || this.currentAreaNameValue || "--";
+      return this.areaNameLabel || "--";
     },
     widgetStyle() {
       const widgetWidth = this.field.options.widgetWidth;
@@ -109,13 +123,12 @@ export default {
       }
       return this.currentData[this.areaNameField] ?? null;
     },
-  },
-  watch: {
-    currentAreaNameValue: {
-      immediate: true,
-      handler(val) {
-        this.areaLabel = val;
-      },
+    areaNameLabel() {
+      const formLabel = this.currentAreaNameValue;
+      if (formLabel != null && formLabel !== "") {
+        return formLabel;
+      }
+      return this.areaLabel;
     },
   },
   created() {
@@ -132,19 +145,86 @@ export default {
     this.unregisterFromRefList();
   },
   methods: {
+    handleAreaLabelUpdate(label) {
+      if (this.designState) {
+        return;
+      }
+      this.areaLabel = label;
+      this.syncAreaName(label);
+    },
     syncAreaName(label) {
       if (this.areaNameField) {
         this.$set(this.currentData, this.areaNameField, label);
       }
     },
-    handleAreaChange(row) {
-      const label = row ? row.fullName || row.name || null : null;
-      this.areaLabel = label;
-      this.syncAreaName(label);
-      this.handleChangeEvent(this.fieldModel);
+    syncAreaLabelFromForm() {
+      if (this.areaNameField) {
+        this.areaLabel = this.currentData[this.areaNameField] ?? null;
+      }
+    },
+    commitAreaValue(value, label) {
+      this.fieldModel = value;
+      this.$set(this.currentData, this.fieldKeyName, value);
+      this.syncUpdateFormModel(value);
+      if (label !== undefined) {
+        this.areaLabel = label;
+        this.syncAreaName(label);
+      }
+    },
+    handleAreaInput(val) {
+      if (this.designState) {
+        return;
+      }
+      this.commitAreaValue(val);
+    },
+    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);
+    },
+    getValue() {
+      const fieldKey = this.fieldKeyName;
+      if (this.fieldModel != null && this.fieldModel !== "") {
+        return this.fieldModel;
+      }
+      const formVal = this.currentData[fieldKey];
+      if (formVal != null && formVal !== "") {
+        return formVal;
+      }
+      return this.fieldModel;
+    },
+    setValue(val) {
+      if (!this.field.formItemFlag) {
+        return;
+      }
+      const oldVal = deepClone(this.fieldModel);
+      const value = val ?? null;
+      this.commitAreaValue(value);
+      this.syncAreaLabelFromForm();
+      this.emitFieldDataChange(value, oldVal);
+    },
+    fieldModelLabel() {
+      return this.areaNameLabel || this.getValue() || "";
     },
   },
 };
+
 </script>
 
 <style lang="scss" scoped>

package/src/components/xform/form-render/indexMixin.js

@@ -264,6 +264,10 @@ modules = {
         ? this.formConfig.customClass
         : "";
     },
+
+    formModel() {
+      return this.formDataModel;
+    },
   },
   watch: {
     //

package/src/views/bd/setting/formVersion/tableDetailDiff.js

@@ -34,14 +34,6 @@ export function getDetailRowKey(row, index = 0) {
 }
 
 export function sortDetailRowsByZdEn(rows = []) {
-  /* return [...rows].sort((a, b) => {
-    const aVal = String(a?.zdEn ?? "");
-    const bVal = String(b?.zdEn ?? "");
-    return aVal.localeCompare(bVal, "zh-CN", {
-      numeric: true,
-      sensitivity: "base",
-    });
-  }); */
   return [...rows];
 }