center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat(查询组件): 查询button允许配置：显示或者不显示

Browse Source
This commit is contained in:
dataeaseShu 2024-07-18 11:27:39 +08:00
parent ae01f93355
commit 4938329f5c
6 changed files with 103 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
core/core-frontend/src/custom-component/v-query/Component.vue
View File

@ -228,7 +228,17 @@ const queryDataForId = id => {
requiredName = next.name
}
if (
if (next.displayType === '8') {
const { conditionValueF, conditionValueS, conditionType } = next
if (conditionType === 0) {
requiredName = conditionValueF === '' ? next.name : ''
} else {
requiredName = [conditionValueF || '', conditionValueS || ''].filter(ele => ele !== '')
.length
? next.name
: ''
}
} else if (
(Array.isArray(next.selectValue) && !next.selectValue.length) ||
(next.selectValue !== 0 && !next.selectValue)
) {
@ -258,6 +268,13 @@ const getQueryConditionWidth = () => {
const getCascadeList = () => {
return props.element.cascade
}
const isConfirmSearch = id => {
if (componentWithSure.value) return
queryDataForId(id)
}
provide('is-confirm-search', isConfirmSearch)
provide('unmount-select', unMountSelect)
provide('release-unmount-select', releaseSelect)
provide('query-data-for-id', queryDataForId)
@ -415,6 +432,22 @@ const listVisible = computed(() => {
return list.value.filter(itx => itx.visible)
})
const componentWithSure = computed(() => {
return customStyle.btnList.includes('sure')
})
watch(
() => componentWithSure.value,
(val, oldVal) => {
if (!val && oldVal) {
queryData()
}
},
{
immediate: false
}
)
const queryData = () => {
let requiredName = ''
const emitterList = (element.value.propValue || []).reduce((pre, next) => {
@ -574,7 +607,7 @@ const autoStyle = computed(() => {
@click.stop="queryData"
style="margin-right: 7px"
:style="btnStyle"
v-if="customStyle.btnList.includes('sure')"
v-if="componentWithSure"
type="primary"
>
{{ t('commons.adv_search.search') }}

4
core/core-frontend/src/custom-component/v-query/Select.vue
View File

@ -75,6 +75,7 @@ const options = shallowRef([])
const unMountSelect: Ref = inject('unmount-select')
const releaseSelect = inject('release-unmount-select', Function, true)
const queryDataForId = inject('query-data-for-id', Function, true)
const isConfirmSearch = inject('is-confirm-search', Function, true)
const queryConditionWidth = inject('com-width', Function, true)
const cascadeList = inject('cascade-list', Function, true)
const setCascadeDefault = inject('set-cascade-default', Function, true)
@ -198,6 +199,9 @@ const handleValueChange = () => {
)
setCascadeValueBack(config.value.mapValue)
emitCascade()
nextTick(() => {
isConfirmSearch(config.value.id)
})
return
}

22
core/core-frontend/src/custom-component/v-query/TextSearch.vue
View File

@ -1,8 +1,9 @@
<script lang="ts" setup>
import { toRefs, onBeforeMount, type PropType, inject, computed } from 'vue'
import { toRefs, onBeforeMount, type PropType, inject, computed, nextTick } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { storeToRefs } from 'pinia'
interface SelectConfig {
id: string
conditionValueOperatorF: string
conditionValueF: string
conditionValueOperatorS: string
@ -31,6 +32,7 @@ const props = defineProps({
type: Object as PropType<SelectConfig>,
default: () => {
return {
id: '',
conditionType: 0,
conditionValueOperatorF: 'eq',
conditionValueF: '',
@ -42,6 +44,10 @@ const props = defineProps({
defaultConditionValueS: ''
}
}
},
isConfig: {
type: Boolean,
default: false
}
})
const { config } = toRefs(props)
@ -62,10 +68,18 @@ onBeforeMount(() => {
})
const queryConditionWidth = inject('com-width', Function, true)
const customStyle = inject<{ background: string }>('$custom-style-filter')
const isConfirmSearch = inject('is-confirm-search', Function, true)
const selectStyle = computed(() => {
return { width: queryConditionWidth() + 'px' }
})
const handleValueChange = () => {
if (!props.isConfig) {
nextTick(() => {
isConfirmSearch(config.value.id)
})
return
}
}
const lineWidth = computed(() => {
return { width: queryConditionWidth() - 15 + 'px' }
})
@ -76,6 +90,7 @@ const lineWidth = computed(() => {
<div class="condition-type">
<el-select
class="condition-value-select"
@change="handleValueChange"
:effect="dvInfo.type === 'dataV' ? 'dark' : ''"
popper-class="condition-value-select-popper"
v-model="config.conditionValueOperatorF"
@ -85,6 +100,7 @@ const lineWidth = computed(() => {
</el-select>
<el-input
:style="selectStyle"
@blur="handleValueChange"
class="condition-value-input"
v-model="config.conditionValueF"
/>
@ -94,6 +110,7 @@ const lineWidth = computed(() => {
<sapn class="condition-type-tip">{{ config.conditionType === 1 ? '与' : '或' }}</sapn>
<el-select
class="condition-value-select"
@change="handleValueChange"
:effect="dvInfo.type === 'dataV' ? 'dark' : ''"
popper-class="condition-value-select-popper"
v-model="config.conditionValueOperatorS"
@ -103,6 +120,7 @@ const lineWidth = computed(() => {
</el-select>
<el-input
:style="selectStyle"
@blur="handleValueChange"
class="condition-value-input"
v-model="config.conditionValueS"
/>

4
core/core-frontend/src/custom-component/v-query/Time.vue
View File

@ -130,6 +130,9 @@ const handleValueChange = () => {
config.value.selectValue = Array.isArray(selectValue.value)
? [...selectValue.value]
: selectValue.value
nextTick(() => {
isConfirmSearch(config.value.id)
})
return
}
config.value.defaultValue = new Date(value).toLocaleString()
@ -149,6 +152,7 @@ const init = () => {
}
const queryConditionWidth = inject('com-width', Function, true)
const isConfirmSearch = inject('is-confirm-search', Function, true)
const selectStyle = computed(() => {
return props.isConfig
? {}

4
core/core-frontend/src/custom-component/v-query/Tree.vue
View File

@ -63,6 +63,9 @@ const handleValueChange = () => {
config.value.selectValue = Array.isArray(treeValue.value)
? [...treeValue.value]
: treeValue.value
nextTick(() => {
isConfirmSearch(config.value.id)
})
return
}
config.value.defaultValue = value
@ -114,6 +117,7 @@ watch(
)
const showOrHide = ref(true)
const queryConditionWidth = inject('com-width', Function, true)
const isConfirmSearch = inject('is-confirm-search', Function, true)
watch(
() => config.value.id,
() => {

41
core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
View File

@ -281,7 +281,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
/>
</el-select>
</el-tooltip>
<el-tooltip effect="dark" placement="bottom">
<el-tooltip :effect="toolTip" placement="bottom">
<template #content>
{{ t('chart.bolder') }}
</template>
@ -300,7 +300,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
</div>
</el-tooltip>
<el-tooltip effect="dark" placement="bottom">
<el-tooltip :effect="toolTip" placement="bottom">
<template #content>
{{ t('chart.italic') }}
</template>
@ -343,9 +343,19 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
:class="'form-item-' + themes"
>
<el-checkbox-group :effect="themes" v-model="chart.customStyle.component.btnList">
<el-checkbox :effect="themes" size="small" disabled label="sure">
<el-checkbox class="checkbox-with_icon" :effect="themes" size="small" label="sure">
{{ t('commons.adv_search.search') }}
<el-tooltip
:effect="toolTip"
content="如果展示查询按钮，需要点击该按钮后才能触发图表查询；如果不展示查询按钮，选择完查询条件后立即触发图表查询"
placement="top"
>
<el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
<Icon name="icon_info_outlined" />
</el-icon>
</el-tooltip>
</el-checkbox>
<el-checkbox :effect="themes" size="small" label="clear">
{{ t('commons.clear') }}
</el-checkbox>
@ -389,7 +399,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
/>
</el-select>
</el-tooltip>
<el-tooltip effect="dark" placement="bottom">
<el-tooltip :effect="toolTip" placement="bottom">
<template #content>
{{ t('chart.bolder') }}
</template>
@ -408,7 +418,7 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
</div>
</el-tooltip>
<el-tooltip effect="dark" placement="bottom">
<el-tooltip :effect="toolTip" placement="bottom">
<template #content>
{{ t('chart.italic') }}
</template>
@ -455,6 +465,27 @@ if (!chart.value.customStyle.component.hasOwnProperty('labelShow')) {
&.no-margin-bottom {
margin-bottom: 0 !important;
}
.checkbox-with_icon {
:deep(.ed-checkbox__label) {
display: inline-flex;
align-items: center;
.ed-icon {
margin-left: 5px;
}
}
}
.hint-icon {
cursor: pointer;
font-size: 14px;
color: #646a73;
&.hint-icon--dark {
color: #a6a6a6;
}
}
}
.m-divider {
border-color: rgba(31, 35, 41, 0.15);