Mon Dec 4 12:20:00 CST 2023 inscode

src/component/main/verticalTable/verticalTable.vue

@@ -11,9 +11,9 @@ const objectSpanMethod = ({
   columnIndex,
 }) => {
   if (columnIndex === 0) {
-    const reg = /[一-龥]/;
-    if(row.headline.search(reg) != -1){
-      console.log();
+    // 就根据map中id查询到第二个字段
+    if(rowSpan.get(row.id)){
+      console.log(rowSpan.get(row.id));
       return {
         rowspan: rowSpan.get(row.id),
         colspan: 1
@@ -30,72 +30,73 @@ const objectSpanMethod = ({
 
 const tableData = ref([
 {id:'1',headline:'系统管理',subtitle:'系统配置',operation1:'新建/编辑',operation2:'删除',operation3:'编辑',operation4:'',operation5:''},
-{id:'2',headline:'',subtitle:'功能模块',operation1:'安装',operation2:'升级',operation3:'卸载',operation4:'',operation5:''},
-{id:'3',headline:'',subtitle:'功能节点',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
-{id:'4',headline:'',subtitle:'角色权限',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
-{id:'5',headline:'',subtitle:'数据权限',operation1:'编辑',operation2:'',operation3:'',operation4:'',operation5:''},
-{id:'6',headline:'',subtitle:'操作日志',operation1:'备份数据',operation2:'备份数据表',operation3:'优化数据表',operation4:'修复数据表',operation5:''},
-{id:'7',headline:'',subtitle:'还原数据',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'2',headline:'系统管理',subtitle:'功能模块',operation1:'安装',operation2:'升级',operation3:'卸载',operation4:'',operation5:''},
+{id:'3',headline:'系统管理',subtitle:'功能节点',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
+{id:'4',headline:'系统管理',subtitle:'角色权限',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
+{id:'5',headline:'系统管理',subtitle:'数据权限',operation1:'编辑',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'6',headline:'系统管理',subtitle:'操作日志',operation1:'备份数据',operation2:'备份数据表',operation3:'优化数据表',operation4:'修复数据表',operation5:''},
+{id:'7',headline:'系统管理',subtitle:'还原数据',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'8',headline:'基础数据',subtitle:'审批类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'9',headline:'',subtitle:'审批流程',operation1:'新建/编辑',operation2:'删除',operation3:'设置',operation4:'',operation5:''},
-{id:'10',headline:'',subtitle:'报销类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'11',headline:'',subtitle:'费用类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'12',headline:'',subtitle:'企业主体',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'13',headline:'',subtitle:'行业类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'14',headline:'',subtitle:'工作类别',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'15',headline:'',subtitle:'服务类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'16',headline:'',subtitle:'附件管理',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'9',headline:'基础数据',subtitle:'审批流程',operation1:'新建/编辑',operation2:'删除',operation3:'设置',operation4:'',operation5:''},
+{id:'10',headline:'基础数据',subtitle:'报销类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'11',headline:'基础数据',subtitle:'费用类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'12',headline:'基础数据',subtitle:'企业主体',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'13',headline:'基础数据',subtitle:'行业类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'14',headline:'基础数据',subtitle:'工作类别',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'15',headline:'基础数据',subtitle:'服务类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'16',headline:'基础数据',subtitle:'附件管理',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'17',headline:'人力资源',subtitle:'部门架构',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
-{id:'18',headline:'',subtitle:'岗位职称',operation1:'新建/编辑',operation2:'删除',operation3:'查看',operation4:'',operation5:''},
-{id:'19',headline:'',subtitle:'企业员工',operation1:'新建/编辑',operation2:'查看',operation3:'设置',operation4:'重设密码',operation5:''},
-{id:'20',headline:'',subtitle:'人事调动',operation1:'新建/编辑',operation2:'',operation3:'',operation4:'',operation5:''},
-{id:'21',headline:'',subtitle:'离职档案',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'18',headline:'人力资源',subtitle:'岗位职称',operation1:'新建/编辑',operation2:'删除',operation3:'查看',operation4:'',operation5:''},
+{id:'19',headline:'人力资源',subtitle:'企业员工',operation1:'新建/编辑',operation2:'查看',operation3:'设置',operation4:'重设密码',operation5:''},
+{id:'20',headline:'人力资源',subtitle:'人事调动',operation1:'新建/编辑',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'21',headline:'人力资源',subtitle:'离职档案',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'22',headline:'行政管理',subtitle:'印章管理',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'23',headline:'',subtitle:'车辆管理',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'24',headline:'',subtitle:'会议室管理',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'23',headline:'行政管理',subtitle:'车辆管理',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'24',headline:'行政管理',subtitle:'会议室管理',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'25',headline:'企业公告',subtitle:'公告类型',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
-{id:'26',headline:'',subtitle:'公告列表',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'26',headline:'企业公告',subtitle:'公告列表',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'27',headline:'办公审批',subtitle:'我发起的',operation1:'新建/编辑',operation2:'查看',operation3:'',operation4:'',operation5:''},
-{id:'28',headline:'',subtitle:'我处理的',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
-{id:'29',headline:'',subtitle:'抄送给我的',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'28',headline:'办公审批',subtitle:'我处理的',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'29',headline:'办公审批',subtitle:'抄送给我的',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'30',headline:'日常办公',subtitle:'日程安排',operation1:'新建/编辑',operation2:'删除',operation3:'查看',operation4:'',operation5:''},
-{id:'31',headline:'',subtitle:'日程日历',operation1:'工作记录',operation2:'新建/编辑',operation3:'删除',operation4:'查看',operation5:'更改工时'},
-{id:'32',headline:'',subtitle:'工作日历',operation1:'工作汇报',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'31',headline:'日常办公',subtitle:'日程日历',operation1:'工作记录',operation2:'新建/编辑',operation3:'删除',operation4:'查看',operation5:'更改工时'},
+{id:'32',headline:'日常办公',subtitle:'工作日历',operation1:'工作汇报',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'33',headline:'财务管理',subtitle:'报销管理',operation1:'我申请的',operation2:'我处理的',operation3:'抄送给我的',operation4:'',operation5:''},
-{id:'34',headline:'',subtitle:'发票管理',operation1:'我申请的',operation2:'我处理的',operation3:'抄送给我的',operation4:'',operation5:''},
-{id:'35',headline:'',subtitle:'到账管理',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'34',headline:'财务管理',subtitle:'发票管理',operation1:'我申请的',operation2:'我处理的',operation3:'抄送给我的',operation4:'',operation5:''},
+{id:'35',headline:'财务管理',subtitle:'到账管理',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'36',headline:'客户管理',subtitle:'客户等级',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'37',headline:'',subtitle:'客户渠道',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'38',headline:'',subtitle:'客户列表',operation1:'新建/编辑',operation2:'查看',operation3:'获取',operation4:'转入公海',operation5:''},
-{id:'39',headline:'',subtitle:'公海客户',operation1:'分配客户',operation2:'转入废弃池',operation3:'',operation4:'',operation5:''},
-{id:'40',headline:'',subtitle:'废弃客户',operation1:'删除',operation2:'还原',operation3:'',operation4:'',operation5:''},
-{id:'41',headline:'',subtitle:'客户联系人',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
-{id:'42',headline:'',subtitle:'销售机会',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'37',headline:'客户管理',subtitle:'客户渠道',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'38',headline:'客户管理',subtitle:'客户列表',operation1:'新建/编辑',operation2:'查看',operation3:'获取',operation4:'转入公海',operation5:''},
+{id:'39',headline:'客户管理',subtitle:'公海客户',operation1:'分配客户',operation2:'转入废弃池',operation3:'',operation4:'',operation5:''},
+{id:'40',headline:'客户管理',subtitle:'废弃客户',operation1:'删除',operation2:'还原',operation3:'',operation4:'',operation5:''},
+{id:'41',headline:'客户管理',subtitle:'客户联系人',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
+{id:'42',headline:'客户管理',subtitle:'销售机会',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'43',headline:'合同协议',subtitle:'合同类别',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
-{id:'44',headline:'',subtitle:'合同列表',operation1:'新建/编辑',operation2:'查看',operation3:'删除',operation4:'',operation5:''},
-{id:'45',headline:'',subtitle:'合同归档',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'44',headline:'合同协议',subtitle:'合同列表',operation1:'新建/编辑',operation2:'查看',operation3:'删除',operation4:'',operation5:''},
+{id:'45',headline:'合同协议',subtitle:'合同归档',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'46',headline:'项目管理',subtitle:'项目列表',operation1:'新建',operation2:'编辑',operation3:'查看',operation4:'删除',operation5:''},
-{id:'47',headline:'',subtitle:'任务列表',operation1:'新建',operation2:'编辑',operation3:'查看',operation4:'删除',operation5:''},
-{id:'48',headline:'',subtitle:'任务工时',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
-{id:'49',headline:'',subtitle:'文档列表',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'47',headline:'项目管理',subtitle:'任务列表',operation1:'新建',operation2:'编辑',operation3:'查看',operation4:'删除',operation5:''},
+{id:'48',headline:'项目管理',subtitle:'任务工时',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'49',headline:'项目管理',subtitle:'文档列表',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 {id:'50',headline:'知识文章',subtitle:'知识类型',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
-{id:'51',headline:'',subtitle:'共享知识',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
-{id:'52',headline:'',subtitle:'个人知识',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'51',headline:'知识文章',subtitle:'共享知识',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'52',headline:'知识文章',subtitle:'个人知识',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
 ]);
 
 const computedSpan = ()=>{
   const return_data = new Map();
-  const reg = /[一-龥]/;
   let tempCount = 1;
   let preIndex = 1;
+  let preTitle = 0;
   for(let i = 0;i < tableData.value.length;i++){
-    if(tableData.value[i].headline.search(reg) != -1){
+    if(preTitle != tableData.value[i].headline){
       return_data.set(preIndex,tempCount);
       preIndex = tableData.value[i].id;
       tempCount = 1;
     }else{
       tempCount++;
     }
+    preTitle = tableData.value[i].headline;
   }
   return_data.set(preIndex,tempCount);
   return_data.delete(1);
@@ -120,7 +121,7 @@ console.log(computedSpan());
       </el-table-column>
       <el-table-column prop="name" label="Name" >
         <template #default="{ row }">
-          <el-checkbox v-show="row.subtitle != ''">{{ row.subtitle }}</el-checkbox><br>
+          <el-checkbox v-show="row.subtitle != '' ">{{ row.subtitle }}</el-checkbox><br>
           <el-checkbox v-show="row.operation1 != ''">{{ row.operation1 }}</el-checkbox>
           <el-checkbox v-show="row.operation2 != ''">{{ row.operation2 }}</el-checkbox>
           <el-checkbox v-show="row.operation3 != ''">{{ row.operation3 }}</el-checkbox>