更新依赖，文件收集上报修改

package.json

@@ -33,6 +33,7 @@
         "js-web-screen-shot": "^1.9.9",
         "nprogress": "^0.2.0",
         "pinia": "^2.2.4",
+        "pinyin-pro": "^3.26.0",
         "remixicon": "^4.3.0",
         "sortablejs": "^1.15.3",
         "split.js": "^1.6.5",

src/api/modules/tasks/flow.js

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

src/views/file/collection.vue

@@ -469,6 +469,10 @@ onMounted(() => {
         treeLoading.value = true
         setTableColumns()
     }
+    if (tableRef.value) {
+    const scrollWidth = tableRef.value.scrollWidth
+    // 使用scrollWidth进行后续操作
+  }
 })
 
 

src/views/file/components/HcReport.vue

@@ -15,7 +15,7 @@
                 </el-select>
             </el-form-item>
             <el-form-item v-if="diyProcessUser" label="任务人" prop="userIds">
-                <HcTasksUserVue class="w-full" @change="diyProcessUserChange" />
+                <HcTasksUserVue class="w-full" :data="tasksUserData" :user-data="userData" @finsh="diyProcessUserChange" />
             </el-form-item>
             <el-form-item v-else label="任务人">
                 <div class="form-item-div">{{ linkUserJoinString }}</div>
@@ -162,11 +162,29 @@ const handleProcessValue = (val) => {
 }
 
 //自定义流程任务人选择完毕
