bl-common-vue3 3.7.20 → 3.7.21

package/.history/src/components/ChooseHousingResources/index_20230222193654.vue

@@ -1,1252 +1,1252 @@
-<!--
- * @Description: 选择房源组件
--->
-
-<template>
-  <div class="choose-housing beauty-scroller-bar">
-    <a-alert
-      show-icon
-      :message="alertTip"
-      v-if="alertTip"
-      style="margin-bottom: 10px"
-    />
-    <div class="tree-view" v-if="treeList.length">
-      <a-tree
-        :checkable="checkable"
-        show-icon
-        v-model:expandedKeys="expandedKeys"
-        :checkedKeys="checkedKeys"
-        :tree-data="treeList"
-        :blockNode="true"
-        :selectable="false"
-        :load-data="onLoadTreeData"
-        :disabled="allDisabled"
-        @check="handleTreeCheck"
-      >
-        <!-- 图标 -->
-        <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 }">
-          <a-tooltip placement="topLeft">
-            <template #title>{{ dataRef.disabledTip }}</template>
-            <div class="room-title">
-              <div class="title-show" key="title-disabled-tip">
-                <div class="title">
-                  <LockOutlined v-if="dataRef.is_lock == 1" class="locked" />
-                  <span>{{ dataRef.title }}</span>
-                </div>
-                <span
-                  v-if="checkable"
-                  :class="dataRef.disabled ? 'text-gray' : 'text-primary'"
-                >
-                  {{ dataRef.showArea }}㎡
-                </span>
-              </div>
-            </div>
-          </a-tooltip>
-        </template>
-      </a-tree>
-    </div>
-  </div>
-</template>
-
-<script>
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  reactive,
-  toRaw,
-  toRefs,
-  watch,
-} from "vue";
-import { LockOutlined, GoldenFilled } from "@ant-design/icons-vue";
-import { message, Tree, Alert, Tooltip } from "ant-design-vue";
-import BLIcon from "../BLIcon/index.js";
-
-export default defineComponent({
-  name: "ChooseHousingResources",
-  components: {
-    GoldenFilled,
-    LockOutlined,
-    "bl-icon": BLIcon,
-    "a-tree": Tree,
-    "a-alert": Alert,
-    "a-tooltip": Tooltip,
-  },
-  props: {
-    // 是否追加组织架构层级部门
-    attachDpt: {
-      type: [Number, String],
-      default: 1,
-    },
-    // 是否只展示用户选中查看的项目楼宇 attachDpt为1时userChecked必为1
-    userChecked: {
-      type: [Number, String],
-      default: 1,
-    },
-    // alert提示语
-    alertTip: {
-      type: String,
-      default: "",
-    },
-    // 选择的类型级别: village build layer room
-    checkType: {
-      type: String,
-      default: "room",
-    },
-    // 不允许跨类型选择:  village【不允许跨项目选择】 build【不允许跨楼层选择】 layer【不允许跨楼层选择】 不传为不限制
-    limitType: {
-      type: [String, null],
-      default: "",
-    },
-    // 是否禁选所有
-    allDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    // 可租赁面积为0时是否禁选
-    areaEmptyDisabled: {
-      type: Boolean,
-      default: true,
-    },
-    // 默认选中房源
-    defaultChecked: {
-      type: Object,
-      default: () => ({
-        // villageList: [],
-        // buildList: [],
-        // layerList: [],
-        // roomList: [],
-      }),
-    },
-    // 默认选中房源改变 重新渲染
-    defaultCheckedChanged: {
-      type: [Number, Boolean],
-      default: 0,
-    },
-    // 默认选中房源id
-    defaultCheckedIds: {
-      type: Object,
-      default: () => ({
-        // villageId: 0,
-        // buildId: 0,
-        // layerId: 0,
-        // roomId: 0,
-      }),
-    },
-    // 只展示某个类型的项目,不传为展示所有类型的项目
-    villageType: {
-      type: String,
-      default: "",
-    },
-    // 重置
-    resetTrigger: {
-      type: Number,
-      default: 0,
-    },
-    // 是否可选
-    checkable: {
-      type: Boolean,
-      default: true,
-    },
-    // 条款类型 lease租赁条款 property物业条款
-    clauseType: {
-      type: String,
-      default: "",
-    },
-    // 是否只展示部分数据 0表示展示所有数据
-    getShowList: {
-      type: Number,
-      default: 0,
-    },
-    // 展示的部分数据
-    showList: {
-      type: Object,
-      default: () => ({
-        villageId: [], // village id集合
-        buildId: [], // build id集合
-        projectBuild: [], // {id, build,room} 房源关系和房间列表
-      }),
-    },
-    // 包含自己的面积的房源
-    includeAreaRoom: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  setup(props, { emit }) {
-    // 打印方法
-    const CL = (key, value) => {
-      console.info(`$$$$$$$$$$$$----${key}`, toRaw(value));
-    };
-    // 是否展示组织架构层级
-    const showDpt = computed(() => props.attachDpt == 1);
-
-    const initState = {
-      // 展示的树数据
-      treeList: [],
-      originData: undefined,
-      // 树展开节点key值集合
-      initExpandKeys: [],
-      expandedKeys: [],
-      // 选中节点的key值集合
-      checkedKeys: [],
-      tempCheckedKeys: [],
-      // 当前选中的房间等所在的项目、楼宇、楼层id
-      currentCheck: {
-        villageId: 0,
-        buildId: 0,
-        layerId: 0,
-      },
-      deptVillageMap: {},
-    };
-
-    const state = reactive({
-      ...initState,
-    });
-
-    /** 重置 */
-    watch(
-      () => props.resetTrigger,
-      () => {
-        reset();
-      }
-    );
-    const reset = () => {
-      state.expandedKeys = [...state.initExpandKeys];
-      state.checkedKeys = [];
-      state.tempCheckedKeys = [];
-      checkedIds = [];
-      state.currentCheck = { ...initState.currentCheck };
-    };
-
-    /**
-     * 只展示部分数据
-     * 监听 getShowList 变化，变化后重新设置treeList
-     *  */
-    let getShowListLoadedTimes = 0;
-    watch(
-      () => props.getShowList,
-      (val) => {
-        if (getShowListLoadedTimes != val) {
-          getShowListLoadedTimes = val;
-          reset();
-          state.treeList = [];
-          if (val) {
-            filterTreeListByShowList();
-          } else {
-            nextTick(() => {
-              state.treeList = JSON.parse(state.originData);
-            });
-          }
-        }
-      }
-    );
-    const filterTreeListByShowList = () => {
-      const originData = JSON.parse(state.originData);
-      state.treeList = getShowList(originData);
-    };
-
-    let getShowListArr = [];
-    let showExpandedKeys = [];
-    const getShowListAfter = (type) => {
-      getShowListArr.push(type);
-      if (getShowListArr.length == 2) {
-        setDeptVillageMap();
-        nextTick(() => {
-          state.expandedKeys = [...state.expandedKeys, ...showExpandedKeys];
-          if (state.tempCheckedKeys.length) {
-            state.checkedKeys = [...state.tempCheckedKeys];
-          }
-          // 重置
-          getShowListArr = [];
-          showExpandedKeys = [];
-        });
-      }
-    };
-    const getShowList = (list) => {
-      let result = [];
-      if (!list.length) {
-        return result;
-      }
-      const childType = list[0].childType;
-      if (["build", "layer", "room"].includes(childType)) {
-        if (childType == "build") {
-          const { buildId } = props.showList;
-          // 楼宇
-          result = list.filter((item) => buildId.includes(item.id));
-          result.forEach((item, index) => {
-            getLayerList(item).then((layerList) => {
-              item.children = getShowList(layerList);
-              showExpandedKeys.push(item.key);
-              if (index == result.length - 1) {
-                // 获取楼层列表结束
-                getShowListAfter("layer");
-              }
-            });
-          });
-        } else {
-          const { projectBuild } = props.showList;
-          const vId = list[0].extra.village_id;
-          const vItem = projectBuild.find((item) => item.id == vId);
-          if (childType == "layer") {
-            // 楼层
-            const layerIds = vItem.room.map((item) => item.extra.layer_id);
-            result = list.filter((item) => layerIds.includes(item.id));
-            result.forEach((item, index) => {
-              getRoomList(item).then((roomList) => {
-                item.children = getShowList(roomList);
-                showExpandedKeys.push(item.key);
-                if (index == result.length - 1) {
-                  // 获取房间列表结束
-                  getShowListAfter("room");
-                }
-              });
-            });
-          } else {
-            // 房间
-            const roomIds = vItem.room.map((item) => item.id);
-            result = list.filter((item) => roomIds.includes(item.id));
-          }
-        }
-      } else {
-        // 部门 或者 项目
-        const { villageId } = props.showList;
-        for (let item of list) {
-          if (item.childType == "department") {
-            item.children = getShowList(item.children);
-            if (item.children.length) {
-              result.push(item);
-            }
-          } else if (item.childType == "village") {
-            if (villageId.includes(item.id)) {
-              item.children = getShowList(item.children);
-              result.push(item);
-            }
-          }
-        }
-      }
-      return result;
-    };
-
-    /************* 选中房源 --start **************/
-    // 未选中任何房源
-    // 选中的房源id
-    let checkedIds = {
-      // village: new Set(),
-      // build: new Set(),
-      // layer: new Set(),
-      // room: new Set(),
-    };
-    const handleTreeCheck = (checkedKeys, e) => {
-      CL("handleTreeCheck checkedKeys", checkedKeys);
-      CL("handleTreeCheck ", e);
-      const { checked } = e;
-      if (checked) {
-        // 选中
-        const idsResult = getIdsByCheckedKeys(checkedKeys);
-        if (!checkedIds.village || canCheck(idsResult)) {
-          checkedIds = idsResult;
-          state.checkedKeys = checkedKeys;
-        }
-      } else {
-        if (!checkedKeys.length) {
-          checkedIds = {};
-        }
-        state.checkedKeys = checkedKeys;
-      }
-    };
-    // 根据key值获取id
-    const getIdsByCheckedKeys = (checkedKeys) => {
-      let result = {
-        village: new Set(),
-        build: new Set(),
-        layer: new Set(),
-        room: new Set(),
-      };
-      for (let key of checkedKeys) {
-        const keyArr = key.split("_");
-        result.village.add(Number(keyArr[1]));
-        if (keyArr[3]) {
-          result.build.add(Number(keyArr[3]));
-        }
-        if (keyArr[5]) {
-          result.layer.add(Number(keyArr[5]));
-        }
-        if (keyArr[7]) {
-          result.room.add(Number(keyArr[7]));
-        }
-      }
-      CL("getIdsByCheckedKeys result", result);
-      return result;
-    };
-    // 房源是否可选
-    const canCheck = (newcheckedIds) => {
-      if (props.limitType) {
-        // 不能跨项目选择房源
-        if (newcheckedIds.village.size > 1) {
-          message.warning("不能跨项目选择房源！");
-          return false;
-        }
-        // 不能跨楼宇选择房源
-        if (props.limitType === "build" && newcheckedIds.build.size > 1) {
-          message.warning("不能跨楼宇选择房源！");
-          return false;
-        }
-        // 不能跨楼层选择房源
-        if (props.limitType === "layer" && newcheckedIds.layer.size > 1) {
-          message.warning("不能跨楼层选择房源！");
-          return false;
-        }
-      }
-      return true;
-    };
-    // 整理出选择的village build layer room信息
-    let emitIdsTimeout = null;
-    watch(
-      () => state.checkedKeys,
-      () => {
-        if (emitIdsTimeout) {
-          clearTimeout(emitIdsTimeout);
-          emitIdsTimeout = null;
-        }
-        emitIdsTimeout = setTimeout(() => {
-          getCheckedInfoByKeys();
-        }, 800);
-      }
-    );
-
-    const emitResult = (result) => {
-      CL("emitResult====", result);
-      emit("getResult", result);
-    };
-
-    const getCheckedInfoByKeys = () => {
-      let result = {
-        villageList: [], // 选中项目以及下面所有的房源
-        buildList: [], // 选中楼宇以及下面所有的房源
-        layerList: [], // 选中楼层以及下面所有的房源
-        roomList: [],
-      };
-      if (!state.checkedKeys.length) {
-        emitResult(result);
-        return;
-      }
-      let initKeys = [...state.checkedKeys];
-      let checkedKeys = getInitKeys(initKeys, "village");
-      let villageList = state.treeList;
-      const setResult = (key, value) => {
-        result[key].push(value);
-        let totalLength = 0;
-        for (let key in result) {
-          totalLength += result[key].length;
-        }
-        CL("setResult", totalLength);
-        if (checkedKeys.length == totalLength) {
-          CL("setResult getCheckedInfoByCheckType before", result);
-          getCheckedInfoByCheckType(result).then((newResult) => {
-            emitResult(newResult);
-          });
-        }
-      };
-      let villageMap = {};
-      for (let key of checkedKeys) {
-        let arrKey = [];
-        if (showDpt.value) {
-          arrKey = key.split("-");
-          villageList = state.deptVillageMap[arrKey[1]];
-        }
-        arrKey = key.split("_");
-        // 找到对应village
-        const villageId = Number(arrKey[1]);
-        let village = villageMap[villageId];
-        if (!village) {
-          village = villageMap[villageId] = villageList.find(
-            (item) => item.id == villageId
-          );
-        }
-        if (arrKey.length == 2) {
-          // 选中项目
-          setResult("villageList", village);
-        } else {
-          const buildId = Number(arrKey[3]);
-          const build = village.children.find((item) => item.id == buildId);
-          if (arrKey.length == 4) {
-            // 选中楼宇
-            setResult("buildList", build);
-          } else {
-            const layerId = Number(arrKey[5]);
-            getLayerList(build).then((layerList) => {
-              const layer = layerList.find((item) => item.id == layerId);
-              if (arrKey.length == 6) {
-                setResult("layerList", layer);
-              } else {
-                const roomId = Number(arrKey[7]);
-                getRoomList(layer).then((roomList) => {
-                  const room = roomList.find((item) => item.id == roomId);
-                  setResult("roomList", room);
-                });
-              }
-            });
-          }
-        }
-      }
-    };
-
-    const fKeyMap = { village: "build", build: "layer", layer: "room" };
-    const getInitKeys = (initKeys, type = "village") => {
-      let filterKeys = [];
-      let fKey = fKeyMap[type];
-      if (initKeys.length) {
-        if (fKey) {
-          filterKeys = initKeys.filter((item) => item.indexOf(fKey) === -1);
-          if (filterKeys.length) {
-            filterKeys.forEach((key) => {
-              initKeys = initKeys.filter((item) => item.indexOf(key) === -1);
-            });
-          }
-          const result = getInitKeys(initKeys, fKey);
-          filterKeys = [...filterKeys, ...result];
-        } else {
-          // type = room
-          filterKeys = [...filterKeys, ...initKeys];
-          initKeys = [];
-        }
-      }
-      return filterKeys;
-    };
-    // 数据具体到 checkType
-    const getCheckedInfoByCheckType = (result) => {
-      return new Promise((resolve) => {
-        if (
-          !props.checkType ||
-          props.checkType == "village" ||
-          props.checkType == "build"
-        ) {
-          resolve(result);
-          return;
-        }
-        if (result.villageList.length) {
-          result.villageList.forEach((village) => {
-            result.buildList = [...result.buildList, ...village.children];
-          });
-        }
-        const getRoom = () => {
-          if (result.layerList.length) {
-            result.layerList.forEach((layer, layerIndex) => {
-              getRoomList(layer).then((roomList) => {
-                if (roomList && roomList.length) {
-                  const list = roomList.filter((item) => !item.disabled);
-                  result.roomList = [...result.roomList, ...list];
-                }
-                if (layerIndex == result.layerList.length - 1) {
-                  resolve(result);
-                }
-              });
-            });
-          } else {
-            resolve(result);
-          }
-        };
-        if (result.buildList.length) {
-          result.buildList.forEach((build, buildIndex) => {
-            getLayerList(build).then((layerList) => {
-              if (layerList && layerList.length) {
-                const list = layerList.filter((item) => !item.disabled);
-                result.layerList = [...result.layerList, ...list];
-              }
-              if (buildIndex == result.buildList.length - 1) {
-                if (props.checkType == "room") {
-                  getRoom();
-                } else {
-                  resolve(result);
-                }
-              }
-            });
-          });
-        } else {
-          getRoom();
-        }
-      });
-    };
-    /************* 选中房源 --end **************/
-
-    /************* 动态获取楼层、房间 --start **************/
-    const onLoadTreeData = (treeNode) => {
-      return new Promise((resolve) => {
-        CL("onLoadTreeData treeNode", treeNode);
-        const { dataRef } = treeNode;
-        if (dataRef.isLeaf || (dataRef.children && dataRef.children.length)) {
-          resolve();
-          return;
-        }
-        // const success = (result) => {
-        //   resolve();
-        // };
-        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,
-                disableCheckbox: props.limitType == "room",
-                extra: {
-                  ...build.extra,
-                  build_id: build.id,
-                  build_number: build.build_number,
-                  build_name: build.build_name,
-                },
-                isLeaf: props.checkType == "layer",
-                slots: {
-                  icon: "layerIcon",
-                },
-              }));
-            } else {
-              build.isLeaf = true;
-            }
-            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",
-                  },
-                };
-                // 展示的可租赁面积
-                newItem.showArea =
-                  props.clauseType == "property" && newItem.charging_area
-                    ? Number(newItem.charging_area)
-                    : Number(newItem.rental_area);
-                if (newItem.rent_area) {
-                  const rentArea =
-                    props.clauseType == "property" &&
-                    newItem.rent_area.property_square
-                      ? newItem.rent_area.property_square
-                      : newItem.rent_area.lease_square;
-                  newItem.showArea = Number(
-                    Number(newItem.showArea) - Number(rentArea)
-                  );
-                }
-
-                if (props.includeAreaRoom[newItem.id]) {
-                  newItem.rentedArea = props.includeAreaRoom[newItem.id];
-                  newItem.showArea =
-                    newItem.showArea + Number(newItem.rentedArea.lease);
-                }
-
-                // 禁用以及禁用提示
-                if (props.checkable) {
-                  if (props.areaEmptyDisabled && !newItem.showArea) {
-                    newItem.disabled = true;
-                    newItem.disabledTip = "当前房间可租面积为0，请选择其他房间";
-                  }
-                  if (newItem.is_lock == 1) {
-                    newItem.disabled = true;
-                    newItem.disabledTip = newItem.lock_reason;
-                  }
-                }
-                return newItem;
-              });
-            } else {
-              layer.isLeaf = true;
-            }
-            resolve(layer.children);
-          },
-        });
-      });
-    };
-
-    /************* 动态获取楼层、房间 --end **************/
-
-    /************* 根据项目类型筛选项目 --start **************/
-    watch(
-      () => props.villageType,
-      () => {
-        state.checkedKeys = [];
-        filterVillageByType();
-      }
-    );
-    const filterVillageByType = () => {
-      if (!state.originData || !state.treeList.length) {
-        return;
-      }
-      if (props.villageType) {
-        if (showDpt.value) {
-          state.treeList = filterDeptVillageByType(state.treeList);
-        } else {
-          let originData = JSON.parse(state.originData);
-          state.treeList = originData.filter(
-            (item) => item.type == props.villageType
-          );
-        }
-      } else {
-        state.treeList = JSON.parse(state.originData);
-      }
-      emitTreeList();
-    };
-    const filterDeptVillageByType = (list) => {
-      let result = [];
-      for (let item of list) {
-        if (item.childType != "village" || item.type == props.villageType) {
-          result.push(item);
-          if (item.children && item.children.length) {
-            item.children = filterDeptVillageByType(item.children);
-          }
-        }
-      }
-      return result;
-    };
-    /************* 根据项目类型筛选项目 --end **************/
-
-    /************* 设置默认选中房源 --start **************/
-    watch(
-      () => props.defaultCheckedChanged,
-      () => {
-        reset();
-        setDefaultChecked();
-      }
-    );
-
-    watch(
-      () => props.defaultChecked,
-      () => {
-        if (!state.checkedKeys.length) {
-          setDefaultChecked(1);
-        }
-      }
-    );
-
-    watch(
-      () => props.defaultCheckedIds,
-      () => {
-        if (!state.checkedKeys.length) {
-          setDefaultChecked(2);
-        }
-      }
-    );
-
-    // 默认选中参数是否为空
-    const defaultCheckedNotEmpty = (type = 1) => {
-      const checked =
-        type == 1 ? props.defaultChecked : props.defaultCheckedIds;
-      for (let key in checked) {
-        if (
-          (type == 1 && checked[key] && checked[key].length) ||
-          (type == 2 && checked[key])
-        ) {
-          return true;
-        }
-      }
-      return false;
-    };
-    // 设置默认选中
-    const setDefaultChecked = (type = 0) => {
-      if (!state.treeList.length) {
-        return;
-      }
-      nextTick(() => {
-        if (!type || type == 1) {
-          setDefaultListChecked();
-        }
-        if (!type || type == 2) {
-          setDefaultIdsChecked();
-        }
-      });
-    };
-    // 根据房源列表选中房源
-    const setDefaultListChecked = () => {
-      if (!defaultCheckedNotEmpty(1)) {
-        return;
-      }
-      const { defaultChecked } = props;
-      CL("setDefaultChecked defaultChecked", toRaw(defaultChecked));
-      CL("setDefaultChecked deptVillageMap", toRaw(state.deptVillageMap));
-      const checkedKeys = [];
-      const expandedKeys = [];
-      let loadedVillage = {};
-      for (let key in defaultChecked) {
-        if (defaultChecked[key].length) {
-          defaultChecked[key].forEach((dcItem) => {
-            if (dcItem.extra) {
-              dcItem = {
-                ...dcItem,
-                ...dcItem.extra,
-              };
-            }
-            let itemKey = "";
-            let villageId =
-              key == "villageList" ? dcItem.id : dcItem.village_id;
-            if (key == "buildList" && !dcItem.village_id) {
-              // 只知道楼宇id不知道项目id
-              villageId = getVillageByBuildId(dcItem.id);
-            }
-            if (!villageId) {
-              emitError();
-              return;
-            }
-            let result = loadedVillage[villageId];
-            if (!result) {
-              result = loadedVillage[villageId] = getVillageById(villageId);
-            }
-            if (!result) {
-              emitError();
-              return;
-            }
-            itemKey = result.depId
-              ? `department-${result.depId}-village_${villageId}`
-              : `village_${villageId}`;
-            if (key != "villageList") {
-              // 楼栋+
-              const buildId = key == "buildList" ? dcItem.id : dcItem.build_id;
-              itemKey = `${itemKey}_build_${buildId}`;
-              if (key != "buildList") {
-                // 楼层+
-                if (!expandedKeys.includes(itemKey)) {
-                  expandedKeys.push(itemKey);
-                }
-                const layerId =
-                  key == "layerList" ? dcItem.id : dcItem.layer_id;
-                itemKey = `${itemKey}_layer_${layerId}`;
-                if (key != "layerList") {
-                  // 选中房间
-                  if (!expandedKeys.includes(itemKey)) {
-                    expandedKeys.push(itemKey);
-                  }
-                  const roomId = dcItem.id;
-                  itemKey = `${itemKey}_room_${roomId}`;
-                }
-              }
-            }
-            checkedKeys.push(itemKey);
-          });
-        }
-      }
-
-      if (checkedKeys.length) {
-        nextTick(() => {
-          if (props.getShowList) {
-            state.tempCheckedKeys = [...state.tempCheckedKeys, ...checkedKeys];
-          } else {
-            state.checkedKeys = [...checkedKeys];
-            state.expandedKeys = [...state.expandedKeys, ...expandedKeys];
-          }
-          CL("setDefaultChecked checkedKeys", toRaw(state.checkedKeys));
-        });
-      }
-    };
-
-    const emitError = (type = "notFound", msg = "未查找到该房源") => {
-      emit("error", {
-        type,
-        msg,
-      });
-    };
-
-    // 根据id选中房源
-    const setDefaultIdsChecked = () => {
-      if (!defaultCheckedNotEmpty(2)) {
-        return;
-      }
-      const { defaultCheckedIds } = props;
-      const expandedKeys = [];
-      const checkedKeys = [];
-      if (defaultCheckedIds.villageId) {
-        let itemKey = "";
-        const result = getVillageById(defaultCheckedIds.villageId);
-        if (!result) {
-          emitError();
-          return;
-        }
-        itemKey = result.depId
-          ? `department-${result.depId}-village_${defaultCheckedIds.villageId}`
-          : `village_${defaultCheckedIds.villageId}`;
-        if (defaultCheckedIds.buildId) {
-          itemKey = `${itemKey}_build_${defaultCheckedIds.buildId}`;
-          if (defaultCheckedIds.layerId) {
-            expandedKeys.push(itemKey);
-            itemKey = `${itemKey}_layer_${defaultCheckedIds.layerId}`;
-            if (defaultCheckedIds.roomId) {
-              expandedKeys.push(itemKey);
-              itemKey = `${itemKey}_room_${defaultCheckedIds.roomId}`;
-            }
-          }
-        }
-        checkedKeys.push(itemKey);
-      }
-      if (checkedKeys.length) {
-        nextTick(() => {
-          if (props.getShowList) {
-            state.tempCheckedKeys = [...state.tempCheckedKeys, ...checkedKeys];
-          } else {
-            state.checkedKeys = [...checkedKeys];
-            state.expandedKeys = [...state.expandedKeys, ...expandedKeys];
-          }
-          CL("setDefaultChecked checkedKeys", toRaw(state.checkedKeys));
-        });
-      }
-    };
-    // 根据项目id获取项目信息
-    const getVillageById = (villageId) => {
-      if (showDpt.value) {
-        for (let depId in state.deptVillageMap) {
-          const village = state.deptVillageMap[depId].find(
-            (item) => item.id == villageId
-          );
-          if (village) {
-            return {
-              village,
-              depId,
-            };
-          }
-        }
-      } else {
-        const village = state.treeList.find((item) => item.id == villageId);
-        return {
-          village,
-          depId: 0,
-        };
-      }
-    };
-    // 根据楼宇id查找项目id
-    const getVillageByBuildId = (buildId) => {
-      if (showDpt.value) {
-        for (let depId in state.deptVillageMap) {
-          const villageList = state.deptVillageMap[depId];
-          if (villageList && villageList.length) {
-            for (let village of villageList) {
-              if (village.children && village.children.length) {
-                const build = village.children.find((b) => b.id == buildId);
-                if (build) {
-                  return village.id;
-                }
-              }
-            }
-          }
-        }
-      } else {
-        for (let village of state.treeList) {
-          if (village.children && village.children.length) {
-            const build = village.children.find((b) => b.id == buildId);
-            if (build) {
-              return village.id;
-            }
-          }
-        }
-      }
-      return 0;
-    };
-
-    /************* 设置默认选中房源 --end **************/
-
-    /************* 获取树数据 --start **************/
-    const emitTreeList = () => {
-      // 过滤treeList
-      if (props.getShowList && getShowListLoadedTimes != props.getShowList) {
-        getShowListLoadedTimes = props.getShowList;
-        filterTreeListByShowList();
-      }
-      // 默认选中值
-      setDefaultChecked();
-      // 最终treeList
-      emit("getTree", {
-        list: state.treeList,
-        oList: JSON.parse(state.originData),
-      });
-      CL("treeList", state.treeList);
-    };
-
-    const setDeptVillageMap = () => {
-      state.deptVillageMap = {};
-      if (showDpt.value) {
-        getDeptMap(state.treeList);
-      }
-    };
-    const getDeptMap = (list) => {
-      for (let item of list) {
-        if (
-          item.childType == "department" &&
-          item.children &&
-          item.children.length
-        ) {
-          const villageList = item.children.filter(
-            (it) => it.childType == "village"
-          );
-          if (villageList.length) {
-            state.deptVillageMap[item.id] = villageList;
-          }
-          getDeptMap(item.children);
-        }
-      }
-    };
-    // ------case 1
-    const getDeptAndVillageTree = (list) => {
-      state.treeList = getDeptTreeList(list, 1);
-      state.originData = JSON.stringify(state.treeList);
-      filterVillageByType();
-    };
-    // 获取部门树列表
-    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.disableCheckbox = true;
-          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
-            );
-            state.deptVillageMap[listItem.id] = villageList;
-            listItem.children = [...listItem.children, ...villageList];
-          }
-          listItem.isLeaf = listItem.children.length === 0;
-          result.push(listItem);
-          state.expandedKeys.push(listItem.key);
-          state.initExpandKeys.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.disableCheckbox = !!props.limitType;
-        village.slots = {
-          icon: `${village.childType}Icon`,
-        };
-        if (props.checkType == village.childType) {
-          village.isLeaf = true;
-        } else {
-          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,
-              disableCheckbox:
-                props.limitType == "layer" || props.limitType == "room",
-              extra: {
-                village_id: village.id,
-                village_name: village.name,
-                village_short_name: village.short_name,
-              },
-              slots: {
-                icon: "buildIcon",
-              },
-              isLeaf: props.checkType == "build",
-            }));
-          } else {
-            village.isLeaf = true;
-          }
-          state.expandedKeys.push(village.key);
-          state.initExpandKeys.push(village.key);
-        }
-        return village;
-      });
-    };
-
-    // -------case 2
-    const getVillageTree = (villageList) => {
-      state.treeList = getVillageTreeList(villageList);
-      state.originData = JSON.stringify(state.treeList);
-      filterVillageByType();
-    };
-
-    /************* 获取树数据 --end **************/
-
-    /** 获取接口数据 */
-    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) => {
-          if (showDpt.value) {
-            getDeptAndVillageTree(res.list);
-          } else {
-            getVillageTree(res.villageList);
-          }
-        },
-      });
-    };
-    /************* 初始化 --start **************/
-    const init = () => {
-      getVillageInfo();
-    };
-    init();
-    /************* 初始化 --end **************/
-
-    return {
-      showDpt,
-      ...toRefs(state),
-      onLoadTreeData,
-      handleTreeCheck,
-    };
-  },
-});
-</script>
-
-<style lang="less" scoped>
-.choose-housing {
-  width: 100%;
-  height: 100%;
-  overflow: hidden auto;
-  .tree-view {
-    :deep(.ant-tree-checkbox-disabled) {
-      display: none;
-    }
-    :deep(.ant-tree-treenode-disabled .ant-tree-checkbox-disabled) {
-      display: inline-block;
-    }
-
-    .tree-icon {
-      font-size: 16px;
-      width: 24px;
-      height: 24px;
-      line-height: 24px;
-      text-align: center;
-      vertical-align: middle;
-    }
-
-    .room-title {
-      display: inline-block;
-      width: 100%;
-      .title-show {
-        display: flex;
-        align-content: center;
-        justify-content: space-between;
-        padding-right: 20px;
-        overflow: hidden;
-        .title {
-          flex: 1;
-          margin-right: 6px;
-          overflow: hidden;
-          .locked {
-            margin-right: 6px;
-            color: @warning-color;
-          }
-        }
-      }
-    }
-  }
-  .text-primary {
-    color: @primary-color;
-  }
-  .text-gray {
-    color: @disabled-color;
-  }
-}
-</style>
+<!--
+ * @Description: 选择房源组件
+-->
+
+<template>
+  <div class="choose-housing beauty-scroller-bar">
+    <a-alert
+      show-icon
+      :message="alertTip"
+      v-if="alertTip"
+      style="margin-bottom: 10px"
+    />
+    <div class="tree-view" v-if="treeList.length">
+      <a-tree
+        :checkable="checkable"
+        show-icon
+        v-model:expandedKeys="expandedKeys"
+        :checkedKeys="checkedKeys"
+        :tree-data="treeList"
+        :blockNode="true"
+        :selectable="false"
+        :load-data="onLoadTreeData"
+        :disabled="allDisabled"
+        @check="handleTreeCheck"
+      >
+        <!-- 图标 -->
+        <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 }">
+          <a-tooltip placement="topLeft">
+            <template #title>{{ dataRef.disabledTip }}</template>
+            <div class="room-title">
+              <div class="title-show" key="title-disabled-tip">
+                <div class="title">
+                  <LockOutlined v-if="dataRef.is_lock == 1" class="locked" />
+                  <span>{{ dataRef.title }}</span>
+                </div>
+                <span
+                  v-if="checkable"
+                  :class="dataRef.disabled ? 'text-gray' : 'text-primary'"
+                >
+                  {{ dataRef.showArea }}㎡
+                </span>
+              </div>
+            </div>
+          </a-tooltip>
+        </template>
+      </a-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  reactive,
+  toRaw,
+  toRefs,
+  watch,
+} from "vue";
+import { LockOutlined, GoldenFilled } from "@ant-design/icons-vue";
+import { message, Tree, Alert, Tooltip } from "ant-design-vue";
+import BLIcon from "../BLIcon/index.js";
+
+export default defineComponent({
+  name: "ChooseHousingResources",
+  components: {
+    GoldenFilled,
+    LockOutlined,
+    "bl-icon": BLIcon,
+    "a-tree": Tree,
+    "a-alert": Alert,
+    "a-tooltip": Tooltip,
+  },
+  props: {
+    // 是否追加组织架构层级部门
+    attachDpt: {
+      type: [Number, String],
+      default: 1,
+    },
+    // 是否只展示用户选中查看的项目楼宇 attachDpt为1时userChecked必为1
+    userChecked: {
+      type: [Number, String],
+      default: 1,
+    },
+    // alert提示语
+    alertTip: {
+      type: String,
+      default: "",
+    },
+    // 选择的类型级别: village build layer room
+    checkType: {
+      type: String,
+      default: "room",
+    },
+    // 不允许跨类型选择:  village【不允许跨项目选择】 build【不允许跨楼层选择】 layer【不允许跨楼层选择】 不传为不限制
+    limitType: {
+      type: [String, null],
+      default: "",
+    },
+    // 是否禁选所有
+    allDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 可租赁面积为0时是否禁选
+    areaEmptyDisabled: {
+      type: Boolean,
+      default: true,
+    },
+    // 默认选中房源
+    defaultChecked: {
+      type: Object,
+      default: () => ({
+        // villageList: [],
+        // buildList: [],
+        // layerList: [],
+        // roomList: [],
+      }),
+    },
+    // 默认选中房源改变 重新渲染
+    defaultCheckedChanged: {
+      type: [Number, Boolean],
+      default: 0,
+    },
+    // 默认选中房源id
+    defaultCheckedIds: {
+      type: Object,
+      default: () => ({
+        // villageId: 0,
+        // buildId: 0,
+        // layerId: 0,
+        // roomId: 0,
+      }),
+    },
+    // 只展示某个类型的项目,不传为展示所有类型的项目
+    villageType: {
+      type: String,
+      default: "",
+    },
+    // 重置
+    resetTrigger: {
+      type: Number,
+      default: 0,
+    },
+    // 是否可选
+    checkable: {
+      type: Boolean,
+      default: true,
+    },
+    // 条款类型 lease租赁条款 property物业条款
+    clauseType: {
+      type: String,
+      default: "",
+    },
+    // 是否只展示部分数据 0表示展示所有数据
+    getShowList: {
+      type: Number,
+      default: 0,
+    },
+    // 展示的部分数据
+    showList: {
+      type: Object,
+      default: () => ({
+        villageId: [], // village id集合
+        buildId: [], // build id集合
+        projectBuild: [], // {id, build,room} 房源关系和房间列表
+      }),
+    },
+    // 包含自己的面积的房源
+    includeAreaRoom: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props, { emit }) {
+    // 打印方法
+    const CL = (key, value) => {
+      console.info(`$$$$$$$$$$$$----${key}`, toRaw(value));
+    };
+    // 是否展示组织架构层级
+    const showDpt = computed(() => props.attachDpt == 1);
+
+    const initState = {
+      // 展示的树数据
+      treeList: [],
+      originData: undefined,
+      // 树展开节点key值集合
+      initExpandKeys: [],
+      expandedKeys: [],
+      // 选中节点的key值集合
+      checkedKeys: [],
+      tempCheckedKeys: [],
+      // 当前选中的房间等所在的项目、楼宇、楼层id
+      currentCheck: {
+        villageId: 0,
+        buildId: 0,
+        layerId: 0,
+      },
+      deptVillageMap: {},
+    };
+
+    const state = reactive({
+      ...initState,
+    });
+
+    /** 重置 */
+    watch(
+      () => props.resetTrigger,
+      () => {
+        reset();
+      }
+    );
+    const reset = () => {
+      state.expandedKeys = [...state.initExpandKeys];
+      state.checkedKeys = [];
+      state.tempCheckedKeys = [];
+      checkedIds = [];
+      state.currentCheck = { ...initState.currentCheck };
+    };
+
+    /**
+     * 只展示部分数据
+     * 监听 getShowList 变化，变化后重新设置treeList
+     *  */
+    let getShowListLoadedTimes = 0;
+    watch(
+      () => props.getShowList,
+      (val) => {
+        if (getShowListLoadedTimes != val) {
+          getShowListLoadedTimes = val;
+          reset();
+          state.treeList = [];
+          if (val) {
+            filterTreeListByShowList();
+          } else {
+            nextTick(() => {
+              state.treeList = JSON.parse(state.originData);
+            });
+          }
+        }
+      }
+    );
+    const filterTreeListByShowList = () => {
+      const originData = JSON.parse(state.originData);
+      state.treeList = getShowList(originData);
+    };
+
+    let getShowListArr = [];
+    let showExpandedKeys = [];
+    const getShowListAfter = (type) => {
+      getShowListArr.push(type);
+      if (getShowListArr.length == 2) {
+        setDeptVillageMap();
+        nextTick(() => {
+          state.expandedKeys = [...state.expandedKeys, ...showExpandedKeys];
+          if (state.tempCheckedKeys.length) {
+            state.checkedKeys = [...state.tempCheckedKeys];
+          }
+          // 重置
+          getShowListArr = [];
+          showExpandedKeys = [];
+        });
+      }
+    };
+    const getShowList = (list) => {
+      let result = [];
+      if (!list.length) {
+        return result;
+      }
+      const childType = list[0].childType;
+      if (["build", "layer", "room"].includes(childType)) {
+        if (childType == "build") {
+          const { buildId } = props.showList;
+          // 楼宇
+          result = list.filter((item) => buildId.includes(item.id));
+          result.forEach((item, index) => {
+            getLayerList(item).then((layerList) => {
+              item.children = getShowList(layerList);
+              showExpandedKeys.push(item.key);
+              if (index == result.length - 1) {
+                // 获取楼层列表结束
+                getShowListAfter("layer");
+              }
+            });
+          });
+        } else {
+          const { projectBuild } = props.showList;
+          const vId = list[0].extra.village_id;
+          const vItem = projectBuild.find((item) => item.id == vId);
+          if (childType == "layer") {
+            // 楼层
+            const layerIds = vItem.room.map((item) => item.extra.layer_id);
+            result = list.filter((item) => layerIds.includes(item.id));
+            result.forEach((item, index) => {
+              getRoomList(item).then((roomList) => {
+                item.children = getShowList(roomList);
+                showExpandedKeys.push(item.key);
+                if (index == result.length - 1) {
+                  // 获取房间列表结束
+                  getShowListAfter("room");
+                }
+              });
+            });
+          } else {
+            // 房间
+            const roomIds = vItem.room.map((item) => item.id);
+            result = list.filter((item) => roomIds.includes(item.id));
+          }
+        }
+      } else {
+        // 部门 或者 项目
+        const { villageId } = props.showList;
+        for (let item of list) {
+          if (item.childType == "department") {
+            item.children = getShowList(item.children);
+            if (item.children.length) {
+              result.push(item);
+            }
+          } else if (item.childType == "village") {
+            if (villageId.includes(item.id)) {
+              item.children = getShowList(item.children);
+              result.push(item);
+            }
+          }
+        }
+      }
+      return result;
+    };
+
+    /************* 选中房源 --start **************/
+    // 未选中任何房源
+    // 选中的房源id
+    let checkedIds = {
+      // village: new Set(),
+      // build: new Set(),
+      // layer: new Set(),
+      // room: new Set(),
+    };
+    const handleTreeCheck = (checkedKeys, e) => {
+      CL("handleTreeCheck checkedKeys", checkedKeys);
+      CL("handleTreeCheck ", e);
+      const { checked } = e;
+      if (checked) {
+        // 选中
+        const idsResult = getIdsByCheckedKeys(checkedKeys);
+        if (!checkedIds.village || canCheck(idsResult)) {
+          checkedIds = idsResult;
+          state.checkedKeys = checkedKeys;
+        }
+      } else {
+        if (!checkedKeys.length) {
+          checkedIds = {};
+        }
+        state.checkedKeys = checkedKeys;
+      }
+    };
+    // 根据key值获取id
+    const getIdsByCheckedKeys = (checkedKeys) => {
+      let result = {
+        village: new Set(),
+        build: new Set(),
+        layer: new Set(),
+        room: new Set(),
+      };
+      for (let key of checkedKeys) {
+        const keyArr = key.split("_");
+        result.village.add(Number(keyArr[1]));
+        if (keyArr[3]) {
+          result.build.add(Number(keyArr[3]));
+        }
+        if (keyArr[5]) {
+          result.layer.add(Number(keyArr[5]));
+        }
+        if (keyArr[7]) {
+          result.room.add(Number(keyArr[7]));
+        }
+      }
+      CL("getIdsByCheckedKeys result", result);
+      return result;
+    };
+    // 房源是否可选
+    const canCheck = (newcheckedIds) => {
+      if (props.limitType) {
+        // 不能跨项目选择房源
+        if (newcheckedIds.village.size > 1) {
+          message.warning("不能跨项目选择房源！");
+          return false;
+        }
+        // 不能跨楼宇选择房源
+        if (props.limitType === "build" && newcheckedIds.build.size > 1) {
+          message.warning("不能跨楼宇选择房源！");
+          return false;
+        }
+        // 不能跨楼层选择房源
+        if (props.limitType === "layer" && newcheckedIds.layer.size > 1) {
+          message.warning("不能跨楼层选择房源！");
+          return false;
+        }
+      }
+      return true;
+    };
+    // 整理出选择的village build layer room信息
+    let emitIdsTimeout = null;
+    watch(
+      () => state.checkedKeys,
+      () => {
+        if (emitIdsTimeout) {
+          clearTimeout(emitIdsTimeout);
+          emitIdsTimeout = null;
+        }
+        emitIdsTimeout = setTimeout(() => {
+          getCheckedInfoByKeys();
+        }, 800);
+      }
+    );
+
+    const emitResult = (result) => {
+      CL("emitResult====", result);
+      emit("getResult", result);
+    };
+
+    const getCheckedInfoByKeys = () => {
+      let result = {
+        villageList: [], // 选中项目以及下面所有的房源
+        buildList: [], // 选中楼宇以及下面所有的房源
+        layerList: [], // 选中楼层以及下面所有的房源
+        roomList: [],
+      };
+      if (!state.checkedKeys.length) {
+        emitResult(result);
+        return;
+      }
+      let initKeys = [...state.checkedKeys];
+      let checkedKeys = getInitKeys(initKeys, "village");
+      let villageList = state.treeList;
+      const setResult = (key, value) => {
+        result[key].push(value);
+        let totalLength = 0;
+        for (let key in result) {
+          totalLength += result[key].length;
+        }
+        CL("setResult", totalLength);
+        if (checkedKeys.length == totalLength) {
+          CL("setResult getCheckedInfoByCheckType before", result);
+          getCheckedInfoByCheckType(result).then((newResult) => {
+            emitResult(newResult);
+          });
+        }
+      };
+      let villageMap = {};
+      for (let key of checkedKeys) {
+        let arrKey = [];
+        if (showDpt.value) {
+          arrKey = key.split("-");
+          villageList = state.deptVillageMap[arrKey[1]];
+        }
+        arrKey = key.split("_");
+        // 找到对应village
+        const villageId = Number(arrKey[1]);
+        let village = villageMap[villageId];
+        if (!village) {
+          village = villageMap[villageId] = villageList.find(
+            (item) => item.id == villageId
+          );
+        }
+        if (arrKey.length == 2) {
+          // 选中项目
+          setResult("villageList", village);
+        } else {
+          const buildId = Number(arrKey[3]);
+          const build = village.children.find((item) => item.id == buildId);
+          if (arrKey.length == 4) {
+            // 选中楼宇
+            setResult("buildList", build);
+          } else {
+            const layerId = Number(arrKey[5]);
+            getLayerList(build).then((layerList) => {
+              const layer = layerList.find((item) => item.id == layerId);
+              if (arrKey.length == 6) {
+                setResult("layerList", layer);
+              } else {
+                const roomId = Number(arrKey[7]);
+                getRoomList(layer).then((roomList) => {
+                  const room = roomList.find((item) => item.id == roomId);
+                  setResult("roomList", room);
+                });
+              }
+            });
+          }
+        }
+      }
+    };
+
+    const fKeyMap = { village: "build", build: "layer", layer: "room" };
+    const getInitKeys = (initKeys, type = "village") => {
+      let filterKeys = [];
+      let fKey = fKeyMap[type];
+      if (initKeys.length) {
+        if (fKey) {
+          filterKeys = initKeys.filter((item) => item.indexOf(fKey) === -1);
+          if (filterKeys.length) {
+            filterKeys.forEach((key) => {
+              initKeys = initKeys.filter((item) => item.indexOf(key) === -1);
+            });
+          }
+          const result = getInitKeys(initKeys, fKey);
+          filterKeys = [...filterKeys, ...result];
+        } else {
+          // type = room
+          filterKeys = [...filterKeys, ...initKeys];
+          initKeys = [];
+        }
+      }
+      return filterKeys;
+    };
+    // 数据具体到 checkType
+    const getCheckedInfoByCheckType = (result) => {
+      return new Promise((resolve) => {
+        if (
+          !props.checkType ||
+          props.checkType == "village" ||
+          props.checkType == "build"
+        ) {
+          resolve(result);
+          return;
+        }
+        if (result.villageList.length) {
+          result.villageList.forEach((village) => {
+            result.buildList = [...result.buildList, ...village.children];
+          });
+        }
+        const getRoom = () => {
+          if (result.layerList.length) {
+            result.layerList.forEach((layer, layerIndex) => {
+              getRoomList(layer).then((roomList) => {
+                if (roomList && roomList.length) {
+                  const list = roomList.filter((item) => !item.disabled);
+                  result.roomList = [...result.roomList, ...list];
+                }
+                if (layerIndex == result.layerList.length - 1) {
+                  resolve(result);
+                }
+              });
+            });
+          } else {
+            resolve(result);
+          }
+        };
+        if (result.buildList.length) {
+          result.buildList.forEach((build, buildIndex) => {
+            getLayerList(build).then((layerList) => {
+              if (layerList && layerList.length) {
+                const list = layerList.filter((item) => !item.disabled);
+                result.layerList = [...result.layerList, ...list];
+              }
+              if (buildIndex == result.buildList.length - 1) {
+                if (props.checkType == "room") {
+                  getRoom();
+                } else {
+                  resolve(result);
+                }
+              }
+            });
+          });
+        } else {
+          getRoom();
+        }
+      });
+    };
+    /************* 选中房源 --end **************/
+
+    /************* 动态获取楼层、房间 --start **************/
+    const onLoadTreeData = (treeNode) => {
+      return new Promise((resolve) => {
+        CL("onLoadTreeData treeNode", treeNode);
+        const { dataRef } = treeNode;
+        if (dataRef.isLeaf || (dataRef.children && dataRef.children.length)) {
+          resolve();
+          return;
+        }
+        // const success = (result) => {
+        //   resolve();
+        // };
+        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,
+                disableCheckbox: props.limitType == "room",
+                extra: {
+                  ...build.extra,
+                  build_id: build.id,
+                  build_number: build.build_number,
+                  build_name: build.build_name,
+                },
+                isLeaf: props.checkType == "layer",
+                slots: {
+                  icon: "layerIcon",
+                },
+              }));
+            } else {
+              build.isLeaf = true;
+            }
+            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",
+                  },
+                };
+                // 展示的可租赁面积
+                newItem.showArea =
+                  props.clauseType == "property" && newItem.charging_area
+                    ? Number(newItem.charging_area)
+                    : Number(newItem.rental_area);
+                if (newItem.rent_area) {
+                  const rentArea =
+                    props.clauseType == "property" &&
+                    newItem.rent_area.property_square
+                      ? newItem.rent_area.property_square
+                      : newItem.rent_area.lease_square;
+                  newItem.showArea = Number(
+                    Number(newItem.showArea) - Number(rentArea)
+                  );
+                }
+
+                if (props.includeAreaRoom[newItem.id]) {
+                  newItem.rentedArea = props.includeAreaRoom[newItem.id];
+                  newItem.showArea =
+                    newItem.showArea + Number(newItem.rentedArea.lease);
+                }
+
+                // 禁用以及禁用提示
+                if (props.checkable) {
+                  if (props.areaEmptyDisabled && !newItem.showArea) {
+                    newItem.disabled = true;
+                    newItem.disabledTip = "当前房间可租面积为0，请选择其他房间";
+                  }
+                  if (newItem.is_lock == 1) {
+                    newItem.disabled = true;
+                    newItem.disabledTip = newItem.lock_reason;
+                  }
+                }
+                return newItem;
+              });
+            } else {
+              layer.isLeaf = true;
+            }
+            resolve(layer.children);
+          },
+        });
+      });
+    };
+
+    /************* 动态获取楼层、房间 --end **************/
+
+    /************* 根据项目类型筛选项目 --start **************/
+    watch(
+      () => props.villageType,
+      () => {
+        state.checkedKeys = [];
+        filterVillageByType();
+      }
+    );
+    const filterVillageByType = () => {
+      if (!state.originData || !state.treeList.length) {
+        return;
+      }
+      if (props.villageType) {
+        if (showDpt.value) {
+          state.treeList = filterDeptVillageByType(state.treeList);
+        } else {
+          let originData = JSON.parse(state.originData);
+          state.treeList = originData.filter(
+            (item) => item.type == props.villageType
+          );
+        }
+      } else {
+        state.treeList = JSON.parse(state.originData);
+      }
+      emitTreeList();
+    };
+    const filterDeptVillageByType = (list) => {
+      let result = [];
+      for (let item of list) {
+        if (item.childType != "village" || item.type == props.villageType) {
+          result.push(item);
+          if (item.children && item.children.length) {
+            item.children = filterDeptVillageByType(item.children);
+          }
+        }
+      }
+      return result;
+    };
+    /************* 根据项目类型筛选项目 --end **************/
+
+    /************* 设置默认选中房源 --start **************/
+    watch(
+      () => props.defaultCheckedChanged,
+      () => {
+        reset();
+        setDefaultChecked();
+      }
+    );
+
+    watch(
+      () => props.defaultChecked,
+      () => {
+        if (!state.checkedKeys.length) {
+          setDefaultChecked(1);
+        }
+      }
+    );
+
+    watch(
+      () => props.defaultCheckedIds,
+      () => {
+        if (!state.checkedKeys.length) {
+          setDefaultChecked(2);
+        }
+      }
+    );
+
+    // 默认选中参数是否为空
+    const defaultCheckedNotEmpty = (type = 1) => {
+      const checked =
+        type == 1 ? props.defaultChecked : props.defaultCheckedIds;
+      for (let key in checked) {
+        if (
+          (type == 1 && checked[key] && checked[key].length) ||
+          (type == 2 && checked[key])
+        ) {
+          return true;
+        }
+      }
+      return false;
+    };
+    // 设置默认选中
+    const setDefaultChecked = (type = 0) => {
+      if (!state.treeList.length) {
+        return;
+      }
+      nextTick(() => {
+        if (!type || type == 1) {
+          setDefaultListChecked();
+        }
+        if (!type || type == 2) {
+          setDefaultIdsChecked();
+        }
+      });
+    };
+    // 根据房源列表选中房源
+    const setDefaultListChecked = () => {
+      if (!defaultCheckedNotEmpty(1)) {
+        return;
+      }
+      const { defaultChecked } = props;
+      CL("setDefaultChecked defaultChecked", toRaw(defaultChecked));
+      CL("setDefaultChecked deptVillageMap", toRaw(state.deptVillageMap));
+      const checkedKeys = [];
+      const expandedKeys = [];
+      let loadedVillage = {};
+      for (let key in defaultChecked) {
+        if (defaultChecked[key].length) {
+          defaultChecked[key].forEach((dcItem) => {
+            if (dcItem.extra) {
+              dcItem = {
+                ...dcItem,
+                ...dcItem.extra,
+              };
+            }
+            let itemKey = "";
+            let villageId =
+              key == "villageList" ? dcItem.id : dcItem.village_id;
+            if (key == "buildList" && !dcItem.village_id) {
+              // 只知道楼宇id不知道项目id
+              villageId = getVillageByBuildId(dcItem.id);
+            }
+            if (!villageId) {
+              emitError();
+              return;
+            }
+            let result = loadedVillage[villageId];
+            if (!result) {
+              result = loadedVillage[villageId] = getVillageById(villageId);
+            }
+            if (!result) {
+              emitError();
+              return;
+            }
+            itemKey = result.depId
+              ? `department-${result.depId}-village_${villageId}`
+              : `village_${villageId}`;
+            if (key != "villageList") {
+              // 楼栋+
+              const buildId = key == "buildList" ? dcItem.id : dcItem.build_id;
+              itemKey = `${itemKey}_build_${buildId}`;
+              if (key != "buildList") {
+                // 楼层+
+                if (!expandedKeys.includes(itemKey)) {
+                  expandedKeys.push(itemKey);
+                }
+                const layerId =
+                  key == "layerList" ? dcItem.id : dcItem.layer_id;
+                itemKey = `${itemKey}_layer_${layerId}`;
+                if (key != "layerList") {
+                  // 选中房间
+                  if (!expandedKeys.includes(itemKey)) {
+                    expandedKeys.push(itemKey);
+                  }
+                  const roomId = dcItem.id;
+                  itemKey = `${itemKey}_room_${roomId}`;
+                }
+              }
+            }
+            checkedKeys.push(itemKey);
+          });
+        }
+      }
+
+      if (checkedKeys.length) {
+        nextTick(() => {
+          if (props.getShowList) {
+            state.tempCheckedKeys = [...state.tempCheckedKeys, ...checkedKeys];
+          } else {
+            state.checkedKeys = [...checkedKeys];
+            state.expandedKeys = [...state.expandedKeys, ...expandedKeys];
+          }
+          CL("setDefaultChecked checkedKeys", toRaw(state.checkedKeys));
+        });
+      }
+    };
+
+    const emitError = (type = "notFound", msg = "未查找到该房源") => {
+      emit("error", {
+        type,
+        msg,
+      });
+    };
+
+    // 根据id选中房源
+    const setDefaultIdsChecked = () => {
+      if (!defaultCheckedNotEmpty(2)) {
+        return;
+      }
+      const { defaultCheckedIds } = props;
+      const expandedKeys = [];
+      const checkedKeys = [];
+      if (defaultCheckedIds.villageId) {
+        let itemKey = "";
+        const result = getVillageById(defaultCheckedIds.villageId);
+        if (!result) {
+          emitError();
+          return;
+        }
+        itemKey = result.depId
+          ? `department-${result.depId}-village_${defaultCheckedIds.villageId}`
+          : `village_${defaultCheckedIds.villageId}`;
+        if (defaultCheckedIds.buildId) {
+          itemKey = `${itemKey}_build_${defaultCheckedIds.buildId}`;
+          if (defaultCheckedIds.layerId) {
+            expandedKeys.push(itemKey);
+            itemKey = `${itemKey}_layer_${defaultCheckedIds.layerId}`;
+            if (defaultCheckedIds.roomId) {
+              expandedKeys.push(itemKey);
+              itemKey = `${itemKey}_room_${defaultCheckedIds.roomId}`;
+            }
+          }
+        }
+        checkedKeys.push(itemKey);
+      }
+      if (checkedKeys.length) {
+        nextTick(() => {
+          if (props.getShowList) {
+            state.tempCheckedKeys = [...state.tempCheckedKeys, ...checkedKeys];
+          } else {
+            state.checkedKeys = [...checkedKeys];
+            state.expandedKeys = [...state.expandedKeys, ...expandedKeys];
+          }
+          CL("setDefaultChecked checkedKeys", toRaw(state.checkedKeys));
+        });
+      }
+    };
+    // 根据项目id获取项目信息
+    const getVillageById = (villageId) => {
+      if (showDpt.value) {
+        for (let depId in state.deptVillageMap) {
+          const village = state.deptVillageMap[depId].find(
+            (item) => item.id == villageId
+          );
+          if (village) {
+            return {
+              village,
+              depId,
+            };
+          }
+        }
+      } else {
+        const village = state.treeList.find((item) => item.id == villageId);
+        return {
+          village,
+          depId: 0,
+        };
+      }
+    };
+    // 根据楼宇id查找项目id
+    const getVillageByBuildId = (buildId) => {
+      if (showDpt.value) {
+        for (let depId in state.deptVillageMap) {
+          const villageList = state.deptVillageMap[depId];
+          if (villageList && villageList.length) {
+            for (let village of villageList) {
+              if (village.children && village.children.length) {
+                const build = village.children.find((b) => b.id == buildId);
+                if (build) {
+                  return village.id;
+                }
+              }
+            }
+          }
+        }
+      } else {
+        for (let village of state.treeList) {
+          if (village.children && village.children.length) {
+            const build = village.children.find((b) => b.id == buildId);
+            if (build) {
+              return village.id;
+            }
+          }
+        }
+      }
+      return 0;
+    };
+
+    /************* 设置默认选中房源 --end **************/
+
+    /************* 获取树数据 --start **************/
+    const emitTreeList = () => {
+      // 过滤treeList
+      if (props.getShowList && getShowListLoadedTimes != props.getShowList) {
+        getShowListLoadedTimes = props.getShowList;
+        filterTreeListByShowList();
+      }
+      // 默认选中值
+      setDefaultChecked();
+      // 最终treeList
+      emit("getTree", {
+        list: state.treeList,
+        oList: JSON.parse(state.originData),
+      });
+      CL("treeList", state.treeList);
+    };
+
+    const setDeptVillageMap = () => {
+      state.deptVillageMap = {};
+      if (showDpt.value) {
+        getDeptMap(state.treeList);
+      }
+    };
+    const getDeptMap = (list) => {
+      for (let item of list) {
+        if (
+          item.childType == "department" &&
+          item.children &&
+          item.children.length
+        ) {
+          const villageList = item.children.filter(
+            (it) => it.childType == "village"
+          );
+          if (villageList.length) {
+            state.deptVillageMap[item.id] = villageList;
+          }
+          getDeptMap(item.children);
+        }
+      }
+    };
+    // ------case 1
+    const getDeptAndVillageTree = (list) => {
+      state.treeList = getDeptTreeList(list, 1);
+      state.originData = JSON.stringify(state.treeList);
+      filterVillageByType();
+    };
+    // 获取部门树列表
+    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.disableCheckbox = true;
+          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
+            );
+            state.deptVillageMap[listItem.id] = villageList;
+            listItem.children = [...listItem.children, ...villageList];
+          }
+          listItem.isLeaf = listItem.children.length === 0;
+          result.push(listItem);
+          state.expandedKeys.push(listItem.key);
+          state.initExpandKeys.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.disableCheckbox = !!props.limitType;
+        village.slots = {
+          icon: `${village.childType}Icon`,
+        };
+        if (props.checkType == village.childType) {
+          village.isLeaf = true;
+        } else {
+          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,
+              disableCheckbox:
+                props.limitType == "layer" || props.limitType == "room",
+              extra: {
+                village_id: village.id,
+                village_name: village.name,
+                village_short_name: village.short_name,
+              },
+              slots: {
+                icon: "buildIcon",
+              },
+              isLeaf: props.checkType == "build",
+            }));
+          } else {
+            village.isLeaf = true;
+          }
+          state.expandedKeys.push(village.key);
+          state.initExpandKeys.push(village.key);
+        }
+        return village;
+      });
+    };
+
+    // -------case 2
+    const getVillageTree = (villageList) => {
+      state.treeList = getVillageTreeList(villageList);
+      state.originData = JSON.stringify(state.treeList);
+      filterVillageByType();
+    };
+
+    /************* 获取树数据 --end **************/
+
+    /** 获取接口数据 */
+    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) => {
+          if (showDpt.value) {
+            getDeptAndVillageTree(res.list);
+          } else {
+            getVillageTree(res.villageList);
+          }
+        },
+      });
+    };
+    /************* 初始化 --start **************/
+    const init = () => {
+      getVillageInfo();
+    };
+    init();
+    /************* 初始化 --end **************/
+
+    return {
+      showDpt,
+      ...toRefs(state),
+      onLoadTreeData,
+      handleTreeCheck,
+    };
+  },
+});
+</script>
+
+<style lang="less" scoped>
+.choose-housing {
+  width: 100%;
+  height: 100%;
+  overflow: hidden auto;
+  .tree-view {
+    :deep(.ant-tree-checkbox-disabled) {
+      display: none;
+    }
+    :deep(.ant-tree-treenode-disabled .ant-tree-checkbox-disabled) {
+      display: inline-block;
+    }
+
+    .tree-icon {
+      font-size: 16px;
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      vertical-align: middle;
+    }
+
+    .room-title {
+      display: inline-block;
+      width: 100%;
+      .title-show {
+        display: flex;
+        align-content: center;
+        justify-content: space-between;
+        padding-right: 20px;
+        overflow: hidden;
+        .title {
+          flex: 1;
+          margin-right: 6px;
+          overflow: hidden;
+          .locked {
+            margin-right: 6px;
+            color: @warning-color;
+          }
+        }
+      }
+    }
+  }
+  .text-primary {
+    color: @primary-color;
+  }
+  .text-gray {
+    color: @disabled-color;
+  }
+}
+</style>