任务流程上报修改

package.json

@@ -39,6 +39,9 @@
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
+        "@iconify-json/iconoir": "^1.2.7",
+        "@iconify-json/ph": "^1.2.2",
+        "@iconify-json/ri": "^1.2.5",
         "@unocss/eslint-config": "^0.58.9",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vue/compiler-sfc": "^3.5.12",

src/global/components/hc-report-modal/index.vue

@@ -33,7 +33,7 @@
                 <HcTasksUser
                     :contract-id="contractId" :project-id="projectId" :type="type" :type-data="typeData"
                     ui="w-full" :classify-type="classifyType" :table-owner="tableOwner" :node-id="formModel.ids ? formModel.ids : nodeId "
-                    :info-ids="infoIds" @change="diyProcessUserChange"
+                    :info-ids="infoIds" :data="dataInfo" @change="diyProcessUserChange"
                 />
             </el-form-item>
             <el-form-item v-else label="任务人">
@@ -149,7 +149,10 @@ const isTypes = ref(props.type)
 const typeDatas = ref(props.typeData)
 const reportDatas = ref(props.datas)
 const nodeId = ref(props.nodeId)
-
+const dataInfo = ref({
+    projectId:props.projectId,
+    contractId:props.contractId,
+})
 //表单
 const formRef = ref(null)
 const processData = ref([])
