3.若依前后端分离版开发用户自定义配置表格功能

一、背景

在项目上线测试的时候，关于同一个界面的表格，不同的用户会出现不同的字段排列需求，有些用户希望把A字段排在最前面，有些用户则希望A字段不显示。针对这种情况，开发一个表格自定义配置的功能，每个用户根据自己的需求自己去设定表单字段的显示、隐藏、字段的宽度、左右固定等。

二、效果图

1.配置界面，可以拖动字段的顺序，是否显示、宽度、左右固定

三、实现方式

3.1 整体实现思路

将前端表格配置好的字段方式的Json存到数据库，用户打开界面的时候去数据库读取这个配置，前端用循环动态的渲染elemnet-table的表头即可。如果这个用户没有配置过，则读取默认的配置，默认配置写在前端一个JSON里面，每个vue界面的table设置一个table key用来标识table列表，数据库层面查找的时候根据用户code和tablekey来找到这个用户关于这个表格的配置。
最后’在前端进行动态渲染表头即可。整个功能的重点在于前端动态的拿到后端的json跟默认的存在前端的Json进行比较，然后生成最终的一个配置的json（注意：要以前端的默认Json为准，因为要考虑到字段的新增和删除的情况）

3.2 建立配置表 test_table_config

 CREATE TABLE `test_table_config` (
  `Id` int NOT NULL AUTO_INCREMENT,
  `UserCode` varchar(100) COLLATE utf8mb4_bin NOT NULL COMMENT '用户编码',
  `TableKey` varchar(200) COLLATE utf8mb4_bin NOT NULL COMMENT '表名key',
  `TableConifgJsonStr` varchar(8000) COLLATE utf8mb4_bin NOT NULL COMMENT '配置的字段Json',
  `IsDelete` tinyint NOT NULL COMMENT '是否删除',
  `CreateTime` datetime DEFAULT NULL COMMENT '创建时间',
  `CreateUserId` int DEFAULT NULL COMMENT '创建人id',
  `UpdateTime` datetime DEFAULT NULL COMMENT '更新时间',
  `DeleteTime` datetime DEFAULT NULL COMMENT '删除时间',
  `UpdateUserId` int DEFAULT NULL COMMENT '更新用户',
  `DeleteUserId` int DEFAULT NULL COMMENT '删除人',
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin COMMENT='table配置表';

3.3 服务端test_table_config的crud

    /**
     * 新增table配置
     */
   // @PreAuthorize("@ss.hasPermi('system:tableconfig:add')")
    public AjaxResult add( TestTableAddInput testTableAddInput)
    {
   

        TestTableConfig  testTableConfig = new TestTableConfig();
        testTableConfig.setUserCode(this.getUsername());
        testTableConfig.setTableKey(testTableAddInput.getTableKey());
        testTableConfig.setTableConifgJsonStr(testTableAddInput.getTableConifgJsonStr());
        testTableConfig.setCreateUserId(this.getUserId());
        testTableConfig.setCreateBy(this.getUsername());
        testTableConfig.setCreateTime(new Date());
        testTableConfig.setIsDelete(0l);
        return toAjax(testTableConfigService.insertTestTableConfig(testTableConfig));
    }


    @Log(title = "编辑table配置", businessType = BusinessType.INSERT)
    @PostMapping
    @Anonymous
    @ApiOperation("编辑table配置")
    public   AjaxResult addAndUpdate(@RequestBody TestTableAddInput testTableAddInput)
    {
   
        TestTableConfig  testTableConfig = new TestTableConfig();

        if(testTableAddInput.getTableConifgJsonStr() == null || testTableAddInput.getTableConifgJsonStr().length()==0)
        {
   
            return  error("没有传入配置Json");
        }
      // 先查询
        testTableConfig = testTableConfigService.selectTestTableConfigByUserAndTableKey(this.getUsername(),testTableAddInput.getTableKey());
        if(testTableConfig==null) // 更新
        {
   
            return   add(testTableAddInput);
        }
        else
        {
   
            testTableConfig.setTableConifgJsonStr(testTableAddInput.getTableConifgJsonStr());
            // 修改
            return   edit(testTableConfig);
        }

    }


    /**
     * 修改table配置
     */
  //  @PreAuthorize("@ss.hasPermi('system:tableconfig:edit')")
    public AjaxResult edit(TestTableConfig testTableConfig)
    {
   

        testTableConfig.setUpdateUserId(this.getUserId());
        testTableConfig.setUserCode(this.getUsername());
        testTableConfig.setUpdateTime(new Date());
        testTableConfig.setIsDelete(0l);
        return toAjax(testTableConfigService.updateTestTableConfig(testTableConfig));
    }

3.4 前端配置组件界面

<template>
    <div>
<div>
    <vuedraggable v-model="paramClounm">
                      <transition-group>
                          <div v-for="(item,index) in paramClounm" :key="item.key" style="margin:10px; text-align: left;">
                            <el-row :gutter="24">
                            <el-col :span="8"> <el-checkbox  :label="item.label" v-model="item.visable"></el-checkbox></el-col>
                            <el-col :span="6"> <el-input-number v-model="item.width" placeholder="宽度"></el-input-number></el-col>
                            <el-col :span="4">  <el-checkbox v-model="item.isfix" label="固定"></el-checkbox></el-col>
                            <el-col :span="6">  <el-switch :span="8" v-model="item.fixlorr" active-text="固定右侧" inactive-text="固定左侧"></el-switch></el-col>
                         
                          </el-row>
                          </div> 
                      </transition-group>
                  </vuedraggable>
  </div>
    
<div>

    <span slot="footer" class="dialog-footer">
              <el-button class="buttonLeft" type="primary" plain @click="recoverChecked">恢复默认</el-button>
              <!-- <el-button @click="dialogVisible = false" class="buttonRight">取 消</el-button> -->
              <el-button type="primary" @click="submit" class="buttonRight" >确 定</el-button>
          </span>

</div>

</div>

</template>
<script>
  import vuedraggable from 'vuedraggable';
  import {
    getConfig, addAndUpdate  } from "@/api/system/tableconfig";

  export default{
   
    name: 'configTest',
      components: {
   
      vuedraggable
    },
    data(){
   
        return{
   
            paramClounm:[], // 参数列
            dialogVisible:false,

        }
       
    },

    // 计算属性
    computed:{
   
      activeFields: function(){
   
        //  alert(0);
          return this.fields.filter((item)=>{
   
              return item.visible;
          })
      }
    },

    // 加载完
    mounted(){
   

       // 加载列名 ;  
       this.loadingTableClounm(Object.assign([],this.$parent.$parent.teacherTableClonms));
    },

    methods:{
         

        getRowKey(v){
   
        return v.id
      },

      // 指令之前
      beforeHandleCommand(index