index.vue 5.9 KB

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