From bbea8ecef85afef5805fefa334d55612b9c82391 Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Tue, 22 Nov 2022 15:11:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=89=E6=8B=A9=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E8=A7=A3=E6=9E=90=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                       |   1 +
 frontend/src/lang/tw.js                       |   1 +
 frontend/src/lang/zh.js                       |   1 +
 frontend/src/views/chart/view/ChartEdit.vue   |   2 -
 frontend/src/views/dataset/data/FieldEdit.vue | 135 +++++++++++-------
 5 files changed, 87 insertions(+), 53 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 1979ce85d2..c52860c2ef 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -918,6 +918,7 @@ export default {
     layer_controller: 'Quota switch',
     suspension: 'Suspension',
     chart_background: 'Component background',
+    date_format: 'Select date resolution format',
     solid_color: 'Solid color',
     split_gradient: 'Split gradient',
     continuous_gradient: 'Continuous gradient',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 4914de9835..48825494a1 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -918,6 +918,7 @@ export default {
     layer_controller: '指標切換',
     suspension: '懸浮',
     chart_background: '組件背景',
+    date_format: '選擇日期解析格式',
     solid_color: '純色',
     split_gradient: '分離漸變',
     continuous_gradient: '連續漸變',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 88749cf7c9..a5ec7337bf 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -917,6 +917,7 @@ export default {
     layer_controller: '指标切换',
     suspension: '悬浮',
     chart_background: '组件背景',
+    date_format: '请选择日期解析格式',
     solid_color: '纯色',
     split_gradient: '分离渐变',
     continuous_gradient: '连续渐变',
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 30ac660e0c..9b0b7ff39e 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1655,14 +1655,12 @@ import ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
 import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
 import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
 import { equalsAny } from '@/utils/StringUtils'
-import MarginSelector from '@/views/chart/components/componentStyle/MarginSelector'
 import PositionAdjust from '@/views/chart/view/PositionAdjust'
 
 export default {
   name: 'ChartEdit',
   components: {
     PositionAdjust,
-    MarginSelector,
     ScrollCfg,
     CalcChartFieldEdit,
     ChartFieldEdit,
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index 6e879d8947..dc35dffd72 100644
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@@ -141,46 +141,49 @@
             min-width="200"
           >
             <template slot-scope="scope">
-              <el-select
+              <el-cascader
                 v-model="scope.row.deType"
                 size="small"
-                class="select-type"
+                popper-class="select-date-resolution-format"
                 :disabled="!hasDataPermission('manage', param.privileges)"
+                class="select-type"
+                :options="fields"
+                @visible-change="getPopPosition"
                 @change="saveEdit(scope.row)"
               >
-                <el-option
-                  v-for="item in fields"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                  <span style="float: left">
+                <template slot-scope="{ node, data }">
+                  <span
+                    v-if="node.level === 2 && node.label === '%Y-%m-%d'"
+                    class="format-title"
+                    :style="popPosition"
+                  >{{ $t('chart.date_format') }}</span>
+                  <span>
                     <svg-icon
-                      v-if="item.value === 0"
+                      v-if="data.value === 0"
                       icon-class="field_text"
                       class="field-icon-text field-icon-dimension"
                     />
                     <svg-icon
-                      v-if="item.value === 1"
+                      v-if="data.value === 1"
                       icon-class="field_time"
                       class="field-icon-time field-icon-dimension"
                     />
                     <svg-icon
-                      v-if="item.value === 2 || item.value === 3"
+                      v-if="data.value === 2 || data.value === 3"
                       icon-class="field_value"
                       class="field-icon-value field-icon-dimension"
                     />
                     <svg-icon
-                      v-if="item.value === 5"
+                      v-if="data.value === 5"
                       icon-class="field_location"
                       class="field-icon-location field-icon-dimension"
                     />
                   </span>
-                  <span style="float: left; color: #8492a6; font-size: 12px">{{
-                    item.label
+                  <span style="color: #8492a6; font-size: 12px">{{
+                    data.label
                   }}</span>
-                </el-option>
-              </el-select>
+                </template>
+              </el-cascader>
               <span class="select-svg-icon">
                 <span v-if="scope.row.deType === 0 || scope.row.deType === 6">
                   <svg-icon
@@ -478,46 +481,49 @@
             min-width="200"
           >
             <template slot-scope="scope">
-              <el-select
+              <el-cascader
                 v-model="scope.row.deType"
                 size="small"
-                class="select-type"
+                popper-class="select-date-resolution-format"
                 :disabled="!hasDataPermission('manage', param.privileges)"
+                class="select-type"
+                :options="fields"
+                @visible-change="getPopPosition"
                 @change="saveEdit(scope.row)"
               >
-                <el-option
-                  v-for="item in fields"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
-                  <span style="float: left">
+                <template slot-scope="{ node, data }">
+                  <span
+                    v-if="node.level === 2 && node.label === '%Y-%m-%d'"
+                    class="format-title"
+                    :style="popPosition"
+                  >{{ $t('chart.date_format') }}</span>
+                  <span>
                     <svg-icon
-                      v-if="item.value === 0"
+                      v-if="data.value === 0"
                       icon-class="field_text"
-                      class="field-icon-text field-icon-quota"
+                      class="field-icon-text field-icon-dimension"
                     />
                     <svg-icon
-                      v-if="item.value === 1"
+                      v-if="data.value === 1"
                       icon-class="field_time"
-                      class="field-icon-time field-icon-quota"
+                      class="field-icon-time field-icon-dimension"
                     />
                     <svg-icon
-                      v-if="item.value === 2 || item.value === 3"
+                      v-if="data.value === 2 || data.value === 3"
                       icon-class="field_value"
-                      class="field-icon-value field-icon-quota"
+                      class="field-icon-value field-icon-dimension"
                     />
                     <svg-icon
-                      v-if="item.value === 5"
+                      v-if="data.value === 5"
                       icon-class="field_location"
-                      class="field-icon-location field-icon-quota"
+                      class="field-icon-location field-icon-dimension"
                     />
                   </span>
-                  <span style="float: left; color: #8492a6; font-size: 12px">{{
-                    item.label
+                  <span style="color: #8492a6; font-size: 12px">{{
+                    data.label
                   }}</span>
-                </el-option>
-              </el-select>
+                </template>
+              </el-cascader>
               <span class="select-svg-icon">
                 <span v-if="scope.row.deType === 0">
                   <svg-icon
@@ -757,7 +763,6 @@ export default {
   },
   data() {
     return {
-      dateFormats: [],
       maxHeight: 'auto',
       tableFields: {
         dimensionList: [],
@@ -765,17 +770,8 @@ export default {
         dimensionListData: [],
         quotaListData: []
       },
-      fields: [
-        { label: this.$t('dataset.text'), value: 0 },
-        { label: this.$t('dataset.time'), value: 1 },
-        { label: this.$t('dataset.value'), value: 2 },
-        {
-          label:
-            this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
-          value: 3
-        },
-        { label: this.$t('dataset.location'), value: 5 }
-      ],
+      popPosition: {},
+      fields: [],
       fieldActiveNames: ['d', 'q'],
       searchField: '',
       editCalcField: false,
@@ -811,6 +807,18 @@ export default {
         that.maxHeight = currentHeight - 56 - 30 - 35 - 26 - 10 - 10 + 'px'
       }, 10)
     },
+    getPopPosition(val) {
+      if (!val) return
+      // setTimeout(() => {
+
+      // }, 50)
+      this.$nextTick(() => {
+        const list = document.querySelectorAll('body > .select-date-resolution-format')
+        const ele = list[list.length - 1]
+        const { top, left } = ele?.style
+        this.popPosition = { top: parseInt(top) - 18 + 'px', left: parseInt(left) + 181 + 'px', position: 'fixed' }
+      })
+    },
     initField() {
       fieldListDQ(this.param.id).then((response) => {
         this.tableFields = response.data
@@ -825,7 +833,19 @@ export default {
         this.quotaChange()
       })
       dateformats(this.param.id).then((response) => {
-        this.dateFormats = response.data
+        const children = (response?.data || []).map(ele => ({ label: ele.dateformat, value: ele.dateformat }))
+        children.push({ label: '自定义', value: 'custom' })
+        this.fields = [
+          { label: this.$t('dataset.text'), value: 0 },
+          { label: this.$t('dataset.time'), value: 1, children },
+          { label: this.$t('dataset.value'), value: 2 },
+          {
+            label:
+            this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
+            value: 3
+          },
+          { label: this.$t('dataset.location'), value: 5 }
+        ]
       })
     },
     saveEdit(item) {
@@ -1153,3 +1173,16 @@ span {
   border-bottom: 0 solid #e6ebf5 !important;
 }
 </style>
+
+<style lang="scss">
+.select-date-resolution-format {
+  .format-title {
+    position: fixed;
+    display: inline-block;
+    height: 30px;
+    background: #dfe6ec;
+    width: 192px;
+    padding-left: 30px;
+  }
+}
+</style>