-const diyProcessUserChange = (user) => {
-    let userArr = user
-    formModel.value.userIds = arrToKey(userArr, 'userId', ',')
+const diyProcessUserChange = async (user) => {
+    checkUser(user)
 }
 
+const checkUser = async (user)=>{
+    if (user.length < 1) return false
+    const { error, code, data, msg } = await tasksFlowApi.checkTaskUserCertificateInfo({
+        userIds:user,
+    })
+    if (!error && code === 200) {
+        formModel.value.userIds = user
+    } else {
+        formModel.value.userIds = ''
+        userData.value = []
+    }
+}
+
+const tasksUserData = ref({
+    projectId: projectId.value,
+    contractId: contractId.value,
+})
+const userData = ref([])
+
 //取消
 const cancelReportClick = () => {
     linkUserJoinString.value = ''

src/views/file/components/hc-tasks-user/index copy.vue

@@ -0,0 +1,340 @@
+<template>
+    <div class="hc-tasks-user">
+        <div class="tasks-user-box">
+            <div class="tag-user-list" @click="showModalClick">
+                <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>
+            </div>
+        </div>
+
+        <!-- 选择任务人 -->
+        <el-dialog v-model="showModal" class="hc-modal-border hc-modal-nop" destroy-on-close draggable title="选择任务人" width="62rem">
+            <div class="hc-tasks-user-modal-content-box">
+                <div class="tree-box">
+                    <el-scrollbar>
+                        <ElTree
+                            v-if="isShowTree" :data="ElTreeData" :default-expanded-keys="[0]" :props="ElTreeProps"
+                            accordion
+                            class="hc-tree-node-box" highlight-current node-key="roleId" @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, index) in signUserList" :key="index">
+                                        <div class="user-item checkbox-li">
+                                            <el-checkbox :value="`${item.certificateUserName}-${item.certificateUserId}`">
+                                                <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(index)">{{ setCheckboxUserName(item) }}</el-tag>
+                                </template>
+                            </el-scrollbar>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button size="large" @click="showModal = false">
+                        <HcIcon name="close" />
+                        <span>取消</span>
+                    </el-button>
+                    <el-button :loading="sureSignUserLoading" hc-btn type="primary" @click="sureSignUserClick">
+                        <HcIcon name="check" />
+                        <span>确定</span>
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <!-- 调整顺序 -->
+        <el-dialog v-model="sequenceModal" append-to-body class="hc-modal-border" destroy-on-close draggable title="调整顺序" width="38rem">
+            <el-alert :closable="false" title="可拖动排序，也可在后面点击图标，切换排序" type="warning" />
+            <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 :list="checkboxUserList" class="sort-node-body-box list-group" ghost-class="ghost" item-key="id" @end="sortNodeDrag = false" @start="sortNodeDrag = true">
+                <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)">
+                                <HcIcon name="arrow-down" ui="text-lg" />
+                            </span>
+                            <span class="icon" @click="upSortClick(index)">
+                                <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 hc-btn type="primary" @click="sequenceModal = false">确认</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import tasksFlowApi from '~api/tasks/flow'
+import { deepClone, getArrValue } from 'js-fast-way'
+import { useAppStore } from '~src/store'
+import Draggable from 'vuedraggable'
+
+//参数
+const props = defineProps({
+    users: {
+        type: String,
+        default: '',
+    },
+})
+
+//事件
+const emit = defineEmits(['change'])
+
+//初始变量
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.getContractId)
+
+
+//变量
+const showModal = ref(false)
+const sequenceModal = ref(false)
+const checkboxUserList = ref([])
+const UserDataList = ref([])
+
+//树数据
+const ElTreeProps = { children: 'childRoleList', label: 'roleName' }
+const ElTreeData = ref([{
+    roleName: '全部人员',
+    roleId: 0,
+    childRoleList: [],
+    signPfxFileList: [],
+}])
+const isShowTree = ref(true)
+//监听
+watch(() => [
+    props.users,
+    props.projectId,
+    props.contractId,
+], ([users, pid, cid]) => {
+    projectId.value = pid
+    contractId.value = cid
+    setUserDataList(users)
+})
+
+//渲染完成
+onMounted(() => {
+    setUserDataList(props.users)
+    queryAllRoleList()
+})
+
+//处理用户数据
+const setUserDataList = (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 () => {
+    isShowTree.value = false
+    const { error, code, data } = await tasksFlowApi.queryAllRoleList({
+        contractId: contractId.value,
+    })
+    isShowTree.value = true
+    //处理数据
+    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 = (index) => {
+    checkboxUserList.value.splice(index, 1)
+}
+
+//排序
+const sortNodeDrag = ref(false)
+//向下
+const downSortClick = (index) => {
+    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('已经处于置底，无法下移')
+    }
+}
+//向上
+const upSortClick = (index) => {
+    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('已经处于置顶，无法上移')
+    }
+}
+
+//确认选择
+const sureSignUserLoading = ref(false)
+const sureSignUserClick = async () => {
+    let flowJson = {}, newUser = [], newUserId = [], users = ''
+    const dataList = deepClone(checkboxUserList.value)
+    UserDataList.value = dataList
+    if (dataList.length <= 0) {
+        window.$message?.warning('请先选择任务人员，或点击取消')
+        return false
+    }
+    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])
+        }
+    })
+    //效验人员
+
+
+    const { error, code, data, msg } = await tasksFlowApi.checkTaskUserCertificateInfo({
+        userIds: newUserId.join(','),
+    })
+    if (!error && code === 200) {
+        emit('change', newUser, newUserId, users)
+        //关闭弹窗
+        showModal.value = false
+    } else {
+        window.$message?.error(msg || '操作失败')
+    }
+
+    sureSignUserLoading.value = false
+
+}
+</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>

src/views/file/components/hc-tasks-user/index.scss

