更新依赖和任务人

package.json

@@ -28,12 +28,14 @@
         "js-md5": "^0.8.3",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
+        "pinyin-pro": "^3.23.1",
         "split.js": "^1.6.5",
         "vue": "3.4.33",
         "vue-router": "^4.4.0",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
+        "@iconify-json/hugeicons": "^1.1.0",
         "@iconify-json/iconoir": "^1.1.45",
         "@iconify-json/ri": "^1.1.21",
         "@unocss/eslint-config": "0.58.2",

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20240722173341"
+  "value": "20240723170200"
 }

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

@@ -0,0 +1,510 @@
+<template>
+    <div :class="ui" class="hc-tasks-user">
+        <div class="tasks-user-box">
+            <div class="tag-user-list" @click="showModalClick">
+                <template v-if="isShowTaskName">
+                    <template v-for="(item, index) in fixedBranchList" :key="index">
+                        <el-tag>{{ item.name }}</el-tag>
+                        <HcIcon v-if="(fixedBranchList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
+                    </template>
+                    <div v-if="fixedBranchList.length <= 0" class="tasks-placeholder">点击这里选择任务</div>
+                </template>
+                <template v-else>
+                    <template v-for="(item, index) in UserDataList" :key="index">
+                        <el-tag>{{ setCheckboxUserName(item) }}</el-tag>
+                        <HcIcon v-if="(UserDataList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
+                    </template>
+                    <div v-if="UserDataList.length <= 0" class="tasks-placeholder">点击这里选择任务人</div>
+                </template>
+            </div>
+        </div>
+
+        <!-- 选择任务人 -->
+        <el-dialog v-model="showModal" title="选择任务人" width="62rem" class="hc-modal-border hc-modal-nop" draggable destroy-on-close>
+            <div class="hc-tasks-user-modal-content-box">
+                <div v-if="isShowTaskName" class="tasks-name-box">
+                    <p class="mb-2">创建任务人流程</p>
+                    <div class="flex pt-2">
+                        <el-input v-model="taskNameinput" placeholder="请输入" size="default" class="mr-4" />
+                        <el-button type="primary" size="default" @click="addTaskName">添加</el-button>
+                    </div>
+                    <div class="task-list-box">
+                        <div v-for="(item, index) in fixedBranchList" :key="index" class="task-list-box-item">
+                            <el-tooltip :content="item.type === 1 ? '流程审批' : '平行审批'" placement="right">
+                                <el-button size="default" :color="curItem?.name === item.name ? 'orange' : ''" @click="chekckTask(item)">
+                                    {{ item.name }}
+                                    <HcIcon v-if="item.type === 2" name="links" class="ml-2" @click="item.type = 1" />
+                                    <HcIcon v-if="item.type === 1" name="exchange-2" class="ml-2" @click="item.type = 2" />
+                                    <HcIcon name="close" class="ml-2" @click="delTask(item, index)" />
+                                </el-button>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                </div>
+                <div class="tree-box">
+                    <el-scrollbar>
+                        <ElTree
+                            class="hc-tree-node-box" :props="ElTreeProps" :data="ElTreeData" node-key="roleId"
+                            highlight-current accordion :default-expanded-keys="[0]" @node-click="ElTreeNodeClick"
+                        />
+                    </el-scrollbar>
+                </div>
+                <div class="user-box">
+                    <div class="y-user-list-box">
+                        <div class="title-box">
+                            <div class="title">可选择</div>
+                        </div>
+                        <div class="user-list">
+                            <el-scrollbar>
+                                <el-checkbox-group v-model="checkboxUserList">
+                                    <template v-for="item in signUserList" :key="item.certificateUserId">
+                                        <div class="user-item checkbox-li">
+                                            <el-checkbox :value="`${item.certificateUserName}-${item.certificateUserId}`" :disabled="item.isDisa">
+                                                <div class="item-user-name">{{ item.certificateUserName }}</div>
+                                            </el-checkbox>
+                                        </div>
+                                    </template>
+                                </el-checkbox-group>
+                            </el-scrollbar>
+                        </div>
+                    </div>
+                    <div class="s-user-list-box">
+                        <div class="title-box">
+                            <div class="title">已选择({{ checkboxUserList.length }})</div>
+                            <el-button plain size="small" @click="sequenceModal = true">调整顺序</el-button>
+                        </div>
+                        <div class="user-list">
+                            <el-scrollbar>
+                                <template v-for="(item, index) in checkboxUserList" :key="index">
+                                    <el-tag closable @close="delCheckboxUser(item, index)">{{ setCheckboxUserName(item) }}</el-tag>
+                                </template>
+                            </el-scrollbar>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button hc-btn style="border: 1px solid var(--el-button-border-color);" @click="showModal = false">
+                        <HcIcon name="close" />
+                        <span>取消</span>
+                    </el-button>
+                    <el-button hc-btn type="primary" :loading="sureSignUserLoading" @click="sureSignUserClick">
+                        <HcIcon name="check" />
+                        <span>确定</span>
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <!-- 调整顺序 -->
+        <el-dialog v-model="sequenceModal" title="调整顺序" width="38rem" class="hc-modal-border" draggable destroy-on-close append-to-body>
+            <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="warning" :closable="false" />
+            <div class="sort-node-body-box list-group header">
+                <div class="list-group-item">
+                    <div class="index-box">序号</div>
+                    <div class="title-box">任务人</div>
+                    <div class="icon-box">排序</div>
+                </div>
+            </div>
+            <Draggable
+                class="sort-node-body-box list-group" ghost-class="ghost" :list="checkboxUserList" item-key="id"
+                @start="sortNodeDrag = true" @end="sortNodeDrag = false"
+            >
+                <template #item="{ element, index }">
+                    <div class="list-group-item">
+                        <div class="index-box">{{ index + 1 }}</div>
+                        <div class="title-box">{{ setCheckboxUserName(element) }}</div>
+                        <div class="icon-box">
+                            <span class="icon" @click="downSortClick(index, element)">
+                                <HcIcon name="arrow-down" ui="text-lg" />
+                            </span>
+                            <span class="icon" @click="upSortClick(index, element)">
+                                <HcIcon name="arrow-up" ui="text-lg" />
+                            </span>
+                        </div>
+                    </div>
+                </template>
+            </Draggable>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button size="large" @click="sequenceModal = false">取消</el-button>
+                    <el-button type="primary" size="large" @click="saveSort">确认</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import tasksFlowApi from '~api/tasks/flow'
+import { arrToKey, deepClone, getArrValue } from 'js-fast-way'
+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: '',
+    },
+    isShowTaskName: {
+        type: Boolean,
+        default: false,
+    },
+    id: {
+        type: [String, Number],
+        default: '', //预设流程ID
+    },
+    fixedBranchList: {
+        type: Array,
+        default: () => ([]),
+    },
+})
+//事件
+const emit = defineEmits(['change'])
+const isShowTaskName = ref(props.isShowTaskName)
+//变量
+const showModal = ref(false)
+const sequenceModal = ref(false)
+const checkboxUserList = ref([])
+const UserDataList = ref([])
+const projectId = ref(props.projectId)
+const contractId = ref(props.contractId)
+const id = ref(props.id)
+const fixedBranchList = ref(props.fixedBranchList)
+
+//树数据
+const ElTreeProps = { children: 'childRoleList', label: 'roleName' }
+const ElTreeData = ref([{
+    roleName: '全部人员',
+    roleId: 0,
+    childRoleList: [],
+    signPfxFileList: [],
+}])
+
+//监听
+watch(() => [
+    props.users,
+    props.projectId,
+    props.contractId,
+    props.isShowTaskName,
+    props.id,
+    props.fixedBranchList,
+], ([users, pid, cid, ishow, Id, list]) => {
+    projectId.value = pid
+    contractId.value = cid
+    setUserDataList(users)
+    isShowTaskName.value = ishow
+    id.value = Id
+    fixedBranchList.value = list
+    fixedBranchList.value.forEach((ele) => {
+        let userList = getArrValue(ele.userList)
+        ele.userIds = arrToKey(userList, 'userId', ',') // '1,2,3'
+        let users = ''
+        for (let index = 0; index < userList.length; index++) {
+            const element = userList[index]
+            if (users) {
+                users += `,${element['userName']}-${element['userId']}`
+            } else {
+                users = `${element['userName']}-${element['userId']}`
+            }
+        }
+        ele.users = users
+        delete ele.userList
+    })
+    if (fixedBranchList.value.length > 0) {
+        curItem.value = fixedBranchList.value[0]
+        chekckTask(curItem.value)
+    }
+})
+
+//监听
+watch(() => checkboxUserList.value, (list) => {
+    let newUser = [], newUserId = [], users = ''
+    const dataList = deepClone(checkboxUserList.value)
+    UserDataList.value = dataList
+    if (dataList.length > 0) {
+        //封装数据
+        dataList.forEach(item => {
+            const itemArr = item.split('-')
+            if (itemArr.length > 0 && itemArr[0]) {
+                users = users ? `${users},${item}` : item
+                newUser.push({
+                    userId: itemArr[1],
+                    userName: itemArr[0],
+                })
+                newUserId.push(itemArr[1])
+            }
+        })
+        if (curItem.value) {
+            curItem.value.userIds = newUserId.join(',')
+            curItem.value.users = 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 () => {
+    const { error, code, data } = await tasksFlowApi.queryAllRoleList({
+        contractId: contractId.value,
+    })
+    //处理数据
+    if (!error && code === 200) {
+        let signList = [], dataArr = getArrValue(data)
+        ElTreeData.value[0].childRoleList = dataArr
+        if (dataArr.length > 0) {
+            dataArr.forEach(item => {
+                signList = signList.concat(item.signPfxFileList)
+            })
+        }
+        ElTreeData.value[0].signPfxFileList = signList
+        signUserList.value = signList
+    } else {
+        signUserList.value = []
+        ElTreeData.value[0].childRoleList = []
+        ElTreeData.value[0].signPfxFileList = []
+    }
+}
+
+//树被点击
+const ElTreeNodeClick = (data) => {
+    signUserList.value = getArrValue(data?.signPfxFileList)
+}
+
+//处理已选择的用户问题
+const setCheckboxUserName = (item) => {
+    if (item) {
+        const itemArr = item.split('-')
+        if (itemArr.length > 0 && itemArr[0]) {
+            return itemArr[0]
+        } else {
+            return ''
+        }
+    } else {
+        return ''
+    }
+}
+
+//删除已选择的用户
+const delCheckboxUser = (item, index) => {
+    checkboxUserList.value.splice(index, 1)
+    let delId = item.split('-')[1]
+    fixedBranchList.value.forEach((ele) => {
+        let arr = ele.userIds.split(',')
+        arr.forEach((ele1, index1) => {
+            if (ele1 === delId) {
+                arr.splice(index1, 1)
+            }
+        })
+        let arr1 = ele.users.split(',')
+        arr1.forEach((ele2, index2) => {
+            if (ele2.split('-')[1] === delId) {
+                arr1.splice(index2, 1)
+            }
+        })
+        ele.userIds = arr.join(',')
+        ele.users = arr1.join(',')
+    })
+    signUserList.value.forEach((ele) => {
+        if (delId === ele.certificateUserId) {
+            ele.isDisa = false
+        }
+    })
+}
+
+//排序
+const sortNodeDrag = ref(false)
+//向下
+const downSortClick = (index, elemnt) => {
+    const indexs = index + 1
+    const data = checkboxUserList.value
+    if (indexs !== data.length) {
+        const tmp = data.splice(indexs, 1)
+        checkboxUserList.value.splice(index, 0, tmp[0])
+        curItem.value.users = data.join(',')
+        let userIdsarr = []
+        data.forEach((ele) => {
+            userIdsarr.push(ele.split('-')[1])
+        })
+        curItem.value.userIds = userIdsarr.join(',')
+    } else {
+        window?.$message?.warning('已经处于置底，无法下移')
+    }
+}
+
+//向上
+const upSortClick = (index, elemnt) => {
+    const data = checkboxUserList.value || []
+    if (index !== 0) {
+        const tmp = data.splice(index - 1, 1)
+        checkboxUserList.value.splice(index, 0, tmp[0])
+        curItem.value.users = data.join(',')
+        let userIdsarr = []
+        data.forEach((ele) => {
+            userIdsarr.push(ele.split('-')[1])
+        })
+        curItem.value.userIds = userIdsarr.join(',')
+    } else {
+        window?.$message?.warning('已经处于置顶，无法上移')
+    }
+}
+
+//
+const saveSort = () => {
+    sequenceModal.value = false
+    curItem.value.users = checkboxUserList.value
+    let userIdsarr = []
+    checkboxUserList.value.forEach((ele) => {
+        userIdsarr.push(ele.split('-')[1])
+    })
+    curItem.value.userIds = userIdsarr.join(',')
+}
+
+//确认选择
+const sureSignUserLoading = ref(false)
+const sureSignUserClick = () => {
+    let isEmptyuserIds = fixedBranchList.value.some(obj => obj.userIds === '')
+    if (isEmptyuserIds && isShowTaskName) {
+        window.$message.warning('请选择对应的任务人员和名称')
+    } else if (fixedBranchList.value.length === 0 && isShowTaskName.value) {
+        window.$message.warning('请选择对应的任务人员和任务名称')
+    } else {
+        let newUser = [], newUserId = [], users = ''
+        const dataList = deepClone(checkboxUserList.value)
+        UserDataList.value = dataList
+        if (dataList.length === 0 && !isShowTaskName.value) {
+            window.$message.warning('请选择对应的任务人员')
+            return
+        }
+        sureSignUserLoading.value = true
+        //封装数据
+        dataList.forEach(item => {
+            const itemArr = item.split('-')
+            if (itemArr.length > 0 && itemArr[0]) {
+                users = users ? `${users},${item}` : item
+                newUser.push({
+                    userId: itemArr[1],
+                    userName: itemArr[0],
+                })
+                newUserId.push(itemArr[1])
+            }
+        })
+        showModal.value = false
+        sureSignUserLoading.value = false
+        emit('change', newUser, newUserId, fixedBranchList.value)
+    }
+}
+
+const taskNameinput = ref('')
+const addTaskName = () => {
+    if (taskNameinput.value) {
+        fixedBranchList.value.push({
+            name: taskNameinput.value,
+            type: 1,
+            userIds: '',
+        })
+        taskNameinput.value = ''
+    } else {
+        window.$message.warning('请输入任务名称')
+    }
+    checkboxUserList.value = []
+    curItem.value = null
+}
+
+const delTask = async (item, index) => {
+    fixedBranchList.value.splice(index, 1)
+    checkboxUserList.value = []
+}
+const curItem = ref(null)
+const chekckTask = async (item) => {
+    await queryAllRoleList()
+    curItem.value = item
+    setUserDataList(item.users)
+}
+</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;
+        }
+        .el-checkbox-group {
+            padding-right: 20px;
+        }
+    }
+}
+</style>

src/components/hc-tasks-user-bak/style.scss

@@ -0,0 +1,168 @@
+.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;
+    .tasks-name-box{
+        flex: 1;
+        border: 2px solid #EEEEEE;
+        padding: 20px;
+        .task-list-box{
+            
+            overflow-y: auto;
+            height: calc(100% - 40px);
+      
+            .task-list-box-item{
+                margin-top: 15px;
+             
+            }
+        }
+    }
+    .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;
+            }
+        }
+    }
+}
+
+html.dark {
+    .hc-tasks-user .tasks-user-box {
+        border-color: var(--el-color-primary);
+    }
+}

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

