代理编制页面优化，排除代理人的角色逻辑

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

@@ -1,10 +1,11 @@
 <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>
+        <div style="padding: 15px">
+            <el-form ref="agentForm" v-loading="dialogLoading" :element-loading-text="$t('common.loading')" :model="bpmAgent" :rules="rules" :label-width="formLabelWidth" label-position="left" @submit.native.prevent>
             <!-- <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="选择代理人参考图片：">
+                    <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" />
@@ -21,7 +22,7 @@
                     </el-form-item>
                 </el-col>
             </el-row>
-            <el-row>
+            <el-row :gutter="20">
                 <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="请选择生效时间" />
@@ -35,15 +36,15 @@
                     </el-form-item>
                 </el-col>
             </el-row>
-            <el-row>
+            <el-row :gutter="20">
                 <el-col :span="12">
-                    <el-form-item label="委托人:" prop="delegatorId">
+                    <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">
+                    <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>
@@ -54,7 +55,7 @@
 
             <el-row>
                 <el-col :span="24">
-                    <el-form-item label="委托人角色:">
+                    <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>
@@ -64,14 +65,14 @@
             </el-row>
             <el-row>
                 <el-col :span="24">
-                    <el-form-item label="代理人角色:">
+                    <el-form-item label="代理人角色：">
                         <span>{{ daiRoleName }}</span>
                     </el-form-item>
                 </el-col>
             </el-row>
-            <el-row>
+            <el-row :gutter="20">
                 <el-col :span="12" col>
-                    <el-form-item label="代理类型:" prop="agentType">
+                    <el-form-item label="代理类型：" prop="agentType">
                         <el-radio-group v-if="!readonly" v-model="bpmAgent.agentType">
                             <el-radio v-for="option in agentTypeOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio>
                         </el-radio-group>
@@ -79,7 +80,7 @@
                     </el-form-item>
                 </el-col>
                 <el-col :span="12" col>
-                    <el-form-item label="是否启用:" prop="isEnabled">
+                    <el-form-item label="是否启用：" prop="isEnabled">
                         <el-switch v-if="!readonly" v-model="bpmAgent.isEnabled" active-value="enabled" inactive-value="disabled" />
                         <el-tag v-else :type="bpmAgent.isEnabled | optionsFilter(statusOptions, 'type')">{{ bpmAgent.isEnabled | optionsFilter(statusOptions, 'label') }}</el-tag>
                     </el-form-item>
@@ -136,6 +137,8 @@
                 </el-form-item>
             </div>
         </el-form>
+        </div>
+
         <div slot="footer" class="el-dialog--center">
             <ibps-toolbar :actions="toolbars" @action-event="handleActionEvent" />
         </div>
@@ -177,7 +180,7 @@ export default {
     data() {
         return {
             formName: 'agentForm',
-            formLabelWidth: '120px',
+            formLabelWidth: '110px',
             dialogVisible: this.visible,
             conditionDialogVisible: false, // 条件规则界面
             dialogLoading: false,
@@ -233,8 +236,10 @@ export default {
                 }
             ],
             roleList: [],
+            yuanRoleList: [],
             checkRoleList: [],
-            daiRoleName: ''
+            daiRoleName: '',
+            daiRoleList: []
         }
     },
     computed: {
@@ -368,6 +373,9 @@ export default {
                 return
             }
             this.bpmAgent.bpmAgentRoleList = this.checkRoleList
+            if(this.getVerification()){
+                return
+            }
             save(this.bpmAgent)
                 .then((response) => {
                     this.$emit('callback', this)
@@ -429,10 +437,14 @@ export default {
             alert('打开流程选择器')
         },
         callbackDelegatorrInfo(data) {
+            this.checkRoleList = []
             this.bpmAgent.delegatorName = data.name
+            this.getVerification()
         },
         callbackAgenterInfo(data) {
+            this.checkRoleList = []
             this.bpmAgent.agenterName = data.name
+            this.getVerification()
         },
         updateDefine(data) {
             this.rowLoading = true
@@ -496,17 +508,33 @@ export default {
                         const data = response
                         const partyRole = response.variables.partyRoles
                         if (type === 1) {
-                            this.roleList = partyRole || []
-                            // this.checkRoleList = []
+                            this.yuanRoleList = partyRole || []
                         }
                         if (type === 2) {
+                            this.daiRoleList = partyRole || []
                             const roleName = partyRole.map((item) => item.name)
                             this.daiRoleName = roleName.join('，')
                         }
+                        this.getRoleList()
                         resolve(data)
-                    })
-                    .catch(() => {})
+                    }).catch(() => {})
             })
+        },
+        getRoleList(){
+            if(this.yuanRoleList.length > 0 && this.daiRoleList.length > 0){
+                this.roleList = this.yuanRoleList.filter(item => {
+                    return !this.daiRoleList.some(it => it.id == item.id)
+                })
+                console.log(this.yuanRoleList.length,this.roleList.length)
+            }
+        },
+        getVerification(){
+            if(this.bpmAgent.agenterId == this.bpmAgent.delegatorId){
+                this.$message.error('委托人和代理人是同一个账号，请重新选择。')
+                return true
+            }else{
+                return false
+            }
         }
     }
 }