fate: 升级流程设计器,表单设计器

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

@@ -174,13 +174,13 @@
     <!-- 流程图 -->
     <el-dialog :title="readImage.title" :visible.sync="readImage.open" width="70%" append-to-body>
       <!-- <el-image :src="readImage.src"></el-image> -->
-      <flow :flowData="flowData"/>
+      <bpmn-viewer :flowData="flowData"/>
     </el-dialog>
 
     <!--表单配置详情-->
     <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="50%" append-to-body>
       <div class="test-form">
-        <parser :key="new Date().getTime()"  :form-conf="formConf" />
+        <v-form-render :form-data="formData" ref="vFormRef"/>
       </div>
     </el-dialog>
 
@@ -215,8 +215,8 @@
           />
         </el-col>
         <el-col :span="14" :xs="24">
-          <div v-if="currentRow">
-            <parser :key="new Date().getTime()" :form-conf="currentRow" />
+          <div class="test-form">
+            <v-form-render :form-data="formData" ref="vFormCurrentRowRef"/>
           </div>
         </el-col>
       </el-row>
@@ -248,16 +248,14 @@ import {
 } from "@/api/flowable/definition";
 import { getToken } from "@/utils/auth";
 import { getForm, addDeployForm ,listForm } from "@/api/flowable/form";
-import Parser from '@/components/parser/Parser'
-import flow from '@/views/flowable/task/myProcess/send/flow'
+import BpmnViewer from '@/components/Process/viewer';
 import Model from './model';
 
 export default {
   name: "Definition",
   dicts: ['sys_process_category'],
   components: {
-    Parser,
-    flow,
+    BpmnViewer,
     Model
   },
   data() {
@@ -287,7 +285,7 @@ export default {
       formDeployTitle: "",
       formList: [],
       formTotal:0,
-      formConf: {}, // 默认表单数据
+      formData: {}, // 默认表单数据
       readImage:{
         open: false,
         src: "",
@@ -432,7 +430,14 @@ export default {
       getForm(formId).then(res =>{
         this.formTitle = "表单详情";
         this.formConfOpen = true;
-        this.formConf = JSON.parse(res.data.formContent)
+        this.$nextTick(() => {
+          // 回显数据
+          this.$refs.vFormRef.setFormJson(JSON.parse(res.data.formContent))
+          this.$nextTick(() => {
+            // 表单禁用
+            this.$refs.vFormRef.disableForm();
+          })
+        })
       })
     },
     /** 启动流程 */
@@ -479,7 +484,14 @@ export default {
     },
     handleCurrentChange(data) {
       if (data) {
-        this.currentRow = JSON.parse(data.formContent);
+        this.$nextTick(() => {
+          // 回显数据
+          this.$refs.vFormCurrentRowRef.setFormJson(JSON.parse(data.formContent))
+          this.$nextTick(() => {
+            // 表单禁用
+            this.$refs.vFormCurrentRowRef.disableForm();
+          })
+        })
       }
     },
     /** 挂起/激活流程 */

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

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <bpmn-modeler
-      ref="refNode"
+    <bpmn-model
+      v-if="dataExit"
       :xml="xml"
-      :users="users"
-      :groups="groups"
-      :categorys="categorys"
-      :exps="exps"
       :is-view="false"
       @save="save"
       @showXML="showXML"
@@ -22,15 +18,14 @@
 </template>
 <script>
 import {readXml, roleList, saveXml, userList,expList} from "@/api/flowable/definition";
-import bpmnModeler from '@/components/Process/index'
+import BpmnModel from '@/components/Process'
 import vkBeautify from 'vkbeautify'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/atelier-savanna-dark.css'
-
 export default {
   name: "Model",
   components: {
-    bpmnModeler,
+    BpmnModel,
     vkBeautify
   },
   // 自定义指令
@@ -68,14 +63,10 @@ export default {
     return {
       xml: "", // 后端查询到的xml
       modeler:"",
+      dataExit: false,
       xmlOpen: false,
       xmlTitle: '',
       xmlData: '',
-      users: [],
-      groups: [],
-      categorys: [],
-      exps: [],
-
     };
   },
   created () {
@@ -84,9 +75,6 @@ export default {
     if (deployId) {
       this.getXmlData(deployId);
     }
-    this.getDicts("sys_process_category").then(res => {
-      this.categorys = res.data;
-    });
     this.getDataList()
   },
   methods: {
@@ -114,22 +102,15 @@ export default {
     },
     /** 指定流程办理人员列表 */
     getDataList() {
-      userList().then(res =>{
-        res.data.forEach(val =>{
-          val.userId = val.userId.toString();
-        })
-        this.users = res.data;
-        // let arr = {nickName: "流程发起人", userId: "${INITIATOR}"}
-        // this.users.push(arr)
-      });
-      roleList().then(res =>{
-        res.data.forEach(val =>{
-          val.roleId = val.roleId.toString();
-        })
-        this.groups = res.data;
-      });
-      expList().then(res =>{
-        this.exps = res.data;
+      userList().then(res => {
+        this.modelerStore.userList = res.data;
+      })
+      roleList().then(res => {
+        this.modelerStore.roleList = res.data;
+      })
+      expList().then(res => {
+        this.modelerStore.expList = res.data;
+        this.dataExit = true;
       });
     },
     /** 展示xml */

ruoyi-ui/src/views/flowable/expression/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入表达式名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_common_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:expression:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:expression:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:expression:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:expression:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="expressionList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="表达式内容" align="center" prop="expression" />
+      <el-table-column label="指定类型" align="center" prop="dataType" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.exp_data_type" :value="scope.row.dataType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:expression:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:expression:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改流程达式对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入表达式名称" />
+        </el-form-item>
+        <el-form-item label="内容" prop="expression">
+          <el-input v-model="form.expression" placeholder="请输入表达式内容" />
+        </el-form-item>
+        <el-form-item label="指定类型" prop="dataType">
+          <el-radio-group v-model="form.dataType">
+            <el-radio
+              v-for="dict in dict.type.exp_data_type"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_common_status"
+              :key="dict.value"
+              :label="parseInt(dict.value)"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listExpression, getExpression, delExpression, addExpression, updateExpression } from "@/api/flowable/expression";
+
+export default {
+  name: "FlowExp",
+  dicts: ['sys_common_status','exp_data_type'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 流程达式表格数据
+      expressionList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        expression: null,
+        status: null,
+      },
+      // 表单参数
+      form: {
+        dataType: 'fixed'
+      },
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询流程达式列表 */
+    getList() {
+      this.loading = true;
+      listExpression(this.queryParams).then(response => {
+        this.expressionList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        expression: null,
+        createTime: null,
+        updateTime: null,
+        createBy: null,
+        updateBy: null,
+        status: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加流程达式";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getExpression(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改流程达式";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateExpression(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addExpression(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除流程达式编号为"' + ids + '"的数据项？').then(function() {
+        return delExpression(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/expression/export', {
+        ...this.queryParams
+      }, `expression_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

ruoyi-ui/src/views/flowable/listener/index.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="监听类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择监听类型" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_listener_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:listener:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:listener:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:listener:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:listener:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="listenerList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="监听类型" align="center" prop="type">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_listener_type" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="事件类型" align="center" prop="eventType"/>
+      <el-table-column label="值类型" align="center" prop="valueType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_listener_value_type" :value="scope.row.valueType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="执行内容" align="center" prop="value" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:listener:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:listener:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改流程监听对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="监听类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择监听类型">
+            <el-option
+              v-for="dict in dict.type.sys_listener_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件类型" prop="eventType" v-if="form.type === '1'">
+          <el-select v-model="form.eventType" placeholder="请选择事件类型">
+            <el-option
+              v-for="dict in taskListenerEventList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="事件类型" prop="eventType" v-else>
+          <el-select v-model="form.eventType" placeholder="请选择事件类型">
+            <el-option
+              v-for="dict in executionListenerEventList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="值类型" prop="valueType">
+          <el-radio-group v-model="form.valueType">
+            <el-radio
+              v-for="dict in dict.type.sys_listener_value_type"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="执行内容" prop="value">
+          <el-input v-model="form.value" placeholder="请输入执行内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listListener, getListener, delListener, addListener, updateListener } from "@/api/flowable/listener";
+
+export default {
+  name: "Listener",
+  dicts: ['sys_listener_value_type', 'sys_listener_type', 'common_status', 'sys_listener_event_type'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 流程监听表格数据
+      listenerList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        type: null,
+        eventType: null,
+        valueType: null,
+        value: null,
+        status: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      taskListenerEventList: [
+        {label: 'create', value: 'create'},
+        {label: 'assignment', value: 'assignment'},
+        {label: 'complete', value: 'complete'},
+        {label: 'delete', value: 'delete'},
+      ],
+      executionListenerEventList: [
+        {label: 'start', value: 'start'},
+        {label: 'end', value: 'end'},
+        {label: 'take', value: 'take'},
+      ],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询流程监听列表 */
+    getList() {
+      this.loading = true;
+      listListener(this.queryParams).then(response => {
+        this.listenerList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        type: null,
+        eventType: null,
+        valueType: null,
+        value: null,
+        createTime: null,
+        updateTime: null,
+        createBy: null,
+        updateBy: null,
+        status: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加流程监听";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getListener(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改流程监听";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateListener(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addListener(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除流程监听编号为"' + ids + '"的数据项？').then(function() {
+        return delListener(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/listener/export', {
+        ...this.queryParams
+      }, `listener_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>

ruoyi-ui/src/views/flowable/task/finished/detail/flow.vue

@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <flow-view :flowData="flowData"/>
-  </div>
-</template>
-<script>
-import FlowView from './flowview'
-
-export default {
-  name: "Flow",
-  components: {
-    FlowView
-  },
-  props: {
-    flowData: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {};
-  }
-};
-</script>

ruoyi-ui/src/views/flowable/task/finished/detail/flowview.vue

@@ -1,238 +0,0 @@
-<template>
-  <div class="containers main-box">
-    <el-button type="success"
-               size="small"
-               icon="el-icon-zoom-in"
-               @click="zoomViewport(true)">放大</el-button>
-    <el-button type="warning"
-               size="small"
-               icon="el-icon-zoom-out"
-               @click="zoomViewport(false)">缩小</el-button>
-    <el-button type="info"
-               size="small"
-               icon="el-icon-rank"
-               @click="fitViewport">适中</el-button>
-    <div class="canvas" ref="flowCanvas"></div>
-  </div>
-</template>
-<script>
-import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
-
-export default {
-  name: "FlowView",
-  props: {
-    flowData: {
-      type: Object,
-      default: () => {}
-    },
-  },
-  data() {
-    return {
-      bpmnViewer: null
-    };
-  },
-  watch: {
-    flowData: {
-      handler(newVal) {
-        if (Object.keys(newVal).length > 0) {
-          // 生成实例
-          this.bpmnViewer && this.bpmnViewer.destroy();
-          this.bpmnViewer = new BpmnViewer({
-            container: this.$refs.flowCanvas,
-            height: 'calc(100vh - 200px)',
-          });
-          this.loadFlowCanvas(newVal)
-        }
-      },
-      immediate: true, // 立即生效
-      deep: true  //监听对象或数组的时候，要用到深度监听
-    }
-  },
-  mounted() {
-  },
-  methods: {
-    // 加载流程
-    async loadFlowCanvas(flowData) {
-      const self = this
-      try {
-        await self.bpmnViewer.importXML(flowData.xmlData);
-        self.fitViewport()
-        if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
-          self.fillColor(flowData.nodeData)
-        }
-      } catch (err) {
-        console.error(err.message, err.warnings)
-      }
-    },
-    // 设置高亮颜色的class
-    setNodeColor(nodeCodes, colorClass, canvas) {
-      for (let i = 0; i < nodeCodes.length; i++) {
-        canvas.addMarker(nodeCodes[i], colorClass);
-      }
-    },
-    // 让图能自适应屏幕
-    fitViewport() {
-      this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
-    },
-    // 放大缩小
-    zoomViewport(zoomIn = true) {
-      this.zoom = this.bpmnViewer.get('canvas').zoom()
-      this.zoom += (zoomIn ? 0.1 : -0.1)
-      if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
-    },
-
-    // 设置高亮颜色的
-    fillColor(nodeData) {
-      const canvas = this.bpmnViewer.get('canvas')
-      this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
-        const completeTask = nodeData.find(m => m.key === n.id)
-        const todoTask = nodeData.find(m => !m.completed)
-        const endTask = nodeData[nodeData.length - 1]
-        if (n.$type === 'bpmn:UserTask') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
-                  canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                }else {
-                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                }
-              }
-            })
-          }
-        }
-        // 排他网关
-        else if (n.$type === 'bpmn:ExclusiveGateway') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-
-            })
-          }
-
-        }
-        // 并行网关
-        else if (n.$type === 'bpmn:ParallelGateway') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-            })
-          }
-        }
-        else if (n.$type === 'bpmn:StartEvent') {
-          n.outgoing.forEach(nn => {
-            const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
-            if (completeTask) {
-              canvas.addMarker(nn.id, 'highlight')
-              canvas.addMarker(n.id, 'highlight')
-              return
-            }
-          })
-        }
-        else if (n.$type === 'bpmn:EndEvent') {
-          if (endTask.key === n.id && endTask.completed) {
-            canvas.addMarker(n.id, 'highlight')
-            return
-          }
-        }
-      })
-    },
-  }
-};
-</script>
-<style lang="scss">
-  .bjs-powered-by {
-    display: none;
-  }
-  .view-mode {
-    .el-header, .el-aside, .djs-palette, .bjs-powered-by {
-      display: none;
-    }
-    .el-loading-mask {
-      background-color: initial;
-    }
-    .el-loading-spinner {
-      display: none;
-    }
-  }
-  .containers {
-    // background-color: #ffffff;
-    width: 100%;
-    height: 100%;
-    .canvas {
-      width: 100%;
-      height: 100%;
-    }
-    .panel {
-      position: absolute;
-      right: 0;
-      top: 50px;
-      width: 300px;
-    }
-    .load {
-      margin-right: 10px;
-    }
-    .el-form-item__label{
-      font-size: 13px;
-    }
-
-    .djs-palette{
-      left: 0px!important;
-      top: 0px;
-      border-top: none;
-    }
-
-    .djs-container svg {
-      min-height: 650px;
-    }
-
-    .highlight.djs-shape .djs-visual > :nth-child(1) {
-      fill: green !important;
-      stroke: green !important;
-      fill-opacity: 0.2 !important;
-    }
-    .highlight.djs-shape .djs-visual > :nth-child(2) {
-      fill: green !important;
-    }
-    .highlight.djs-shape .djs-visual > path {
-      fill: green !important;
-      fill-opacity: 0.2 !important;
-      stroke: green !important;
-    }
-    .highlight.djs-connection > .djs-visual > path {
-      stroke: green !important;
-    }
-    .highlight-todo.djs-connection > .djs-visual > path {
-      stroke: orange !important;
-      stroke-dasharray: 4px !important;
-      fill-opacity: 0.2 !important;
-    }
-    .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
-      fill: orange !important;
-      stroke: orange !important;
-      stroke-dasharray: 4px !important;
-      fill-opacity: 0.2 !important;
-    }
-    .overlays-div {
-      font-size: 10px;
-      color: red;
-      width: 100px;
-      top: -20px !important;
-    }
-  }
-</style>

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

