<script lang="ts" setup>
|
import {
|
toRefs,
|
onBeforeMount,
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
type PropType,
|
type Ref,
|
inject,
|
computed,
|
nextTick
|
} from 'vue'
|
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
import eventBus from '@/utils/eventBus'
|
import { storeToRefs } from 'pinia'
|
import { useI18n } from '@/hooks/web/useI18n'
|
interface SelectConfig {
|
id: string
|
conditionValueOperatorF: string
|
conditionValueF: string
|
queryConditionWidth: string
|
hideConditionSwitching: boolean
|
conditionValueOperatorS: string
|
conditionValueS: string
|
placeholder: string
|
defaultConditionValueOperatorF: string
|
defaultConditionValueF: string
|
defaultConditionValueOperatorS: string
|
defaultConditionValueS: string
|
conditionType: number
|
}
|
const placeholder: Ref = inject('placeholder')
|
const { t } = useI18n()
|
|
const placeholderText = computed(() => {
|
if (placeholder?.value?.placeholderShow) {
|
return props.config.placeholder
|
}
|
return ' '
|
})
|
|
const operators = [
|
{
|
label: t('v_query.exact_match'),
|
value: 'eq'
|
},
|
{
|
label: t('v_query.fuzzy_match'),
|
value: 'like'
|
}
|
]
|
const dvMainStore = dvMainStoreWithOut()
|
const { dvInfo } = storeToRefs(dvMainStore)
|
const props = defineProps({
|
config: {
|
type: Object as PropType<SelectConfig>,
|
default: () => {
|
return {
|
id: '',
|
conditionType: 0,
|
queryConditionWidth: 0,
|
conditionValueOperatorF: 'eq',
|
conditionValueF: '',
|
conditionValueOperatorS: 'like',
|
conditionValueS: '',
|
defaultConditionValueOperatorF: 'eq',
|
defaultConditionValueF: '',
|
defaultConditionValueOperatorS: 'like',
|
defaultConditionValueS: ''
|
}
|
}
|
},
|
isConfig: {
|
type: Boolean,
|
default: false
|
}
|
})
|
|
const { config } = toRefs(props)
|
const setParams = () => {
|
const {
|
defaultConditionValueOperatorF,
|
defaultConditionValueF,
|
defaultConditionValueOperatorS,
|
defaultConditionValueS
|
} = config.value
|
config.value.conditionValueOperatorF = defaultConditionValueOperatorF
|
config.value.conditionValueF = defaultConditionValueF
|
config.value.conditionValueOperatorS = defaultConditionValueOperatorS
|
config.value.conditionValueS = defaultConditionValueS
|
}
|
onBeforeMount(() => {
|
setParams()
|
})
|
const queryConditionWidth = inject('com-width', Function, true)
|
const customStyle = inject<{ background: string; border: string }>('$custom-style-filter')
|
const isConfirmSearch = inject('is-confirm-search', Function, true)
|
|
const getCustomWidth = () => {
|
if (placeholder?.value?.placeholderShow) {
|
if (props.config.queryConditionWidth === undefined) {
|
return queryConditionWidth()
|
}
|
return props.config.queryConditionWidth
|
}
|
return 227
|
}
|
const selectStyle = computed(() => {
|
return { width: getCustomWidth() + 'px' }
|
})
|
const handleValueChange = () => {
|
if (!props.isConfig) {
|
nextTick(() => {
|
isConfirmSearch(config.value.id)
|
})
|
return
|
}
|
}
|
const lineWidth = computed(() => {
|
return { width: getCustomWidth() - 15 + 'px', background: customStyle.border }
|
})
|
|
const handleKeyEnter = ($event: any = {}) => {
|
if ($event?.isComposing) {
|
return
|
}
|
handleValueChange()
|
}
|
|
const handleInnerMouseDown = e => {
|
e.stopPropagation()
|
}
|
const pre = ref()
|
const next = ref()
|
|
const componentClick = () => {
|
pre.value?.blur()
|
next.value?.blur()
|
}
|
|
onMounted(() => {
|
eventBus.on('componentClick', componentClick)
|
})
|
onBeforeUnmount(() => {
|
eventBus.off('componentClick', componentClick)
|
})
|
</script>
|
|
<template>
|
<div
|
@mousedown="handleInnerMouseDown"
|
class="text-search-select"
|
:style="{ background: customStyle.background }"
|
>
|
<div class="condition-type">
|
<el-select
|
class="condition-value-select"
|
v-if="!config.hideConditionSwitching"
|
@change="handleValueChange"
|
:effect="dvInfo.type === 'dataV' ? 'dark' : ''"
|
popper-class="condition-value-select-popper"
|
v-model="config.conditionValueOperatorF"
|
>
|
<el-option v-for="ele in operators" :key="ele.value" :label="ele.label" :value="ele.value">
|
</el-option>
|
</el-select>
|
<el-input
|
:style="selectStyle"
|
:placeholder="placeholderText"
|
@blur="handleValueChange"
|
ref="pre"
|
@keydown.enter.exact.prevent="($event: any) => handleKeyEnter($event)"
|
class="condition-value-input"
|
v-model="config.conditionValueF"
|
/>
|
<div :style="lineWidth" class="bottom-line"></div>
|
</div>
|
<div class="condition-type" v-if="[1, 2].includes(config.conditionType)">
|
<span class="condition-type-tip">{{
|
config.conditionType === 1 ? t('chart.and') : t('chart.or')
|
}}</span>
|
<el-select
|
v-if="!config.hideConditionSwitching"
|
class="condition-value-select"
|
@change="handleValueChange"
|
:effect="dvInfo.type === 'dataV' ? 'dark' : ''"
|
popper-class="condition-value-select-popper"
|
v-model="config.conditionValueOperatorS"
|
>
|
<el-option v-for="ele in operators" :key="ele.value" :label="ele.label" :value="ele.value">
|
</el-option>
|
</el-select>
|
<el-input
|
:style="selectStyle"
|
@blur="handleValueChange"
|
ref="next"
|
:placeholder="placeholderText"
|
@keydown.enter.exact.prevent="($event: any) => handleKeyEnter($event)"
|
class="condition-value-input"
|
v-model="config.conditionValueS"
|
/>
|
<div :style="lineWidth" class="bottom-line next-line"></div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.text-search-select {
|
display: flex;
|
align-items: center;
|
.condition-type {
|
display: flex;
|
position: relative;
|
:deep(.ed-input__wrapper),
|
:deep(.ed-select__wrapper) {
|
border: none;
|
border-radius: 0;
|
box-shadow: none !important;
|
height: 32px;
|
word-wrap: break-word;
|
text-align: left;
|
color: rgba(0, 0, 0, 0.65);
|
list-style: none;
|
user-select: none;
|
cursor: pointer;
|
line-height: 32px;
|
box-sizing: border-box;
|
max-width: 100%;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
opacity: 1;
|
}
|
|
:deep(.ed-select .ed-input.is-focus .ed-input__wrapper),
|
:deep(.ed-select:hover:not(.ed-select--disabled) .ed-input__wrapper),
|
:deep(.ed-select .ed-input__wrapper.is-focus) {
|
box-shadow: none !important;
|
}
|
|
:deep(.ed-select) {
|
width: 120px;
|
.ed-input__wrapper {
|
padding: 0;
|
}
|
}
|
|
.condition-type-tip {
|
font-size: 12px;
|
color: #646a73;
|
line-height: 32px;
|
margin-right: 8px;
|
}
|
|
.bottom-line {
|
box-sizing: border-box;
|
height: 1px;
|
background-color: #bbbfc4;
|
position: absolute;
|
right: 5px;
|
bottom: 3px;
|
z-index: 10;
|
}
|
}
|
}
|
</style>
|
<style lang="less">
|
.condition-value-select-popper {
|
.ed-select-dropdown__item.selected::after {
|
display: none;
|
}
|
}
|
</style>
|
