流程待办跳转

zhanghua

2024-11-30 dd4c953182002b45f84e287d210463e65c5ef18f

 src/views/components/noticeTable.vue

@@ -1,238 +1,260 @@
<template>
  <div>
    <div class="flex justify-between mb-[15px]">
      <div class="block mb-3 font-semibold fonts">待办事项</div>
      <div class="flex text-[12px]">
        <div
          :class="{ active: currentTab === 'process' }"
          class="tab"
          @click="switchTab('process')"
        >
          流程待办
    <div>
        <div class="flex justify-between mb-[15px]">
            <div class="block mb-3 font-semibold fonts">待办事项</div>
            <div class="flex text-[12px]">
                <div
                    :class="{ active: currentTab === 'process' }"
                    class="tab"
                    @click="switchTab('process')"
                >
                    流程待办
                </div>
                <div
                    :class="{ active: currentTab === 'schedule' }"
                    class="tab"
                    @click="switchTab('schedule')"
                >
                    进度待办
                </div>
            </div>
        </div>
        <div
          :class="{ active: currentTab === 'schedule' }"
          class="tab"
          @click="switchTab('schedule')"
        <el-table
            :data="tableData"
            :header-cell-style="{
                background: '#F5F7FC',
                color: '#454B5E',
                fontSize: '12px'
            }"
            height="280"
            max-height="280"
        >
          进度待办
        </div>
      </div>
    </div>
    <el-table
      :data="tableData"
      :header-cell-style="{
        background: '#F5F7FC',
        color: '#454B5E',
        fontSize: '12px',
      }"
      height="280"
      max-height="280"
    >
      <el-table-column
        v-for="column in currentTableHeaders"
        :key="column.prop"
        :align="column.align"
        :label="column.label"
        :min-width="column.minWidth"
        :prop="column.prop"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
            <el-table-column
                v-for="column in currentTableHeaders"
                :key="column.prop"
                :align="column.align"
                :label="column.label"
                :min-width="column.minWidth"
                :prop="column.prop"
                :show-overflow-tooltip="true"
            >
            </el-table-column>

      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="150"
      >
        <template #default="scope">
          <el-button
            plain
            size="small"
            type="primary"
            @click="handleDetail(scope.row)"
          >
            查看</el-button
          >
          <el-button
            plain
            size="small"
            type="primary"
            @click="handleUpdate(scope.row)"
          >
            处置</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total >= 0"
      :limit="queryParams.pageSize"
      :page="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />
  </div>
            <el-table-column
                align="center"
                fixed="right"
                label="操作"
                min-width="150"
            >
                <template #default="scope">
                    <el-button
                        plain
                        size="small"
                        type="primary"
                        @click="handleDetail(scope.row)"
                    >
                        查看</el-button
                    >
                    <el-button
                        plain
                        size="small"
                        type="primary"
                        @click="handleUpdate(scope.row)"
                    >
                        处置</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total >= 0"
            :limit="queryParams.pageSize"
            :page="queryParams.pageNum"
            :total="total"
            @pagination="getList"
        />
    </div>
