vue3.0 + ant design vue treeSelect封装

<template>
  <div class="treeList">
    <div>
      <a-tree-select
        class="input-h"
        v-model:value="merchantCodes"
        :tree-data="treeDataList"
        allow-clear
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        @select="treeSect"
        :placeholder="t('yl.pleaseSelectRoom')"
        autocomplete="new-password"
      >
        <template #suffixIcon>
          <a-tooltip>
            <template #title>{{ t('yl.reloadStore') }}</template>
            <SyncOutlined @click="hadleReset" class="infont" />
          </a-tooltip>
        </template>
      </a-tree-select>
    </div>
    <!-- <div>
      <a-tooltip>
        <template #title>重新加载门店</template>
        <SyncOutlined @click="hadleReset" class="infont" />
      </a-tooltip>
    </div> -->
    <!-- <RedoOutlined @click="hadleReset" /> -->
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, onMounted, toRefs, watch } from 'vue';
import ylDatePicker from '@/components/ylDatePicker.vue';
import moment, { Moment } from 'moment';
import { TableState, CheckAble, PaginationQuery } from '@/types/table';
import { getUserss, merchartArea } from '@/api/news';
import { getAreaShopTree } from '@/api/passenger';
import { SyncOutlined } from '@ant-design/icons-vue';
import { useI18n } from 'vue-i18n';
interface State {
  merchant?: any;
  taskStatus?: any;
  queueType?: any;
  queueBatch?: any;
  createTime?: any;
  treeData?: any;
  merchantCodes?: any;
  dataSource?: any;
  order?: any;
  checkBox?: any;
  shopCode?: any;
  areaCode?: any;
  treeDataList?: any;
  merchantCode?: any;
}
export default defineComponent({
  name: 'search-filter',
  components: {
    ylDatePicker,
    SyncOutlined,
  },
  props: {
    merchantNumber: {
      type: String,
      default: () => '',
    },
    merchantCode: {
      type: String,
      default: () => '',
    },
    merchantType: {
      type: String,
      default: () => '',
    },
  },
  emits: ['onSubmit', 'onReset'],
  setup(props, { emit }) {
    const { t } = useI18n();
    const merchantCode = localStorage.merchantCode;
    const userType = localStorage.userType;
    const state: State = reactive({
      merchant: '',
      taskStatus: null,
      queueType: null,
      queueBatch: '',
      createTime: '',
      merchantCodes: merchantCode,
      dataSource: [],
      treeData: [] as NormalObj[],
      checkBox: false,
      shopCode: '',
      areaCode: '',
      merchantCode: '',
      treeDataList: [],
    });
    const data = ref([]);
    const loading = ref<boolean>(false);
    watch(
      () => props.merchantNumber,
      (dept) => {
        if (dept !== '11') {
          state.merchantCodes = merchantCode;
          emit('onSubmit', merchantCode, 'merchantCode');
        }
      },
      {
        deep: true,
      }
    );
    watch(
      () => props.merchantType,
      (dept) => {
        if (dept == 'B') {
          state.merchantCodes = merchantCode;
          // emit('onSubmit', merchantCode, 'merchantCode');
        }
      }
    );

    onMounted(() => {
      const timer = setTimeout(() => {
        getAreaShopTreeList(tableQuery);
        clearTimeout(timer);
      }, 500);
    });
    const getAreaShopTreeList = async (tableQuery: PaginationQuery) => {
      let contentArr: any = await getAreaShopTree(tableQuery);
// 这是模拟数据
      contentArr = {
        children: [
          {
            children: [
              {
                children: null,
                code: 'YL000003-00001',
                name: '04348',
                parentCode: '22062415292100891913277',
                sortNo: 1000,
                type: 2,
              },
              {
                children: null,
                code: 'YL000003-00002',
                name: '3楼陈列室',
                parentCode: '22062415292100891913277',
                sortNo: 1001,
                type: 2,
              },
              {
                children: null,
                code: 'YL000003-00003',
                name: '01611',
                parentCode: '22062415292100891913277',
                sortNo: 1002,
                type: 2,
              },
              {
                children: null,
                code: 'YL000003-00004',
                name: '02758',
                parentCode: '22062415292100891913277',
                sortNo: 1003,
                type: 2,
              },
              {
                children: null,
                code: 'YL000003-00005',
                name: '00202',
                parentCode: '22062415292100891913277',
                sortNo: 1004,
                type: 2,
              },
              {
                children: null,
                code: 'YL000003-00006',
                name: '80666',
                parentCode: '22062415292100891913277',
                sortNo: 1005,
                type: 2,
              },
            ],
            code: '22062415292100891913277',
            name: '华南区',
            parentCode: null,
            sortNo: 1,
            type: 1,
          },
        ],
        code: 'YL000003',
        name: 'test',
        parentCode: null,
        sortNo: 0,
        type: 0,
      };
      let arr = [];
      arr.push(contentArr);
      if (contentArr.children) {
        state.treeDataList = arr.map((org: any) => mapTree(org));
        emit('onSubmit', merchantCode, 'merchantCode');
      }
    };
    const mapTree = (org: any) => {
      const haveChildren = Array.isArray(org.children) && org.children.length > 0;
      return {
        // 分别将我们查询出来的值做出改变他的key
        title: org.name,
        key: org.code,
        id: org.code,
        type: org.type,
        value: org.code ? org.code : merchantCode,
        // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
        children: haveChildren ? org.children.map((i: any) => mapTree(i)) : [],
        isLeaf: haveChildren ? false : true,
        // disabled: haveChildrens ? true : false,
      };
    };
    const tableQuery: PaginationQuery = reactive({
      // systype: userType,
      merchantCode: merchantCode,
      // isPaged: false,
      refresh: false,
    });
    const hadleReset = () => {
      state.merchantCodes = merchantCode;
      tableQuery.refresh = true;
      getAreaShopTreeList(tableQuery);
    };
    // const getTemplateChecks = async (tableQuery: PaginationQuery) => {
    //   let contentArr: any = await merchartArea(tableQuery);
    //   if (contentArr.content) {
    //     state.treeData = contentArr.content.map((item: any) => {
    //       return {
    //         contactName: item.areaName,
    //         children: [],
    //         id: item.areaCode,
    //         isLeaf: item.merchantCount == 0 ? true : false,
    //         key: item.areaCode,
    //         //  disabled: item ? true : false,
    //         areaCode: item.areaCode,
    //       };
    //     });
    //   } else {
    //     // getTemplateChecks(tableQuery);
    //     const timer = setTimeout(() => {
    //       getTemplateChecks(tableQuery);
    //       clearTimeout(timer);
    //     }, 500);
    //   }
    // };
    // 异步加载树节点数据
    // const onLoadData = (treeNode: NormalObj) => {
    //   return new Promise(async (resolve: (value?: unknown) => void) => {
    //     const params = {
    //       merchantCode: treeNode.dataRef.merchantCode,
    //     };
    //     const paramsName = {
    //       areaCode: treeNode.dataRef.id,
    //       isPaged: false,
    //     };
    //     let list = getUserss(paramsName);
    //     list.then((res) => {
    //       let data = res.content;
    //       treeNode.dataRef.children = data.map((item: any) => {
    //         return {
    //           contactName: item.name,
    //           children: [],
    //           id: item.id,
    //           isLeaf: item.children ? false : true,
    //           key: item.merchantCode,
    //         };
    //       });
    //     });
    //     resolve();
    //   });
    // };
    // 树选择
    const treeSect = (value: any, label: any, extra: any) => {
      const typeNumber: number = extra.selectedNodes[0].props.type;
      if (typeNumber == 0) {
        emit('onSubmit', value, 'merchantCode');
      } else if (typeNumber == 1) {
        state.areaCode = value;
        emit('onSubmit', value, 'areaCode');
      } else if (typeNumber == 2) {
        state.shopCode = value;
        emit('onSubmit', value, 'shopCode');
      }
      state.merchantCodes = value;
    };

    return {
      ...toRefs(state),
      merchantCode,
      userType,
      loading,
      t,
      data,
      tableQuery,
      treeSect,
      hadleReset,
    };
  },
});
</script>
<style lang="scss" scoped>
.treeList {
  display: flex;
  justify-content: center;
}
:deep(.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector) {
  box-shadow: 0 0 0 1px #fff !important;
}
:deep(.ant-select-arrow) {
  top: 50%;
  right: 11px;
}
:deep(.ant-select-clear) {
  top: 50%;
  right: 36px;
}
:deep(.ant-select-selector) {
  width: 10vw !important;
}
</style>