fix: 查询组件,支持下拉选项为必填

This commit is contained in:
dataeaseShu 2023-12-14 11:00:14 +08:00
parent db5f47758a
commit 178734d81e
2 changed files with 64 additions and 2 deletions

View File

@ -1,5 +1,6 @@
<script lang="ts" setup>
import eventBus from '@/utils/eventBus'
import { ElMessage } from 'element-plus-secondary'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import QueryConditionConfiguration from './QueryConditionConfiguration.vue'
import type { ComponentInfo } from '@/api/chart'
@ -207,6 +208,7 @@ const infoFormat = (obj: ComponentInfo) => {
},
timeType: 'fixed',
relativeToCurrent: 'custom',
required: false,
timeNum: 0,
relativeToCurrentType: 'year',
around: 'f',
@ -342,7 +344,20 @@ const addCriteriaConfig = () => {
}
const queryData = () => {
let requiredName = ''
const emitterList = (element.value.propValue || []).reduce((pre, next) => {
if (next.required) {
if (!next.defaultValueCheck) {
requiredName = next.name
}
if (
(Array.isArray(next.selectValue) && !next.selectValue.length) ||
(next.selectValue !== 0 && !next.selectValue)
) {
requiredName = next.name
}
}
const keyList = Object.entries(next.checkedFieldsMap)
.filter(ele => next.checkedFields.includes(ele[0]))
.filter(ele => !!ele[1])
@ -350,6 +365,10 @@ const queryData = () => {
pre = [...new Set([...keyList, ...pre])]
return pre
}, [])
if (!!requiredName) {
ElMessage.error(`${requiredName}】查询条件是必填项,请设置选项值后,再进行查询!`)
return
}
if (!emitterList.length) return
emitterList.forEach(ele => {
@ -408,6 +427,7 @@ const opacityStyle = computed(() => {
<el-tooltip effect="dark" :content="ele.name" placement="top">
{{ ele.name }}
</el-tooltip>
<span v-if="ele.required" class="required">*</span>
</div>
</div>
<div class="label-wrapper-tooltip" v-if="showPosition !== 'preview'">
@ -542,6 +562,7 @@ const opacityStyle = computed(() => {
overflow: hidden;
}
.label-wrapper-text {
position: relative;
cursor: pointer;
flex: 0 1 auto;
max-width: 100%;
@ -554,6 +575,13 @@ const opacityStyle = computed(() => {
font-style: normal;
font-weight: 400;
line-height: 22px;
.required {
font-size: 14px;
color: #f54a45;
margin-left: 3px;
line-height: 22px;
}
}
.label-wrapper-tooltip {
align-items: center;

View File

@ -260,6 +260,21 @@ const validate = () => {
return true
}
if (ele.required) {
if (!ele.defaultValueCheck) {
ElMessage.error('查询条件为必填项,默认值不能为空')
return true
}
if (
(Array.isArray(ele.defaultValue) && !ele.defaultValue.length) ||
(ele.defaultValue !== 0 && !ele.defaultValue)
) {
ElMessage.error('查询条件为必填项,默认值不能为空')
return true
}
}
if (+ele.displayType === 7) {
if (!ele.defaultValueCheck) {
return false
@ -462,6 +477,7 @@ const weightlessness = () => {
const parameterCompletion = () => {
const attributes = {
timeType: 'fixed',
required: false,
relativeToCurrent: 'custom',
timeNum: 0,
relativeToCurrentType: 'year',
@ -905,7 +921,14 @@ defineExpose({
</div>
<div class="condition-configuration">
<div class="mask condition" v-if="curComponent.auto"></div>
<div class="title">查询条件配置</div>
<div class="title flex-align-center">
查询条件配置
<el-checkbox
:disabled="curComponent.auto"
v-model="curComponent.required"
label="必填项"
/>
</div>
<div v-show="showConfiguration && !showTypeError" class="configuration-list">
<div class="list-item">
<div class="label">展示类型</div>
@ -1457,7 +1480,6 @@ defineExpose({
}
.chart-field {
border-right: 1px solid #dee0e3;
height: calc(100% - 16px);
padding: 0 16px 16px 16px;
width: 474px;
@ -1529,6 +1551,7 @@ defineExpose({
.condition-configuration {
padding: 16px;
border-left: 1px solid #dee0e3;
width: 467px;
position: relative;
.mask {
@ -1549,6 +1572,17 @@ defineExpose({
background: rgba(31, 35, 41, 0.1);
margin-left: 8px;
}
.flex-align-center {
position: sticky;
top: 0;
justify-content: space-between;
background: #fff;
z-index: 5;
.ed-checkbox {
height: 20px;
}
}
.title {
margin-bottom: 16px;
font-family: PingFang SC;