@@ -0,0 +1,407 @@
+.hc-report-tasks-user-box {
+    position: relative;
+    padding: 0 12px;
+    cursor: pointer;
+    min-height: 40px;
+    border: 1px solid #e0e0e6;
+    border-radius: 4px;
+    .tag-user-list {
+        position: relative;
+        display: flex;
+        align-items: center;
+        flex-flow: row wrap;
+        min-height: inherit;
+        max-height: 100px;
+        overflow: auto;
+        .tasks-placeholder {
+            color: #a9abb2;
+            font-size: 14px;
+        }
+        .arrow-icon-tag {
+            position: relative;
+            color: #a9abb2;
+            font-size: 18px;
+            margin: 0 8px;
+        }
+    }
+}
+
+//选择任务人弹窗
+.el-overlay-dialog .el-dialog.hc-report-tasks-user-modal {
+    height: 650px;
+
+    .el-dialog__body .hc-new-main-body_content {
+        padding: 0;
+        height: 100%;
+        display: flex;
+    }
+    .card-div-no, .card-empty-no {
+        position: relative;
+        border-left: 1px solid;
+        border-color: #EEEEEE;
+        background: #e8e8e8;
+    }
+    .card-div-no .hc-empty-box .hc-empty-body .hc-empty-title,
+    .card-empty-no .hc-empty-box .hc-empty-body .hc-empty-title {
+        color: #777777;
+    }
+    .card-empty-no {
+        height: 100%;
+        border-left: 0;
+    }
+    .card-empty-no .hc-empty-box .hc-empty-body .hc-empty-assets {
+        display: none;
+    }
+    .card-div-2 {
+        position: relative;
+        border-left: 1px solid;
+        border-color: #EEEEEE;
+    }
+    .card-div-3 {
+        position: relative;
+        border-left: 1px solid;
+        border-color: #EEEEEE;
+    }
+    .card-div-4 {
+        position: relative;
+        border-left: 1px solid;
+        border-color: #EEEEEE;
+    }
+    .card-div-5 {
+        position: relative;
+        border-left: 1px solid;
+        border-right: 1px solid;
+        border-color: #EEEEEE;
+    }
+    //卡片
+    .el-card.hc-card-box.hc-new-card-box {
+        box-shadow: none;
+        --el-card-border-radius: 0;
+        --el-card-bg-color: transparent;
+        .el-scrollbar__bar.is-vertical {
+            right: -8px;
+        }
+    }
+    //角色类型
+    .hc-tasks-user-role-item {
+        position: relative;
+        color: #1F222A;
+        background: white;
+        cursor: pointer;
+        padding: 6px 10px;
+        border-radius: 3px;
+        transition: all .2s;
+        display: flex;
+        align-items: center;
+        i {
+            font-size: 18px;
+            display: inline-block;
+        }
+        &:hover {
+            color: #3A85E9;
+            background: #f2f3f5;
+        }
+        &.cur {
+            color: #3A85E9;
+            background: #EDF3FF;
+        }
+    }
+
+    //人员列表
+    .hc-tasks-user-sign-pfx-box {
+        position: relative;
+        padding-right: 8px;
+        height: 100%;
+        .el-scrollbar__bar.is-vertical {
+            right: 2px;
+        }
+    }
+    .hc-sign-pfx-file-item {
+        position: relative;
+        // background: #f7f7f7;
+        // color: #FFFFFF; // 修改为白色字体
+        .hc-tasks-user-letter {
+            position: relative;
+            font-weight: bold;
+            padding: 6px 6px;
+            border-bottom: 1px solid #eee;
+        }
+        .hc-tasks-user-item {
+            position: relative;
+            color: #1F222A;
+            background: rgba(255, 255, 255, 0.1); // 半
+            cursor: pointer;
+            padding: 6px 6px;
+            border-radius: 3px;
+            transition: all .2s;
+            display: flex;
+            align-items: center;
+            i {
+                font-size: 16px;
+                display: inline-block;
+            }
+            &:hover {
+                color: #3A85E9;
+                background: #f2f3f5;
+            }
+            &.cur {
+                color: #3A85E9;
+                background: #EDF3FF;
+            }
+        }
+    }
+    //字母索引
+    .hc-tasks-user-letter-index {
+        position: absolute;
+        right: -8px;
+        top: 0;
+        bottom: 0;
+        width: 13px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        color: #5f5e5e;
+        .item {
+            position: relative;
+            flex: 13px;
+            width: 13px;
+            height: 13px;
+            font-size: 12px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            transition: all .2s;
+            &:hover {
+                color: #0a84ff;
+            }
+        }
+    }
+    //已选择列表
+    .hc-tasks-user-cur-box {
+        position: relative;
+        .hc-tasks-user-item {
+            position: relative;
+            margin-top: 18px;
+        }
+        .hc-tasks-user-item:first-child {
+            margin-top: 0;
+        }
+        &.type-1 {
+            .hc-tasks-user-item + .hc-tasks-user-item {
+                &::before{
+                    content: "";
+                    position: absolute;
+                    background: #BBBBBB;
+                    top: -18px;
+                    height: 18px;
+                    width: 1px;
+                    left: 18px;
+                }
+            }
+        }
+        .el-tag {
+            --el-tag-bg-color: #D7E6FB;
+            --el-tag-border-color: #AECCEE;
+            --el-tag-hover-color: var(--el-color-primary);
+            .el-tag__content {
+                display: flex;
+                align-items: center;
+                i {
+                    font-size: 14px;
+                    display: inline-block;
+                }
+            }
+        }
+    }
+}
+html.dark{
+    .el-overlay-dialog .el-dialog.hc-report-tasks-user-modal {
+        height: 650px;
+    
+        .el-dialog__body .hc-new-main-body_content {
+            padding: 0;
+            height: 100%;
+            display: flex;
+        }
+        .card-div-no, .card-empty-no {
+            position: relative;
+            border-left: 1px solid;
+            border-color: #EEEEEE;
+            background: #e8e8e8;
+        }
+        .card-div-no .hc-empty-box .hc-empty-body .hc-empty-title,
+        .card-empty-no .hc-empty-box .hc-empty-body .hc-empty-title {
+            color: #777777;
+        }
+        .card-empty-no {
+            height: 100%;
+            border-left: 0;
+        }
+        .card-empty-no .hc-empty-box .hc-empty-body .hc-empty-assets {
+            display: none;
+        }
+        .card-div-2 {
+            position: relative;
+            border-left: 1px solid;
+            border-color: #EEEEEE;
+        }
+        .card-div-3 {
+            position: relative;
+            border-left: 1px solid;
+            border-color: #EEEEEE;
+        }
+        .card-div-4 {
+            position: relative;
+            border-left: 1px solid;
+            border-color: #EEEEEE;
+        }
+        .card-div-5 {
+            position: relative;
+            border-left: 1px solid;
+            border-right: 1px solid;
+            border-color: #EEEEEE;
+        }
+        //卡片
+        .el-card.hc-card-box.hc-new-card-box {
+            box-shadow: none;
+            --el-card-border-radius: 0;
+            --el-card-bg-color: transparent;
+            .el-scrollbar__bar.is-vertical {
+                right: -8px;
+            }
+        }
+        //角色类型
+        .hc-tasks-user-role-item {
+            position: relative;
+            color: #FFFFFF; // 修改为白色字体
+            background: rgba(255, 255, 255, 0.1); // 半
+            cursor: pointer;
+            padding: 6px 10px;
+            border-radius: 3px;
+            transition: all .2s;
+            display: flex;
+            align-items: center;
+            i {
+                font-size: 18px;
+                display: inline-block;
+            }
+            &:hover {
+                color: #3A85E9;
+                background: #f2f3f5;
+            }
+            &.cur {
+                color: #3A85E9;
+                background: #EDF3FF;
+            }
+        }
+    
+        //人员列表
+        .hc-tasks-user-sign-pfx-box {
+            position: relative;
+            padding-right: 8px;
+            height: 100%;
+            .el-scrollbar__bar.is-vertical {
+                right: 2px;
+            }
+        }
+        .hc-sign-pfx-file-item {
+            color: #FFFFFF; // 修改为白色字体
+            position: relative;
+            background: rgba(255, 255, 255, 0.1); // 半透
+            .hc-tasks-user-letter {
+                position: relative;
+                font-weight: bold;
+                padding: 6px 6px;
+                border-bottom: 1px solid #eee;
+            }
+            .hc-tasks-user-item {
+                position: relative;
+                color: #FFFFFF; // 修改为白色字体
+                background: rgba(255, 255, 255, 0.1); // 半透
+                cursor: pointer;
+                padding: 6px 6px;
+                border-radius: 3px;
+                transition: all .2s;
+                display: flex;
+                align-items: center;
+                i {
+                    font-size: 16px;
+                    display: inline-block;
+                }
+                &:hover {
+                    color: #3A85E9;
+                    background: #f2f3f5;
+                }
+                &.cur {
+                    color: #3A85E9;
+                    background: #EDF3FF;
+                }
+            }
+        }
+        //字母索引
+        .hc-tasks-user-letter-index {
+            position: absolute;
+            right: -8px;
+            top: 0;
+            bottom: 0;
+            width: 13px;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            color: #5f5e5e;
+            .item {
+                position: relative;
+                flex: 13px;
+                width: 13px;
+                height: 13px;
+                font-size: 12px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                transition: all .2s;
+                &:hover {
+                    color: #0a84ff;
+                }
+            }
+        }
+        //已选择列表
+        .hc-tasks-user-cur-box {
+            position: relative;
+            .hc-tasks-user-item {
+                position: relative;
+                margin-top: 18px;
+            }
+            .hc-tasks-user-item:first-child {
+                margin-top: 0;
+            }
+            &.type-1 {
+                .hc-tasks-user-item + .hc-tasks-user-item {
+                    &::before{
+                        content: "";
+                        position: absolute;
+                        background: #BBBBBB;
+                        top: -18px;
+                        height: 18px;
+                        width: 1px;
+                        left: 18px;
+                    }
+                }
+            }
+            .el-tag {
+                --el-tag-bg-color: #D7E6FB;
+                --el-tag-border-color: #AECCEE;
+                --el-tag-hover-color: var(--el-color-primary);
+                .el-tag__content {
+                    display: flex;
+                    align-items: center;
+                    i {
+                        font-size: 14px;
+                        display: inline-block;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -1,340 +1,69 @@
 <template>
-    <div class="hc-tasks-user">
-        <div class="tasks-user-box">
-            <div class="tag-user-list" @click="showModalClick">
-                <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>
-            </div>
+    <div :class="ui" class="hc-report-tasks-user-box">
+        <div class="tag-user-list" @click="userShowModal">
+            <template v-for="(item, index) in userData" :key="index">
+                <el-tag>{{ item.userName }}</el-tag>
+                <hc-icon v-if="(userData.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
+            </template>
+            <div v-if="userData.length <= 0" class="tasks-placeholder">点击这里选择任务人</div>
         </div>
-
         <!-- 选择任务人 -->
-        <el-dialog v-model="showModal" class="hc-modal-border hc-modal-nop" destroy-on-close draggable title="选择任务人" width="62rem">
-            <div class="hc-tasks-user-modal-content-box">
-                <div class="tree-box">
-                    <el-scrollbar>
-                        <ElTree
-                            v-if="isShowTree" :data="ElTreeData" :default-expanded-keys="[0]" :props="ElTreeProps"
-                            accordion
-                            class="hc-tree-node-box" highlight-current node-key="roleId" @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, index) in signUserList" :key="index">
-                                        <div class="user-item checkbox-li">
-                                            <el-checkbox :value="`${item.certificateUserName}-${item.certificateUserId}`">
-                                                <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(index)">{{ setCheckboxUserName(item) }}</el-tag>
-                                </template>
-                            </el-scrollbar>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button size="large" @click="showModal = false">
-                        <HcIcon name="close" />
-                        <span>取消</span>
-                    </el-button>
-                    <el-button :loading="sureSignUserLoading" hc-btn type="primary" @click="sureSignUserClick">
-                        <HcIcon name="check" />
-                        <span>确定</span>
-                    </el-button>
-                </div>
-            </template>
-        </el-dialog>
-
-        <!-- 调整顺序 -->
-        <el-dialog v-model="sequenceModal" append-to-body class="hc-modal-border" destroy-on-close draggable title="调整顺序" width="38rem">
-            <el-alert :closable="false" title="可拖动排序，也可在后面点击图标，切换排序" type="warning" />
-            <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 :list="checkboxUserList" class="sort-node-body-box list-group" ghost-class="ghost" item-key="id" @end="sortNodeDrag = false" @start="sortNodeDrag = true">
-                <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)">
-                                <HcIcon name="arrow-down" ui="text-lg" />
-                            </span>
-                            <span class="icon" @click="upSortClick(index)">
-                                <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 hc-btn type="primary" @click="sequenceModal = false">确认</el-button>
-                </div>
-            </template>
-        </el-dialog>
+        <HcUserModal v-model="isUserModalShow" :data="userData" :datas="dataInfo" @finish="fixedUserFinish" />
     </div>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue'
-import tasksFlowApi from '~api/tasks/flow'
-import { deepClone, getArrValue } from 'js-fast-way'
-import { useAppStore } from '~src/store'
-import Draggable from 'vuedraggable'
+import { ref, watch } from 'vue'
+import { arrToKey, deepClone, getObjValue } from 'js-fast-way'
+import HcUserModal from './user-modal.vue'
 
 //参数
 const props = defineProps({
-    users: {
+    ui: {
         type: String,
         default: '',
     },
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
+    userData: {
+        type: Array,
+        default: () => ([]),
+    },
 })
-
 //事件
-const emit = defineEmits(['change'])
-
-//初始变量
-const useAppState = useAppStore()
-const projectId = ref(useAppState.getProjectId)
-const contractId = ref(useAppState.getContractId)
-
-
-//变量
-const showModal = ref(false)
-const sequenceModal = ref(false)
-const checkboxUserList = ref([])
-const UserDataList = ref([])
-
-//树数据
-const ElTreeProps = { children: 'childRoleList', label: 'roleName' }
-const ElTreeData = ref([{
-    roleName: '全部人员',
-    roleId: 0,
-    childRoleList: [],
-    signPfxFileList: [],
-}])
-const isShowTree = ref(true)
+const emit = defineEmits(['change', 'finsh'])
+//选择完成
+const userData = ref(props.userData)
 //监听
 watch(() => [
-    props.users,
-    props.projectId,
-    props.contractId,
-], ([users, pid, cid]) => {
-    projectId.value = pid
-    contractId.value = cid
-    setUserDataList(users)
-})
+    props.userData,
+], ([users]) => {
+    userData.value = users
 
-//渲染完成
-onMounted(() => {
-    setUserDataList(props.users)
-    queryAllRoleList()
 })
-
-//处理用户数据
-const setUserDataList = (users) => {
-    if (users) {
-        const usersArr = users.split(',')
-        UserDataList.value = usersArr
-        checkboxUserList.value = usersArr
-    } else {
-        UserDataList.value = []
-        checkboxUserList.value = []
-    }
-}
+//监听基础数据
+const dataInfo = ref(props.data)
+watch(() => props.data, (data) => {
+    dataInfo.value = getObjValue(data)
+}, { deep: true, immediate: true })
 
 //展开弹窗
-const showModalClick = () => {
-    showModal.value = true
+const isUserModalShow = ref(false)
+const userShowModal = () => {
+    isUserModalShow.value = true
 }
 
-//获取系统所有角色划分
-const signUserList = ref([])
-const queryAllRoleList = async () => {
-    isShowTree.value = false
-    const { error, code, data } = await tasksFlowApi.queryAllRoleList({
-        contractId: contractId.value,
-    })
-    isShowTree.value = true
-    //处理数据
-    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 = (index) => {
-    checkboxUserList.value.splice(index, 1)
-}
-
-//排序
-const sortNodeDrag = ref(false)
-//向下
-const downSortClick = (index) => {
-    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('已经处于置底，无法下移')
-    }
-}
-//向上
-const upSortClick = (index) => {
-    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('已经处于置顶，无法上移')
-    }
-}
-
-//确认选择
-const sureSignUserLoading = ref(false)
-const sureSignUserClick = async () => {
-    let flowJson = {}, newUser = [], newUserId = [], users = ''
-    const dataList = deepClone(checkboxUserList.value)
-    UserDataList.value = dataList
-    if (dataList.length <= 0) {
-        window.$message?.warning('请先选择任务人员，或点击取消')
-        return false
-    }
-    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])
-        }
-    })
-    //效验人员
-
-
-    const { error, code, data, msg } = await tasksFlowApi.checkTaskUserCertificateInfo({
-        userIds: newUserId.join(','),
-    })
-    if (!error && code === 200) {
-        emit('change', newUser, newUserId, users)
-        //关闭弹窗
-        showModal.value = false
-    } else {
-        window.$message?.error(msg || '操作失败')
-    }
-
-    sureSignUserLoading.value = false
 
+const fixedUserFinish = (data) => {
+    const res = deepClone(data)
+    userData.value = res
+    const userIds = arrToKey(res, 'userId', ',')
+    emit('finsh', userIds)
 }
 </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;
-        }
-    }
-}
+@import './index.scss';
 </style>

