1

src/components/hc-tasks-user/index.vue

@@ -2,7 +2,7 @@
     <div :class="ui" class="hc-tasks-user">
         <div class="tasks-user-box">
             <div class="tag-user-list" @click="showModalClick">
-                <template v-if="isShowTaskName"> 
+                <template v-if="isShowTaskName">
                     <template v-for="(item, index) in fixedBranchList" :key="index">
                         <el-tag>{{ item.name }}</el-tag>
                         <HcIcon v-if="(fixedBranchList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
@@ -20,21 +20,30 @@
         </div>
 
         <!-- 选择任务人 -->
-        <el-dialog v-model="showModal" title="选择任务人" width="62rem" class="hc-modal-border hc-modal-nop" draggable destroy-on-close>
+        <el-dialog
+            v-model="showModal" title="选择任务人" width="62rem" class="hc-modal-border hc-modal-nop" draggable
+            destroy-on-close
+        >
             <div class="hc-tasks-user-modal-content-box">
                 <div v-if="isShowTaskName" class="tasks-name-box">
                     <p class="mb-2">创建任务人流程</p>
                     <div class="flex pt-2">
-                        <el-input v-model="taskNameinput" placeholder="请输入" size="default" class="mr-4" />  
+                        <el-input v-model="taskNameinput" placeholder="请输入" size="default" class="mr-4" />
                         <el-button type="primary" size="default" @click="addTaskName">添加</el-button>
                     </div>
                     <div class="task-list-box">
                         <div v-for="(item, index) in fixedBranchList" class="task-list-box-item">
                             <el-tooltip :content="item.type === 1 ? '流程审批' : '平行审批'" placement="right">
-                                <el-button size="default" :color="curItem?.name === item.name ? 'orange' : ''" @click="chekckTask(item)">
+                                <el-button
+                                    size="default" :color="curItem?.name === item.name ? 'orange' : ''"
+                                    @click="chekckTask(item)"
+                                >
                                     {{ item.name }}
                                     <HcIcon v-if="item.type === 2" name="links" class="ml-2" @click="item.type = 1" />
-                                    <HcIcon v-if="item.type === 1" name="exchange-2" class="ml-2" @click="item.type = 2" />
+                                    <HcIcon
+                                        v-if="item.type === 1" name="exchange-2" class="ml-2"
+                                        @click="item.type = 2"
+                                    />
                                     <HcIcon name="close" class="ml-2" @click="delTask(item, index)" />
                                 </el-button>
                             </el-tooltip>
@@ -43,7 +52,10 @@
                 </div>
                 <div class="tree-box">
                     <el-scrollbar>
-                        <ElTree class="hc-tree-node-box" :props="ElTreeProps" :data="ElTreeData" node-key="roleId" highlight-current accordion :default-expanded-keys="[0]" @node-click="ElTreeNodeClick" />
+                        <ElTree
+                            class="hc-tree-node-box" :props="ElTreeProps" :data="ElTreeData" node-key="roleId"
+                            highlight-current accordion :default-expanded-keys="[0]" @node-click="ElTreeNodeClick"
+                        />
                     </el-scrollbar>
                 </div>
                 <div class="user-box">
@@ -56,7 +68,10 @@
                                 <el-checkbox-group v-model="checkboxUserList">
                                     <template v-for="item in signUserList" :key="item.certificateUserId">
                                         <div class="user-item checkbox-li">
-                                            <el-checkbox :label="`${item.certificateUserName}-${item.certificateUserId}`" :disabled="item.isDisa">
+                                            <el-checkbox
+                                                :value="`${item.certificateUserName}-${item.certificateUserId}`"
+                                                :disabled="item.isDisa"
+                                            >
                                                 <div class="item-user-name">{{ item.certificateUserName }}</div>
                                             </el-checkbox>
                                         </div>
@@ -73,7 +88,11 @@
                         <div class="user-list">
                             <el-scrollbar>
                                 <template v-for="(item, index) in checkboxUserList" :key="index">
