feat: 流程设计器显示优化

ruoyi-ui/src/components/Process/index.vue

@@ -41,7 +41,7 @@
           <div ref="canvas" class="canvas" />
         </el-main>
         <el-aside style="width: 400px; min-height: 650px; background-color: #f0f2f5">
-          <panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :exps="exps" :categorys="categorys" @dataType="dataType" />
+          <panel v-if="modeler" :modeler="modeler" :users="users" :groups="groups" :exps="exps" :categorys="categorys" />
         </el-aside>
       </el-container>
     </el-container>
@@ -56,7 +56,7 @@ import panel from './PropertyPanel'
 import BpmData from './BpmData'
 import getInitStr from './flowable/init'
 // 引入flowable的节点文件
-import flowableModdle from './flowable/flowable.json'
+import FlowableModule from './flowable/flowable.json'
 export default {
   name: 'WorkflowBpmnModeler',
   components: {
@@ -115,8 +115,8 @@ export default {
           translate: ['value', customTranslate]
         }
       ],
-      moddleExtensions: {
-        flowable: flowableModdle
+      moduleExtensions: {
+        flowable: FlowableModule
       }
     })
     // 新增流程定义
@@ -356,17 +356,13 @@ export default {
       return false
     },
     downloadFile(filename, data, type) {
-      var a = document.createElement('a')
-      var url = window.URL.createObjectURL(new Blob([data], { type: type }))
+      const a = document.createElement('a');
+      const url = window.URL.createObjectURL(new Blob([data], {type: type}));
       a.href = url
       a.download = filename
       a.click()
       window.URL.revokeObjectURL(url)
     },
-    /** 获取数据类型 */
-    dataType(data){
-      this.$emit('dataType', data)
-    }
   }
 }
 </script>

ruoyi-ui/src/components/Process/lang/zh.js

