forked from github/dataease
Merge pull request #10518 from dataease/pr@dev-v2_search_tree
Pr@dev v2 search tree
This commit is contained in:
dataeaseShu
GitHub
commit
b70a2b519d
@ -293,3 +293,9 @@ export const listByDsIds = async (data): Promise<IResponse> => {
|
||||
return res?.data
|
||||
})
|
||||
}
|
||||
|
||||
export const getFieldTree = async (data): Promise<IResponse> => {
|
||||
return request.post({ url: 'datasetData/getFieldTree', data }).then(res => {
|
||||
return res?.data
|
||||
})
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@ import DynamicTime from '@/custom-component/v-query/DynamicTime.vue'
|
||||
import DynamicTimeRange from '@/custom-component/v-query/DynamicTimeRange.vue'
|
||||
import Time from '@/custom-component/v-query/Time.vue'
|
||||
import Select from '@/custom-component/v-query/Select.vue'
|
||||
import Tree from '@/custom-component/v-query/Tree.vue'
|
||||
const { t } = useI18n()
|
||||
|
||||
const visiblePopover = ref(false)
|
||||
@ -29,6 +30,8 @@ const filterTypeCom = computed(() => {
|
||||
? DynamicTime
|
||||
: DynamicTimeRange
|
||||
: Time
|
||||
: '9' === displayType
|
||||
? Tree
|
||||
: Select
|
||||
})
|
||||
|
||||
@ -191,10 +194,12 @@ const multipleChange = (val: boolean, isMultipleChange = false) => {
|
||||
: []
|
||||
: defaultValue
|
||||
}
|
||||
|
||||
if (curComponent.value.field.deType === 1) {
|
||||
curComponent.value.multiple = val
|
||||
return
|
||||
}
|
||||
|
||||
curComponent.value.multiple = val
|
||||
}
|
||||
|
||||
|
||||
@ -23,6 +23,7 @@ import { ElMessage, ElSelect } from 'element-plus-secondary'
|
||||
import type { DatasetDetail } from '@/api/dataset'
|
||||
import { getDsDetailsWithPerm, getSqlParams, listFieldsWithPermissions } from '@/api/dataset'
|
||||
import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
|
||||
import TreeFieldDialog from '@/custom-component/v-query/TreeFieldDialog.vue'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { getDatasetTree } from '@/api/dataset'
|
||||
import { Tree } from '@/views/visualized/data/dataset/form/CreatDsGroup.vue'
|
||||
@ -176,6 +177,23 @@ const showTypeError = computed(() => {
|
||||
return displayTypeField !== field?.deType
|
||||
})
|
||||
})
|
||||
|
||||
const showDatasetError = computed(() => {
|
||||
if (!curComponent.value) return false
|
||||
if (!curComponent.value.checkedFields?.length) return false
|
||||
if (!fields.value?.length) return false
|
||||
let displayField = null
|
||||
return curComponent.value.checkedFields.some(id => {
|
||||
const arr = fields.value.find(itx => itx.componentId === id)
|
||||
const field = arr.id
|
||||
if (!field) return false
|
||||
if (displayField === null) {
|
||||
displayField = field
|
||||
return false
|
||||
}
|
||||
return displayField !== field
|
||||
})
|
||||
})
|
||||
const typeList = [
|
||||
{
|
||||
label: '重命名',
|
||||
@ -234,10 +252,12 @@ const setType = () => {
|
||||
|
||||
if (field?.deType !== undefined) {
|
||||
let displayType = curComponent.value.displayType
|
||||
if (curComponent.value.displayType === '9') {
|
||||
return
|
||||
}
|
||||
if (!(field?.deType === 1 && curComponent.value.displayType === '7')) {
|
||||
curComponent.value.displayType = `${[3, 4].includes(field?.deType) ? 2 : field?.deType}`
|
||||
}
|
||||
|
||||
if (
|
||||
displayType !== curComponent.value.displayType &&
|
||||
!([3, 4].includes(+displayType) && +curComponent.value.displayType === 2)
|
||||
@ -299,10 +319,10 @@ const typeTimeMap = {
|
||||
|
||||
const timeParameterList = computed(() => {
|
||||
if (!isTimeParameter.value) return timeList
|
||||
const [_, y] = curComponent.value.parameters?.filter(
|
||||
const [year, y] = curComponent.value.parameters?.filter(
|
||||
ele => ele.deType === 1 && !!ele.variableName
|
||||
)[0].type
|
||||
return timeList.filter(ele => ele.value === typeTimeMap[y])
|
||||
return timeList.filter(ele => ele.value === (typeTimeMap[y] || typeTimeMap[year]))
|
||||
})
|
||||
|
||||
const cancelClick = () => {
|
||||
@ -344,7 +364,26 @@ const handleValueSourceChange = () => {
|
||||
}
|
||||
|
||||
const multipleChange = (val: boolean, isMultipleChange = false) => {
|
||||
defaultConfigurationRef.value?.multipleChange(val, isMultipleChange)
|
||||
if (isMultipleChange) {
|
||||
curComponent.value.defaultValue = val ? [] : undefined
|
||||
}
|
||||
const { defaultValue } = curComponent.value
|
||||
if (Array.isArray(defaultValue)) {
|
||||
curComponent.value.selectValue = val ? defaultValue : undefined
|
||||
} else {
|
||||
curComponent.value.selectValue = val
|
||||
? defaultValue !== undefined
|
||||
? [defaultValue]
|
||||
: []
|
||||
: defaultValue
|
||||
}
|
||||
|
||||
if (curComponent.value.field.deType === 1) {
|
||||
curComponent.value.multiple = val
|
||||
return
|
||||
}
|
||||
|
||||
curComponent.value.multiple = val
|
||||
}
|
||||
|
||||
const isInRange = (ele, startWindowTime, timeStamp) => {
|
||||
@ -461,6 +500,8 @@ const openCascadeDialog = () => {
|
||||
cascadeDialog.value.init(cascadeMap)
|
||||
}
|
||||
|
||||
const indexCascade = ' 一二三四五'
|
||||
|
||||
const validateConditionType = ({
|
||||
defaultConditionValueF,
|
||||
defaultConditionValueS,
|
||||
@ -612,12 +653,16 @@ const validate = () => {
|
||||
return false
|
||||
}
|
||||
|
||||
if (ele.optionValueSource === 2 && !ele.valueSource?.filter(ele => !!ele).length) {
|
||||
if (
|
||||
ele.displayType !== '9' &&
|
||||
ele.optionValueSource === 2 &&
|
||||
!ele.valueSource?.filter(ele => !!ele).length
|
||||
) {
|
||||
ElMessage.error('手工输入-选项值不能为空')
|
||||
return true
|
||||
}
|
||||
|
||||
if (ele.optionValueSource === 1 && !ele.field.id) {
|
||||
if (ele.displayType !== '9' && ele.optionValueSource === 1 && !ele.field.id) {
|
||||
ElMessage.error('请选择数据集的选项值字段')
|
||||
return true
|
||||
}
|
||||
@ -829,7 +874,8 @@ const parameterCompletion = () => {
|
||||
timeNumRange: 0,
|
||||
relativeToCurrentTypeRange: 'year',
|
||||
aroundRange: 'f'
|
||||
}
|
||||
},
|
||||
treeFieldList: []
|
||||
}
|
||||
Object.entries(attributes).forEach(([key, val]) => {
|
||||
!curComponent.value[key] && (curComponent.value[key] = val)
|
||||
@ -888,6 +934,18 @@ const getOptions = (id, component) => {
|
||||
})
|
||||
}
|
||||
|
||||
const treeDialog = ref()
|
||||
const startTreeDesign = () => {
|
||||
treeDialog.value.init(
|
||||
curComponent.value.dataset?.fields.filter(
|
||||
ele => ele.deType === +curComponent.value.field.deType
|
||||
),
|
||||
curComponent.value.treeFieldList
|
||||
)
|
||||
}
|
||||
const saveTree = arr => {
|
||||
curComponent.value.treeFieldList = arr
|
||||
}
|
||||
const showError = computed(() => {
|
||||
if (!curComponent.value) return false
|
||||
const { optionValueSource, checkedFieldsMap, checkedFields, field, valueSource, displayType } =
|
||||
@ -899,6 +957,20 @@ const showError = computed(() => {
|
||||
if ([1, 7, 8].includes(+displayType)) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (displayType === '9') {
|
||||
let displayField = null
|
||||
return checkedFields.some(id => {
|
||||
const arr = fields.value.find(itx => itx.componentId === id)
|
||||
const field = arr.id
|
||||
if (!field) return false
|
||||
if (displayField === null) {
|
||||
displayField = field
|
||||
return false
|
||||
}
|
||||
return displayField !== field
|
||||
})
|
||||
}
|
||||
return (optionValueSource === 1 && !field.id) || (optionValueSource === 2 && !valueSource.length)
|
||||
})
|
||||
const handleDialogClick = () => {
|
||||
@ -1313,7 +1385,10 @@ defineExpose({
|
||||
label="必填项"
|
||||
/>
|
||||
</div>
|
||||
<div v-show="showConfiguration && !showTypeError" class="configuration-list">
|
||||
<div
|
||||
v-show="showConfiguration && !showTypeError && !showDatasetError"
|
||||
class="configuration-list"
|
||||
>
|
||||
<div class="list-item">
|
||||
<div class="label">展示类型</div>
|
||||
<div class="value">
|
||||
@ -1323,15 +1398,20 @@ defineExpose({
|
||||
v-model="curComponent.displayType"
|
||||
>
|
||||
<el-option
|
||||
:disabled="!['0', '8'].includes(curComponent.displayType)"
|
||||
:disabled="!['0', '8', '9'].includes(curComponent.displayType)"
|
||||
label="文本下拉"
|
||||
value="0"
|
||||
/>
|
||||
<el-option
|
||||
:disabled="!['0', '8'].includes(curComponent.displayType)"
|
||||
:disabled="!['0', '8', '9'].includes(curComponent.displayType)"
|
||||
label="文本搜索"
|
||||
value="8"
|
||||
/>
|
||||
<el-option
|
||||
:disabled="!['0', '8', '9'].includes(curComponent.displayType)"
|
||||
label="下拉树"
|
||||
value="9"
|
||||
/>
|
||||
<el-option
|
||||
v-if="curComponent.displayType === '2'"
|
||||
:disabled="curComponent.displayType !== '2'"
|
||||
@ -1357,6 +1437,42 @@ defineExpose({
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item" v-if="curComponent.displayType === '9'">
|
||||
<div class="label" style="width: 135px; height: 26px; line-height: 26px">
|
||||
下拉树结构设计
|
||||
<el-button v-if="!!curComponent.treeFieldList.length" text @click="startTreeDesign">
|
||||
<template #icon>
|
||||
<icon name="icon_edit_outlined"></icon>
|
||||
</template>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="search-tree">
|
||||
<template v-if="!!curComponent.treeFieldList.length">
|
||||
<div
|
||||
v-for="(ele, index) in curComponent.treeFieldList"
|
||||
:key="ele.id"
|
||||
class="tree-field"
|
||||
>
|
||||
<span class="level-index">层级{{ indexCascade[index + 1] }}</span>
|
||||
<span class="field-type"
|
||||
><el-icon>
|
||||
<Icon
|
||||
:name="`field_${fieldType[ele.deType]}`"
|
||||
:className="`field-icon-${fieldType[ele.deType]}`"
|
||||
></Icon> </el-icon
|
||||
></span>
|
||||
<span class="field-tree_name">{{ ele.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-button @click="startTreeDesign" v-else text>
|
||||
<template #icon>
|
||||
<Icon name="icon_add_outlined"></Icon>
|
||||
</template>
|
||||
点击进行树结构设计
|
||||
</el-button>
|
||||
</div>
|
||||
<TreeFieldDialog ref="treeDialog" @save-tree="saveTree"></TreeFieldDialog>
|
||||
</div>
|
||||
<div class="list-item" v-if="['1', '7'].includes(curComponent.displayType)">
|
||||
<div class="label">时间粒度</div>
|
||||
<div class="value">
|
||||
@ -1391,7 +1507,7 @@ defineExpose({
|
||||
</div>
|
||||
<div
|
||||
class="list-item top-item"
|
||||
v-if="!['1', '7', '8'].includes(curComponent.displayType)"
|
||||
v-if="!['1', '7', '8', '9'].includes(curComponent.displayType)"
|
||||
>
|
||||
<div class="label">选项值来源</div>
|
||||
<div class="value">
|
||||
@ -1680,6 +1796,9 @@ defineExpose({
|
||||
<div v-if="showTypeError && showConfiguration" class="empty">
|
||||
<empty-background description="所选字段类型不一致，无法进行查询配置" img-type="error" />
|
||||
</div>
|
||||
<div v-else-if="showDatasetError && showConfiguration" class="empty">
|
||||
<empty-background description="图表所使用的数据集不同, 无法展示配置项" img-type="error" />
|
||||
</div>
|
||||
<div v-else-if="!showConfiguration" class="empty">
|
||||
<empty-background description="请先勾选需要联动的图表及字段" img-type="noneWhite" />
|
||||
</div>
|
||||
@ -1874,6 +1993,7 @@ defineExpose({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.ed-checkbox__label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -1970,6 +2090,41 @@ defineExpose({
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10.5px;
|
||||
flex-wrap: wrap;
|
||||
.search-tree {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
|
||||
|
||||
.ed-button {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.tree-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
.level-index {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.field-type {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.field-tree_name {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-content {
|
||||
width: 100%;
|
||||
|
||||
@ -3,6 +3,7 @@ import { provide, PropType } from 'vue'
|
||||
import Select from './Select.vue'
|
||||
import Time from './Time.vue'
|
||||
import TextSearch from './TextSearch.vue'
|
||||
import Tree from './Tree.vue'
|
||||
|
||||
interface SelectConfig {
|
||||
selectValue: any
|
||||
@ -55,7 +56,7 @@ const filterTypeCom = (displayType: string) => {
|
||||
if (displayType === '8') {
|
||||
return TextSearch
|
||||
}
|
||||
return ['1', '7'].includes(displayType) ? Time : Select
|
||||
return ['1', '7'].includes(displayType) ? Time : displayType === '9' ? Tree : Select
|
||||
}
|
||||
provide('$custom-style-filter', props.customStyle)
|
||||
</script>
|
||||
|
||||
242
core/core-frontend/src/custom-component/v-query/Tree.vue
Normal file
242
core/core-frontend/src/custom-component/v-query/Tree.vue
Normal file
@ -0,0 +1,242 @@
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
ref,
|
||||
PropType,
|
||||
toRefs,
|
||||
nextTick,
|
||||
watch,
|
||||
onMounted,
|
||||
computed,
|
||||
inject,
|
||||
shallowRef
|
||||
} from 'vue'
|
||||
import { cloneDeep, debounce } from 'lodash-es'
|
||||
import { getFieldTree } from '@/api/dataset'
|
||||
interface SelectConfig {
|
||||
selectValue: any
|
||||
defaultMapValue: any
|
||||
defaultValue: any
|
||||
checkedFieldsMap: object
|
||||
displayType: string
|
||||
id: string
|
||||
checkedFields: string[]
|
||||
treeFieldList: Array<any>
|
||||
dataset: {
|
||||
id: string
|
||||
}
|
||||
field: {
|
||||
id: string
|
||||
}
|
||||
defaultValueCheck: boolean
|
||||
multiple: boolean
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object as PropType<SelectConfig>,
|
||||
default: () => {
|
||||
return {
|
||||
selectValue: '',
|
||||
defaultValue: '',
|
||||
displayType: '',
|
||||
defaultValueCheck: false,
|
||||
multiple: false,
|
||||
checkedFieldsMap: {},
|
||||
treeFieldList: []
|
||||
}
|
||||
}
|
||||
},
|
||||
isConfig: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
const { config } = toRefs(props)
|
||||
|
||||
const multiple = ref(false)
|
||||
|
||||
const handleValueChange = () => {
|
||||
const value = Array.isArray(treeValue.value) ? [...treeValue.value] : treeValue.value
|
||||
if (!props.isConfig) {
|
||||
config.value.selectValue = Array.isArray(treeValue.value)
|
||||
? [...treeValue.value]
|
||||
: treeValue.value
|
||||
return
|
||||
}
|
||||
config.value.defaultValue = value
|
||||
}
|
||||
|
||||
watch(
|
||||
() => config.value.defaultValue,
|
||||
val => {
|
||||
if (config.value.multiple) {
|
||||
treeValue.value = Array.isArray(val) ? [...val] : val
|
||||
}
|
||||
nextTick(() => {
|
||||
multiple.value = config.value.multiple
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => config.value.treeFieldList,
|
||||
() => {
|
||||
treeValue.value = config.value.multiple ? [] : undefined
|
||||
showOrHide.value = false
|
||||
getTreeOption()
|
||||
}
|
||||
)
|
||||
|
||||
const init = () => {
|
||||
const { defaultValueCheck, multiple: plus, defaultValue } = config.value
|
||||
if (defaultValueCheck) {
|
||||
config.value.selectValue = Array.isArray(defaultValue)
|
||||
? cloneDeep([...defaultValue])
|
||||
: defaultValue
|
||||
treeValue.value = Array.isArray(defaultValue) ? cloneDeep([...defaultValue]) : defaultValue
|
||||
} else {
|
||||
config.value.selectValue = plus ? [] : undefined
|
||||
treeValue.value = plus ? [] : undefined
|
||||
}
|
||||
nextTick(() => {
|
||||
multiple.value = config.value.multiple
|
||||
})
|
||||
getTreeOption()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => config.value.id,
|
||||
() => {
|
||||
init()
|
||||
}
|
||||
)
|
||||
const showOrHide = ref(true)
|
||||
const queryConditionWidth = inject('com-width', Function, true)
|
||||
watch(
|
||||
() => config.value.id,
|
||||
() => {
|
||||
getTreeOption()
|
||||
}
|
||||
)
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 0)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => config.value.selectValue,
|
||||
val => {
|
||||
if (props.isConfig) return
|
||||
if (config.value.multiple) {
|
||||
treeValue.value = Array.isArray(val) ? [...val] : val
|
||||
}
|
||||
nextTick(() => {
|
||||
multiple.value = config.value.multiple
|
||||
if (!config.value.multiple) {
|
||||
treeValue.value = Array.isArray(config.value.selectValue)
|
||||
? [...config.value.selectValue]
|
||||
: config.value.selectValue
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => config.value.multiple,
|
||||
val => {
|
||||
if (!props.isConfig) return
|
||||
if (val) {
|
||||
treeValue.value = []
|
||||
}
|
||||
nextTick(() => {
|
||||
multiple.value = val
|
||||
if (!val) {
|
||||
nextTick(() => {
|
||||
treeValue.value = undefined
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
let cacheId = ''
|
||||
let treeOptionList = shallowRef([])
|
||||
|
||||
const dfs = arr => {
|
||||
return (arr || []).map(ele => {
|
||||
let children = []
|
||||
if (!!ele.children?.length) {
|
||||
children = dfs(ele.children)
|
||||
}
|
||||
return { ...ele, value: ele.id, label: ele.text, children }
|
||||
})
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const getTreeOption = debounce(() => {
|
||||
loading.value = true
|
||||
getFieldTree(props.config.treeFieldList.map(ele => ele.id))
|
||||
.then(res => {
|
||||
treeOptionList.value = dfs(res)
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}, 300)
|
||||
watch(
|
||||
() => props.config.treeFieldList,
|
||||
val => {
|
||||
if (!props.isConfig) return
|
||||
const ids = val.map(ele => ele.id).join('')
|
||||
if (cacheId !== val.map(ele => ele.id).join('')) {
|
||||
cacheId = ids
|
||||
getTreeOption()
|
||||
}
|
||||
}
|
||||
)
|
||||
const fakeValue = ''
|
||||
const treeValue = ref()
|
||||
const selectStyle = computed(() => {
|
||||
return props.isConfig ? {} : { width: queryConditionWidth() + 'px' }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-tree-select
|
||||
v-model="treeValue"
|
||||
:data="treeOptionList"
|
||||
v-if="multiple && !loading"
|
||||
clearable
|
||||
@change="handleValueChange"
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
key="multipleTree"
|
||||
filterable
|
||||
:style="selectStyle"
|
||||
multiple
|
||||
/>
|
||||
<el-tree-select
|
||||
v-model="treeValue"
|
||||
@change="handleValueChange"
|
||||
:data="treeOptionList"
|
||||
check-strictly
|
||||
clearable
|
||||
:render-after-expand="false"
|
||||
v-else-if="!loading"
|
||||
key="singleTree"
|
||||
:style="selectStyle"
|
||||
filterable
|
||||
/>
|
||||
<el-tree-select
|
||||
v-model="fakeValue"
|
||||
v-loading="loading"
|
||||
:data="[]"
|
||||
:render-after-expand="false"
|
||||
v-else
|
||||
key="fakeTree"
|
||||
:style="selectStyle"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -0,0 +1,142 @@
|
||||
<script lang="ts" setup>
|
||||
import { guid } from '@/views/visualized/data/dataset/form/util.js'
|
||||
import { ElMessage } from 'element-plus-secondary'
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const treeList = ref([])
|
||||
const datasetMap = shallowRef([])
|
||||
const emits = defineEmits(['saveTree'])
|
||||
|
||||
const addCascadeItem = () => {
|
||||
treeList.value.push({
|
||||
field: null,
|
||||
id: guid()
|
||||
})
|
||||
}
|
||||
const handleBeforeClose = () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
const init = (arr, treeArr) => {
|
||||
datasetMap.value = cloneDeep(arr)
|
||||
treeList.value = cloneDeep(treeArr).map(ele => ({ field: ele, id: ele.id }))
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const cancelClick = () => {
|
||||
handleBeforeClose()
|
||||
}
|
||||
const setCascadeArrBack = () => {
|
||||
let isError = false
|
||||
const arr = cloneDeep(treeList.value).map(item => {
|
||||
if (!item.field) {
|
||||
isError = true
|
||||
}
|
||||
return item.field
|
||||
})
|
||||
|
||||
return {
|
||||
arr,
|
||||
isError
|
||||
}
|
||||
}
|
||||
const confirmClick = () => {
|
||||
const { isError, arr } = setCascadeArrBack()
|
||||
if (isError) {
|
||||
ElMessage.error('层级字段不能为空,请选择字段!')
|
||||
return
|
||||
}
|
||||
emits('saveTree', arr)
|
||||
handleBeforeClose()
|
||||
}
|
||||
const indexCascade = ' 一二三四五'
|
||||
|
||||
const deleteCascade = idx => {
|
||||
treeList.value.splice(idx, 1)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
width="600"
|
||||
custom-class="tree-field_dialog"
|
||||
:before-close="handleBeforeClose"
|
||||
@mousedown.stop
|
||||
@mousedup.stop
|
||||
title="下拉树结构设计"
|
||||
>
|
||||
<div class="cascade-content">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<el-button :disabled="treeList.length === 5" text @click="addCascadeItem">
|
||||
<template #icon>
|
||||
<Icon name="icon_add_outlined"></Icon>
|
||||
</template>
|
||||
添加层级
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="cascade-item">
|
||||
<div class="label">层级</div>
|
||||
<div class="item-name">下拉树查询字段</div>
|
||||
</div>
|
||||
<div class="cascade-item" v-for="(ele, idx) in treeList" :key="ele.id">
|
||||
<div class="label">层级{{ indexCascade[idx + 1] }}</div>
|
||||
<div class="item-name">
|
||||
<el-select value-key="id" v-model="ele.field" style="width: 300px">
|
||||
<el-option v-for="item in datasetMap" :key="item.id" :label="item.name" :value="item" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-button v-show="idx !== 0" @click="deleteCascade(idx)" class="cascade-delete" text>
|
||||
<template #icon>
|
||||
<Icon name="icon_delete-trash_outlined"></Icon>
|
||||
</template>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button secondary @click="cancelClick">取消</el-button>
|
||||
<el-button type="primary" @click="confirmClick"> 确定 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.tree-field_dialog {
|
||||
.cascade-content {
|
||||
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
|
||||
border: 1px solid #e4e7ed;
|
||||
padding: 24px;
|
||||
padding-top: 8px;
|
||||
margin-top: 8px;
|
||||
|
||||
.cascade-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
.label {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.cascade-delete-block,
|
||||
.cascade-delete {
|
||||
width: 40px;
|
||||
font-size: 20px;
|
||||
color: #646a73;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -76,6 +76,15 @@ const getDayEnd = timestamp => {
|
||||
return [+new Date(timestamp), +new Date(timestamp) + 60 * 1000 * 60 * 24 - 1000]
|
||||
}
|
||||
|
||||
const getFieldId = (arr, result) => {
|
||||
const [obj] = result
|
||||
const idArr = obj.split(',')
|
||||
return arr
|
||||
.map(ele => ele.id)
|
||||
.slice(0, idArr.length)
|
||||
.join(',')
|
||||
}
|
||||
|
||||
const getValueByDefaultValueCheckOrFirstLoad = (
|
||||
defaultValueCheck: boolean,
|
||||
defaultValue: any,
|
||||
@ -88,6 +97,20 @@ const getValueByDefaultValueCheckOrFirstLoad = (
|
||||
displayType: string,
|
||||
displayId: string
|
||||
) => {
|
||||
if (+displayType === 9) {
|
||||
if (firstLoad) {
|
||||
return defaultValueCheck
|
||||
? multiple
|
||||
? defaultValue.map(ele => ele.split('-de-').join(','))
|
||||
: (defaultValue || '').split('-de-').join(',')
|
||||
: []
|
||||
}
|
||||
return selectValue?.length
|
||||
? multiple
|
||||
? selectValue.map(ele => ele.split('-de-').join(','))
|
||||
: (selectValue || '').split('-de-').join(',')
|
||||
: []
|
||||
}
|
||||
if (
|
||||
optionValueSource === 1 &&
|
||||
(defaultMapValue?.length || displayId) &&
|
||||
@ -152,6 +175,9 @@ const getOperator = (
|
||||
conditionValueS,
|
||||
firstLoad
|
||||
) => {
|
||||
if (+displayType === 9) {
|
||||
return multiple ? 'in' : 'eq'
|
||||
}
|
||||
const valueF = firstLoad ? defaultConditionValueF : conditionValueF
|
||||
const valueS = firstLoad ? defaultConditionValueS : conditionValueS
|
||||
const operatorF = firstLoad ? defaultConditionValueOperatorF : conditionValueOperatorF
|
||||
@ -186,9 +212,8 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
|
||||
const {
|
||||
selectValue: value,
|
||||
timeGranularityMultiple,
|
||||
parametersStart,
|
||||
parametersEnd,
|
||||
conditionType = 0,
|
||||
treeFieldList = [],
|
||||
defaultConditionValueOperatorF = 'eq',
|
||||
defaultConditionValueF = '',
|
||||
defaultConditionValueOperatorS = 'like',
|
||||
@ -204,13 +229,14 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
|
||||
defaultMapValue,
|
||||
mapValue,
|
||||
parameters = [],
|
||||
isTree = false,
|
||||
timeGranularity = 'date',
|
||||
displayType,
|
||||
displayId,
|
||||
multiple
|
||||
} = item
|
||||
|
||||
const isTree = +displayType === 9
|
||||
|
||||
if (timeType === 'dynamic' && [1, 7].includes(+displayType) && firstLoad) {
|
||||
if (+displayType === 1) {
|
||||
selectValue = getDynamicRange(item)
|
||||
@ -303,7 +329,9 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
|
||||
if (result?.length) {
|
||||
filter.push({
|
||||
componentId: ele.id,
|
||||
fieldId: item.checkedFieldsMap[curComponentId],
|
||||
fieldId: isTree
|
||||
? getFieldId(treeFieldList, result)
|
||||
: item.checkedFieldsMap[curComponentId],
|
||||
operator,
|
||||
value: result,
|
||||
parameters,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user