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

<template>
    <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-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" />
                    </template>
                    <div v-if="fixedBranchList.length <= 0" class="tasks-placeholder">点击这里选择任务</div>
                </template>
                <template v-else>
                    <template v-for="(item, index) in UserDataList" :key="index">
                        <el-tag>{{ setCheckboxUserName(item) }}</el-tag>
                        <HcIcon v-if="(UserDataList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
                    </template>
                    <div v-if="UserDataList.length <= 0" class="tasks-placeholder">点击这里选择任务人</div>
                </template>
            </div>
        </div>

        <!-- 选择任务人 -->
        <el-dialog v-model="showModal" title="选择任务人" width="62rem" class="hc-modal-border hc-modal-nop" draggable destroy-on-close append-to-body>
            <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-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)">
                                    {{ 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 name="close" class="ml-2" @click="delTask(item, index)" />
                                </el-button>
                            </el-tooltip>
                        </div>
                    </div>
                </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" />
                    </el-scrollbar>
                </div>
                <div class="user-box">
                    <div class="y-user-list-box">
                        <div class="title-box">
                            <div class="title">可选择</div>
                        </div>
                        <div class="user-list">
                            <el-scrollbar>
                                <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">
                                                <div class="item-user-name">{{ item.certificateUserName }}</div>
                                            </el-checkbox>
                                        </div>
                                    </template>
                                </el-checkbox-group>
                            </el-scrollbar>
                        </div>
                    </div>
                    <div class="s-user-list-box">
                        <div class="title-box">
                            <div class="title">已选择({{ checkboxUserList.length }})</div>
                            <el-button plain size="small" @click="sequenceModal = true">调整顺序</el-button>
                        </div>
                        <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>
                                </template>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button hc-btn style="border: 1px solid var(--el-button-border-color);" @click="showModal = false">
                        <HcIcon name="close" />
                        <span>取消</span>
                    </el-button>
                    <el-button hc-btn type="primary" :loading="sureSignUserLoading" @click="sureSignUserClick">
                        <HcIcon name="check" />
                        <span>确定</span>
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 调整顺序 -->
        <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">
                    <div class="index-box">序号</div>
                    <div class="title-box">任务人</div>
                    <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">
                <template #item="{ element, index }">
                    <div class="list-group-item">
                        <div class="index-box">{{ index + 1 }}</div>
                        <div class="title-box">{{ setCheckboxUserName(element) }}</div>
                        <div class="icon-box">
                            <span class="icon" @click="downSortClick(index, element)">
                                <HcIcon name="arrow-down" ui="text-lg" />
                            </span>
                            <span class="icon" @click="upSortClick(index, element)">
                                <HcIcon name="arrow-up" ui="text-lg" />
                            </span>
                        </div>
                    </div>
                </template>
            </Draggable>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" @click="sequenceModal = false">取消</el-button>
                    <el-button type="primary" hc-btn @click="sequenceModal = false">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import tasksFlowApi from '~api/tasks/flow'
import { arrIndex, arrToKey, deepClone, getArrValue } from 'js-fast-way'
import Draggable from 'vuedraggable'
import { hasDuplicates } from '~uti/tools'

//参数
const props = defineProps({
    ui: {
        type: String,
        default: '',
    },
    //选中的用户数组
    users: {
        type: String,
        default: '',
    },
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
    isShowTaskName:{
        type:Boolean,
        default:false,
    },
    id:{
        type: [String, Number],
        default: '', //预设流程ID
    },
    fixedBranchList:{
        type:Array,
        default: () => ([]),
    },
    
})
//事件
const emit = defineEmits(['change'])
const isShowTaskName = ref(props.isShowTaskName)
//变量
const showModal = ref(false)
const sequenceModal = ref(false)
const checkboxUserList = ref([])
const UserDataList = ref([])
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const id = ref(props.id)
const fixedBranchList = ref(props.fixedBranchList)

//树数据
const ElTreeProps = { children: 'childRoleList', label: 'roleName' }
const ElTreeData = ref([{
    roleName: '全部人员',
    roleId: 0,
    childRoleList: [],
    signPfxFileList: [],
}])

//监听
watch(() => [
    props.users,
    props.projectId,
    props.contractId,
    props.isShowTaskName,
    props.id,
    props.fixedBranchList,
], ([users, pid, cid, ishow, Id, list]) => {
    projectId.value = pid
    contractId.value = cid
    setUserDataList(users)
    isShowTaskName.value = ishow
    id.value = Id
    fixedBranchList.value = list
    fixedBranchList.value.forEach((ele)=>{
        let userList = getArrValue(ele.userList)
       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) {
                users += `,${element['userName']}-${element['userId']}`
                    } else {
                        users = `${element['userName']}-${element['userId']}`
                    }
         }
         ele.users = users
       delete ele.userList
    })
    console.log(fixedBranchList.value, 'fixedBranchList.value')
    if ( fixedBranchList.value.length > 0) {
        curItem.value = fixedBranchList.value[0]
  
        chekckTask( curItem.value)
    }
})
//监听
watch(() => [
    checkboxUserList.value,
], ([list]) => {

    console.log(list, 'list')
        let newUser = [], newUserId = [], users = ''
    const dataList = deepClone(checkboxUserList.value)
    UserDataList.value = dataList
    if (dataList.length > 0) {
     
        //封装数据
        dataList.forEach(item => {
            const itemArr = item.split('-')
            if (itemArr.length > 0 && itemArr[0]) {
                users = users ? `${users},${item}` : item
                newUser.push({
                    userId: itemArr[1],
                    userName: itemArr[0],
                })
                newUserId.push(itemArr[1])
            }
        })
        console.log(users, 'users')
        if ( curItem.value) {
            curItem.value.userIds = newUserId.join(',')
            curItem.value.users = users
        } 
    
   
    }
})
// watch(() => [
// fixedBranchList.value,
// ], ([list]) => {
//     fixedBranchList.value = list
//     const userIdList = arrToKey(fixedBranchList.value, 'userIds', ',')
//     const { isWarn, element } = hasDuplicates(userIdList.split(','))
//     if (isWarn) {
//         checkboxUserList.value.forEach((ele, index)=>{
//             if (ele.split('-')[1] === element) {
//                 window.$message.warning('不能选择重复的任务人员' + ele.split('-')[0])
//                 checkboxUserList.value.splice(index, 1)
//             }
//         })
//     }
    
    
// }, {
//     deep:true,
// },
// )

