主页面显示

2024年7月25日22:05:06

author：方圆

任务：主页面的编写和数据显示，前后端

image-20240725162031260

五个模块，分别对应表头、近半年工时情况、一周项目动态、资料上传情况、日程安排

前端：引入自定义组件，去传递每个组件需要的数值

1
2
3
4
5
6
7
8
9
<general-dashboard
    :offsetHeight=91
    :head-data="generalHeaderData"	//表头数据
    :head-click="handleHeadClick"	//表头点击事件
    :left-center-data="generalLeftCenterData"	//折线图数据
    :left-bottom-left-data="generalLeftBottomLeftData" 	//一周项目动态
    :left-bottom-left-click="handleLeftBottomLeftClick" //项目动态点击事件
    :left-bottom-right-data="generalLeftBottomRightData"//资料上传情况数据
></general-dashboard>

日程安排的组件，新建了一个数据库表单和视图

后端公共方法：获取用户权限和权限内用户项目数量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@Resource
 private ProjectService projectService;
 /**
  * 数据权限类
  */
 @Resource
 private DataSecurityService dataSecurityService;

 /**
  * 用户服务类
  */
 @Resource
 private UserService userService;
 /**
  * 项目月度工时服务类
  **/
 @Resource
 private ProjectMouthManhourService projectMouthManhourService;

 /**
  * 项目阶段附件表service接口
  */
 @Resource
 private ProjectPhaseFileService projectPhaseFileService;


 /**
  * @description:获取当前用户权限id和角色列表
  * @author: fangyuan
  * @date: 2024/7/25 11:00
  **/
 public List<UserRole> getUserRoleList() {
     String currentUserId = Security.getCurrentUserID();
     List<UserRole> userRoleList = userService.getRoleOfUser(currentUserId);
     return userRoleList;
 }

 /**
  * @description:获取当前用户权限内的项目数量的公共方法
  * @author: fangyuan
  * @date: 2024/7/25 10:26
  **/
 public List<Project> getUserProjects() {
     String currentUserId = Security.getCurrentUserID();
     ProjectQueryReq queryReq = new ProjectQueryReq();
     // 设置数据权限
     queryReq.setCurrentUserId(currentUserId);
     queryReq.setFirstDeptId(Security.getOrgOfCurrentUser().getOrganizationId());
     String policyType = dataSecurityService.getAllPolicyType("/rest/project/query");
     queryReq.setPolicyType(policyType);

     // 获取当前用户权限内的项目数量
     return projectService.queryUserProject(queryReq);
 }

1表头数据

后端逻辑：格式化日期，满足要求的count++

注意：String类型的值比较用Stringutils工具类的equals方法，我直接用equals比较结果不对

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/**
  * @description: res[0] :分母：总数量当前 -人权限内的项目总数量
  * res[1] :分子：本年度数量 -当前人权限内的当前数量
  * res[2] :分子：本年度数量 -当前人权限内的合规材料汇总为是的数量
  * @author: fangyuan
  * @date: 2024/7/23 14:58
  **/
 @Override
 public int[] queryProjectCounts() {
     List<UserRole> userRoleList = getUserRoleList();
     int[] result = new int[3];
     if (userRoleList.size() > 0) {
         List<Project> userProjects = getUserProjects();
         result[0] = userProjects.size();
         int countYear = 0;
         int countRule = 0;
         //获取当前年
         String currentYear = DateFormatUtils.format(new Date(), "yyyy");
         for (Project p : userProjects) {
             if (Integer.parseInt(p.getProjectYear()) == Integer.parseInt(currentYear)) {
                 countYear++;
             }
             if (StringUtils.equals("是", p.getIsAdditionalDeductionAllFile())) {
                 countRule++;
             }
         }
         result[1] = countYear;
         result[2] = countRule;
     }

     return result;
 }

前端逻辑：api.js中配置后端请求方法的url，vue页面中引入然后在methods中，调用方法将值传递进去 

1
2
3
4
5
6
7
8
9
10
import request from '@/utils/request';
/**
 * 查询工程数量
 */
