|
|
@@ -1,229 +1,16 @@
|
|
|
<template>
|
|
|
- <div class="pageWrap flex-column-page-wrap">
|
|
|
- <div class="flex-column-page-wrap">
|
|
|
- <!-- 公用搜索组件 -->
|
|
|
- <LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>
|
|
|
-
|
|
|
- <!-- LeTable 组件使用 -->
|
|
|
- <LeTable
|
|
|
- ref="tableRef"
|
|
|
- v-model:searchParams="tableOpts.searchParams"
|
|
|
- v-bind="tableOpts"
|
|
|
- v-model:curRow="tableOpts.curRow"
|
|
|
- v-model:checked-options="checkedColumns"
|
|
|
- :columns="activeColumns"
|
|
|
- >
|
|
|
- <template #toolLeft>
|
|
|
- <el-button type="primary">操作我收到的</el-button>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template #currentNodeSlot="scope">
|
|
|
- <div v-if="scope.row.currentNode === 'complete'">-</div>
|
|
|
- <div v-else>{{ scope.row.currentNode }}</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template #instanceStateSlot="scope">
|
|
|
- <el-tag v-if="scope.row.instanceState === 0" size="small" effect="plain">审批中</el-tag>
|
|
|
- <el-tag v-if="scope.row.instanceState === 1" size="small" type="info" effect="plain">审批通过</el-tag>
|
|
|
- <el-tag v-if="scope.row.instanceState === 2" size="small" type="warning" effect="plain">审批拒绝</el-tag>
|
|
|
- <el-tag v-if="scope.row.instanceState === 3" size="small" type="warning" effect="plain">撤销审批</el-tag>
|
|
|
- <el-tag v-if="scope.row.instanceState === 4" size="small" type="warning" effect="plain">超时结束</el-tag>
|
|
|
- <el-tag v-if="scope.row.instanceState === 5" size="small" type="warning" effect="plain">强制终止</el-tag>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template #durationSlot="scope">
|
|
|
- <div>{{ format_milliseconds(scope.row.duration) }}</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <template #actionSlot="scope">
|
|
|
- <el-tooltip content="查看" placement="bottom" effect="light">
|
|
|
- <el-icon class="ibt0" @click="openDetail(scope.row)">
|
|
|
- <View />
|
|
|
- </el-icon>
|
|
|
- </el-tooltip>
|
|
|
- </template>
|
|
|
- </LeTable>
|
|
|
- </div>
|
|
|
-
|
|
|
- <message-detail v-if="visibleDetail" v-model="visibleDetail" :message-id="currentId" @closed="visibleDetail = false"> </message-detail>
|
|
|
- </div>
|
|
|
+ <ApprovalIndex ref="myApplication" :current-task-type="taskType"></ApprovalIndex>
|
|
|
</template>
|
|
|
-<script lang="tsx" setup>
|
|
|
-import { processTaskPageMyReceivedApi } from '@/api/flow/processTask'
|
|
|
-import { nextTick, ref, watch } from 'vue'
|
|
|
-import { useTablePage } from '@/hooks/useTablePage'
|
|
|
-import { format_milliseconds } from '@/utils'
|
|
|
-import MessageDetail from './detail.vue'
|
|
|
-import { useRoute } from 'vue-router'
|
|
|
-const route = useRoute()
|
|
|
-
|
|
|
-const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
|
|
|
-const currentId = ref(null)
|
|
|
-
|
|
|
-// 表格搜索条件
|
|
|
-const forms = ref([
|
|
|
- {
|
|
|
- prop: 'processName',
|
|
|
- label: '流程名称：',
|
|
|
- itemType: 'input',
|
|
|
- placeholder: '请输入流程名称'
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'createBy',
|
|
|
- label: '发布人：',
|
|
|
- itemType: 'input',
|
|
|
- placeholder: '请输入发布人'
|
|
|
- }
|
|
|
-])
|
|
|
|
|
|
-// table列表数据请求
|
|
|
-const queryList = async () => {
|
|
|
- const { options, searchParams } = tableOpts
|
|
|
- options.loading = true
|
|
|
- try {
|
|
|
- const { records: list, total } = await processTaskPageMyReceivedApi(searchParams)
|
|
|
- tableOpts.total = total
|
|
|
- tableOpts.list = list
|
|
|
- } catch {
|
|
|
- console.log('获取列表数据失败')
|
|
|
- tableOpts.total = 0
|
|
|
- tableOpts.list = []
|
|
|
- options.loading = false // 更改加载中的 loading值
|
|
|
- } finally {
|
|
|
- options.loading = false
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// table 参数
|
|
|
-const columns = [
|
|
|
- {
|
|
|
- prop: 'processName',
|
|
|
- label: '流程名称',
|
|
|
- minWidth: 80
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'currentNode',
|
|
|
- label: '当前所在节点',
|
|
|
- minWidth: 80,
|
|
|
- slots: {
|
|
|
- default: 'currentNodeSlot'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'instanceState',
|
|
|
- label: '流程状态',
|
|
|
- minWidth: 100,
|
|
|
- slots: {
|
|
|
- default: 'instanceStateSlot'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'createBy',
|
|
|
- label: '发起人',
|
|
|
- minWidth: 100
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'createTime',
|
|
|
- label: '发起时间',
|
|
|
- minWidth: 126
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'endTime',
|
|
|
- label: '结束时间',
|
|
|
- minWidth: 126
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'duration',
|
|
|
- label: '处理耗时',
|
|
|
- minWidth: 100,
|
|
|
- slots: {
|
|
|
- default: 'durationSlot'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'expireTime',
|
|
|
- label: '期望完成时间',
|
|
|
- minWidth: 126
|
|
|
- },
|
|
|
- {
|
|
|
- prop: 'action',
|
|
|
- label: '操作',
|
|
|
- width: 100,
|
|
|
- fixed: 'right',
|
|
|
- slots: {
|
|
|
- default: 'actionSlot'
|
|
|
- }
|
|
|
- }
|
|
|
-]
|
|
|
-
|
|
|
-const { searchData, tableOpts, checkedColumns, activeColumns } = useTablePage(
|
|
|
- {
|
|
|
- options: {
|
|
|
- showIndex: false
|
|
|
- },
|
|
|
- // 需要展示的列
|
|
|
- columns,
|
|
|
- // 控制列配置
|
|
|
- columnsConfig: {
|
|
|
- columns
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- queryList,
|
|
|
- fetchImmediate: false
|
|
|
- }
|
|
|
-)
|
|
|
-
|
|
|
-const openDetail = (row: any) => {
|
|
|
- currentId.value = row.id
|
|
|
- visibleDetail.value = true
|
|
|
-}
|
|
|
-
|
|
|
-nextTick(() => {
|
|
|
- queryList()
|
|
|
-})
|
|
|
-
|
|
|
-watch(
|
|
|
- () => route.query,
|
|
|
- (newPath, oldPath) => {
|
|
|
- if (JSON.stringify(newPath) !== '{}') {
|
|
|
- nextTick(() => {
|
|
|
- openDetail(newPath)
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
-)
|
|
|
+<script setup>
|
|
|
+import ApprovalIndex from '../components/approvalIndex.vue'
|
|
|
+import { ref } from 'vue'
|
|
|
+/**
|
|
|
+ * pendingApproval 待审批
|
|
|
+ * myApplication 我的申请
|
|
|
+ * myReceived 我收到的
|
|
|
+ * pendingClaim 认领任务
|
|
|
+ * approved 已审批
|
|
|
+ */
|
|
|
+const taskType = ref('myReceived')
|
|
|
</script>
|
|
|
-<style scoped lang="scss">
|
|
|
-.pageWrap {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- height: 100%;
|
|
|
- min-height: 0;
|
|
|
- //background-color: #fafafa;
|
|
|
- background-color: var(--el-fill-color-lighter);
|
|
|
- //background: #fff;
|
|
|
-}
|
|
|
-// 单独自己写的
|
|
|
-/*:deep(.box-card) {
|
|
|
- height: 100%;
|
|
|
- .el-card__body {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-}*/
|
|
|
-
|
|
|
-// 应用的树结构样式
|
|
|
-:deep(.menu-tree) {
|
|
|
- .el-tree-node__content {
|
|
|
- height: 36px;
|
|
|
- }
|
|
|
- .el-tree-node__content .el-tree-node__label .icon {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.nopadding {
|
|
|
- padding: 0px;
|
|
|
-}
|
|
|
-</style>
|
luoyali