@@ -2,6 +2,10 @@ export default {
   // Labels
   'Activate the global connect tool': '激活全局连接工具',
   'Append {type}': '添加 {type}',
+  'Append Task': '添加任务',
+  'Append Gateway': '添加网关',
+  'Append EndEvent': '添加结束事件',
+  "Append Intermediate/Boundary Event": '添加开始事件',
   'Add Lane above': '在上面添加道',
   'Divide into two Lanes': '分割成两个道',
   'Divide into three Lanes': '分割成三个道',

ruoyi-ui/src/views/flowable/definition/model.vue

@@ -10,39 +10,39 @@
       :is-view="false"
       @save="save"
       @showXML="showXML"
-      @dataType="dataType"
     />
     <!--在线查看xml-->
-    <el-dialog :title="xmlTitle" :visible.sync="xmlOpen" width="60%" append-to-body>
-      <div>
+    <el-dialog :title="xmlTitle" :visible.sync="xmlOpen" width="70%" class="showAll_dialog">
+      <!-- 设置对话框内容高度 -->
+        <el-scrollbar>
             <pre v-highlight>
                <code class="xml">
-                {{xmlContent}}
+                    {{xmlData}}
                </code>
             </pre>
-      </div>
+        </el-scrollbar>
     </el-dialog>
   </div>
 </template>
 <script>
 import {readXml, roleList, saveXml, userList,expList} from "@/api/flowable/definition";
 import bpmnModeler from '@/components/Process/index'
-import vkbeautify from 'vkbeautify'
-import Hljs from 'highlight.js'
-import 'highlight.js/styles/atom-one-dark.css'
+import vkBeautify from 'vkbeautify'
+import highlight from 'highlight.js'
+import 'highlight.js/styles/atelier-savanna-dark.css'
 
 export default {
   name: "Model",
   components: {
     bpmnModeler,
-    vkbeautify
+    vkBeautify
   },
   // 自定义指令
   directives: {
     highlight:(el) => {
       let blocks = el.querySelectorAll('pre code');
       blocks.forEach((block) => {
-        Hljs.highlightBlock(block)
+        highlight.highlightBlock(block)
       })
     }
   },
@@ -52,7 +52,7 @@ export default {
       modeler:"",
       xmlOpen: false,
       xmlTitle: '',
-      xmlContent: '',
+      xmlData: '',
       users: [],
       groups: [],
       categorys: [],
@@ -122,28 +122,59 @@ export default {
     showXML(data){
       this.xmlTitle = 'xml查看';
       this.xmlOpen = true;
-      this.xmlContent = vkbeautify.xml(data);
+      this.xmlData = vkBeautify.xml(data);
+    },
+    // /** 获取数据类型 */
+    // dataType(data){
+    //   this.users = [];
+    //   this.groups = [];
+    //   if (data) {
+    //     if (data.dataType === 'dynamic') {
+    //       if (data.userType === 'assignee') {
+    //         this.users = [{nickName: "${INITIATOR}", userId: "${INITIATOR}"},
+    //                       {nickName: "#{approval}", userId: "#{approval}"}
+    //           ]
+    //       } else if (data.userType === 'candidateUsers') {
+    //         this.users = [ {nickName: "#{approval}", userId: "#{approval}"}]
+    //       } else {
+    //         this.groups = [{roleName: "#{approval}", roleId: "#{approval}"}]
+    //       }
+    //     } else {
+    //       this.getDataList()
+    //     }
+    //   }
+    // }
   },
-    /** 获取数据类型 */
-    dataType(data){
-      this.users = [];
-      this.groups = [];
-      if (data) {
-        if (data.dataType === 'dynamic') {
-          if (data.userType === 'assignee') {
-            this.users = [{nickName: "${INITIATOR}", userId: "${INITIATOR}"},
-                          {nickName: "#{approval}", userId: "#{approval}"}
-              ]
-          } else if (data.userType === 'candidateUsers') {
-            this.users = [ {nickName: "#{approval}", userId: "#{approval}"}]
-          } else {
-            this.groups = [{roleName: "#{approval}", roleId: "#{approval}"}]
+};
+</script>
+<style lang="scss" scoped>
+.content-box{
+  line-height: 10px;
 }
-        } else {
-          this.getDataList()
+// 修改对话框高度
+.showAll_dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  ::v-deep .el-dialog {
+    margin: 0 auto !important;
+    height: 80%;
+    overflow: hidden;
+    background-color: #ffffff;
+    .el-dialog__body {
+      position: absolute;
+      left: 0;
+      top: 54px;
+      bottom: 0;
+      right: 0;
+      z-index: 1;
+      overflow: hidden;
+      overflow-y: auto;
+      // 下边设置字体，我的需求是黑底白字
+      color: #ffffff;
+      padding: 0 15px;
     }
   }
 }
-  },
-};
-</script>
+</style>

ruoyi-ui/src/views/flowable/task/todo/detail/index.vue

@@ -232,24 +232,6 @@ export default {
     handleClick(tab, event) {
       console.log(tab, event);
     },
-    /** 查询用户列表 */
-    getList() {
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-          this.userList = response.rows;
-          this.total = response.total;
-        }
-      );
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id;
-      this.getList();
-    },
     /** xml 文件 */
     getModelDetail(deployId) {
       // 发送请求，获取xml
@@ -360,8 +342,13 @@ export default {
             this.checkType = "multiple";
           } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
             this.checkSendRole = true;
-          } else if (data.type === 'multiInstance') { // 会签?
-            this.checkSendUser = true;
+          } else if (data.type === 'multiInstance') { // 会签
+            listUser().then(response => {
+                this.taskForm.values = {
+                  "userList": response.rows
+                }
+              }
+            );
           }
         }
       })
@@ -427,24 +414,6 @@ export default {
         this.variables = variables;
       }
     },
-    /** 申请流程表单数据提交 */
-    submitForm(data) {
-      const that = this
-      if (data) {
-        const variables = data.valData;
-        const formData = data.formData;
-        formData.disabled = true;
-        formData.formBtns = false;
-        if (that.taskForm.procDefId) {
-          variables.variables = formData;
-           // 启动流程并将表单数据加入流程变量
-          definitionStart(that.taskForm.procDefId, JSON.stringify(variables)).then(res => {
-            that.$modal.msgSuccess(res.msg);
-            that.goBack();
-          })
-        }
-      }
-    },
     /** 驳回任务 */
     handleReject() {
       this.rejectOpen = true;