vue项目需求分享-表格字段配置及本地化处理方案

近日，公司有这样一个需求。

1、系统管理员，可以自由配置页面表格表头及按钮列表。

2、可以自由配置不同用户显示的表格字段及按钮。

3、用户亦可以个性化设置表格表头，内容包括：排序，是否显示，列宽。用户设置保存后，下次登录系统还可以重现，但不可以存储到数据库。

需求分析：

1、讲到自由配置表格表头及按钮，必然需要有页面管理等配置。

1. 页面管理->
2. 页面内容配置->
3. 表格表头及按钮列表设置(字段：字段中文名，字段英文名，是否可排序，是否显示到表格，列宽，排序值等。按钮：按钮中文名，按钮英文名，按钮风格，按钮类型：行按钮，头按钮)

2、自由配置不同用户的表格字段及按钮。

第一反应就是需要设置权限组。对权限组的页面配置表格字段及按钮。

1. 权限组管理->
2. 权限页面配置->
3. 页面内容权限配置->

通过勾选配置该权限组的表格字段及按钮

3、用户个性化设置，重现，不存储数据库。

1>需要将表格字段缓存到浏览器。使用localstorage将用户的设置信息保存。用户再次登录时读取缓存。

2>表头字段设置。

其中列宽，是否显示，只涉及单条数据得更新，较简单，直接更新即可。
排序，设置到整个数组的更新。这里需要有个小的算法。
有以下几种情况。
1、相邻位置的排序变化。
对调两条数据得排序值即可。
2、位置由大->小
对调新老位置两条数据的排序值。
两个位置中间的排序值-1
3、位置由小->大
对调新老位置两条数据的排序值。
两个位置中间的排序值+1

 const { newIndex, oldIndex } = e.moved
   custTableHeader.value[newIndex].orderBy = props.tableHeader[newIndex].orderBy
   if (oldIndex - newIndex == 1 || newIndex - oldIndex == 1) {
     console.log('相邻位置');

     custTableHeader.value[oldIndex].orderBy = props.tableHeader[oldIndex].orderBy
   } else if (oldIndex > newIndex) {
     console.log('由大->小');
     for (let i = newIndex + 1; i <= oldIndex; i++) {
       custTableHeader.value[i].orderBy++
     }
   } else if (oldIndex < newIndex) {
     console.log('由小->大');
     for (let i = oldIndex; i < newIndex; i++) {
       custTableHeader.value[i].orderBy--
     }
   }

注意：缓存后的数据如何更新成最新的呢？
这就需要设计字段的更新数据对比。
1、对比本地缓存的字段是否还存在于服务端
2、对比相同字段的内容是否发生改变。我这里使用的是modifyTime，字段更新时间。
字段更新时间相同，以本地缓存数据为准。
字段更新时间不同，以服务端数据为准。
当然也可以通过其他方式实现，不要生拌樱桃。

// const localFields = localStorage.getItem(name + 'Fields')
// const localFieldsArr = localFields ? JSON.parse(localFields) : []
// console.log('---------本地字段缓存数据-----------');
// console.log(localFieldsArr);
// let returnFields = []
// if (localFieldsArr.length != 0) {
//   console.log('---------当前页面字段在本地缓存字段不为空-----------');
//   localFieldsArr.map(localItem => {
//     // 判断 本地缓存的字段是否还存在于服务端
//     console.log('---------判断 本地缓存的字段是否还存在于服务端-----------');
//     const localFieldIsExist = res.data.filter(filterItem => filterItem.id == localItem.id)
//     if (localFieldIsExist.length != 0) {
//       // 服务端仍存在当前本地字段
//       console.log('---------服务端仍存在当前本地字段-----------');
//       res.data.map(item => {
//         // 找到该字段

//         if (localItem.id == item.id) {
//           console.log('---------对比字段id，找到该字段-----------');
//           // 比较修改时间
//           if (localItem.modifyTime != item.modifyTime) {
//             // 修改时间不一致 将服务端字段插入到字段数组
//             console.log('---------修改时间不一致 将服务端字段插入到字段数组-----------');
//             returnFields.push(item)
//           } else {
//             // 修改时间 一致 以缓存字段为准
//             console.log('---------修改时间 一致 以缓存字段为准-----------');
//             returnFields.push(localItem)
//           }
//         }
//       })
//     }
//   })
//   res.data.map(originItem => {
//     // 判断 服务端字段是否已缓存到本地
//     console.log('---------判断 服务端字段是否已缓存到本地-----------');
//     const originFieldIsExist = localFieldsArr.filter(filterItem => filterItem.id == originItem.id)
//     if (originFieldIsExist.length == 0) {
//       // 如果服务端未缓存 插入到字段数组
//       console.log('---------如果服务端未缓存 插入到字段数组-----------');
//       returnFields.push(originItem)
//     }
//   })
// } else {
//   console.log('---------当前页面字段在本地缓存字段为空-----------');
//   returnFields = res.data
// }
// function sortArr(attr) {
//   return function (a, b) {
//     return a[attr] - b[attr]
//   }
// }
// returnFields = returnFields.sort(sortArr('orderBy'))
// localStorage.setItem(name + 'Fields', JSON.stringify(returnFields))
// context.commit("fetchFields", { data: returnFields, name: name });

当不同用户使用同一浏览器操作时该如何更新数据呢？
1、简单粗暴，退出时，清除缓存字段。
2、以不同用户uuid为flag，进行存储。更新套路和上边一样，只是步骤更复杂了些，但难度+0；

好了，分享结束，但这里变有个bug。
有谁发现了么？
因为排序涉及到整体数组，服务端更新了字段排序时，如何获取最新的排序数据呢？
如果从服务端获取到的排序值和本地缓存数据得排序值存在相同值时，该如何处理呢？
问题留给大家，欢迎大家留言解答。

学习是件快乐的事，不要生拌樱桃。