</template>
<script>
import { getProjectProcessTodo } from "@/api/projectProcess/projectProcess.js";
import { getProjectProcessTodo, getDetailByProcessInsId } from "@/api/projectProcess/projectProcess.js";
import { getProjectPlanToDoList } from "@/api/projectPlan";
export default {
  data() {
    return {
      currentTab: "process",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      tableData: [],
      currentTableHeaders: [],
      processTableHeaders: [
        { label: "流程环节", prop: "taskName", minWidth: 150, align: "left" },
        {
          label: "申请项目",
          prop: "processName",
          minWidth: 150,
          align: "left",
        },
        { label: "审批人", prop: "handlerName", minWidth: 100, align: "left" },
        { 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: Array,
    countExceptionProjectData: Object,
  },
  created() {
    (this.currentTab = "process"),
      (this.currentTableHeaders = this.processTableHeaders);
    this.getList();
  },
  methods: {
    async getList() {
      var resp;
      this.total = 0;
      this.tableData = [];
      if (this.currentTab == "process") {
        resp = await getProjectProcessTodo(this.queryParams);
        if (resp.code === 200) {
          this.total = resp.total;
          this.tableData = resp.taskList;
        }
      } else {
        resp = await getProjectPlanToDoList(this.queryParams);
        if (resp.code === 200) {
          this.total = resp.total;
          this.tableData = resp.data;
        }
      }
    data() {
        return {
            currentTab: "process",
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 5,
            },
            tableData: [],
            currentTableHeaders: [],
            processTableHeaders: [
                { label: "流程环节", prop: "taskName", minWidth: 150, align: "left" },
                {
                    label: "申请项目",
                    prop: "processName",
                    minWidth: 150,
                    align: "left",
                },
                { label: "审批人", prop: "handlerName", minWidth: 100, align: "left" },
                { 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",
                },
            ],
        };
    },
    handleDetail(row) {
      if (this.currentTab == "process") {
      } else {
        row.id = row.planId;
        this.$router.push({
          path: "/projectManage/progressRecord",
          query: {
            data: row,
          },
        });
      }
    props: {
        calculation: Array,
        countExceptionProjectData: Object,
    },
    handleUpdate(row) {
      if (this.currentTab == "process") {
      } else {
        row.id = row.planId;
        this.$router.push({
          path: "/projectManage/progressRecord",
          query: {
            data: row,
          },
        });
      }
    created() {
        this.currentTab = "process";
        this.currentTableHeaders = this.processTableHeaders;
        this.getList();
    },
    switchTab(tab) {
      this.currentTab = tab;
      this.currentTableHeaders =
        tab == "process" ? this.processTableHeaders : this.scheduleTableHeaders;
      this.getList();
    methods: {
        async getList() {
            var resp;
            this.total = 0;
            this.tableData = [];
            if (this.currentTab == "process") {
                resp = await getProjectProcessTodo(this.queryParams);
                if (resp.code === 200) {
                    this.total = resp.total;
                    this.tableData = resp.taskList;
                }
            } else {
                resp = await getProjectPlanToDoList(this.queryParams);
                if (resp.code === 200) {
                    this.total = resp.total;
                    this.tableData = resp.data;
                }
            }
        },
        async handleDetail(row) {
            if (this.currentTab == "process") {
                const resp = await getDetailByProcessInsId({ processDefId: row.processDefId, processInsId: row.processInsId });
                if (resp.code === 200 && resp.data.length > 0) {
                    const projectProcess = resp.data[0]
                    this.$router.push({
                        path: '/projectFlow/detail',
                        query: {
                            projectId: projectProcess.projectId,
                            processDefId: row.processDefId
                        }
                    })
                }
            } else {
                row.id = row.planId;
                this.$router.push({
                    path: "/projectManage/progressRecord",
                    query: {
                        data: row,
                    },
                });
            }
        },
        async handleUpdate(row) {
            if (this.currentTab == "process") {
                const resp = await getDetailByProcessInsId({ processDefId: row.processDefId, processInsId: row.processInsId });
                if (resp.code === 200 && resp.data.length > 0) {
                    const projectProcess = resp.data[0]
                    this.$router.push({
                        path: '/projectFlow/detail',
                        query: {
                            projectId: projectProcess.projectId,
                            processDefId: row.processDefId
                        }
                    })
                }
            } 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 : this.scheduleTableHeaders;
            this.getList();
        },
    },
  },
};
</script>

<style lang="scss" scoped>
.tab {
  padding: 8px;
  border: 1px solid #dbdeea;
  cursor: pointer;
  width: 72px;
    padding: 8px;
    border: 1px solid #dbdeea;
    cursor: pointer;
    width: 72px;
}

.active {
  border: 1px solid #3369ff;
  color: #3369ff;
    border: 1px solid #3369ff;
    color: #3369ff;
}

.fonts {
  font-size: 16px;
  color: #212a40;
  display: flex;
  align-items: center;
    font-size: 16px;
    color: #212a40;
    display: flex;
    align-items: center;
}

::v-deep .el-table__row {
  font-size: 12px;
    font-size: 12px;
}

::v-deep .el-pagination {
  margin: -15px;
  text-align: end;
    margin: -15px;
    text-align: end;
}

::v-deep .el-pagination .btn-prev .el-icon,
::v-deep .el-pagination .btn-next .el-icon {
  display: inline;
    display: inline;
}
.flex {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
</style>