@@ -1,125 +0,0 @@
-<template>
-    <div :class="ui" class="tasks-user-box">
-        <div class="tag-user-list" @click="userShowModal">
-            <template v-if="isShowTaskName">
-                <template v-for="(item, index) in fixedBranchList" :key="index">
-                    <el-tag>{{ item.name }}</el-tag>
-                    <hc-icon v-if="(fixedBranchList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
-                </template>
-                <div v-if="fixedBranchList.length <= 0" class="tasks-placeholder">点击这里选择任务</div>
-            </template>
-            <template v-else>
-                <template v-for="(item, index) in userDataList" :key="index">
-                    <el-tag>{{ setCheckboxUserName(item) }}</el-tag>
-                    <hc-icon v-if="(userDataList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
-                </template>
-                <div v-if="userDataList.length <= 0" class="tasks-placeholder">点击这里选择任务人</div>
-            </template>
-        </div>
-        <!-- 选择任务人 -->
-        <HcUserModal
-            v-model="isUserModalShow" :pid="projectId" :cid="contractId" :is-name="isShowTaskName"
-            :users="userDataList" :datas="fixedBranchList"
-        />
-    </div>
-</template>
-
-<script setup>
-import { onMounted, ref, watch } from 'vue'
-import { getArrValue, isNullES } from 'js-fast-way'
-import HcUserModal from './modules/user-modal.vue'
-//import tasksFlowApi from '~api/tasks/flow'
-
-//参数
-const props = defineProps({
-    ui: {
-        type: String,
-        default: '',
-    },
-    //预设流程ID
-    ids: {
-        type: [String, Number],
-        default: '',
-    },
-    //选中的用户数组
-    users: {
-        type: String,
-        default: '',
-    },
-    projectId: {
-        type: [String, Number],
-        default: '',
-    },
-    contractId: {
-        type: [String, Number],
-        default: '',
-    },
-    isShowTaskName: {
-        type: Boolean,
-        default: false,
-    },
-    fixedBranchList: {
-        type: Array,
-        default: () => ([]),
-    },
-})
-
-//事件
-const emit = defineEmits(['change'])
-
-//监听基础数据
-const dataId = ref(props.ids)
-const projectId = ref(props.projectId)
-const contractId = ref(props.contractId)
-const isShowTaskName = ref(props.isShowTaskName)
-watch(() => [props.projectId, props.contractId, props.isShowTaskName, props.id], ([pid, cid, ishow, ids]) => {
-    projectId.value = pid
-    contractId.value = cid
-    isShowTaskName.value = ishow
-    dataId.value = ids
-}, { deep:true })
-
-//监听用户数据
-const fixedBranchList = ref(props.fixedBranchList)
-watch(() => [props.users, props.fixedBranchList], ([users, list]) => {
-    setUserDataList(users)
-    fixedBranchList.value = getArrValue(list)
-}, { deep:true })
-
-//渲染完成
-onMounted(() => {
-    setUserDataList(props.users)
-    fixedBranchList.value = getArrValue(props.fixedBranchList)
-})
-
-//处理用户数据
-const userDataList = ref([])
-const setUserDataList = (users) => {
-    if (!isNullES(users)) {
-        userDataList.value = users.split(',')
-    } else {
-        userDataList.value = []
-    }
-}
-
-//展开弹窗
-const isUserModalShow = ref(false)
-const userShowModal = () => {
-    isUserModalShow.value = true
-}
-
-//处理已选择的用户问题
-const setCheckboxUserName = (item) => {
-    if (isNullES(item)) return ''
-    const itemArr = item.split('-')
-    if (itemArr.length > 0 && itemArr[0]) {
-        return itemArr[0]
-    } else {
-        return ''
-    }
-}
-</script>
-
-<style lang="scss">
-@import './style.scss';
-</style>

