From 67f5160312f3d5318235002960fdb714465662bf Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 26 Jul 2021 16:08:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=95=B0=E6=8D=AE=E9=9B=86?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E5=B0=86=E7=BB=B4=E5=BA=A6=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E5=B1=95=E7=A4=BA=EF=BC=8C=E5=90=8E=E7=BB=AD?=
 =?UTF-8?q?=E7=BB=B4=E5=BA=A6=E5=92=8C=E6=8C=87=E6=A0=87=E5=85=B7=E6=9C=89?=
 =?UTF-8?q?=E4=B8=8D=E5=90=8C=E7=9A=84=E6=93=8D=E4=BD=9C=EF=BC=8C=E4=B8=BA?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=92=BB=E5=8F=96=E7=9B=AE=E5=BD=95=E3=80=81?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E8=AE=A1=E7=AE=97=E5=81=9A=E5=89=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=87=86=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataset/DataSetTableFieldController.java  |  17 +
 .../dataset/DataSetTableFieldsService.java    |   4 +
 frontend/src/api/dataset/dataset.js           |   8 +
 frontend/src/views/chart/view/ChartEdit.vue   |   5 -
 frontend/src/views/dataset/data/FieldEdit.vue | 304 ++++++++++++------
 5 files changed, 238 insertions(+), 100 deletions(-)

