| 提交 | 用户 | 时间 | ||
| 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"> | |
| 3e359e | 72 | <MyProcessViewer style="height: 700px" key="designer" :xml="bpmnXml" /> |
| 820397 | 73 | </Dialog> |
| H | 74 | </template> |
| 75 | ||
| 76 | <script lang="ts" setup> | |
| 77 | import { dateFormatter } from '@/utils/formatTime' | |
| 78 | import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package' | |
| 79 | import * as DefinitionApi from '@/api/bpm/definition' | |
| 80 | import { setConfAndFields2 } from '@/utils/formCreate' | |
| 81 | ||
| 82 | defineOptions({ name: 'BpmProcessDefinition' }) | |
| 83 | ||
| 84 | const { push } = useRouter() // 路由 | |
| 85 | const { query } = useRoute() // 查询参数 | |
| 86 | ||
| 87 | const loading = ref(true) // 列表的加载中 | |
| 88 | const total = ref(0) // 列表的总页数 | |
| 89 | const list = ref([]) // 列表的数据 | |
| 90 | const queryParams = reactive({ | |
| 91 | pageNo: 1, | |
| 92 | pageSize: 10, | |
| 93 | key: query.key | |
| 94 | }) | |
| 95 | ||
| 96 | /** 查询列表 */ | |
| 97 | const getList = async () => { | |
| 98 | loading.value = true | |
| 99 | try { | |
| 100 | const data = await DefinitionApi.getProcessDefinitionPage(queryParams) | |
| 101 | list.value = data.list | |
| 102 | total.value = data.total | |
| 103 | } finally { | |
| 104 | loading.value = false | |
| 105 | } | |
| 106 | } | |
| 107 | ||
| 108 | /** 流程表单的详情按钮操作 */ | |
| 109 | const formDetailVisible = ref(false) | |
| 110 | const formDetailPreview = ref({ | |
| 111 | rule: [], | |
| 112 | option: {} | |
| 113 | }) | |
| 3e359e | 114 | const handleFormDetail = async (row: any) => { |
| 820397 | 115 | if (row.formType == 10) { |
| H | 116 | // 设置表单 |
| 117 | setConfAndFields2(formDetailPreview, row.formConf, row.formFields) | |
| 118 | // 弹窗打开 | |
| 119 | formDetailVisible.value = true | |
| 120 | } else { | |
| 121 | await push({ | |
| 122 | path: row.formCustomCreatePath | |
| 123 | }) | |
| 124 | } | |
| 125 | } | |
| 126 | ||
| 127 | /** 流程图的详情按钮操作 */ | |
| 128 | const bpmnDetailVisible = ref(false) | |
| 3e359e | 129 | const bpmnXml = ref('') |
| H | 130 | const handleBpmnDetail = async (row: any) => { |
| 131 | // 设置可见 | |
| 132 | bpmnXml.value = '' | |
| 820397 | 133 | bpmnDetailVisible.value = true |
| 3e359e | 134 | // 加载 BPMN XML |
| H | 135 | bpmnXml.value = (await DefinitionApi.getProcessDefinition(row.id))?.bpmnXml |
| 820397 | 136 | } |
| H | 137 | |
| 138 | /** 初始化 **/ | |
| 139 | onMounted(() => { | |
| 140 | getList() | |
| 141 | }) | |
| 142 | </script> | |
