任务查看:任务名称undefined解决

xiangpei

2025-05-06 5c929cfb5286a31a4e067cbc61e8774f4e7d42ae

 src/views/components/noticeTable.vue

@@ -1,6 +1,6 @@
<template>
    <div>
        <div class="flex justify-between mb-[15px]">
    <div style="position: relative">
        <div class="flex justify-between mb-[15px]" style="align-items: center;margin-bottom: 5px">
            <div class="block mb-3 font-semibold fonts">待办事项</div>
            <div class="flex text-[12px]">
                <div
@@ -10,23 +10,31 @@
                >
                    流程待办
                </div>
                <!-- <div
                    :class="{ active: currentTab === 'progress' }"
                <div
                  :class="{ active: currentTab === 'wait' }"
                  class="tab"
                  @click="switchTab('wait')"
                >
                  容缺待办
                </div>
                <div
                    :class="{ active: currentTab === 'schedule' }"
                    class="tab"
                    @click="switchTab('progress')"
                    @click="switchTab('schedule')"
                >
                    进度待办
                </div> -->
                </div>
            </div>
        </div>
        <el-table
          v-loading="tableLoading"
            :data="tableData"
            :header-cell-style="{
                background: '#F5F7FC',
                color: '#454B5E',
                fontSize: '12px'
            }"
            height="280"
            min-height="280"
            max-height="280"
        >
            <el-table-column
@@ -37,6 +45,7 @@
                :min-width="column.minWidth"
                :prop="column.prop"
                :show-overflow-tooltip="true"
                :formatter="column.formatter"
            >
            </el-table-column>

@@ -44,108 +53,266 @@
                align="center"
                fixed="right"
                label="操作"
                min-width="150"
                min-width="90"
            >
                <template #default="scope">
                <template slot-scope="scope">
                    <el-button
                        plain
                        size="small"
                        type="primary"
                        type="text"
                        @click="handleDetail(scope.row)"
                    >
                        查看</el-button
                    >
                    <el-button
                        plain
                        size="small"
                        type="primary"
                        type="text"
                        @click="handleUpdate(scope.row)"
                    >
                        处置</el-button
                        处理</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total >= 0"
      <div style="position: absolute; bottom: 0px;width: 100%;">
        <div style="width: 100%;display: flex;flex-direction: row-reverse;align-items: center">
          <pagination
            style="width: 100%"
            v-show="total > 0"
            :page-sizes="[4]"
            :limit="queryParams.pageSize"
            :page="queryParams.pageNum"
            :page="queryParams.currentPage"
            :total="total"
            @pagination="getList"
        />
            @pagination="pageChange"
          />
        </div>
      </div>
    </div>
</template>
<script>

