上报选择任务人修改

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

@@ -34,7 +34,7 @@
                 </el-select>
             </el-form-item>
             <el-form-item v-if="diyProcessUser" label="任务人" prop="userTasks">
-                <HcTasksUser ui="w-full" :project-id="projectId" :contract-id="contractId" @change="diyProcessUserChange" />
+                <HcTasksUser ui="w-full" :data="tasksUserData" @finish="diyProcessUserChange" />
             </el-form-item>
             <el-form-item v-else label="任务人">
                 <div class="form-item-div">{{ linkUserJoinString }}</div>
@@ -229,9 +229,14 @@ const handleProcessValue = (val) => {
     }
 }
 
+const tasksUserData = ref({
+    projectId: projectId.value,
+    contractId: contractId.value,
+})
 //自定义流程任务人选择完毕
-const diyProcessUserChange = (user) => {
-    formModel.value.userTasks = user
+const diyProcessUserChange = (user, res) => {
+
+    formModel.value.userTasks = res
 }
 
 //审批内容的标签移除

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

@@ -1,138 +1,21 @@
 <template>
-    <div :class="ui" class="hc-tasks-user">
-        <div class="tasks-user-box">
-            <div class="tag-user-list" @click="showModalClick">
-                <template v-for="(item, index) in UserDataList" :key="index">
-                    <el-tag>{{ setCheckboxUserName(item) }}</el-tag>
-                    <HcIcon v-if="(UserDataList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
-                </template>
-                <div v-if="UserDataList.length <= 0" class="tasks-placeholder">
-                    点击这里选择任务人
-                </div>
-            </div>
+    <div :class="ui" class="hc-report-tasks-user-box">
+        <div class="tag-user-list" @click="userShowModal">
+            <template v-for="(item, index) in userData" :key="index">
+                <el-tag>{{ item.userName }}</el-tag>
+                <hc-icon v-if="(userData.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
+            </template>
+            <div v-if="userData.length <= 0" class="tasks-placeholder">点击这里选择任务人</div>
         </div>
-
         <!-- 选择任务人 -->
-        <el-dialog v-model="showModal" title="选择任务人" width="62rem" class="hc-modal-border hc-modal-nop" draggable destroy-on-close>
-            <div class="hc-tasks-user-modal-content-box">
-                <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">
-                                        <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 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)">
-                                <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 type="primary" hc-btn @click="sequenceModal = false">
-                        确认
-                    </el-button>
-                </div>
-            </template>
-        </el-dialog>
+        <HcUserModal v-model="isUserModalShow" :data="userData" :datas="dataInfo" @finish="fixedUserFinish" />
     </div>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue'