src/components/hc-tasks-user-new/modules/user-modal.vue

@@ -1,105 +0,0 @@
-<template>
-    <hc-dialog v-model="isShow" ui="hc-tasks-user-modal" widths="1200px" title="选择任务人" @close="modalClose">
-        <div class="card-div-1 h-full flex-1">
-            <hc-body padding="0">
-                111
-            </hc-body>
-        </div>
-        <div class="card-div-2 h-full flex-1">
-            <hc-body scrollbar padding="10px">
-                222
-            </hc-body>
-        </div>
-        <div class="card-div-3 h-full flex-[2]">
-            <hc-body padding="0">
-                333
-            </hc-body>
-        </div>
-        <template #footer>
-            <el-button @click="modalClose">取消</el-button>
-            <el-button type="primary" :loading="confirmLoading" @click="confirmClick">确定</el-button>
-        </template>
-    </hc-dialog>
-</template>
-
-<script setup>
-import { nextTick, ref, watch } from 'vue'
-import { getArrValue } from 'js-fast-way'
-import tasksFlowApi from '~api/tasks/flow'
-
-const props = defineProps({
-    pid: {
-        type: [String, Number],
-        default: '',
-    },
-    cid: {
-        type: [String, Number],
-        default: '',
-    },
-    isName: {
-        type: Boolean,
-        default: false,
-    },
-    users: {
-        type: Array,
-        default: () => ([]),
-    },
-    datas: {
-        type: Array,
-        default: () => ([]),
-    },
-})
-
-//事件
-const emit = defineEmits(['finish', 'close'])
-
-//监听基础数据
-const projectId = ref(props.pid)
-const contractId = ref(props.cid)
-const isTaskName = ref(props.isName)
-watch(() => [props.pid, props.cid, props.isName], ([pid, cid, ishow]) => {
-    projectId.value = pid
-    contractId.value = cid
-    isTaskName.value = ishow
-}, { deep:true })
-
-//监听用户数据
-const userDataList = ref(props.users)
-const fixedBranchList = ref(props.datas)
-watch(() => [props.users, props.datas], ([users, list]) => {
-    userDataList.value = getArrValue(users)
-    fixedBranchList.value = getArrValue(list)
-}, { deep:true })
-
-//双向绑定
-// eslint-disable-next-line no-undef
-const isShow = defineModel('modelValue', { default: false })
-
-//监听
-watch(isShow, (val) => {
-    if (val) {
-        nextTick(() => {
-            setInitData()
-        })
-    }
-})
-
-//初始化数据
-const setInitData = () => {
-    console.log(userDataList.value)
-    console.log(fixedBranchList.value)
-}
-
-//确认
-const confirmLoading = ref(false)
-const confirmClick = () => {
-    emit('finish')
-    modalClose()
-}
-
-//关闭
-const modalClose = () => {
-    isShow.value = false
-    emit('close')
-}
-</script>

src/components/hc-tasks-user-new/style.scss

@@ -1,50 +0,0 @@
-.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-tasks-user-modal {
-    height: 650px;
-    .el-dialog__body {
-        padding: 0;
-        height: 100%;
-        display: flex;
-    }
-    .card-div-1 {
-        position: relative;
-        border-left: 1px solid;
-        border-right: 1px solid;
-        border-color: #EEEEEE;
-    }
-    .card-div-2 {
-        position: relative;
-    }
-    .card-div-3 {
-        position: relative;
-        border-left: 1px solid;
-        border-right: 1px solid;
-        border-color: #EEEEEE;
-    }
-}

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

@@ -1,146 +1,21 @@
 <template>
-    <div :class="ui" class="hc-tasks-user">
-        <div class="tasks-user-box">
-            <div class="tag-user-list" @click="showModalClick">
-                <template v-if="isShowTaskName">
-                    <template v-for="(item, index) in fixedBranchList" :key="index">
-                        <el-tag>{{ item.name }}</el-tag>
-                        <HcIcon v-if="(fixedBranchList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
-                    </template>
-                    <div v-if="fixedBranchList.length <= 0" class="tasks-placeholder">点击这里选择任务</div>
-                </template>
-                <template v-else>
-                    <template v-for="(item, index) in UserDataList" :key="index">
-                        <el-tag>{{ setCheckboxUserName(item) }}</el-tag>
-                        <HcIcon v-if="(UserDataList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
-                    </template>
-                    <div v-if="UserDataList.length <= 0" class="tasks-placeholder">点击这里选择任务人</div>
-                </template>
-            </div>
+    <div :class="ui" class="tasks-user-box">
+        <div class="tag-user-list" @click="userShowModal">
+            <template v-for="(item, index) in fixedData" :key="index">
+                <el-tag>{{ item.name }}</el-tag>
+                <hc-icon v-if="(fixedData.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
+            </template>
+            <div v-if="fixedData.length <= 0" class="tasks-placeholder">点击这里选择任务</div>
         </div>
