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

<template>
    <hc-dialog v-model="isShow" ui="hc-report-tasks-user-modal" widths="960px" title="选择任务人" @close="modalClose">
        <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 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>
            <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>
            </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>
            </div>
        </div>
        <template #footer>
            <el-button @click="modalClose">取消</el-button>
            <el-button type="primary" :loading="confirmLoading" @click="confirmClick">确定</el-button>
        </template>
    </hc-dialog>
    <!-- 任务人排序 -->
    <HcSortModal v-model="isUserSort" :data="userSortData" @finish="userSortFinish" />
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import { pinyin } from 'pinyin-pro'
import { deepClone, getArrValue, getObjValue, isNullES } from 'js-fast-way'
import HcLoadSvg from '~src/assets/view/load.svg'
import HcSortModal from './sort-modal.vue'
import mainApi from '~api/tasks/flow'

const props = defineProps({
    data: {
        type: Array,
        default: () => ([]),
    },
    datas: {
        type: Object,
        default: () => ({}),
    },
    fixedFlowLinkTypeVal: {
        type: [String, Number],
        default: '', //流程审批1，平行审批2
    },
})

const emit = defineEmits(['finish', 'close'])
const fixedFlowLinkTypeVal = ref(props.fixedFlowLinkTypeVal)
//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听参数
const dataInfo = ref(props.datas)
watch(() => props.datas, (data) => {
    dataInfo.value = getObjValue(data)
}, { deep: true, immediate: true })
watch(() => props.fixedFlowLinkTypeVal, (typeVal) => {
    fixedFlowLinkTypeVal.value = typeVal
}, { deep: true, immediate: true })
//监听数据
const userData = ref([])
watch(() => props.data, (data) => {
    const res = getArrValue(data)
    userData.value = deepClone(res)
}, { deep: true, immediate: true })

watch(isShow, (val) => {
    if (val) setInitData()
})

//初始化
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)
const signUserList = ref([])
const getAllRoleList = async () => {
    signUserLoading.value = true
    const { contractId } = getObjValue(dataInfo.value)
    const { data } = await mainApi.queryAllRoleList({ contractId })
    signUserList.value = getArrValue(data)
    signUserLoading.value = false
}

//角色被点击
const roleItem = ref({})
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)
}

//岗位搜索
const positionKey = ref('')
const positionList = ref([])
const positionSearch = () => {
    const key = positionKey.value
    const list = getArrValue(roleItem.value?.childRoleList)
    const arr = deepClone(list)
    if (isNullES(key)) {
        positionList.value = arr
        return
    }
    positionList.value = arr.filter(({ roleName }) => roleName.toLowerCase().includes(key.toLowerCase()))
}

//岗位被点击
const positionItem = ref({})
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)
}

//设置任务人数据
const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i))
const setSignPfxUser = (data) => {
    const list = deepClone(data)
    const arr = getArrValue(list)
    arr.forEach(item => {
        item.letter = getFirstLetter(item.certificateUserName)
    })
    signPfxFileData.value = deepClone(arr)
    signPfxFileList.value = alphabet.map(letter => ({
        name: letter,
        data: arr.filter(item => item.letter === letter),
    }))
}

//中文转姓氏拼音
const getFirstLetter = (name) => {
    return pinyin(name.charAt(0), { pattern: 'first', toneType: 'none', surname: 'head' }).charAt(0).toUpperCase()
}

//搜索任务人
const signPfxFileData = ref([])
const signUserKey = ref('')
const signPfxFileList = ref([])
const signUserSearch = () => {
    const key = signUserKey.value
    const arr = deepClone(signPfxFileData.value)
    if (isNullES(key)) {
        setSignPfxUser(arr)
        return
    }
    // 判断是否为全英文
    const isAllEnglish = /^[A-Za-z]+$/.test(key)
    const letterName = getFirstLetter(key)
    //搜索筛选
    const filteredData = arr.filter(({ certificateUserName, letter }) => {
        if (isAllEnglish) {
            // 如果是英文，判断首字母是否一致
            return letter.toLowerCase().includes(letterName.toLowerCase())
        } else {
            // 如果是中文或其他字符，进行精准搜索
            return certificateUserName.toLowerCase().includes(key.toLowerCase())
        }
    })
    signPfxFileList.value = alphabet.map(letter => ({
        name: letter,
        data: filteredData.filter(item => item.letter === letter),
    }))
}

//滚动到相关位置
const scrollRef = ref(null)
const alphabetClick = (key) => {
    const ids = `hc-sign-pfx-file-item-${key}`
    const dom = document.getElementById(ids)
    if (isNullES(dom)) return
    scrollRef.value?.setScrollTop(dom.offsetTop - 20)
}

//任务人被点击
const signUserItemClick = ({ certificateUserId, certificateUserName }) => {
    userData.value.push({ userId: certificateUserId, userName: certificateUserName })
}

//删除选择的任务人
const fixedItemUserListDel = (index) => {
    userData.value.splice(index, 1)
}

//任务人排序
const isUserSort = ref(false)
const userSortData = ref([])
const fixedUserSortClick = () => {
    const arr = deepClone(userData.value)
    if (arr.length <= 0) {
        window.$message.warning('请先添加任务人')
        return
    }
    userSortData.value = arr
    isUserSort.value = true
}

//任务人排序完成
const userSortFinish = (data) => {
    userData.value = getArrValue(data)
}

//确定选择
const confirmLoading = ref(false)
const confirmClick = async () => {
    // const list = deepClone(userData.value)
    const list = deepClone(userData.value).filter((user, index, self) =>
        index === self.findIndex((u) => u.userId === user.userId),
    )
    if (list.length <= 0) {
        window.$message.warning('请先添加任务人')
        return
    }
    emit('finish', list)
    modalClose()
}

//关闭窗口
const modalClose = () => {
    isShow.value = false
    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>