From dd4c953182002b45f84e287d210463e65c5ef18f Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期六, 30 十一月 2024 14:02:10 +0800 Subject: [PATCH] 流程待办跳转 --- src/views/components/noticeTable.vue | 424 +++++++++++++++++++++++++++------------------------- 1 files changed, 223 insertions(+), 201 deletions(-) diff --git a/src/views/components/noticeTable.vue b/src/views/components/noticeTable.vue index ebf0b62..319ebda 100644 --- a/src/views/components/noticeTable.vue +++ b/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> -- Gitblit v1.8.0