@@ -8,10 +8,8 @@
       <el-tabs  tab-position="top" v-model="activeName" @tab-click="handleClick">
         <!--表单信息-->
         <el-tab-pane label="表单信息" name="1">
-          <el-col :span="16" :offset="4" v-if="variableOpen">
-            <div class="test-form">
-              <parser :key="new Date().getTime()" :form-conf="variablesData" />
-            </div>
+          <el-col :span="16" :offset="4">
+              <v-form-render ref="vFormRef"/>
           </el-col>
         </el-tab-pane>
         <!--流程流转记录-->
@@ -61,7 +59,7 @@
           </el-col>
         </el-tab-pane>
         <el-tab-pane label="流程图" name="3">
-          <flow :flowData="flowData"/>
+          <Bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/>
         </el-tab-pane>
       </el-tabs>
     </el-card>
@@ -70,16 +68,14 @@
 
 <script>
 import {flowRecord} from "@/api/flowable/finished";
-import Parser from '@/components/parser/Parser'
 import {getProcessVariables, flowXmlAndNode} from "@/api/flowable/definition";
-import flow from '@/views/flowable/task/finished/detail/flow'
+import BpmnViewer from '@/components/Process/viewer';
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Record",
   components: {
-    Parser,
-    flow,
+    BpmnViewer,
   },
   props: {},
   data() {
@@ -87,12 +83,6 @@ export default {
       // 模型xml数据
       flowData: {},
       activeName: '1',
-      // 用户表格数据
-      userList: null,
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
       // 查询参数
       queryParams: {
         deptId: undefined
@@ -100,8 +90,6 @@ export default {
       // 遮罩层
       loading: true,
       flowRecordList: [], // 流程流转数据
-      formConfCopy: {},
-      src: null,
       taskForm:{
         multiple: false,
         comment:"", // 意见内容
@@ -111,18 +99,13 @@ export default {
         taskId: "" ,// 流程任务编号
         procDefId: "",  // 流程编号
         vars: "",
-        targetKey:""
       },
-      variables: [], // 流程变量数据
-      variablesData: {}, // 流程变量数据
-      variableOpen: false, // 是否加载流程变量数据
     };
   },
   created() {
     this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
     this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
     this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
-    // 回显流程记录
     // 流程任务重获取变量表单
     if (this.taskForm.taskId){
       this.processVariables( this.taskForm.taskId)
@@ -166,8 +149,18 @@ export default {
       if (taskId) {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
         getProcessVariables(taskId).then(res => {
-          this.variablesData = res.data.variables;
-          this.variableOpen = true
+          // 回显表单
+          this.$nextTick(() => {
+            this.$refs.vFormRef.setFormJson(res.data.formJson);
+            this.$nextTick(() => {
+              // 加载表单填写的数据
+              this.$refs.vFormRef.setFormData(res.data);
+              this.$nextTick(() => {
+                // 表单禁用
+                this.$refs.vFormRef.disableForm();
+              })
+            })
+          })
         });
       }
     },

ruoyi-ui/src/views/flowable/task/flowForm/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+  <v-form-designer ref="vfDesigner" :designer-config="designerConfig">
+    <!-- 保存按钮 -->
+    <template #customSaveButton>
+      <el-button type="text" @click="saveFormJson"><i class="el-icon-s-promotion" />保存</el-button>
+    </template>
+  </v-form-designer>
+
+  <!--系统表单信息-->
+  <el-dialog :title="formTitle" :visible.sync="formOpen" width="500px" append-to-body>
+    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form-item label="表单名称" prop="formName">
+        <el-input v-model="form.formName" placeholder="请输入表单名称" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
+  </div>
+</template>
+
+<script>
+import {addForm, getForm, updateForm} from "@/api/flowable/form";
+import { StrUtil } from '@/utils/StrUtil'
+
+export default {
+  name: "flowForm",
+  data() {
+    return {
+      formTitle: "",
+      formOpen: false,
+      // 表单校验
+      rules: {
+        formName: [
+          { required: true, message: "表单名称不能为空", trigger: "blur" }
+        ]
+      },
+      // 表单参数
+      form: {
+        formId: null,
+        formName: null,
+        formContent: null,
+        remark: null
+      },
+      designerConfig: {
+        generateSFCButton: false,
+        exportCodeButton: false,  //是否显示导出代码按钮
+        toolbarMaxWidth: 320,
+        toolbarMinWidth: 300,  //设计器工具按钮栏最小宽度（单位像素）
+        formHeader: false,
+      },
+    }
+  },
+  mounted() {
+    const formId = this.$route.query && this.$route.query.formId;
+    if (StrUtil.isNotBlank(formId)) {
+      getForm(formId).then(res => {
+        this.$nextTick(() => {
+          // 加载表单json数据
+          this.$refs.vfDesigner.setFormJson(JSON.parse(res.data.formContent))
+        })
+        this.form = res.data;
+      })
+    }else {
+      this.$nextTick(() => {
+        // 加载表单json数据
+        this.$refs.vfDesigner.setFormJson({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
+      })
+    }
+  },
+  methods:{
+    // 保存表单数据
+    saveFormJson() {
+      let formJson = this.$refs.vfDesigner.getFormJson()
+      this.form.formContent = JSON.stringify(formJson);
+      this.formOpen = true;
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.formId != null) {
+            updateForm(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.formOpen = false;
+            });
+          } else {
+            addForm(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.formOpen = false;
+            });
+          }
+          // 关闭当前标签页并返回上个页面
+          const obj = { path: "/flowable/form", query: { t: Date.now()} };
+          this.$tab.closeOpenPage(obj);
+        }
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.formOpen = false;
+      this.reset();
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+body {
+  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
+}
+.el-container.main-container{
+  background: #fff;
+  margin-left: 0 !important;
+}
+
+</style>

ruoyi-ui/src/views/flowable/task/form/index.vue

@@ -24,20 +24,8 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-          v-hasPermi="['flowable:form:add']"
         >新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['flowable:form:edit']"
-        >修改</el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button
           type="danger"
@@ -49,16 +37,6 @@
           v-hasPermi="['flowable:form:remove']"
         >删除</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['flowable:form:export']"
-        >导出</el-button>
-      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
@@ -120,10 +98,40 @@
       </div>
     </el-dialog>
 
-    <!--表单配置详情-->
-    <el-dialog :title="formTitle" :visible.sync="formConfOpen" width="60%" append-to-body>
-      <div class="test-form">
-        <parser :key="new Date().getTime()"  :form-conf="formConf" />
+    <!--表单详情-->
+    <el-dialog :title="formTitle" :visible.sync="formRenderOpen" width="60%" append-to-body>
+        <v-form-render :form-data="formData" ref="vFormRef"/>
+    </el-dialog>
+
+    <!--表单设计器-->
+    <el-dialog
+      custom-class="dialogClass"
+      :visible.sync="dialogVisible"
+      :close-on-press-escape="false"
+      :fullscreen=true
+      :before-close="handleClose"
+      append-to-body>
+      <v-form-designer ref="vfDesigner" :designer-config="designerConfig">
+        <!-- 自定义按钮插槽演示 -->
+        <template #customSaveButton>
+          <el-button type="text" @click="saveFormJson"><i class="el-icon-s-promotion" />保存</el-button>
+        </template>
+      </v-form-designer>
+    </el-dialog>
+
+    <!--系统表单信息-->
+    <el-dialog :title="formTitle" :visible.sync="formOpen" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="表单名称" prop="formName">
+          <el-input v-model="form.formName" placeholder="请输入表单名称" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
   </div>
@@ -132,17 +140,19 @@
 <script>
 import { listForm, getForm, delForm, addForm, updateForm, exportForm } from "@/api/flowable/form";
 import Editor from '@/components/Editor';
-import Parser from '@/components/parser/Parser'
 export default {
   name: "Form",
   components: {
-    Editor,
-    Parser
+    Editor
   },
   data() {
     return {
       // 遮罩层
       loading: true,
+      dialogVisible: false,
+      designerConfig: {
+        exportCodeButton: false,  //是否显示导出代码按钮
+      },
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -157,9 +167,9 @@ export default {
       formList: [],
       // 弹出层标题
       title: "",
-      formConf: {}, // 默认表单数据
-      formConfOpen: false,
+      formRenderOpen: false,
       formTitle: "",
+      formOpen: false,
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -170,15 +180,26 @@ export default {
         formContent: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        formId: null,
+        formName: null,
+        formContent: null,
+        remark: null
+      },
       // 表单校验
-      rules: {
-      }
+      rules: {},
+      formData: {},
     };
   },
   created() {
     this.getList();
   },
+  activated() {
+    const time = this.$route.query.t;
+    if (time != null) {
+      this.getList();
+    }
+  },
   methods: {
     /** 查询流程表单列表 */
     getList() {
@@ -189,11 +210,6 @@ export default {
         this.loading = false;
       });
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
     // 表单重置
     reset() {
       this.form = {
@@ -225,28 +241,57 @@ export default {
       this.multiple = !selection.length
     },
     /** 表单配置信息 */
-    handleDetail(row){
-      this.formConfOpen = true;
-      this.formTitle = "流程表单配置详细";
-      this.formConf = JSON.parse(row.formContent)
+    handleDetail(row) {
+      this.formRenderOpen = true;
+      this.formTitle = "表单详情";
+      this.$nextTick(() => {
+        // 回显数据
+        this.$refs.vFormRef.setFormJson(JSON.parse(row.formContent))
+        this.$nextTick(() => {
+          // 表单禁用
+          this.$refs.vFormRef.disableForm();
+        })
+      })
     },
     /** 新增按钮操作 */
     handleAdd() {
-      // this.reset();
-      // this.open = true;
-      // this.title = "添加流程表单";
-      this.$router.push({ path: '/tool/build/index', query: {formId: null }})
+      // this.dialogVisible = true;
+      this.$router.push({ path: '/flowable/task/flowForm/index'})
+    },
+    // 保存表单数据
+    saveFormJson() {
+      let formJson = this.$refs.vfDesigner.getFormJson()
+      this.form.formContent = JSON.stringify(formJson);
+      this.formOpen = true;
+    },
+    // 取消按钮
+    cancel() {
+      this.formOpen = false;
+      this.reset();
+    },
+    handleClose(done) {
+      this.$confirm('确定要关闭吗？关闭未保存的修改都会丢失？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        done();
+      }).catch(() => {});
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      // this.reset();
-      // const formId = row.formId || this.ids
-      // getForm(formId).then(response => {
-      //   this.form = response.data;
-      //   this.open = true;
-      //   this.title = "修改流程表单";
-      // });
-      this.$router.push({ path: '/tool/build/index', query: {formId: row.formId }})
+      // this.form = row;
+      // this.dialogVisible = true;
+      // this.$nextTick(() => {
+      //   // 加载表单json数据
+      //   this.$refs.vfDesigner.setFormJson(JSON.parse(row.formContent))
+      // })
+      this.$router.push({ path: '/flowable/task/flowForm/index', query: {formId: row.formId }})
+
+    },
+    /** 重置表单 */
+    resetFormData() {
+      this.$refs.vFormRef.resetForm();
     },
     /** 提交按钮 */
     submitForm() {
@@ -255,23 +300,34 @@ export default {
           if (this.form.formId != null) {
             updateForm(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
-              this.open = false;
+              this.formOpen = false;
               this.getList();
             });
           } else {
             addForm(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
-              this.open = false;
+              this.formOpen = false;
               this.getList();
             });
           }
+          this.dialogVisible = false;
         }
       });
     },
+    /** 提交按钮 */
+    submitFormData() {
+      this.$refs.vFormRef.getFormData().then(formData => {
+        // Form Validation OK
+        console.log(JSON.stringify(formData))
+      }).catch(error => {
+        // Form Validation failed
+        this.$modal.msgError(error)
+      })
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const formIds = row.formId || this.ids;
-      this.$confirm('是否确认删除流程表单编号为"' + formIds + '"的数据项?', "警告", {
+      this.$confirm('是否确认删除表单编号为"' + formIds + '"的数据项?', "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
@@ -282,27 +338,20 @@ export default {
        this.$modal.msgSuccess("删除成功");
       })
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有流程表单数据项?', "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(function() {
-        return exportForm(queryParams);
-      }).then(response => {
-        this.download(response.msg);
-      })
-    }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .test-form {
   margin: 15px auto;
   width: 800px;
   padding: 15px;
 }
+/deep/ .dialogClass .el-dialog__header {
+  padding: 0;
+}
+/deep/ .dialogClass .el-dialog__body {
+  padding: 0;
+}
 </style>

ruoyi-ui/src/views/flowable/task/myProcess/detail/flow.vue

@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <flow-view :flowData="flowData"/>
-  </div>
-</template>
-<script>
-import FlowView from './flowview'
-
-export default {
-  name: "Flow",
-  components: {
-    FlowView
-  },
-  props: {
-    flowData: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {};
-  }
-};
-</script>

ruoyi-ui/src/views/flowable/task/myProcess/detail/flowview.vue

@@ -1,238 +0,0 @@
-<template>
-  <div class="containers main-box">
-    <el-button type="success"
-               size="small"
-               icon="el-icon-zoom-in"
-               @click="zoomViewport(true)">放大</el-button>
-    <el-button type="warning"
-               size="small"
-               icon="el-icon-zoom-out"
-               @click="zoomViewport(false)">缩小</el-button>
-    <el-button type="info"
-               size="small"
-               icon="el-icon-rank"
-               @click="fitViewport">适中</el-button>
-    <div class="canvas" ref="flowCanvas"></div>
-  </div>
-</template>
-<script>
-import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
-
-export default {
-  name: "FlowView",
-  props: {
-    flowData: {
-      type: Object,
-      default: () => {}
-    },
-  },
-  data() {
-    return {
-      bpmnViewer: null
-    };
-  },
-  watch: {
-    flowData: {
-      handler(newVal) {
-        if (Object.keys(newVal).length > 0) {
-          // 生成实例
-          this.bpmnViewer && this.bpmnViewer.destroy();
-          this.bpmnViewer = new BpmnViewer({
-            container: this.$refs.flowCanvas,
-            height: 'calc(100vh - 200px)',
-          });
-          this.loadFlowCanvas(newVal);
-        }
-      },
-      immediate: true, // 立即生效
-      deep: true  //监听对象或数组的时候，要用到深度监听
-    }
-  },
-  mounted() {
-  },
-  methods: {
-    // 加载流程
-    async loadFlowCanvas(flowData) {
-      const self = this
-      try {
-        await self.bpmnViewer.importXML(flowData.xmlData);
-        self.fitViewport()
-        if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
-          self.fillColor(flowData.nodeData)
-        }
-      } catch (err) {
-        console.error(err.message, err.warnings)
-      }
-    },
-    // 设置高亮颜色的class
-    setNodeColor(nodeCodes, colorClass, canvas) {
-      for (let i = 0; i < nodeCodes.length; i++) {
-        canvas.addMarker(nodeCodes[i], colorClass);
-      }
-    },
-    // 让图能自适应屏幕
-    fitViewport() {
-      this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
-    },
-    // 放大缩小
-    zoomViewport(zoomIn = true) {
-      this.zoom = this.bpmnViewer.get('canvas').zoom()
-      this.zoom += (zoomIn ? 0.1 : -0.1)
-      if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
-    },
-
-    // 设置高亮颜色的
-    fillColor(nodeData) {
-      const canvas = this.bpmnViewer.get('canvas')
-      this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
-        const completeTask = nodeData.find(m => m.key === n.id)
-        const todoTask = nodeData.find(m => !m.completed)
-        const endTask = nodeData[nodeData.length - 1]
-        if (n.$type === 'bpmn:UserTask') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
-                  canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                }else {
-                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                }
-              }
-            })
-          }
-        }
-        // 排他网关
-        else if (n.$type === 'bpmn:ExclusiveGateway') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-
-            })
-          }
-
-        }
-        // 并行网关
-        else if (n.$type === 'bpmn:ParallelGateway') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-            })
-          }
-        }
-        else if (n.$type === 'bpmn:StartEvent') {
-          n.outgoing.forEach(nn => {
-            const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
-            if (completeTask) {
-              canvas.addMarker(nn.id, 'highlight')
-              canvas.addMarker(n.id, 'highlight')
-              return
-            }
-          })
-        }
-        else if (n.$type === 'bpmn:EndEvent') {
-          if (endTask.key === n.id && endTask.completed) {
-            canvas.addMarker(n.id, 'highlight')
-            return
-          }
-        }
-      })
-    },
-  }
-};
-</script>
-<style lang="scss">
-  .bjs-powered-by {
-    display: none;
-  }
-  .view-mode {
-    .el-header, .el-aside, .djs-palette, .bjs-powered-by {
-      display: none;
-    }
-    .el-loading-mask {
-      background-color: initial;
-    }
-    .el-loading-spinner {
-      display: none;
-    }
-  }
-  .containers {
-    // background-color: #ffffff;
-    width: 100%;
-    height: 100%;
-    .canvas {
-      width: 100%;
-      height: 100%;
-    }
-    .panel {
-      position: absolute;
-      right: 0;
-      top: 50px;
-      width: 300px;
-    }
-    .load {
-      margin-right: 10px;
-    }
-    .el-form-item__label{
-      font-size: 13px;
-    }
-
-    .djs-palette{
-      left: 0px!important;
-      top: 0px;
-      border-top: none;
-    }
-
-    .djs-container svg {
-      min-height: 650px;
-    }
-
-    .highlight.djs-shape .djs-visual > :nth-child(1) {
-      fill: green !important;
-      stroke: green !important;
-      fill-opacity: 0.2 !important;
-    }
-    .highlight.djs-shape .djs-visual > :nth-child(2) {
-      fill: green !important;
-    }
-    .highlight.djs-shape .djs-visual > path {
-      fill: green !important;
-      fill-opacity: 0.2 !important;
-      stroke: green !important;
-    }
-    .highlight.djs-connection > .djs-visual > path {
-      stroke: green !important;
-    }
-    .highlight-todo.djs-connection > .djs-visual > path {
-      stroke: orange !important;
-      stroke-dasharray: 4px !important;
-      fill-opacity: 0.2 !important;
-    }
-    .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
-      fill: orange !important;
-      stroke: orange !important;
-      stroke-dasharray: 4px !important;
-      fill-opacity: 0.2 !important;
-    }
-    .overlays-div {
-      font-size: 10px;
-      color: red;
-      width: 100px;
-      top: -20px !important;
-    }
-  }
-</style>

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

