bl-common-vue3 0.2.48 → 0.2.49

package/.history/package_20230310155615.json

@@ -0,0 +1,54 @@
+{
+  "name": "bl-common-vue3",
+  "version": "0.2.49",
+  "main": "lib/vue3common.umd.min.js",
+  "description": "bailing vue3 common components lib",
+  "private": false,
+  "scripts": {
+    "lib": "vue-cli-service build --target lib --name vue3common --dest lib index.js",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "publish": "npm publish --access public"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^6.0.1",
+    "ant-design-vue": "^2.2.8",
+    "axios": "^0.21.4",
+    "core-js": "^3.6.5",
+    "less": "^4.1.1",
+    "less-loader": "^6.0.0",
+    "moment": "^2.29.1",
+    "qrcode.vue": "^3.3.3",
+    "style-resources-loader": "^1.5.0",
+    "vue": "^3.0.4"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.13",
+    "@vue/cli-plugin-eslint": "~4.5.13",
+    "@vue/cli-service": "~4.5.13",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

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

@@ -0,0 +1,342 @@
+<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>
+      <template #roomTitle="{ dataRef }">
+        <span style="display: inline-block">
+          <span>{{ dataRef.title }}</span>
+          <template
+            v-if="
+              showRentIcon &&
+              dataRef.contract_info &&
+              dataRef.contract_info.length
+            "
+          >
+            <bl-icon
+              type="zukehuaxiang"
+              style="margin-left: 10px; color: #52c41a; font-size: 16px"
+              @click.stop="onRentIconClick(dataRef)"
+            />
+          </template>
+        </span>
+      </template>
+    </a-tree>
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive, toRefs } from "vue";
+import BlIcon from "../BLIcon/index.js";
+import { GoldenFilled } from "@ant-design/icons-vue";
+import { Tree } from "ant-design-vue";
+export default defineComponent({
+  name: "VillageTree",
+  props: {
+    userChecked: {
+      type: Number,
+      default: 1,
+    },
+    attachDpt: {
+      type: Number,
+      default: 1,
+    },
+    // 是否展示租客画像
+    showRentIcon: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    GoldenFilled,
+    "bl-icon": BlIcon,
+    "a-tree": Tree,
+  },
+  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 onRentIconClick = (current) => {
+      if (state.selectedKeys.length && state.selectedKeys[0] == current.key) {
+        return;
+      }
+      state.selectedKeys = [current.key];
+      state.selected = current;
+      emit("rentClick", {
+        current,
+      });
+    };
+
+    /** 设置选中 */
+    const setSelected = (current) => {
+      if (state.selectedKeys.length && state.selectedKeys[0] == current.key) {
+        return;
+      }
+      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),
+      onRentIconClick,
+      onLoadTreeData,
+      onTreeSelect,
+    };
+  },
+});
+</script>