From 79349604fe8ebd15b82457f2dcc3f15d55c01e3d Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Fri, 26 Nov 2021 18:13:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E9=9B=86):=20=E5=85=B3?=
 =?UTF-8?q?=E8=81=94=E6=95=B0=E6=8D=AE=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                       |   3 +-
 frontend/src/lang/tw.js                       |   3 +-
 frontend/src/lang/zh.js                       |   3 +-
 frontend/src/views/dataset/add/AddUnion.vue   |   4 +-
 .../src/views/dataset/add/union/NodeItem.vue  |   2 +-
 .../src/views/dataset/add/union/UnionEdit.vue |  26 +--
 .../dataset/add/union/UnionFieldList.vue      | 170 ++++++++++++++++++
 .../src/views/dataset/add/union/UnionNode.vue |   2 +-
 8 files changed, 195 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/views/dataset/add/union/UnionFieldList.vue

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index fb44c61a5c..988674d5cc 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1159,7 +1159,8 @@ export default {
     edit_union: 'Edit Union Dataset',
     union: 'Union',
     edit_union_relation: 'Edit Union Relation',
-    add_union_relation: 'Add Union Relation'
+    add_union_relation: 'Add Union Relation',
+    field_select: 'Select Field'
   },
   datasource: {
     datasource: 'Data Source',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 2acad731ab..7cb081534b 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1160,7 +1160,8 @@ export default {
     edit_union: '編輯關聯數據集',
     union: '關聯',
     edit_union_relation: '編輯關聯關系',
-    add_union_relation: '新建關聯關系'
+    add_union_relation: '新建關聯關系',
+    field_select: '字段選擇'
   },
   datasource: {
     datasource: '數據源',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 08cee8b678..c8cb2ec8f6 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1162,7 +1162,8 @@ export default {
     edit_union: '编辑关联数据集',
     union: '关联',
     edit_union_relation: '编辑关联关系',
-    add_union_relation: '新建关联关系'
+    add_union_relation: '新建关联关系',
+    field_select: '字段选择'
   },
   datasource: {
     datasource: '数据源',
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
index 4253ee9fab..329bbeb7ab 100644
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -50,7 +50,7 @@
     </div>
 
     <!--选择数据集-->
-    <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close>
+    <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
       <dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
@@ -59,7 +59,7 @@
     </el-dialog>
 
     <!--编辑关联关系-->
-    <el-dialog v-dialogDrag :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="50%" class="dialog-css" destroy-on-close>
+    <el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css">
       <union-edit :union-param="unionParam" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
diff --git a/frontend/src/views/dataset/add/union/NodeItem.vue b/frontend/src/views/dataset/add/union/NodeItem.vue
index cb328594ab..dddd175d24 100644
--- a/frontend/src/views/dataset/add/union/NodeItem.vue
+++ b/frontend/src/views/dataset/add/union/NodeItem.vue
@@ -28,7 +28,7 @@
     </div>
 
     <!--选择数据集-->
-    <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close>
+    <el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
       <dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
diff --git a/frontend/src/views/dataset/add/union/UnionEdit.vue b/frontend/src/views/dataset/add/union/UnionEdit.vue
index e0e9a10f90..c020b1f4e8 100644
--- a/frontend/src/views/dataset/add/union/UnionEdit.vue
+++ b/frontend/src/views/dataset/add/union/UnionEdit.vue
@@ -1,26 +1,26 @@
 <template>
-  <div v-if="unionParam.type" style="height:400px;">
+  <div v-if="unionParam.type" style="height:600px;">
     <div class="field-style">
       <div class="fields">
         <p>{{ unionParam.parent.currentDs.name }}</p>
-        <div style="height: 150px;width: 100%;overflow-y: auto">
-          <p v-for="item in parentField" :key="item.id">
-            {{ item.name }}
-          </p>
-        </div>
+        <union-field-list :field-list="parentField" :union-param="unionParam" />
       </div>
       <div class="fields">
         <p>{{ unionParam.node.currentDs.name }}</p>
+        <union-field-list :field-list="nodeField" :union-param="unionParam" />
       </div>
     </div>
+    <el-divider />
   </div>
 </template>
 
 <script>
 import { post } from '@/api/dataset/dataset'
+import UnionFieldList from '@/views/dataset/add/union/UnionFieldList'
 
 export default {
   name: 'UnionEdit',
+  components: { UnionFieldList },
   props: {
     unionParam: {
       type: Object,
@@ -59,17 +59,21 @@ export default {
 
 <style scoped>
 .field-style{
-  height: 180px;
+  height: 300px;
 }
 .fields{
   box-sizing: border-box;
-  -moz-box-sizing: border-box; /* Firefox */
-  -webkit-box-sizing: border-box; /* Safari */
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   width: 50%;
   float: left;
-  padding: 0 4px;
+  padding: 0 6px;
 }
 p{
-  font-size: 12px;
+  font-size: 14px;
+  margin: 6px 0!important;
+}
+.el-divider--horizontal {
+  margin: 12px 0;
 }
 </style>
diff --git a/frontend/src/views/dataset/add/union/UnionFieldList.vue b/frontend/src/views/dataset/add/union/UnionFieldList.vue
new file mode 100644
index 0000000000..cbafa0cef3
--- /dev/null
+++ b/frontend/src/views/dataset/add/union/UnionFieldList.vue
@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <div class="field-block-style">
+      <div class="field-block-option">
+        <span class="option-field">{{ $t('dataset.field_select') }}({{ checkedFields.length }}/{{ fieldList.length }})</span>
+        <el-input
+          v-model="search"
+          size="mini"
+          :placeholder="$t('dataset.search')"
+          prefix-icon="el-icon-search"
+          clearable
+          class="option-input"
+        />
+      </div>
+      <div class="field-block-head">
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="check-style" @change="handleCheckAllChange">&nbsp;</el-checkbox>
+        <span class="label-style">
+          <span class="field-origin-style">{{ $t('dataset.field_origin_name') }}</span>
+          <span class="field-style">{{ $t('dataset.field_name') }}</span>
+        </span>
+      </div>
+      <div class="field-block-body">
+        <el-checkbox-group v-model="checkedFields" @change="handleCheckedCitiesChange">
+          <div v-for="field in fieldSearchList" :key="field.id" class="field-item-style">
+            <el-checkbox :label="field.id" class="check-style">&nbsp;</el-checkbox>
+            <span class="label-style">
+              <span class="field-origin-style" :title="field.originName">
+                <span>
+                  <svg-icon v-if="field.deType === 0" icon-class="field_text" class="field-icon-text" />
+                  <svg-icon v-if="field.deType === 1" icon-class="field_time" class="field-icon-time" />
+                  <svg-icon v-if="field.deType === 2 || field.deType === 3" icon-class="field_value" class="field-icon-value" />
+                  <svg-icon v-if="field.deType === 5" icon-class="field_location" class="field-icon-location" />
+                </span>
+                <span class="origin-style">
+                  {{ field.originName }}
+                </span>
+              </span>
+              <span class="field-style" :title="field.name">{{ field.name }}</span>
+            </span>
+          </div>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UnionFieldList',
+  props: {
+    fieldList: {
+      type: Array,
+      required: true
+    },
+    unionParam: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      checkAll: false,
+      isIndeterminate: false,
+      checkedFields: [],
+      search: '',
+      fieldSearchList: []
+    }
+  },
+  watch: {
+    fieldList: function() {
+      this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
+      this.init()
+    },
+    search: function(val) {
+      if (val && val !== '') {
+        this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList)).filter(ele => ele.originName.toLocaleLowerCase().includes(val.toLocaleLowerCase()))
+      } else {
+        this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.checkedFields = this.unionParam.parent.currentDsField
+      this.handleCheckedCitiesChange(this.checkedFields)
+    },
+    handleCheckAllChange(val) {
+      this.checkedFields = val ? this.fieldList.map(ele => ele.id) : []
+      this.isIndeterminate = false
+    },
+    handleCheckedCitiesChange(value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.fieldList.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
+    }
+  }
+}
+</script>
+
+<style scoped>
+span{
+  font-size: 12px;
+}
+.field-block-style{
+  height: 300px;
+  width: 100%;
+}
+.field-block-head{
+  height: 30px;
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0 0 0 10px;
+}
+.field-block-body{
+  height: 200px;
+  overflow-y: auto;
+}
+.field-origin-style{
+  width: 100px;
+  display: flex;
+  align-items: center;
+}
+.field-style{
+  margin-left: 10px;
+  width: 100px;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+}
+.label-style{
+  display: flex;
+  align-items: center;
+}
+.field-item-style{
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  border-top:1px solid #dcdfe6;
+  padding: 0 0 0 10px;
+}
+.check-style{
+  width: 30px;
+  text-align: center;
+}
+.origin-style{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+}
+.field-block-option{
+  width: 100%;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.option-field{
+  color: #C0C4CC;
+}
+.option-input{
+  width: 120px;
+}
+</style>
diff --git a/frontend/src/views/dataset/add/union/UnionNode.vue b/frontend/src/views/dataset/add/union/UnionNode.vue
index fb7eb35789..2eb950caf0 100644
--- a/frontend/src/views/dataset/add/union/UnionNode.vue
+++ b/frontend/src/views/dataset/add/union/UnionNode.vue
@@ -32,7 +32,7 @@
     </div>
 
     <!--编辑关联关系-->
-    <el-dialog v-dialogDrag :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="50%" class="dialog-css" destroy-on-close>
+    <el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css" destroy-on-close>
       <union-edit :union-param="unionParam" />
       <div slot="footer" class="dialog-footer">
         <el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>