-                                    <el-tag closable @close="delCheckboxUser(item, index)">{{ setCheckboxUserName(item) }}</el-tag>
+                                    <el-tag closable @close="delCheckboxUser(item, index)">
+                                        {{
+                                            setCheckboxUserName(item)
+                                        }}
+                                    </el-tag>
                                 </template>
                             </el-scrollbar>
                         </div>
@@ -82,7 +101,10 @@
             </div>
             <template #footer>
                 <div class="dialog-footer">
-                    <el-button hc-btn style="border: 1px solid var(--el-button-border-color);" @click="showModal = false">
+                    <el-button
+                        hc-btn style="border: 1px solid var(--el-button-border-color);"
+                        @click="showModal = false"
+                    >
                         <HcIcon name="close" />
                         <span>取消</span>
                     </el-button>
@@ -95,7 +117,10 @@
         </el-dialog>
 
         <!-- 调整顺序 -->
-        <el-dialog v-model="sequenceModal" title="调整顺序" width="38rem" class="hc-modal-border" draggable destroy-on-close append-to-body>
+        <el-dialog
+            v-model="sequenceModal" title="调整顺序" width="38rem" class="hc-modal-border" draggable
+            destroy-on-close append-to-body
+        >
             <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="warning" :closable="false" />
             <div class="sort-node-body-box list-group header">
                 <div class="list-group-item">
@@ -104,7 +129,10 @@
                     <div class="icon-box">排序</div>
                 </div>
             </div>
-            <Draggable class="sort-node-body-box list-group" ghost-class="ghost" :list="checkboxUserList" item-key="id" @start="sortNodeDrag = true" @end="sortNodeDrag = false">
+            <Draggable
+                class="sort-node-body-box list-group" ghost-class="ghost" :list="checkboxUserList" item-key="id"
+                @start="sortNodeDrag = true" @end="sortNodeDrag = false"
+            >
                 <template #item="{ element, index }">
                     <div class="list-group-item">
                         <div class="index-box">{{ index + 1 }}</div>
