feat: 自定义表头

backend/src/main/java/io/metersphere/base/mapper/SwaggerUrlProjectMapper.xml

@@ -27,8 +27,7 @@
                 </when>
                 <when test="criterion.listValue">
                   and ${criterion.condition}
-                                    <foreach close=")" collection="criterion.value" item="listItem" open="("
+                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
-                                             separator=",">
                     #{listItem}
                   </foreach>
                 </when>
@@ -57,8 +56,7 @@
                 </when>
                 <when test="criterion.listValue">
                   and ${criterion.condition}
-                                    <foreach close=")" collection="criterion.value" item="listItem" open="("
+                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
-                                             separator=",">
                     #{listItem}
                   </foreach>
                 </when>

backend/src/main/java/io/metersphere/controller/SystemParameterController.java

@@ -1,8 +1,10 @@
 package io.metersphere.controller;
 
 import io.metersphere.base.domain.SystemParameter;
+import io.metersphere.base.domain.UserHeader;
 import io.metersphere.commons.constants.ParamConstants;
 import io.metersphere.commons.constants.RoleConstants;
+import io.metersphere.controller.request.HeaderRequest;
 import io.metersphere.dto.BaseSystemConfigDTO;
 import io.metersphere.ldap.domain.LdapInfo;
 import io.metersphere.notice.domain.MailInfo;
@@ -67,4 +69,13 @@ public class SystemParameterController {
         return SystemParameterService.getLdapInfo(ParamConstants.Classify.LDAP.getValue());
     }
 
+    @PostMapping("save/header")
+    public void saveHeader(@RequestBody UserHeader userHeader) {
+        SystemParameterService.saveHeader(userHeader);
+    }
+
+    @PostMapping("/header/info")
+    public UserHeader getHeaderInfo(@RequestBody HeaderRequest headerRequest) {
+        return SystemParameterService.queryUserHeader(headerRequest);
+    }
 }

backend/src/main/java/io/metersphere/controller/request/HeaderRequest.java

@@ -0,0 +1,11 @@
+package io.metersphere.controller.request;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class HeaderRequest {
+    private String userId;
+    private String type;
+}

backend/src/main/java/io/metersphere/service/SystemParameterService.java

@@ -2,12 +2,16 @@ package io.metersphere.service;
 
 import io.metersphere.base.domain.SystemParameter;
 import io.metersphere.base.domain.SystemParameterExample;
+import io.metersphere.base.domain.UserHeader;
+import io.metersphere.base.domain.UserHeaderExample;
 import io.metersphere.base.mapper.SystemParameterMapper;
+import io.metersphere.base.mapper.UserHeaderMapper;
 import io.metersphere.base.mapper.ext.ExtSystemParameterMapper;
 import io.metersphere.commons.constants.ParamConstants;
 import io.metersphere.commons.exception.MSException;
 import io.metersphere.commons.utils.EncryptUtils;
 import io.metersphere.commons.utils.LogUtil;
+import io.metersphere.controller.request.HeaderRequest;
 import io.metersphere.dto.BaseSystemConfigDTO;
 import io.metersphere.i18n.Translator;
 import io.metersphere.ldap.domain.LdapInfo;
@@ -29,7 +33,8 @@ import java.util.*;
 @Service
 @Transactional(rollbackFor = Exception.class)
 public class SystemParameterService {
-
+    @Resource
+    private UserHeaderMapper userHeaderMapper;
     @Resource
     private SystemParameterMapper systemParameterMapper;
     @Resource
@@ -233,4 +238,16 @@ public class SystemParameterService {
             example.clear();
         });
     }
+
+    //保存表头
+    public void saveHeader(UserHeader userHeader) {
+        userHeader.setId(UUID.randomUUID().toString());
+        userHeaderMapper.insert(userHeader);
+    }
+
+    public UserHeader queryUserHeader(HeaderRequest headerRequest) {
+        UserHeaderExample example = new UserHeaderExample();
+        example.createCriteria().andUserIdEqualTo(headerRequest.getUserId()).andTypeEqualTo(headerRequest.getType());
+        return userHeaderMapper.selectByExample(example).get(0);
+    }
 }

