工作流和抄送封装

src/components/WorkFlow/index.vue

+<template>
+    <div>
+        <my-process-viewer
+            ref="processViewer"
+            :value="bpmnXML"
+            :prefix="prefix"
+            :activityData="activityData"
+            :processInstanceData="processInstanceData"
+            :taskData="taskData"
+            style="height:500px; margin-bottom:10px"
+        />
+        <el-form label-position="left" label-width="100px">
+          <el-form-item label="抄送">
+            <el-select v-model="valueSync" multiple placeholder="请选择抄送人">
+                <el-option
+                v-for="item in users"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id">
+                </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script>
+import {getProcessDefinitionBpmnXMLByKey} from "@/api/bpm/definition"
+import {listSimpleUsers} from '@/api/system/user'
+export default {
+    props:{
+        xmlkey: String, // 流程标识
+        value: Array,
+        prefix: { // 使用哪个引擎
+            type: String,
+            default: "camunda",
+        },
+        activityData: { // 活动的数据。传递时，可高亮流程
+            type: Array,
+            default: () => [],
+        },
+        processInstanceData: { // 流程实例的数据。传递时，可展示流程发起人等信息
+            type: Object,
+        },
+        taskData: { // 任务实例的数据。传递时，可展示 UserTask 审核相关的信息
+            type: Array,
+            default: () => [],
+        }
+    },
+    data(){
+        return {
+            valueSync: [],
+            bpmnXML: null,
+            users: [],
+            selectedUserIds:[]
+        }
+    },
+    watch:{
+        value(){
+            this.valueSync = this.value || []
+        },
+        valueSync(val){
+            this.$emit('input', val)
+        },
+
+    },
+    created(){
+        if(this.value){
+            this.valueSync = this.value
+        }
+        listSimpleUsers().then(res => {
+            this.users = res.data
+        })
+        this.loadData()
+    },
+    methods:{
+        loadData(){
+            getProcessDefinitionBpmnXMLByKey(this.xmlkey).then(response => {
+                this.bpmnXML = response.data
+            })
+        }
+    }
+
+}
+</script>
\ No newline at end of file

src/views/index.vue

@@ -10,7 +10,11 @@
     <el-row>
       <ueditor />
     </el-row>
-
+    <el-card style="margin:20px 0">
+      <div slot="header">测试审批抄送</div>
+      <work-flow xmlkey="free_apply" v-model="selectedUsers"  />
+      <div>选择的用户：{{selectedUsers}}</div>
+    </el-card>
     <el-row>
       <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
     </el-row>
@@ -49,7 +53,7 @@ import Ueditor from '@/components/Ueditor'
 import {
   getProcessDefinitionBpmnXMLByKey
 } from "@/api/bpm/definition";
-
+import WorkFlow from '@/components/WorkFlow'
 const lineChartData = {
   newVisitis: {
     expectedData: [100, 120, 161, 134, 105, 160, 165],
@@ -77,12 +81,13 @@ export default {
     RaddarChart,
     PieChart,
     BarChart,
-    Ueditor
+    Ueditor,
+    WorkFlow
   },
   data() {
     return {
       lineChartData: lineChartData.newVisitis,
-
+      selectedUsers:[],
       // BPMN 数据
       bpmnXML: null,
       bpmnControlForm: {