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

<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>