@@ -9,9 +9,7 @@
         <!--表单信息-->
         <el-tab-pane label="表单信息" name="1">
           <el-col :span="16" :offset="4">
-            <div class="test-form">
-                <parser :key="new Date().getTime()" :form-conf="variablesData" />
-            </div>
+            <v-form-render ref="vFormRef"/>
          </el-col>
         </el-tab-pane>
         <!--流程流转记录-->
@@ -62,7 +60,7 @@
         </el-tab-pane>
         <!--流程图-->
         <el-tab-pane label="流程图" name="3">
-          <flow :flowData="flowData"/>
+          <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/>
         </el-tab-pane>
     </el-tabs>
     </el-card>
@@ -71,16 +69,14 @@
 
 <script>
 import {flowRecord} from "@/api/flowable/finished";
-import Parser from '@/components/parser/Parser'
-import {getProcessVariables, readXml, getFlowViewer, getHighlight, flowXmlAndNode} from "@/api/flowable/definition";
-import flow from '@/views/flowable/task/myProcess/detail/flow'
+import {getProcessVariables, flowXmlAndNode} from "@/api/flowable/definition";
+import BpmnViewer from '@/components/Process/viewer';
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Record",
   components: {
-    Parser,
-    flow
+    BpmnViewer
   },
   props: {},
   data() {
@@ -89,9 +85,7 @@ export default {
       flowData: {},
       activeName: '1',
       // 查询参数
-      queryParams: {
-        deptId: undefined
-      },
+      queryParams: {},
       // 遮罩层
       loading: true,
       flowRecordList: [], // 流程流转数据
@@ -104,14 +98,12 @@ export default {
         taskId: "" ,// 流程任务编号
         procDefId: "",  // 流程编号
       },
-      variablesData: {}, // 流程变量数据
     };
   },
   created() {
     this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
     this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
     this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
-    // 回显流程记录
     // 流程任务重获取变量表单
     this.processVariables( this.taskForm.taskId)
     this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
@@ -124,11 +116,6 @@ export default {
         })
       }
     },
