| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | |
| 3 | <ContentWrap> | |
| 4 | <el-table v-loading="loading" :data="list"> | |
| 5 | <el-table-column label="定义编号" align="center" prop="id" width="400" /> | |
| 6 | <el-table-column label="流程名称" align="center" prop="name" width="200"> | |
| 7 | <template #default="scope"> | |
| 8 | <el-button type="primary" link @click="handleBpmnDetail(scope.row)"> | |
| 9 | <span>{{ scope.row.name }}</span> | |
| 10 | </el-button> | |
| 11 | </template> | |
| 12 | </el-table-column> | |
| 13 | <el-table-column label="定义分类" align="center" prop="categoryName" width="100" /> | |
| 14 | <el-table-column label="表单信息" align="center" prop="formType" width="200"> | |
| 15 | <template #default="scope"> | |
| 16 | <el-button | |
| 17 | v-if="scope.row.formType === 10" | |
| 18 | type="primary" | |
| 19 | link | |
| 20 | @click="handleFormDetail(scope.row)" | |
| 21 | > | |
| 22 | <span>{{ scope.row.formName }}</span> | |
| 23 | </el-button> | |
| 24 | <el-button v-else type="primary" link @click="handleFormDetail(scope.row)"> | |
| 25 | <span>{{ scope.row.formCustomCreatePath }}</span> | |
| 26 | </el-button> | |
| 27 | </template> | |
| 28 | </el-table-column> | |
| 29 | <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80"> | |
| 30 | <template #default="scope"> | |
| 31 | <el-tag v-if="scope.row">v{{ scope.row.version }}</el-tag> | |
| 32 | <el-tag type="warning" v-else>未部署</el-tag> | |
| 33 | </template> | |
| 34 | </el-table-column> | |
| 35 | <el-table-column label="状态" align="center" prop="version" width="80"> | |
| 36 | <template #default="scope"> | |
| 37 | <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag> | |
| 38 | <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag> | |
| 39 | </template> | |
| 40 | </el-table-column> | |
| 41 | <el-table-column | |
| 42 | label="部署时间" | |
| 43 | align="center" | |
| 44 | prop="deploymentTime" | |
| 45 | width="180" | |
| 46 | :formatter="dateFormatter" | |
| 47 | /> | |
| 48 | <el-table-column | |
| 49 | label="定义描述" | |
| 50 | align="center" | |
| 51 | prop="description" | |
| 52 | width="300" | |
| 53 | show-overflow-tooltip | |
| 54 | /> | |
| 55 | </el-table> | |
| 56 | <!-- 分页 --> | |
| 57 | <Pagination | |
| 58 | :total="total" | |
| 59 | v-model:page="queryParams.pageNo" | |
| 60 | v-model:limit="queryParams.pageSize" | |
| 61 | @pagination="getList" | |
| 62 | /> | |
| 63 | </ContentWrap> | |
| 64 | ||
| 65 | <!-- 弹窗：表单详情 --> | |
| 66 | <Dialog title="表单详情" v-model="formDetailVisible" width="800"> | |
| 67 | <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" /> | |
| 68 | </Dialog> | |
| 69 | ||
| 70 | <!-- 弹窗：流程模型图的预览 --> | |
| 71 | <Dialog title="流程图" v-model="bpmnDetailVisible" width="800"> | |
| 72 | <MyProcessViewer | |
| 73 | key="designer" | |
| 74 | v-model="bpmnXml" | |
| 75 | :value="bpmnXml as any" | |
| 76 | v-bind="bpmnControlForm" | |
| 77 | :prefix="bpmnControlForm.prefix" | |
| 78 | /> | |
| 79 | </Dialog> | |
| 80 | </template> | |
| 81 | ||
| 82 | <script lang="ts" setup> | |
| 83 | import { dateFormatter } from '@/utils/formatTime' | |
| 84 | import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package' | |
| 85 | import * as DefinitionApi from '@/api/bpm/definition' | |
| 86 | import { setConfAndFields2 } from '@/utils/formCreate' | |
| 87 | ||
| 88 | defineOptions({ name: 'BpmProcessDefinition' }) | |
| 89 | ||
| 90 | const { push } = useRouter() // 路由 | |
| 91 | const { query } = useRoute() // 查询参数 | |
| 92 | ||
| 93 | const loading = ref(true) // 列表的加载中 | |
| 94 | const total = ref(0) // 列表的总页数 | |
| 95 | const list = ref([]) // 列表的数据 | |
| 96 | const queryParams = reactive({ | |
| 97 | pageNo: 1, | |
| 98 | pageSize: 10, | |
| 99 | key: query.key | |
| 100 | }) | |
| 101 | ||
| 102 | /** 查询列表 */ | |
| 103 | const getList = async () => { | |
| 104 | loading.value = true | |
| 105 | try { | |
| 106 | const data = await DefinitionApi.getProcessDefinitionPage(queryParams) | |
| 107 | list.value = data.list | |
| 108 | total.value = data.total | |
| 109 | } finally { | |
| 110 | loading.value = false | |
| 111 | } | |
| 112 | } | |
| 113 | ||
| 114 | /** 流程表单的详情按钮操作 */ | |
| 115 | const formDetailVisible = ref(false) | |
| 116 | const formDetailPreview = ref({ | |
| 117 | rule: [], | |
| 118 | option: {} | |
| 119 | }) | |
| 120 | const handleFormDetail = async (row) => { | |
| 121 | if (row.formType == 10) { | |
| 122 | // 设置表单 | |
| 123 | setConfAndFields2(formDetailPreview, row.formConf, row.formFields) | |
| 124 | // 弹窗打开 | |
| 125 | formDetailVisible.value = true | |
| 126 | } else { | |
| 127 | await push({ | |
| 128 | path: row.formCustomCreatePath | |
| 129 | }) | |
| 130 | } | |
| 131 | } | |
| 132 | ||
| 133 | /** 流程图的详情按钮操作 */ | |
| 134 | const bpmnDetailVisible = ref(false) | |
| 135 | const bpmnXml = ref(null) | |
| 136 | const bpmnControlForm = ref({ | |
| 137 | prefix: 'flowable' | |
| 138 | }) | |
| 139 | const handleBpmnDetail = async (row) => { | |
| 140 | bpmnXml.value = (await DefinitionApi.getProcessDefinition(row.id))?.bpmnXml | |
| 141 | bpmnDetailVisible.value = true | |
| 142 | } | |
| 143 | ||
| 144 | /** 初始化 **/ | |
| 145 | onMounted(() => { | |
| 146 | getList() | |
| 147 | }) | |
| 148 | </script> | |
