<script lang="ts" setup>
|
import icon_info_colorful from '@/assets/svg/icon_info_colorful.svg'
|
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
|
import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
|
import joinJoin from '@/assets/svg/join-join.svg'
|
import { ref, shallowRef } from 'vue'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import { ElMessage } from 'element-plus-secondary'
|
import { guid } from '@/views/visualized/data/dataset/form/util.js'
|
import { listByDsIds } from '@/api/dataset'
|
import { cloneDeep } from 'lodash-es'
|
interface Cascade {
|
datasetId: string
|
name: string
|
queryId: string
|
deType: string
|
fieldId: string
|
isTree: boolean
|
}
|
|
type cascadeMap = Record<string, Cascade>
|
const { t } = useI18n()
|
let deTypeMap = shallowRef({})
|
const emits = defineEmits(['saveCascade'])
|
|
const dialogVisible = ref(false)
|
const handleBeforeClose = () => {
|
dialogVisible.value = false
|
}
|
const cascadeList = ref([])
|
const optionsMap = shallowRef({})
|
const datasetMap = shallowRef([])
|
const cancelClick = () => {
|
handleBeforeClose()
|
}
|
|
const confirmClick = () => {
|
const { isError, arr } = setCascadeArrBack()
|
if (isError) {
|
ElMessage.error(t('v_query.cannot_be_empty'))
|
return
|
}
|
emits('saveCascade', arr)
|
handleBeforeClose()
|
}
|
|
const setCascadeArrBack = () => {
|
let isError = false
|
const arr = cloneDeep(cascadeList.value)
|
arr.forEach(ele => {
|
ele.forEach(item => {
|
if (!item.placeholder && !item.fieldId) {
|
isError = true
|
}
|
if (!item.datasetId) {
|
isError = true
|
}
|
item.selectValue = []
|
})
|
})
|
|
return {
|
arr,
|
isError
|
}
|
}
|
|
const init = (cascadeMap: cascadeMap, arr) => {
|
cascadeList.value = cloneDeep(arr)
|
datasetMap.value = Object.values(cascadeMap).map(ele => ({
|
label: ele.name,
|
isTree: ele.isTree,
|
deType: ele.deType,
|
value: `${ele.datasetId}--${ele.queryId}--${ele.fieldId}`
|
}))
|
let obj = {}
|
Object.values(cascadeMap).forEach(ele => {
|
obj[`${ele.datasetId}--${ele.queryId}--${ele.fieldId}`] = ele.deType
|
})
|
deTypeMap.value = obj
|
listByDsIds(datasetMap.value.map(ele => ele.value.split('--')[0]))
|
.then(res => {
|
optionsMap.value = res
|
})
|
.finally(() => {
|
dialogVisible.value = true
|
})
|
}
|
|
const disabledDatasetId = shallowRef([])
|
|
const visibleChange = (val, index, idx) => {
|
let topId = ''
|
let topIdArr = []
|
let bottomId = ''
|
let bottomIdArr = []
|
for (let i in cascadeList.value[index]) {
|
if (i > idx) {
|
if (cascadeList.value[index][i].datasetId && !bottomId) {
|
bottomId = cascadeList.value[index][i].datasetId
|
}
|
continue
|
}
|
if (cascadeList.value[index][i].datasetId) {
|
topId = cascadeList.value[index][i].datasetId
|
}
|
if (i === idx) {
|
topId = (cascadeList.value[index][idx - 1] || {}).datasetId
|
}
|
}
|
|
cascadeList.value.forEach(ele => {
|
let tentativeTopArr = []
|
let tentativeBottomArr = []
|
for (let i in ele) {
|
if (topIdArr[topIdArr.length - 1] === tentativeTopArr || bottomId === ele[i].datasetId) {
|
if (bottomId === ele[i].datasetId) {
|
bottomIdArr.push(tentativeBottomArr)
|
}
|
|
if (bottomIdArr[bottomIdArr.length - 1] === tentativeBottomArr) {
|
tentativeBottomArr.push(ele[i].datasetId)
|
}
|
continue
|
}
|
if (ele[i].datasetId) {
|
tentativeTopArr.push(ele[i].datasetId)
|
}
|
if (topId === ele[i].datasetId) {
|
topIdArr.push(tentativeTopArr)
|
}
|
}
|
})
|
|
if (val) {
|
disabledDatasetId.value = [...new Set([...topIdArr.flat(), ...bottomIdArr.flat()])].filter(
|
ele => !!ele
|
)
|
}
|
}
|
|
const addCascadeItem = item => {
|
item.push({
|
datasetId: '',
|
fieldId: '',
|
placeholder: item.length ? '' : t('v_query.the_first_level'),
|
id: guid()
|
})
|
}
|
|
const setPlaceholder = () => {
|
cascadeList.value.forEach(ele => {
|
ele.forEach((item, idx) => {
|
if (idx) {
|
item.placeholder = ''
|
}
|
if (
|
item &&
|
ele[idx - 1] &&
|
item.datasetId &&
|
item.datasetId.split('--')[0] === ele[idx - 1].datasetId.split('--')[0]
|
) {
|
item.placeholder = t('v_query.configure_cascaded_fields')
|
item.fieldId = ''
|
}
|
})
|
})
|
}
|
|
const deleteCascade = (idx, item) => {
|
item.splice(idx, 1)
|
item[0].fieldId = ''
|
item[0].placeholder = t('v_query.the_first_level')
|
setPlaceholder()
|
}
|
|
const deleteCascadeBlock = idx => {
|
cascadeList.value.splice(idx, 1)
|
}
|
|
const addCascadeBlock = () => {
|
const arr = []
|
addCascadeItem(arr)
|
cascadeList.value.push(arr)
|
}
|
|
const indexNumCascade = [
|
t('visualization.number1'),
|
t('visualization.number2'),
|
t('visualization.number3'),
|
t('visualization.number4'),
|
t('visualization.number5')
|
]
|
|
defineExpose({
|
init
|
})
|
</script>
|
|
<template>
|
<el-dialog
|
class="query-condition-cascade"
|
v-model="dialogVisible"
|
width="900px"
|
@click.stop
|
:before-close="handleBeforeClose"
|
@mousedown.stop
|
@mousedup.stop
|
>
|
<template #title>
|
<div class="title">
|
{{ t('v_query.condition_cascade_configuration')
|
}}<span style="margin-left: 8px" class="tip">{{ t('v_query.not_reverse_cascade') }}</span>
|
</div>
|
</template>
|
<div class="content">
|
<el-icon style="font-size: 16px">
|
<Icon name="icon_info_colorful"><icon_info_colorful class="svg-icon" /></Icon>
|
</el-icon>
|
{{ t('v_query.must_be_met') }}<br />
|
{{ t('v_query.select_data_set') }}<br />
|
</div>
|
<el-button text @click="addCascadeBlock">
|
<template #icon>
|
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
|
</template>
|
{{ t('v_query.add_cascade_configuration') }}
|
</el-button>
|
<div class="cascade-content" v-for="(item, index) in cascadeList" :key="index">
|
<div style="display: flex; align-items: center; justify-content: space-between">
|
<el-button :disabled="item.length === 2" text @click="addCascadeItem(item)">
|
<template #icon>
|
<Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
|
</template>
|
{{ t('v_query.add_cascade_condition') }}
|
</el-button>
|
<el-button @click="deleteCascadeBlock(index)" class="cascade-delete-block" text>
|
<template #icon>
|
<Icon name="icon_delete-trash_outlined"
|
><icon_deleteTrash_outlined class="svg-icon"
|
/></Icon>
|
</template>
|
</el-button>
|
</div>
|
<div class="cascade-item">
|
<div class="label">{{ t('v_query.query_condition_level') }}</div>
|
<div class="item-name">{{ t('v_query.select_query_condition') }}</div>
|
<div class="cascade-icon"></div>
|
<div class="item-field">{{ t('v_query.select_cascaded_field') }}</div>
|
</div>
|
<div class="cascade-item" v-for="(ele, idx) in item" :key="ele.id">
|
<div class="label">{{ t('v_query.level_1', { msg: indexNumCascade[idx] }) }}</div>
|
<div class="item-name">
|
<el-select
|
@visible-change="val => visibleChange(val, index, idx)"
|
v-model="ele.datasetId"
|
@change="setPlaceholder"
|
style="width: 300px"
|
>
|
<el-option
|
v-for="itx in datasetMap.filter(ele => (idx === 0 && !ele.isTree) || idx === 1)"
|
:key="itx.value"
|
:label="itx.label"
|
:value="itx.value"
|
:disabled="
|
(disabledDatasetId.includes(itx.value) &&
|
item.map(ele => ele.datasetId).includes(itx.value)) ||
|
(!!ele.datasetId && deTypeMap[ele.datasetId] !== itx.deType)
|
"
|
/>
|
</el-select>
|
</div>
|
<div class="cascade-icon">
|
<el-icon>
|
<Icon name="join-join"><joinJoin class="svg-icon" /></Icon>
|
</el-icon>
|
</div>
|
<div class="item-field">
|
<el-select
|
:placeholder="ele.placeholder"
|
:disabled="!!ele.placeholder"
|
v-model="ele.fieldId"
|
style="width: 300px"
|
>
|
<el-option
|
v-for="item in optionsMap[ele.datasetId.split('--')[0]]"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</div>
|
<el-button v-show="idx !== 0" @click="deleteCascade(idx, item)" class="cascade-delete" text>
|
<template #icon>
|
<Icon name="icon_delete-trash_outlined"
|
><icon_deleteTrash_outlined class="svg-icon"
|
/></Icon>
|
</template>
|
</el-button>
|
</div>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="cancelClick">{{ t('chart.cancel') }} </el-button>
|
<el-button @click="confirmClick" type="primary">{{ t('chart.confirm') }} </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<style lang="less" scoped>
|
.query-condition-cascade {
|
.title {
|
.tip {
|
font-size: 12px;
|
color: #646a73;
|
}
|
}
|
|
.content {
|
height: 62px;
|
width: 852px;
|
border-radius: 4px;
|
background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
|
position: relative;
|
padding: 9px 0 9px 40px;
|
font-family: var(--de-custom_font, 'PingFang');
|
font-size: 14px;
|
font-weight: 400;
|
line-height: 20px;
|
|
.ed-icon {
|
position: absolute;
|
top: 10.6px;
|
left: 16px;
|
font-size: 14px;
|
color: var(--ed-color-primary, #3370ff);
|
}
|
|
margin-bottom: 16px;
|
}
|
|
.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-icon {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 40px;
|
font-size: 20px;
|
}
|
|
.item-field {
|
width: 300px;
|
}
|
}
|
|
.cascade-delete-block,
|
.cascade-delete {
|
width: 40px;
|
font-size: 20px;
|
color: #646a73;
|
margin-left: 20px;
|
}
|
}
|
}
|
</style>
|
