Merge pull request #7179 from dataease/pr@dev@perf_filter_required

perf: 过滤器必填逻辑

core/frontend/src/components/canvas/customComponent/UserView.vue

@@ -830,7 +830,6 @@ export default {
         const filters = this.filter.filter
         const group = this.groupRequiredInvalid(filters)
         if (group.unReady?.length) {
-          this.view && (this.view.unReadyMsg = '请先完成必填项过滤器！')
           this.getDataLoading = false
           return
         } else {

core/frontend/src/components/dataease/DeOutWidget.vue

@@ -28,10 +28,21 @@
         class="condition-content"
         :class="{'condition-content-default' : !(element.options.attrs.showTitle && element.options.attrs.title)}"
       >
+
+        <div
+          v-if="element.options.attrs.required"
+          class="widget-required-symbol"
+        >
+          <span>*</span>
+        </div>
+
         <div
           class="condition-content-container"
           :class="{'widget-required' : element.options.attrs.required}"
         >
+          <!-- <div class="required-msg-container">
+            <span>必填项不能为空</span>
+          </div> -->
           <div class="first-element">
             <div
               :class="element.component === 'de-select-grid' ? 'first-element-grid-container': ''"
@@ -58,12 +69,7 @@
           </div>
 
         </div>
-        <div
-          v-if="element.options.attrs.required"
-          class="widget-required-symbol"
-        >
-          <span>*</span>
-        </div>
+
       </div>
     </div>
   </div>
@@ -281,13 +287,13 @@ export default {
   width: 100%;
   .widget-required {
     width: calc(100% - 12px) !important;
-    float: left !important;
+    float: right !important;
   }
   .widget-required-symbol {
     color: #f54a45;
     height: 40px;
     line-height: 40px;
-    float: right;
+    float: left;
     width: 12px;
   }
 }

core/frontend/src/components/widget/deWidget/DeDate.vue

@@ -5,11 +5,12 @@
       ref="dateRef"
       v-model="values"
       :popper-class="'coustom-date-picker' + ' ' + extPoperClass"
+      :class="{'show-required-tips': showRequiredTips}"
       :type="componentType"
       :range-separator="$t(element.options.attrs.rangeSeparator)"
-      :start-placeholder="$t(element.options.attrs.startPlaceholder)"
-      :end-placeholder="$t(element.options.attrs.endPlaceholder)"
-      :placeholder="$t(element.options.attrs.placeholder)"
+      :start-placeholder="showRequiredTips ? $t('panel.required_tips') : $t(element.options.attrs.startPlaceholder)"
+      :end-placeholder="showRequiredTips ? $t('panel.required_tips') : $t(element.options.attrs.endPlaceholder)"
+      :placeholder="showRequiredTips ? $t('panel.required_tips') : $t(element.options.attrs.placeholder)"
       :append-to-body="inScreen"
       value-format="timestamp"
       :format="labelFormat"
@@ -219,6 +220,9 @@ export default {
       }
       return null
     },
+    showRequiredTips() {
+      return this.inDraw && this.element.options.attrs.required && (!this.values || this.values.length === 0)
+    },
     ...mapState([
       'canvasStyleData',
       'mobileStatus'
@@ -516,7 +520,31 @@ export default {
 }
 
 </script>
+<style lang="scss" scoped>
+.show-required-tips {
+  border-color: #ff0000 !important;
+  ::v-deep .el-input__inner {
+    color: #ff0000 !important;
+  }
+  ::v-deep input::placeholder {
+    color: #ff0000 !important;
+  }
+  ::v-deep i {
+    color: #ff0000 !important;
+  }
+}
+.show-required-tips ::v-deep .el-input__inner, input {
+  border-color: #ff0000 !important;
+}
 
+.show-required-tips ::v-deep .el-input__inner, input::placeholder {
+  color: #ff0000 !important;
+}
+.show-required-tips ::v-deep i {
+  color: #ff0000 !important;
+}
+
+</style>
 <style lang="scss">
 .date-picker-vant {
   position: relative;

core/frontend/src/components/widget/deWidget/DeInputSearch.vue

@@ -5,9 +5,10 @@
     ref="de-input-search"
     v-model="value"
     resize="vertical"
-    :placeholder="$t(element.options.attrs.placeholder)"
+    :placeholder="showRequiredTips ? $t('panel.required_tips') : $t(element.options.attrs.placeholder)"
     :size="size"
     class="de-range-tag"
+    :class="{'show-required-tips': showRequiredTips}"
     @input="valueChange"
     @keypress.enter.native="search"
     @dblclick="setEdit"
@@ -63,6 +64,9 @@ export default {
     },
     manualModify() {
       return !!this.element.options.manualModify
+    },
+    showRequiredTips() {
+      return this.inDraw && this.element.options.attrs.required && !this.value
     }
   },
   watch: {
@@ -146,10 +150,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
-// .de-range-tag {
-//   input::placeholder {
-//     color: var(--CustomColor, #909399) !important;
-//   }
-// }
+<style lang="scss" scoped>
+.show-required-tips ::v-deep .el-input__inner {
+  border-color: #ff0000 !important;
+}
+.show-required-tips ::v-deep .el-input__inner::placeholder {
+  color: #ff0000 !important;
+}
+.show-required-tips ::v-deep i {
+  color: #ff0000 !important;
+}
 </style>

core/frontend/src/components/widget/deWidget/DeNumberRange.vue

@@ -7,7 +7,10 @@
     style="width: 100%;"
     :rules="rules"
   >
-    <div class="de-number-range-container">
+    <div
+      class="de-number-range-container"
+      :class="{'show-required-tips': showRequiredTips}"
+    >
       <el-form-item
         prop="min"
         style="padding-left: 0px;"
@@ -15,7 +18,7 @@
         <el-input
           ref="de-number-range-min"
           v-model="form.min"
-          :placeholder="$t(element.options.attrs.placeholder_min)"
+          :placeholder="showRequiredTips ? $t('panel.required_tips') : $t(element.options.attrs.placeholder_min)"
           :size="size"
           @input="inputChange"
           @change="handleMinChange"
@@ -29,7 +32,7 @@
         <el-input
           ref="de-number-range-max"
           v-model="form.max"
-          :placeholder="$t(element.options.attrs.placeholder_max)"
+          :placeholder="showRequiredTips ? $t('panel.required_tips') : $t(element.options.attrs.placeholder_max)"
           :size="size"
           @input="inputChange"
           @change="handleMaxChange"
@@ -102,6 +105,9 @@ export default {
     },
     manualModify() {
       return !!this.element.options.manualModify
+    },
+    showRequiredTips() {
+      return this.inDraw && this.element.options.attrs.required && !this.form.min && !this.form.max
     }
   },
   watch: {
@@ -316,6 +322,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.show-required-tips ::v-deep .el-input__inner {
+  border-color: #ff0000 !important;
+}
+.show-required-tips ::v-deep .el-input__inner::placeholder {
+  color: #ff0000 !important;
+}
+.show-required-tips ::v-deep i {
+  color: #ff0000 !important;
+}
 .de-number-range-container {
   display: inline;
   max-height: 40px;

core/frontend/src/components/widget/deWidget/DeSelect.vue

@@ -8,7 +8,7 @@
     :collapse-tags="showNumber"
     :clearable="!element.options.attrs.multiple && (inDraw || !selectFirst)"
     :multiple="element.options.attrs.multiple"
-    :placeholder="$t(element.options.attrs.placeholder) + placeholderSuffix"
+    :placeholder="showRequiredTips ? $t('panel.required_tips') : ($t(element.options.attrs.placeholder) + placeholderSuffix)"
     :popper-append-to-body="inScreen"
     :size="size"
     :filterable="inDraw || !selectFirst"
@@ -16,7 +16,7 @@
     :item-disabled="!inDraw && selectFirst"
     :key-word="keyWord"
     popper-class="coustom-de-select"
-    :class="{'disabled-close': !inDraw && selectFirst && element.options.attrs.multiple}"
+    :class="{'disabled-close': !inDraw && selectFirst && element.options.attrs.multiple, 'show-required-tips': showRequiredTips}"
     :list="data"
     :flag="flag"
     :is-config="isConfig"
@@ -143,6 +143,9 @@ export default {
     },
     selectFirst() {
       return this.element.serviceName === 'textSelectWidget' && this.element.options.attrs.selectFirst
+    },
+    showRequiredTips() {
+      return this.inDraw && this.element.options.attrs.required && !this.value
     }
   },
 
@@ -532,6 +535,15 @@ export default {
   .disabled-close ::v-deep .el-icon-close {
     display: none !important;
   }
+  .show-required-tips ::v-deep .el-input__inner {
+    border-color: #ff0000 !important;
+  }
+  .show-required-tips ::v-deep .el-input__inner::placeholder {
+    color: #ff0000 !important;
+  }
+  .show-required-tips ::v-deep i {
+    color: #ff0000 !important;
+  }
 </style>
 <style lang="scss">
 .coustom-de-select {

core/frontend/src/components/widget/deWidget/DeSelectGrid.vue

@@ -4,11 +4,14 @@
     v-if="element.options!== null && element.options.attrs!==null && show"
     class="de-select-grid-class"
   >
-    <div class="de-select-grid-search">
+    <div
+      class="de-select-grid-search"
+      :class="{'show-required-tips': showRequiredTips}"
+    >
       <el-input
         ref="de-select-grid"
         v-model="keyWord"
-        :placeholder="$t('deinputsearch.placeholder')"
+        :placeholder="showRequiredTips ? $t('panel.required_tips') : $t('deinputsearch.placeholder')"
         :size="size"
         prefix-icon="el-icon-search"
         clearable
@@ -149,6 +152,9 @@ export default {
     },
     isCustomSortWidget() {
       return this.element.serviceName === 'textSelectGridWidget'
+    },
+    showRequiredTips() {
+      return this.inDraw && this.element.options.attrs.required && (!this.value || !this.value.length)
     }
   },
   watch: {
@@ -448,6 +454,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.show-required-tips ::v-deep .el-input__inner {
+  border-color: #ff0000 !important;
+}
+.show-required-tips ::v-deep .el-input__inner::placeholder {
+  color: #ff0000 !important;
+}
+.show-required-tips ::v-deep i {
+  color: #ff0000 !important;
+}
 .de-select-grid-search {
   ::v-deep input {
     border-radius: 0px;

core/frontend/src/components/widget/deWidget/DeSelectTree.vue

@@ -4,6 +4,7 @@
     v-if="element.options!== null && element.options.attrs!==null && show"
     ref="deSelectTree"
     v-model="value"
+    :class="{'show-required-tips': showRequiredTips}"
     popover-class="test-class-wrap"
     :data="data"
     :select-params="selectParams"
@@ -69,7 +70,7 @@ export default {
       value: this.isSingle ? '' : [],
       selectParams: {
         clearable: true,
-        placeholder: this.$t(this.element.options.attrs.placeholder)
+        placeholder: this.showRequiredTips ? this.$t('panel.required_tips') : this.$t(this.element.options.attrs.placeholder)
       },
       treeParams: {
         showParent: true,
@@ -118,6 +119,9 @@ export default {
     customStyle() {
       const { brColor, wordColor, innerBgColor } = this.element.style
       return { brColor, wordColor, innerBgColor }
+    },
+    showRequiredTips() {
+      return this.inDraw && this.element.options.attrs.required && (!this.value || !this.value.length)
     }
   },
 
@@ -414,6 +418,17 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+.show-required-tips ::v-deep .el-input__inner {
+  border-color: #ff0000 !important;
+}
+.show-required-tips ::v-deep .el-input__inner::placeholder {
+  color: #ff0000 !important;
+}
+.show-required-tips ::v-deep i {
+  color: #ff0000 !important;
+}
+</style>
 <style lang="scss">
 .test-class-wrap {
   background: var(--BgSelectTreeColor, #FFFFFF) !important;

core/frontend/src/lang/en.js

@@ -2046,6 +2046,7 @@ export default {
     back_parent: 'Back to previous'
   },
   panel: {
+    required_tips: 'Cannot be empty!',
     filter_no_select: 'Filter components do not need to be selected',
     first_item: 'First item',
     forbidden_copy: 'Forbidden copy',

core/frontend/src/lang/tw.js

@@ -2038,6 +2038,7 @@ export default {
     back_parent: '返回上一級'
   },
   panel: {
+    required_tips: '必填項不能爲空！',
     filter_no_select: '過濾組件無需選擇',
     first_item: '首項',
     forbidden_copy: '當前組件不允許復製',

core/frontend/src/lang/zh.js

@@ -2039,6 +2039,7 @@ export default {
     back_parent: '返回上一级'
   },
   panel: {
+    required_tips: '必填项不能为空！',
     filter_no_select: '过滤组件无需选择',
     first_item: '首项',
     forbidden_copy: '当前组件不允许复制',