-    getFlowViewer(procInsId,executionId) {
-      getFlowViewer(procInsId,executionId).then(res => {
-        this.taskList = res.data
-      })
-    },
     setIcon(val) {
       if (val) {
         return "el-icon-check";
@@ -153,31 +140,23 @@ export default {
         this.goBack();
       })
     },
-    fillFormData(form, data) {
-      form.fields.forEach((item) => {
-        const vModel = item.__vModel__;
-        const val = data[item.__vModel__];
-
-        // 特殊处理el-upload，回显图片
-        if (item.__config__.tag === "el-upload") {
-          // 回显图片
-          item["file-list"] = (val || []).map((url) => ({
-            name: `${vModel}${i}`,
-            url,
-          }));
-        }
-
-        if (val) {
-          item.__config__.defaultValue = val;
-        }
-      });
-    },
     /** 获取流程变量内容 */
     processVariables(taskId) {
       if (taskId) {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
         getProcessVariables(taskId).then(res => {
-          this.variablesData = res.data.variables;
+          this.$nextTick(() => {
+            // 回显表单
+            this.$refs.vFormRef.setFormJson(res.data.formJson);
+            this.$nextTick(() => {
+              // 加载表单填写的数据
+              this.$refs.vFormRef.setFormData(res.data);
+              this.$nextTick(() => {
+                // 表单禁用
+                this.$refs.vFormRef.disableForm();
+              })
+            })
+          })
         });
       }
     },

ruoyi-ui/src/views/flowable/task/myProcess/send/flow.vue

@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <flow-view :flowData="flowData"/>
-  </div>
-</template>
-<script>
-import FlowView from './flowview'
-
-export default {
-  name: "Flow",
-  components: {
-    FlowView
-  },
-  props: {
-    flowData: {
-      type: Object,
-      default: () => {}
-    },
-  },
-  data() {
-    return {};
-  }
-};
-</script>

ruoyi-ui/src/views/flowable/task/myProcess/send/flowview.vue

@@ -1,129 +0,0 @@
-<template>
-  <div class="containers main-box">
-    <el-button type="success"
-               size="small"
-               icon="el-icon-zoom-in"
-               @click="zoomViewport(true)">放大</el-button>
-    <el-button type="warning"
-               size="small"
-               icon="el-icon-zoom-out"
-               @click="zoomViewport(false)">缩小</el-button>
-    <el-button type="info"
-               size="small"
-               icon="el-icon-rank"
-               @click="fitViewport">适中</el-button>
-    <div class="canvas" ref="flowCanvas"></div>
-  </div>
-</template>
-<script>
-import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
-
-export default {
-  name: "FlowView",
-  props: {
-    flowData: {
-      type: Object,
-      default: () => {}
-    },
-  },
-  data() {
-    return {
-      bpmnViewer: null
-    };
-  },
-  watch: {
-    flowData: {
-      handler(newVal) {
-        if (Object.keys(newVal).length > 0) {
-          // 生成实例
-          this.bpmnViewer && this.bpmnViewer.destroy();
-          this.bpmnViewer = new BpmnViewer({
-            container: this.$refs.flowCanvas,
-            height: 'calc(100vh - 200px)',
-          });
-          this.loadFlowCanvas(newVal)
-        }
-      },
-      immediate: true, // 立即生效
-      deep: true  //监听对象或数组的时候，要用到深度监听
-    }
-  },
-  mounted() {},
-  methods: {
-    // 加载流程图片
-    async loadFlowCanvas(flowData) {
-      const self = this
-      try {
-        await self.bpmnViewer.importXML(flowData.xmlData);
-        self.fitViewport()
-      } catch (err) {
-        console.error(err.message, err.warnings)
-      }
-    },
-    // 让图能自适应屏幕
-    fitViewport() {
-      this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
-    },
-    // 放大缩小
-    zoomViewport(zoomIn = true) {
-      this.zoom = this.bpmnViewer.get('canvas').zoom()
-      this.zoom += (zoomIn ? 0.1 : -0.1)
-      if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
-    },
-  }
-};
-</script>
-<style lang="scss">
-  .bjs-powered-by {
-    display: none;
-  }
-  .view-mode {
-    .el-header, .el-aside, .djs-palette, .bjs-powered-by {
-      display: none;
-    }
-    .el-loading-mask {
-      background-color: initial;
-    }
-    .el-loading-spinner {
-      display: none;
-    }
-  }
-  .containers {
-    // background-color: #ffffff;
-    width: 100%;
-    height: 100%;
-    .canvas {
-      width: 100%;
-      height: 100%;
-    }
-    .panel {
-      position: absolute;
-      right: 0;
-      top: 50px;
-      width: 300px;
-    }
-    .load {
-      margin-right: 10px;
-    }
-    .el-form-item__label{
-      font-size: 13px;
-    }
-
-    .djs-palette{
-      left: 0px!important;
-      top: 0px;
-      border-top: none;
-    }
-
-    .djs-container svg {
-      min-height: 650px;
-    }
-
-    .overlays-div {
-      font-size: 10px;
-      color: red;
-      width: 100px;
-      top: -20px !important;
-    }
-  }
-</style>

ruoyi-ui/src/views/flowable/task/myProcess/send/index.vue

@@ -8,16 +8,18 @@
       <el-tabs  tab-position="top" v-model="activeName"  @tab-click="handleClick">
         <!--表单信息-->
         <el-tab-pane label="表单信息" name="1">
-            <!--初始化流程加载表单信息-->
-            <el-col :span="16" :offset="4">
-              <div class="test-form">
-                <parser :key="new Date().getTime()" :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" />
-              </div>
-            </el-col>
+          <!--初始化流程加载表单信息-->
+          <el-col :span="16" :offset="4">
+            <v-form-render :form-data="formRenderData" ref="vFormRef"/>
+            <div style="margin-left:15%;margin-bottom: 20px;font-size: 14px;">
+              <el-button type="primary" @click="submitForm">提 交</el-button>
+              <el-button type="primary" @click="resetForm">重 置</el-button>
+            </div>
+          </el-col>
         </el-tab-pane>
         <!--流程图-->
         <el-tab-pane label="流程图" name="2">
-           <flow :flowData="flowData"/>
+          <bpmn-viewer :flowData="flowData"/>
         </el-tab-pane>
       </el-tabs>
       <!--选择流程接收人-->
@@ -34,9 +36,8 @@
 </template>
 
 <script>
-import Parser from '@/components/parser/Parser'
 import {definitionStart, flowXmlAndNode} from "@/api/flowable/definition";
-import flow from './flow'
+import BpmnViewer from '@/components/Process/viewer';
 import {flowFormData} from "@/api/flowable/process";
 import {getNextFlowNodeByStart} from "@/api/flowable/todo";
 import FlowUser from '@/components/flow/User'
