From 516ce8142e9aea940f8a8a1c36aa4ab38743f9d6 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Tue, 11 May 2021 17:35:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):UI->=E6=95=B0=E6=8D=AE=E9=9B=86?=
 =?UTF-8?q?=20=E5=AD=97=E6=AE=B5=E7=BC=96=E8=BE=91=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AD=97=E6=AE=B5=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/zh.js                       |  5 +-
 frontend/src/views/dataset/data/FieldEdit.vue | 56 ++++++++++++++-----
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 6bf60e6d46..bc118254a5 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -812,9 +812,10 @@ export default {
     target_field: '被关联字段',
     union_relation: '关联关系',
     pls_setting_union_success: '请正确设置关联关系',
-    invalid_dataset:'Kettle未运行，无效数据集',
+    invalid_dataset: 'Kettle未运行，无效数据集',
     check_all: '全选',
-    can_not_union_self: '被关联表不能与关联表相同'
+    can_not_union_self: '被关联表不能与关联表相同',
+    float: '小数'
   },
   datasource: {
     datasource: '数据源',
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index 3a03192151..d3be80d2f7 100644
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@@ -12,19 +12,37 @@
     </el-row>
     <el-divider />
     <el-table :data="tableFields" size="mini" :max-height="maxHeight">
-      <el-table-column property="type" :label="$t('dataset.field_type')" width="100">
+      <el-table-column property="type" :label="$t('dataset.field_type')" width="180">
         <template slot-scope="scope">
-          <span v-if="scope.row.deType === 0">
-            <svg-icon v-if="scope.row.deType === 0" icon-class="field_text" class="field-icon-text" />
-            <span class="field-class">{{ $t('dataset.text') }}</span>
-          </span>
-          <span v-if="scope.row.deType === 1">
-            <svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
-            <span class="field-class">{{ $t('dataset.time') }}</span>
-          </span>
-          <span v-if="scope.row.deType === 2 || scope.row.deType === 3">
-            <svg-icon v-if="scope.row.deType === 2 || scope.row.deType === 3" icon-class="field_value" class="field-icon-value" />
-            <span class="field-class">{{ $t('dataset.value') }}</span>
+          <el-select v-model="scope.row.deType" size="mini" style="display: inline-block;width: 26px;">
+            <el-option
+              v-for="item in fields"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+              <span style="float: left">
+                <svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />
+                <svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />
+                <svg-icon v-if="item.value === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />
+              </span>
+              <span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <span style="margin-left: 8px;">
+            <span v-if="scope.row.deType === 0">
+              <svg-icon v-if="scope.row.deType === 0" icon-class="field_text" class="field-icon-text" />
+              <span class="field-class">{{ $t('dataset.text') }}</span>
+            </span>
+            <span v-if="scope.row.deType === 1">
+              <svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
+              <span class="field-class">{{ $t('dataset.time') }}</span>
+            </span>
+            <span v-if="scope.row.deType === 2 || scope.row.deType === 3">
+              <svg-icon v-if="scope.row.deType === 2 || scope.row.deType === 3" icon-class="field_value" class="field-icon-value" />
+              <span v-if="scope.row.deType === 2" class="field-class">{{ $t('dataset.value') }}</span>
+              <span v-if="scope.row.deType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
+            </span>
           </span>
         </template>
       </el-table-column>
@@ -58,7 +76,13 @@ export default {
   data() {
     return {
       maxHeight: 'auto',
-      tableFields: []
+      tableFields: [],
+      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 }
+      ]
     }
   },
   watch: {
@@ -108,4 +132,10 @@ export default {
   .field-class{
     font-size: 12px !important;
   }
+  .el-select>>>input{
+    padding-right: 10px;
+  }
+  .el-select>>>.el-input__suffix{
+    right: 0;
+  }
 </style>