fix(地图): 切换数据集后标记字段错误提示优化

frontend/src/lang/en.js

@@ -1366,6 +1366,7 @@ export default {
     chart_table_pivot: 'Pivot Table',
     table_pivot_row: 'Data Row',
     field_error_tips: 'This field is changed(Include dimension、quota，field type，deleted),please edit again.',
+    mark_field_error: 'The current field does not exist, please select again',
     table_border_color: 'Border Color',
     table_header_align: 'Header Align',
     table_item_align: 'Body Align',

frontend/src/lang/tw.js

@@ -1365,6 +1365,7 @@ export default {
     chart_table_pivot: '透視表',
     table_pivot_row: '數據行',
     field_error_tips: '該字段所對應的數據集原始字段發生變更（包括維度、指標，字段類型，字段被刪除等），建議重新編輯',
+    mark_field_error: '數據集變更，當前字段不存在，請重新選擇',
     table_border_color: '邊框顏色',
     table_header_align: '表頭對齊方式',
     table_item_align: '表格對齊方式',

frontend/src/lang/zh.js

@@ -1364,6 +1364,7 @@ export default {
     chart_table_pivot: '透视表',
     table_pivot_row: '数据行',
     field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑',
+    mark_field_error: '数据集变更，当前字段不存在，请重新选择',
     table_border_color: '边框颜色',
     table_header_align: '表头对齐方式',
     table_item_align: '表格对齐方式',

frontend/src/views/chart/components/functionStyle/MapMarkSelector.vue

@@ -6,11 +6,13 @@
         :model="markForm"
         label-width="40px"
         size="mini"
+        :rules="rules"
       >
 
         <el-form-item
           class="form-item"
           :label="$t('chart.mark_field')"
+          prop="fieldId"
         >
           <el-select
             v-model="markForm.fieldId"
@@ -174,7 +176,11 @@ export default {
     return {
       markForm: JSON.parse(JSON.stringify(DEFAULT_MARK)),
       values: null,
-
+      rules: {
+        fieldId: [
+          { validator: this.fieldIdValidator, trigger: 'blur' }
+        ]
+      },
       calcOptions: [{
         value: 'eq',
         label: '等于',
@@ -287,6 +293,20 @@ export default {
     this.loadSvg()
   },
   methods: {
+    fieldIdValidator(rule, value, callback) {
+      if (!value) {
+        return callback()
+      }
+      const field = this.getField(value)
+      if (!field) {
+        return callback(new Error(this.$t('chart.mark_field_error')))
+      }
+      const tagType = getItemType(this.dimensionData, this.quotaData, field)
+      if (tagType === 'danger') {
+        return callback(new Error(this.$t('chart.mark_field_error')))
+      }
+      callback()
+    },
     setConditionColor(index, color) {
       this.markForm.conditions[index].color = color
       this.changeMarkAttr('conditions')
@@ -317,10 +337,7 @@ export default {
         if (customAttr.mark) {
           this.markForm = customAttr.mark
           if (this.markForm.fieldId) {
-            const valid = this.fieldOptions.some(group => group.options.some(item => item.id === this.markForm.fieldId))
-            if (!valid) {
-              this.markForm.fieldId = null
-            }
+            this.getItemTagType()
           }
         }
       }
@@ -375,22 +392,9 @@ export default {
       this.changeMarkAttr('fieldId')
     },
     getItemTagType() {
-      if (this.markForm.fieldId) {
-        const field = this.getField(this.markForm.fieldId)
-        if (!field) {
-          this.changeFields()
-          this.markForm.fieldId = null
-          return
-        }
-        const tagType = getItemType(this.dimensionData, this.quotaData, field)
-        if (tagType === 'danger') {
-          this.changeFields()
-          this.markForm.fieldId = null
-        }
-      } else {
-        this.changeFields()
-        this.markForm.fieldId = null
-      }
+      this.$refs['markForm'].validate((valid) => {
+        console.log(valid)
+      })
     }
   }
 }