New file |
| | |
| | | <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="{ active: currentTab === 'progress' }" |
| | | class="tab" |
| | | @click="switchTab('progress')" |
| | | > |
| | | 进度待办 |
| | | </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 |
| | | 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 { getTodo } from '@/api/message'; |
| | | export default { |
| | | data() { |
| | | return { |
| | | currentTab: "process", |
| | | total: 0, |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10 |
| | | }, |
| | | 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' } |
| | | ] |
| | | } |
| | | }, |
| | | props: { |
| | | calculation: Array, |
| | | countExceptionProjectData:Object, |
| | | }, |
| | | created() { |
| | | this.getList(); |
| | | }, |
| | | methods: { |
| | | async getList() { |
| | | const resp = await getTodo(this.queryParams); |
| | | if (resp.code === 200) { |
| | | this.total.value = resp.total; |
| | | this.tableData.value = resp.rows; |
| | | } |
| | | }, |
| | | handleDetail(row) { |
| | | console.log(111); |
| | | this.$router.push({ |
| | | path: '/projectManage/nodeDetails', |
| | | query: { |
| | | taskId: row.id, |
| | | id: row.businessKey, |
| | | disabled: 'true' |
| | | } |
| | | }); |
| | | }, |
| | | handleUpdate(row) { |
| | | this.$router.push({ |
| | | path: '/projectManage/nodeDetails', |
| | | query: { |
| | | taskId: row.id, |
| | | id: row.businessKey |
| | | } |
| | | }); |
| | | console.log(111); |
| | | }, |
| | | switchTab(tab) { |
| | | this.currentTab = tab; |
| | | } |
| | | } |
| | | } |
| | | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .tab { |
| | | padding: 8px; |
| | | border: 1px solid #dbdeea; |
| | | cursor: pointer; |
| | | width: 72px; |
| | | } |
| | | |
| | | .active { |
| | | border: 1px solid #3369ff; |
| | | color: #3369ff; |
| | | } |
| | | |
| | | .fonts { |
| | | font-size: 16px; |
| | | color: #212a40; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | ::v-deep .el-table__row { |
| | | font-size: 12px; |
| | | } |
| | | |
| | | ::v-deep .el-pagination { |
| | | margin: -15px; |
| | | text-align: end; |
| | | } |
| | | |
| | | ::v-deep .el-pagination .btn-prev .el-icon, |
| | | ::v-deep .el-pagination .btn-next .el-icon |
| | | { |
| | | display: inline; |
| | | } |
| | | .flex { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | </style> |