@@ -45,8 +46,7 @@ import FlowRole from '@/components/flow/Role'
 export default {
   name: "Record",
   components: {
-    Parser,
-    flow,
+    BpmnViewer,
     FlowUser,
     FlowRole,
   },
@@ -56,10 +56,6 @@ export default {
       // 模型xml数据
       flowData: {},
       activeName: '1', // 切换tab标签
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
       // 查询参数
       queryParams: {
         deptId: undefined
@@ -68,7 +64,7 @@ export default {
       loading: true,
       deployId: "",  // 流程定义编号
       procDefId: "",  // 流程实例编号
-      formConf: {}, // 默认表单数据
+      formRenderData: {},
       variables: [], // 流程变量数据
       taskTitle: null,
       taskOpen: false,
@@ -77,7 +73,8 @@ export default {
       checkType: '', // 选择类型
       checkValues: null, // 选中任务接收人员数据
       formData: {}, // 填写的表单数据,
-      multiInstanceVars: '' // 会签节点
+      multiInstanceVars: '', // 会签节点
+      formJson: {} // 表单json
     };
   },
   created() {
@@ -97,11 +94,14 @@ export default {
     },
     /** 流程表单数据 */
     getFlowFormData(deployId) {
-      const that = this
       const params = {deployId: deployId}
       flowFormData(params).then(res => {
         // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
-          that.formConf = res.data;
+        this.$nextTick(() => {
+          // 回显数据
+          this.$refs.vFormRef.setFormJson(res.data);
+          this.formJson = res.data;
+        })
       }).catch(res => {
         this.goBack();
       })
@@ -112,69 +112,55 @@ export default {
       const obj = { path: "/task/process", query: { t: Date.now()} };
       this.$tab.closeOpenPage(obj);
     },
-    /** 接收子组件传的值 */
-    getData(data) {
-      if (data) {
-        const variables = [];
-        data.fields.forEach(item => {
-          let variableData = {};
-          variableData.label = item.__config__.label
-          // 表单值为多个选项时
-          if (item.__config__.defaultValue instanceof Array) {
-            const array = [];
-            item.__config__.defaultValue.forEach(val => {
-              array.push(val)
-            })
-            variableData.val = array;
-          } else {
-            variableData.val = item.__config__.defaultValue
-          }
-          variables.push(variableData)
-        })
-        this.variables = variables;
-      }
-    },
     /** 申请流程表单数据提交 */
-    submitForm(formData) {
-      // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-      getNextFlowNodeByStart({deploymentId: this.deployId,variables:formData.valData}).then(res => {
-        const data = res.data;
-        if (data) {
-          this.formData = formData;
-          if (data.dataType === 'dynamic') {
-            if (data.type === 'assignee') { // 指定人员
-              this.checkSendUser = true;
-              this.checkType = "single";
-            } else if (data.type === 'candidateUsers') {  // 候选人员(多个)
-              this.checkSendUser = true;
-              this.checkType = "multiple";
-            } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
-              this.checkSendRole = true;
-            } else { // 会签
-              // 流程设计指定的 elementVariable 作为会签人员列表
-              this.multiInstanceVars = data.vars;
-              this.checkSendUser = true;
-              this.checkType = "multiple";
-            }
-            this.taskOpen = true;
-            this.taskTitle = "选择任务接收";
-          } else {
-            const variables = this.formData.valData;
-            const formData = this.formData.formData;
-            formData.disabled = true;
-            formData.formBtns = false;
-            if (this.procDefId) {
-              variables.variables = formData;
-              // 启动流程并将表单数据加入流程变量
-              definitionStart(this.procDefId, JSON.stringify(variables)).then(res => {
-                this.$modal.msgSuccess(res.msg);
-                this.goBack();
-              })
+    submitForm() {
+      this.$refs.vFormRef.getFormData().then(formData => {
+        // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
+        getNextFlowNodeByStart({deploymentId: this.deployId, variables: formData}).then(res => {
+          const data = res.data;
+          if (data) {
+            this.formData = formData;
+            if (data.dataType === 'dynamic') {
+              if (data.type === 'assignee') { // 指定人员
+                this.checkSendUser = true;
+                this.checkType = "single";
+              } else if (data.type === 'candidateUsers') {  // 候选人员(多个)
+                this.checkSendUser = true;
+                this.checkType = "multiple";
+              } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
+                this.checkSendRole = true;
+              } else { // 会签
+                // 流程设计指定的 elementVariable 作为会签人员列表
+                this.multiInstanceVars = data.vars;
+                this.checkSendUser = true;
+                this.checkType = "multiple";
+              }
+              this.taskOpen = true;
+              this.taskTitle = "选择任务接收";
+            } else {
+              if (this.procDefId) {
+                const param = {
+                  formJson:  this.formJson,
+                }
+                // 复制对象的属性值给新的对象
+                Object.assign(param, formData);
+                // 启动流程并将表单数据加入流程变量
+                definitionStart(this.procDefId, param).then(res => {
+                  this.$modal.msgSuccess(res.msg);
+                  this.goBack();
+                })
+              }
             }
           }
-        }
+        })
+      }).catch(error => {
+        // this.$modal.msgError(error)
       })
     },
+    /** 重置表单 */
+    resetForm() {
+      this.$refs.vFormRef.resetForm();
+    },
     /** 提交流程 */
     submitTask() {
       if (!this.checkValues && this.checkSendUser){
@@ -186,49 +172,23 @@ export default {
         return;
       }
       if (this.formData) {
-        const variables = this.formData.valData;
-        const formData = this.formData.formData;
-        // 表单是否禁用
-        formData.disabled = true;
-        // 是否显示按钮
-        formData.formBtns = false;
-        variables.variables = formData;
-        if (this.multiInstanceVars) {
-          this.$set(variables, this.multiInstanceVars, this.checkValues);
-        } else {
-          this.$set(variables, "approval", this.checkValues);
+        const param = {
+          formJson:  this.formJson,
+        }
+        // 复制对象的属性值给新的对象
+        Object.assign(param, this.formData);
+        if (this.multiInstanceVars) {
+          this.$set(param, this.multiInstanceVars, this.checkValues);
+        } else {
+          this.$set(param, "approval", this.checkValues);
         }
-        console.log(variables,"流程发起提交表单数据")
         // 启动流程并将表单数据加入流程变量
-        definitionStart(this.procDefId, JSON.stringify(variables)).then(res => {
+        definitionStart(this.procDefId, param).then(res => {
           this.$modal.msgSuccess(res.msg);
           this.goBack();
         })
       }
     },
-    /** 根据当前任务获取流程设计配置的下一步节点 */
-    getNextFlowNodeByStart(deploymentId,variables) {
-      // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-      getNextFlowNodeByStart({deploymentId: deploymentId,variables:variables}).then(res => {
-        const data = res.data;
-        if (data) {
-          if (data.type === 'assignee') { // 指定人员
-            this.checkSendUser = true;
-            this.checkType = "single";
-          } else if (data.type === 'candidateUsers') {  // 候选人员(多个)
-            this.checkSendUser = true;
-            this.checkType = "multiple";
-          } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
-            this.checkSendRole = true;
-          } else if (data.type === 'multiInstance') { // 会签?
-            // 流程设计指定的 elementVariable 作为会签人员列表
-            this.multiInstanceVars = data.vars;
-            this.checkSendUser = true;
-            this.checkType = "multiple";
-          }
-        }
-      })
-    },
     // 用户信息选中数据
     handleUserSelect(selection) {
       if (selection) {

ruoyi-ui/src/views/flowable/task/record/flow.vue

@@ -1,36 +0,0 @@
-<template>
-  <div>
-    <!--<bpmn-modeler
-      ref="refNode"
-      :xml="xmlData"
-      :is-view="true"
-      :taskList="taskData"
-    />-->
-    <flow-view :xmlData="xmlData" :taskList="taskData"/>
-  </div>
-</template>
-<script>
-import bpmnModeler from '@/components/Process/index'
-import FlowView from './flowview'
-
-export default {
-  name: "Flow",
-  components: {
-    bpmnModeler,
-    FlowView
-  },
-  props: {
-    xmlData: {
-      type: String,
-      default: ''
-    },
-    taskData: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {};
-  }
-};
-</script>

ruoyi-ui/src/views/flowable/task/record/flowview.vue

@@ -1,239 +0,0 @@
-<template>
-  <div class="containers main-box">
-    <el-button type="success"
-               size="small"
-               icon="el-icon-zoom-in"
-               @click="zoomViewport(true)">放大</el-button>
-    <el-button type="warning"
-               size="small"
-               icon="el-icon-zoom-out"
-               @click="zoomViewport(false)">缩小</el-button>
-    <el-button type="info"
-               size="small"
-               icon="el-icon-rank"
-               @click="fitViewport">适中</el-button>
-    <div class="canvas" ref="flowCanvas"></div>
-  </div>
-</template>
-<script>
-import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
-
-export default {
-  name: "FlowView",
-  props: {
-    xmlData: {
-      type: String,
-      default: ''
-    },
-    taskList: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      bpmnViewer: null
-    };
-  },
-  watch: {
-    xmlData: function(val) {
-      if (val) {
-        this.getImg(val)
-      }
-    }
-  },
-  mounted() {
-    // 生成实例
-    this.bpmnViewer && this.bpmnViewer.destroy();
-    this.bpmnViewer = new BpmnViewer({
-      container: this.$refs.flowCanvas,
-      height: 'calc(100vh - 200px)',
-    });
-    // this.getImg(this.xmlData)
-  },
-  methods: {
-    // 获取流程图片
-    async getImg(xmlUrl) {
-      const self = this
-      try {
-        await self.bpmnViewer.importXML(xmlUrl);
-        self.fitViewport()
-        if (self.taskList !==undefined && self.taskList.length > 0 ) {
-          self.fillColor()
-        }
-      } catch (err) {
-        console.error(err.message, err.warnings)
-      }
-    },
-    // 设置高亮颜色的class
-    setNodeColor(nodeCodes, colorClass, canvas) {
-      for (let i = 0; i < nodeCodes.length; i++) {
-        canvas.addMarker(nodeCodes[i], colorClass);
-      }
-    },
-    // 让图能自适应屏幕
-    fitViewport() {
-      this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
-    },
-    // 放大缩小
-    zoomViewport(zoomIn = true) {
-      this.zoom = this.bpmnViewer.get('canvas').zoom()
-      this.zoom += (zoomIn ? 0.1 : -0.1)
-      if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
-    },
-
-    // 设置高亮颜色的
-    fillColor() {
-      const canvas = this.bpmnViewer.get('canvas')
-      this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
-        const completeTask = this.taskList.find(m => m.key === n.id)
-        const todoTask = this.taskList.find(m => !m.completed)
-        const endTask = this.taskList[this.taskList.length - 1]
-        if (n.$type === 'bpmn:UserTask') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
-                  canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                }else {
-                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                }
-              }
-            })
-          }
-        }
-        // 排他网关
-        else if (n.$type === 'bpmn:ExclusiveGateway') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-
-            })
-          }
-
-        }
-        // 并行网关
-        else if (n.$type === 'bpmn:ParallelGateway') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = this.taskList.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-            })
-          }
-        }
-        else if (n.$type === 'bpmn:StartEvent') {
-          n.outgoing.forEach(nn => {
-            const completeTask = this.taskList.find(m => m.key === nn.targetRef.id)
-            if (completeTask) {
-              canvas.addMarker(nn.id, 'highlight')
-              canvas.addMarker(n.id, 'highlight')
-              return
-            }
-          })
-        }
-        else if (n.$type === 'bpmn:EndEvent') {
-          if (endTask.key === n.id && endTask.completed) {
-            canvas.addMarker(n.id, 'highlight')
-            return
-          }
-        }
-      })
-    },
-  }
-};
-</script>
-<style lang="scss">
-  .bjs-powered-by {
-    display: none;
-  }
-  .view-mode {
-    .el-header, .el-aside, .djs-palette, .bjs-powered-by {
-      display: none;
-    }
-    .el-loading-mask {
-      background-color: initial;
-    }
-    .el-loading-spinner {
-      display: none;
-    }
-  }
-  .containers {
-    // background-color: #ffffff;
-    width: 100%;
-    height: 100%;
-    .canvas {
-      width: 100%;
-      height: 100%;
-    }
-    .panel {
-      position: absolute;
-      right: 0;
-      top: 50px;
-      width: 300px;
-    }
-    .load {
-      margin-right: 10px;
-    }
-    .el-form-item__label{
-      font-size: 13px;
-    }
-
-    .djs-palette{
-      left: 0px!important;
-      top: 0px;
-      border-top: none;
-    }
-
-    .djs-container svg {
-      min-height: 650px;
-    }
-
-    .highlight.djs-shape .djs-visual > :nth-child(1) {
-      fill: green !important;
-      stroke: green !important;
-      fill-opacity: 0.2 !important;
-    }
-    .highlight.djs-shape .djs-visual > :nth-child(2) {
-      fill: green !important;
-    }
-    .highlight.djs-shape .djs-visual > path {
-      fill: green !important;
-      fill-opacity: 0.2 !important;
-      stroke: green !important;
-    }
-    .highlight.djs-connection > .djs-visual > path {
-      stroke: green !important;
-    }
-    .highlight-todo.djs-connection > .djs-visual > path {
-      stroke: orange !important;
-      stroke-dasharray: 4px !important;
-      fill-opacity: 0.2 !important;
-    }
-    .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
-      fill: orange !important;
-      stroke: orange !important;
-      stroke-dasharray: 4px !important;
-      fill-opacity: 0.2 !important;
-    }
-    .overlays-div {
-      font-size: 10px;
-      color: red;
-      width: 100px;
-      top: -20px !important;
-    }
-  }
-</style>

ruoyi-ui/src/views/flowable/task/record/index.vue

