1、入驻单位、人员优化

apps/web-antd/src/views/property/room/room-select.vue

@@ -0,0 +1,218 @@
+<script lang="ts" setup>
+import {onMounted, ref, watch} from 'vue';
+import {Select} from 'ant-design-vue';
+import {communityList} from "#/api/property/community";
+import {buildingList} from "#/api/property/building";
+import {unitList} from "#/api/property/unit";
+import {floorList} from "#/api/property/floor";
+import {roomList} from "#/api/property/room";
+
+defineOptions({name: 'RoomSelect'});
+
+const props = withDefaults(defineProps<{
+  disabled?: boolean;
+  isUpdate?: boolean;
+  level?:number;
+}>(), {
+  disabled: false,
+  isUpdate: false,
+  level:5
+});
+
+
+const communityData = ref<any[]>([]);
+const buildingData = ref<any[]>([]);
+const unitData = ref<any[]>([]);
+const floorData = ref<any[]>([]);
+const roomData = ref<any[]>([]);
+const communityValue = ref();
+const buildingValue = ref();
+const unitValue = ref();
+const floorValue = ref();
+const roomValue = ref();
+const changeData=ref();
+
+onMounted(() => {
+  queryCommunity()
+
+});
+
+const emit = defineEmits(['update:roomCode']);
+
+async function queryCommunity() {
+  const queryData = {
+    pageSize: 100,
+    pageNum: 1,
+    state: 1,
+  }
+  const res = await communityList(queryData);
+  communityData.value = res.rows.map((item) => ({
+    label: item.communityName,
+    value: item.id,
+  }));
+}
+
+async function queryBuilding() {
+  const queryData = {
+    pageSize: 100,
+    pageNum: 1,
+    state: 1,
+    communityCode: communityValue.value
+  }
+  const res = await buildingList(queryData);
+  buildingData.value = res.rows.map((item) => ({
+    label: item.buildingName,
+    value: item.id,
+  }));
+}
+
+async function queryUnit() {
+  const queryData = {
+    pageSize: 100,
+    pageNum: 1,
+    state: 1,
+    buildingCode: buildingValue.value
+  }
+  const res = await unitList(queryData);
+  unitData.value = res.rows.map((item) => ({
+    label: item.unitName,
+    value: item.id,
+  }));
+}
+
+async function queryFloor() {
+  const queryData = {
+    pageSize: 100,
+    pageNum: 1,
+    state: 1,
+    unitCode: unitValue.value
+  }
+  const res = await floorList(queryData);
+  floorData.value = res.rows.map((item) => ({
+    label: item.floorName,
+    value: item.id,
+  }));
+}
+
+async function queryRoom() {
+  const queryData = {
+    pageSize: 100,
+    pageNum: 1,
+    state: 1,
+    floorCode: floorValue.value
+  }
+  const res = await roomList(queryData);
+  roomData.value = res.rows.map((item) => ({
+    label: item.roomCode,
+    value: item.id,
+  }));
+}
+
+const handleChangeCommunity = (val: string) => {
+  communityValue.value = val;
+  buildingValue.value = undefined;
+  unitValue.value = undefined;
+  floorValue.value = undefined;
+  roomValue.value = undefined;
+  queryBuilding()
+};
+const handleChangeBuilding = (val: string) => {
+  buildingValue.value = val;
+  unitValue.value = undefined;
+  floorValue.value = undefined;
+  roomValue.value = undefined;
+  queryUnit()
+};
+const handleChangeUnit = (val: string) => {
+  unitValue.value = val;
+  floorValue.value = undefined;
+  roomValue.value = undefined;
+  queryFloor()
+};
+const handleChangeFloor = (val: string) => {
+  floorValue.value = val;
+  roomValue.value = undefined;
+  queryRoom()
+};
+const handleChangeRoom = (val: string) => {
+  roomValue.value = val;
+};
+
+watch(() => props.isUpdate,
+  (newX) => {
+    console.log(newX, '==========================')
+  }, {immediate: true})
+watch(() => roomValue.value,
+  (newX) => {
+    emit('update:roomCode', newX);
+    console.log(newX, '==========================roomCode')
+  },)
+
+const filterOption = (input: string, option: any) => {
+  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+};
+</script>
+
+<template>
+  <div>
+    <Select
+      v-if="props.level>1"
+      v-model:value="communityValue"
+      show-search
+      placeholder="请选择区域"
+      :options="communityData"
+      :filter-option="filterOption"
+      @change="handleChangeCommunity"
+      style="width: 20%"
+    ></Select>
+    <Select
+      v-if="props.level>1"
+      v-model:value="buildingValue"
+      show-search
+      :disabled="!communityValue"
+      placeholder="请选择建筑"
+      :options="buildingData"
+      :filter-option="filterOption"
+      @change="handleChangeBuilding"
+      @focus="queryBuilding"
+      style="width: 20%"
+    ></Select>
+    <Select
+      v-if="props.level>2"
+      v-model:value="unitValue"
+      :disabled="!buildingValue"
+      show-search
+      placeholder="请选择单元"
+      :options="unitData"
+      :filter-option="filterOption"
+      @change="handleChangeUnit"
+      @focus="queryUnit"
+      style="width: 20%"
+    ></Select>
+    <Select
+      v-if="props.level>3"
+      v-model:value="floorValue"
+      :disabled="!unitValue"
+      show-search
+      placeholder="请选择楼层"
+      :options="floorData"
+      :filter-option="filterOption"
+      @change="handleChangeFloor"
+      @focus="queryFloor"
+      style="width: 20%"
+    ></Select>
+    <Select
+      v-if="props.level>4"
+      v-model:value="roomValue"
+      :disabled="!floorValue"
+      show-search
+      placeholder="请选择房间"
+      :options="roomData"
+      :filter-option="filterOption"
+      @change="handleChangeRoom"
+      @focus="queryRoom"
+      style="width: 20%"
+    ></Select>
+  </div>
+</template>
+