选择任务人修改

src/api/modules/tasks/flow.js

@@ -17,6 +17,14 @@ export default {
             params: form,
         })
     },
+        //根据条件查询角色
+        async findAllUserAndRoleList(form) {
+            return HcApi({
+                url: '/api/blade-business/fixedFlow/findAllUserAndRoleList',
+                method: 'get',
+                params: form,
+            })
+        },
     //详情
     async queryFixedFlowDetail(form) {
         return HcApi({

src/global/components/hc-tasks-user/user-modal.vue

@@ -1,79 +1,81 @@
 <template>
     <hc-dialog v-model="isShow" ui="hc-report-tasks-user-modal" widths="960px" title="选择任务人" @close="modalClose">
-        <div class="card-div-2 h-full w-235px">
-            <hc-card scrollbar title="角色类型" :loading="signUserLoading">
-                <template v-for="item in signUserList" :key="item.roleId">
-                    <div class="hc-tasks-user-role-item" :class="{ cur: roleItem.roleId === item.roleId }" @click="roleItemClick(item)">
-                        {{ item.roleName }}
-                    </div>
-                </template>
-            </hc-card>
-        </div>
-        <div class="card-div-3 h-full w-265px">
-            <hc-card v-if="positionList.length > 0" scrollbar>
-                <template #header>
-                    <hc-search-input v-model="positionKey" placeholder="岗位搜索" icon="" @search="positionSearch" />
-                </template>
-                <template v-for="item in positionList" :key="item.roleId">
-                    <div class="hc-tasks-user-role-item" :class="{ cur: positionItem.roleId === item.roleId }" @click="positionItemClick(item)">
-                        <i class="i-ph-user-list-light mr-5px" />
-                        <span>{{ item.roleName }}</span>
-                    </div>
-                </template>
-            </hc-card>
-            <div v-else class="card-empty-no">
-                <hc-empty :src="HcLoadSvg" title="请先选择角色" />
+        <div class="cards-wrapper">
+            <div class="card-div-2 h-full w-235px">
+                <hc-card scrollbar title="角色类型" :loading="signUserLoading">
+                    <template v-for="item in signUserList" :key="item.roleId">
+                        <div class="hc-tasks-user-role-item" :class="{ cur: roleItem.roleId === item.roleId }" @click="roleItemClick(item)">
+                            {{ item.roleName }}
+                        </div>
+                    </template>
+                </hc-card>
             </div>
-        </div>
-        <div class="card-div-4 h-full w-235px">
-            <hc-card v-if="signPfxFileList.length > 0">
-                <template #header>
-                    <hc-search-input v-model="signUserKey" placeholder="人员搜索" icon="" @search="signUserSearch" />
-                </template>
-                <div class="hc-tasks-user-sign-pfx-box">
-                    <el-scrollbar ref="scrollRef">
-                        <template v-for="item in signPfxFileList" :key="item.name">
-                            <div v-if="item.data.length > 0" :id="`hc-sign-pfx-file-item-${item.name}`" class="hc-sign-pfx-file-item">
-                                <div class="hc-tasks-user-letter">{{ item.name }}</div>
-                                <template v-for="(items, index) in item.data" :key="index">
-                                    <div class="hc-tasks-user-item" @click="signUserItemClick(items)">
-                                        <i class="i-iconoir-user mr-5px" />
-                                        <span>{{ items.certificateUserName }}</span>
-                                    </div>
-                                </template>
-                            </div>
-                        </template>
-                    </el-scrollbar>
+            <div v-if="roleItem.roleId" class="card-div-3 h-full w-265px">
+                <hc-card v-if="positionList.length > 0" scrollbar>
+                    <template #header>
+                        <hc-search-input v-model="positionKey" placeholder="岗位搜索" icon="" @search="positionSearch" />
+                    </template>
+                    <template v-for="item in positionList" :key="item.roleId">
+                        <div class="hc-tasks-user-role-item" :class="{ cur: positionItem.roleId === item.roleId }" @click="positionItemClick(item)">
+                            <i class="i-ph-user-list-light mr-5px" />
+                            <span>{{ item.roleName }}</span>
+                        </div>
+                    </template>
+                </hc-card>
+                <div v-else class="card-empty-no">
+                    <hc-empty :src="HcLoadSvg" title="请先选择角色" />
                 </div>
-                <div class="hc-tasks-user-letter-index">
-                    <div v-for="item in alphabet" :key="item" class="item" @click="alphabetClick(item)">{{ item }}</div>
+            </div>
+            <div class="card-div-4 h-full w-235px">
+                <hc-card v-if="signPfxFileList.length > 0" :loading="signPfxFileListLoading">
+                    <template #header>
+                        <hc-search-input v-model="signUserKey" placeholder="人员搜索" icon="" @search="signUserSearch" />
+                    </template>
+                    <div class="hc-tasks-user-sign-pfx-box">
+                        <el-scrollbar ref="scrollRef">
+                            <template v-for="item in signPfxFileList" :key="item.name">
+                                <div v-if="item.data.length > 0" :id="`hc-sign-pfx-file-item-${item.name}`" class="hc-sign-pfx-file-item">
+                                    <div class="hc-tasks-user-letter">{{ item.name }}</div>
+                                    <template v-for="(items, index) in item.data" :key="index">
+                                        <div class="hc-tasks-user-item" @click="signUserItemClick(items)">
+                                            <i class="i-iconoir-user mr-5px" />
+                                            <span>{{ items.certificateUserName }}</span>
+                                        </div>
+                                    </template>
+                                </div>
+                            </template>
+                        </el-scrollbar>
+                    </div>
+                    <div class="hc-tasks-user-letter-index">
+                        <div v-for="item in alphabet" :key="item" class="item" @click="alphabetClick(item)">{{ item }}</div>
+                    </div>
+                </hc-card>
+                <div v-else class="card-empty-no">
+                    <hc-empty :src="HcLoadSvg" title="请先选择岗位" />
                 </div>
-            </hc-card>
-            <div v-else class="card-empty-no">
-                <hc-empty :src="HcLoadSvg" title="请先选择岗位" />
             </div>
-        </div>
-        <div class="card-div-5 h-full w-205px">
-            <hc-card v-if="userData.length > 0" scrollbar>
-                <template #header>
-                    <span>已选择{{ userData.length || 0 }}人</span>
-                </template>
-                <template #extra>
-                    <el-button type="warning" size="small" @click="fixedUserSortClick">调整排序</el-button>
-                </template>
-                <div class="hc-tasks-user-cur-box" :class="`type-${fixedFlowLinkTypeVal}`">
-                    <template v-for="(item, index) in userData" :key="index">
-                        <div class="hc-tasks-user-item">
-                            <el-tag closable @close="fixedItemUserListDel(index)">
-                                <i class="i-ri-user-3-fill mr-5px" />
-                                <span>{{ item.userName }}</span>
-                            </el-tag>
-                        </div>
+            <div class="card-div-5 h-full w-205px">
+                <hc-card v-if="userData.length > 0" scrollbar>
+                    <template #header>
+                        <span>已选择{{ userData.length || 0 }}人</span>
+                    </template>
+                    <template #extra>
+                        <el-button type="warning" size="small" @click="fixedUserSortClick">调整排序</el-button>
                     </template>
+                    <div class="hc-tasks-user-cur-box" :class="`type-${fixedFlowLinkTypeVal}`">
+                        <template v-for="(item, index) in userData" :key="index">
+                            <div class="hc-tasks-user-item">
+                                <el-tag closable @close="fixedItemUserListDel(index)">
+                                    <i class="i-ri-user-3-fill mr-5px" />
+                                    <span>{{ item.userName }}</span>
+                                </el-tag>
+                            </div>
+                        </template>
+                    </div>
+                </hc-card>
+                <div v-else class="card-empty-no">
+                    <hc-empty :src="HcLoadSvg" title="请先选择人员" />
                 </div>
-            </hc-card>
-            <div v-else class="card-empty-no">
-                <hc-empty :src="HcLoadSvg" title="请先选择人员" />
             </div>
         </div>
         <template #footer>
@@ -138,8 +140,20 @@ watch(isShow, (val) => {
 const setInitData = async () => {
     await nextTick()
     await getAllRoleList()
+    await getsignPfxFileList()
     console.log(userData.value)
 }
+const signPfxFileListLoading = ref(false)
+const getsignPfxFileList = async () => {
+
+    signPfxFileListLoading.value = true
+    const { contractId } = getObjValue(dataInfo.value)
+    const { data } = await mainApi.findAllUserAndRoleList({ contractId, roleId:roleItem.value.roleId})
+    let arr = getObjValue(data)
+    setSignPfxUser(arr['userList'])
+    signPfxFileListLoading.value = false
+
+}
 
 //角色列表
 const signUserLoading = ref(false)
@@ -154,10 +168,24 @@ const getAllRoleList = async () => {
 
 //角色被点击
 const roleItem = ref({})
-const roleItemClick = (item) => {
+const roleItemClick = async(item) => {
+    //roleItem.value = item
+    //const arr = getArrValue(item.childRoleList)
+   // positionList.value = deepClone(arr)
+   if (roleItem.value.roleId === item.roleId) {
+        // 如果点击的是已选中的角色，则清空选择
+        roleItem.value = {}
+        positionList.value = []
+        positionItem.value = {}
+        roleItem.value = {}
+        await getsignPfxFileList()
+        return
+    }
     roleItem.value = item
+
     const arr = getArrValue(item.childRoleList)
     positionList.value = deepClone(arr)
+    setSignPfxUser(item.signPfxFileList)
 }
 
 //岗位搜索
@@ -176,7 +204,16 @@ const positionSearch = () => {
 
 //岗位被点击
 const positionItem = ref({})
-const positionItemClick = (item) => {
+const positionItemClick = async(item) => {
+    // positionItem.value = item
+    // setSignPfxUser(item.signPfxFileList)
+    if (positionItem.value.roleId === item.roleId) {
+        // 如果点击的是已选中的岗位，则清空选择并显示当前角色下所有岗位的所有人员
+        positionItem.value = {}
+        // 调用API获取当前角色下所有人员
+        await getsignPfxFileList()
+        return
+    }
     positionItem.value = item
     setSignPfxUser(item.signPfxFileList)
 }
@@ -289,3 +326,35 @@ const modalClose = () => {
     emit('close')
 }
 </script>
+
+<style scoped>
+.cards-wrapper {
+    display: flex;
+    gap: 12px;
+    width: 100%;
+    height: 100%;
+}
+
+.card-div-2,
+.card-div-3,
+.card-div-4,
+.card-div-5 {
+    height: 100%;
+}
+
+.card-div-2 {
+    width: 235px;
+    flex-shrink: 0;
+}
+
+.card-div-3 {
+    width: 255px;
+    flex-shrink: 0;
+}
+
+.card-div-4,
+.card-div-5 {
+    flex: 1;
+    min-width: 205px;
+}
+</style>