| 提交 | 用户 | 时间 | ||
| 759b1c | 1 | <template> |
| H | 2 | <div class="app-container"> |
| 3 | <!-- 列表 --> | |
| 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="100"> | |
| 7 | <template v-slot="scope"> | |
| 8 | <el-button type="text" @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="category" width="100"> | |
| 14 | <template v-slot="scope"> | |
| 15 | <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" /> | |
| 16 | </template> | |
| 17 | </el-table-column> | |
| 18 | <el-table-column label="表单信息" align="center" prop="formType" width="200"> | |
| 19 | <template v-slot="scope"> | |
| 20 | <el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)"> | |
| 21 | <span>{{ scope.row.formName }}</span> | |
| 22 | </el-button> | |
| 23 | <el-button v-else-if="scope.row.formCustomCreatePath" type="text" @click="handleFormDetail(scope.row)"> | |
| 24 | <span>{{ scope.row.formCustomCreatePath }}</span> | |
| 25 | </el-button> | |
| 26 | <label v-else>暂无表单</label> | |
| 27 | </template> | |
| 28 | </el-table-column> | |
| 29 | <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80"> | |
| 30 | <template v-slot="scope"> | |
| 31 | <el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag> | |
| 32 | <el-tag size="medium" 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 v-slot="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 label="部署时间" align="center" prop="deploymentTime" width="180"> | |
| 42 | <template v-slot="scope"> | |
| 43 | <span>{{ parseTime(scope.row.deploymentTime) }}</span> | |
| 44 | </template> | |
| 45 | </el-table-column> | |
| 46 | <el-table-column label="定义描述" align="center" prop="description" width="300" show-overflow-tooltip /> | |
| 47 | <el-table-column label="操作" align="center" width="150" fixed="right"> | |
| 48 | <template v-slot="scope"> | |
| 49 | <el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleAssignRule(scope.row)" | |
| 50 | v-hasPermi="['bpm:task-assign-rule:update']">分配规则</el-button> | |
| 51 | </template> | |
| 52 | </el-table-column> | |
| 53 | </el-table> | |
| 54 | ||
| 55 | <!-- 流程表单配置详情 --> | |
| 56 | <el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body> | |
| 57 | <parser :key="new Date().getTime()" :form-conf="detailForm" /> | |
| 58 | </el-dialog> | |
| 59 | ||
| 60 | <!-- 流程模型图的预览 --> | |
| 61 | <el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body> | |
| 62 | <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" /> | |
| 63 | </el-dialog> | |
| 64 | ||
| 65 | <!-- 分页组件 --> | |
| 66 | <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" | |
| 67 | @pagination="getList"/> | |
| 68 | ||
| 69 | <!-- ========== 流程任务分配规则 ========== --> | |
| 70 | <taskAssignRuleDialog ref="taskAssignRuleDialog" /> | |
| 71 | </div> | |
| 72 | </template> | |
| 73 | ||
| 74 | <script> | |
| 75 | import {getProcessDefinitionBpmnXML, getProcessDefinitionPage} from "@/api/bpm/definition"; | |
| 76 | import {DICT_TYPE, getDictDatas} from "@/utils/dict"; | |
| 77 | import {decodeFields} from "@/utils/formGenerator"; | |
| 78 | import Parser from '@/components/parser/Parser' | |
| 79 | import taskAssignRuleDialog from "../taskAssignRule/taskAssignRuleDialog"; | |
| 80 | ||
| 81 | export default { | |
| 82 | name: "BpmProcessDefinition", | |
| 83 | components: { | |
| 84 | Parser, | |
| 85 | taskAssignRuleDialog | |
| 86 | }, | |
| 87 | data() { | |
| 88 | return { | |
| 89 | // 遮罩层 | |
| 90 | loading: true, | |
| 91 | // 总条数 | |
| 92 | total: 0, | |
| 93 | // 表格数据 | |
| 94 | list: [], | |
| 95 | // 查询参数 | |
| 96 | queryParams: { | |
| 97 | pageNo: 1, | |
| 98 | pageSize: 10 | |
| 99 | }, | |
| 100 | ||
| 101 | // 流程表单详情 | |
| 102 | detailOpen: false, | |
| 103 | detailForm: { | |
| 104 | fields: [] | |
| 105 | }, | |
| 106 | ||
| 107 | // BPMN 数据 | |
| 108 | showBpmnOpen: false, | |
| 109 | bpmnXML: null, | |
| 110 | bpmnControlForm: { | |
| 111 | prefix: "flowable" | |
| 112 | }, | |
| 113 | ||
| 114 | // 数据字典 | |
| 115 | categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY), | |
| 116 | }; | |
| 117 | }, | |
| 118 | created() { | |
| 119 | const key = this.$route.query && this.$route.query.key | |
| 120 | if (key) { | |
| 121 | this.queryParams['key'] = key | |
| 122 | } | |
| 123 | this.getList(); | |
| 124 | }, | |
| 125 | methods: { | |
| 126 | /** 查询流程定义列表 */ | |
| 127 | getList() { | |
| 128 | this.loading = true; | |
| 129 | getProcessDefinitionPage(this.queryParams).then(response => { | |
| 130 | this.list = response.data.list; | |
| 131 | this.total = response.data.total; | |
| 132 | this.loading = false; | |
| 133 | } | |
| 134 | ); | |
| 135 | }, | |
| 136 | /** 流程表单的详情按钮操作 */ | |
| 137 | handleFormDetail(row) { | |
| 138 | // 流程表单 | |
| 139 | if (row.formId) { | |
| 140 | // 设置值 | |
| 141 | this.detailForm = { | |
| 142 | ...JSON.parse(row.formConf), | |
| 143 | fields: decodeFields(row.formFields) | |
| 144 | } | |
| 145 | // 弹窗打开 | |
| 146 | this.detailOpen = true | |
| 147 | // 业务表单 | |
| 148 | } else if (row.formCustomCreatePath) { | |
| 149 | this.$router.push({ path: row.formCustomCreatePath}); | |
| 150 | } | |
| 151 | }, | |
| 152 | /** 流程图的详情按钮操作 */ | |
| 153 | handleBpmnDetail(row) { | |
| 154 | getProcessDefinitionBpmnXML(row.id).then(response => { | |
| 155 | this.bpmnXML = response.data.bpmnXml | |
| 156 | // 弹窗打开 | |
| 157 | this.showBpmnOpen = true | |
| 158 | }) | |
| 159 | }, | |
| 160 | /** 处理任务分配规则列表的按钮操作 */ | |
| 161 | handleAssignRule(row) { | |
| 162 | this.$refs['taskAssignRuleDialog'].initProcessDefinition(row.id); | |
| 163 | }, | |
| 164 | } | |
| 165 | }; | |
| 166 | </script> | |
| 167 | ||
| 168 | <style lang="scss"> | |
| 169 | .my-process-designer { | |
| 170 | height: calc(100vh - 200px); | |
| 171 | } | |
| 172 | </style> | |
