From 41964c5c5856883bb1f842948f4d7f37ced84910 Mon Sep 17 00:00:00 2001
From: wenyann <64353056+wenyann@users.noreply.github.com>
Date: Fri, 5 Feb 2021 10:16:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8?=
 =?UTF-8?q?=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/i18n/messages_zh_TW.properties  |   2 +-
 .../track/case/components/CustomHeader.vue    | 136 ++++++++++++++++++
 .../track/case/components/TestCaseList.vue    |  31 +++-
 3 files changed, 161 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/business/components/track/case/components/CustomHeader.vue

diff --git a/backend/src/main/resources/i18n/messages_zh_TW.properties b/backend/src/main/resources/i18n/messages_zh_TW.properties
index 4e9f9ffff4..485b69f6d6 100644
--- a/backend/src/main/resources/i18n/messages_zh_TW.properties
+++ b/backend/src/main/resources/i18n/messages_zh_TW.properties
@@ -185,4 +185,4 @@ automation_exec_info=沒有測試步驟，無法執行
 #authsource
 authsource_name_already_exists=認證源名稱已經存在
 authsource_name_is_null=認證源名稱不能為空
-authsource_configuration_is_null=認證源配置不能為空
\ No newline at end of file
+authsource_configuration_is_null=認證源配置不能為空
diff --git a/frontend/src/business/components/track/case/components/CustomHeader.vue b/frontend/src/business/components/track/case/components/CustomHeader.vue
new file mode 100644
index 0000000000..4cf16a5018
--- /dev/null
+++ b/frontend/src/business/components/track/case/components/CustomHeader.vue
@@ -0,0 +1,136 @@
+<template>
+  <el-dialog
+    title="表头显示字段"
+    :visible.sync="centerDialogVisible"
+    width="50%"
+  >
+    <el-divider style="margin-top: 0;margin-right: 10px"></el-divider>
+    <el-form :inline="true" :model="headerItem" class="demo-form-inline" type="selection">
+      <el-row :gutter="20">
+        <el-col :span="10">
+          <label>可选择字段可选择字段:{{ this.headerItem.optionalField.length }}</label>
+          <div class="grid-content bg-purple" style="margin-top: 25px">
+            <el-form-item>
+              <el-card class="box-card">
+                <div v-for="item in headerItem.optionalField" :key="item.prop" class="text item"
+                     @click="selectItem(item)">
+                  <input type="checkbox"/>
+                  <label>{{ item.name }}</label>
+                </div>
+              </el-card>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="grid-content bg-purple" style="margin-top: 160px">
+            <el-form-item>
+              <el-button size="medium" round @click="addItem">添加</el-button>
+              <!--               <i class="el-icon-arrow-right" @click="addItem"></i>-->
+            </el-form-item>
+            <el-form-item>
+              <el-button size="medium" round>移除</el-button>
+              <!--               <i class="el-icon-arrow-right" @click="addItem"></i>-->
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="10">
+          <label>已选择字段</label>
+          <div class="grid-content bg-purple" style="margin-top: 25px">
+            <el-form-item>
+              <el-card class="box-card">
+                <div v-for="item in headerItem.fieldSelected" :key="item.prop" class="text item"
+                     @click="moveItem(item)">
+                  <el-checkbox v-model="checked1">{{ item.name }}</el-checkbox>
+                </div>
+              </el-card>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <el-form-item>
+        <el-button type="primary" style="margin-right: 0" @click="save('headerItem')">保存</el-button>
+      </el-form-item>
+    </el-form>
+
+
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "CustomHeader",
+  data() {
+    return {
+      centerDialogVisible: false,
+      headerItem: {
+        optionalField: [
+          {prop: 'name', name: '名称'},
+          {prop: 'name', name: '名称'},
+          {prop: 'name', name: '名称'},
+          {prop: 'name', name: '名称'},
+          {prop: 'name', name: '名称'},
+          {prop: 'name', name: '名称'},
+          {prop: 'name', name: '名称'},
+          {prop: 'name', name: '名称'},
+        ],
+        fieldSelected: []
+      },
+      selectItems: [],
+      checked1: false
+
+
+    };
+  },
+  methods: {
+    open() {
+      this.centerDialogVisible = true
+    },
+
+    selectItem(item) {
+      this.checked1 = !this.checked1
+      this.selectItems.push(item)
+
+    },
+    //移除
+    moveItem(item) {
+      this.headerItem.fieldSelected.remove(item)
+
+    },
+    //添加
+    addItem() {
+      console.log(this.selectItems)
+      this.headerItem.fieldSelected = this.selectItems
+      console.log(this.headerItem.fieldSelected)
+    },
+    save(headerItem) {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both
+}
+
+.box-card {
+  width: 250px;
+  height: 400px;
+  overflow: auto;
+}
+</style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index f63ddc8a7d..3830f25a35 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -39,10 +39,10 @@
           type="selection"/>
 
         <ms-table-header-select-popover v-show="total>0"
-          :page-size="pageSize > total ? total : pageSize"
-          :total="total"
-          @selectPageAll="isSelectDataAll(false)"
-          @selectAll="isSelectDataAll(true)"/>
+                                        :page-size="pageSize > total ? total : pageSize"
+                                        :total="total"
+                                        @selectPageAll="isSelectDataAll(false)"
+                                        @selectAll="isSelectDataAll(true)"/>
 
         <el-table-column width="40" :resizable="false" align="center">
           <template v-slot:default="scope">
@@ -144,8 +144,12 @@
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
-        <el-table-column fixed="right"
-          :label="$t('commons.operating')" min-width="150">
+        <el-table-column fixed="right" min-width="150">
+          <template slot="header">
+            <span>{{ $t('commons.operating') }}
+             <i class='el-icon-setting' style="color:#7834c1; margin-left:10px" @click="customHeader"> </i>
+            </span>
+          </template>
           <template v-slot:default="scope">
             <ms-table-operator :is-tester-permission="true" @editClick="handleEdit(scope.row)"
                                @deleteClick="handleDelete(scope.row)">
@@ -157,8 +161,9 @@
             </ms-table-operator>
           </template>
         </el-table-column>
-      </el-table>
 
+      </el-table>
+      <custom-header ref="customHeader"/>
       <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
                            :total="total"/>
 
@@ -169,6 +174,7 @@
 
     <batch-move @refresh="refresh" @moveSave="moveSave" ref="testBatchMove"/>
   </div>
+
 </template>
 
 <script>
@@ -199,10 +205,12 @@ import {getCurrentProjectID} from "../../../../../common/js/utils";
 import MsTag from "@/business/components/common/components/MsTag";
 import {_handleSelect, _handleSelectAll} from "../../../../../common/js/tableUtils";
 import BatchMove from "./BatchMove";
+import CustomHeader from "@/business/components/track/case/components/CustomHeader";
 
 export default {
   name: "TestCaseList",
   components: {
+    CustomHeader,
     BatchMove,
     MsTableHeaderSelectPopover,
     MsTableButton,
@@ -226,6 +234,11 @@ export default {
   },
   data() {
     return {
+      cols: [{label: "id", prop: "num"},
+        {label: "名称", prop: "name"},
+        {label: "级别", prop: "priority"},
+        {label: "类型", prop: "type"},
+        {label: "测试方式", prop: "method"}],
       result: {},
       deletePath: "/test/case/delete",
       condition: {
@@ -323,7 +336,11 @@ export default {
     }
   },
   methods: {
+    customHeader() {
+      this.$refs.customHeader.open()
+    },
     initTableData() {
+
       this.projectId = getCurrentProjectID();
       this.condition.planId = "";
       this.condition.nodeIds = [];