|
|
@@ -1,5 +1,5 @@
|
|
|
<script setup>
|
|
|
-import { reactive, ref, watch } from 'vue'
|
|
|
+import { nextTick, reactive, ref, watch } from 'vue'
|
|
|
import { SearchIcon, Icon } from 'tdesign-icons-vue-next';
|
|
|
import { apiETAChart } from '@/api/etaChart'
|
|
|
import { apiSystemCommon } from '@/api/system'
|
|
|
@@ -8,15 +8,12 @@ import { useClassify } from '../hooks/useClassify'
|
|
|
const emits = defineEmits(['change', 'filter'])
|
|
|
|
|
|
const { userVal } = useClassify()
|
|
|
-function handleUserChange(value,context) {
|
|
|
- emits('filter')
|
|
|
- getClassify()
|
|
|
-}
|
|
|
|
|
|
const searchSelectKeys = {
|
|
|
value: 'ChartInfoId',
|
|
|
label: 'ChartName'
|
|
|
}
|
|
|
+const expandedclassify = ref([])
|
|
|
const searchVal = ref('')
|
|
|
const searchOpts = ref([])
|
|
|
const searchLoading = ref(false)
|
|
|
@@ -31,6 +28,7 @@ function handleSearchChart(keyword) {
|
|
|
}
|
|
|
async function handleGetSearchChartList(keyword) {
|
|
|
searchLoading.value = true
|
|
|
+ showSuggestions.value = true
|
|
|
const res = await apiETAChart.chartSearch({
|
|
|
PageSize: searchPageSize,
|
|
|
CurrentIndex: searchPage,
|
|
|
@@ -48,9 +46,22 @@ async function handleLoadMoreChart() {
|
|
|
if (finished || searchLoading.value) return
|
|
|
handleGetSearchChartList()
|
|
|
}
|
|
|
-function handleSelectChart(value, context) {
|
|
|
+function handleSelectChart(value) {
|
|
|
if (value) {
|
|
|
- emits('change', {ChartInfoId:value})
|
|
|
+ emits('change', value)
|
|
|
+ showSuggestions.value = false
|
|
|
+ const array = value.ClassifyLevels || []
|
|
|
+ array.forEach((element, index) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ expandedclassify.value.push(element)
|
|
|
+ // 如果是最后一个元素，执行nextTick
|
|
|
+ if (index === array.length - 1) {
|
|
|
+ nextTick(() => {
|
|
|
+ classifyActived.value = [value.UniqueCode];
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, index*500);
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -116,46 +127,56 @@ function handleClassifyActiveChange({ node }) {
|
|
|
}
|
|
|
|
|
|
|
|
|
+
|
|
|
+const showSuggestions = ref(false)
|
|
|
+
|
|
|
+
|
|
|
+const handleBlur = (text) => {
|
|
|
+ if(!text){
|
|
|
+ clearMenu()
|
|
|
+ }
|
|
|
+}
|
|
|
+const clearMenu = () => {
|
|
|
+ searchOpts.value = []
|
|
|
+ showSuggestions.value = false
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="bg-white classify-wrap">
|
|
|
- <div class="select-wrap">
|
|
|
- <select-chart-creator v-model="userVal" @change="handleUserChange"/>
|
|
|
- </div>
|
|
|
- <t-select
|
|
|
- v-model="searchVal"
|
|
|
- placeholder="请输入图表名称"
|
|
|
- clearable
|
|
|
- filterable
|
|
|
- :keys="searchSelectKeys"
|
|
|
- :loading="searchLoading"
|
|
|
- @search="handleSearchChart"
|
|
|
- @change="handleSelectChart"
|
|
|
- :popup-props="{ 'on-scroll-to-bottom': handleLoadMoreChart }"
|
|
|
+ <t-popup
|
|
|
+ placement="bottom-left"
|
|
|
+ trigger="context-menu"
|
|
|
+ :visible="showSuggestions"
|
|
|
+ @on-scroll-to-bottom="handleLoadMoreChart"
|
|
|
>
|
|
|
- <template #prefixIcon>
|
|
|
- <search-icon />
|
|
|
- </template>
|
|
|
-
|
|
|
- <template #valueDisplay="{ value,label }">
|
|
|
- <div style="max-width:180px" class="t-input__inner" v-html="label" v-if="value"></div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <t-option
|
|
|
- v-for="item in searchOpts"
|
|
|
- :key="item.ChartInfoId"
|
|
|
- :value="item.ChartInfoId"
|
|
|
- :label="item.ChartName"
|
|
|
- :title="null"
|
|
|
+ <t-input
|
|
|
+ v-model="searchVal"
|
|
|
+ placeholder="请输入图表名称"
|
|
|
+ @change="handleSearchChart"
|
|
|
+ @blur="handleBlur"
|
|
|
>
|
|
|
+ </t-input>
|
|
|
+ <template #content>
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in searchOpts"
|
|
|
+ :key="index"
|
|
|
+ class="suggestions-item"
|
|
|
+ @click="handleSelectChart(item)"
|
|
|
+ >
|
|
|
<span v-html="item.ChartName"></span>
|
|
|
- </t-option>
|
|
|
- </t-select>
|
|
|
+ </li>
|
|
|
+ </template>
|
|
|
+ </t-popup>
|
|
|
+
|
|
|
+
|
|
|
<div class="classify-list-box">
|
|
|
<t-tree
|
|
|
:actived="classifyActived"
|
|
|
:data="classifyList"
|
|
|
+ v-model:expanded="expandedclassify"
|
|
|
activable
|
|
|
transition
|
|
|
lazy
|
|
|
@@ -185,7 +206,6 @@ function handleClassifyActiveChange({ node }) {
|
|
|
width: 300px;
|
|
|
flex-shrink: 0;
|
|
|
padding: 20px;
|
|
|
-
|
|
|
.select-wrap {
|
|
|
display: flex;
|
|
|
gap: 0 10px;
|
|
|
@@ -197,4 +217,16 @@ function handleClassifyActiveChange({ node }) {
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
}
|
|
|
+.suggestions-item {
|
|
|
+ width: 244px;
|
|
|
+ cursor:pointer;
|
|
|
+ margin: 4px;
|
|
|
+ padding: 5px 5px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ &:hover {
|
|
|
+ background-color: #ECF2FE; // 背景颜色变为浅灰色
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
