配置中心绑定指标添加模糊搜索
This commit is contained in:
zhujiyan
@@ -1,8 +1,21 @@
|
||||
<template>
|
||||
<el-dialog class="cn-operate-dialog statistical-type-binding" v-model="dialogVisible" title="绑定指标" style="width: 1040px;">
|
||||
<el-dialog
|
||||
class="cn-operate-dialog statistical-type-binding"
|
||||
v-model="dialogVisible"
|
||||
title="绑定指标"
|
||||
style="width: 1040px"
|
||||
>
|
||||
<el-scrollbar style="padding-right: 0">
|
||||
<div class="box">
|
||||
<div class="box-left">
|
||||
<el-input
|
||||
v-model="searchKey"
|
||||
size="small"
|
||||
placeholder="请输入搜索内容"
|
||||
:suffix-icon="Search"
|
||||
@input="filterTree"
|
||||
style="margin-bottom: 10px"
|
||||
></el-input>
|
||||
<el-cascader-panel
|
||||
v-model="fromDataValue"
|
||||
:props="{
|
||||
@@ -48,10 +61,20 @@
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="box-right">
|
||||
<el-input
|
||||
v-model="searchKey1"
|
||||
size="small"
|
||||
placeholder="请输入搜索内容"
|
||||
:suffix-icon="Search"
|
||||
@input="filterTree1"
|
||||
style="margin-bottom: 10px"
|
||||
></el-input>
|
||||
<el-cascader-panel
|
||||
v-model="toDataValue"
|
||||
:props="{
|
||||
multiple: true
|
||||
multiple: true,
|
||||
checkStrictly: true,
|
||||
expandTrigger: 'click'
|
||||
}"
|
||||
:options="toData"
|
||||
>
|
||||
@@ -81,7 +104,7 @@
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<PopupAdd ref="addRef" @over="init"></PopupAdd>
|
||||
<PopupAdd ref="addRef" @over="init(0)"></PopupAdd>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
@@ -89,6 +112,8 @@ import { CascaderValue, ElMessage } from 'element-plus'
|
||||
import { addStatistical, queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||
import PopupAdd from './add.vue'
|
||||
import { dicDelete } from '@/api/system-boot/dic'
|
||||
import List from '@/views/pms/comptroller/list.vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
defineOptions({
|
||||
name: 'govern/setting/statisticalType/binding'
|
||||
})
|
||||
@@ -101,57 +126,157 @@ const fromData = ref<treeData[]>([])
|
||||
const fromDataValue = ref<string[]>([])
|
||||
const toData = ref<treeData[]>([])
|
||||
const toDataValue = ref<string[]>([])
|
||||
|
||||
const init = () => {
|
||||
const init = (val: any) => {
|
||||
queryStatistical(pid.value).then(res => {
|
||||
fromData.value = []
|
||||
fromDataValue.value = []
|
||||
toData.value = []
|
||||
toDataValue.value = []
|
||||
res.data.unSelectedList.forEach((item: any) => {
|
||||
const obj = {
|
||||
id: item.dataType,
|
||||
value: item.dataType,
|
||||
pid: 0,
|
||||
label: item.dataTypeName,
|
||||
children: [] as any[]
|
||||
}
|
||||
item.eleEpdPqdVOS.forEach((item2: any) => {
|
||||
const obj2 = {
|
||||
id: item2.id,
|
||||
pid: item.dataType,
|
||||
value: item2.id,
|
||||
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
|
||||
}
|
||||
if (item2.showName) {
|
||||
obj.children.push(obj2)
|
||||
if (val == 0) {
|
||||
fromData.value = []
|
||||
fromDataValue.value = []
|
||||
toData.value = []
|
||||
toDataValue.value = []
|
||||
res.data.unSelectedList.forEach((item: any) => {
|
||||
const obj = {
|
||||
id: item.dataType,
|
||||
value: item.dataType,
|
||||
pid: 0,
|
||||
label: item.dataTypeName,
|
||||
children: [] as any[]
|
||||
}
|
||||
item.eleEpdPqdVOS.forEach((item2: any) => {
|
||||
const obj2 = {
|
||||
id: item2.id,
|
||||
pid: item.dataType,
|
||||
value: item2.id,
|
||||
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
|
||||
}
|
||||
if (item2.showName) {
|
||||
obj.children.push(obj2)
|
||||
}
|
||||
})
|
||||
fromData.value.push(obj)
|
||||
})
|
||||
fromData.value.push(obj)
|
||||
})
|
||||
res.data.selectedList.forEach((item: any) => {
|
||||
const obj = {
|
||||
id: item.dataType,
|
||||
value: item.dataType,
|
||||
pid: 0,
|
||||
label: item.dataTypeName,
|
||||
children: [] as any[]
|
||||
}
|
||||
item.eleEpdPqdVOS.forEach((item2: any) => {
|
||||
const obj2 = {
|
||||
id: item2.id,
|
||||
pid: item2.dataType,
|
||||
value: item2.id,
|
||||
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
|
||||
}
|
||||
if (item2.showName) {
|
||||
obj.children.push(obj2)
|
||||
res.data.selectedList.forEach((item: any) => {
|
||||
const obj = {
|
||||
id: item.dataType,
|
||||
value: item.dataType,
|
||||
pid: 0,
|
||||
label: item.dataTypeName,
|
||||
children: [] as any[]
|
||||
}
|
||||
item.eleEpdPqdVOS.forEach((item2: any) => {
|
||||
const obj2 = {
|
||||
id: item2.id,
|
||||
pid: item2.dataType,
|
||||
value: item2.id,
|
||||
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
|
||||
}
|
||||
if (item2.showName) {
|
||||
obj.children.push(obj2)
|
||||
}
|
||||
})
|
||||
toData.value.push(obj)
|
||||
})
|
||||
toData.value.push(obj)
|
||||
})
|
||||
} else if (val == 1) {
|
||||
fromData.value = []
|
||||
fromDataValue.value = []
|
||||
res.data.unSelectedList.forEach((item: any) => {
|
||||
const obj = {
|
||||
id: item.dataType,
|
||||
value: item.dataType,
|
||||
pid: 0,
|
||||
label: item.dataTypeName,
|
||||
children: [] as any[]
|
||||
}
|
||||
item.eleEpdPqdVOS.forEach((item2: any) => {
|
||||
const obj2 = {
|
||||
id: item2.id,
|
||||
pid: item.dataType,
|
||||
value: item2.id,
|
||||
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
|
||||
}
|
||||
if (item2.showName) {
|
||||
obj.children.push(obj2)
|
||||
}
|
||||
})
|
||||
fromData.value.push(obj)
|
||||
})
|
||||
} else if (val == 2) {
|
||||
toData.value = []
|
||||
toDataValue.value = []
|
||||
res.data.selectedList.forEach((item: any) => {
|
||||
const obj = {
|
||||
id: item.dataType,
|
||||
value: item.dataType,
|
||||
pid: 0,
|
||||
label: item.dataTypeName,
|
||||
children: [] as any[]
|
||||
}
|
||||
item.eleEpdPqdVOS.forEach((item2: any) => {
|
||||
const obj2 = {
|
||||
id: item2.id,
|
||||
pid: item2.dataType,
|
||||
value: item2.id,
|
||||
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
|
||||
}
|
||||
if (item2.showName) {
|
||||
obj.children.push(obj2)
|
||||
}
|
||||
})
|
||||
toData.value.push(obj)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const searchVisible = ref(false)
|
||||
const searchKey = ref('')
|
||||
//查左边
|
||||
const filteredTree = ref([])
|
||||
const filterTree = () => {
|
||||
filteredTree.value = filterNodes(fromData.value, searchKey.value)
|
||||
}
|
||||
//查右边
|
||||
const searchKey1 = ref('')
|
||||
const filteredTree1 = ref([])
|
||||
const filterTree1 = () => {
|
||||
filteredTree1.value = filterNodes1(toData.value, searchKey1.value)
|
||||
}
|
||||
|
||||
const filterNodes = (node: any, query: any) => {
|
||||
if (searchKey.value) {
|
||||
const result: any = []
|
||||
node.forEach((node: any) => {
|
||||
let newNode = { ...node }
|
||||
if (node.children) {
|
||||
newNode.children = filterNodes(node.children, query)
|
||||
}
|
||||
if (newNode.label.includes(query) || (newNode.children && newNode.children.length)) {
|
||||
result.push(newNode)
|
||||
}
|
||||
})
|
||||
return (fromData.value = result)
|
||||
} else {
|
||||
init(1)
|
||||
}
|
||||
}
|
||||
|
||||
const filterNodes1 = (node: any, query: any) => {
|
||||
if (searchKey1.value) {
|
||||
const result: any = []
|
||||
node.forEach((node: any) => {
|
||||
let newNode = { ...node }
|
||||
if (node.children) {
|
||||
newNode.children = filterNodes1(node.children, query)
|
||||
}
|
||||
if (newNode.label.includes(query) || (newNode.children && newNode.children.length)) {
|
||||
result.push(newNode)
|
||||
}
|
||||
})
|
||||
return (toData.value = result)
|
||||
} else {
|
||||
init(2)
|
||||
}
|
||||
}
|
||||
|
||||
// 左侧源数据选中事件
|
||||
const leftCheckChange = (e: any) => {
|
||||
if (fromDataValue.value.length === 0) {
|
||||
@@ -186,7 +311,6 @@ const leftCheckChange = (e: any) => {
|
||||
}
|
||||
// 右侧目标数据选中事件
|
||||
const rightCheckChange = () => {
|
||||
console.log(toDataValue.value)
|
||||
if (toDataValue.value.length === 0) {
|
||||
return ElMessage.warning('请先选择数据')
|
||||
}
|
||||
@@ -249,7 +373,7 @@ const newGroup = () => {
|
||||
const open = (id: string) => {
|
||||
dialogVisible.value = true
|
||||
pid.value = id
|
||||
init()
|
||||
init(0)
|
||||
}
|
||||
const submit = async () => {
|
||||
let ids = []
|
||||
|
||||
Reference in New Issue
Block a user