import { getTodo } from '@/api/message';
import {
  getProjectProcessTodo,
  getDetailByProcessInsId,
  getProjectProcessWait
} from "@/api/projectProcess/projectProcess.js";
import { getProjectPlanToDoList } from "@/api/projectPlan";
export default {
    data() {
        return {
            tableLoading: false,
            currentTab: "process",
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10
                currentPage: 1,
                pageSize: 4,
            },
            tableData: [],
            currentTableHeaders: [
                { label: '流程环节', prop: 'name', minWidth: 150, align: 'left' },
                { label: '申请项目', prop: 'businessName', minWidth: 150, align: 'left' },
                { label: '审批人', prop: 'assigneeName', minWidth: 100, align: 'left' },
                { label: '剩余时间', prop: 'remainingTime', minWidth: 143, align: 'left' }
            ]
        }
            currentTableHeaders: [],
            processTableHeaders: [
                { label: "流程环节", prop: "taskName", minWidth: 150, align: "left" },
                {
                    label: "申请项目",
                    prop: "projectName",
                    minWidth: 150,
                    align: "left",
                },
                {
                  label: "处理人",
                  prop: "handlerName",
                  minWidth: 100,
                  align: "left",
                  formatter: (row) => {
                    if (row.handlerType === 'USER') {
                      return row.handlerName.join('、')
                    } else if (row.handlerType === 'DEPT') {
                      return row.handlerUnitName.join('、')
                    } else if (row.handlerType === 'ROLE') {
                      return row.handlerUnitName.join('、')
                    }
                  }
                },
                { label: "完成情况", prop: "taskStatus", minWidth: 143, align: "left" },
                {
                    label: "剩余时间",
                    prop: "remainingTime",
                    minWidth: 143,
                    align: "left",
                },
            ],
          waitTableHeaders: [
            { label: "流程环节", prop: "taskName", minWidth: 150, align: "left" },
            {
              label: "申请项目",
              prop: "projectName",
              minWidth: 150,
              align: "left",
            },
            {
              label: "处理人",
              prop: "promoterName",
              minWidth: 100,
              align: "left",
              formatter: (row) => {
                if (row.handlerType === 'USER') {
                  return row.promoterName.join('、')
                } else if (row.handlerType === 'DEPT') {
                  return row.promoterUnitName.join('、')
                } else if (row.handlerType === 'ROLE') {
                  return row.promoterUnitName.join('、')
                }
              }
            },
            // { label: "完成情况", prop: "taskStatus", minWidth: 143, align: "left" },
            // {
            //   label: "剩余时间",
            //   prop: "remainingTime",
            //   minWidth: 143,
            //   align: "left",
            // },
          ],
            scheduleTableHeaders: [
                {
                    label: "待办事项",
                    prop: "projectPlanInfoTitle",
                    minWidth: 150,
                    align: "left",
                },
                {
                    label: "对应项目",
                    prop: "projectName",
                    minWidth: 150,
                    align: "left",
                },
                { label: "审批人", prop: "assigneeName", minWidth: 100, align: "left" },
                {
                    label: "状态",
                    prop: "progressStatusStr",
                    minWidth: 143,
                    align: "left",
                },
                {
                    label: "剩余时间",
                    prop: "remainder",
                    minWidth: 143,
                    align: "left",
                },
            ],
        };
    },
    props: {
        calculation: [],
        countExceptionProjectData: {},
        calculation: Array,
        countExceptionProjectData: Object,
    },
    created() {
        this.currentTab = "process";
        this.currentTableHeaders = this.processTableHeaders;
        this.getList();
    },
    methods: {
        pageChange(data) {
          this.queryParams.currentPage = data.page
          this.getList()
        },
        async getList() {
            const resp = await getTodo(this.queryParams);
            if (resp.code === 200) {
                this.total.value = resp.total;
                this.tableData.value = resp.rows;
            var resp;
            this.tableLoading = true
            if (this.currentTab == "process") {
                resp = await getProjectProcessTodo(this.queryParams);
                if (resp.code === 200) {
                    this.total = resp.total;
                    this.tableData = resp.taskList;
                    this.tableLoading = false
                }
            } else if (this.currentTab == "wait") {
              resp = await getProjectProcessWait(this.queryParams);
              if (resp.code === 200) {
                this.total = resp.total;
                this.tableData = resp.data;
                this.tableLoading = false
              }
            } else {
                resp = await getProjectPlanToDoList(this.queryParams);
                if (resp.code === 200) {
                    this.total = resp.total;
                    this.tableData = resp.data;
                    this.tableLoading = false
                }
            }
        },
        handleDetail(row) {
            console.log(111);
            this.$router.push({
                path: '/projectManage/nodeDetails',
                query: {
                    taskId: row.id,
                    id: row.businessKey,
                    disabled: 'true'
        async handleDetail(row) {
            if (this.currentTab == "process" || this.currentTab == "wait") {
                const resp = await getDetailByProcessInsId({ processDefId: row.processDefId, processInsId: row.processInsId });
                if (resp.code === 200 && resp.data.length > 0) {
                    const projectProcess = resp.data[0]
                  sessionStorage.removeItem("projectProDetail")
                    this.$router.push({
                        path: '/projectFlow/detail',
                        query: {
                          projectId: projectProcess.projectId,
                          processDefId: row.processDefId,
                          processInsId: row.processInsId,
                          deployId: row.deployId,
                          processName: row.processName,
                          selectTabId: this.currentTab == "process" ? 2 : 3
                        }
                    })
                }
            });
            } else {
                row.id = row.planId;
                this.$router.push({
                    path: "/projectManage/progressRecord",
                    query: {
                        data: row,
                    },
                });
            }
        },
        handleUpdate(row) {
            this.$router.push({
                path: '/projectManage/nodeDetails',
                query: {
                    taskId: row.id,
                    id: row.businessKey
        async handleUpdate(row) {
            if (this.currentTab == "process" || this.currentTab == "wait") {
                const resp = await getDetailByProcessInsId({ processDefId: row.processDefId, processInsId: row.processInsId });
                if (resp.code === 200 && resp.data.length > 0) {
                  const projectProcess = resp.data[0]
                  sessionStorage.removeItem("projectProDetail")
                  this.$router.push({
                      path: '/projectFlow/detail',
                      query: {
                        projectId: projectProcess.projectId,
                        processDefId: row.processDefId,
                        processInsId: row.processInsId,
                        deployId: row.deployId,
                        processName: row.processName,
                        selectTabId: this.currentTab == "process" ? 2 : 3
                      }
                  })
                }
            });
            console.log(111);
            } else {
                row.id = row.planId;
                this.$router.push({
                    path: "/projectManage/progressRecord",
                    query: {
                        data: row,
                    },
                });
            }
        },
        switchTab(tab) {
            this.currentTab = tab;
        }
    }
}

            this.currentTableHeaders =
                tab == "process" ? this.processTableHeaders : tab == "wait" ? this.waitTableHeaders : this.scheduleTableHeaders;
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
.tab {
    padding: 8px;
    padding: 6px;
    border: 1px solid #dbdeea;
    cursor: pointer;
    width: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.active {
@@ -170,8 +337,7 @@
}

::v-deep .el-pagination .btn-prev .el-icon,
 ::v-deep .el-pagination .btn-next .el-icon 
{
::v-deep .el-pagination .btn-next .el-icon {
    display: inline;
}
.flex {
@@ -179,5 +345,4 @@
    justify-content: space-between;
    font-size: 12px;
}

</style>