diff --git a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
index 7703a6c79e..8a216eeb5a 100644
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
@@ -7,7 +7,9 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
 
 import javax.annotation.Resource;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 /**
  * @Author gin
@@ -29,6 +31,21 @@ public class DataSetTableFieldController {
         return dataSetTableFieldsService.list(datasetTableField);
     }
 
+    @PostMapping("listByDQ/{tableId}")
+    public Map<String, List<DatasetTableField>> listByDQ(@PathVariable String tableId) {
+        DatasetTableField datasetTableField = DatasetTableField.builder().build();
+        datasetTableField.setTableId(tableId);
+        datasetTableField.setGroupType("d");
+        List<DatasetTableField> dimensionList = dataSetTableFieldsService.list(datasetTableField);
+        datasetTableField.setGroupType("q");
+        List<DatasetTableField> quotaList = dataSetTableFieldsService.list(datasetTableField);
+
+        Map<String, List<DatasetTableField>> map = new HashMap<>();
+        map.put("dimensionList", dimensionList);
+        map.put("quotaList", quotaList);
+        return map;
+    }
+
     @PostMapping("batchEdit")
     public void batchEdit(@RequestBody List<DatasetTableField> list) {
         dataSetTableFieldsService.batchEdit(list);
diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetTableFieldsService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetTableFieldsService.java
index 056bc1b03a..189155738a 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableFieldsService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableFieldsService.java
@@ -11,6 +11,7 @@ import org.springframework.stereotype.Service;
 import javax.annotation.Resource;
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Map;
 import java.util.UUID;
 
 /**
@@ -47,6 +48,9 @@ public class DataSetTableFieldsService {
         if (ObjectUtils.isNotEmpty(datasetTableField.getChecked())) {
             criteria.andCheckedEqualTo(datasetTableField.getChecked());
         }
+        if (ObjectUtils.isNotEmpty(datasetTableField.getGroupType())) {
+            criteria.andGroupTypeEqualTo(datasetTableField.getGroupType());
+        }
         datasetTableFieldExample.setOrderByClause("column_index asc");
         return datasetTableFieldMapper.selectByExample(datasetTableFieldExample);
     }
diff --git a/frontend/src/api/dataset/dataset.js b/frontend/src/api/dataset/dataset.js
index d011d924c0..ebd256eaf9 100644
--- a/frontend/src/api/dataset/dataset.js
+++ b/frontend/src/api/dataset/dataset.js
@@ -94,6 +94,14 @@ export function fieldList(id, showLoading = true) {
   })
 }
 
+export function fieldListDQ(id, showLoading = true) {
+  return request({
+    url: '/dataset/field/listByDQ/' + id,
+    loading: showLoading,
+    method: 'post'
+  })
+}
+
 export function batchEdit(data) {
   return request({
     url: '/dataset/field/batchEdit',
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 5b61e73df9..54c9469390 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1574,11 +1574,6 @@ export default {
     padding: 0;
     height: 100%;
   }
-  .collapse-style>>>.el-collapse-item__header{
-    height: 40px;
-    line-height: 40px;
-    padding: 0 0 0 10px;
-  }
   .tree-select-span {
       >>>div.vue-treeselect__control {
           height: 32px !important;
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index 702b9d89a9..7cc926b817 100644
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@@ -11,102 +11,200 @@
       </el-row>
     </el-row>
     <el-divider />
-    <el-table :data="tableFields" size="mini" :max-height="maxHeight">
-      <el-table-column property="deType" :label="$t('dataset.field_type')" width="140">
-        <template slot-scope="scope">
-          <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" />
-                <svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
+
+    <el-collapse v-model="fieldActiveNames" class="style-collapse">
+      <el-collapse-item name="d" :title="$t('chart.dimension')">
+        <el-table :data="tableFields.dimensionList" size="mini" :max-height="maxHeight">
+          <el-table-column property="deType" :label="$t('dataset.field_type')" width="140">
+            <template slot-scope="scope">
+              <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" />
+                    <svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
+                  </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 v-if="scope.row.deType === 5">
+                  <svg-icon v-if="scope.row.deType === 5" icon-class="field_location" class="field-icon-location" />
+                  <span class="field-class">{{ $t('dataset.location') }}</span>
+                </span>
               </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 v-if="scope.row.deType === 5">
-              <svg-icon v-if="scope.row.deType === 5" icon-class="field_location" class="field-icon-location" />
-              <span class="field-class">{{ $t('dataset.location') }}</span>
-            </span>
-          </span>
-        </template>
-      </el-table-column>
-      <el-table-column property="deExtractType" :label="$t('dataset.origin_field_type')" width="100">
-        <template slot-scope="scope">
-          <span>
-            <span v-if="scope.row.deExtractType === 0">
-              <svg-icon v-if="scope.row.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
-              <span class="field-class">{{ $t('dataset.text') }}</span>
-            </span>
-            <span v-if="scope.row.deExtractType === 1">
-              <svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
-              <span class="field-class">{{ $t('dataset.time') }}</span>
-            </span>
-            <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4">
-              <svg-icon v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4" icon-class="field_value" class="field-icon-value" />
-              <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 4" class="field-class">{{ $t('dataset.value') }}</span>
-              <span v-if="scope.row.deExtractType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
-            </span>
-            <span v-if="scope.row.deExtractType === 5">
-              <svg-icon v-if="scope.row.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
-              <span class="field-class">{{ $t('dataset.location') }}</span>
-            </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 v-if="!(param.table.mode === 0 && param.table.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
-        <template slot-scope="scope">
-          <span :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>
-          </span>
-        </template>
-      </el-table-column>
-      <el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">
-        <template slot-scope="scope">
-          <el-radio-group v-model="scope.row.groupType" size="mini">
-            <el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
-            <el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
-          </el-radio-group>
-        </template>
-      </el-table-column>
-      <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>
+            </template>
+          </el-table-column>
+          <el-table-column property="deExtractType" :label="$t('dataset.origin_field_type')" width="100">
+            <template slot-scope="scope">
+              <span>
+                <span v-if="scope.row.deExtractType === 0">
+                  <svg-icon v-if="scope.row.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
+                  <span class="field-class">{{ $t('dataset.text') }}</span>
+                </span>
+                <span v-if="scope.row.deExtractType === 1">
+                  <svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
+                  <span class="field-class">{{ $t('dataset.time') }}</span>
+                </span>
+                <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4">
+                  <svg-icon v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4" icon-class="field_value" class="field-icon-value" />
+                  <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 4" class="field-class">{{ $t('dataset.value') }}</span>
+                  <span v-if="scope.row.deExtractType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
+                </span>
+                <span v-if="scope.row.deExtractType === 5">
+                  <svg-icon v-if="scope.row.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
+                  <span class="field-class">{{ $t('dataset.location') }}</span>
+                </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 v-if="!(param.table.mode === 0 && param.table.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
+            <template slot-scope="scope">
+              <span :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>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">
+            <template slot-scope="scope">
+              <el-radio-group v-model="scope.row.groupType" size="mini">
+                <el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
+                <el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
+              </el-radio-group>
+            </template>
+          </el-table-column>
+          <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-collapse-item>
+      <el-collapse-item name="q" :title="$t('chart.quota')">
+        <el-table :data="tableFields.quotaList" size="mini" :max-height="maxHeight">
+          <el-table-column property="deType" :label="$t('dataset.field_type')" width="140">
+            <template slot-scope="scope">
+              <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" />
+                    <svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
+                  </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 v-if="scope.row.deType === 5">
+                  <svg-icon v-if="scope.row.deType === 5" icon-class="field_location" class="field-icon-location" />
+                  <span class="field-class">{{ $t('dataset.location') }}</span>
+                </span>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column property="deExtractType" :label="$t('dataset.origin_field_type')" width="100">
+            <template slot-scope="scope">
+              <span>
+                <span v-if="scope.row.deExtractType === 0">
+                  <svg-icon v-if="scope.row.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
+                  <span class="field-class">{{ $t('dataset.text') }}</span>
+                </span>
+                <span v-if="scope.row.deExtractType === 1">
+                  <svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
+                  <span class="field-class">{{ $t('dataset.time') }}</span>
+                </span>
+                <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4">
+                  <svg-icon v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4" icon-class="field_value" class="field-icon-value" />
+                  <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 4" class="field-class">{{ $t('dataset.value') }}</span>
+                  <span v-if="scope.row.deExtractType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
+                </span>
+                <span v-if="scope.row.deExtractType === 5">
+                  <svg-icon v-if="scope.row.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
+                  <span class="field-class">{{ $t('dataset.location') }}</span>
+                </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 v-if="!(param.table.mode === 0 && param.table.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
+            <template slot-scope="scope">
+              <span :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>
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">
+            <template slot-scope="scope">
+              <el-radio-group v-model="scope.row.groupType" size="mini">
+                <el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
+                <el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
+              </el-radio-group>
+            </template>
+          </el-table-column>
+          <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-collapse-item>
+    </el-collapse>
   </el-row>
 </template>
 
 <script>
-import { fieldList, batchEdit } from '@/api/dataset/dataset'
+import { batchEdit, fieldListDQ } from '@/api/dataset/dataset'
 export default {
   name: 'FieldEdit',
   props: {
@@ -118,14 +216,18 @@ export default {
   data() {
     return {
       maxHeight: 'auto',
-      tableFields: [],
+      tableFields: {
+        dimensionList: [],
+        quotaList: []
+      },
       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 },
         { label: this.$t('dataset.location'), value: 5 }
-      ]
+      ],
+      fieldActiveNames: ['d', 'q']
     }
   },
   watch: {
@@ -147,13 +249,14 @@ export default {
       }, 10)
     },
     initField() {
-      fieldList(this.param.table.id).then(response => {
+      fieldListDQ(this.param.table.id).then(response => {
         this.tableFields = response.data
       })
     },
     saveEdit() {
       // console.log(this.tableFields)
-      batchEdit(this.tableFields).then(response => {
+      const list = this.tableFields.dimensionList.concat(this.tableFields.quotaList)
+      batchEdit(list).then(response => {
         this.closeEdit()
       })
     },
@@ -184,4 +287,15 @@ export default {
   .el-radio{
     margin-right: 10px !important;
   }
+  .style-collapse>>>.el-collapse-item__header{
+    height: 40px;
+    line-height: 40px;
+    padding: 0 0 0 10px;
+  }
+  .style-collapse>>>.el-collapse-item__wrap{
+    border-bottom: 0 solid #e6ebf5!important;
+  }
+  .style-collapse{
+    border-top: 0 solid #e6ebf5!important;
+  }
 </style>