|
|
@@ -1,175 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-tree-select
|
|
|
- v-model="state.id"
|
|
|
- :props="treeProps"
|
|
|
- :data="state.treeData"
|
|
|
- :filterable="props.filterable"
|
|
|
- :render-after-expand="false"
|
|
|
- :clearable="props.clearable"
|
|
|
- remote
|
|
|
- node-key="id"
|
|
|
- :filter-method="filterMethod"
|
|
|
- :load="loadNode"
|
|
|
- v-loading="loading"
|
|
|
- lazy
|
|
|
- :disabled="props.disabled"
|
|
|
- :placeholder="props.placeholder"
|
|
|
- check-strictly
|
|
|
- :show-checkbox="props.showCheckbox"
|
|
|
- :default-expanded-keys="defaultExpandedKeys"
|
|
|
- check-on-click-node
|
|
|
- hightlight-current
|
|
|
- >
|
|
|
- </el-tree-select>
|
|
|
-</template>
|
|
|
-<script setup lang="tsx">
|
|
|
-import { ref, reactive, toRefs, watch, computed } from 'vue';
|
|
|
-import { hotSpotSearch, hotSpotType } from "@/api/business/order";
|
|
|
-import { treeEventClass, treeEventClassSearch } from "@/api/auxiliary/eventClass";
|
|
|
-import { removeDuplicate } from "@/utils/arrayOperation";
|
|
|
-const props = defineProps({
|
|
|
- modelValue: {
|
|
|
- type: [String, Array,null],
|
|
|
- default: () => null,
|
|
|
- },
|
|
|
- type: {
|
|
|
- type: String,
|
|
|
- default: 'hotspot',
|
|
|
- },
|
|
|
- disabled: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- placeholder: {
|
|
|
- type: String,
|
|
|
- default: '请选择',
|
|
|
- },
|
|
|
- externalArr: {
|
|
|
- // 外部传入的父级id数组 懒加载时使用
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- showCheckbox: {
|
|
|
- // 是否显示多选
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- clearable: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- checkStrictly: {
|
|
|
- // 任意一级
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- filterable: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
-})
|
|
|
-const emit = defineEmits(['choose', 'update:modelValue', 'confirm']);
|
|
|
-
|
|
|
-const inputPlaceholder = computed(() => {
|
|
|
- return props.type === 'hotspot' ? '热点名称' : '事件名称';
|
|
|
-});
|
|
|
-const treeProps = computed(() => {
|
|
|
- return {
|
|
|
- label: props.type === 'hotspot' ? 'hotSpotFullName' : 'eventFullName',
|
|
|
- children: 'children',
|
|
|
- isLeaf: 'hasChild',
|
|
|
- };
|
|
|
-});
|
|
|
-const loading = ref(false);
|
|
|
-const state = reactive<any>({
|
|
|
- id: '',
|
|
|
- name: '',
|
|
|
- treeData: [],
|
|
|
- externalArr: [],
|
|
|
- external: [],
|
|
|
- checkedKeys: [],
|
|
|
- checkNodes: [],
|
|
|
-});
|
|
|
-// 递归查找父级Id
|
|
|
-const getParentId = (val: any, arr: string[]) => {
|
|
|
- if (val.data.parentId) {
|
|
|
- arr.push(val.data.parentId);
|
|
|
- getParentId(val.parent, arr);
|
|
|
- }
|
|
|
- return removeDuplicate(arr);
|
|
|
-};
|
|
|
-// 搜索方法
|
|
|
-const defaultExpandedKeys = ref([]);
|
|
|
-const filterMethod = async (value: string)=>{
|
|
|
- const { type } = props;
|
|
|
- const method = type === 'hotspot' ? hotSpotSearch : treeEventClassSearch;
|
|
|
- if (value) {
|
|
|
- // lazyShow.value = false; //当输入框有值时关闭懒加载
|
|
|
- loading.value = true;
|
|
|
- method(value)
|
|
|
- .then((res) => {
|
|
|
- state.treeData.length = 0;
|
|
|
- state.treeData = res.result ?? [];
|
|
|
- treeRef.value!.filter(value);
|
|
|
- defaultExpandedKeys.value = ['']
|
|
|
- if (props.showCheckbox && state.checkedKeys.length) {
|
|
|
- treeRef.value.setCheckedKeys(state.checkedKeys);
|
|
|
- }
|
|
|
- if (props.modelValue) {
|
|
|
- setTimeout(() => {
|
|
|
- treeRef.value.setCurrentKey(props.modelValue);
|
|
|
- }, 100);
|
|
|
- }
|
|
|
- loading.value = false;
|
|
|
- })
|
|
|
- .catch((e) => {
|
|
|
- loading.value = false;
|
|
|
- });
|
|
|
- } else if (value == '' || value == ' ' || value == null) {
|
|
|
- loading.value = true;
|
|
|
- const method = type === 'hotspot' ? hotSpotType : treeEventClass;
|
|
|
- const { result } = await method({ id: null });
|
|
|
- state.treeData = result ?? [];
|
|
|
- /* state.id = modelValue;
|
|
|
- if (showCheckbox) {
|
|
|
- treeRef.value.setCheckedKeys(modelValue);
|
|
|
- const nodes = treeRef.value.getCheckedNodes();
|
|
|
- if (type === 'hotspot') state.name = nodes.map((item: any) => item.hotSpotFullName).join(',') ?? '';
|
|
|
- else state.name = nodes.map((item: any) => item.eventFullName).join(',') ?? '';
|
|
|
- } else {
|
|
|
- treeRef.value.setCurrentKey(modelValue);
|
|
|
- const currentNode = treeRef.value.getNode(modelValue);
|
|
|
- if (type === 'hotspot') state.name = currentNode.data.hotSpotFullName;
|
|
|
- else state.name = currentNode.data.eventFullName;
|
|
|
- }*/
|
|
|
- loading.value = false;
|
|
|
- }
|
|
|
-}
|
|
|
-// 懒加载
|
|
|
-const treeRef = ref<RefType>();
|
|
|
-const loadNode = async (node: any, resolve: any) => {
|
|
|
- if (node.isLeaf) return resolve([]);
|
|
|
- const { showCheckbox, type, modelValue } = props;
|
|
|
- try {
|
|
|
- loading.value = true;
|
|
|
- const method = type === 'hotspot' ? hotSpotType : treeEventClass;
|
|
|
- const { result } = await method({ id: node.data.id ? node.data.id : null });
|
|
|
- resolve(result);
|
|
|
- state.id = modelValue;
|
|
|
- if (showCheckbox) {
|
|
|
- treeRef.value.setCheckedKeys(modelValue);
|
|
|
- const nodes = treeRef.value.getCheckedNodes();
|
|
|
- if (type === 'hotspot') state.name = nodes.map((item: any) => item.hotSpotFullName).join(',') ?? '';
|
|
|
- else state.name = nodes.map((item: any) => item.eventFullName).join(',') ?? '';
|
|
|
- } else {
|
|
|
- treeRef.value.setCurrentKey(modelValue);
|
|
|
- const currentNode = treeRef.value.getNode(modelValue);
|
|
|
- if (type === 'hotspot') state.name = currentNode.data.hotSpotFullName;
|
|
|
- else state.name = currentNode.data.eventFullName;
|
|
|
- }
|
|
|
- loading.value = false;
|
|
|
- } catch (e) {
|
|
|
- loading.value = false;
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
zhangchong