@@ -209,6 +212,10 @@ watch(() => [
     tableOwner.value = tab
     ApiUrl.value = url
     nodeId.value = nodeid
+    dataInfo.value = {
+        projectId:pid,
+        contractId:cid,
+    }
     //更新到表单数据
     formModel.value = {
         projectId: pid,

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

@@ -0,0 +1,525 @@
+<template>
+    <div :class="ui" class="hc-tasks-user">
+        <div class="tasks-user-box" :class="disabled ? 'no-check' : ''">
+            <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">
+                    <span v-if="!isChangePopele"> 点击这里选择任务人</span>
+                    <span v-else> 点击这里选择整改人</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 选择任务人 -->
+        <hc-new-dialog v-model="showModal" ui="hc-tasks-user-modal-dialog" title="选择任务人" widths="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 in signUserList">
+                                        <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>
+        </hc-new-dialog>
+
+        <!-- 调整顺序 -->
+        <hc-new-dialog v-model="sequenceModal" title="调整顺序" widths="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>
+        </hc-new-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 { checkCustomFlowUserIsEVisaPermissions, checkCustomFlowUserIsEVisaPermissions3, checkCustomFlowUserIsEVisaPermissionsquery } from '~api/other'
+import Draggable from 'vuedraggable'
+
+//参数
+const props = defineProps({
+    ui: {
+        type: String,
+        default: '',
+    },
+    //选中的用户数组
+    users: {
+        type: String,
+        default: '',
+    },
+    projectId: {
+        type: [String, Number],
+        default: '',
+    },
+    contractId: {
+        type: [String, Number],
+        default: '',
+    },
+    type: { //first,log,wbs
+        type: [String, Number],
+        default: '',
+    },
+    typeData: {
+        type: [String, Number, Array, Object],
+        default: '',
+    },
+    classifyType: {
+        type: [String, Number],
+        default: '',
+    },
+    tableOwner: {
+        type: [String, Number],
+        default: '',
+    },
+    nodeId: {
+        type: [String, Number],
+        default: '', //选中节点nodeid
+    },
+    infoIds:{
+        type: [String, Number],
+        default: '', //上报任务ID
+    },
+    disabled:{
+        type:Boolean,
+        default:false,
+    },
+    isChangePopele:{
+        type:Boolean,
+        default:false, //显示整改人还是任务人
+    },
+})
+
+//事件
+const emit = defineEmits(['change'])
+//变量
+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 isTypes = ref(props.type)
+const typeDatas = ref(props.typeData)
+const classifyType = ref(props.classifyType)
+const tableOwner = ref(props.tableOwner)
+const nodeId = ref(props.nodeId)
+const infoIds = ref(props.infoIds)
+const disabled = ref(props.disabled)
+const isChangePopele = ref(props.isChangePopele)
+//树数据
+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,
+    props.type,
+    props.typeData,
+    props.classifyType,
+    props.tableOwner,
+    props.nodeId,
+    props.infoIds,
+    props.disabled,
+    props.isChangePopele,
+], ([users, pid, cid, type, data, cla, tab, noid, infoid, disa, isChan]) => {
+    projectId.value = pid
+    contractId.value = cid
+    isTypes.value = type
+    typeDatas.value = data
+    setUserDataList(users)
+    classifyType.value = cla
+    tableOwner.value = tab
+    nodeId.value = noid
+    infoIds.value = infoid
+    disabled.value = disa
+    isChangePopele.value = isChan
+})
+
+//渲染完成
+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 = () => {
+    if (!disabled.value) {
+        showModal.value = true
+    } else {
+        showModal.value = false
+    }
+
+}
+
+//获取系统所有角色划分
+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 = () => {
+    let type = isTypes.value, flowJson = {}, newUser = [], newUserId = [], users = ''
+    const dataList = deepClone(checkboxUserList.value)
+    UserDataList.value = dataList
+    if (dataList.length > 0) {
+        sureSignUserLoading.value = true
+        //判断类型
+        if (type === 'first') {
+            flowJson['firstId'] = typeDatas.value
+        } else if (type === 'log') {
+            // flowJson['theLogPrimaryKeyId'] = typeDatas.value
+            flowJson['theLogPrimaryKeyId'] = nodeId.value
+        } else if (type === 'wbs') {
+            flowJson['privatePKeyId'] = typeDatas.value
+        } else if (type === 'query') {
+            flowJson['privatePKeyId'] = typeDatas.value
+        }
+        //封装数据
+        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])
+            }
+        })
+        //效验人员
+        if (type === 'wbs') {
+            getCheckCustomFlowUserIsEVisaPermissions(flowJson, newUser, newUserId, users)
+        } else if (type === 'first' || type === 'log' ) {
+            getCheckCustomFlowUserIsEVisaPermissions3(flowJson, newUser, newUserId, users)
+        } else if (type === 'query') {
+            getCheckCustomFlowUserIsEVisaPermissionsquery(flowJson, newUser, newUserId, users)
+        } else {
+            showModal.value = false
+            sureSignUserLoading.value = false
+            emit('change', newUser, newUserId, users)
+        }
+    } else {
+        window.$message?.warning('请先选择任务人员，或点击取消')
+    }
+}
+
+//检查所选的流程环节处理人是否具有审批权限（三大填报页、日志列表的批量上报、首件列表的批量上报）
+const getCheckCustomFlowUserIsEVisaPermissions = async (flowJson, newUser, newUserId, users) => {
+    const { error, code, data, msg } = await checkCustomFlowUserIsEVisaPermissions({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        customFlowUserList: newUserId,
+        ...flowJson,
+        classifyType:classifyType.value,
+        tableOwner:tableOwner.value,
+        nodeId:nodeId.value,
+
+    })
+    //处理数据
+    sureSignUserLoading.value = false
+    if (!error && code === 200 && data === true) {
+        showModal.value = false
+        emit('change', newUser, newUserId, users)
+    } else {
+        window.$message.error(msg)
+        emit('change', [], [], '')
+    }
+}
+//资料查询页面
+const getCheckCustomFlowUserIsEVisaPermissionsquery = async (flowJson, newUser, newUserId, users) => {
+    const { error, code, data, msg } = await checkCustomFlowUserIsEVisaPermissionsquery({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        customFlowUserList: newUserId,
+        ...flowJson,
+        nodeId:nodeId.value,
+        classifyType:classifyType.value,
+        tableOwner:tableOwner.value,
+        infoIds:infoIds.value,
+    })
+    //处理数据
+    sureSignUserLoading.value = false
+    if (!error && code === 200 && data === true) {
+        showModal.value = false
+        emit('change', newUser, newUserId, users)
+    } else {
+        window.$message.error(msg)
+        emit('change', [], [], '')
+    }
+}
+
+//日志和首件页面
+const getCheckCustomFlowUserIsEVisaPermissions3 = async (flowJson, newUser, newUserId, users) => {
+    const { error, code, data, msg } = await checkCustomFlowUserIsEVisaPermissions3({
+        projectId: projectId.value,
+        contractId: contractId.value,
+        customFlowUserList: newUserId,
+        ...flowJson,
+        // nodeId:nodeId.value,
+        classifyType:classifyType.value,
+        tableOwner:tableOwner.value,
+        infoIds:infoIds.value,
+    })
+    //处理数据
+    sureSignUserLoading.value = false
+    if (!error && code === 200 && data === true) {
+        showModal.value = false
+        emit('change', newUser, newUserId, users)
+    } else {
+        window.$message.error(msg)
+        emit('change', [], [], '')
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
+
+<style lang="scss">
+.no-check{
+    cursor: not-allowed !important;
+}
+.hc-tasks-user .tasks-user-box .tag-user-list {
+    .el-tag {
+        --el-icon-size: 14px;
+        padding: 0 10px;
+        height: 26px;
+        margin: 4px 0;
+    }
+}
+.el-overlay-dialog .el-dialog.hc-new-dialog.hc-tasks-user-modal-dialog .el-dialog__body {
+    padding: 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;
+        }
+        .el-scrollbar__bar.is-vertical {
+            right: -20px;
+        }
+    }
+}
+</style>