src/views/file/components/hc-tasks-user/sort-modal.vue

@@ -0,0 +1,80 @@
+<template>
+    <hc-dialog v-model="isShow" ui="hc-tasks-user-sort-modal" widths="600px" title="调整任务人顺序" @close="modalClose">
+        <hc-table
+            ref="tableRef" :column="tableColumn" :datas="tableData" ui="hc-tasks-user-sort-drop-table"
+            is-row-drop quick-sort is-sort @row-drop="rowDropTap" @row-sort="rowSortTap"
+        />
+        <template #footer>
+            <el-button @click="modalClose">取消</el-button>
+            <el-button type="primary" @click="confirmClick">确定</el-button>
+        </template>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { deepClone, getArrValue } from 'js-fast-way'
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => ([]),
+    },
+})
+
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听数据
+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 tableRef = ref(null)
+const tableColumn = [{ key: 'userName', name: '名称' }]
+const tableData = ref([])
+
+//初始化
+const setInitData = async () => {
+    await nextTick()
+    tableData.value = getArrValue(userData.value)
+}
+
+// 行拖拽
+const rowDropTap = async (rows) => {
+    tableData.value = []
+    await nextTick()
+    tableData.value = rows
+}
+
+// 点击排序
+const rowSortTap = async (rows) => {
+    tableData.value = []
+    await nextTick()
+    tableData.value = rows
+}
+
+//确定选择
+const confirmClick = async () => {
+    const list = deepClone(tableData.value)
+    emit('finish', list)
+    modalClose()
+}
+
+//关闭窗口
+const modalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>