//渲染完成
onMounted(() => {
    setUserDataList(props.users)
    queryAllRoleList()

})

//处理用户数据
const setUserDataList = (users) => {
    console.log(users, 'users')
    if (users) {
        const usersArr = users.split(',')
        UserDataList.value = usersArr
        checkboxUserList.value = usersArr
    } else {
        UserDataList.value = []
        checkboxUserList.value = []
    }
}

//展开弹窗
const showModalClick = () => {
    showModal.value = true
}

//获取系统所有角色划分
const signUserList = ref([])
const queryAllRoleList = async () => {
    const { error, code, data } = await tasksFlowApi.queryAllRoleList({
        contractId: contractId.value,
    })
    //处理数据
    if (!error && code === 200) {
        let signList = [], dataArr = getArrValue(data)
        ElTreeData.value[0].childRoleList = dataArr
        if (dataArr.length > 0) {
            dataArr.forEach(item => {
                signList = signList.concat(item.signPfxFileList)
            })
        }
        ElTreeData.value[0].signPfxFileList = signList
        signUserList.value = signList
    } else {
        signUserList.value = []
        ElTreeData.value[0].childRoleList = []
        ElTreeData.value[0].signPfxFileList = []
    }
}

//树被点击
const ElTreeNodeClick = (data) => {
    signUserList.value = getArrValue(data?.signPfxFileList)
}

//处理已选择的用户问题
const setCheckboxUserName = (item) => {
    if (item) {
        const itemArr = item.split('-')
        if (itemArr.length > 0 && itemArr[0]) {
            return itemArr[0]
        } else {
            return ''
        }
    } else {
        return ''
    }
}

//删除已选择的用户
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)
        }
      })
      ele.userIds = arr.join(',')
      ele.users = arr1.join(',')
    })
    console.log( fixedBranchList.value, '    fixedBranchList.value')
}