@@ -156,19 +184,19 @@ const props = defineProps({
         type: [String, Number],
         default: '',
     },
-    isShowTaskName:{
-        type:Boolean,
-        default:false,
+    isShowTaskName: {
+        type: Boolean,
+        default: false,
     },
-    id:{
+    id: {
         type: [String, Number],
         default: '', //预设流程ID
     },
-    fixedBranchList:{
-        type:Array,
+    fixedBranchList: {
+        type: Array,
         default: () => ([]),
     },
-    
+
 })
 //事件
 const emit = defineEmits(['change'])
@@ -207,27 +235,27 @@ watch(() => [
     isShowTaskName.value = ishow
     id.value = Id
     fixedBranchList.value = list
-    fixedBranchList.value.forEach((ele)=>{
+    fixedBranchList.value.forEach((ele) => {
         let userList = getArrValue(ele.userList)
-       let userIds = arrToKey(userList, 'userId', ',') // '1,2,3'
-       ele.userIds = userIds
+        let userIds = arrToKey(userList, 'userId', ',') // '1,2,3'
+        ele.userIds = userIds
         let users = ''
         for (let index = 0; index < userList.length; index++) {
-                const element = userList[index]
-                 if (users) {
+            const element = userList[index]
+            if (users) {
                 users += `,${element['userName']}-${element['userId']}`
-                    } else {
-                        users = `${element['userName']}-${element['userId']}`
-                    }
-         }
-         ele.users = users
-       delete ele.userList
+            } else {
+                users = `${element['userName']}-${element['userId']}`
+            }
+        }
+        ele.users = users
+        delete ele.userList
     })
     console.log(fixedBranchList.value, 'fixedBranchList.value')
-    if ( fixedBranchList.value.length > 0) {
+    if (fixedBranchList.value.length > 0) {
         curItem.value = fixedBranchList.value[0]
-  
-        chekckTask( curItem.value)
+
+        chekckTask(curItem.value)
     }
 })
 //监听
@@ -236,11 +264,11 @@ watch(() => [
 ], ([list]) => {
 
 
-        let newUser = [], newUserId = [], users = ''
+    let newUser = [], newUserId = [], users = ''
     const dataList = deepClone(checkboxUserList.value)
     UserDataList.value = dataList
     if (dataList.length > 0) {
-     
+
         //封装数据
         dataList.forEach(item => {
             const itemArr = item.split('-')
@@ -253,13 +281,13 @@ watch(() => [
                 newUserId.push(itemArr[1])
             }
         })
-   
-        if ( curItem.value) {
+
+        if (curItem.value) {
             curItem.value.userIds = newUserId.join(',')
             curItem.value.users = users
-        } 
-    
-   
+        }
+
+
     }
 })
 
@@ -273,7 +301,7 @@ onMounted(() => {
 
 //处理用户数据
 const setUserDataList = (users) => {
-  
+
     if (users) {
         const usersArr = users.split(',')
         UserDataList.value = usersArr
@@ -336,27 +364,27 @@ const setCheckboxUserName = (item) => {
 const delCheckboxUser = (item, index) => {
     checkboxUserList.value.splice(index, 1)
     let delId = item.split('-')[1]
-    fixedBranchList.value.forEach((ele)=>{
-      let arr = ele.userIds.split(',')
-      arr.forEach((ele1, index1)=>{
-        if (ele1 === delId) {
-           arr.splice(index1, 1)
-        }
-      })
-      let arr1 = ele.users.split(',')
-      arr1.forEach((ele2, index2)=>{
-        if (ele2.split('-')[1] === delId) {
-           arr1.splice(index2, 1)
+    fixedBranchList.value.forEach((ele) => {
+        let arr = ele.userIds.split(',')
+        arr.forEach((ele1, index1) => {
+            if (ele1 === delId) {
+                arr.splice(index1, 1)
+            }
+        })
+        let arr1 = ele.users.split(',')
+        arr1.forEach((ele2, index2) => {
+            if (ele2.split('-')[1] === delId) {
+                arr1.splice(index2, 1)
+            }
+        })
+        ele.userIds = arr.join(',')
+        ele.users = arr1.join(',')
+    })
+    signUserList.value.forEach((ele) => {
+        if (delId === ele.certificateUserId) {
+            ele.isDisa = false
         }
-      })
-      ele.userIds = arr.join(',')
-      ele.users = arr1.join(',')
     })
-  signUserList.value.forEach((ele)=>{
-    if (delId === ele.certificateUserId) {
-        ele.isDisa = false
-    }
-  })
 }
 
 //排序
@@ -368,21 +396,18 @@ const downSortClick = (index, elemnt) => {
     if (indexs !== data.length) {
         const tmp = data.splice(indexs, 1)
         checkboxUserList.value.splice(index, 0, tmp[0])
-         curItem.value.users = data.join(',')
-         let userIdsarr = []
-         data.forEach((ele)=>{
+        curItem.value.users = data.join(',')
+        let userIdsarr = []
+        data.forEach((ele) => {
             userIdsarr.push(ele.split('-')[1])
-         })
-         curItem.value.userIds = userIdsarr.join(',')
-     
+        })
+        curItem.value.userIds = userIdsarr.join(',')
+
     } else {
         window?.$message?.warning('已经处于置底，无法下移')
     }
 
 
-
-  
- 
 }
 //向上
 const upSortClick = (index, elemnt) => {
@@ -391,28 +416,27 @@ const upSortClick = (index, elemnt) => {
         const tmp = data.splice(index - 1, 1)
         checkboxUserList.value.splice(index, 0, tmp[0])
         curItem.value.users = data.join(',')
-         let userIdsarr = []
-         data.forEach((ele)=>{
+        let userIdsarr = []
+        data.forEach((ele) => {
             userIdsarr.push(ele.split('-')[1])
-         })
-         curItem.value.userIds = userIdsarr.join(',')
-       
+        })
+        curItem.value.userIds = userIdsarr.join(',')
+
     } else {
         window?.$message?.warning('已经处于置顶，无法上移')
     }
 
 
-    
 }
 //
-const saveSort = ()=>{
+const saveSort = () => {
     sequenceModal.value = false
     curItem.value.users = checkboxUserList.value
     let userIdsarr = []
-    checkboxUserList.value.forEach((ele)=>{
-            userIdsarr.push(ele.split('-')[1])
-         })
-         curItem.value.userIds = userIdsarr.join(',')
+    checkboxUserList.value.forEach((ele) => {
+        userIdsarr.push(ele.split('-')[1])
+    })
+    curItem.value.userIds = userIdsarr.join(',')
 }
 
 //确认选择
@@ -428,8 +452,8 @@ const sureSignUserClick = () => {
         return
     } else {
         let newUser = [], newUserId = [], users = ''
-    const dataList = deepClone(checkboxUserList.value)
-    UserDataList.value = dataList
+        const dataList = deepClone(checkboxUserList.value)
+        UserDataList.value = dataList
         if (dataList.length === 0 && !isShowTaskName.value) {
             window.$message.warning('请选择对应的任务人员')
             return
@@ -449,31 +473,27 @@ const sureSignUserClick = () => {
         })
         showModal.value = false
         sureSignUserLoading.value = false
-   
-          
-        
-
-    
-       console.log(fixedBranchList.value, fixedBranchList.value)
-     
-       emit('change', newUser, newUserId, fixedBranchList.value)
-       
+
+
+        console.log(fixedBranchList.value, fixedBranchList.value)
+
+        emit('change', newUser, newUserId, fixedBranchList.value)
+
     }
-  
-         
-    
+
+
 }
 const taskNameinput = ref('')
 
-const addTaskName = ()=>{
+const addTaskName = () => {
     if (taskNameinput.value) {
         fixedBranchList.value.push({
-            name:taskNameinput.value,
-            type:1,
-            userIds:'',
+            name: taskNameinput.value,
+            type: 1,
+            userIds: '',
         })
         taskNameinput.value = ''
-     
+
     } else {
         window.$message.warning('请输入任务名称')
     }
@@ -481,29 +501,26 @@ const addTaskName = ()=>{
     curItem.value = null
 }
 
-const delTask = async (item, index)=>{
+const delTask = async (item, index) => {
     console.log(index, 'index')
-
-  fixedBranchList.value.splice(index, 1)
-  checkboxUserList.value = []
+    fixedBranchList.value.splice(index, 1)
+    checkboxUserList.value = []
 }
 const curItem = ref(null)
 const selectUserIds = ref([])
-const chekckTask = async (item)=>{
+const chekckTask = async (item) => {
     await queryAllRoleList()
     curItem.value = item
     setUserDataList(item.users)
     //设置已选择过的用户置灰
-     selectUserIds.value = arrToKey(fixedBranchList.value, 'userIds', ',').split(',')
- signUserList.value.forEach((ele)=>{
-    selectUserIds.value.forEach((ele1)=>{
-        if (ele.certificateUserId === ele1) {
+    /*selectUserIds.value = arrToKey(fixedBranchList.value, 'userIds', ',').split(',')
+    signUserList.value.forEach((ele) => {
+        selectUserIds.value.forEach((ele1) => {
+            if (ele.certificateUserId === ele1) {
                 ele.isDisa = true
-        }
-    })
- })
-
-
+            }
+        })
+    })*/
 }
 </script>
 
@@ -523,7 +540,7 @@ const chekckTask = async (item)=>{
 .hc-tasks-user-modal-content-box {
     .checkbox-li .el-checkbox {
         width: 100%;
-     
+
         .el-checkbox__input {
             position: absolute;
             right: 0;
@@ -548,7 +565,7 @@ const chekckTask = async (item)=>{
             margin-right: 10px;
             margin-top: 12px;
         }
-        .el-checkbox-group{
+        .el-checkbox-group {
             padding-right: 20px;
         }
     }

src/views/tasks/flow.vue

@@ -25,7 +25,7 @@
                 <el-form-item label="流程名称" prop="fixedName">
                     <el-input v-model="flowFormData.fixedName" placeholder="请输入流程名称" />
                 </el-form-item>
-                <el-form-item label="任务名称" prop="fixedBranchList">
+                <el-form-item label="选择任务人" prop="fixedBranchList">
                     <hc-tasks-user :id="changeId" :contract-id="contractId" :project-id="projectId" :users="linkUserJoinString" ui="w-full" :is-show-task-name="true" :fixed-branch-list="flowFormData.fixedBranchList" @change="tasksUserChange" />
                 </el-form-item>
             </el-form>