html网页设计作品代码编写,html网站优化,青岛网站建设在哪,福建福州罗源建设局网站一、背景
在项目上线测试的时候#xff0c;关于同一个界面的表格#xff0c;不同的用户会出现不同的字段排列需求#xff0c;有些用户希望把A字段排在最前面#xff0c;有些用户则希望A字段不显示。针对这种情况#xff0c;开发一个表格自定义配置的功能#xff0c;每个…一、背景
在项目上线测试的时候关于同一个界面的表格不同的用户会出现不同的字段排列需求有些用户希望把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)
) ENGINEInnoDB AUTO_INCREMENT6 DEFAULT CHARSETutf8mb4 COLLATEutf8mb4_bin COMMENTtable配置表;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)PostMappingAnonymousApiOperation(编辑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(testTableConfignull) // 更新{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 前端配置组件界面
templatediv
divvuedraggable v-modelparamClounmtransition-groupdiv v-for(item,index) in paramClounm :keyitem.key stylemargin:10px; text-align: left;el-row :gutter24el-col :span8 el-checkbox :labelitem.label v-modelitem.visable/el-checkbox/el-colel-col :span6 el-input-number v-modelitem.width placeholder宽度/el-input-number/el-colel-col :span4 el-checkbox v-modelitem.isfix label固定/el-checkbox/el-colel-col :span6 el-switch :span8 v-modelitem.fixlorr active-text固定右侧 inactive-text固定左侧/el-switch/el-col/el-row/div /transition-group/vuedraggable/divdivspan slotfooter classdialog-footerel-button classbuttonLeft typeprimary plain clickrecoverChecked恢复默认/el-button!-- el-button clickdialogVisible false classbuttonRight取 消/el-button --el-button typeprimary clicksubmit classbuttonRight 确 定/el-button/span/div/div/template
scriptimport 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,row,command) {//alert(0);return {index:index,row:row,command:command}},// 移动操作handleCommand(command) {switch(command.command) {case search:this.search(command.index);break;case edit:this.edit(command.index);break;case delete:this.rowOperation(command.row.indexLine,delete,command.row);break;case moveTop:this.rowOperation(command.row.indexLine,moveTop,command.row);break;case moveUp:this.rowOperation(command.row.indexLine,moveUp,command.row);break;case moveDown:this.rowOperation(command.row.indexLine,moveDown,command.row);break;case moveBottom:this.rowOperation(command.row.indexLine,moveBottom,command.row);break;};},// 加载表格的列loadingTableClounm(teacherTableClonms){this.paramClounm Object.assign([],teacherTableClonms) ;},// 保存配置submit(){// alert(JSON.stringify(this.paramClounm));var objList this.paramClounm;// 移除不需要存入数据库的属性然后将Json存到数据库for(var i0;iobjList.length;i){var objobjList[i];obj.sortNum i; // 排序编号delete obj.ifRender;delete obj.renderFun;}// alert(JSON.stringify(objList));var inputData{tableConifgJsonStr:JSON.stringify(objList),tableKey: this.$parent.$parent.tableKey};addAndUpdate(inputData).then(res{this.$modal.msgSuccess(操作成功);window.location.reload();});},// 恢复默认recoverChecked(){// this.checkedColumns[编号,计划开始日期,计划完成日期,实际开始日期,实际完成日期];// this.fieldListcolumnOptions;this.paramClounm [];// 为了解决子组件改变导致父组件也跟着改变的问题this.paramClounm Object.assign([],this.$parent.$parent.teacherTableDefaultClonms) ; // alert(JSON.stringify(this.$parent.$parent.teacherTableDefaultClonms) );//window.location.reload();},edit(index,row){},},}/script3.5 前端Table界面对应table表头的配置Json
/********************************************** 功 能teacher表列名* 创建人cola* 创建时间:2023-08-11******************************************/
import Vue from vue
const vm new Vue()
export const
columnOptions
[{key:id,label:Id,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:},{key:name,label:姓名,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:},{key:teachercode,label:教师工号,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:},{key:fex,label:性别,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:},{key:age,label:年龄,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:},{key:createtime,label:创建时间,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:
},{key:isdelete,label:删除,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:},{key:deletetime,label:删除时间,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:
},
{key:updatetime,label:更新时间,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:true,renderFun:(scope){let html;htmlspan;html vm.parseTime(scope.row.updatetime,{y}-{m}-{d});html /spanreturn html;}
},
{key:updateuserid,label:更新人,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:
},
{key:deleteuserid,label:删除人,visable : true,width: 200,isfix : false,fixlorr: 0,ifRender:false,renderFun:
},];
3.6 前端Table界面读取配置进行动态展示
templatediv classapp-containerel-form :modelqueryParams refqueryForm sizesmall :inlinetrue v-showshowSearch label-width68pxel-form-item label姓名 propnameel-inputv-modelqueryParams.nameplaceholder请输入姓名clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label教师工号 propteachercodeel-inputv-modelqueryParams.teachercodeplaceholder请输入教师工号clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label性别 0 女 1男 propfexel-inputv-modelqueryParams.fexplaceholder请输入性别 0 女 1男clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label年龄 propageel-inputv-modelqueryParams.ageplaceholder请输入年龄clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label是否删除 propisdeleteel-inputv-modelqueryParams.isdeleteplaceholder请输入是否删除clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label创建时间 propcreatetimeel-date-picker clearablev-modelqueryParams.createtimetypedatevalue-formatyyyy-MM-ddplaceholder请选择创建时间/el-date-picker/el-form-itemel-form-item label更新时间 propupdatetimeel-inputv-modelqueryParams.updatetimeplaceholder请输入更新时间clearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label删除时间 propdeletetimeel-date-picker clearablev-modelqueryParams.deletetimetypedatevalue-formatyyyy-MM-ddplaceholder请选择删除时间/el-date-picker/el-form-itemel-form-item label创建人id propcreateuseridel-inputv-modelqueryParams.createuseridplaceholder请输入创建人idclearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label修改人id propupdateuseridel-inputv-modelqueryParams.updateuseridplaceholder请输入修改人idclearablekeyup.enter.nativehandleQuery//el-form-itemel-form-item label删除人id propdeleteuseridel-inputv-modelqueryParams.deleteuseridplaceholder请输入删除人idclearablekeyup.enter.nativehandleQuery//el-form-itemel-form-itemel-button typeprimary iconel-icon-search sizemini clickhandleQuery搜索/el-buttonel-button iconel-icon-refresh sizemini clickresetQuery重置/el-button/el-form-item/el-formel-row :gutter10 classmb8el-col :span1.5el-buttontypeprimaryplainiconel-icon-plussizeminiclickhandleAdd新增/el-button/el-colel-col :span1.5el-buttontypesuccessplainiconel-icon-editsizemini:disabledsingleclickhandleUpdate修改/el-button/el-colel-col :span1.5el-buttontypedangerplainiconel-icon-deletesizemini:disabledmultipleclickhandleDelete删除/el-button/el-colel-col :span1.5el-buttontypewarningplainiconel-icon-downloadsizeminiclickhandleExport导出/el-button/el-colel-col :span1.5el-buttontypewarningplainiconel-icon-downloadsizeminiclickopenconifg配置/el-button/el-colright-toolbar :showSearch.syncshowSearch queryTablegetList/right-toolbar/el-row!-- :datateacherList v-loadingloading :fixeditem.fixlorr0? left:right--el-table :datateacherList v-loadingloading selection-changehandleSelectionChange stylewidth: 400!-- el-table-column typeselection width55 aligncenter :fixedtrue / template slot-name/template/el-table-column --el-table-column v-foritem in this.teacherTableClonms :keyitem.key :labelitem.label :propitem.key :widthitem.width v-ifitem.ifRender item.visable :fixeditem.isfix?item.fixlorr0?left:right :falsetemplate slot-scopescope div v-htmlitem.renderFun? item.renderFun(scope) : /div/template/el-table-columnel-table-column :labelitem.label aligncenter :propitem.key :widthitem.width v-else-ifitem.ifRenderfalse item.visable :fixeditem.isfix?item.fixlorr0?left:right :false /el-table-column label操作 aligncenter class-namesmall-padding fixed-width fixedright template slot-scopescopeel-buttonsizeminitypetexticonel-icon-editclickhandleUpdate(scope.row)修改/el-buttonel-buttonsizeminitypetexticonel-icon-deleteclickhandleDelete(scope.row)删除/el-button/template/el-table-column!-- el-table-column labelid aligncenter propid /el-table-column label姓名 aligncenter propname /el-table-column label教师工号 aligncenter propteachercode /el-table-column label性别 0 女 1男 aligncenter propfex /el-table-column label年龄 aligncenter propage /el-table-column label是否删除 aligncenter propisdelete /el-table-column label创建时间 aligncenter propcreatetime width180template slot-scopescopespan{{ parseTime(scope.row.createtime, {y}-{m}-{d}) }}/span/template/el-table-columnel-table-column label更新时间 aligncenter propupdatetime /el-table-column label删除时间 aligncenter propdeletetime width180template slot-scopescopespan{{ parseTime(scope.row.deletetime, {y}-{m}-{d}) }}/span/template/el-table-columnel-table-column label创建人id aligncenter propcreateuserid /el-table-column label修改人id aligncenter propupdateuserid /el-table-column label删除人id aligncenter propdeleteuserid /--/el-tablepaginationv-showtotal0:totaltotal:page.syncqueryParams.pageNum:limit.syncqueryParams.pageSizepaginationgetList/!-- 添加或修改测试_教师对话框 --el-dialog :titletitle :visible.syncopen width500px append-to-bodyel-form refform :modelform :rulesrules label-width80pxel-form-item label姓名 propnameel-input v-modelform.name placeholder请输入姓名 //el-form-itemel-form-item label教师工号 propteachercodeel-input v-modelform.teachercode placeholder请输入教师工号 //el-form-itemel-form-item label性别 0 女 1男 propfexel-input v-modelform.fex placeholder请输入性别 0 女 1男 //el-form-itemel-form-item label年龄 propageel-input v-modelform.age placeholder请输入年龄 //el-form-itemel-form-item label是否删除 propisdeleteel-input v-modelform.isdelete placeholder请输入是否删除 //el-form-itemel-form-item label删除时间 propdeletetimeel-date-picker clearablev-modelform.deletetimetypedatevalue-formatyyyy-MM-ddplaceholder请选择删除时间/el-date-picker/el-form-itemel-form-item label创建人id propcreateuseridel-input v-modelform.createuserid placeholder请输入创建人id //el-form-itemel-form-item label修改人id propupdateuseridel-input v-modelform.updateuserid placeholder请输入修改人id //el-form-itemel-form-item label删除人id propdeleteuseridel-input v-modelform.deleteuserid placeholder请输入删除人id //el-form-item/el-formdiv slotfooter classdialog-footerel-button typeprimary clicksubmitForm确 定/el-buttonel-button clickcancel取 消/el-button/div/el-dialog!-- 传入 参数--el-dialog title配置表格列 :visible.synccofigshow width900px append-to-bodyConfigTableTest :tableclounmsthis.teacherTableClonms/ConfigTableTest/el-dialog /div
/templatescript
import { listTeacher, getTeacher, delTeacher, addTeacher, updateTeacher } from /api/system/teacher;
import { getTableConfigByUserCodeAndTabelKey } from /api/system/tableconfig;
import { columnOptions } from ../../../tableclounm/teacherclounm;import ConfigTableTest from ../tableconfig/configtabletest.vue;import TableCloumRender from ../tableconfig/tableclounmrender.vue;
export default {name: Teacher,components: {ConfigTableTest,TableCloumRender
},data() {return {// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 测试_教师表格数据teacherList: [],// 弹出层标题title: ,// 是否显示弹出层open: false,// 配置显示层cofigshow: false,// 表格的Key用来自定义配置的标识 to do 命名规范定义 功能模_块功能界面_Table ?tableKey:TeacherIndexTable,// 查询参数queryParams: {pageNum: 1,pageSize: 10,name: null,teachercode: null,fex: null,age: null,isdelete: null,createtime: null,updatetime: null,deletetime: null,createuserid: null,updateuserid: null,deleteuserid: null},// 表单参数form: {},// 表单校验rules: {},teacherTableClonms : [], // 获取后端返回的当前用户个性化配置的列名teacherTableDefaultClonms:[] // 获取js里面配置的列名};},created() {this.getTableConfig(); // 获取用户列表配置// alert(JSON.stringify(this.teacherTableClonms) );this.getList();},methods: {/** 查询测试_教师列表 */getList() {this.loading true;listTeacher(this.queryParams).then(response {this.teacherList response.rows;this.total response.total;this.loading false;});},// 获取当前用户这个列表对应的配置:// 逻辑// 1.先查询配置。// 2.如果这个用户还没配置 则取JS里面的默认配置。// 3.如果这个用户已经配置了则取数据库里面保存的配置然后循环比对存在js里面的字段// 生成最后对应的配置因为数据库里面没有存渲染的代码考虑到字段的长度限制 8000 风险点 1 如果大宽表需要修改数据库字段类型。getTableConfig(){// 默认的配置 Object.assign防止 this.teacherTableDefaultClonms的变动影响columnOptionsthis.teacherTableDefaultClonms JSON.parse(JSON.stringify(columnOptions)) ; // alert(JSON.stringify(this.teacherTableDefaultClonms ));var param{tableKey:this.tableKey // 表格的key 每个表格唯一};// 默认的配置 Object.assign防止 jsConfigClounms的变动影响columnOptionslet jsConfigClounms Object.assign([],columnOptions); let newClounms []; // 拼接成新的一个配置数组getTableConfigByUserCodeAndTabelKey(param).then(res{if(!!res){var data JSON.parse(res.tableConifgJsonStr) ;// 以配置在JS里面的配置为循环的基础需要考虑到增减字段for(var i0;ijsConfigClounms.length;i){var jsClounmItem jsConfigClounms[i];var newItem jsClounmItem; // 新的项以JS的配置为基础,能设置的配置项取数据库里面的// 查询对应的配置// rfor(var j0;jdata.length;j){var dataItem data[j];if(newItem.key dataItem.key){// 说明匹配上了if(dataItem.visable!null){newItem.visable dataItem.visable; // 是否显示}if(dataItem.width!null){newItem.width dataItem.width; // 宽度}if(dataItem.isfix!null){newItem.isfix dataItem.isfix; // 是否固定}if(dataItem.fixlorr!null){newItem.fixlorr dataItem.fixlorr; // 固定左边or右边}if(dataItem.sortNum!null){newItem.sortNum dataItem.sortNum ; //排序编号}break; // 匹配上了跳出一层循环} else{// 没有匹配上则说明是新加的字段把这些新加的字段放在最后newItem.sortNum 10000-i; // 把排序号增加到最大} } // for 1 endnewClounms.push(newItem);}// for2 end// 这个时候需要排序一下恢复顺序newClounms newClounms.sort(this.sortByNum);}else{// 说明数据库里面没有配置则直接取JS里面的配置newClounms jsConfigClounms;}this.teacherTableClonms newClounms;// alert(JSON.stringify(this.teacherTableDefaultClonms ));});},// 根据排序编码号进行排序
sortByNum(a, b) {return a.sortNum - b.sortNum;
},// 取消按钮cancel() {this.open false;this.reset();},// 表单重置reset() {this.form {id: null,name: null,teachercode: null,fex: null,age: null,isdelete: null,createtime: null,updatetime: null,deletetime: null,createuserid: null,updateuserid: null,deleteuserid: null};this.resetForm(form);},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm(queryForm);this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.ids selection.map(item item.id)this.single selection.length!1this.multiple !selection.length},/** 新增按钮操作 */handleAdd() {this.reset();this.open true;this.title 添加测试_教师;},/** 修改按钮操作 */handleUpdate(row) {this.reset();const id row.id || this.idsgetTeacher(id).then(response {this.form response.data;this.open true;this.title 修改测试_教师;});},/** 提交按钮 */submitForm() {this.$refs[form].validate(valid {if (valid) {if (this.form.id ! null) {updateTeacher(this.form).then(response {this.$modal.msgSuccess(修改成功);this.open false;this.getList();//});} else {addTeacher(this.form).then(response {this.$modal.msgSuccess(新增成功);this.open false;this.getList();});}}});},/** 删除按钮操作 */handleDelete(row) {const ids row.id || this.ids;this.$modal.confirm(是否确认删除测试_教师编号为 ids 的数据项).then(function() {return delTeacher(ids);}).then(() {this.getList();this.$modal.msgSuccess(删除成功);}).catch(() {});},/** 导出按钮操作 */handleExport() {this.download(system/teacher/export, {...this.queryParams}, teacher_${new Date().getTime()}.xlsx)},/**打开配置 */openconifg(){this.cofigshow true;}}
};
/script
3.7 功能完成
