bl-common-vue3 3.7.20 → 3.7.21

package/.history/src/components/VillageTree/index_20230227202552.vue

@@ -1,298 +1,298 @@
-<template>
-  <div class="hide-scroller-bar" style="height: 100%; overflow: hidden auto">
-    <a-tree
-      v-if="treeList.length"
-      show-icon
-      v-model:expandedKeys="expandedKeys"
-      :selectedKeys="selectedKeys"
-      :tree-data="treeList"
-      :blockNode="true"
-      :selectable="true"
-      :load-data="onLoadTreeData"
-      @select="onTreeSelect"
-    >
-      <!-- 图标 -->
-      <template #topCompanyIcon>
-        <bl-icon type="tree-jigou" class="tree-icon" />
-      </template>
-      <template #departmentIcon>
-        <GoldenFilled class="tree-icon" />
-      </template>
-      <template #villageIcon>
-        <bl-icon type="tree-xiangmu" class="tree-icon" />
-      </template>
-      <template #buildIcon>
-        <bl-icon type="tree-louyu" class="tree-icon" />
-      </template>
-      <template #layerIcon>
-        <bl-icon type="tree-louceng" class="tree-icon" />
-      </template>
-      <template #roomIcon>
-        <bl-icon type="tree-fangjian" class="tree-icon" />
-      </template>
-    </a-tree>
-  </div>
-</template>
-
-<script>
-import { defineComponent, reactive, toRefs } from "vue";
-import { BlIcon } from "bl-common-vue3";
-import { GoldenFilled } from "@ant-design/icons-vue";
-export default defineComponent({
-  name: "VillageTree",
-  props: {
-    userChecked: {
-      type: Number,
-      default: 1,
-    },
-    attachDpt: {
-      type: Number,
-      default: 1,
-    },
-  },
-  components: { GoldenFilled, "bl-icon": BlIcon },
-  setup(props, { emit }) {
-    const state = reactive({
-      treeList: [],
-      expandedKeys: [],
-      selectedKeys: [],
-      selected: {},
-    });
-
-    /** 点击选中当前项 */
-    const onTreeSelect = (value, e) => {
-      const current = e.node.dataRef;
-      if (current.childType == "department") {
-        // 部门不允许选中
-        return;
-      }
-      setSelected(current);
-    };
-
-    /** 设置选中 */
-    const setSelected = (current) => {
-      state.selectedKeys = [current.key];
-      state.selected = current;
-      emit("getCurrent", { current });
-    };
-
-    /** 动态加载树数据 */
-    const onLoadTreeData = (treeNode) => {
-      return new Promise((resolve) => {
-        const { dataRef } = treeNode;
-        if (dataRef.isLeaf || (dataRef.children && dataRef.children.length)) {
-          resolve();
-          return;
-        }
-        if (dataRef.childType === "build") {
-          getLayerList(dataRef).then(() => {
-            resolve();
-          });
-        } else if (dataRef.childType === "layer") {
-          getRoomList(dataRef).then(() => {
-            resolve();
-          });
-        }
-      });
-    };
-    // 获取楼层列表
-    const getLayerList = (build) => {
-      return new Promise((resolve) => {
-        if (build.isLeaf || (build.children && build.children.length)) {
-          resolve(build.children || []);
-          return;
-        }
-        emit("request", {
-          params: {
-            method: "get",
-            server: "/village",
-            url: "/project/layer/all",
-            extra: {
-              build_id: build.id,
-            },
-          },
-          success: (res) => {
-            if (res.list.length) {
-              build.children = res.list.map((item) => ({
-                ...item,
-                childType: "layer",
-                key: `${build.key}_layer_${item.id}`,
-                title: item.layer_name,
-                level: build.level + 1,
-                extra: {
-                  ...build.extra,
-                  build_id: build.id,
-                  build_number: build.build_number,
-                  build_name: build.build_name,
-                },
-                isLeaf: false,
-                slots: {
-                  icon: "layerIcon",
-                },
-              }));
-            }
-            resolve(build.children);
-          },
-        });
-      });
-    };
-    // 获取房间列表
-    const getRoomList = (layer) => {
-      return new Promise((resolve) => {
-        if (layer.isLeaf || (layer.children && layer.children.length)) {
-          resolve(layer.children || []);
-          return;
-        }
-        emit("request", {
-          params: {
-            method: "get",
-            server: "/village",
-            url: "/project/room/all",
-            extra: {
-              village_id: layer.extra.village_id,
-              layer_id: layer.id,
-            },
-          },
-          success: (res) => {
-            if (res.list.length) {
-              layer.children = res.list.map((item) => {
-                let newItem = {
-                  ...item,
-                  childType: "room",
-                  key: `${layer.key}_room_${item.id}`,
-                  title: item.room_name,
-                  level: layer.level + 1,
-                  layer_id: layer.id,
-                  layer_number: layer.layer_number,
-                  layer_name: layer.layer_name,
-                  property_area: item.charging_area,
-                  lease_square: item.rental_area,
-                  extra: {
-                    ...layer.extra,
-                    layer_id: layer.id,
-                    layer_number: layer.layer_number,
-                    layer_name: layer.layer_name,
-                  },
-                  isLeaf: true,
-                  slots: {
-                    icon: "roomIcon",
-                    title: "roomTitle",
-                  },
-                };
-                return newItem;
-              });
-            }
-            resolve(layer.children);
-          },
-        });
-      });
-    };
-
-    /** 获取树数据 */
-    // 获取部门树列表
-    const getDeptTreeList = (list, level) => {
-      let result = [];
-      for (let listItem of list) {
-        // 非项目管理部门
-        if (listItem.type !== 3) {
-          listItem.childType = "department"; //listItem.type == 0 ? "topCompany" : "department";
-          listItem.key = `${listItem.childType}-${listItem.id}`; // 部门用中划线，房源用下划线，方便整理选中房源key
-          listItem.title = listItem.name;
-          listItem.level = level;
-          listItem.slots = {
-            icon: `${listItem.childType}Icon`,
-          };
-          listItem.children = [];
-          if (listItem.subcat && listItem.subcat.length) {
-            listItem.children = getDeptTreeList(listItem.subcat, level + 1);
-          }
-          if (listItem.villageList && listItem.villageList.length) {
-            const villageList = getVillageTreeList(
-              listItem.villageList,
-              level,
-              listItem.key
-            );
-            listItem.children = [...listItem.children, ...villageList];
-          }
-          listItem.isLeaf = listItem.children.length === 0;
-          result.push(listItem);
-          state.expandedKeys.push(listItem.key);
-        }
-      }
-      return result;
-    };
-    // 获取项目树列表
-    const getVillageTreeList = (villageList, level = 1, parentKey) => {
-      return villageList.map((village) => {
-        village.childType = "village";
-        village.key = `${parentKey ? parentKey + "-" : ""}${
-          village.childType
-        }_${village.id}`;
-
-        village.title = village.name;
-        village.level = level;
-        village.slots = {
-          icon: `${village.childType}Icon`,
-        };
-        if (village.buildList && village.buildList.length) {
-          village.isLeaf = false;
-          village.children = village.buildList.map((build) => ({
-            ...build,
-            level,
-            childType: "build",
-            key: `${village.key}_build_${build.id}`,
-            title: build.build_name,
-            extra: {
-              village_id: village.id,
-              village_name: village.name,
-              village_short_name: village.short_name,
-            },
-            slots: {
-              icon: "buildIcon",
-            },
-            isLeaf: false,
-          }));
-        } else {
-          village.isLeaf = true;
-        }
-        state.expandedKeys.push(village.key);
-        if (!state.selectedKeys.length) {
-          setSelected(village);
-        }
-        return village;
-      });
-    };
-
-    const getVillageInfo = () => {
-      emit("request", {
-        params: {
-          method: "get",
-          server: "/org",
-          url: "/build/villageAndBuildList/v2",
-          extra: {
-            checked: props.attachDpt ? 1 : props.userChecked,
-            attach_department: props.attachDpt,
-          },
-        },
-        success: (res) => {
-          state.treeList = res.list
-            ? getDeptTreeList(res.list, 1)
-            : getVillageTreeList(res.villageList);
-        },
-      });
-    };
-
-    const init = () => {
-      getVillageInfo();
-    };
-
-    init();
-
-    return {
-      ...toRefs(state),
-      onLoadTreeData,
-      onTreeSelect,
-    };
-  },
-});
-</script>
+<template>
+  <div class="hide-scroller-bar" style="height: 100%; overflow: hidden auto">
+    <a-tree
+      v-if="treeList.length"
+      show-icon
+      v-model:expandedKeys="expandedKeys"
+      :selectedKeys="selectedKeys"
+      :tree-data="treeList"
+      :blockNode="true"
+      :selectable="true"
+      :load-data="onLoadTreeData"
+      @select="onTreeSelect"
+    >
+      <!-- 图标 -->
+      <template #topCompanyIcon>
+        <bl-icon type="tree-jigou" class="tree-icon" />
+      </template>
+      <template #departmentIcon>
+        <GoldenFilled class="tree-icon" />
+      </template>
+      <template #villageIcon>
+        <bl-icon type="tree-xiangmu" class="tree-icon" />
+      </template>
+      <template #buildIcon>
+        <bl-icon type="tree-louyu" class="tree-icon" />
+      </template>
+      <template #layerIcon>
+        <bl-icon type="tree-louceng" class="tree-icon" />
+      </template>
+      <template #roomIcon>
+        <bl-icon type="tree-fangjian" class="tree-icon" />
+      </template>
+    </a-tree>
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive, toRefs } from "vue";
+import { BlIcon } from "bl-common-vue3";
+import { GoldenFilled } from "@ant-design/icons-vue";
+export default defineComponent({
+  name: "VillageTree",
+  props: {
+    userChecked: {
+      type: Number,
+      default: 1,
+    },
+    attachDpt: {
+      type: Number,
+      default: 1,
+    },
+  },
+  components: { GoldenFilled, "bl-icon": BlIcon },
+  setup(props, { emit }) {
+    const state = reactive({
+      treeList: [],
+      expandedKeys: [],
+      selectedKeys: [],
+      selected: {},
+    });
+
+    /** 点击选中当前项 */
+    const onTreeSelect = (value, e) => {
+      const current = e.node.dataRef;
+      if (current.childType == "department") {
+        // 部门不允许选中
+        return;
+      }
+      setSelected(current);
+    };
+
+    /** 设置选中 */
+    const setSelected = (current) => {
+      state.selectedKeys = [current.key];
+      state.selected = current;
+      emit("getCurrent", { current });
+    };
+
+    /** 动态加载树数据 */
+    const onLoadTreeData = (treeNode) => {
+      return new Promise((resolve) => {
+        const { dataRef } = treeNode;
+        if (dataRef.isLeaf || (dataRef.children && dataRef.children.length)) {
+          resolve();
+          return;
+        }
+        if (dataRef.childType === "build") {
+          getLayerList(dataRef).then(() => {
+            resolve();
+          });
+        } else if (dataRef.childType === "layer") {
+          getRoomList(dataRef).then(() => {
+            resolve();
+          });
+        }
+      });
+    };
+    // 获取楼层列表
+    const getLayerList = (build) => {
+      return new Promise((resolve) => {
+        if (build.isLeaf || (build.children && build.children.length)) {
+          resolve(build.children || []);
+          return;
+        }
+        emit("request", {
+          params: {
+            method: "get",
+            server: "/village",
+            url: "/project/layer/all",
+            extra: {
+              build_id: build.id,
+            },
+          },
+          success: (res) => {
+            if (res.list.length) {
+              build.children = res.list.map((item) => ({
+                ...item,
+                childType: "layer",
+                key: `${build.key}_layer_${item.id}`,
+                title: item.layer_name,
+                level: build.level + 1,
+                extra: {
+                  ...build.extra,
+                  build_id: build.id,
+                  build_number: build.build_number,
+                  build_name: build.build_name,
+                },
+                isLeaf: false,
+                slots: {
+                  icon: "layerIcon",
+                },
+              }));
+            }
+            resolve(build.children);
+          },
+        });
+      });
+    };
+    // 获取房间列表
+    const getRoomList = (layer) => {
+      return new Promise((resolve) => {
+        if (layer.isLeaf || (layer.children && layer.children.length)) {
+          resolve(layer.children || []);
+          return;
+        }
+        emit("request", {
+          params: {
+            method: "get",
+            server: "/village",
+            url: "/project/room/all",
+            extra: {
+              village_id: layer.extra.village_id,
+              layer_id: layer.id,
+            },
+          },
+          success: (res) => {
+            if (res.list.length) {
+              layer.children = res.list.map((item) => {
+                let newItem = {
+                  ...item,
+                  childType: "room",
+                  key: `${layer.key}_room_${item.id}`,
+                  title: item.room_name,
+                  level: layer.level + 1,
+                  layer_id: layer.id,
+                  layer_number: layer.layer_number,
+                  layer_name: layer.layer_name,
+                  property_area: item.charging_area,
+                  lease_square: item.rental_area,
+                  extra: {
+                    ...layer.extra,
+                    layer_id: layer.id,
+                    layer_number: layer.layer_number,
+                    layer_name: layer.layer_name,
+                  },
+                  isLeaf: true,
+                  slots: {
+                    icon: "roomIcon",
+                    title: "roomTitle",
+                  },
+                };
+                return newItem;
+              });
+            }
+            resolve(layer.children);
+          },
+        });
+      });
+    };
+
+    /** 获取树数据 */
+    // 获取部门树列表
+    const getDeptTreeList = (list, level) => {
+      let result = [];
+      for (let listItem of list) {
+        // 非项目管理部门
+        if (listItem.type !== 3) {
+          listItem.childType = "department"; //listItem.type == 0 ? "topCompany" : "department";
+          listItem.key = `${listItem.childType}-${listItem.id}`; // 部门用中划线，房源用下划线，方便整理选中房源key
+          listItem.title = listItem.name;
+          listItem.level = level;
+          listItem.slots = {
+            icon: `${listItem.childType}Icon`,
+          };
+          listItem.children = [];
+          if (listItem.subcat && listItem.subcat.length) {
+            listItem.children = getDeptTreeList(listItem.subcat, level + 1);
+          }
+          if (listItem.villageList && listItem.villageList.length) {
+            const villageList = getVillageTreeList(
+              listItem.villageList,
+              level,
+              listItem.key
+            );
+            listItem.children = [...listItem.children, ...villageList];
+          }
+          listItem.isLeaf = listItem.children.length === 0;
+          result.push(listItem);
+          state.expandedKeys.push(listItem.key);
+        }
+      }
+      return result;
+    };
+    // 获取项目树列表
+    const getVillageTreeList = (villageList, level = 1, parentKey) => {
+      return villageList.map((village) => {
+        village.childType = "village";
+        village.key = `${parentKey ? parentKey + "-" : ""}${
+          village.childType
+        }_${village.id}`;
+
+        village.title = village.name;
+        village.level = level;
+        village.slots = {
+          icon: `${village.childType}Icon`,
+        };
+        if (village.buildList && village.buildList.length) {
+          village.isLeaf = false;
+          village.children = village.buildList.map((build) => ({
+            ...build,
+            level,
+            childType: "build",
+            key: `${village.key}_build_${build.id}`,
+            title: build.build_name,
+            extra: {
+              village_id: village.id,
+              village_name: village.name,
+              village_short_name: village.short_name,
+            },
+            slots: {
+              icon: "buildIcon",
+            },
+            isLeaf: false,
+          }));
+        } else {
+          village.isLeaf = true;
+        }
+        state.expandedKeys.push(village.key);
+        if (!state.selectedKeys.length) {
+          setSelected(village);
+        }
+        return village;
+      });
+    };
+
+    const getVillageInfo = () => {
+      emit("request", {
+        params: {
+          method: "get",
+          server: "/org",
+          url: "/build/villageAndBuildList/v2",
+          extra: {
+            checked: props.attachDpt ? 1 : props.userChecked,
+            attach_department: props.attachDpt,
+          },
+        },
+        success: (res) => {
+          state.treeList = res.list
+            ? getDeptTreeList(res.list, 1)
+            : getVillageTreeList(res.villageList);
+        },
+      });
+    };
+
+    const init = () => {
+      getVillageInfo();
+    };
+
+    init();
+
+    return {
+      ...toRefs(state),
+      onLoadTreeData,
+      onTreeSelect,
+    };
+  },
+});
+</script>