src/global/components/hc-tasks-user/index.scss

@@ -0,0 +1,213 @@
+.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;
+        .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;
+        .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: white;
+            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/global/components/hc-tasks-user/index.vue

@@ -1,150 +1,25 @@
 <template>
-    <div :class="ui" class="hc-tasks-user">
-        <div class="tasks-user-box" :class="disabled ? 'no-check' : ''">
-            <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">
-                    <span v-if="!isChangePopele"> 点击这里选择任务人</span>
-                    <span v-else> 点击这里选择整改人</span>
-                </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">
+                <span v-if="!isChangePopele"> 点击这里选择任务人</span>
+                <span v-else> 点击这里选择整改人</span>
             </div>
         </div>
-
         <!-- 选择任务人 -->
-        <hc-new-dialog v-model="showModal" ui="hc-tasks-user-modal-dialog" title="选择任务人" widths="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 in signUserList">
-                                        <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>
-        </hc-new-dialog>
-
-        <!-- 调整顺序 -->
-        <hc-new-dialog v-model="sequenceModal" title="调整顺序" widths="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>
-        </hc-new-dialog>
+        <HcUserModal v-model="isUserModalShow" :data="userData" :datas="dataInfo" :fixed-flow-link-type-val="fixedFlowLinkTypeVal" @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 { ref, watch } from 'vue'
+import { arrToKey, deepClone, getObjValue } from 'js-fast-way'
+import HcUserModal from './user-modal.vue'
 import { checkCustomFlowUserIsEVisaPermissions, checkCustomFlowUserIsEVisaPermissions3, checkCustomFlowUserIsEVisaPermissionsquery } from '~api/other'
