feat(数据集): 关联数据集

frontend/src/lang/en.js

@@ -1163,7 +1163,8 @@ export default {
     field_select: 'Select Field',
     add_union_field: 'Add Union Field',
     union_error: 'Union relation and field can not be empty',
-    union_repeat: 'This dataset is already union，do not union repeat'
+    union_repeat: 'This dataset is already union，do not union repeat',
+    preview_result: 'Preview'
   },
   datasource: {
     datasource: 'Data Source',

frontend/src/lang/tw.js

@@ -1164,7 +1164,8 @@ export default {
     field_select: '字段選擇',
     add_union_field: '添加關聯字段',
     union_error: '關聯關系與關聯字段不能為空',
-    union_repeat: '當前數據集已被關聯，請勿重復關聯'
+    union_repeat: '當前數據集已被關聯，請勿重復關聯',
+    preview_result: '預覽結果'
   },
   datasource: {
     datasource: '數據源',

frontend/src/lang/zh.js

@@ -1166,7 +1166,8 @@ export default {
     field_select: '字段选择',
     add_union_field: '添加关联字段',
     union_error: '关联关系与关联字段不能为空',
-    union_repeat: '当前数据集已被关联，请勿重复关联'
+    union_repeat: '当前数据集已被关联，请勿重复关联',
+    preview_result: '预览结果'
   },
   datasource: {
     datasource: '数据源',

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

@@ -15,10 +15,15 @@
     </el-row>
     <el-divider />
     <div>
-      <el-form :inline="true">
+      <el-form :inline="true" style="display: flex;align-items: center;justify-content: space-between;">
         <el-form-item class="form-item">
           <el-input v-model="name" size="mini" :placeholder="$t('commons.name')" clearable />
         </el-form-item>
+        <el-form-item class="form-item">
+          <el-button size="mini" @click="previewData">
+            {{ $t('dataset.preview_result') }}
+          </el-button>
+        </el-form-item>
       </el-form>
       <!--添加第一个数据集按钮-->
       <div v-if="dataset.length === 0">
@@ -70,6 +75,11 @@
         <el-button type="primary" size="mini" @click="confirmEditUnion()">{{ $t('dataset.confirm') }}</el-button>
       </div>
     </el-dialog>
+
+    <!--数据预览界面-->
+    <el-drawer v-if="showPreview" :title="$t('dataset.preview_result')" :visible.sync="showPreview" direction="btt" class="preview-style">
+      <union-preview :table="previewTable" :dataset="dataset" />
+    </el-drawer>
   </el-row>
 </template>
 
@@ -79,9 +89,10 @@ import NodeItem from '@/views/dataset/add/union/NodeItem'
 import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
 import UnionEdit from '@/views/dataset/add/union/UnionEdit'
 import { getTable, post } from '@/api/dataset/dataset'
+import UnionPreview from '@/views/dataset/add/union/UnionPreview'
 export default {
   name: 'AddUnion',
-  components: { UnionEdit, DatasetGroupSelectorTree, NodeItem, UnionNode },
+  components: { UnionPreview, UnionEdit, DatasetGroupSelectorTree, NodeItem, UnionNode },
   props: {
     param: {
       type: Object,
@@ -133,7 +144,9 @@ export default {
       // 弹框临时选中的数据集
       tempDs: {},
       editUnion: false,
-      unionParam: {}
+      unionParam: {},
+      showPreview: false,
+      previewTable: {}
     }
   },
   watch: {
@@ -169,7 +182,7 @@ export default {
         dataSourceId: this.dataset[0].currentDs.dataSourceId,
         type: 'union',
         mode: this.dataset[0].currentDs.mode,
-        info: '{"list":' + JSON.stringify(this.dataset) + '}'
+        info: '{"union":' + JSON.stringify(this.dataset) + '}'
       }
       post('/dataset/table/update', table).then(response => {
         this.$emit('saveSuccess', table)
@@ -270,9 +283,22 @@ export default {
         getTable(this.param.tableId).then(response => {
           const table = JSON.parse(JSON.stringify(response.data))
           this.name = table.name
-          this.dataset = JSON.parse(table.info).list
+          this.dataset = JSON.parse(table.info).union
         })
       }
+    },
+
+    previewData() {
+      this.previewTable = {
+        id: this.param.tableId,
+        name: this.name,
+        sceneId: this.param.id,
+        dataSourceId: this.dataset[0].currentDs.dataSourceId,
+        type: 'union',
+        mode: this.dataset[0].currentDs.mode,
+        info: '{"union":' + JSON.stringify(this.dataset) + '}'
+      }
+      this.showPreview = true
     }
   }
 }
@@ -294,4 +320,15 @@ export default {
 .dialog-css >>> .el-dialog__body {
   padding: 0 20px;
 }
+.preview-style >>> .el-drawer{
+  height: 50%!important;
+}
+.preview-style >>> .el-drawer .el-drawer__header{
+  margin-bottom: 10px!important;
+  padding: 10px 16px 0!important;
+  font-size: 14px;
+}
+.preview-style >>> .el-drawer .el-drawer__body{
+  padding: 0 16px 10px!important;
+}
 </style>

frontend/src/views/dataset/add/union/UnionPreview.vue

@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div class="text item">
+      <ux-grid
+        ref="plxTable"
+        size="mini"
+        style="width: 100%;"
+        :height="height"
+        :checkbox-config="{highlight: true}"
+        :width-resize="true"
+      >
+        <ux-table-column
+          v-for="field in fields"
+          :key="field.fieldName"
+          min-width="200px"
+          :field="field.fieldName"
+          :title="field.remarks"
+          :resizable="true"
+        />
+      </ux-grid>
+    </div>
+    <span class="table-count">
+      {{ $t('dataset.preview_show') }}
+      <span class="span-number">1000</span>
+      {{ $t('dataset.preview_item') }}
+    </span>
+  </div>
+</template>
+
+<script>
+import { post } from '@/api/dataset/dataset'
+
+export default {
+  name: 'UnionPreview',
+  props: {
+    table: {
+      type: Object,
+      required: true
+    },
+    dataset: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      height: 'auto',
+      fields: [],
+      data: []
+    }
+  },
+  watch: {
+    'table': function() {
+      this.initPreview()
+    }
+  },
+  mounted() {
+    this.initHeight()
+    this.initPreview()
+  },
+  methods: {
+    initHeight() {
+      this.height = (document.getElementsByClassName('el-drawer__body')[0].clientHeight - 40) + 'px'
+    },
+    initPreview() {
+      if (this.dataset && this.dataset.length > 0) {
+        post('/dataset/table/unionPreview', this.table).then(response => {
+          this.fields = response.data.fields
+          this.data = response.data.data
+          const datas = this.data
+          this.$refs.plxTable.reloadData(datas)
+        })
+      } else {
+        this.fields = []
+        this.data = []
+        const datas = this.data
+        this.$refs.plxTable.reloadData(datas)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.span-number{
+  color: #0a7be0;
+}
+.table-count{
+  color: #606266;
+}
+span{
+  font-size: 12px;
+}
+</style>

frontend/src/views/dataset/common/DatasetGroupSelectorTree.vue

@@ -61,6 +61,7 @@
                   <svg-icon v-if="data.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
                   <svg-icon v-if="data.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
                   <svg-icon v-if="data.modelInnerType === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
+                  <svg-icon v-if="data.modelInnerType === 'union'" icon-class="ds-union" class="ds-icon-union" />
                 </span>
                 <span v-if="data.modelInnerType === 'db' || data.modelInnerType === 'sql'">
                   <span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>

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

@@ -15,7 +15,7 @@
       <el-form :inline="true">
         <el-form-item class="form-item">
           <el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" icon="el-icon-circle-plus-outline" @click="addCalcField">{{ $t('dataset.add_calc_field') }}</el-button>
-          <el-button v-if="hasDataPermission('manage',param.privileges) && table.type !== 'excel' && table.type !== 'custom'" size="mini" :loading="isSyncField" icon="el-icon-refresh-left" @click="syncField">{{ $t('dataset.sync_field') }}</el-button>
+          <el-button v-if="hasDataPermission('manage',param.privileges) && table.type !== 'excel' && table.type !== 'custom' && table.type !== 'union'" size="mini" :loading="isSyncField" icon="el-icon-refresh-left" @click="syncField">{{ $t('dataset.sync_field') }}</el-button>
         </el-form-item>
         <el-form-item class="form-item" style="float: right;margin-right: 0;">
           <el-input
@@ -43,7 +43,7 @@
               <el-input v-model="scope.row.name" size="mini" :disabled="!hasDataPermission('manage',param.privileges)" @blur="saveEdit(scope.row)" @keyup.enter.native="saveEdit(scope.row)" />
             </template>
           </el-table-column>
-          <el-table-column v-if="!(param.mode === 0 && param.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
+          <el-table-column v-if="!(table.mode === 0 && (table.type === 'custom' || table.type === 'union'))" property="originName" :label="$t('dataset.field_origin_name')" width="100">
             <template slot-scope="scope">
               <span v-if="scope.row.extField === 0" :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                 <span style="font-size: 12px;">{{ scope.row.originName }}</span>
@@ -149,7 +149,7 @@
               <el-input v-model="scope.row.name" size="mini" :disabled="!hasDataPermission('manage',param.privileges)" @blur="saveEdit(scope.row)" @keyup.enter.native="saveEdit(scope.row)" />
             </template>
           </el-table-column>
-          <el-table-column v-if="!(param.mode === 0 && param.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
+          <el-table-column v-if="!(table.mode === 0 && (table.type === 'custom' || table.type === 'union'))" property="originName" :label="$t('dataset.field_origin_name')" width="100">
             <template slot-scope="scope">
               <span v-if="scope.row.extField === 0" :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                 <span style="font-size: 12px;">{{ scope.row.originName }}</span>

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

@@ -37,7 +37,7 @@
       </ux-table-column>
     </ux-grid>
     <el-row style="margin-top: 4px;">
-      <span v-if="table.type === 'excel' || table.type === 'custom'" class="table-count">
+      <span v-if="table.type === 'excel' || table.type === 'custom' || table.type === 'union'" class="table-count">
         <span v-if="page.total <= currentPage.show">
           {{ $t('dataset.preview_total') }}
           <span class="span-number">{{ page.total }}</span>

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

@@ -56,9 +56,6 @@
       <el-tab-pane :label="$t('dataset.field_manage')" name="fieldEdit">
         <field-edit :param="param" :table="table" />
       </el-tab-pane>
-      <el-tab-pane v-if="table.type !== 'custom' && !(table.type === 'sql' && table.mode === 0)" :label="$t('dataset.join_view')" name="joinView">
-        <union-view :param="param" :table="table" />
-      </el-tab-pane>
       <el-tab-pane v-if="table.mode === 1 && (table.type === 'excel' || table.type === 'db' || table.type === 'sql')" :label="$t('dataset.update_info')" name="updateInfo">
         <update-info v-if="tabActive=='updateInfo'" :param="param" :table="table" />
       </el-tab-pane>

frontend/src/views/dataset/group/Group.vue

@@ -89,9 +89,9 @@
                               <svg-icon icon-class="ds-excel" class="ds-icon-excel" />
                               {{ $t('dataset.excel_data') }}
                             </el-dropdown-item>
-                            <el-dropdown-item :command="beforeClickAddData('custom',data)">
-                              <svg-icon icon-class="ds-custom" class="ds-icon-custom" />
-                              {{ $t('dataset.custom_data') }}
+                            <el-dropdown-item :command="beforeClickAddData('union',data)">
+                              <svg-icon icon-class="ds-union" class="ds-icon-union" />
+                              {{ $t('dataset.union_data') }}
                             </el-dropdown-item>
                           </el-dropdown-menu>
                         </el-dropdown>