export function queryProjectCounts(){
    return request({
      url:'/rest/mainpage/query_project_counts',
      method:'post',
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script>
  import{queryProjectCounts,queryProjectMouthManhour,queryPersonalWork,queryProjectResource} from "@/api/mainpage";  
    
methods: {
    getHeaderData(){
      queryProjectCounts().then((response) => {
        this.generalHeaderData[0].secNum = response[0];
        this.generalHeaderData[1].secNum = response[0];
        this.generalHeaderData[0].num = response[1];
        this.generalHeaderData[1].num = response[2];
      });
      fetchTaskList(this.listQuery).then(response =>{
        this.generalHeaderData[2].num = response.total;
      })
      queryViewTodo(this.listQuery).then(response =>{
        this.generalHeaderData[3].num = response.total;
      });
    }
}
</script>

2.表头点击事件

前端:配置好了路由routeName，在点击事件的方法中，配置跳转就行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
generalHeaderData: [
  {
    title: "项目建设数量",
    num: 0,
    secNum: 0,
    svgName: "xiangmu",
    svgColor: "#f4516c",
    routeName: "ResearchProjectManagementList",
  },
  {
    title: "资料未齐全项目数量",
    num: 0,
    secNum:0,
    svgName: "gongzuo",
    svgColor: "#7bc94a",
    routeName: "ResearchProjectManagementList",
  },
  {
    title: "我的待办",
    num: 0,
    svgName: "huihua",
    svgColor: "#36a3f7",
    routeName: "Task",
  },
  {
    title: "我的待阅",
    num: 0,
    svgName: "guanzhu",
    svgColor: "#ffb822",
    routeName: "View",
  },
]
1
2
3
4
5
handleHeadClick(item){
  this.$router.push({
    name: item.routeName
  });
},

3.近半年工时情况

后端逻辑：

​ 1.先查询当前人权限内的项目信息
​ 2.按月度查询权限内所有项目的工时数量之和

遇到的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1.我开始的做法是，根据ID列表查出表中所有月份和工时数量字段，`

`然后在service层处理，对查到的字段用Map进行去重合并累加相同的月份`

`但是组长说你这样可以，但是我们查的是半年内，不能查全部的月份字段，要把月份传进去`

`然后，直接用sum 聚合函数在SQL内求和就不用在service层去写复杂的逻辑了

2.注意往前递推月份的写法，我开始是定义一个common常量类，写死在common常量类中
组长说往前递推半年不要写死，然后我在common类中使用static{}代码块去给月份的数组赋值，
结果运行的时候报错，显示赋值不成功，调用的时候显示数组长度为0.不知道为什么。
后来就直接在service层中定义了，
定义日期格式-再currentDate.minusMonths(i)遍历

3.还有前端需要的JSON格式的数据格式为：
    "data": [
        {
            "category": "2024-02",
            "value": 0
        },
        {
            "category": "2024-03",
            "value": 0
        },
我开始没有定义实体类，使用List<Map<String,Double>>类型的返回值去存储
        {
            2024-02",
             0
        }
与需要的返回值类型不匹配，前端显示不了

定义：实体类，返回给前端的JSON数据格式

1
2
3
4
5
6
7
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Res {
    private String category;
    private Double value;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/**
    * @description: 1.先查询当前人权限内的项目信息
    * 2.按月度查询权限内所有项目的工时数量之和
    * @author: fangyuan
    * @date: 2024/7/24 9:14
    **/
   @Override
   public List<Res> queryProjectMouthManhour() {
       List<UserRole> userRoleList = getUserRoleList();
       List<Res> resArrayList = new ArrayList<>();
       if (userRoleList.size() > 0) {
           List<Project> userProjects = getUserProjects();
           // 提取项目id列表
           List<String> projectIds = new ArrayList<>();
           for (Project project : userProjects) {
               projectIds.add(project.getBoProjectId());
           }
           //拿到过去六个月的数组
           LocalDate currentDate = LocalDate.now();

           // 定义日期格式
           DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM");

           // 定义一个数组来存储过去六个月的年月字符串
           String[] pastSixMonths = new String[6];

           // 往前递推半年的月份并存储到数组中
           for (int i = 0; i < 6; i++) {
               LocalDate pastMonth = currentDate.minusMonths(i);
               String pastYearMonth = pastMonth.format(formatter);
               pastSixMonths[i] = pastYearMonth;
           }
           //翻转数组
           List<String> list = Arrays.asList(pastSixMonths);
           Collections.reverse(list);
           pastSixMonths = list.toArray(pastSixMonths);

           // 根据项目id，查询项目年月和总和工时数据
           // String 年月，String 工时

           for (int i = 0; i < pastSixMonths.length; i++) {
               Res res = new Res();
               res = projectMouthManhourService.getYearMonthAndManhour(projectIds, pastSixMonths[i]);
               resArrayList.add(res);
           }

       }
       return resArrayList;
   }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * @description:根据列表编号查询项目年月和工时信息
 * @author: fangyuan
 * @date: 2024/7/24 10:40
 **/
@Override
public Res getYearMonthAndManhour(List<String> projectIds, String yearMouth) {
    Res res = new Res();
    if(projectIds != null && projectIds.size() > 0){
        Double value =  projectMouthManhourDao.selectByYearMonthAndManhour(projectIds,yearMouth);
        res.setCategory(yearMouth);
        if(value == null){
            res.setValue(0.0);
        }else {
            res.setValue(value);
        }
        return res;
    }
    return null;
}

xml

1
2
3
4
5
6
7
8
9
<select id="selectByYearMonthAndManhour" resultType="java.lang.Double">
    SELECT SUM(m.MANHOUR_MODIFY)
    FROM BO_PROJECT_MOUTH_MANHOUR m
    WHERE m.BO_PROJECT_ID IN
    <foreach item="projectId" collection="projectIds" open="(" separator="," close=")">
        #{projectId}
    </foreach>
    AND m.YEAR_MOUTH = #{yearMouth}
</select>

前端逻辑：api配置和script方法引入就不说了，调用方法传值

1
2
3
4
5
getLeLeftCenterData(){
  queryProjectMouthManhour().then((response)=>{
    this.generalLeftCenterData.data = response;
  })
}

4.资料上传情况

后端逻辑：将查到的projectName和fileNum放在一个map集合中，返回给前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * @description:查询项目资料上传情况
 * @author: fangyuan
 * @date: 2024/7/25 14:15
 **/
    @Override
    public List<Map<String, Object>> queryProjectResource() {
        List<UserRole> userRoleList = getUserRoleList();
        List<Map<String,Object>> resultMapList = new ArrayList<>();
        if (userRoleList.size() > 0) {
            List<Project> userProjects = getUserProjects();
            for (Project project : userProjects) {
                Map<String,Object> resultMap = new HashMap<>();
                resultMap.put("projectName",project.getProjectName());
                String boProjectId = project.getBoProjectId();
                int fileNum = projectPhaseFileService.selectAddFileNums(boProjectId);
                resultMap.put("fileNum",fileNum);
                resultMapList.add(resultMap);
            }
        }
        return resultMapList;
    }

xml

1
2
3
4
5
<select id="selectAddFileNums" resultType="int">
	select COUNT(*) from BO_PROJECT_PHASE_FILE P
	where P.BO_PROJECT_ID = #{boProjectId}
	  AND P.BO_PROJECT_PHASE_CODE = '合规材料汇总'
</select>

前端逻辑：

注意：

因为我们前端要求的数据格式为
"data": [
    {
        "name": "竣工",
        "value": 2,
        "labelColor": "#B5A77F",
        "backgroundColor": "#D8C9B5"
    },
    {
        "name": "试运行",
        "value": 2,
        "labelColor": "#B57F7F",
        "backgroundColor": "#D8B5B5"
    },
]
而我们后端查到的只有name和value，而背景颜色什么的要在前端赋值
对filenum进行排序，按从大到小排序展示，然后取前七个元素
并且为了美观，不让项目名称太长导致展示到第二行影响展示效果
对姓名字段进行截取前七个字符
然后依次赋值将剩下两个颜色字段补上，赋值给Data就行
笨办法赋值，因为每次赋值的颜色字段都不一样，所以...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
getLeftBottomRightData() {
  queryProjectResource().then((response) => {
    //response 按 fileNum 由大到小排序
    response = response.sort((a, b) => {
      return b.fileNum - a.fileNum;
    });
    //response 获取最多前 7 个元素
    response = response.slice(0, 7);
    for (let i = response.length-1; i > -1; i--) {
      let obj = {
        name: response[i].projectName.length > 9 ? response[i].projectName.substring(0, 7) + "..." : response[i].projectName,
        value: response[i].fileNum
      };
      if (i == 0) {
        obj.labelColor = "#6A9FB5";
        obj.backgroundColor = "#A1C4D3"
      }
      if (i == 1) {
        obj.labelColor = "#7FB5A6";
        obj.backgroundColor = "#B2D8C3";
      }
      if (i == 2) {
        obj.labelColor = "#F0A762";
        obj.backgroundColor = "#F3C89A";
      }
      if (i == 3) {
        obj.labelColor = "#A3C866";
        obj.backgroundColor = "#C6DEA1";
      }
      if (i == 4) {
        obj.labelColor = "#8E7FB5";
        obj.backgroundColor = "#C7B5D8";
      }
      if (i == 5) {
        obj.labelColor = "#B57F7F";
        obj.backgroundColor = "#D8B5B5";
      }
      if (i == 6) {
        obj.labelColor = "#B5A77F";
        obj.backgroundColor = "#D8C9B5";
      }
      this.generalLeftBottomRightData.data.push(obj);
    }
    console.log(this.generalLeftBottomRightData.data)
  });
}

5.一周项目动态

前端需要数据格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
{
    "borderTitle": "一周项目动态",
    "data": [
        {
            "message": "杭州市民生项目一期-已立项",
            "userName": "创新接口人",
            "msgType": "消息",
            "msgButtonType": "primary",
            "routeName": "ProcessApprovalInfo?projectId=e2b079c0-3e8a-11ef-bc62-c70f53d63ff1",
            "msgDate": "2024-07-09"
        },
        {
            "message": "杭州市民生项目一期-已设计",
            "userName": "创新接口人",
            "msgType": "逾期",
            "msgButtonType": "danger",
            "routeName": "ProcessDesignInfo?projectId=e2b079c0-3e8a-11ef-bc62-c70f53d63ff1",
            "msgDate": "2024-07-15"
        }
    ]
}
后端查询拿到的是封装好的jar包，不能更改，所以就查到这些字段，需要前端处理
 {
        "isNew": false,
        "createUserId": "12077",
        "createDate": 1712813883000,
        "updateUserId": "109641561",
        "updateDate": 1713173705000,
        "boWbsTaskExtendInfoId": null,
        "boWbsTaskId": "7",
        "inputTest": null,
        "chooseTest": null,
        "textTest": null,
        "dateTest": null,
        "isTest": null,
        "parentWbsTaskId": null,
        "rootWbsTaskId": "7",
        "wbsTaskName": "渠道类系统研发项目A（2023）",
        "wbsTaskCode": "R23303311CBF002",
        "wbsTaskContent": "渠道类系统研发项目A（2023）",
        "responsibleUserId": "12077",
        "responsibleOrgId": "234460635",
        "planStartDate": 1675209600000,
        "planEndDate": 1703980800000,
        "actualStartDate": 1675209600000,
        "actualEndDate": null,
        "isDelayed": null,
        "wbsTaskFund": null,
        "wbsTaskWeight": 1.0,
        "wbsTaskWeightOfParent": 1.0,
        "wbsTaskState": "4",
        "wbsTaskTier": 1,
        "isLeaf": "1",
        "wbsTaskPriority": "WBS_TASK_PRIORITY_H",
        "orderNum": 0,
        "isDeleted": null,
        "wbsTaskPriorityName": "高优先",
        "responsibleUserName": "刘坤",
        "responsibleOrgName": "信息技术管理部管理信息室",
        "recordCount": 0,
        "wbsTaskRecordList": null,
        "wbsTaskPassRecordList": null,
        "rootTaskName": "渠道类系统研发项目A（2023）",
        "parentTaskName": null,
        "currentUserId": null,
        "stakeholder": null,
        "applyFinishDate": null,
        "checkUserId": null,
        "isPass": null,
        "isConfirm": null,
        "unreadMessageCount": null,
        "stakeholderName": null,
        "editRouteName": null,
        "viewRouteName": "ProjectLedger",
        "wbsTaskCompleteness": 0.0,
        "parentTaskPlanStartDate": null,
        "parentTaskPlanEndDate": null,
        "parentResponsibleUserId": null,
        "parentResponsibleUserName": null,
        "completeRecordId": null,
        "isHangUp": null,
        "isParentHangUp": null,
        "cancelHangUp": null,
        "rootStakeholder": null,
        "planWorkload": null,
        "actualWorkload": null,
        "siblingTasks": null,
        "new": false
    },

后端逻辑：封装在jar包中 ，只读，组长说直接用已有查出来的，前端再做数据处理，不用自己写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<select id="queryPersonalWork" resultType="com.hii.datateam.wbs.task.model.WbsTaskInfo" databaseId="oracle">
        SELECT wt.*,
               (select rt.WBS_TASK_NAME
                from bo_wbs_task rt
                where wt.ROOT_WBS_TASK_ID = rt.BO_WBS_TASK_ID)     root_task_name,
               (select pt.WBS_TASK_NAME
                from bo_wbs_task pt
                where wt.PARENT_WBS_TASK_ID = pt.BO_WBS_TASK_ID)   parent_task_name,
               (SELECT c.username
                FROM contact_ c
                WHERE wt.responsible_user_id = c.userid)        AS responsibleUserName,
               (SELECT count(1)
                from bo_wbs_task_record wtr
                WHERE wt.BO_WBS_TASK_ID = wtr.BO_WBS_TASK_ID)   AS recordCount,
               (SELECT o.name
                FROM organization_ o
                WHERE wt.responsible_org_id = o.organizationid) AS responsibleOrgName,
               (SELECT d.dictionary_name
                FROM bo_wbs_dictionary d
                WHERE d.bo_wbs_dictionary_id = wt.wbs_task_priority
                  AND d.dictionary_type = 'WBS_TASK_PRIORITY')  AS wbsTaskPriorityName,
               (select rt.WBS_TASK_NAME
                from bo_wbs_task rt
                where wt.ROOT_WBS_TASK_ID = rt.BO_WBS_TASK_ID)     root_task_name
        FROM bo_wbs_task wt
        WHERE NVL(wt.is_deleted, '0') <> '1'
          and RESPONSIBLE_USER_ID = #{responsibleUserId}
        ORDER BY wt.order_num, wt.create_date
    </select>

前端逻辑：先过滤得到任务层级，再去获取当前时间一周内的时间戳，

根据字段的项目结束时间和开始时间去判断本周内的项目状态，逾期，已完成，未完成等

然后再去配置点击事件的路由routeName等等

1
2
3
4
5
6
7
8
9
10
/**
 * 获取本人全部事项
 */
export function queryPersonalWork(data) {
  return request({
    url: '/rest/wbs_task/personal_work',
    method: 'post',
    data
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
getLeftBottomLeftData() {
  // 调用后端接口，传入用户ID，获取该用户的工作数据
  queryPersonalWork({ responsibleUserId: this.$store.state.user.cusermessage.userId }).then((response) => {
    // 过滤出 wbsTaskTier 任务层级等于 '2' 的数据
    let data = response.filter(item => item.wbsTaskTier == '2');
    
    // 获取当前时间
    let current = new Date();
    // 获取当前是本周的第几天（0是周日，1是周一，...，6是周六）
    let nowDayOfWeek = current.getDay();
    // 如果是周日，则设为 7，以便计算本周的第一天和最后一天
    if (nowDayOfWeek === 0) nowDayOfWeek = 7;
    
    // 一天的毫秒数
    let dayNum = 1 * 24 * 60 * 60 * 1000;
    // 计算本周星期一的时间
    let firstDate = new Date(current.valueOf() - (nowDayOfWeek - 1) * dayNum);
    // 计算本周星期天的时间
    let lastDate = new Date(new Date(firstDate).valueOf() + 6 * dayNum);
    
    // 获取本周开始和结束的时间戳
    let weekStartDate = new Date(this.startTime(firstDate)).getTime();
    let weekEndDate = new Date(this.endTime(lastDate)).getTime();
    
    let thisWeekWork = [];
    // 遍历数据，根据计划和实际结束日期，分类数据
    data.forEach((item) => {
      // 逾期事项
      if (item.planEndDate < weekStartDate && (item.actualEndDate >= weekStartDate || item.actualEndDate == null)){
        item.msgType = "逾期";
        item.msgButtonType = "danger";
        thisWeekWork.push(JSON.parse(JSON.stringify(item)));
      } 
      // 本周需完成事项
      else if (item.planEndDate >= weekStartDate && item.planEndDate <= weekEndDate && (item.actualEndDate == null || item.actualEndDate >= weekStartDate)) {
        item.msgType = "本周需完成";
        item.msgButtonType = "warning";
        thisWeekWork.push(JSON.parse(JSON.stringify(item)));
      } 
      // 本周完成事项
      else if (item.planEndDate > weekEndDate && item.actualEndDate <= weekEndDate && item.actualEndDate >= weekStartDate) {
        item.msgType = "本周完成";
        item.msgButtonType = "success";
        thisWeekWork.push(JSON.parse(JSON.stringify(item)));
      }
    });
    
    // 将分类后的数据格式化，并赋值给 generalLeftBottomLeftData.data
    this.generalLeftBottomLeftData.data = thisWeekWork.map((item) => {
      return {
        message: item.parentTaskName + '-' + item.wbsTaskName,
        userName: item.responsibleUserName,
        msgType: item.msgType,
        msgButtonType: item.msgButtonType,
        routeName: "WBSTaskEdit?appId=" + item.rootWbsTaskId + "&focusMessage=false",
        msgDate: parseTime(item.planEndDate, '{y}-{m}-{d}')
      }
    });
  });
}

6.项目动态点击事件

路由配置为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  path: 'edit',
  component: () => import('@/views/wbs/WBSTaskEditDemo'),
  name: 'WBSTaskEdit',
  meta: {
    title: 'WBS任务编辑',
    icon: 'WBSTaskEdit',
    keepAlive: true,
    crumbs: [
      { path: '/', name: '首页' },
      { path: '/pm/ResearchProjectManagementList', name: '项目管理' },
      { name: '任务树' }
    ]
  }
}

上面项目动态的路由配置为

1
routeName: "WBSTaskEdit?appId=" + item.rootWbsTaskId + "&focusMessage=false",

本地访问地址：

1
2
http://localhost:8081/#/wbs/edit?appId=7&focusMessage=false
http://localhost:8081/#/wbs/edit?appId=6&focusMessage=false

点击方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
handleLeftBottomLeftClick(item) {
  // 将 routeName 按照 "?" 分割，得到路由名和参数部分
  let parts = item.routeName.split("?");
  let params = {};
  
  // 如果分割后长度大于1，说明有参数部分
  if (parts.length > 1) {
    // 将参数部分按照 "&" 分割，得到每个参数对
    let parameters = parts[1].split("&");
    
    // 遍历每个参数对
    parameters.forEach((item) => {
      // 将每个参数对按照 "=" 分割，得到键和值
      let pair = item.split("=");
      
      // 如果分割后的数组长度为2，说明是有效的键值对
      if (pair.length === 2) {
        // 将键和值进行解码，并存入 params 对象中
        params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
      }
    });
  }

  // 创建一个新的对象 query，将 params 对象的属性拷贝到 query 对象中
  const query = Object.assign(params);

  // 使用 Vue Router 进行路由跳转
  this.$router.push({
    name: parts[0], // 路由名
    query: query    // 路由参数
  });
}