|
|
@@ -1,36 +1,209 @@
|
|
|
<template>
|
|
|
- <div class="flex-column-page-wrap flex-wrap">
|
|
|
- <div class="warp-left">
|
|
|
- <ApprovedItem />
|
|
|
- </div>
|
|
|
+ <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>
|
|
|
|
|
|
- <div class="warp-right">
|
|
|
- <ApprovedContent />
|
|
|
+ <template #taskTypeSlot="scope">
|
|
|
+ <el-tag v-if="scope.row.taskType === 0" effect="plain">主办</el-tag>
|
|
|
+ <el-tag v-if="scope.row.taskType === 1" type="success" effect="plain">转办</el-tag>
|
|
|
+ <el-tag v-if="scope.row.taskType === 2" type="info" effect="plain">委派</el-tag>
|
|
|
+ <el-tag v-if="scope.row.taskType === 3 && scope.row.performType === 1" type="info" effect="plain">会签</el-tag>
|
|
|
+ <el-tag v-if="scope.row.taskType === 3 && scope.row.performType === 2" type="warning" effect="plain">或签</el-tag>
|
|
|
+ <el-tag v-if="scope.row.taskType === 3 && scope.row.performType === 2" type="danger" effect="plain">票签</el-tag>
|
|
|
+ </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>
|
|
|
</template>
|
|
|
+<script lang="tsx" setup>
|
|
|
+import { processTaskPagePendingClaimApi } from '@/api/flow/processTask'
|
|
|
+import { nextTick, ref, watch } from 'vue'
|
|
|
+import { useTablePage } from '@/hooks/useTablePage'
|
|
|
+import MessageDetail from './detail.vue'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import InstanceDetail from "@/views/flow/instance/instance-detail.vue";
|
|
|
+const route = useRoute()
|
|
|
|
|
|
-<script setup>
|
|
|
-import ApprovedItem from '../components/approvedItem.vue'
|
|
|
-import ApprovedContent from '../components/approvedContent.vue'
|
|
|
-</script>
|
|
|
+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 processTaskPagePendingClaimApi(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: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'launchBy',
|
|
|
+ label: '发起人',
|
|
|
+ minWidth: 100
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'launchTime',
|
|
|
+ label: '发起时间',
|
|
|
+ minWidth: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'taskName',
|
|
|
+ label: '当前任务名称',
|
|
|
+ minWidth: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'taskType',
|
|
|
+ label: '任务类型',
|
|
|
+ minWidth: 100,
|
|
|
+ slots: {
|
|
|
+ default: 'taskTypeSlot'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'expireTime',
|
|
|
+ label: '期望任务完成时间',
|
|
|
+ minWidth: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'createTime',
|
|
|
+ label: '任务开始时间',
|
|
|
+ minWidth: 150
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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>
|
|
|
<style scoped lang="scss">
|
|
|
-.flex-column-page-wrap.flex-wrap {
|
|
|
- flex-direction: row;
|
|
|
- background-color: #f2f3f5;
|
|
|
- padding: 10px 10px 0 10px;
|
|
|
+.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;
|
|
|
+ }
|
|
|
+}*/
|
|
|
|
|
|
-.warp-left {
|
|
|
- width: 330px; /*固定宽度*/
|
|
|
- overflow: auto; /*超出部分滚动*/
|
|
|
- background-color: var(--el-bg-color);
|
|
|
- margin-right: 10px;
|
|
|
+// 应用的树结构样式
|
|
|
+:deep(.menu-tree) {
|
|
|
+ .el-tree-node__content {
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+ .el-tree-node__content .el-tree-node__label .icon {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.warp-right {
|
|
|
- flex: 1; /*这里设置为占比1，填充满剩余空间*/
|
|
|
- //border: 1px solid #ff4400;
|
|
|
+.nopadding {
|
|
|
+ padding: 0px;
|
|
|
}
|
|
|
</style>
|
luoyali