Merge pull request #7153 from dataease/pr@dev-v2_dzz

Pr@dev v2 dzz

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

@@ -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;

core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue

@@ -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;