src/views/file/components/hc-tasks-user/style.scss

@@ -1,147 +0,0 @@
-.hc-tasks-user {
-    position: relative;
-    .tasks-user-box {
-        position: relative;
-        border: 1px solid #e0e0e6;
-        border-radius: 4px;
-        padding: 0 12px;
-        cursor: pointer;
-        min-height: 40px;
-        .tag-user-list {
-            position: relative;
-            display: flex;
-            align-items: center;
-            flex-flow: row wrap;
-            min-height: inherit;
-            .tasks-placeholder {
-                color: #a9abb2;
-                font-size: 14px;
-            }
-            .arrow-icon-tag {
-                position: relative;
-                color: #a9abb2;
-                font-size: 18px;
-                margin: 0 8px;
-            }
-        }
-    }
-}
-
-.hc-tasks-user-modal-content-box {
-    position: relative;
-    display: flex;
-    height: 460px;
-    .tree-box {
-        flex: 1;
-        user-select: none;
-        position: relative;
-        padding: 20px;
-        overflow: hidden;
-        border-right: 1px solid #EEEEEE;
-    }
-    .user-box {
-        flex: 2;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        .y-user-list-box, .s-user-list-box {
-            position: relative;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            .title-box {
-                position: relative;
-                padding: 2px 24px;
-                display: flex;
-                align-items: center;
-                border-bottom: 1px solid #EEEEEE;
-                background-color: #F8F8F8;
-                color: #838791;
-                .title {
-                    flex: auto;
-                }
-            }
-            .user-list {
-                position: relative;
-                overflow: hidden;
-                padding: 0 24px;
-                .user-item {
-                    position: relative;
-                    padding: 4px 0;
-                }
-                .user-item + .user-item {
-                    border-top: 1px dashed #EEEEEE;
-                }
-            }
-        }
-        .y-user-list-box {
-            flex: 1;
-            .user-list {
-                flex: 1;
-            }
-        }
-        .s-user-list-box {
-            position: relative;
-            border-top: 1px solid #EEEEEE;
-            .user-list {
-                height: 6rem;
-            }
-        }
-    }
-}
-
-.sort-node-body-box.list-group {
-    position: relative;
-    min-height: 20px;
-    border: 1px solid #EEEEEE;
-    .list-group-item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        padding: 6px 15px;
-        cursor: move;
-        transition: background 0.2s;
-        .index-box {
-            position: relative;
-            width: 50px;
-        }
-        .title-box {
-            position: relative;
-            padding-right: 24px;
-            flex: 1;
-        }
-        .icon-box {
-            position: relative;
-            font-size: 18px;
-            display: flex;
-            align-items: center;
-            .icon {
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-            }
-        }
-        &:first-child .icon-box i:last-child,
-        &:last-child .icon-box i:first-child {
-            cursor: default;
-            color: #aaaaaa;
-        }
-        &:hover {
-            background: var(--el-color-primary-light-9);
-        }
-    }
-    .list-group-item + .list-group-item {
-        border-top: 1px solid #EEEEEE;
-    }
-    &.header {
-        border-bottom: 0;
-        .list-group-item {
-            cursor: default;
-            padding: 8px 15px;
-            background-color: #F8F8F8;
-            .index-box, .title-box, .icon-box {
-                font-size: 14px;
-            }
-        }
-    }
-}

src/views/file/components/hc-tasks-user/user-modal.vue

@@ -0,0 +1,364 @@
+<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>

yarn.lock

@@ -2751,6 +2751,11 @@ pinia@^2.2.4:
     "@vue/devtools-api" "^6.6.3"
     vue-demi "^0.14.10"
 
+pinyin-pro@^3.26.0:
+  version "3.26.0"
+  resolved "http://219.151.181.73:9000/pinyin-pro/-/pinyin-pro-3.26.0.tgz#9e3b8a9f848263b81552d56e9319f520f7709ad6"
+  integrity sha512-HcBZZb0pvm0/JkPhZHWA5Hqp2cWHXrrW/WrV+OtaYYM+kf35ffvZppIUuGmyuQ7gDr1JDJKMkbEE+GN0wfMoGg==
+
 pkg-types@^1.0.3:
   version "1.0.3"
   resolved "http://219.151.181.73:9000/pkg-types/-/pkg-types-1.0.3.tgz#988b42ab19254c01614d13f4f65a2cfc7880f868"