fix 代理编辑页面添加角色代理逻辑

src/views/platform/bpmn/bpmAgent/edit.vue

@@ -1,11 +1,74 @@
 <template>
     <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body class="bpmn-agent-dialog" width="80%" top="10vh" @open="getFormData" @close="closeDialog">
         <el-form ref="agentForm" v-loading="dialogLoading" :element-loading-text="$t('common.loading')" :model="bpmAgent" :rules="rules" :label-width="formLabelWidth" @submit.native.prevent>
-            <el-image style="width: 400px; height: 500px; margin-left: 100px" :src="url" :preview-src-list="srcList"> </el-image>
-            <el-form-item label="标题:" prop="title">
-                <el-input v-if="!readonly" v-model="bpmAgent.title" />
-                <span v-else>{{ bpmAgent.title }}</span>
-            </el-form-item>
+            <!-- <el-image style="width: 400px; height: 500px; margin-left: 100px" :src="url" :preview-src-list="srcList"> </el-image> -->
+            <el-row v-if="srcList.length > 0">
+                <el-col :span="24">
+                    <el-form-item label="选择代理人参考图片：">
+                        <div class="imageListClass">
+                            <div v-for="(item,index) in srcList" :key="index">
+                                <el-image :src="item" class="sinImageList" :preview-src-list="srcList" />
+                            </div>
+                        </div>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="24">
+                    <el-form-item label="标题：" prop="title">
+                        <el-input v-if="!readonly" v-model="bpmAgent.title" placeholder="请输入标题" />
+                        <span v-else>{{ bpmAgent.title }}</span>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="生效时间：" prop="effectiveTime">
+                        <el-date-picker v-if="!readonly" v-model="bpmAgent.effectiveTime" class="time" type="date" value-format="yyyy-MM-dd" placeholder="请选择生效时间" />
+                        <span v-else>{{ bpmAgent.effectiveTime }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="失效时间：" prop="expiryTime">
+                        <el-date-picker v-if="!readonly" v-model="bpmAgent.expiryTime" class="time" type="date" value-format="yyyy-MM-dd" placeholder="请选择失效时间" />
+                        <span v-else>{{ bpmAgent.expiryTime }}</span>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="委托人:" prop="delegatorId">
+                        <ibps-employee-selector v-if="!readonly" v-model="bpmAgent.delegatorId" :orgAddId="orgAddId" :orgAddIndex="orgAddIndex" :orgAddList="orgAddList" @callback="callbackDelegatorrInfo" />
+                        <span v-else>{{ bpmAgent.delegatorName }}</span>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item v-if="bpmAgent.agentType === 'all' || bpmAgent.agentType === 'part'" label="代理人:" prop="agenterId">
+                        <ibps-employee-selector v-if="!readonly" v-model="bpmAgent.agenterId" :orgAddId="orgAddId" :orgAddIndex="orgAddIndex" :orgAddList="orgAddList" @callback="callbackAgenterInfo" />
+                        <span v-else>{{ bpmAgent.agenterName }}</span>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 全部代理 || 部分代理 -->
+
+            <el-row>
+                <el-col :span="24">
+                    <el-form-item label="委托人角色:">
+                        <el-checkbox-group v-if="!readonly" v-model="checkRoleList">
+                            <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
+                        </el-checkbox-group>
+                        <span v-else>{{ bpmAgent.roleName }}</span>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="24">
+                    <el-form-item label="代理人角色:">
+                        <span>{{ daiRoleName }}</span>
+                    </el-form-item>
+                </el-col>
+            </el-row>
             <el-row>
                 <el-col :span="12" col>
                     <el-form-item label="代理类型:" prop="agentType">
@@ -22,30 +85,6 @@
                     </el-form-item>
                 </el-col>
             </el-row>
-            <el-form-item label="委托人:" prop="delegatorId">
-                <ibps-employee-selector v-if="!readonly" v-model="bpmAgent.delegatorId" :orgAddId="orgAddId" :orgAddIndex="orgAddIndex" :orgAddList="orgAddList" @callback="callbackDelegatorrInfo" />
-                <span v-else>{{ bpmAgent.delegatorName }}</span>
-            </el-form-item>
-            <el-row>
-                <el-col :span="12" col>
-                    <el-form-item label="生效时间:" prop="effectiveTime">
-                        <el-date-picker v-if="!readonly" v-model="bpmAgent.effectiveTime" type="date" value-format="yyyy-MM-dd" style="width：100%;" />
-                        <span v-else>{{ bpmAgent.effectiveTime }}</span>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="12" col>
-                    <el-form-item label="失效时间:" prop="expiryTime">
-                        <el-date-picker v-if="!readonly" v-model="bpmAgent.expiryTime" type="date" value-format="yyyy-MM-dd" style="width：100%;" />
-                        <span v-else>{{ bpmAgent.expiryTime }}</span>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-
-            <!-- 全部代理 || 部分代理 -->
-            <el-form-item v-if="bpmAgent.agentType === 'all' || bpmAgent.agentType === 'part'" label="代理人:" prop="agenterId">
-                <ibps-employee-selector v-if="!readonly" v-model="bpmAgent.agenterId" :orgAddId="orgAddId" :orgAddIndex="orgAddIndex" :orgAddList="orgAddList" @callback="callbackAgenterInfo" />
-                <span v-else>{{ bpmAgent.agenterName }}</span>
-            </el-form-item>
 
             <div v-if="bpmAgent.agentType === 'part'">
                 <el-form-item label="流程定义">
@@ -115,6 +154,7 @@ import BpmDefinitionSelector from '@/business/platform/bpmn/definition/selector'
 import curdPost from '@/business/platform/form/utils/custom/joinCURD.js'
 import Condition from './condition'
 import { setTimeout } from 'timers'
+import { load } from '@/api/platform/org/employee'
 
 export default {
     components: {
@@ -160,7 +200,8 @@ export default {
                 agentType: 'all',
                 isEnabled: 'enabled',
                 bpmAgentDefPoList: [],
-                bpmAgentConditionPoList: []
+                bpmAgentConditionPoList: [],
+                bpmAgentRoleList: []
             },
             rules: {
                 title: [
@@ -190,7 +231,10 @@ export default {
                     value: 'org',
                     label: '机构'
                 }
-            ]
+            ],
+            roleList: [],
+            checkRoleList: [],
+            daiRoleName: ''
         }
     },
     computed: {
@@ -204,6 +248,20 @@ export default {
                 this.dialogVisible = this.visible
             },
             immediate: true
+        },
+        'bpmAgent.delegatorId': {
+            handler: function (val, oldVal) {
+                this.getWeiTuo(this.bpmAgent.delegatorId, 1)
+            },
+            immediate: true,
+            deep: true
+        },
+        'bpmAgent.agenterId': {
+            handler: function (val, oldVal) {
+                this.getWeiTuo(this.bpmAgent.agenterId, 2)
+            },
+            immediate: true,
+            deep: true
         }
     },
     created() {
@@ -309,6 +367,7 @@ export default {
                 ActionUtils.error('流程定义数据不能为空！')
                 return
             }
+            this.bpmAgent.bpmAgentRoleList = this.checkRoleList
             save(this.bpmAgent)
                 .then((response) => {
                     this.$emit('callback', this)
@@ -329,6 +388,9 @@ export default {
         closeDialog() {
             this.$emit('close', false)
             this.$refs[this.formName].resetFields()
+            this.daiRoleName = ''
+            this.roleList = []
+            this.checkRoleList = []
         },
         /**
          * 表单验证
@@ -355,7 +417,7 @@ export default {
             })
                 .then((response) => {
                     this.bpmAgent = response.data
-                    console.log(this.bpmAgent)
+                    this.checkRoleList = response.data.bpmAgentRoleList || []
                     this.formValidate()
                     this.dialogLoading = false
                 })
@@ -416,14 +478,35 @@ export default {
             let sql2 = `select FILE_PATH_ from ibps_file_attachment where ID_ = '${id}'`
             Promise.all([curdPost('sql', sql1), curdPost('sql', sql2)]).then(([res1, res2]) => {
                 if (res1.state == 200 && res2.state == 200) {
-                    let datas1 = res1.variables.data
-                    let datas2 = res2.variables.data
-                    let ip = datas1[0].nei_rong_
-                    let image = datas2[0].FILE_PATH_
-                    this.url = ip + '/' + image
-                    this.srcList[0] = this.url
+                    const datas1 = res1.variables.data
+                    const datas2 = res2.variables.data
+                    const ip = datas1[0].nei_rong_
+                    const imageList = datas2.map(item => {
+                        return ip + '/' + item.FILE_PATH_
+                    })
+                    this.srcList = imageList
                 }
             })
+        },
+        getWeiTuo(id, type = 1, formId = '') {
+            if (!id) return
+            return new Promise((resolve, reject) => {
+                load({ employeeId: id })
+                    .then((response) => {
+                        const data = response
+                        const partyRole = response.variables.partyRoles
+                        if (type === 1) {
+                            this.roleList = partyRole || []
+                            // this.checkRoleList = []
+                        }
+                        if (type === 2) {
+                            const roleName = partyRole.map((item) => item.name)
+                            this.daiRoleName = roleName.join('，')
+                        }
+                        resolve(data)
+                    })
+                    .catch(() => {})
+            })
         }
     }
 }
@@ -446,6 +529,14 @@ export default {
 <style scoped>
 .imageListClass {
     display: flex;
-    justify-content: center;
+    flex-wrap: wrap;
+}
+.time {
+    width: 100%;
+}
+.sinImageList{
+    width: 150px;
+    height: 150px;
+    margin: 10px;
 }
 </style>