-
         <!-- 选择任务人 -->
-        <el-dialog v-model="showModal" title="选择任务人" width="62rem" class="hc-modal-border hc-modal-nop" draggable destroy-on-close>
-            <div class="hc-tasks-user-modal-content-box">
-                <div v-if="isShowTaskName" class="tasks-name-box">
-                    <p class="mb-2">创建任务人流程</p>
-                    <div class="flex pt-2">
-                        <el-input v-model="taskNameinput" placeholder="请输入" size="default" class="mr-4" />
-                        <el-button type="primary" size="default" @click="addTaskName">添加</el-button>
-                    </div>
-                    <div class="task-list-box">
-                        <div v-for="(item, index) in fixedBranchList" :key="index" class="task-list-box-item">
-                            <el-tooltip :content="item.type === 1 ? '流程审批' : '平行审批'" placement="right">
-                                <el-button size="default" :color="curItem?.name === item.name ? 'orange' : ''" @click="chekckTask(item)">
-                                    {{ item.name }}
-                                    <HcIcon v-if="item.type === 2" name="links" class="ml-2" @click="item.type = 1" />
-                                    <HcIcon v-if="item.type === 1" name="exchange-2" class="ml-2" @click="item.type = 2" />
-                                    <HcIcon name="close" class="ml-2" @click="delTask(item, index)" />
-                                </el-button>
-                            </el-tooltip>
-                        </div>
-                    </div>
-                </div>
-                <div class="tree-box">
-                    <el-scrollbar>
-                        <ElTree
-                            class="hc-tree-node-box" :props="ElTreeProps" :data="ElTreeData" node-key="roleId"
-                            highlight-current accordion :default-expanded-keys="[0]" @node-click="ElTreeNodeClick"
-                        />
-                    </el-scrollbar>
-                </div>
-                <div class="user-box">
-                    <div class="y-user-list-box">
-                        <div class="title-box">
-                            <div class="title">可选择</div>
-                        </div>
-                        <div class="user-list">
-                            <el-scrollbar>
-                                <el-checkbox-group v-model="checkboxUserList">
-                                    <template v-for="item in signUserList" :key="item.certificateUserId">
-                                        <div class="user-item checkbox-li">
-                                            <el-checkbox :value="`${item.certificateUserName}-${item.certificateUserId}`" :disabled="item.isDisa">
-                                                <div class="item-user-name">{{ item.certificateUserName }}</div>
-                                            </el-checkbox>
-                                        </div>
-                                    </template>
-                                </el-checkbox-group>
-                            </el-scrollbar>
-                        </div>
-                    </div>
-                    <div class="s-user-list-box">
-                        <div class="title-box">
-                            <div class="title">已选择({{ checkboxUserList.length }})</div>
-                            <el-button plain size="small" @click="sequenceModal = true">调整顺序</el-button>
-                        </div>
-                        <div class="user-list">
-                            <el-scrollbar>
-                                <template v-for="(item, index) in checkboxUserList" :key="index">
-                                    <el-tag closable @close="delCheckboxUser(item, index)">{{ setCheckboxUserName(item) }}</el-tag>
-                                </template>
-                            </el-scrollbar>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button hc-btn style="border: 1px solid var(--el-button-border-color);" @click="showModal = false">
-                        <HcIcon name="close" />
-                        <span>取消</span>
-                    </el-button>
-                    <el-button hc-btn type="primary" :loading="sureSignUserLoading" @click="sureSignUserClick">
-                        <HcIcon name="check" />
-                        <span>确定</span>
-                    </el-button>
-                </div>
-            </template>
-        </el-dialog>
-
-        <!-- 调整顺序 -->
-        <el-dialog v-model="sequenceModal" title="调整顺序" width="38rem" class="hc-modal-border" draggable destroy-on-close append-to-body>
-            <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="warning" :closable="false" />
-            <div class="sort-node-body-box list-group header">
-                <div class="list-group-item">
-                    <div class="index-box">序号</div>
-                    <div class="title-box">任务人</div>
-                    <div class="icon-box">排序</div>
-                </div>
-            </div>
-            <Draggable
-                class="sort-node-body-box list-group" ghost-class="ghost" :list="checkboxUserList" item-key="id"
-                @start="sortNodeDrag = true" @end="sortNodeDrag = false"
-            >
-                <template #item="{ element, index }">
-                    <div class="list-group-item">
-                        <div class="index-box">{{ index + 1 }}</div>
-                        <div class="title-box">{{ setCheckboxUserName(element) }}</div>
-                        <div class="icon-box">
-                            <span class="icon" @click="downSortClick(index, element)">
-                                <HcIcon name="arrow-down" ui="text-lg" />
-                            </span>
-                            <span class="icon" @click="upSortClick(index, element)">
-                                <HcIcon name="arrow-up" ui="text-lg" />
-                            </span>
-                        </div>
-                    </div>
-                </template>
-            </Draggable>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button size="large" @click="sequenceModal = false">取消</el-button>
-                    <el-button type="primary" size="large" @click="saveSort">确认</el-button>
-                </div>
-            </template>
-        </el-dialog>
+        <HcUserModal v-model="isUserModalShow" :data="fixedData" :datas="dataInfo" @finish="fixedUserFinish" />
     </div>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue'