//排序
const sortNodeDrag = ref(false)
//向下
const downSortClick = (index, elemnt) => {
    const indexs = index + 1
    const data = checkboxUserList.value
    if (indexs !== data.length) {
        const tmp = data.splice(indexs, 1)
        checkboxUserList.value.splice(index, 0, tmp[0])
    } else {
        window?.$message?.warning('已经处于置底，无法下移')
    }

   

    let curUser = curItem.value.users.split(',')
    let curUserIds = curItem.value.userIds.split(',')
    let userIndex = arrIndex(curUser, elemnt) // 1
    let userIdsIndex = arrIndex(curUserIds, elemnt.split('-')[1]) // 1
    const userIndexs = userIndex + 1
    if (userIndexs !== curUser.length) {
        const tmp = curUser.splice(userIndexs, 1)
        curUser.splice(userIndex, 0, tmp[0])
        curItem.value.users = curUser.join(',')
    } 
    const userIdsIndexs = userIdsIndex + 1
    if (userIdsIndexs !== curUserIds.length) {
        const tmp = curUserIds.splice(userIdsIndexs, 1)
        curUserIds.splice(userIdsIndex, 0, tmp[0])
        curItem.value.userIds = curUserIds.join(',')
       
    } 
   
}
//向上
const upSortClick = (index, elemnt) => {
    const data = checkboxUserList.value || []
    if (index !== 0) {
        const tmp = data.splice(index - 1, 1)
        checkboxUserList.value.splice(index, 0, tmp[0])
    } else {
        window?.$message?.warning('已经处于置顶，无法上移')
    }

    let curUser = curItem.value.users.split(',')
    let curUserIds = curItem.value.userIds.split(',')
    let userIndex = arrIndex(curUser, elemnt) // 1
    let userIdsIndex = arrIndex(curUserIds, elemnt.split('-')[1]) // 1
    const userIndexs = userIndex - 1
    if (userIndexs !== curUser.length) {
        const tmp = curUser.splice(userIndexs, 1)
        curUser.splice(userIndex, 0, tmp[0])
        curItem.value.users = curUser.join(',')
    } 
    const userIdsIndexs = userIdsIndex - 1
    if (userIdsIndexs !== curUserIds.length) {
        const tmp = curUserIds.splice(userIdsIndexs, 1)
        curUserIds.splice(userIdsIndex, 0, tmp[0])
        curItem.value.userIds = curUserIds.join(',')
       
    } 

    
}

//确认选择
const sureSignUserLoading = ref(false)
const sureSignUserClick = () => {
    console.log(fixedBranchList.value, 'fixedBranchList.value3333333')
    let isEmptyuserIds = fixedBranchList.value.some(obj => obj.userIds === '')
    if (isEmptyuserIds && isShowTaskName) {
        window.$message.warning('请选择对应的任务人员和名称')
        return
    } else if (fixedBranchList.value.length === 0 && isShowTaskName.value) {
        window.$message.warning('请选择对应的任务人员和任务名称')
        return
    } else {
        let newUser = [], newUserId = [], users = ''
    const dataList = deepClone(checkboxUserList.value)
    UserDataList.value = dataList
        if (dataList.length === 0 && !isShowTaskName.value) {
            window.$message.warning('请选择对应的任务人员')
            return
        }
        sureSignUserLoading.value = true
        //封装数据
        dataList.forEach(item => {
            const itemArr = item.split('-')
            if (itemArr.length > 0 && itemArr[0]) {
                users = users ? `${users},${item}` : item
                newUser.push({
                    userId: itemArr[1],
                    userName: itemArr[0],
                })
                newUserId.push(itemArr[1])
            }
        })
        showModal.value = false
        sureSignUserLoading.value = false
   
          
        

    
       console.log(fixedBranchList.value, fixedBranchList.value)
     
       emit('change', newUser, newUserId, fixedBranchList.value)
       
    }
  
         
    
}
const taskNameinput = ref('')

const addTaskName = ()=>{
    if (taskNameinput.value) {
        fixedBranchList.value.push({
            name:taskNameinput.value,
            type:1,
            userIds:'',
        })
        taskNameinput.value = ''
     
    } else {
        window.$message.warning('请输入任务名称')
    }
    checkboxUserList.value = []
    curItem.value = null
}

const delTask = async (item, index)=>{
    console.log(index, 'index')

  fixedBranchList.value.splice(index, 1)
  checkboxUserList.value = []
}
const curItem = ref(null)
const selectUserIds = ref([])
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) {
                ele.isDisa = true
        }
    })
 })


}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>

<style lang="scss">
.hc-tasks-user .tasks-user-box .tag-user-list {
    .el-tag {
        --el-icon-size: 14px;
        padding: 0 10px;
        height: 26px;
        margin: 4px 0;
    }
}
.hc-tasks-user-modal-content-box {
    .checkbox-li .el-checkbox {
        width: 100%;
        .el-checkbox__input {
            position: absolute;
            right: 0;
            .el-checkbox__inner {
                width: 18px;
                height: 18px;
                &:after {
                    height: 9px;
                    left: 6px;
                    top: 2px;
                }
            }
        }
        .el-checkbox__label {
            flex: 1;
            padding-left: 0;
            padding-right: 20px;
        }
    }
    .user-list {
        .el-tag {
            margin-right: 10px;
            margin-top: 12px;
        }
    }
}
</style>