@@ -1,607 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-card class="box-card" >
-        <div slot="header" class="clearfix">
-          <span class="el-icon-document">基础信息</span>
-          <el-button style="float: right;" type="primary" @click="goBack">关闭</el-button>
-        </div>
-
-      <!--流程处理表单模块-->
-      <el-col :span="16" :offset="6" v-if="variableOpen">
-          <div>
-            <parser :key="new Date().getTime()" :form-conf="variablesData" />
-          </div>
-          <div style="margin-left:10%;margin-bottom: 20px;font-size: 14px;" v-if="finished === 'true'">
-            <el-button  icon="el-icon-edit-outline" type="success" size="mini" @click="handleComplete">审批</el-button>
-<!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">委派</el-button>-->
-<!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleAssign">转办</el-button>-->
-<!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
-            <el-button  icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>
-            <el-button  icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>
-          </div>
-     </el-col>
-
-      <!--初始化流程加载表单信息-->
-      <el-col :span="16" :offset="4" v-if="formConfOpen">
-        <div class="test-form">
-          <parser :key="new Date().getTime()"  :form-conf="formConf" @submit="submitForm" ref="parser" @getData="getData" />
-        </div>
-      </el-col>
-    </el-card>
-
-    <!--流程流转记录-->
-    <el-card class="box-card" v-if="flowRecordList">
-          <div slot="header" class="clearfix">
-            <span class="el-icon-notebook-1">审批记录</span>
-          </div>
-          <el-col :span="16" :offset="4" >
-            <div class="block">
-              <el-timeline>
-                <el-timeline-item
-                  v-for="(item,index ) in flowRecordList"
-                  :key="index"
-                  :icon="setIcon(item.finishTime)"
-                  :color="setColor(item.finishTime)"
-                >
-                  <p style="font-weight: 700">{{item.taskName}}</p>
-                  <el-card :body-style="{ padding: '10px' }">
-                    <el-descriptions class="margin-top" :column="1" size="small" border>
-                      <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
-                        <template slot="label"><i class="el-icon-user"></i>办理人</template>
-                        {{item.assigneeName}}
-                        <el-tag type="info" size="mini">{{item.deptName}}</el-tag>
-                      </el-descriptions-item>
-                      <el-descriptions-item v-if="item.candidate" label-class-name="my-label">
-                        <template slot="label"><i class="el-icon-user"></i>候选办理</template>
-                        {{item.candidate}}
-                      </el-descriptions-item>
-                      <el-descriptions-item label-class-name="my-label">
-                        <template slot="label"><i class="el-icon-date"></i>接收时间</template>
-                        {{item.createTime}}
-                      </el-descriptions-item>
-                      <el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
-                        <template slot="label"><i class="el-icon-date"></i>处理时间</template>
-                        {{item.finishTime}}
-                      </el-descriptions-item>
-                      <el-descriptions-item v-if="item.duration"  label-class-name="my-label">
-                        <template slot="label"><i class="el-icon-time"></i>耗时</template>
-                        {{item.duration}}
-                      </el-descriptions-item>
-                      <el-descriptions-item v-if="item.comment" label-class-name="my-label">
-                        <template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
-                        {{item.comment.comment}}
-                      </el-descriptions-item>
-                    </el-descriptions>
-
-<!--                    <p  v-if="item.comment">-->
-<!--                      <el-tag type="success" v-if="item.comment.type === '1'">  {{item.comment.comment}}</el-tag>-->
-<!--                      <el-tag type="warning" v-if="item.comment.type === '2'">  {{item.comment.comment}}</el-tag>-->
-<!--                      <el-tag type="danger" v-if="item.comment.type === '3'">  {{item.comment.comment}}</el-tag>-->
-<!--                    </p>-->
-                  </el-card>
-                </el-timeline-item>
-              </el-timeline>
-            </div>
-          </el-col>
-      </el-card>
-    <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span class="el-icon-picture-outline">流程图</span>
-        </div>
-        <flow :xmlData="xmlData" :taskData="taskList"></flow>
-    </el-card>
-
-    <!--审批正常流程-->
-    <el-dialog :title="completeTitle" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body>
-      <el-form ref="taskForm" :model="taskForm" label-width="80px" >
-        <el-form-item  v-if="checkSendUser" prop="targetKey">
-          <el-row :gutter="20">
-            <!--部门数据-->
-            <el-col :span="6" :xs="24">
-              <h6>部门列表</h6>
-              <div class="head-container">
-                <el-input
-                  v-model="deptName"
-                  placeholder="请输入部门名称"
-                  clearable
-                  size="small"
-                  prefix-icon="el-icon-search"
-                  style="margin-bottom: 20px"
-                />
-              </div>
-              <div class="head-container">
-                <el-tree
-                  :data="deptOptions"
-                  :props="defaultProps"
-                  :expand-on-click-node="false"
-                  :filter-node-method="filterNode"
-                  ref="tree"
-                  default-expand-all
-                  @node-click="handleNodeClick"
-                />
-              </div>
-            </el-col>
-            <el-col :span="10" :xs="24">
-              <h6>待选人员</h6>
-              <el-table
-                ref="singleTable"
-                :data="userList"
-                border
-                style="width: 100%"
-                @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="50" align="center" />
-                <el-table-column label="用户名" align="center" prop="nickName" />
-                <el-table-column label="部门" align="center" prop="dept.deptName" />
-              </el-table>
-            </el-col>
-            <el-col :span="8" :xs="24">
-              <h6>已选人员</h6>
-              <el-tag
-                v-for="(user,index) in userData"
-                :key="index"
-                closable
-                @close="handleClose(user)">
-                {{user.nickName}} {{user.dept.deptName}}
-              </el-tag>
-            </el-col>
-          </el-row>
-        </el-form-item>
-        <el-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
-          <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="completeOpen = false">取 消</el-button>
-        <el-button type="primary" @click="taskComplete">确 定</el-button>
-      </span>
-    </el-dialog>
-
-    <!--退回流程-->
-    <el-dialog :title="returnTitle" :visible.sync="returnOpen" width="40%" append-to-body>
-        <el-form ref="taskForm" :model="taskForm" label-width="80px" >
-            <el-form-item label="退回节点" prop="targetKey">
-              <el-radio-group v-model="taskForm.targetKey">
-                <el-radio-button
-                  v-for="item in returnTaskList"
-                  :key="item.id"
-                  :label="item.id"
-                >{{item.name}}</el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-          <el-form-item label="退回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
-            <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
-          </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="returnOpen = false">取 消</el-button>
-            <el-button type="primary" @click="taskReturn">确 定</el-button>
-        </span>
-    </el-dialog>
-
-    <!--驳回流程-->
-    <el-dialog :title="rejectTitle" :visible.sync="rejectOpen" width="40%" append-to-body>
-      <el-form ref="taskForm" :model="taskForm" label-width="80px" >
-        <el-form-item label="驳回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
-          <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-          <el-button @click="rejectOpen = false">取 消</el-button>
-          <el-button type="primary" @click="taskReject">确 定</el-button>
-        </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {flowRecord} from "@/api/flowable/finished";
-import Parser from '@/components/parser/Parser'
-import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
-import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo";
-import flow from '@/views/flowable/task/record/flow'
-import {treeselect} from "@/api/system/dept";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import Treeselect from "@riophae/vue-treeselect";
-import {listUser} from "@/api/system/user";
-
-export default {
-  name: "Record",
-  components: {
-    Parser,
-    flow,
-    Treeselect
-  },
-  props: {},
-  data() {
-    return {
-      // 模型xml数据
-      xmlData: "",
-      taskList: [],
-      // 部门名称
-      deptName: undefined,
-      // 部门树选项
-      deptOptions: undefined,
-      // 用户表格数据
-      userList: null,
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
-      // 查询参数
-      queryParams: {
-        deptId: undefined
-      },
-      // 遮罩层
-      loading: true,
-      flowRecordList: [], // 流程流转数据
-      formConfCopy: {},
-      src: null,
-      rules: {}, // 表单校验
-      variablesForm: {}, // 流程变量数据
-      taskForm:{
-        returnTaskShow: false, // 是否展示回退表单
-        delegateTaskShow: false, // 是否展示回退表单
-        defaultTaskShow: true, // 默认处理
-        sendUserShow: false, // 审批用户
-        multiple: false,
-        comment:"", // 意见内容
-        procInsId: "", // 流程实例编号
-        instanceId: "", // 流程实例编号
-        deployId: "",  // 流程定义编号
-        taskId: "" ,// 流程任务编号
-        procDefId: "",  // 流程编号
-        vars: "",
-        targetKey:""
-      },
-      userDataList:[], // 流程候选人
-      assignee: null,
-      formConf: {}, // 默认表单数据
-      formConfOpen: false, // 是否加载默认表单数据
-      variables: [], // 流程变量数据
-      variablesData: {}, // 流程变量数据
-      variableOpen: false, // 是否加载流程变量数据
-      returnTaskList: [],  // 回退列表数据
-      finished: 'false',
-      completeTitle: null,
-      completeOpen: false,
-      returnTitle: null,
-      returnOpen: false,
-      rejectOpen: false,
-      rejectTitle: null,
-      userData:[],
-      checkSendUser: false // 是否展示选择人员模块
-    };
-  },
-  created() {
-    this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
-    this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
-    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
-    this.taskForm.executionId = this.$route.query && this.$route.query.executionId;
-    this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId;
-    // 初始化表单
-    this.taskForm.procDefId  = this.$route.query && this.$route.query.procDefId;
-    // 回显流程记录
-    this.getFlowViewer(this.taskForm.procInsId,this.taskForm.executionId);
-    this.getModelDetail(this.taskForm.deployId);
-    // 流程任务重获取变量表单
-    if (this.taskForm.taskId){
-      this.processVariables( this.taskForm.taskId)
-      this.getNextFlowNode(this.taskForm.taskId)
-      this.taskForm.deployId = null
-    }
-    this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
-    this.finished =  this.$route.query && this.$route.query.finished
-  },
-  methods: {
-    /** 查询部门下拉树结构 */
-    getTreeselect() {
-      treeselect().then(response => {
-        this.deptOptions = response.data;
-      });
-    },
-    /** 查询用户列表 */
-    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
-      readXml(deployId).then(res => {
-        this.xmlData = res.data
-      })
-    },
-    getFlowViewer(procInsId,executionId) {
-      getFlowViewer(procInsId,executionId).then(res => {
-        this.taskList = res.data
-      })
-    },
-    setIcon(val) {
-      if (val) {
-        return "el-icon-check";
-      } else {
-        return "el-icon-time";
-      }
-    },
-    setColor(val) {
-      if (val) {
-        return "#2bc418";
-      } else {
-        return "#b3bdbb";
-      }
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      if (selection) {
-        this.userData = selection
-        const selectVal = selection.map(item => item.userId);
-        if (selectVal instanceof Array) {
-          this.taskForm.values = {
-            "approval": selectVal.join(',')
-          }
-        } else {
-          this.taskForm.values = {
-            "approval": selectVal
-          }
-        }
-      }
-    },
-    // 关闭标签
-    handleClose(tag) {
-      this.userData.splice(this.userData.indexOf(tag), 1);
-      this.$refs.singleTable.toggleRowSelection(tag, false)
-    },
-    /** 流程变量赋值 */
-    handleCheckChange(val) {
-      if (val instanceof Array) {
-        this.taskForm.values = {
-          "approval": val.join(',')
-        }
-      } else {
-        this.taskForm.values = {
-          "approval": val
-        }
-      }
-    },
-    /** 流程流转记录 */
-    getFlowRecordList(procInsId, deployId) {
-      const that = this
-      const params = {procInsId: procInsId, deployId: deployId}
-      flowRecord(params).then(res => {
-        that.flowRecordList = res.data.flowList;
-        // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
-        if (res.data.formData) {
-          that.formConf = res.data.formData;
-          that.formConfOpen = true
-        }
-      }).catch(res => {
-        this.goBack();
-      })
-    },
-    fillFormData(form, data) {
-      form.fields.forEach(item => {
-        const val = data[item.__vModel__]
-        if (val) {
-          item.__config__.defaultValue = val
-        }
-      })
-    },
-    /** 获取流程变量内容 */
-    processVariables(taskId) {
-      if (taskId) {
-        // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
-        getProcessVariables(taskId).then(res => {
-          this.variablesData = res.data.variables;
-          this.variableOpen = true
-        });
-      }
-    },
-    /** 根据当前任务或者流程设计配置的下一步节点 */
-    getNextFlowNode(taskId) {
-      // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-      const params = {taskId: taskId}
-      getNextFlowNode(params).then(res => {
-        const data = res.data;
-        if (data) {
-          this.checkSendUser = true
-          if (data.type === 'assignee') { // 指定人员
-            this.userDataList = res.data.userList;
-          } else if (data.type === 'candidateUsers') {  // 指定人员(多个)
-            this.userDataList = res.data.userList;
-            this.taskForm.multiple = true;
-          } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
-            res.data.roleList.forEach(role => {
-              role.userId = role.roleId;
-              role.nickName = role.roleName;
-            })
-            this.userDataList = res.data.roleList;
-            this.taskForm.multiple = false;
-          } else if (data.type === 'multiInstance') { // 会签?
-            this.userDataList = res.data.userList;
-            this.taskForm.multiple = true;
-          }else if (data.type === 'fixed') { // 已经固定人员接收下一任务
-            this.checkSendUser = false;
-          }
-        }
-      })
-    },
-    /** 审批任务选择 */
-    handleComplete() {
-      this.completeOpen = true;
-      this.completeTitle = "审批流程";
-      this.getTreeselect();
-    },
-    /** 审批任务 */
-    taskComplete() {
-      if (!this.taskForm.values && this.checkSendUser){
-        this.msgError("请选择流程接收人员");
-        return;
-      }
-      if (!this.taskForm.comment){
-        this.msgError("请输入审批意见");
-        return;
-      }
-      complete(this.taskForm).then(response => {
-       this.$modal.msgSuccess(response.msg);
-        this.goBack();
-      });
-    },
-    /** 委派任务 */
-    handleDelegate() {
-      this.taskForm.delegateTaskShow = true;
-      this.taskForm.defaultTaskShow = false;
-    },
-    handleAssign(){
-
-    },
-    /** 返回页面 */
-    goBack() {
-      // 关闭当前标签页并返回上个页面
-      this.$store.dispatch("tagsView/delView", this.$route);
-      this.$router.go(-1)
-    },
-    /** 接收子组件传的值 */
-    getData(data) {
-      if (data) {
-        const variables = [];
-        data.fields.forEach(item => {
-          let variableData = {};
-          variableData.label = item.__config__.label
-          // 表单值为多个选项时
-          if (item.__config__.defaultValue instanceof Array) {
-            const array = [];
-            item.__config__.defaultValue.forEach(val => {
-              array.push(val)
-            })
-            variableData.val = array;
-          } else {
-            variableData.val = item.__config__.defaultValue
-          }
-          variables.push(variableData)
-        })
-        this.variables = variables;
-      }
-    },
-    /** 申请流程表单数据提交 */
-    submitForm(data) {
-      if (data) {
-        const variables = data.valData;
-        const formData = data.formData;
-        formData.disabled = true;
-        formData.formBtns = false;
-        if (this.taskForm.procDefId) {
-          variables.variables = formData;
-           // 启动流程并将表单数据加入流程变量
-          definitionStart(this.taskForm.procDefId, JSON.stringify(variables)).then(res => {
-           this.$modal.msgSuccess(res.msg);
-            this.goBack();
-          })
-        }
-      }
-    },
-    /** 驳回任务 */
-    handleReject() {
-      this.rejectOpen = true;
-      this.rejectTitle = "驳回流程";
-    },
-    /** 驳回任务 */
-    taskReject() {
-      this.$refs["taskForm"].validate(valid => {
-        if (valid) {
-          rejectTask(this.taskForm).then(res => {
-           this.$modal.msgSuccess(res.msg);
-            this.goBack();
-          });
-        }
-      });
-    },
-    /** 可退回任务列表 */
-    handleReturn() {
-      this.returnOpen = true;
-      this.returnTitle = "退回流程";
-      returnList(this.taskForm).then(res => {
-        this.returnTaskList = res.data;
-        this.taskForm.values = null;
-      })
-    },
-    /** 提交退回任务 */
-   taskReturn() {
-      this.$refs["taskForm"].validate(valid => {
-        if (valid) {
-          returnTask(this.taskForm).then(res => {
-           this.$modal.msgSuccess(res.msg);
-            this.goBack()
-          });
-        }
-      });
-    },
-    /** 取消回退任务按钮 */
-    cancelTask() {
-      this.taskForm.returnTaskShow = false;
-      this.taskForm.defaultTaskShow = true;
-      this.taskForm.sendUserShow = true;
-      this.returnTaskList = [];
-    },
-    /** 委派任务 */
-    submitDeleteTask() {
-      this.$refs["taskForm"].validate(valid => {
-        if (valid) {
-          delegate(this.taskForm).then(response => {
-           this.$modal.msgSuccess(response.msg);
-            this.goBack();
-          });
-        }
-      });
-    },
-    /** 取消回退任务按钮 */
-    cancelDelegateTask() {
-      this.taskForm.delegateTaskShow = false;
-      this.taskForm.defaultTaskShow = true;
-      this.taskForm.sendUserShow = true;
-      this.returnTaskList = [];
-    },
-  }
-};
-</script>
-<style lang="scss" scoped>
-.test-form {
-  margin: 15px auto;
-  width: 800px;
-  padding: 15px;
-}
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-.clearfix:after {
-  clear: both
-}
-
-.box-card {
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-.el-tag + .el-tag {
-  margin-left: 10px;
-}
-
-.my-label {
-  background: #E1F3D8;
-}
-</style>

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

@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <flow-view :flowData="flowData"/>
-  </div>
-</template>
-<script>
-import FlowView from './flowview'
-
-export default {
-  name: "Flow",
-  components: {
-    FlowView
-  },
-  props: {
-    flowData: {
-      type: Object,
-      default: () => {}
-    },
-  },
-  data() {
-    return {};
-  }
-};
-</script>

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

@@ -1,238 +0,0 @@
-<template>
-  <div class="containers main-box">
-    <el-button type="success"
-               size="small"
-               icon="el-icon-zoom-in"
-               @click="zoomViewport(true)">放大</el-button>
-    <el-button type="warning"
-               size="small"
-               icon="el-icon-zoom-out"
-               @click="zoomViewport(false)">缩小</el-button>
-    <el-button type="info"
-               size="small"
-               icon="el-icon-rank"
-               @click="fitViewport">适中</el-button>
-    <div class="canvas" ref="flowCanvas"></div>
-  </div>
-</template>
-<script>
-import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
-
-export default {
-  name: "FlowView",
-  props: {
-    flowData: {
-      type: Object,
-      default: () => {}
-    },
-  },
-  data() {
-    return {
-      bpmnViewer: null
-    };
-  },
-  watch: {
-    flowData: {
-      handler(newVal) {
-        if (Object.keys(newVal).length > 0) {
-          // 生成实例
-          this.bpmnViewer && this.bpmnViewer.destroy();
-          this.bpmnViewer = new BpmnViewer({
-            container: this.$refs.flowCanvas,
-            height: 'calc(100vh - 200px)',
-          });
-          this.loadFlowCanvas(newVal);
-        }
-      },
-      immediate: true, // 立即生效
-      deep: true  //监听对象或数组的时候，要用到深度监听
-    }
-  },
-  mounted() {
-  },
-  methods: {
-    // 加载流程
-    async loadFlowCanvas(flowData) {
-      const self = this
-      try {
-        await self.bpmnViewer.importXML(flowData.xmlData);
-        self.fitViewport()
-        if (flowData.nodeData !==undefined && flowData.nodeData.length > 0 ) {
-          self.fillColor(flowData.nodeData)
-        }
-      } catch (err) {
-        console.error(err.message, err.warnings)
-      }
-    },
-    // 设置高亮颜色的class
-    setNodeColor(nodeCodes, colorClass, canvas) {
-      for (let i = 0; i < nodeCodes.length; i++) {
-        canvas.addMarker(nodeCodes[i], colorClass);
-      }
-    },
-    // 让图能自适应屏幕
-    fitViewport() {
-      this.zoom = this.bpmnViewer.get('canvas').zoom("fit-viewport", "auto")
-    },
-    // 放大缩小
-    zoomViewport(zoomIn = true) {
-      this.zoom = this.bpmnViewer.get('canvas').zoom()
-      this.zoom += (zoomIn ? 0.1 : -0.1)
-      if(this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom)
-    },
-
-    // 设置高亮颜色的
-    fillColor(nodeData) {
-      const canvas = this.bpmnViewer.get('canvas')
-      this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach(n => {
-        const completeTask = nodeData.find(m => m.key === n.id)
-        const todoTask = nodeData.find(m => !m.completed)
-        const endTask = nodeData[nodeData.length - 1]
-        if (n.$type === 'bpmn:UserTask') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                if (todoTask && completeTask.key === todoTask.key && !todoTask.completed){
-                  canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, todoTask.completed ? 'highlight' : 'highlight-todo')
-                }else {
-                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                  canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                }
-              }
-            })
-          }
-        }
-        // 排他网关
-        else if (n.$type === 'bpmn:ExclusiveGateway') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-
-            })
-          }
-
-        }
-        // 并行网关
-        else if (n.$type === 'bpmn:ParallelGateway') {
-          if (completeTask) {
-            canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo')
-            n.outgoing?.forEach(nn => {
-              const targetTask = nodeData.find(m => m.key === nn.targetRef.id)
-              if (targetTask) {
-                canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-                canvas.addMarker(nn.targetRef.id, targetTask.completed ? 'highlight' : 'highlight-todo')
-              }
-            })
-          }
-        }
-        else if (n.$type === 'bpmn:StartEvent') {
-          n.outgoing.forEach(nn => {
-            const completeTask = nodeData.find(m => m.key === nn.targetRef.id)
-            if (completeTask) {
-              canvas.addMarker(nn.id, 'highlight')
-              canvas.addMarker(n.id, 'highlight')
-              return
-            }
-          })
-        }
-        else if (n.$type === 'bpmn:EndEvent') {
-          if (endTask.key === n.id && endTask.completed) {
-            canvas.addMarker(n.id, 'highlight')
-            return
-          }
-        }
-      })
-    },
-  }
-};
-</script>
-<style lang="scss">
-  .bjs-powered-by {
-    display: none;
-  }
-  .view-mode {
-    .el-header, .el-aside, .djs-palette, .bjs-powered-by {
-      display: none;
-    }
-    .el-loading-mask {
-      background-color: initial;
-    }
-    .el-loading-spinner {
-      display: none;
-    }
-  }
-  .containers {
-    // background-color: #ffffff;
-    width: 100%;
-    height: 100%;
-    .canvas {
-      width: 100%;
-      height: 100%;
-    }
-    .panel {
-      position: absolute;
-      right: 0;
-      top: 50px;
-      width: 300px;
-    }
-    .load {
-      margin-right: 10px;
-    }
-    .el-form-item__label{
-      font-size: 13px;
-    }
-
-    .djs-palette{
-      left: 0px!important;
-      top: 0px;
-      border-top: none;
-    }
-
-    .djs-container svg {
-      min-height: 650px;
-    }
-
-    .highlight.djs-shape .djs-visual > :nth-child(1) {
-      fill: green !important;
-      stroke: green !important;
-      fill-opacity: 0.2 !important;
-    }
-    .highlight.djs-shape .djs-visual > :nth-child(2) {
-      fill: green !important;
-    }
-    .highlight.djs-shape .djs-visual > path {
-      fill: green !important;
-      fill-opacity: 0.2 !important;
-      stroke: green !important;
-    }
-    .highlight.djs-connection > .djs-visual > path {
-      stroke: green !important;
-    }
-    .highlight-todo.djs-connection > .djs-visual > path {
-      stroke: orange !important;
-      stroke-dasharray: 4px !important;
-      fill-opacity: 0.2 !important;
-    }
-    .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
-      fill: orange !important;
-      stroke: orange !important;
-      stroke-dasharray: 4px !important;
-      fill-opacity: 0.2 !important;
-    }
-    .overlays-div {
-      font-size: 10px;
-      color: red;
-      width: 100px;
-      top: -20px !important;
-    }
-  }
-</style>

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