backend/src/main/resources/db/migration/V74__user_header.sql

@@ -0,0 +1,10 @@
+create table user_header
+(
+    id      varchar(50)   not null,
+    user_id varchar(50)   null,
+    props   varchar(1000) null,
+    type    varchar(150)  null,
+    constraint user_header_pk
+        primary key (id)
+) ENGINE = InnoDB
+  DEFAULT CHARSET = utf8mb4

backend/src/main/resources/generatorConfig.xml

@@ -66,6 +66,7 @@
 
         <table tableName="auth_source"/>
         <table tableName="swagger_url_project"/>
+        <table tableName="user_header"/>
         <!--<table tableName="test_plan_api_scenario"/>-->
         <!--<table tableName="test_plan"/>-->
         <!--<table tableName="api_scenario_report"/>-->

frontend/src/business/components/common/head/HeaderCustom.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-dialog title="表头显示字段" :visible.sync="dialogTableVisible"  :append-to-body="true">
+    <template>
+      <el-transfer
+        :titles="['待选字段', '已选字段']"
+        v-model="value"
+        :props="{
+           key: 'prop',
+           label: 'label'
+          }"
+        :data="optionalField"
+        ></el-transfer>
+    </template>
+    <template v-slot:footer>
+      <ms-dialog-footer
+        @cancel="close"
+        @confirm="saveHeader"
+      />
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import MsDialogFooter from "@/business/components/common/components/MsDialogFooter";
+import {getCurrentUser} from "@/common/js/utils";
+import {TEST_CASE_LIST} from "@/common/js/constants";
+export default {
+  name: "HeaderCustom",
+  components: {MsDialogFooter},
+  data() {
+    return {
+      dialogTableVisible: false,
+      optionalField: [],
+      value: [],
+      fieldSelected:[]
+    }
+  },
+  methods: {
+    open(items) {
+      console.log(items)
+      this.dialogTableVisible = true
+      this.optionalField = items
+    },
+    saveHeader() {
+      let param={
+        userId:getCurrentUser().id,
+        type:TEST_CASE_LIST,
+        props:JSON.stringify(this.value)
+      }
+      this.$post("/system/save/header",param,response=>{
+        this.$success(this.$t("commons.save_success"));
+        this.dialogTableVisible = false
+      })
+    },
+    close() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/common/model/JsonData.js

@@ -0,0 +1,15 @@
+import i18n from '../../../../i18n/i18n'
+//自定义默认表头
+export const Track_Test_Case=[
+  {prop: 'num', label: i18n.t('commons.id')},
+  {prop: 'name', label: i18n.t('commons.name')},
+  {prop: 'priority', label: i18n.t('test_track.case.priority')},
+  {prop: 'type', label: i18n.t('test_track.case.type')},
+  {prop: 'method', label: i18n.t('test_track.case.method')},
+  {prop: 'reviewStatus', label:i18n.t('test_track.case.status')},
+  {prop: 'tags', label: i18n.t('commons.tag')},
+  {prop: 'nodePath', label: i18n.t('test_track.case.module')},
+  {prop: 'updateTime', label: i18n.t('commons.update_time')},
+  {prop: 'operating', label: i18n.t('commons.operating')},
+]
+

frontend/src/business/components/track/case/components/CustomHeader.vue

@@ -1,136 +0,0 @@
-<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>

frontend/src/business/components/track/case/components/TestCaseList.vue

@@ -34,7 +34,6 @@
         row-key="id"
         class="test-content adjust-table ms-select-all-fixed"
         ref="table" @row-click="handleEdit">
-
         <el-table-column
           width="50"
           type="selection"/>
@@ -50,16 +49,22 @@
             <show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectDataCounts"/>
           </template>
         </el-table-column>
+        <template v-for="(item, index) in tableLabel">
+
           <el-table-column
+            v-if="item.prop == 'num'"
             prop="num"
             sortable="custom"
             :label="$t('commons.id')"
+            :key="index"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
+            v-if="item.prop == 'name'"
             prop="name"
             :label="$t('commons.name')"
             show-overflow-tooltip
+            :key="index"
           >
             <template v-slot:default="scope">
               <!--<div @mouseover="showDetail(scope.row)">
@@ -76,43 +81,51 @@
             </template>
           </el-table-column>
           <el-table-column
+            v-if="item.prop == 'priority'"
             prop="priority"
             :filters="priorityFilters"
             column-key="priority"
             min-width="100px"
             :label="$t('test_track.case.priority')"
-          show-overflow-tooltip>
+            show-overflow-tooltip
+            :key="index">
             <template v-slot:default="scope">
               <priority-table-item :value="scope.row.priority"/>
             </template>
           </el-table-column>
           <el-table-column
+            v-if="item.prop == 'type'"
             prop="type"
             :filters="typeFilters"
             column-key="type"
             :label="$t('test_track.case.type')"
-          show-overflow-tooltip>
+            show-overflow-tooltip
+            :key="index">
             <template v-slot:default="scope">
               <type-table-item :value="scope.row.type"/>
             </template>
           </el-table-column>
           <el-table-column
+            v-if="item.prop=='method'"
             prop="method"
             column-key="method"
             :filters="methodFilters"
             min-width="100px"
             :label="$t('test_track.case.method')"
-          show-overflow-tooltip>
+            show-overflow-tooltip
+            :key="index">
             <template v-slot:default="scope">
               <method-table-item :value="scope.row.method"/>
             </template>
           </el-table-column>
 
           <el-table-column
+            v-if="item.prop=='status'"
             :filters="statusFilters"
             column-key="status"
             min-width="100px"
-          :label="$t('test_track.case.status')">
+            :label="$t('test_track.case.status')"
+            :key="index">
             <template v-slot:default="scope">
             <span class="el-dropdown-link">
               <review-status :value="scope.row.reviewStatus"/>
@@ -120,7 +133,7 @@
             </template>
           </el-table-column>
 
-        <el-table-column prop="tags" :label="$t('commons.tag')">
+          <el-table-column v-if="item.prop=='tags'" prop="tags" :label="$t('commons.tag')" :key="index">
             <template v-slot:default="scope">
               <div v-for="(itemName,index)  in scope.row.tags" :key="index">
                 <ms-tag type="success" effect="plain" :content="itemName"/>
@@ -129,25 +142,27 @@
           </el-table-column>
 
           <el-table-column
+            v-if="item.prop=='nodePath'"
             prop="nodePath"
             :label="$t('test_track.case.module')"
             min-width="150px"
-          show-overflow-tooltip>
+            show-overflow-tooltip
+            :key="index">
           </el-table-column>
 
           <el-table-column
+            v-if="item.prop=='updateTime'"
             prop="updateTime"
             sortable="custom"
             :label="$t('commons.update_time')"
             min-width="150px"
-          show-overflow-tooltip>
+            show-overflow-tooltip
+            :key="index">
             <template v-slot:default="scope">
               <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
             </template>
           </el-table-column>
-        <el-table-column fixed="right"
+          <el-table-column v-if="item.prop=='operating'" fixed="right" min-width="150" :key="index">
-                         :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>
@@ -164,12 +179,11 @@
               </ms-table-operator>
             </template>
           </el-table-column>
-
+        </template>
-      </el-table>
+        <header-custom ref="headerCustom"></header-custom>
-      <custom-header ref="customHeader"/>
         <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
                              :total="total"/>
-
+      </el-table>
     </el-card>
 
     <batch-edit ref="batchEdit" @batchEdit="batchEdit"
@@ -198,12 +212,12 @@ import MsTableButton from "../../../common/components/MsTableButton";
 import {TEST_CASE_CONFIGS} from "../../../common/components/search/search-components";
 import ShowMoreBtn from "./ShowMoreBtn";
 import BatchEdit from "./BatchEdit";
-import {WORKSPACE_ID} from "@/common/js/constants";
+import {TEST_CASE_LIST, WORKSPACE_ID} from "@/common/js/constants";
 import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
 import StatusTableItem from "@/business/components/track/common/tableItems/planview/StatusTableItem";
 import TestCaseDetail from "./TestCaseDetail";
 import ReviewStatus from "@/business/components/track/case/components/ReviewStatus";
-import {getCurrentProjectID} from "../../../../../common/js/utils";
+import {getCurrentProjectID, getCurrentUser} from "../../../../../common/js/utils";
 import MsTag from "@/business/components/common/components/MsTag";
 import {
   _filter,
@@ -215,12 +229,13 @@ import {
   toggleAllSelection
 } from "@/common/js/tableUtils";
 import BatchMove from "./BatchMove";
-import CustomHeader from "@/business/components/track/case/components/CustomHeader";
+import {Track_Test_Case} from "@/business/components/common/model/JsonData";
+import HeaderCustom from "@/business/components/common/head/HeaderCustom";
 
 export default {
   name: "TestCaseList",
   components: {
-    CustomHeader,
+    HeaderCustom,
     BatchMove,
     MsTableHeaderSelectPopover,
     MsTableButton,
@@ -244,11 +259,8 @@ export default {
   },
   data() {
     return {
-      cols: [{label: "id", prop: "num"},
+      // 子组件的表头数据
-        {label: "名称", prop: "name"},
+      tableLabel:Track_Test_Case,
-        {label: "级别", prop: "priority"},
-        {label: "类型", prop: "type"},
-        {label: "测试方式", prop: "method"}],
       result: {},
       deletePath: "/test/case/delete",
       condition: {
@@ -347,10 +359,9 @@ export default {
   },
   methods: {
     customHeader() {
-      this.$refs.customHeader.open()
+      this.$refs.headerCustom.open(this.tableLabel)
     },
     initTableData() {
-
       this.projectId = getCurrentProjectID();
       this.condition.planId = "";
       this.condition.nodeIds = [];
@@ -365,8 +376,23 @@ export default {
         // param.nodeIds = this.selectNodeIds;
         this.condition.nodeIds = this.selectNodeIds;
       }
+      this.getLabel()
       this.getData();
     },
+    getLabel(){
+      let param={}
+      param.userId=getCurrentUser().id;
+      param.type=TEST_CASE_LIST
+      this.result=this.$post('/system/header/info',param,response=>{
+        console.log(response.data)
+        /*if(response.data){
+          this.tableLabel=response.data.props
+        }else{
+          this.tableLabel=Track_Test_Case
+        }*/
+
+      })
+    },
     getData() {
       if (this.projectId) {
         this.condition.projectId = this.projectId;
@@ -576,9 +602,9 @@ export default {
       this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
       toggleAllSelection(this.$refs.table, this.tableData, this.selectRows);
     },
-    headerDragend(newWidth,oldWidth,column,event){
+    headerDragend(newWidth, oldWidth, column, event) {
       let finalWidth = newWidth;
-      if(column.minWidth>finalWidth){
+      if (column.minWidth > finalWidth) {
         finalWidth = column.minWidth;
       }
       column.width = finalWidth;

frontend/src/common/js/constants.js

@@ -1,3 +1,4 @@
+export const TEST_CASE_LIST='test_case_list'
 export const TokenKey = 'Admin-Token';
 export const LicenseKey = 'License';
 export const DEFAULT_LANGUAGE = 'default_language';