feat(数据集): 字段编辑调整

frontend/src/lang/zh.js

@@ -795,7 +795,8 @@ export default {
     preview_show: '显示',
     preview_item: '条数据',
     preview_total: '共',
-    pls_input_less_9: '请输入9位以内的正整数'
+    pls_input_less_9: '请输入9位以内的正整数',
+    field_edit: '编辑字段'
   },
   datasource: {
     datasource: '数据源',

frontend/src/views/dataset/add/AddSQL.vue

@@ -253,7 +253,11 @@ export default {
 
     cancel() {
       // this.dataReset()
-      this.$emit('switchComponent', { name: '' })
+      if (this.param.tableId) {
+        this.$emit('switchComponent', { name: 'ViewTable', param: this.param.tableId })
+      } else {
+        this.$emit('switchComponent', { name: '' })
+      }
     },
 
     showSQL(val) {

frontend/src/views/dataset/data/FieldEdit.vue

+<template>
+  <el-row>
+    <el-row style="height: 26px;">
+      <span style="line-height: 26px;">
+        {{ $t('dataset.field_edit') }}
+        <span>{{ param.table.name }}</span>
+      </span>
+      <el-row style="float: right">
+        <el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveEdit">{{ $t('dataset.confirm') }}</el-button>
+      </el-row>
+    </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">
+        <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>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column property="name" :label="$t('dataset.field_name')" width="180">
+        <template slot-scope="scope">
+          <el-input v-model="scope.row.name" size="mini" />
+        </template>
+      </el-table-column>
+      <el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="180" />
+      <el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
+        <template slot-scope="scope">
+          <el-checkbox v-model="scope.row.checked" />
+        </template>
+      </el-table-column>
+      <!--下面这一列占位-->
+      <el-table-column property="" />
+    </el-table>
+  </el-row>
+</template>
+
+<script>
+import { fieldList, batchEdit } from '@/api/dataset/dataset'
+export default {
+  name: 'FieldEdit',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      maxHeight: 'auto',
+      tableFields: []
+    }
+  },
+  watch: {
+
+  },
+  mounted() {
+    window.onresize = () => {
+      this.calcHeight()
+    }
+    this.calcHeight()
+    this.initField()
+  },
+  methods: {
+    calcHeight() {
+      const that = this
+      setTimeout(function() {
+        const currentHeight = document.documentElement.clientHeight
+        that.maxHeight = (currentHeight - 56 - 30 - 35 - 26 - 10) + 'px'
+      }, 10)
+    },
+    initField() {
+      fieldList(this.param.table.id).then(response => {
+        this.tableFields = response.data
+      })
+    },
+    saveEdit() {
+      // console.log(this.tableFields)
+      batchEdit(this.tableFields).then(response => {
+        this.closeEdit()
+      })
+    },
+
+    closeEdit() {
+      this.$emit('switchComponent', { name: 'ViewTable', param: this.param.table.id })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 12px 0;
+  }
+  span{
+    font-size: 14px;
+  }
+  .field-class{
+    font-size: 12px !important;
+  }
+</style>

frontend/src/views/dataset/data/ViewTable.vue

@@ -38,53 +38,11 @@
         <update-info :table="table" />
       </el-tab-pane>
     </el-tabs>
-
-    <el-dialog :title="table.name" :visible.sync="editField" :fullscreen="true" :show-close="false" class="dialog-css">
-      <el-table :data="tableFields" size="mini" :max-height="maxHeight">
-        <el-table-column property="type" :label="$t('dataset.field_type')" width="100">
-          <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" />
-              {{ $t('dataset.text') }}
-            </span>
-            <span v-if="scope.row.deType === 1">
-              <svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
-              {{ $t('dataset.time') }}
-            </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" />
-              {{ $t('dataset.value') }}
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column property="name" :label="$t('dataset.field_name')" width="180">
-          <template slot-scope="scope">
-            <el-input v-model="scope.row.name" size="mini" />
-          </template>
-        </el-table-column>
-        <el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="180" />
-        <el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
-          <template slot-scope="scope">
-            <el-checkbox v-model="scope.row.checked" />
-          </template>
-        </el-table-column>
-        <!--下面这一列占位-->
-        <el-table-column property="" />
-      </el-table>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveEdit">{{ $t('dataset.confirm') }}</el-button>
-      </div>
-    </el-dialog>
-
-    <!--    <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">-->
-    <!--      <chart-edit/>-->
-    <!--    </el-dialog>-->
   </el-row>
 </template>
 
 <script>
-import { getTable, post, fieldList, batchEdit } from '@/api/dataset/dataset'
+import { getTable, post } from '@/api/dataset/dataset'
 import TabDataPreview from './TabDataPreview'
 import UpdateInfo from './UpdateInfo'
 import DatasetChartDetail from '../common/DatasetChartDetail'
@@ -100,8 +58,6 @@ export default {
   },
   data() {
     return {
-      createViewDialog: false,
-      editField: false,
       table: {
         name: ''
       },
@@ -113,27 +69,18 @@ export default {
         show: 1000
       },
       tabActive: 'dataPreview',
-      tableFields: [],
       tableViewRowForm: {
         row: 1000
       },
-      tabStatus: false,
-      maxHeight: 'auto'
+      tabStatus: false
     }
   },
-  // computed: {
-  //   tableId() {
-  //     this.initTable(this.$store.state.dataset.table)
-  //     return this.$store.state.dataset.table
-  //   }
-  // },
   watch: {
     'param': function() {
       this.initTable(this.param)
     }
   },
   mounted() {
-    this.maxHeight = (document.documentElement.clientHeight - 45 - 78) + 'px'
     this.initTable(this.param)
   },
   methods: {
@@ -162,34 +109,8 @@ export default {
       }
     },
 
-    initTableFields() {
-      fieldList(this.table.id).then(response => {
-        this.tableFields = response.data
-      })
-    },
-
     edit() {
-      this.editField = true
-      // 请求当前表的所有字段，进行编辑
-      this.initTableFields()
-    },
-
-    // createChart() {
-    //   console.log(this.table);
-    //   this.createViewDialog = true;
-    // },
-
-    saveEdit() {
-      console.log(this.tableFields)
-      batchEdit(this.tableFields).then(response => {
-        this.closeEdit()
-        this.initTable(this.table.id)
-      })
-    },
-
-    closeEdit() {
-      this.editField = false
-      this.tableFields = []
+      this.$emit('switchComponent', { name: 'FieldEdit', param: { table: this.table }})
     },
 
     editSql() {
@@ -219,17 +140,4 @@ export default {
   .form-item {
     margin-bottom: 6px;
   }
-
-  .dialog-css>>>.el-dialog__title {
-    font-size: 14px;
-  }
-  .dialog-css >>> .el-dialog__header {
-    padding: 20px 20px 0;
-  }
-  .dialog-css >>> .el-dialog__body {
-    padding: 10px 20px;
-  }
-  .dialog-css >>> .el-dialog__footer {
-    padding-top: 10px;
-  }
 </style>

frontend/src/views/dataset/index.vue

@@ -24,6 +24,7 @@ import AddDB from './add/AddDB'
 import AddSQL from './add/AddSQL'
 import AddExcel from './add/AddExcel'
 import AddCustom from './add/AddCustom'
+import FieldEdit from './data/FieldEdit'
 
 export default {
   name: 'DataSet',
@@ -54,6 +55,9 @@ export default {
         case 'AddCustom':
           this.component = AddCustom
           break
+        case 'FieldEdit':
+          this.component = FieldEdit
+          break
         default:
           this.component = DataHome
           break