@@ -11,23 +11,13 @@
         <!--表单信息-->
         <el-tab-pane label="表单信息" name="1">
           <el-col :span="16" :offset="4">
-            <div class="test-form">
-              <!--              <parser :key="new Date().getTime()" :form-conf="variablesData"/>-->
-              <parser :key="new Date().getTime()" :form-conf="variablesData" @submit="submitForm" ref="parser"/>
-
-            </div>
-            <div style="margin-left:15%;margin-bottom: 20px;font-size: 14px;">
-              <el-button v-if="!formKeyExist" icon="el-icon-edit-outline" type="success" size="mini"
-                         @click="handleComplete">审批
-              </el-button>
-              <!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">委派</el-button>-->
-              <!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleAssign">转办</el-button>-->
-              <!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
-              <!--              <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>-->
-              <!--              <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>-->
+            <v-form-render ref="vFormRef"/>
+            <div style="margin-left:10%;margin-bottom: 20px;font-size: 14px;">
+              <el-button type="primary" @click="handleComplete">审 批</el-button>
             </div>
           </el-col>
         </el-tab-pane>
+
         <!--流程流转记录-->
         <el-tab-pane label="流转记录" name="2">
           <!--flowRecordList-->
@@ -77,7 +67,7 @@
         </el-tab-pane>
         <!--流程图-->
         <el-tab-pane label="流程图" name="3">