-import tasksFlowApi from '~api/tasks/flow'
-import { deepClone, getArrValue } from 'js-fast-way'
-import Draggable from 'vuedraggable'
+import { ref, watch } from 'vue'
+import { arrToKey, deepClone, getObjValue } from 'js-fast-way'
+import HcUserModal from './user-modal.vue'
 
 //参数
 const props = defineProps({
@@ -140,215 +23,49 @@ const props = defineProps({
         type: String,
         default: '',
     },
-    //选中的用户数组
-    users: {
-        type: String,
-        default: '',
+    data: {
+        type: Object,
+        default: () => ({}),
     },
-    projectId: {
-        type: [String, Number],
-        default: '',
-    },
-    contractId: {
-        type: [String, Number],
-        default: '',
+    userData: {
+        type: Array,
+        default: () => ([]),
     },
 })
-
 //事件
-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 ElTreeProps = { children: 'childRoleList', label: 'roleName' }
-const ElTreeData = ref([{
-    roleName: '全部人员',
-    roleId: 0,
-    childRoleList: [],
-    signPfxFileList: [],
-}])
-
+const emit = defineEmits(['change', 'finish'])
+//选择完成
+const userData = ref(props.userData)
 //监听
 watch(() => [
-    props.users,
-    props.projectId,
-    props.contractId,
-], ([users, pid, cid]) => {
-    projectId.value = pid
-    contractId.value = cid
-    setUserDataList(users)
-})
+    props.userData,
+], ([users]) => {
+    userData.value = users
 
-//渲染完成
-onMounted(() => {
-    setUserDataList(props.users)
-    queryAllRoleList()
 })
-
-//处理用户数据
-const setUserDataList = (users) => {
-    if (users) {
-        const usersArr = users.split(',')
-        UserDataList.value = usersArr
-        checkboxUserList.value = usersArr
-    } else {
-        UserDataList.value = []
-        checkboxUserList.value = []
-    }
-}
+//监听基础数据
+const dataInfo = ref(props.data)
+watch(() => props.data, (data) => {
+    dataInfo.value = getObjValue(data)
+}, { deep: true, immediate: true })
 
 //展开弹窗
-const showModalClick = () => {
-    showModal.value = true
-}
-
-//获取系统所有角色划分
-const 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 isUserModalShow = ref(false)
+const userShowModal = () => {
+    isUserModalShow.value = true
 }
 
-//删除已选择的用户
-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 newUser = [], newUserId = [], users = ''
-    const dataList = deepClone(checkboxUserList.value)
-    UserDataList.value = dataList
-    if (dataList.length > 0) {
-        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, users)
-    } else {
-        window.$message?.warning('请先选择任务人员，或点击取消')
-    }
+const fixedUserFinish = (data) => {
+    const res = deepClone(data)
+   
+    
+    userData.value = res
+    const userIds = arrToKey(res, 'userId', ',')
+    emit('finish', userIds, res)
 }
 </script>
 
-<style lang="scss" scoped>
-@import './style.scss';
-</style>
-
 <style lang="scss">
-.hc-tasks-user .tasks-user-box .tag-user-list {
-    .el-tag {
-        --el-icon-size: 14px;
-        padding: 0 10px;
-        height: 26px;
-        margin: 4px 0;
-    }
-}
-.hc-tasks-user-modal-content-box {
-    .checkbox-li .el-checkbox {
-        width: 100%;
-        .el-checkbox__input {
-            position: absolute;
-            right: 0;
-            .el-checkbox__inner {
-                width: 18px;
-                height: 18px;
-                &:after {
-                    height: 9px;
-                    left: 6px;
-                    top: 2px;
-                }
-            }
-        }
-        .el-checkbox__label {
-            flex: 1;
-            padding-left: 0;
-            padding-right: 20px;
-        }
-    }
-    .user-list {
-        .el-tag {
-            margin-right: 10px;
-            margin-top: 12px;
-        }
-    }
-}
+@import './index.scss';
 </style>

src/global/components/hc-tasks-user1/index.vue

@@ -0,0 +1,354 @@
+<template>
+    <div :class="ui" class="hc-tasks-user">
+        <div class="tasks-user-box">
+            <div class="tag-user-list" @click="showModalClick">
+                <template v-for="(item, index) in UserDataList" :key="index">
+                    <el-tag>{{ setCheckboxUserName(item) }}</el-tag>
+                    <HcIcon v-if="(UserDataList.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
+                </template>
+                <div v-if="UserDataList.length <= 0" class="tasks-placeholder">
+                    点击这里选择任务人
+                </div>
+            </div>
+        </div>
+
+        <!-- 选择任务人 -->
+        <el-dialog v-model="showModal" title="选择任务人" width="62rem" class="hc-modal-border hc-modal-nop" draggable destroy-on-close>
+            <div class="hc-tasks-user-modal-content-box">
+                <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">
+                                        <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 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)">
+                                <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 type="primary" hc-btn @click="sequenceModal = false">
+                        确认
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import tasksFlowApi from '~api/tasks/flow'
+import { deepClone, getArrValue } from 'js-fast-way'
+import Draggable from 'vuedraggable'
+
+//参数
+const props = defineProps({
+    ui: {
+        type: String,
+        default: '',
+    },
+    //选中的用户数组
+    users: {
+        type: String,
+        default: '',
+    },
+    projectId: {
+        type: [String, Number],
+        default: '',
+    },
+    contractId: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+//事件
+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 ElTreeProps = { children: 'childRoleList', label: 'roleName' }
+const ElTreeData = ref([{
+    roleName: '全部人员',
+    roleId: 0,
+    childRoleList: [],
+    signPfxFileList: [],
+}])
+
+//监听
+watch(() => [
+    props.users,
+    props.projectId,
+    props.contractId,
+], ([users, pid, cid]) => {
+    projectId.value = pid
+    contractId.value = cid
+    setUserDataList(users)
+})
+
+//渲染完成
+onMounted(() => {
+    setUserDataList(props.users)
+    queryAllRoleList()
+})
+
+//处理用户数据
+const setUserDataList = (users) => {
+    if (users) {
+        const usersArr = users.split(',')
+        UserDataList.value = usersArr
+        checkboxUserList.value = usersArr
+    } else {
+        UserDataList.value = []
+        checkboxUserList.value = []
+    }
+}
+
+//展开弹窗
+const showModalClick = () => {
+    showModal.value = true
+}
+
+//获取系统所有角色划分
+const signUserList = ref([])
+const queryAllRoleList = async () => {
+    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 = (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 newUser = [], newUserId = [], users = ''
+    const dataList = deepClone(checkboxUserList.value)
+    UserDataList.value = dataList
+    if (dataList.length > 0) {
+        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, users)
+    } else {
+        window.$message?.warning('请先选择任务人员，或点击取消')
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
+
+<style lang="scss">
+.hc-tasks-user .tasks-user-box .tag-user-list {
+    .el-tag {
+        --el-icon-size: 14px;
+        padding: 0 10px;
+        height: 26px;
+        margin: 4px 0;
+    }
+}
+.hc-tasks-user-modal-content-box {
+    .checkbox-li .el-checkbox {
+        width: 100%;
+        .el-checkbox__input {
+            position: absolute;
+            right: 0;
+            .el-checkbox__inner {
+                width: 18px;
+                height: 18px;
+                &:after {
+                    height: 9px;
+                    left: 6px;
+                    top: 2px;
+                }
+            }
+        }
+        .el-checkbox__label {
+            flex: 1;
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+    .user-list {
+        .el-tag {
+            margin-right: 10px;
+            margin-top: 12px;
+        }
+    }
+}
+</style>

src/views/file/components/HcReport.vue

@@ -15,7 +15,7 @@
                 </el-select>
             </el-form-item>
             <el-form-item v-if="diyProcessUser" label="任务人" prop="userIds">
-                <HcTasksUserVue class="w-full" :data="tasksUserData" :user-data="userData" @finsh="diyProcessUserChange" />
+                <HcTasksUser class="w-full" :data="tasksUserData" :user-data="userData" @finish="diyProcessUserChange" />
             </el-form-item>
             <el-form-item v-else label="任务人">
                 <div class="form-item-div">{{ linkUserJoinString }}</div>
@@ -40,7 +40,7 @@
 import { ref, watch } from 'vue'
 import tasksFlowApi from '~api/tasks/flow'
 import { arrIndex, arrToKey, formValidate, getArrValue } from 'js-fast-way'
-import HcTasksUserVue from './hc-tasks-user/index.vue'
+// import HcTasksUserVue from './hc-tasks-user/index.vue'
 import { useAppStore } from '~src/store'
 
 const props = defineProps({

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

@@ -1,69 +0,0 @@
-<template>
-    <div :class="ui" class="hc-report-tasks-user-box">
-        <div class="tag-user-list" @click="userShowModal">
-            <template v-for="(item, index) in userData" :key="index">
-                <el-tag>{{ item.userName }}</el-tag>
-                <hc-icon v-if="(userData.length - 1) > index" name="arrow-right" ui="arrow-icon-tag" />
-            </template>
-            <div v-if="userData.length <= 0" class="tasks-placeholder">点击这里选择任务人</div>
-        </div>
-        <!-- 选择任务人 -->
-        <HcUserModal v-model="isUserModalShow" :data="userData" :datas="dataInfo" @finish="fixedUserFinish" />
-    </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import { arrToKey, deepClone, getObjValue } from 'js-fast-way'
-import HcUserModal from './user-modal.vue'
-
-//参数
-const props = defineProps({
-    ui: {
-        type: String,
-        default: '',
-    },
-    data: {
-        type: Object,
-        default: () => ({}),
-    },
-    userData: {
-        type: Array,
-        default: () => ([]),
-    },
-})
-//事件
-const emit = defineEmits(['change', 'finsh'])
-//选择完成
-const userData = ref(props.userData)
-//监听
-watch(() => [
-    props.userData,
-], ([users]) => {
-    userData.value = users
-
-})
-//监听基础数据
-const dataInfo = ref(props.data)
-watch(() => props.data, (data) => {
-    dataInfo.value = getObjValue(data)
-}, { deep: true, immediate: true })
-
-//展开弹窗
-const isUserModalShow = ref(false)
-const userShowModal = () => {
-    isUserModalShow.value = true
-}
-
-
-const fixedUserFinish = (data) => {
-    const res = deepClone(data)
-    userData.value = res
-    const userIds = arrToKey(res, 'userId', ',')
-    emit('finsh', userIds)
-}
-</script>
-
-<style lang="scss">
-@import './index.scss';
-</style>

src/views/tasks/flow.vue

@@ -35,8 +35,8 @@
                 </el-form-item>
                 <el-form-item label="任务人" prop="linkUserJoinString">
                     <HcTasksUser
-                        :contract-id="contractId" :project-id="projectId" :users="flowFormData.linkUserJoinString"
-                        ui="w-full" @change="tasksUserChange"
+                        :data="tasksUserData" :user-data="userData" 
+                        ui="w-full" @finish="tasksUserChange"
                     />
                 </el-form-item>
             </el-form>
@@ -86,7 +86,7 @@
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { useAppStore } from '~src/store'
-import { getArrValue, getObjValue } from 'js-fast-way'
+import { arrToKey, getArrValue, getObjValue } from 'js-fast-way'
 import tasksFlowApi from '~api/tasks/flow'
 
 //变量
@@ -153,31 +153,59 @@ const formFlowRules = {
         message: '请选择任务人',
     },
 }
-
+const tasksUserData = ref({
+    projectId: projectId.value,
+    contractId: contractId.value,
+})
+const userData = ref([])
 //任务人选择改变
-const tasksUserChange = (a, b, users) => {
-    flowFormData.value.linkUserJoinString = users
+const tasksUserChange = (user, res) => {
+    let users = ''  
+        const list = getArrValue(res)
+        // userData.value = arrToKey(list, 'fixedFlowLinkUser')
+        for (let i = 0; i < list.length; i++) {
+            const item = getObjValue(list[i])
+    
+            if (users) {
+              
+                users += `,${item['userName']}-${item['userId']}`
+            } else {
+                users = `${item['userName']}-${item['userId']}`
+            }
+        }
+            flowFormData.value.linkUserJoinString = users
 }
 
 //新建流程
 const addFlowData = () => {
     flowFormData.value = { id: '', fixedFlowName: '', linkUserJoinString: '' }
     showEditModal.value = true
+    userData.value = []
+
+  
 }
 
 //编辑流程
 const handleTableEdit = async (row) => {
     flowFormData.value = { id: '', fixedFlowName: '', linkUserJoinString: '' }
     showEditModal.value = true
+    userData.value = []
     const { error, code, data } = await tasksFlowApi.queryFixedFlowDetail({
         id: row?.id,
     })
     if (!error && code === 200) {
         let users = '', res = getObjValue(data)
         const list = getArrValue(res['fixedFlowLinkList'])
+        
+
         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 {
                 users = `${item['fixedFlowLinkUserName']}-${item['fixedFlowLinkUser']}`
@@ -187,6 +215,8 @@ const handleTableEdit = async (row) => {
     } else {
         flowFormData.value = { id: '', fixedFlowName: '', linkUserJoinString: '' }
     }
+
+    
 }
 
 //提交保存