-import tasksFlowApi from '~api/tasks/flow'
-import { arrToKey, deepClone, getArrValue } from 'js-fast-way'
-import Draggable from 'vuedraggable'
+import { ref, watch } from 'vue'
+import { getArrValue, getObjValue } from 'js-fast-way'
+import HcUserModal from './modules/user-modal.vue'
 
 //参数
 const props = defineProps({
@@ -148,363 +23,44 @@ const props = defineProps({
         type: String,
         default: '',
     },
-    //选中的用户数组
-    users: {
-        type: String,
-        default: '',
-    },
-    projectId: {
-        type: [String, Number],
-        default: '',
-    },
-    contractId: {
-        type: [String, Number],
-        default: '',
-    },
-    isShowTaskName: {
-        type: Boolean,
-        default: false,
-    },
-    id: {
-        type: [String, Number],
-        default: '', //预设流程ID
-    },
-    fixedBranchList: {
-        type: Array,
-        default: () => ([]),
+    data: {
+        type: Object,
+        default: () => ({}),
     },
 })
+
 //事件
 const emit = defineEmits(['change'])
-const isShowTaskName = ref(props.isShowTaskName)
-//变量
-const showModal = ref(false)
-const sequenceModal = ref(false)
-const checkboxUserList = ref([])
-const UserDataList = ref([])
-const projectId = ref(props.projectId)
-const contractId = ref(props.contractId)
-const id = ref(props.id)
-const fixedBranchList = ref(props.fixedBranchList)
 
-//树数据
-const ElTreeProps = { children: 'childRoleList', label: 'roleName' }
-const ElTreeData = ref([{
-    roleName: '全部人员',
-    roleId: 0,
-    childRoleList: [],
-    signPfxFileList: [],
-}])
-
-//监听
-watch(() => [
-    props.users,
-    props.projectId,
-    props.contractId,
-    props.isShowTaskName,
-    props.id,
-    props.fixedBranchList,
-], ([users, pid, cid, ishow, Id, list]) => {
-    projectId.value = pid
-    contractId.value = cid
-    setUserDataList(users)
-    isShowTaskName.value = ishow
-    id.value = Id
-    fixedBranchList.value = list
-    fixedBranchList.value.forEach((ele) => {
-        let userList = getArrValue(ele.userList)
-        ele.userIds = arrToKey(userList, 'userId', ',') // '1,2,3'
-        let users = ''
-        for (let index = 0; index < userList.length; index++) {
-            const element = userList[index]
-            if (users) {
-                users += `,${element['userName']}-${element['userId']}`
-            } else {
-                users = `${element['userName']}-${element['userId']}`
-            }
-        }
-        ele.users = users
-        delete ele.userList
-    })
-    if (fixedBranchList.value.length > 0) {
-        curItem.value = fixedBranchList.value[0]
-        chekckTask(curItem.value)
-    }
+//双向绑定
+const datas = defineModel('modelValue', {
+    default: () => ([]),
 })
 
-//监听
-watch(() => checkboxUserList.value, (list) => {
-    let newUser = [], newUserId = [], users = ''
-    const dataList = deepClone(checkboxUserList.value)
-    UserDataList.value = dataList
-    if (dataList.length > 0) {
-        //封装数据
-        dataList.forEach(item => {
-            const itemArr = item.split('-')
-            if (itemArr.length > 0 && itemArr[0]) {
-                users = users ? `${users},${item}` : item
-                newUser.push({
-                    userId: itemArr[1],
-                    userName: itemArr[0],
-                })
-                newUserId.push(itemArr[1])
-            }
-        })
-        if (curItem.value) {
-            curItem.value.userIds = newUserId.join(',')
-            curItem.value.users = users
-        }
-    }
-})
+//监听基础数据
+const dataInfo = ref(props.data)
+watch(() => props.data, (data) => {
+    dataInfo.value = getObjValue(data)
+}, { deep: true, immediate: true })
 
-//渲染完成
-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 fixedData = ref([])
+watch(() => datas.value, (data) => {
+    fixedData.value = getArrValue(data)
+}, { deep: true, immediate: true })
 
 //展开弹窗
-const showModalClick = () => {
-    showModal.value = true
-}
-
-//获取系统所有角色划分
-const signUserList = ref([])
-const queryAllRoleList = async () => {
-    const { error, code, data } = await tasksFlowApi.queryAllRoleList({
-        contractId: contractId.value,
-    })
-    //处理数据
-    if (!error && code === 200) {
-        let signList = [], dataArr = getArrValue(data)
-        ElTreeData.value[0].childRoleList = dataArr
-        if (dataArr.length > 0) {
-            dataArr.forEach(item => {
-                signList = signList.concat(item.signPfxFileList)
-            })
-        }
-        ElTreeData.value[0].signPfxFileList = signList
-        signUserList.value = signList
-    } else {
-        signUserList.value = []
-        ElTreeData.value[0].childRoleList = []
-        ElTreeData.value[0].signPfxFileList = []
-    }
-}
-
-//树被点击
-const ElTreeNodeClick = (data) => {
-    signUserList.value = getArrValue(data?.signPfxFileList)
-}
-
-//处理已选择的用户问题
-const setCheckboxUserName = (item) => {
-    if (item) {
-        const itemArr = item.split('-')
-        if (itemArr.length > 0 && itemArr[0]) {
-            return itemArr[0]
-        } else {
-            return ''
-        }
-    } else {
-        return ''
-    }
-}
-
-//删除已选择的用户
-const delCheckboxUser = (item, index) => {
-    checkboxUserList.value.splice(index, 1)
-    let delId = item.split('-')[1]
-    fixedBranchList.value.forEach((ele) => {
-        let arr = ele.userIds.split(',')
-        arr.forEach((ele1, index1) => {
-            if (ele1 === delId) {
-                arr.splice(index1, 1)
-            }
-        })
-        let arr1 = ele.users.split(',')
-        arr1.forEach((ele2, index2) => {
-            if (ele2.split('-')[1] === delId) {
-                arr1.splice(index2, 1)
-            }
-        })
-        ele.userIds = arr.join(',')
-        ele.users = arr1.join(',')
-    })
-    signUserList.value.forEach((ele) => {
-        if (delId === ele.certificateUserId) {
-            ele.isDisa = false
-        }
-    })
-}
-
-//排序
-const sortNodeDrag = ref(false)
-//向下
-const downSortClick = (index, elemnt) => {
-    const indexs = index + 1
-    const data = checkboxUserList.value
-    if (indexs !== data.length) {
-        const tmp = data.splice(indexs, 1)
-        checkboxUserList.value.splice(index, 0, tmp[0])
-        curItem.value.users = data.join(',')
-        let userIdsarr = []
-        data.forEach((ele) => {
-            userIdsarr.push(ele.split('-')[1])
-        })
-        curItem.value.userIds = userIdsarr.join(',')
-    } else {
-        window?.$message?.warning('已经处于置底，无法下移')
-    }
-}
-
-//向上
-const upSortClick = (index, elemnt) => {
-    const data = checkboxUserList.value || []
-    if (index !== 0) {
-        const tmp = data.splice(index - 1, 1)
-        checkboxUserList.value.splice(index, 0, tmp[0])
-        curItem.value.users = data.join(',')
-        let userIdsarr = []
-        data.forEach((ele) => {
-            userIdsarr.push(ele.split('-')[1])
-        })
-        curItem.value.userIds = userIdsarr.join(',')
-    } else {
-        window?.$message?.warning('已经处于置顶，无法上移')
-    }
+const isUserModalShow = ref(false)
+const userShowModal = () => {
+    isUserModalShow.value = true
 }
 
-//
-const saveSort = () => {
-    sequenceModal.value = false
-    curItem.value.users = checkboxUserList.value
-    let userIdsarr = []
-    checkboxUserList.value.forEach((ele) => {
-        userIdsarr.push(ele.split('-')[1])
-    })
-    curItem.value.userIds = userIdsarr.join(',')
-}
-
-//确认选择
-const sureSignUserLoading = ref(false)
-const sureSignUserClick = () => {
-    let isEmptyuserIds = fixedBranchList.value.some(obj => obj.userIds === '')
-    if (isEmptyuserIds && isShowTaskName) {
-        window.$message.warning('请选择对应的任务人员和名称')
-    } else if (fixedBranchList.value.length === 0 && isShowTaskName.value) {
-        window.$message.warning('请选择对应的任务人员和任务名称')
-    } else {
-        let newUser = [], newUserId = [], users = ''
-        const dataList = deepClone(checkboxUserList.value)
-        UserDataList.value = dataList
-        if (dataList.length === 0 && !isShowTaskName.value) {
-            window.$message.warning('请选择对应的任务人员')
-            return
-        }
-        sureSignUserLoading.value = true
-        //封装数据
-        dataList.forEach(item => {
-            const itemArr = item.split('-')
-            if (itemArr.length > 0 && itemArr[0]) {
-                users = users ? `${users},${item}` : item
-                newUser.push({
-                    userId: itemArr[1],
-                    userName: itemArr[0],
-                })
-                newUserId.push(itemArr[1])
-            }
-        })
-        showModal.value = false
-        sureSignUserLoading.value = false
-        emit('change', newUser, newUserId, fixedBranchList.value)
-    }
-}
-
-const taskNameinput = ref('')
-const addTaskName = () => {
-    if (taskNameinput.value) {
-        fixedBranchList.value.push({
-            name: taskNameinput.value,
-            type: 1,
-            userIds: '',
-        })
-        taskNameinput.value = ''
-    } else {
-        window.$message.warning('请输入任务名称')
-    }
-    checkboxUserList.value = []
-    curItem.value = null
-}
-
-const delTask = async (item, index) => {
-    fixedBranchList.value.splice(index, 1)
-    checkboxUserList.value = []
-}
-const curItem = ref(null)
-const chekckTask = async (item) => {
-    await queryAllRoleList()
-    curItem.value = item
-    setUserDataList(item.users)
+//选择完成
+const fixedUserFinish = (data) => {
+    console.log(data)
 }
 </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;
-        }
-        .el-checkbox-group {
-            padding-right: 20px;
-        }
-    }
-}
+@import './style.scss';
 </style>

src/components/hc-tasks-user/modules/user-modal.vue

@@ -0,0 +1,347 @@
+<template>
+    <hc-dialog v-model="isShow" ui="hc-tasks-user-modal" widths="1195px" title="选择任务人" @close="modalClose">
+        <div class="card-div-1 h-full w-235px">
+            <hc-body scrollbar padding="0">
+                <div class="hc-process-item">
+                    <div class="process setup">
+                        <div class="icon hc-flex-center">
+                            <i class="i-hugeicons-flowchart-01" />
+                        </div>
+                        <div class="name">流程设置</div>
+                    </div>
+                </div>
+                <template v-for="(item, index) in fixedData" :key="index">
+                    <div class="hc-process-item">
+                        <div
+                            class="process content"
+                            :class="fixedIndex === index ? 's-orange' : item.isDataAdd ? 's-gray' : item.isDataSave ? 's-blue' : 's-gray'"
+                            @click.capture="fixedItemClick(item, index)"
+                        >
+                            <div class="icon hc-flex-center" @click="fixedTypeClick(item)">
+                                <i :class="getProcessIcon(item)" />
+                            </div>
+                            <div class="input-box">
+                                <div class="width-name">{{ item.name }}</div>
+                                <input v-model="item.name" class="input">
+                            </div>
+                            <div class="del-icon hc-flex-center" @click="fixedDelClick(item, index)">
+                                <i class="i-ri-delete-bin-2-line" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+                <div class="hc-process-item">
+                    <div class="process add" @click="fixedAddClick">
+                        <div class="icon hc-flex-center">
+                            <i class="i-iconoir-plus" />
+                        </div>
+                    </div>
+                </div>
+            </hc-body>
+        </div>
+        <div v-if="fixedIndex === -1" class="card-div-no h-full flex-1">
+            <hc-empty :src="HcLoadSvg" title="请选择流程后，设置流程人员" />
+        </div>
+        <template v-else>
+            <div class="card-div-2 h-full w-235px">
+                <hc-card scrollbar title="角色类型">
+                    <template v-for="(item, index) in signUserList" :key="index">
+                        <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-235px">
+                <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, index) in positionList" :key="index">
+                        <div class="hc-tasks-user-role-item" :class="{ cur: positionItem.roleId === item.roleId }" @click="positionItemClick(item)">
+                            {{ item.roleName }}
+                        </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-235px">
+                <hc-card v-if="fixedItem?.userList?.length > 0" scrollbar>
+                    <template #header>
+                        <span>已选择{{ fixedItem?.userList?.length || 0 }}人</span>
+                    </template>
+                    <template #extra>
+                        <el-button type="warning" size="small">调整排序</el-button>
+                    </template>
+                    <div class="hc-tasks-user-cur-box flex gap-2">
+                        <template v-for="(item, index) in fixedItem?.userList" :key="index">
+                            <el-tag closable @close="fixedItemUserListDel(index)">
+                                <i class="i-ri-user-3-fill mr-5px" />
+                                <span>{{ item.userName }}</span>
+                            </el-tag>
+                        </template>
+                    </div>
+                    <template #action>
+                        <el-button block size="default" type="success" @click="singleSaveClick">保存</el-button>
+                    </template>
+                </hc-card>
+                <div v-else class="card-empty-no">
+                    <hc-empty :src="HcLoadSvg" title="请先选择人员" />
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <el-button @click="modalClose">取消</el-button>
+            <el-button type="primary" :loading="confirmLoading" @click="confirmClick">确定</el-button>
+        </template>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
+import { pinyin } from 'pinyin-pro'
+import HcLoadSvg from '~src/assets/view/load.svg'
+import mainApi from '~api/tasks/flow'
+import { deepClone, getArrValue, getObjValue, isNullES } from 'js-fast-way'
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => ([]),
+    },
+    datas: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+const emit = defineEmits(['finish', 'close', 'update:modelValue'])
+
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+const dataInfo = ref(props.datas)
+watch(() => props.datas, (data) => {
+    dataInfo.value = getObjValue(data)
+}, { deep: true, immediate: true })
+
+const fixedData = ref([])
+watch(() => props.data, (data) => {
+    const res = getArrValue(data)
+    fixedData.value = deepClone(res)
+}, { deep: true, immediate: true })
+
+watch(isShow, (val) => {
+    if (val) setInitData()
+})
+
+const setInitData = async () => {
+    await nextTick()
+    fixedData.value.forEach(item => {
+        item.isDataSave = true
+    })
+}
+
+const fixedIndex = ref(-1)
+const fixedItem = ref({})
+const fixedItemClick = (item, index) => {
+    item.isDataAdd = false
+    fixedIndex.value = index
+    fixedItem.value = item
+    getAllRoleList()
+}
+
+const getProcessIcon = (item) => {
+    return item.type === 1 ? 'i-hugeicons-workflow-square-03' : 'i-hugeicons-workflow-square-06'
+}
+
+const fixedTypeClick = (item) => {
+    item.type = item.type === 1 ? 2 : 1
+}
+
+const fixedAddClick = () => {
+    fixedData.value.push({
+        type: 1,
+        name: '流程审批名称',
+        isDataAdd: true,
+        isDataSave: false,
+        userList: [],
+    })
+}
+
+const fixedDelClick = (item, index) => {
+    HcDelMsg({
+        title: '确认删除任务流程？',
+        text: `确认是否需要删除【${item.name}】？`,
+    }, (resolve) => {
+        fixedData.value?.splice(index, 1)
+        if (fixedIndex.value === index) {
+            fixedIndex.value = -1
+        }
+        resolve()
+    })
+}
+
+const signUserList = ref([])
+const getAllRoleList = async () => {
+    const { contractId } = getObjValue(dataInfo.value)
+    const { data } = await mainApi.queryAllRoleList({ contractId })
+    signUserList.value = getArrValue(data)
+}
+
+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 letterName = getFirstLetter(key)
+    const filteredData = arr.filter(({ certificateUserName, letter }) => {
+        return certificateUserName.toLowerCase().includes(key.toLowerCase()) || letter.toLowerCase().includes(letterName.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 }) => {
+    const arr = fixedData.value, index = fixedIndex.value
+    const list = getArrValue(arr[index]?.userList)
+    list.push({ userId: certificateUserId, userName: certificateUserName })
+    fixedData.value[index].userList = list
+    fixedItem.value = fixedData.value[index]
+}
+
+const fixedItemUserListDel = (index) => {
+    const arr = fixedData.value, i = fixedIndex.value
+    const list = getArrValue(arr[i]?.userList)
+    list.splice(index, 1)
+    fixedData.value[i].userList = list
+    fixedItem.value = fixedData.value[i]
+}
+
+const singleSaveClick = () => {
+    const arr = getArrValue(fixedItem.value?.userList)
+    if (arr.length <= 0) {
+        window.$message.warning('请选择对应的任务人员')
+        return
+    }
+    window.$message.success('保存成功')
+}
+
+const confirmLoading = ref(false)
+const confirmClick = async () => {
+    const list = fixedData.value
+    if (list.length <= 0) {
+        window.$message.warning('请先创建人物流程和选择任务人')
+        return
+    }
+    //验证数组
+    let isRes = true
+    for (let i = 0; i < list.length; i++) {
+        const { name, userList } = list[i]
+        if (userList.length <= 0) {
+            isRes = false
+            window.$message.warning(name + '，中没有选择任务人')
+            break
+        }
+    }
+    if (!isRes) return
+    emit('finish', list)
+    modalClose()
+}
+
+const modalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>

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

@@ -1,168 +1,354 @@
-.hc-tasks-user {
+.tasks-user-box {
     position: relative;
-    .tasks-user-box {
+    padding: 0 12px;
+    cursor: pointer;
+    min-height: 40px;
+    border: 1px solid #e0e0e6;
+    border-radius: 4px;
+    .tag-user-list {
         position: relative;
-        border: 1px solid #e0e0e6;
-        border-radius: 4px;
-        padding: 0 12px;
-        cursor: pointer;
-        min-height: 40px;
-        .tag-user-list {
+        display: flex;
+        align-items: center;
+        flex-flow: row wrap;
+        min-height: inherit;
+        .tasks-placeholder {
+            color: #a9abb2;
+            font-size: 14px;
+        }
+        .arrow-icon-tag {
             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;
-            }
+            color: #a9abb2;
+            font-size: 18px;
+            margin: 0 8px;
         }
     }
 }
 
-.hc-tasks-user-modal-content-box {
-    position: relative;
-    display: flex;
-    height: 460px;
-    .tasks-name-box{
-        flex: 1;
-        border: 2px solid #EEEEEE;
-        padding: 20px;
-        .task-list-box{
-            
-            overflow-y: auto;
-            height: calc(100% - 40px);
-      
-            .task-list-box-item{
-                margin-top: 15px;
-             
-            }
-        }
-    }
-    .tree-box {
-        flex: 1;
-        user-select: none;
-        position: relative;
-        padding: 20px;
-        overflow: hidden;
-        border-right: 1px solid #EEEEEE;
+//选择任务人弹窗
+.el-overlay-dialog .el-dialog.hc-tasks-user-modal {
+    height: 650px;
+    .el-dialog__body {
+        padding: 0;
+        height: 100%;
+        display: flex;
     }
-    .user-box {
-        flex: 2;
+    .card-div-1 {
         position: relative;
-        display: flex;
-        flex-direction: column;
-        .y-user-list-box, .s-user-list-box {
+        border-left: 1px solid;
+        border-color: #EEEEEE;
+        .hc-process-item {
             position: relative;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            .title-box {
+            margin-top: 24px;
+            .process {
                 position: relative;
-                padding: 2px 24px;
-                display: flex;
+                cursor: pointer;
+                height: 34px;
+                display: inline-flex;
                 align-items: center;
-                border-bottom: 1px solid #EEEEEE;
-                background-color: #F8F8F8;
-                color: #838791;
-                .title {
-                    flex: auto;
+                border: 1px solid;
+                border-radius: 0 50px 50px 0;
+                transition: all .2s;
+                .icon {
+                    position: relative;
+                    height: 34px;
+                    width: 34px;
+                    transition: all .2s;
+                    i {
+                        display: inline-flex;
+                        font-size: 18px;
+                    }
                 }
-            }
-            .user-list {
-                position: relative;
-                overflow: hidden;
-                padding: 0 24px;
-                .user-item {
+                .name {
+                    padding: 10px 24px 10px 10px;
+                }
+                .del-icon {
                     position: relative;
-                    padding: 4px 0;
+                    height: 34px;
+                    width: 0;
+                    color: white;
+                    background: #ff5151;
+                    border-radius: 0 50px 50px 0;
+                    transition: all .3s;
+                    i {
+                        display: inline-flex;
+                        font-size: 18px;
+                    }
+                }
+                &.setup {
+                    color: white;
+                    background: #2550A2;
+                    border-color: #2550A2;
+                    &:hover {
+                        background: #0058ff;
+                        border-color: #0058ff;
+                    }
+                    .name {
+                        padding-left: 0;
+                        padding-right: 16px;
+                    }
                 }
-                .user-item + .user-item {
-                    border-top: 1px dashed #EEEEEE;
+                &.content {
+                    color: #FF7D43;
+                    background: #FFE3D7;
+                    border-color: #FF7D43;
+                    .icon {
+                        color: white;
+                        background: #FF7D43;
+                        &:hover {
+                            opacity: .6;
+                        }
+                    }
+                    .input-box {
+                        position: relative;
+                        height: 100%;
+                        .width-name {
+                            position: relative;
+                            padding-right: 26px;
+                            visibility: hidden;
+                        }
+                        .input {
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            height: 100%;
+                            border: none;
+                            padding: 0 0 0 10px;
+                            width: calc(100% - 10px);
+                            background: transparent;
+                            &:focus {
+                                border: none;
+                                outline: none;
+                            }
+                        }
+                    }
+                    &.s-gray {
+                        color: #101010;
+                        background: white;
+                        border-color: #BBBBBB;
+                        .icon {
+                            color: #101010;
+                            background: #BBBBBB;
+                        }
+                        .input-box .input {
+                            color: #101010;
+                        }
+                        &:hover {
+                            background: #efefef;
+                        }
+                    }
+                    &.s-orange {
+                        color: #FF7D43;
+                        background: #FFE3D7;
+                        border-color: #FF7D43;
+                        .icon {
+                            color: white;
+                            background: #FF7D43;
+                        }
+                        .input-box .input {
+                            color: #FF7D43;
+                        }
+                    }
+                    &.s-blue {
+                        color: #3A85E9;
+                        background: #D7E6FB;
+                        border-color: #3A85E9;
+                        .icon {
+                            color: white;
+                            background: #3A85E9;
+                        }
+                        .input-box .input {
+                            color: #3A85E9;
+                        }
+                        &:hover {
+                            background: #c5d9f6;
+                        }
+                    }
+                    &:hover {
+                        .del-icon {
+                            width: 34px;
+                        }
+                    }
+                }
+                &.add {
+                    color: white;
+                    background: #3984EF;
+                    border-color: #3984EF;
+                    padding-right: 4px;
+                    &:hover {
+                        background: #2550A2;
+                        border-color: #2550A2;
+                    }
+                    .icon i {
+                        font-size: 24px;
+                    }
                 }
             }
         }
-        .y-user-list-box {
-            flex: 1;
-            .user-list {
-                flex: 1;
+        .hc-process-item + .hc-process-item {
+            &::before{
+                content: "";
+                position: absolute;
+                background: #BBBBBB;
+                top: -24px;
+                height: 24px;
+                width: 1.5px;
+                left: 17px;
             }
         }
-        .s-user-list-box {
-            position: relative;
-            border-top: 1px solid #EEEEEE;
-            .user-list {
-                height: 6rem;
-            }
+        .hc-process-item:first-child {
+            margin-top: 14px;
         }
     }
-}
-
-.sort-node-body-box.list-group {
-    position: relative;
-    min-height: 20px;
-    border: 1px solid #EEEEEE;
-    .list-group-item {
+    .card-div-no, .card-empty-no {
         position: relative;
-        display: flex;
-        align-items: center;
-        padding: 6px 15px;
-        cursor: move;
-        transition: background 0.2s;
-        .index-box {
-            position: relative;
-            width: 50px;
+        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;
+        &: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;
         }
-        .title-box {
+    }
+    .hc-sign-pfx-file-item {
+        position: relative;
+        background: #f7f7f7;
+        .hc-tasks-user-letter {
             position: relative;
-            padding-right: 24px;
-            flex: 1;
+            font-weight: bold;
+            padding: 6px 6px;
+            border-bottom: 1px solid #eee;
         }
-        .icon-box {
+        .hc-tasks-user-item {
             position: relative;
-            font-size: 18px;
+            color: #1F222A;
+            background: white;
+            cursor: pointer;
+            padding: 6px 6px;
+            border-radius: 3px;
+            transition: all .2s;
             display: flex;
             align-items: center;
-            .icon {
-                cursor: pointer;
-                display: flex;
-                align-items: center;
+            i {
+                font-size: 16px;
+                display: inline-block;
+            }
+            &:hover {
+                color: #3A85E9;
+                background: #f2f3f5;
+            }
+            &.cur {
+                color: #3A85E9;
+                background: #EDF3FF;
             }
-        }
-        &: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;
+    //字母索引
+    .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;
             }
         }
     }
-}
-
-html.dark {
-    .hc-tasks-user .tasks-user-box {
-        border-color: var(--el-color-primary);
+    //已选择列表
+    .hc-tasks-user-cur-box {
+        position: relative;
+        flex-wrap: wrap;
+        .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/config/index.js

@@ -22,7 +22,7 @@ export default {
     //其它地址
     ossUrl: 'https://blade-oss-chongqing.oss-cn-shenzhen.aliyuncs.com', //oss地址
     //线上还没有，先关掉，防止他一直连接失败
-    //socket: 'ws://192.168.0.125:9527/websocket',
+    socket: 'ws://192.168.0.109:19527/websocket',
     socketLimit: 10, //连接失败后，最大重连次数
     socketInterval: 10000, //连接失败后，每次重连的间隔时间，单位毫秒。
 

src/layout/index.vue

@@ -45,14 +45,12 @@
 </template>
 
 <script setup>
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
-import { getToken } from '~src/api/auth'
 import { useRoute, useRouter } from 'vue-router'
 import { initButtons } from '~sto/app'
-import { isNullES, useClick } from 'js-fast-way'
+import { getObjValue, isNullES, useClick } from 'js-fast-way'
 import { HcSocket } from '~src/plugins/HcSocket'
-import messageApi from '~api/tasks/message'
 
 //初始组合式
 const router = useRouter()
@@ -125,48 +123,18 @@ const menuBarChange = ({ code }) => {
 
 //项目合同段的ID
 let socket
-const timeExamples = ref()
-const times = ref(10000)
+const taskCount = ref(0)
 const cascaderSend = async ({ projectId, contractId }) => {
     await useClick()
-    //合同段id为空，清空定时器
-    if (isNullES(contractId)) {
-        if (!isNullES(timeExamples.value)) clearInterval(timeExamples.value)
-        return
-    }
+    if (isNullES(contractId)) return
     //链接webSocket
     if (!isNullES(socket)) socket.close()
-    socket = new HcSocket({ projectId, contractId, userId: userId.value }, (data) => {
-        console.log('socket:', data)
+    socket = new HcSocket({ projectId, contractId, userId: userId.value }, ({ data }) => {
+        const res = getObjValue(data)
+        if (res.type === 'msgRemind') {
+            taskCount.value = res.data ?? 0
+        }
     })
-    //先获取一次
-    await getUnreadMessage({ projectId, contractId })
-    //切换项目合同段时，先清空轮询
-    if (!isNullES(timeExamples.value)) clearInterval(timeExamples.value)
-    //定时轮询获取数据
-    timeExamples.value = setInterval(async () => {
-        await getUnreadMessage({ projectId, contractId })
-    }, times.value)
-}
-
-//获取未读消息数量
-const taskCount = ref(0)
-const getUnreadMessage = async ({ projectId, contractId }) => {
-    //如果退出登录了，清空轮询
-    if (isNullES(getToken())) {
-        if (!isNullES(timeExamples.value)) clearInterval(timeExamples.value)
-        return
-    }
-    //获取数据
-    const { isRes, data } = await messageApi.getUnreadMessage({
-        projectId, contractId,
-    })
-    taskCount.value = data ?? 0
-    if (isRes) {
-        times.value = 10000
-    } else {
-        times.value = 300000 //5分钟
-    }
 }
 
 //用户信息
@@ -187,6 +155,11 @@ const cascaderChange = () => {
 const logoClick = () => {
     router.push({ name: 'home-index' })
 }
+
+//页面卸载
+onUnmounted(() => {
+    if (!isNullES(socket)) socket.close()
+})
 </script>
 
 <style lang="scss">

src/views/tasks/flow.vue

@@ -33,11 +33,7 @@
                     <el-input v-model="flowFormData.fixedName" placeholder="请输入流程名称" />
                 </el-form-item>
                 <el-form-item label="选择任务人" prop="fixedBranchList">
-                    <hc-tasks-user
-                        :id="changeId" :contract-id="contractId" :project-id="projectId"
-                        :users="linkUserJoinString" ui="w-full" :is-show-task-name="true"
-                        :fixed-branch-list="flowFormData.fixedBranchList" @change="tasksUserChange"
-                    />
+                    <hc-tasks-user v-model="flowFormData.fixedBranchList" :data="fixedData" ui="w-full" />
                 </el-form-item>
             </el-form>
             <template #footer>
@@ -120,13 +116,7 @@ const tableColumn = ref([
     { key: 'linkUserJoinString', name: '流程详情' },
     { key: 'action', name: '操作', width: 94 },
 ])
-const sorttableColumn = ref([
-    { key: 'fixedFlowName', name: '流程名称' },
-    { key: 'linkUserJoinString', name: '流程详情' },
-
-])
 const tableData = ref([])
-const sorttableData = ref([])
 const getTableData = async () => {
     tableLoading.value = true
     const { error, code, data } = await tasksFlowApi.getPageData({
@@ -148,43 +138,40 @@ const getTableData = async () => {
 }
 
 //新建流程
+const fixedData = ref({})
 const addFlowData = () => {
     flowFormData.value = { id: '', fixedName: '', fixedBranchList: [] }
-    linkUserJoinString.value = ''
+    fixedData.value = {
+        projectId: projectId.value,
+        contractId: contractId.value,
+    }
     showEditModal.value = true
 }
 
-
 //编辑流程
-const linkUserJoinString = ref(null)
 const changeId = ref('')
 const handleTableEdit = async (row) => {
     changeId.value = row.id
-
+    fixedData.value = {
+        id: row.id,
+        projectId: projectId.value,
+        contractId: contractId.value,
+    }
     showEditModal.value = true
-    getFlowDetail()
-
+    getFlowDetail().then()
 }
+
 const getFlowDetail = async () => {
-    const { error, code, data } = await tasksFlowApi.queryFixedFlowDetail({ id: changeId.value })
+    const { error, code, data } = await tasksFlowApi.queryFixedFlowDetail({
+        id: changeId.value,
+    })
     if (!error && code === 200) {
-        let users = '', res = getObjValue(data)
-        const list = getArrValue(res['fixedBranchVOList'])
-        const item = getObjValue(list[0])['userList']
-        for (let index = 0; index < item.length; index++) {
-            const element = item[index]
-            if (users) {
-                users += `,${element['userName']}-${element['userId']}`
-            } else {
-                users = `${element['userName']}-${element['userId']}`
-            }
-        }
+        const { fixedFlowName, fixedBranchVOList } = getObjValue(data)
         flowFormData.value = {
             id: changeId.value,
-            fixedName: res.fixedFlowName,
-            fixedBranchList: res.fixedBranchVOList,
+            fixedName: fixedFlowName,
+            fixedBranchList: fixedBranchVOList,
         }
-        linkUserJoinString.value = users
     } else {
         flowFormData.value = { id: '', fixedName: '', fixedBranchList: [] }
     }
@@ -207,11 +194,6 @@ const formFlowRules = {
     },
 }
 
-//任务人选择改变
-const tasksUserChange = (a, b, fixedBranchList) => {
-    flowFormData.value.fixedBranchList = fixedBranchList
-}
-
 //提交保存
 const sevaLoading = ref(false)
 const saveFormClick = async () => {

vite.config.js

@@ -28,7 +28,7 @@ export default defineConfig({
         rollupOptions: {
             output: {
                 manualChunks(id) {
-                    let libStr = '@vue,element-plus,echarts,vue-router,pinia,js-fast-way,vuedraggable,split.js,hc-vue3-ui,nprogress'
+                    let libStr = '@vue,element-plus,echarts,vue-router,pinia,js-fast-way,vuedraggable,split.js,hc-vue3-ui,nprogress,pinyin-pro'
                     const libs = libStr.split(',')
                     if (id.includes('node_modules')) {
                         const arr = id.toString().split('node_modules/')[1].split('/')

yarn.lock

@@ -505,6 +505,13 @@
   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-json/hugeicons@^1.1.0":
+  version "1.1.0"
+  resolved "http://39.108.216.210:9000/@iconify-json/hugeicons/-/hugeicons-1.1.0.tgz#76ed8e7db2bd5e141e84169fa0c2babae64bb340"
+  integrity sha512-MzzShBJQsOB92kzPMBe2dI35m0BrR7Z7yEQ0Al84ULQ46PRAAu+RBkqmTzqY+T2uBB1PeGe8sPs+8lGRXClGjg==
+  dependencies:
+    "@iconify/types" "*"
+
 "@iconify-json/iconoir@^1.1.45":
   version "1.1.45"
   resolved "http://39.108.216.210:9000/@iconify-json/iconoir/-/iconoir-1.1.45.tgz#1cc8811af3eebb130d9c66054b6c90f0f38b49b5"
@@ -2567,6 +2574,11 @@ pinia@^2.1.7:
     "@vue/devtools-api" "^6.5.0"
     vue-demi ">=0.14.5"
 
+pinyin-pro@^3.23.1:
+  version "3.23.1"
+  resolved "http://39.108.216.210:9000/pinyin-pro/-/pinyin-pro-3.23.1.tgz#d8cee95a0bde76d63bcf3a929951e0421cf52102"
+  integrity sha512-fA345e5Zj+oAemjPKN9BpbTToUrq3J6ZVKEXpiCNNftFQahr4cKsBNnpGWR154WSOP3PgqlsaNgKklD8FlZvSw==
+
 pkg-types@^1.0.3:
   version "1.1.0"
   resolved "http://39.108.216.210:9000/pkg-types/-/pkg-types-1.1.0.tgz#3ec1bf33379030fd0a34c227b6c650e8ea7ca271"