-          <flow :flowData="flowData"/>
+          <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/>
         </el-tab-pane>
       </el-tabs>
       <!--审批任务-->
@@ -141,8 +131,7 @@
 import {flowRecord} from "@/api/flowable/finished";
 import FlowUser from '@/components/flow/User'
 import FlowRole from '@/components/flow/Role'
-import Parser from '@/components/parser/Parser'
-import {getProcessVariables, flowXmlAndNode, definitionStart} from "@/api/flowable/definition";
+import {flowXmlAndNode} from "@/api/flowable/definition";
 import {
   complete,
   rejectTask,
@@ -150,47 +139,29 @@ import {
   returnTask,
   getNextFlowNode,
   delegate,
-  flowTaskForm,
+  flowTaskForm
 } from "@/api/flowable/todo";
-import flow from '@/views/flowable/task/todo/detail/flow'
+import BpmnViewer from '@/components/Process/viewer';
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import {listUser} from "@/api/system/user";
 
 export default {
   name: "Record",
   components: {
-    Parser,
-    flow,
+    BpmnViewer,
     FlowUser,
     FlowRole,
   },
   props: {},
   data() {
     return {
-      // 模型xml数据
-      xmlData: "",
+      eventName: "click",
+      // 流程数据
       flowData: {},
       activeName: '1',
-      // 部门名称
-      deptName: undefined,
-      // 部门树选项
-      // 用户表格数据
-      userList: null,
-      defaultProps: {
-        children: "children",
-        label: "label"
-      },
-      // 查询参数
-      queryParams: {
-        deptId: undefined
-      },
       // 遮罩层
       loading: true,
       flowRecordList: [], // 流程流转数据
-      formConfCopy: {},
-      src: null,
       rules: {}, // 表单校验
-      variablesForm: {}, // 流程变量数据
       taskForm: {
         returnTaskShow: false, // 是否展示回退表单
         delegateTaskShow: false, // 是否展示回退表单
@@ -202,14 +173,8 @@ export default {
         taskId: "",// 流程任务编号
         procDefId: "",  // 流程编号
         targetKey: "",
-        variables: {
-          variables: {}
-        },
+        variables: {},
       },
-      assignee: null,
-      formConf: {}, // 默认表单数据
-      variables: [], // 流程变量数据
-      variablesData: {}, // 流程变量数据
       returnTaskList: [],  // 回退列表数据
       completeTitle: null,
       completeOpen: false,
@@ -217,14 +182,13 @@ export default {
       returnOpen: false,
       rejectOpen: false,
       rejectTitle: null,
-      userData: [],
       checkSendUser: false, // 是否展示人员选择模块
       checkSendRole: false,// 是否展示角色选择模块
       checkType: 'single', // 选择类型
       taskName: null, // 任务节点
       startUser: null, // 发起人信息,
       multiInstanceVars: '', // 会签节点
-      formKeyExist: false, // 当前节点是否存在表单
+      formJson:{}
     };
   },
   created() {
@@ -238,8 +202,7 @@ export default {
       this.taskForm.instanceId = this.$route.query.procInsId;
       // 流程任务获取变量信息
       if (this.taskForm.taskId) {
-        this.processVariables(this.taskForm.taskId)
-        this.getFlowTaskForm(this.taskForm.taskId)
+        this.getFlowTaskForm(this.taskForm.taskId);
       }
       this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
     }
@@ -270,9 +233,9 @@ export default {
     handleUserSelect(selection) {
       if (selection) {
         if (selection instanceof Array) {
-          const selectVal = selection.map(item => item.userId);
+          const selectVal = selection.map(item => item.userId.toString());
           if (this.multiInstanceVars) {
-            this.$set(this.taskForm.variables, this.multiInstanceVars, selectVal);
+            this.$set(this.taskForm.variables, this.multiInstanceVars,  selectVal);
           } else {
             this.$set(this.taskForm.variables, "approval", selectVal.join(','));
           }
@@ -282,10 +245,10 @@ export default {
       }
     },
     // 角色信息选中数据
-    handleRoleSelect(selection) {
+    handleRoleSelect(selection, roleName) {
       if (selection) {
         if (selection instanceof Array) {
-          const selectVal = selection.map(item => item.roleId);
+          const selectVal = selection.map(item => item.roleId.toString());
           this.$set(this.taskForm.variables, "approval", selectVal.join(','));
         } else {
           this.$set(this.taskForm.variables, "approval", selection);
@@ -302,73 +265,26 @@ export default {
         this.goBack();
       })
     },
-    fillFormData(form, data) {
-      form.fields.forEach(item => {
-        const val = data[item.__vModel__]
-        if (val) {
-          item.__config__.defaultValue = val
-        }
-      })
-    },
-    /** 获取流程变量内容 */
-    processVariables(taskId) {
-      if (taskId) {
-        // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
-        getProcessVariables(taskId).then(res => {
-          // this.variablesData = res.data.variables;
-        });
-      }
-    },
     /** 流程节点表单 */
     getFlowTaskForm(taskId) {
       if (taskId) {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
         flowTaskForm({taskId: taskId}).then(res => {
-          this.variablesData = res.data.formData;
-          this.taskForm.variables = res.data.formData;
-          this.formKeyExist = res.data.formKeyExist;
-        });
-      }
-    },
-    /** 加载审批任务弹框 */
-    handleComplete() {
-      // this.completeOpen = true;
-      // this.completeTitle = "流程审批";
-      this.submitForm(null);
-    },
-    /** 用户审批任务 */
-    taskComplete() {
-      if (!this.taskForm.variables && this.checkSendUser) {
-        this.$modal.msgError("请选择流程接收人员!");
-        return;
-      }
-      if (!this.taskForm.variables && this.checkSendRole) {
-        this.$modal.msgError("请选择流程接收角色组!");
-        return;
-      }
-      if (!this.taskForm.comment) {
-        this.$modal.msgError("请输入审批意见!");
-        return;
-      }
-      if (this.taskForm && this.formKeyExist) {
-        // 表单是否禁用
-        this.taskForm.formData.formData.disabled = true;
-        // 是否显示按钮
-        this.taskForm.formData.formData.formBtns = false;
-        this.taskForm.variables = Object.assign({}, this.taskForm.variables, this.taskForm.formData.valData);
-        this.taskForm.variables.variables = this.taskForm.formData.formData;
-        complete(this.taskForm).then(response => {
-          this.$modal.msgSuccess(response.msg);
-          this.goBack();
-        });
-      } else {
-        // 流程设计人员类型配置为固定人员接收任务时,直接提交任务到下一步
-        complete(this.taskForm).then(response => {
-          this.$modal.msgSuccess(response.msg);
-          this.goBack();
+          // 回显表单
+          this.$refs.vFormRef.setFormJson(res.data.formJson);
+          this.formJson = res.data.formJson;
+          this.$nextTick(() => {
+            // 加载表单填写的数据
+            this.$refs.vFormRef.setFormData(res.data);
+            // this.$nextTick(() => {
+            //   // 表单禁用
+            //   this.$refs.vFormRef.disableForm();
+            // })
+          })
         });
       }
     },
+
     /** 委派任务 */
     handleDelegate() {
       this.taskForm.delegateTaskShow = true;
@@ -405,7 +321,6 @@ export default {
       this.returnTitle = "退回流程";
       returnList(this.taskForm).then(res => {
         this.returnTaskList = res.data;
-        this.taskForm.variables = null;
       })
     },
     /** 提交退回任务 */
@@ -442,13 +357,51 @@ export default {
       this.taskForm.defaultTaskShow = true;
       this.returnTaskList = [];
     },
+    /** 加载审批任务弹框 */
+    handleComplete() {
+      this.completeOpen = true;
+      this.completeTitle = "流程审批";
+      this.submitForm();
+    },
+    /** 用户审批任务 */
+    taskComplete() {
+      if (!this.taskForm.variables && this.checkSendUser) {
+        this.$modal.msgError("请选择流程接收人员!");
+        return;
+      }
+      if (!this.taskForm.variables && this.checkSendRole) {
+        this.$modal.msgError("请选择流程接收角色组!");
+        return;
+      }
+      if (!this.taskForm.comment) {
+        this.$modal.msgError("请输入审批意见!");
+        return;
+      }
+      if (this.taskForm) {
+        complete(this.taskForm).then(response => {
+          this.$modal.msgSuccess(response.msg);
+          this.goBack();
+        });
+      } else {
+        complete(this.taskForm).then(response => {
+          this.$modal.msgSuccess(response.msg);
+          this.goBack();
+        });
+      }
+    },
     /** 申请流程表单数据提交 */
-    submitForm(formData) {
+    submitForm() {
       // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
       const params = {taskId: this.taskForm.taskId}
       getNextFlowNode(params).then(res => {
+        this.$refs.vFormRef.getFormData().then(formData => {
+          Object.assign(this.taskForm.variables, formData);
+          this.taskForm.variables.formJson = this.formJson;
+          console.log(this.taskForm, "流程审批提交表单数据1")
+        }).catch(error => {
+          // this.$modal.msgError(error)
+        })
         const data = res.data;
-        this.taskForm.formData = formData;
         if (data) {
           if (data.dataType === 'dynamic') {
             if (data.type === 'assignee') { // 指定人员
@@ -467,10 +420,12 @@ export default {
             }
           }
         }
-        this.completeOpen = true;
-        this.completeTitle = "流程审批";
       })
     },
+    // 动态绑定操作按钮的点击事件
+    handleButtonClick(method) {
+      this[method]();
+    }
   },
 };
 </script>

ruoyi-ui/src/views/login.vue

@@ -72,8 +72,8 @@ export default {
     return {
       codeUrl: "",
       loginForm: {
-        username: "admin",
-        password: "admin123",
+        username: "tony",
+        password: "123456",
         rememberMe: false,
         code: "",
         uuid: ""