From b2dc85232aba0878a98525894646bb07068789d7 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 29 Nov 2021 17:21:02 +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

---
 .../src/views/dataset/add/union/NodeItem.vue  | 30 +++++++++++++++----
 .../dataset/add/union/UnionFieldEdit.vue      | 27 +++++++++++++++--
 frontend/src/views/dataset/group/Group.vue    | 10 +++----
 3 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/frontend/src/views/dataset/add/union/NodeItem.vue b/frontend/src/views/dataset/add/union/NodeItem.vue
index 2528462454..5dc218cfc5 100644
--- a/frontend/src/views/dataset/add/union/NodeItem.vue
+++ b/frontend/src/views/dataset/add/union/NodeItem.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="ds-node" @click="nodeClick">
-      <svg-icon v-if="currentNode.currentDs.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
-      <svg-icon v-else-if="currentNode.currentDs.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
-      <svg-icon v-else-if="currentNode.currentDs.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
+      <svg-icon v-if="currentNode.currentDs.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
+      <svg-icon v-else-if="currentNode.currentDs.modelInnerType === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
+      <svg-icon v-else-if="currentNode.currentDs.modelInnerType === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
 
       <span class="node-name" :title="currentNode.currentDs.name">{{ currentNode.currentDs.name }}</span>
 
@@ -35,14 +35,24 @@
         <el-button :disabled="!tempDs.id" type="primary" size="mini" @click="confirmSelectDs()">{{ $t('dataset.confirm') }}</el-button>
       </div>
     </el-dialog>
+
+    <!--编辑单个数据集字段-->
+    <el-dialog v-if="editField" v-dialogDrag :title="$t('dataset.field_select')" :visible="editField" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
+      <union-field-edit :node="currentNode" />
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeEditField()">{{ $t('dataset.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="confirmEditField()">{{ $t('dataset.confirm') }}</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import DatasetGroupSelectorTree from '@/views/dataset/common/DatasetGroupSelectorTree'
+import UnionFieldEdit from '@/views/dataset/add/union/UnionFieldEdit'
 export default {
   name: 'NodeItem',
-  components: { DatasetGroupSelectorTree },
+  components: { UnionFieldEdit, DatasetGroupSelectorTree },
   props: {
     currentNode: {
       type: Object,
@@ -70,12 +80,13 @@ export default {
       // 弹框临时选中的数据集
       tempDs: {},
       // 父级数据集
-      tempParentDs: {}
+      tempParentDs: {},
+      editField: false
     }
   },
   methods: {
     nodeClick() {
-      console.log('node click to edit')
+      this.editField = true
     },
     nodeMenuClick(param) {
       switch (param.type) {
@@ -102,6 +113,7 @@ export default {
       this.selectDs()
     },
     editNode(param) {
+      this.nodeClick()
     },
     deleteNode(param) {
       this.$emit('deleteNode', this.nodeIndex)
@@ -138,6 +150,12 @@ export default {
     // 增加与删除事件向父级传递
     notifyFirstParent(type) {
       this.$emit('notifyParent', { type: type, grandParentAdd: true, grandParentSub: true, subCount: this.currentNode.allChildCount })
+    },
+    closeEditField() {
+      this.editField = false
+    },
+    confirmEditField() {
+      this.editField = false
     }
   }
 }
diff --git a/frontend/src/views/dataset/add/union/UnionFieldEdit.vue b/frontend/src/views/dataset/add/union/UnionFieldEdit.vue
index 5169e28e54..afb2ee9131 100644
--- a/frontend/src/views/dataset/add/union/UnionFieldEdit.vue
+++ b/frontend/src/views/dataset/add/union/UnionFieldEdit.vue
@@ -1,19 +1,40 @@
 <template>
-  <div>123</div>
+  <div>
+    <p>{{ node.currentDs.name }}</p>
+    <union-field-list :field-list="fieldList" :node="node" @checkedFields="changeFields" />
+  </div>
 </template>
 
 <script>
+import { post } from '@/api/dataset/dataset'
+import UnionFieldList from '@/views/dataset/add/union/UnionFieldList'
+
 export default {
   name: 'UnionFieldEdit',
+  components: { UnionFieldList },
+  props: {
+    node: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     return {
-
+      fieldList: []
     }
   },
   mounted() {
+    this.getFieldList()
   },
   methods: {
-
+    getFieldList() {
+      post('/dataset/field/list/' + this.node.currentDs.id, null, true).then(response => {
+        this.fieldList = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
+      })
+    },
+    changeFields(val) {
+      this.node.currentDsField = val
+    }
   }
 }
 </script>
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 0fc454169e..8a83a8507d 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -130,11 +130,11 @@
             <span v-else slot-scope="{ node, data }" class="custom-tree-node-list father">
               <span style="display: flex;flex: 1;width: 0;">
                 <span>
-                  <svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
-                  <svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
-                  <svg-icon v-if="data.type === 'excel'" icon-class="ds-excel" class="ds-icon-excel" />
-                  <svg-icon v-if="data.type === 'custom'" icon-class="ds-custom" class="ds-icon-custom" />
-                  <svg-icon v-if="data.type === 'union'" icon-class="ds-union" class="ds-icon-union" />
+                  <svg-icon v-if="data.modelInnerType === 'db'" icon-class="ds-db" class="ds-icon-db" />
+                  <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>