a-tree-select使用

gistfile1.txt

<template>
  <div>
    <a-form :model="formState" ref="formRef">
      <a-row class="row2">
        <a-col :span="24">
          <div style="display: flex" v-if="
                                        route.path.includes('/manage/overallQuery')"
          >
            <a-form-item label="人员类型">
              <a-select
                style="width: 120px;"
                @change="initQueryTypeTreeData"
                v-model:value="formState.userType" placeholder="请选择">
                <a-select-option v-for="opt in state.userTypeOpts" :key="opt.code">
                  {{ opt.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="查询类别">
              <a-tree-select
                :maxTagCount="6"
                @deselect="deSelectQueryDetailTreeData"
                @select="initQueryDetailTreeData"
                style="width: 270px"
                v-model:value="formState.queryTypes"
                :tree-data="state.queryTypeTreeData"
                :field-names="state.queryTypeFiledNames"
                treeCheckable
                @clear="onClearTypeTree"
                :treeCheckStrictly="true"
                allow-clear
                :placeholder="'请选择'"
              />
            </a-form-item>
            <a-form-item label="查询细项">
              <a-tree-select
                v-model:value="formState.attributeList"
                show-search
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请输入关键字搜索"
                :field-names="state.queryDetailFieldNames"
                tree-default-expand-all
                tree-node-filter-prop="attributeName"
                multiple
                :maxTagCount="6"
                style="width: 270px"
                @change="handleDetailChange"
                @dropdownVisibleChange="onQueryDetailChange"
                :tree-data="state.queryDetailTreeData"
                :treeCheckStrictly="true"
                allow-clear
              />
            </a-form-item>
            <a-form-item label="查询条件">
              <a-input
                style="width: 360px"
                :disabled="formState.attributeList.length >= 2"
                allowClear
                v-model:value="formState.keyword"
                placeholder="请输入"
                class="form-width"
              />
            </a-form-item>
            <a-form-item label="是否展示总表">
              <a-select
                style="width: 80px;"
                v-model:value="formState.showMain" placeholder="请选择">
                <a-select-option v-for="opt in state.displayAllOpts" :key="opt.code">
                  {{ opt.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <!--          <a-row>-->
      <!--            <a-col :span="24" >-->
      <!--              <a-space style="float: right">-->
      <!--                <a-button style="margin-right: 16px;" type="primary" @click="onQueryClick">查询</a-button>-->
      <!--                <a-button @click="onResetClick">重置</a-button>-->
      <!--              </a-space>-->
      <!--            </a-col>-->
      <!--          </a-row>-->
    </a-form>
  </div>
</template>

<script setup>
import {onBeforeUnmount, onMounted, reactive} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import mitt from '@/utils/mitt'
import {isResponseSuccess} from "@/utils/bean";
import {getDicitemList} from "@/api/dictionary";
import {listQueryDetails, listQueryTypes} from "@/api/overallQuery";
import {message} from "ant-design-vue";

const route = useRoute()
const router = useRouter()

const formState = reactive({
  userType: 'MJ', // MJ：代表民警(default)  FJ：代表辅警
  queryTypes: [], // 查询类别
  attributeList: [], // 细项查询
  keyword: '', // 查询条件
  showMain: 0, // 是否展示总表
  pageNum: 1,
  pageSize: 10,
})


const state = reactive({
  fieldNames: {
    value: 'officeCode',
    label: 'officeName',
    children: 'subs'
  },
  queryTypeFiledNames: {
    value: 'categoryCode',
    label: 'categoryName',
  },
  queryDetailFieldNames: {
    value: 'attributeCode',
    label: 'attributeName',
  },
  orgTreeData: [],
  queryTypeCheckAll: false,
  queryTypeTreeData: [], // 查询类别
  queryDetailTreeData: [], // 查询细项
  searchDetailTreeData: [], // Temp Data
  userTypeOpts: [], // 人员类型
  displayAllOpts: [
    {
      name: '否',
      code: 0
    },
    {
      name: '是',
      code: 1
    }
  ], // 是否展示总表
})

onMounted(() => {
  init();
  mitt.on('emitOnQueryClick', () => {
    onQueryClick();
  })
  mitt.on('emitOnResetForm', () => {
    onResetClick();
  })
})
onBeforeUnmount(() => {
  mitt.off('emitOnQueryClick');
  mitt.off('emitOnResetForm');
})

//
const init = () => {
  initUserType();

}
// 人员类型
const initUserType = async () => {
  const res = await getDicitemList({parentCode: 'user_type'});
  if (isResponseSuccess(res)) {
    state.userTypeOpts = res.data.data.map(item => {
      return {
        name: item.itemName,
        code: item.code
      }
    })
    formState.userType = 'MJ';
    await initQueryTypeTreeData();
  }
}

// 查询类别
const initQueryTypeTreeData = async () => {
  const res = await listQueryTypes({categoryType: formState.userType});
  if (isResponseSuccess(res)) {
    state.queryTypeTreeData = res.data.data;
    state.queryTypeTreeData.unshift({
      categoryName: '全选',
      categoryCode: 'selectAll',
    })
    console.log('output-> state.queryTypeTreeData::: ', state.queryTypeTreeData)
  }
}
const onClearTypeTree = async () => {
  formState.queryTypes = []
  state.queryTypeCheckAll = false;
  await loadDetailTreeData();
}
const deSelectQueryDetailTreeData = async (value, option) => {
  console.log('output-> 取消选中',)
  console.log('output-> value', value)
  console.log('output-> option', option)
  if (formState.queryTypes.some(item => item.value === 'selectAll') && option.value === 'selectAll') {
    formState.queryTypes = []
    state.queryTypeCheckAll = false;
  }
  if (option.categoryName === '全选') {
    state.queryTypeCheckAll = true;
    formState.queryTypes = []
  } else {
    state.queryTypeCheckAll = false;
    formState.queryTypes.filter(type => type.categoryCode !== option.categoryCode);
  }
  await loadDetailTreeData();
}
const initQueryDetailTreeData = async (value, option) => {
  console.log('output-> value::: ', value)
  console.log('output-> option::: ', option)
  console.log('output-> formState.queryTypes::: ', formState.queryTypes)
  console.log('output-> state.queryTypeTreeData::: ', state.queryTypeTreeData)
  if (formState.queryTypes.every(item => item.value === 'selectAll')) {
    formState.queryTypes = []
    formState.queryTypes = state.queryTypeTreeData.map(item => {
      return {
        label: item.categoryName,
        value: item.categoryCode,
      }
    })
  }
  console.log('output-> formState.queryTypes::: ', formState.queryTypes)
  await loadDetailTreeData();
}

const loadDetailTreeData = async () => {
  console.log('output-> 加载细项信息',)
  let payload = {
    categoryCodes: formState.queryTypes.map(item => item.value).filter(val => val !== 'selectAll').join(',')
  }
  const res = await listQueryDetails(payload)
  if (isResponseSuccess(res)) {
    const resData = res.data.data;
    console.log('output-> resData::: 【查询细项】', resData)
    state.queryDetailTreeData = resData;
    state.searchDetailTreeData = resData;
  }
}
// 查询细项
const onSearchDetailTree = (value) => {
  console.log('output-> value::: ', value)
  state.queryDetailTreeData = state.searchDetailTreeData.filter(item => item.attributeName.includes(value))
  console.log('output-> state.searchDetailTreeData:::: ', state.queryDetailTreeData)
}


const handleDetailChange = () => {
  if (formState.attributeList.length >= 2) {
    formState.keyword = ''
  }
}
const onQueryDetailChange = (open) => {
  if (!formState.queryTypes.length) {
    if (open) {
      message.warn('请选择查询类别')
    }
  }
}

const onQueryClick = () => {
  console.log('output-> formState::: ', formState)
  if (formState.keyword) {
    if (!formState.queryTypes.length) {
      message.warn('当有查询条件时，查询细项能且仅能选中一个')
      return;
    }
    if (!(formState.attributeList.length === 1)) {
      message.warn('查询细项能且仅能选中一个！')
      return;
    }
  }
  mitt.emit('emitResetForm')
}
const onResetClick = () => {
  resetForm()
  mitt.emit('emitResetForm')
}

const resetForm = () => {
  formState.userType = 'MJ'
  formState.queryTypes = []
  formState.attributeList = []
  formState.keyword = ''
  formState.showMain = 0
}

defineExpose({formState})
</script>

<style lang="scss" scoped>
:deep(.ant-form-item) {
  margin-right: 10px;
}
</style>
<!--                        <a-form-item label="请假时间">-->
<!--                            <a-range-picker-->
<!--                              v-model:value="formState.rangeDate"-->
<!--                              allowClear-->
<!--                              style="width: auto"-->
<!--                              :getCalendarContainer="(triggerNode) => triggerNode.parentNode"-->
<!--                              :disabled-date="disabledDate"-->
<!--                              :show-time="{-->
<!--												        hideDisabledOptions: false,-->
<!--												        defaultValue: [-->
<!--												        	moment('00:00:00', 'HH:mm:ss'),-->
<!--												        	moment('11:59:59', 'HH:mm:ss')-->
<!--												        ]-->
<!--											        }"-->
<!--                              format="YYYY-MM-DD HH:mm:ss"-->
<!--                            />-->
<!--                        </a-form-item>-->