index.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. <template>
  2. <div class="app-container">
  3. <!-- 搜索工作栏 -->
  4. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  5. <el-form-item label="流程标识" prop="key">
  6. <el-input v-model="queryParams.key" placeholder="请输入流程标识" clearable style="width: 240px;" size="small"
  7. @keyup.enter.native="handleQuery"/>
  8. </el-form-item>
  9. <el-form-item label="流程名称" prop="name">
  10. <el-input v-model="queryParams.name" placeholder="请输入流程名称" clearable style="width: 240px;" size="small"
  11. @keyup.enter.native="handleQuery"/>
  12. </el-form-item>
  13. <el-form-item label="流程分类" prop="category">
  14. <el-select v-model="queryParams.category" placeholder="流程分类" clearable size="small" style="width: 240px">
  15. <el-option v-for="dict in categoryDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
  16. </el-select>
  17. </el-form-item>
  18. <el-form-item>
  19. <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  20. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  21. </el-form-item>
  22. </el-form>
  23. <!-- 操作工具栏 -->
  24. <el-row :gutter="10" class="mb8">
  25. <el-col :span="1.5">
  26. <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
  27. v-hasPermi="['bpm:model:create']">新建流程</el-button>
  28. </el-col>
  29. <el-col :span="1.5">
  30. <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
  31. v-hasPermi="['bpm:model:import']">导入流程</el-button>
  32. </el-col>
  33. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  34. </el-row>
  35. <!-- 列表 -->
  36. <el-table v-loading="loading" :data="list">
  37. <el-table-column label="流程标识" align="center" prop="key" />
  38. <el-table-column label="流程名称" align="center" prop="name" width="200">
  39. <template slot-scope="scope">
  40. <el-button type="text" @click="handleBpmnDetail(scope.row)">
  41. <span>{{ scope.row.name }}</span>
  42. </el-button>
  43. </template>
  44. </el-table-column>
  45. <el-table-column label="流程分类" align="center" prop="category" width="100">
  46. <template slot-scope="scope">
  47. <span>{{ getDictDataLabel(DICT_TYPE.BPM_MODEL_CATEGORY, scope.row.category) }}</span>
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="表单信息" align="center" prop="formId">
  51. <template slot-scope="scope">
  52. <el-button v-if="scope.row.formId" type="text" @click="handleFormDetail(scope.row)">
  53. <span>{{ scope.row.formName }}</span>
  54. </el-button>
  55. <label v-else>暂无表单</label>
  56. </template>
  57. </el-table-column>
  58. <el-table-column label="创建时间" align="center" prop="createTime" width="180">
  59. <template slot-scope="scope">
  60. <span>{{ parseTime(scope.row.createTime) }}</span>
  61. </template>
  62. </el-table-column>
  63. <el-table-column label="最新部署的流程定义" align="center">
  64. <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
  65. <template slot-scope="scope">
  66. <el-tag size="medium" v-if="scope.row.processDefinition">v{{ scope.row.processDefinition.version }}</el-tag>
  67. <el-tag size="medium" type="warning" v-else>未部署</el-tag>
  68. </template>
  69. </el-table-column>
  70. <el-table-column label="激活状态" align="center" prop="processDefinition.version" width="80">
  71. <template slot-scope="scope">
  72. <el-switch v-if="scope.row.processDefinition" v-model="scope.row.processDefinition.suspensionState"
  73. :active-value="1" :inactive-value="2" @change="handleChangeState(scope.row)" />
  74. </template>
  75. </el-table-column>
  76. <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180">
  77. <template slot-scope="scope">
  78. <span v-if="scope.row.processDefinition">{{ parseTime(scope.row.processDefinition.deploymentTime) }}</span>
  79. </template>
  80. </el-table-column>
  81. </el-table-column>
  82. <el-table-column label="操作" align="center" width="380" fixed="right">
  83. <template slot-scope="scope">
  84. <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
  85. v-hasPermi="['bpm:model:update']">修改流程</el-button>
  86. <el-button size="mini" type="text" icon="el-icon-setting" @click="handleDesign(scope.row)"
  87. v-hasPermi="['bpm:model:update']">设计流程</el-button>
  88. <el-button size="mini" type="text" icon="el-icon-thumb" @click="handleDeploy(scope.row)"
  89. v-hasPermi="['bpm:model:deploy']">发布流程</el-button>
  90. <el-button size="mini" type="text" icon="el-icon-ice-cream-round" @click="handleDefinitionList(scope.row)"
  91. v-hasPermi="['bpm:model:query']">流程定义</el-button>
  92. <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
  93. v-hasPermi="['bpm:model:delete']">删除</el-button>
  94. </template>
  95. </el-table-column>
  96. </el-table>
  97. <!-- 分页组件 -->
  98. <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
  99. @pagination="getList"/>
  100. <!-- 流程表单配置详情 -->
  101. <el-dialog title="表单详情" :visible.sync="detailOpen" width="50%" append-to-body>
  102. <parser :key="new Date().getTime()" :form-conf="detailForm" />
  103. </el-dialog>
  104. <!-- 流程模型图的预览 -->
  105. <el-dialog title="流程图" :visible.sync="showBpmnOpen" width="80%" append-to-body>
  106. <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
  107. </el-dialog>
  108. <!-- 对话框(添加 / 修改) -->
  109. <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
  110. <el-form ref="form" :model="form" :rules="rules" label-width="110px">
  111. <el-form-item label="流程标识" prop="key">
  112. <el-input v-model="form.key" placeholder="请输入流标标识" style="width: 330px;" :disabled="form.id" />
  113. <el-tooltip v-if="!form.id" class="item" effect="light" content="新建后,流程标识不可修改!" placement="top">
  114. <i style="padding-left: 5px;" class="el-icon-question" />
  115. </el-tooltip>
  116. <el-tooltip v-else class="item" effect="light" content="流程标识不可修改!" placement="top">
  117. <i style="padding-left: 5px;" class="el-icon-question" />
  118. </el-tooltip>
  119. </el-form-item>
  120. <el-form-item label="流程名称" prop="name">
  121. <el-input v-model="form.name" placeholder="请输入流程名称" :disabled="form.id" clearable />
  122. </el-form-item>
  123. <el-form-item label="流程描述" prop="description">
  124. <el-input type="textarea" v-model="form.description" clearable />
  125. </el-form-item>
  126. <div v-if="form.id">
  127. <el-form-item label="表单类型" prop="formType">
  128. <el-radio-group v-model="form.formType">
  129. <el-radio v-for="dict in modelFormTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
  130. {{dict.label}}
  131. </el-radio>
  132. </el-radio-group>
  133. </el-form-item>
  134. <el-form-item v-if="form.formType === 10" label="流程表单" prop="formId" required error="流程表单不能为空">
  135. <el-select v-model="form.formId" clearable style="width: 100%">
  136. <el-option v-for="form in forms" :key="form.id" :label="form.name" :value="form.id"/>
  137. </el-select>
  138. </el-form-item>
  139. <el-form-item v-if="form.formType === 20" label="表单提交路由" prop="formCustomCreatePath" required error="表单提交路由不能为空">
  140. <el-input v-model="form.formCustomCreatePath" placeholder="请输入表单提交路由" style="width: 330px;" />
  141. <el-tooltip class="item" effect="light" content="自定义表单的提交路径,使用 Vue 的路由地址,例如说:bpm/oa/leave/create" placement="top">
  142. <i style="padding-left: 5px;" class="el-icon-question" />
  143. </el-tooltip>
  144. </el-form-item>
  145. <el-form-item v-if="form.formType === 20" label="表单查看路由" prop="formCustomViewPath" required error="表单查看路由不能为空">
  146. <el-input v-model="form.formCustomViewPath" placeholder="请输入表单查看路由" style="width: 330px;" />
  147. <el-tooltip class="item" effect="light" content="自定义表单的查看路径,使用 Vue 的路由地址,例如说:bpm/oa/leave/view" placement="top">
  148. <i style="padding-left: 5px;" class="el-icon-question" />
  149. </el-tooltip>
  150. </el-form-item>
  151. </div>
  152. </el-form>
  153. <div slot="footer" class="dialog-footer">
  154. <el-button type="primary" @click="submitForm">确 定</el-button>
  155. <el-button @click="cancel">取 消</el-button>
  156. </div>
  157. </el-dialog>
  158. <!-- 用户导入对话框 -->
  159. <el-dialog title="导入流程" :visible.sync="upload.open" width="400px" append-to-body>
  160. <el-upload ref="upload" :limit="1" accept=".bpmn, .xml" :headers="upload.headers" :action="upload.url"
  161. :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
  162. :auto-upload="false" name="bpmnFile" :data="upload.form" drag>
  163. <i class="el-icon-upload"></i>
  164. <div class="el-upload__text">
  165. 将文件拖到此处,或
  166. <em>点击上传</em>
  167. </div>
  168. <div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“bpm”或“xml”格式文件!</div>
  169. <div class="el-upload__tip" slot="tip">
  170. <el-form ref="uploadForm" size="mini" label-width="90px" :model="upload.form" :rules="upload.rules" @submit.native.prevent>
  171. <el-form-item label="流程标识" prop="key">
  172. <el-input v-model="upload.form.key" placeholder="请输入流标标识" style="width: 250px;" />
  173. <el-tooltip class="item" effect="light" content="新建后,流程标识不可修改!" placement="top">
  174. <i style="padding-left: 5px;" class="el-icon-question" />
  175. </el-tooltip>
  176. </el-form-item>
  177. <el-form-item label="流程名称" prop="name">
  178. <el-input v-model="upload.form.name" placeholder="请输入流程名称" clearable />
  179. </el-form-item>
  180. <el-form-item label="流程描述" prop="description">
  181. <el-input type="textarea" v-model="upload.form.description" clearable />
  182. </el-form-item>
  183. </el-form>
  184. </div>
  185. </el-upload>
  186. <div slot="footer" class="dialog-footer">
  187. <el-button type="primary" @click="submitFileForm">确 定</el-button>
  188. <el-button @click="uploadClose">取 消</el-button>
  189. </div>
  190. </el-dialog>
  191. </div>
  192. </template>
  193. <script>
  194. import {
  195. deleteModel,
  196. deployModel,
  197. getModelPage,
  198. getModel,
  199. updateModelState,
  200. createModel,
  201. updateModel
  202. } from "@/api/bpm/model";
  203. import {DICT_TYPE, getDictDatas} from "@/utils/dict";
  204. import {getForm, getSimpleForms} from "@/api/bpm/form";
  205. import {decodeFields} from "@/utils/formGenerator";
  206. import Parser from '@/components/parser/Parser'
  207. import {getBaseHeader} from "@/utils/request";
  208. export default {
  209. name: "model",
  210. components: {
  211. Parser
  212. },
  213. data() {
  214. return {
  215. // 遮罩层
  216. loading: true,
  217. // 显示搜索条件
  218. showSearch: true,
  219. // 总条数
  220. total: 0,
  221. // 表格数据
  222. list: [],
  223. // 查询参数
  224. queryParams: {
  225. pageNo: 1,
  226. pageSize: 10
  227. },
  228. // BPMN 数据
  229. showBpmnOpen: false,
  230. bpmnXML: null,
  231. bpmnControlForm: {
  232. prefix: "activiti"
  233. },
  234. // 流程表单详情
  235. detailOpen: false,
  236. detailForm: {
  237. fields: []
  238. },
  239. // 流程表单
  240. title: "",
  241. open: false,
  242. form: {},
  243. // 表单校验
  244. rules: {
  245. key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
  246. name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
  247. formType: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
  248. },
  249. // 流程导入参数
  250. upload: {
  251. // 是否显示弹出层(用户导入)
  252. open: false,
  253. // 是否禁用上传
  254. isUploading: false,
  255. // 设置上传的请求头部
  256. headers: getBaseHeader(),
  257. // 上传的地址
  258. url: process.env.VUE_APP_BASE_API + '/api/' + "/bpm/model/import",
  259. // 表单
  260. form: {},
  261. // 校验规则
  262. rules: {
  263. key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
  264. name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
  265. },
  266. },
  267. // 流程表单的下拉框的数据
  268. forms: [],
  269. // 数据字典
  270. categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
  271. modelFormTypeDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_FORM_TYPE)
  272. };
  273. },
  274. created() {
  275. this.getList();
  276. // 获得流程表单的下拉框的数据
  277. getSimpleForms().then(response => {
  278. this.forms = response.data
  279. })
  280. },
  281. methods: {
  282. /** 查询流程模型列表 */
  283. getList() {
  284. this.loading = true;
  285. getModelPage(this.queryParams).then(response => {
  286. this.list = response.data.list;
  287. this.total = response.data.total;
  288. this.loading = false;
  289. }
  290. );
  291. },
  292. /** 取消按钮 */
  293. cancel() {
  294. this.open = false;
  295. this.reset();
  296. },
  297. // 表单重置
  298. reset() {
  299. this.form = {
  300. id: undefined,
  301. key: undefined,
  302. name: undefined,
  303. description: undefined,
  304. formType: undefined,
  305. formId: undefined,
  306. formCustomCreatePath: undefined,
  307. formCustomViewPath: undefined
  308. };
  309. this.resetForm("form");
  310. },
  311. /** 搜索按钮操作 */
  312. handleQuery() {
  313. this.queryParams.pageNo = 1;
  314. this.getList();
  315. },
  316. /** 重置按钮操作 */
  317. resetQuery() {
  318. this.dateRange = [];
  319. this.resetForm("queryForm");
  320. this.handleQuery();
  321. },
  322. /** 新增按钮操作 */
  323. handleAdd() {
  324. this.reset();
  325. this.title = "新建模型";
  326. this.open = true;
  327. },
  328. /** 修改按钮操作 */
  329. handleUpdate(row) {
  330. this.reset();
  331. this.title = "修改模型";
  332. this.open = true;
  333. // 设置 form
  334. this.form = {
  335. ...row
  336. };
  337. // 触发一次校验
  338. this.$refs["form"].validate();
  339. },
  340. /** 设计按钮操作 */
  341. handleDesign(row) {
  342. this.$router.push({
  343. path:"/bpm/manager/model/design",
  344. query:{
  345. modelId: row.id
  346. }
  347. });
  348. },
  349. /** 提交按钮 */
  350. submitForm() {
  351. this.$refs["form"].validate(valid => {
  352. if (!valid) {
  353. return;
  354. }
  355. // 更新
  356. if (this.form.id) {
  357. updateModel({
  358. ...this.form,
  359. formId: this.form.formType === 10 ? this.form.formId : undefined,
  360. formCustomCreatePath: this.form.formType === 20 ? this.form.formCustomCreatePath : undefined,
  361. formCustomViewPath: this.form.formType === 20 ? this.form.formCustomViewPath : undefined,
  362. }).then(response => {
  363. this.msgSuccess("修改模型成功");
  364. this.open = false;
  365. this.getList();
  366. });
  367. return;
  368. }
  369. // 创建
  370. createModel(this.form).then(response => {
  371. this.msgSuccess("新建流程成功");
  372. this.open = false;
  373. this.getList();
  374. });
  375. });
  376. },
  377. /** 删除按钮操作 */
  378. handleDelete(row) {
  379. const that = this;
  380. this.$confirm('是否删除该流程!!', "警告", {
  381. confirmButtonText: "确定",
  382. cancelButtonText: "取消",
  383. type: "warning"
  384. }).then(function() {
  385. deleteModel(row.id).then(response => {
  386. that.getList();
  387. that.msgSuccess("删除成功");
  388. })
  389. })
  390. },
  391. /** 部署按钮操作 */
  392. handleDeploy(row) {
  393. const that = this;
  394. this.$confirm('是否部署该流程!!', "提示", {
  395. confirmButtonText: "确定",
  396. cancelButtonText: "取消",
  397. type: "success"
  398. }).then(function() {
  399. deployModel(row.id).then(response => {
  400. that.getList();
  401. that.msgSuccess("部署成功");
  402. })
  403. })
  404. },
  405. /** 流程表单的详情按钮操作 */
  406. handleFormDetail(row) {
  407. getForm(row.formId).then(response => {
  408. // 设置值
  409. const data = response.data
  410. this.detailForm = {
  411. ...JSON.parse(data.conf),
  412. fields: decodeFields(data.fields)
  413. }
  414. // 弹窗打开
  415. this.detailOpen = true
  416. })
  417. },
  418. /** 流程图的详情按钮操作 */
  419. handleBpmnDetail(row) {
  420. getModel(row.id).then(response => {
  421. this.bpmnXML = response.data.bpmnXml
  422. // 弹窗打开
  423. this.showBpmnOpen = true
  424. })
  425. },
  426. /** 跳转流程定义的列表 */
  427. handleDefinitionList(row) {
  428. this.$router.push({
  429. path:"/bpm/manager/definition",
  430. query:{
  431. key: row.key
  432. }
  433. });
  434. },
  435. /** 更新状态操作 */
  436. handleChangeState(row) {
  437. const id = row.id;
  438. let state = row.processDefinition.suspensionState;
  439. let statusState = state === 1 ? '激活' : '挂起';
  440. this.$confirm('是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?', "警告", {
  441. confirmButtonText: "确定",
  442. cancelButtonText: "取消",
  443. type: "warning"
  444. }).then(function() {
  445. return updateModelState(id, state);
  446. }).then(() => {
  447. this.getList();
  448. this.msgSuccess(statusState + "成功");
  449. })
  450. },
  451. /** 导入按钮操作 */
  452. handleImport() {
  453. this.upload.open = true;
  454. },
  455. // 文件上传中处理
  456. handleFileUploadProgress(event, file, fileList) {
  457. this.upload.isUploading = true;
  458. },
  459. // 文件上传成功处理
  460. handleFileSuccess(response, file, fileList) {
  461. if (response.code !== 0) {
  462. this.msgError(response.msg)
  463. return;
  464. }
  465. // 重置表单
  466. this.uploadClose();
  467. // 提示,并刷新
  468. this.msgSuccess("导入流程成功!请点击【设计流程】按钮,进行编辑保存后,才可以进行【发布流程】");
  469. this.getList();
  470. },
  471. uploadClose() {
  472. // 关闭弹窗
  473. this.upload.open = false;
  474. // 重置上传状态和文件
  475. this.upload.isUploading = false;
  476. this.$refs.upload.clearFiles();
  477. // 重置表单
  478. this.upload.form = {};
  479. this.resetForm("uploadForm");
  480. },
  481. /** 提交上传文件 */
  482. submitFileForm() {
  483. this.$refs["uploadForm"].validate(valid => {
  484. if (!valid) {
  485. return;
  486. }
  487. this.$refs.upload.submit();
  488. })
  489. },
  490. }
  491. };
  492. </script>
  493. <style lang="scss">
  494. .my-process-designer {
  495. height: calc(100vh - 200px);
  496. }
  497. </style>