-import Draggable from 'vuedraggable'
 
 //参数
 const props = defineProps({
@@ -152,10 +27,15 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
+  
     //选中的用户数组
     users: {
-        type: String,
-        default: '',
+        type: Array,
+        default: () => ([]),
     },
     projectId: {
         type: [String, Number],
@@ -197,15 +77,17 @@ const props = defineProps({
         type:Boolean,
         default:false, //显示整改人还是任务人
     },
+    fixedFlowLinkTypeVal: {
+        type: [String, Number],
+        default: '', //流程审批1，平行审批2
+    },
 })
 
+
+
+
 //事件
 const emit = defineEmits(['change'])
-//变量
-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 isTypes = ref(props.type)
@@ -216,15 +98,7 @@ const nodeId = ref(props.nodeId)
 const infoIds = ref(props.infoIds)
 const disabled = ref(props.disabled)
 const isChangePopele = ref(props.isChangePopele)
-//树数据
-const ElTreeProps = { children: 'childRoleList', label: 'roleName' }
-const ElTreeData = ref([{
-    roleName: '全部人员',
-    roleId: 0,
-    childRoleList: [],
-    signPfxFileList: [],
-}])
-const isShowTree = ref(true)
+const fixedFlowLinkTypeVal = ref(props.fixedFlowLinkTypeVal)
 //监听
 watch(() => [
     props.users,
@@ -238,129 +112,51 @@ watch(() => [
     props.infoIds,
     props.disabled,
     props.isChangePopele,
-], ([users, pid, cid, type, data, cla, tab, noid, infoid, disa, isChan]) => {
+    props.fixedFlowLinkTypeVal,
+], ([users, pid, cid, type, data, cla, tab, noid, infoid, disa, isChan, typeVal]) => {
+    userData.value = users
     projectId.value = pid
     contractId.value = cid
     isTypes.value = type
     typeDatas.value = data
-    setUserDataList(users)
+
     classifyType.value = cla
     tableOwner.value = tab
     nodeId.value = noid
     infoIds.value = infoid
     disabled.value = disa
     isChangePopele.value = isChan
+    fixedFlowLinkTypeVal.value = typeVal
 })
-
-//渲染完成
-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 = () => {
-    if (!disabled.value) {
-        showModal.value = true
-    } else {
-        showModal.value = false
-    }
-
-}
-
-//获取系统所有角色划分
-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 isUserModalShow = ref(false)
+const userShowModal = () => {
+    isUserModalShow.value = true
 }
 
-//树被点击
-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 userData = ref(props.users)
+const fixedUserFinish = (data) => {
+    const res = deepClone(data)
+    userData.value = res
+    const userIds = arrToKey(res, 'userId', ',')
+    let userIdsArr = userIds.split(',')
+    sureSignUserClick(userIdsArr, userData.value )
 }
 
 //确认选择
 const sureSignUserLoading = ref(false)
-const sureSignUserClick = () => {
-    let type = isTypes.value, flowJson = {}, newUser = [], newUserId = [], users = ''
-    const dataList = deepClone(checkboxUserList.value)
-    UserDataList.value = dataList
-    if (dataList.length > 0) {
+const sureSignUserClick = (userIds, userData) => {
+    let type = isTypes.value, flowJson = {}
+    
+
+    if (userIds.length > 0) {
         sureSignUserLoading.value = true
         //判断类型
         if (type === 'first') {
@@ -373,40 +169,28 @@ const sureSignUserClick = () => {
         } else if (type === 'query') {
             flowJson['privatePKeyId'] = typeDatas.value
         }
-        //封装数据
-        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])
-            }
-        })
+  
         //效验人员
         if (type === 'wbs') {
-            getCheckCustomFlowUserIsEVisaPermissions(flowJson, newUser, newUserId, users)
+            getCheckCustomFlowUserIsEVisaPermissions(flowJson, userIds)
         } else if (type === 'first' || type === 'log' ) {
-            getCheckCustomFlowUserIsEVisaPermissions3(flowJson, newUser, newUserId, users)
+            getCheckCustomFlowUserIsEVisaPermissions3(flowJson, userIds)
         } else if (type === 'query') {
-            getCheckCustomFlowUserIsEVisaPermissionsquery(flowJson, newUser, newUserId, users)
+            getCheckCustomFlowUserIsEVisaPermissionsquery(flowJson, userIds)
         } else {
-            showModal.value = false
+        
             sureSignUserLoading.value = false
-            emit('change', newUser, newUserId, users)
+            emit('change', userData)
         }
     } else {
         window.$message?.warning('请先选择任务人员，或点击取消')
     }
 }
-
 //检查所选的流程环节处理人是否具有审批权限（三大填报页、日志列表的批量上报、首件列表的批量上报）
-const getCheckCustomFlowUserIsEVisaPermissions = async (flowJson, newUser, newUserId, users) => {
-    const { error, code, data, msg } = await checkCustomFlowUserIsEVisaPermissions({
-        projectId: projectId.value,
-        contractId: contractId.value,
+const getCheckCustomFlowUserIsEVisaPermissions = async (flowJson, newUserId) => {
+    const { error, code, data, msg, success } = await checkCustomFlowUserIsEVisaPermissions({
+        projectId: dataInfo.value.projectId.value,
+        contractId:  dataInfo.value.contractId.value,
         customFlowUserList: newUserId,
         ...flowJson,
         classifyType:classifyType.value,
@@ -416,16 +200,19 @@ const getCheckCustomFlowUserIsEVisaPermissions = async (flowJson, newUser, newUs
     })
     //处理数据
     sureSignUserLoading.value = false
+    
     if (!error && code === 200 && data === true) {
-        showModal.value = false
-        emit('change', newUser, newUserId, users)
+       
+        emit('change', userData.value)
+        isUserModalShow.value = false
     } else {
-        window.$message.error(msg)
-        emit('change', [], [], '')
+        // window.$message.error(msg)
+        userData.value = []
+        emit('change', [])
     }
 }
 //资料查询页面
-const getCheckCustomFlowUserIsEVisaPermissionsquery = async (flowJson, newUser, newUserId, users) => {
+const getCheckCustomFlowUserIsEVisaPermissionsquery = async (flowJson, newUserId) => {
     const { error, code, data, msg } = await checkCustomFlowUserIsEVisaPermissionsquery({
         projectId: projectId.value,
         contractId: contractId.value,
@@ -439,16 +226,16 @@ const getCheckCustomFlowUserIsEVisaPermissionsquery = async (flowJson, newUser,
     //处理数据
     sureSignUserLoading.value = false
     if (!error && code === 200 && data === true) {
-        showModal.value = false
-        emit('change', newUser, newUserId, users)
+        isUserModalShow.value = false
+        emit('change', userData.value)
     } else {
-        window.$message.error(msg)
-        emit('change', [], [], '')
+        // window.$message.error(msg)
+        userData.value = []
+        emit('change', [])
     }
 }
-
 //日志和首件页面
-const getCheckCustomFlowUserIsEVisaPermissions3 = async (flowJson, newUser, newUserId, users) => {
+const getCheckCustomFlowUserIsEVisaPermissions3 = async (flowJson, newUserId) => {
     const { error, code, data, msg } = await checkCustomFlowUserIsEVisaPermissions3({
         projectId: projectId.value,
         contractId: contractId.value,
@@ -462,64 +249,16 @@ const getCheckCustomFlowUserIsEVisaPermissions3 = async (flowJson, newUser, newU
     //处理数据
     sureSignUserLoading.value = false
     if (!error && code === 200 && data === true) {
-        showModal.value = false
-        emit('change', newUser, newUserId, users)
+        isUserModalShow.value = false
+        emit('change', userData.value)
     } else {
-        window.$message.error(msg)
-        emit('change', [], [], '')
+        // window.$message.error(msg)
+        userData.value = []
+         emit('change', [])
     }
 }
 </script>
 
-<style lang="scss" scoped>
-@import './style.scss';
-</style>
-
 <style lang="scss">
-.no-check{
-    cursor: not-allowed !important;
-}
-.hc-tasks-user .tasks-user-box .tag-user-list {
-    .el-tag {
-        --el-icon-size: 14px;
-        padding: 0 10px;
-        height: 26px;
-        margin: 4px 0;
-    }
-}
-.el-overlay-dialog .el-dialog.hc-new-dialog.hc-tasks-user-modal-dialog .el-dialog__body {
-    padding: 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;
-        }
-        .el-scrollbar__bar.is-vertical {
-            right: -20px;
-        }
-    }
-}
+@import './index.scss';
 </style>

src/global/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/global/components/hc-tasks-user/user-modal.vue

@@ -0,0 +1,291 @@
+<template>
+    <hc-dialog v-model="isShow" ui="hc-report-tasks-user-modal" widths="960px" title="选择任务人" @close="modalClose">
+        <div class="card-div-2 h-full w-235px">
+            <hc-card scrollbar title="角色类型" :loading="signUserLoading">
+                <template v-for="item in signUserList" :key="item.roleId">
+                    <div class="hc-tasks-user-role-item" :class="{ cur: roleItem.roleId === item.roleId }" @click="roleItemClick(item)">
+                        {{ item.roleName }}
+                    </div>
+                </template>
+            </hc-card>
+        </div>
+        <div class="card-div-3 h-full w-265px">
+            <hc-card v-if="positionList.length > 0" scrollbar>
+                <template #header>
+                    <hc-search-input v-model="positionKey" placeholder="岗位搜索" icon="" @search="positionSearch" />
+                </template>
+                <template v-for="item in positionList" :key="item.roleId">
+                    <div class="hc-tasks-user-role-item" :class="{ cur: positionItem.roleId === item.roleId }" @click="positionItemClick(item)">
+                        <i class="i-ph-user-list-light mr-5px" />
+                        <span>{{ item.roleName }}</span>
+                    </div>
+                </template>
+            </hc-card>
+            <div v-else class="card-empty-no">
+                <hc-empty :src="HcLoadSvg" title="请先选择角色" />
+            </div>
+        </div>
+        <div class="card-div-4 h-full w-235px">
+            <hc-card v-if="signPfxFileList.length > 0">
+                <template #header>
+                    <hc-search-input v-model="signUserKey" placeholder="人员搜索" icon="" @search="signUserSearch" />
+                </template>
+                <div class="hc-tasks-user-sign-pfx-box">
+                    <el-scrollbar ref="scrollRef">
+                        <template v-for="item in signPfxFileList" :key="item.name">
+                            <div v-if="item.data.length > 0" :id="`hc-sign-pfx-file-item-${item.name}`" class="hc-sign-pfx-file-item">
+                                <div class="hc-tasks-user-letter">{{ item.name }}</div>
+                                <template v-for="(items, index) in item.data" :key="index">
+                                    <div class="hc-tasks-user-item" @click="signUserItemClick(items)">
+                                        <i class="i-iconoir-user mr-5px" />
+                                        <span>{{ items.certificateUserName }}</span>
+                                    </div>
+                                </template>
+                            </div>
+                        </template>
+                    </el-scrollbar>
+                </div>
+                <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>
+        <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()
+    console.log(userData.value)
+}
+
+//角色列表
+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 = (item) => {
+    roleItem.value = item
+    const arr = getArrValue(item.childRoleList)
+    positionList.value = deepClone(arr)
+}
+
+//岗位搜索
+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 = (item) => {
+    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>

src/views/tasks/flow.vue

@@ -35,8 +35,9 @@
                 </el-form-item>
                 <el-form-item label="任务人" prop="linkUserJoinString">
                     <hc-tasks-user
-                        :contract-id="contractId" :project-id="projectId" :users="flowFormData.linkUserJoinString"
-                        ui="w-full" @change="tasksUserChange"
+                        :fixed-flow-link-type-val="fixedFlowLinkTypeVal"
+                        :contract-id="contractId" :project-id="projectId" :users="userData"
+                        ui="w-full" :data="dataInfo" @change="tasksUserChange"
                     />
                 </el-form-item>
             </el-form>
@@ -63,7 +64,7 @@
                         <span class="text-link text-xl" @click="upSortClick(index)">
                             <hc-icon name="arrow-up" fill />
                         </span>
-                        <span class="text-link text-xl ml-2" @click="downSortClick(index)">
+                        <span class="text-link ml-2 text-xl" @click="downSortClick(index)">
                             <hc-icon name="arrow-down" fill />
                         </span>
                     </template>
@@ -89,11 +90,15 @@ import { useAppStore } from '~src/store'
 import { getArrValue, getObjValue } from 'js-fast-way'
 import tasksFlowApi from '~api/tasks/flow'
 
+
 //变量
 const useAppState = useAppStore()
 const projectId = ref(useAppState.getProjectId)
 const contractId = ref(useAppState.getContractId)
-
+const dataInfo = ref({
+    projectId:projectId.value,
+    contractId:contractId.value,
+})
 //渲染完成
 onMounted(() => {
     getTableData()
@@ -155,18 +160,29 @@ const formFlowRules = {
 }
 
 //任务人选择改变
-const tasksUserChange = (a, b, users) => {
-    flowFormData.value.linkUserJoinString = users
+const tasksUserChange = ( users) => {
+    let usersString = getTaskUsers(users)
+    flowFormData.value.linkUserJoinString = usersString
+}
+const getTaskUsers = (data)=>{
+    // 格式化字符串
+    const formattedStrings = data.map(item => `${item.userName}-${item.userId}`)
+    // 拼接字符串
+    const result = formattedStrings.join(',')
+    return result
 }
-
 //新建流程
 const addFlowData = () => {
+    userData.value = []
     flowFormData.value = { id: '', fixedFlowName: '', linkUserJoinString: '' }
     showEditModal.value = true
 }
-
+const userData = ref([])
+const fixedFlowLinkTypeVal = ref('')
 //编辑流程
 const handleTableEdit = async (row) => {
+    const { fixedFlowLinkType } = row
+    fixedFlowLinkTypeVal.value = fixedFlowLinkType
     flowFormData.value = { id: '', fixedFlowName: '', linkUserJoinString: '' }
     showEditModal.value = true
     const { error, code, data } = await tasksFlowApi.queryFixedFlowDetail({
@@ -175,8 +191,14 @@ const handleTableEdit = async (row) => {
     if (!error && code === 200) {
         let users = '', res = getObjValue(data)
         const list = getArrValue(res['fixedFlowLinkList'])
+        userData.value = []
         for (let i = 0; i < list.length; i++) {
+          
             const item = getObjValue(list[i])
+            userData.value.push({
+                userId:item['fixedFlowLinkUser'],
+                userName:item['fixedFlowLinkUserName'],
+            })
             if (users) {
                 users += `,${item['fixedFlowLinkUserName']}-${item['fixedFlowLinkUser']}`
             } else {

yarn.lock

@@ -487,7 +487,28 @@
   resolved "http://39.108.216.210:9000/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
-"@iconify/types@^2.0.0":
+"@iconify-json/iconoir@^1.2.7":
+  version "1.2.7"
+  resolved "http://39.108.216.210:9000/@iconify-json/iconoir/-/iconoir-1.2.7.tgz#93a1a89e989997c4c12d7c8011652ebbc3324d9b"
+  integrity sha512-UDlx2WeWHqopfKRsjOta6fn/KkOhF0MmI2AxoYfakqtMLlznkTnrtY9QVuXZzsbvk+Gyavq2L39VjhcxGbt+LA==
+  dependencies:
+    "@iconify/types" "*"
+
+"@iconify-json/ph@^1.2.2":
+  version "1.2.2"
+  resolved "http://39.108.216.210:9000/@iconify-json/ph/-/ph-1.2.2.tgz#eac734e80f4639df6ade990690a825540b4259c4"
+  integrity sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==
+  dependencies:
+    "@iconify/types" "*"
+
+"@iconify-json/ri@^1.2.5":
+  version "1.2.5"
+  resolved "http://39.108.216.210:9000/@iconify-json/ri/-/ri-1.2.5.tgz#bd7d607225cc69b42928df3a55d4069ad8b7aaea"
+  integrity sha512-kWGimOXMZrlYusjBKKXYOWcKhbOHusFsmrmRGmjS7rH0BpML5A9/fy8KHZqFOwZfC4M6amObQYbh8BqO5cMC3w==
+  dependencies:
+    "@iconify/types" "*"
+
+"@iconify/types@*", "@iconify/types@^2.0.0":
   version "2.0.0"
   resolved "http://39.108.216.210:9000/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
   integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==