任务流程修改

src/api/modules/tasks/flow.js

@@ -75,4 +75,12 @@ export default {
             params: form,
         })
     },
+    //新增流程新的/blade-business/fixedFlow/saveFixedFlow
+    async saveFixedFlow(form) {
+        return HcApi({
+            url: '/api/blade-business/fixedFlow/save',
+            method: 'post',
+            data: form,
+        })
+    },
 }

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

@@ -0,0 +1,77 @@
+<template>
+    <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>
+        <!-- 选择任务人 -->
+        <HcUserModal v-model="isUserModalShow" :data="fixedData" :datas="dataInfo" @finish="fixedUserFinish" />
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { deepClone, getArrValue, getObjValue } from 'js-fast-way'
+import HcUserModal from './modules/user-modal.vue'
+
+//参数
+const props = defineProps({
+    ui: {
+        type: String,
+        default: '',
+    },
+    data: {
+        type: Array,
+        default: () => ([]),
+    },
+    datas: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//事件
+const emit = defineEmits(['change'])
+
+//监听基础数据
+const dataInfo = ref(props.datas)
+watch(() => props.datas, (data) => {
+    dataInfo.value = getObjValue(data)
+}, { deep: true, immediate: true })
+
+//监听用户数据
+const fixedData = ref(props.data)
+watch(() => props.data, (data) => {
+    fixedData.value = getArrValue(data)
+}, { deep: true, immediate: true })
+
+//展开弹窗
+const isUserModalShow = ref(false)
+const userShowModal = () => {
+    isUserModalShow.value = true
+}
+
+//选择完成
+const fixedUserFinish = (data) => {
+    isUserModalShow.value = false
+    const res = getArrValue(data)
+    fixedData.value = res
+    const arr = deepClone(res)
+    for (let i = 0; i < arr.length; i++) {
+        const { userList } = arr[i]
+        let newUserId = []
+        for (let j = 0; j < userList.length; j++) {
+            newUserId.push(userList[j].userId)
+        }
+        arr[i].userIds = newUserId.join(',')
+    }
+    emit('change', arr)
+}
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>

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

@@ -0,0 +1,128 @@
+<template>
+    <hc-dialog v-model="isShow" ui="hc-tasks-user-process-modal" widths="800px" title="流程设置" @close="modalClose">
+        <hc-table
+            ref="tableRef" :column="tableColumn" :datas="tableData" ui="hc-tasks-process-drop-table"
+            is-row-drop quick-sort is-sort @row-drop="rowDropTap" @row-sort="rowSortTap"
+        >
+            <template #name="{ row }">
+                <hc-table-input v-model="row.name" size="small" />
+            </template>
+            <template #flowTaskType="{ row }">
+                <el-select v-model="row.flowTaskType" size="small" filterable block>
+                    <template v-if="flowTaskTypeData.length > 0">
+                        <el-option v-for="item in flowTaskTypeData" :key="item.value" :label="item.label" :value="item.value" />
+                    </template>
+                    <el-option v-else label="普通流程" :value="1" />
+                </el-select>
+            </template>
+            <template #type="{ row }">
+                <el-select v-model="row.type" size="small" filterable block>
+                    <el-option label="流程审批" :value="1" />
+                    <el-option label="平行审批" :value="2" />
+                </el-select>
+            </template>
+            <template #action="{ row, index }">
+                <el-link type="danger" @click="delRowClick(row, index)">删除</el-link>
+            </template>
+        </hc-table>
+        <template #footer>
+            <el-button @click="modalClose">取消</el-button>
+            <el-button type="primary" @click="confirmClick">确定</el-button>
+        </template>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
+import { deepClone, getArrValue } from 'js-fast-way'
+import { getDictionaryData } from '~uti/tools'
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => ([]),
+    },
+})
+
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听数据
+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 tableRef = ref(null)
+const tableColumn = [
+    { key: 'name', name: '名称' },
+    { key: 'flowTaskType', name: '流程类型', width: 120 },
+    { key: 'type', name: '审批类型', width: 120 },
+    { key: 'action', name: '操作', width: 70, align: 'center' },
+]
+const tableData = ref([])
+
+//初始化
+const setInitData = async () => {
+    await nextTick()
+    tableData.value = getArrValue(fixedData.value)
+    getFlowTaskTypeData().then()
+}
+
+//获取流程类型
+const flowTaskTypeData = ref([])
+const getFlowTaskTypeData = async () => {
+    flowTaskTypeData.value = await getDictionaryData('flow_task_type', true)
+}
+
+//删除数据
+const delRowClick = (item, index) => {
+    HcDelMsg({
+        title: '确认删除任务流程？',
+        text: `确认是否需要删除【${item.name}】？`,
+    }, (resolve) => {
+        tableData.value?.splice(index, 1)
+        resolve()
+    })
+}
+
+// 行拖拽
+const rowDropTap = async (rows) => {
+    // 先清空，否则排序会异常
+    tableData.value = []
+    await nextTick()
+    tableRef.value?.setData(rows)
+}
+
+// 点击排序
+const rowSortTap = async (rows) => {
+    // 先清空，否则排序会异常
+    tableData.value = []
+    await nextTick()
+    tableData.value = rows
+}
+
+//确定选择
+const confirmClick = async () => {
+    const list = deepClone(tableData.value)
+    emit('finish', list)
+    modalClose()
+}
+
+//关闭窗口
+const modalClose = () => {
+    isShow.value = false
+    emit('close')
+}
+</script>

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

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

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

@@ -0,0 +1,500 @@
+<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" @click="processSetupClick">
+                        <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="cards-wrapper">
+                <div class="card-div-2 h-full w-235px">
+                    <hc-card scrollbar title="角色类型" :loading="signUserLoading">
+                        <template v-for="item in signUserList" :key="item.roleId">
+                            <div class="hc-tasks-user-role-item" :class="{ cur: roleItem.roleId === item.roleId }" @click="roleItemClick(item)">
+                                {{ item.roleName }}
+                            </div>
+                        </template>
+                    </hc-card>
+                </div>
+                <div v-if="roleItem.roleId" class="card-div-3 h-full w-265px">
+                    <hc-card v-if="positionList.length > 0" scrollbar>
+                        <template #header>
+                            <hc-search-input v-model="positionKey" placeholder="岗位搜索" icon="" @search="positionSearch" />
+                        </template>
+                        <template v-for="item in positionList" :key="item.roleId">
+                            <div class="hc-tasks-user-role-item" :class="{ cur: positionItem.roleId === item.roleId }" @click="positionItemClick(item)">
+                                <i class="i-ph-user-list-light mr-5px" />
+                                <span>{{ item.roleName }}</span>
+                            </div>
+                        </template>
+                    </hc-card>
+                    <div v-else class="card-empty-no">
+                        <hc-empty :src="HcLoadSvg" title="请先选择角色" />
+                    </div>
+                </div>
+                <div class="card-div-4 h-full w-235px">
+                    <hc-card v-if="signPfxFileList.length > 0">
+                        <template #header>
+                            <hc-search-input v-model="signUserKey" placeholder="人员搜索" icon="" @search="signUserSearch" />
+                        </template>
+                        <div class="hc-tasks-user-sign-pfx-box">
+                            <el-scrollbar ref="scrollRef">
+                                <template v-for="item in signPfxFileList" :key="item.name">
+                                    <div v-if="item.data.length > 0" :id="`hc-sign-pfx-file-item-${item.name}`" class="hc-sign-pfx-file-item">
+                                        <div class="hc-tasks-user-letter">{{ item.name }}</div>
+                                        <template v-for="(items, index) in item.data" :key="index">
+                                            <div class="hc-tasks-user-item" @click="signUserItemClick(items)">
+                                                <i class="i-iconoir-user mr-5px" />
+                                                <span>{{ items.certificateUserName }}</span>
+                                            </div>
+                                        </template>
+                                    </div>
+                                </template>
+                            </el-scrollbar>
+                        </div>
+                        <div class="hc-tasks-user-letter-index">
+                            <div v-for="item in alphabet" :key="item" class="item" @click="alphabetClick(item)">{{ item }}</div>
+                        </div>
+                    </hc-card>
+                    <div v-else class="card-empty-no">
+                        <hc-empty :src="HcLoadSvg" title="请先选择岗位" />
+                    </div>
+                </div>
+                <div class="card-div-5 h-full w-205px">
+                    <hc-card v-if="fixedItem?.userList?.length > 0" scrollbar>
+                        <template #header>
+                            <span>已选择{{ fixedItem?.userList?.length || 0 }}人</span>
+                        </template>
+                        <template #extra>
+                            <el-button type="warning" size="small" @click="fixedUserSortClick">调整排序</el-button>
+                        </template>
+                        <div class="hc-tasks-user-cur-box" :class="`type-${fixedItem.type}`">
+                            <template v-for="(item, index) in fixedItem?.userList" :key="index">
+                                <div class="hc-tasks-user-item">
+                                    <el-tag closable @close="fixedItemUserListDel(index)">
+                                        <i class="i-ri-user-3-fill mr-5px" />
+                                        <span>{{ item.userName }}</span>
+                                    </el-tag>
+                                </div>
+                            </template>
+                        </div>
+                        <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>
+            </div>
+        </template>
+        <template #footer>
+            <el-button @click="modalClose">取消</el-button>
+            <el-button type="primary" :loading="confirmLoading" @click="confirmClick">确定</el-button>
+        </template>
+    </hc-dialog>
+    <!-- 流程设置 -->
+    <HcProcessModal v-model="isProcessSetup" :data="fixedData" @finish="processSetupFinish" />
+    <!-- 任务人排序 -->
+    <HcSortModal v-model="isUserSort" :data="userSortData" @finish="userSortFinish" />
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { HcDelMsg } from 'hc-vue3-ui'
+import { pinyin } from 'pinyin-pro'
+import { deepClone, getArrValue, getObjValue, isNullES } from 'js-fast-way'
+import HcLoadSvg from '~src/assets/view/load.svg'
+import HcProcessModal from './process-modal.vue'
+import HcSortModal from './sort-modal.vue'
+import mainApi from '~api/tasks/flow'
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => ([]),
+    },
+    datas: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+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
+        item.flowTaskType = isNullES(item.flowTaskType) ? 1 : item.flowTaskType
+    })
+}
+
+//流程被点击
+const fixedIndex = ref(-1)
+const fixedItem = ref({})
+const fixedItemClick = (item, index) => {
+    item.isDataAdd = false
+    fixedIndex.value = index
+    fixedItem.value = item
+    getAllRoleList()
+    getsignPfxFileList()
+}
+
+const signPfxFileListLoading = ref(false)
+const getsignPfxFileList = async () => {
+    signPfxFileListLoading.value = true
+    const { contractId } = getObjValue(dataInfo.value)
+    const { data } = await mainApi.findAllUserAndRoleList({ contractId, roleId:roleItem.value?.roleId || '' })
+
+    let arr = getObjValue(data)
+    setSignPfxUser(arr['userList'])
+    signPfxFileListLoading.value = false
+
+}
+//获取流程图标
+const 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,
+        flowTaskType: 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 signUserLoading = ref(false)
+const signUserList = ref([])
+const getAllRoleList = async () => {
+    signUserLoading.value = true
+    const { contractId } = getObjValue(dataInfo.value)
+    const { data } = await mainApi.queryAllRoleList({ contractId, type:1 })
+    signUserList.value = getArrValue(data)
+    signUserLoading.value = false
+}
+
+//角色被点击
+const roleItem = ref({})
+const roleItemClick = async (item) => {
+    
+    
+    if (roleItem.value.roleId === item.roleId) {
+        // 如果点击的是已选中的角色，则清空选择
+        roleItem.value = {}
+        positionList.value = []
+        positionItem.value = {}
+        roleItem.value = {}
+        await getsignPfxFileList()
+        return
+    }
+    roleItem.value = item
+    const arr = getArrValue(item.childRoleList)
+    positionList.value = deepClone(arr)
+    setSignPfxUser(item.signPfxFileList)
+}
+
+//岗位搜索
+const positionKey = ref('')
+const positionList = ref([])
+const positionSearch = () => {
+    const key = positionKey.value
+    const list = getArrValue(roleItem.value?.childRoleList)
+    const arr = deepClone(list)
+    if (isNullES(key)) {
+        positionList.value = arr
+        return
+    }
+    positionList.value = arr.filter(({ roleName }) => roleName.toLowerCase().includes(key.toLowerCase()))
+}
+
+//岗位被点击
+const positionItem = ref({})
+const positionItemClick = async (item) => {
+    if (positionItem.value.roleId === item.roleId) {
+        // 如果点击的是已选中的岗位，则清空选择
+        positionItem.value = {}
+        await getsignPfxFileList()
+        return
+    }
+    positionItem.value = item
+    setSignPfxUser(item.signPfxFileList)
+}
+
+//设置任务人数据
+const alphabet = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i))
+const setSignPfxUser = (data) => {
+    const list = deepClone(data)
+    const arr = getArrValue(list)
+    arr.forEach(item => {
+        item.letter = getFirstLetter(item.certificateUserName)
+    })
+    signPfxFileData.value = deepClone(arr)
+    signPfxFileList.value = alphabet.map(letter => ({
+        name: letter,
+        data: arr.filter(item => item.letter === letter),
+    }))
+}
+
+//中文转姓氏拼音
+const getFirstLetter = (name) => {
+    return pinyin(name.charAt(0), { pattern: 'first', toneType: 'none', surname: 'head' }).charAt(0).toUpperCase()
+}
+
+//搜索任务人
+const signPfxFileData = ref([])
+const signUserKey = ref('')
+const signPfxFileList = ref([])
+const signUserSearch = () => {
+    const key = signUserKey.value
+    const arr = deepClone(signPfxFileData.value)
+    if (isNullES(key)) {
+        setSignPfxUser(arr)
+        return
+    }
+    // 判断是否为全英文
+    const isAllEnglish = /^[A-Za-z]+$/.test(key)
+    const letterName = getFirstLetter(key)
+    //搜索筛选
+    const filteredData = arr.filter(({ certificateUserName, letter }) => {
+        if (isAllEnglish) {
+            // 如果是英文，判断首字母是否一致
+            return letter.toLowerCase().includes(letterName.toLowerCase())
+        } else {
+            // 如果是中文或其他字符，进行精准搜索
+            return certificateUserName.toLowerCase().includes(key.toLowerCase())
+        }
+    })
+    signPfxFileList.value = alphabet.map(letter => ({
+        name: letter,
+        data: filteredData.filter(item => item.letter === letter),
+    }))
+}
+
+//滚动到相关位置
+const scrollRef = ref(null)
+const alphabetClick = (key) => {
+    const ids = `hc-sign-pfx-file-item-${key}`
+    const dom = document.getElementById(ids)
+    if (isNullES(dom)) return
+    scrollRef.value?.setScrollTop(dom.offsetTop - 20)
+}
+
+//任务人被点击
+const signUserItemClick = ({ certificateUserId, certificateUserName }) => {
+    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 index = fixedIndex.value
+    fixedData.value[index].isDataSave = true
+    fixedData.value[index].isDataAdd = false
+}
+
+//流程设置
+const isProcessSetup = ref(false)
+const processSetupClick = () => {
+    const arr = getArrValue(fixedData.value)
+    if (arr.length <= 0) {
+        window.$message.warning('请先创建任务流程')
+        return
+    }
+    isProcessSetup.value = true
+}
+
+//流程设置完成
+const processSetupFinish = (data) => {
+    isProcessSetup.value = false
+    fixedData.value = getArrValue(data)
+    fixedIndex.value = -1
+    fixedItem.value = {}
+}
+
+//任务人排序
+const isUserSort = ref(false)
+const userSortData = ref([])
+const fixedUserSortClick = () => {
+    const arr = fixedData.value, index = fixedIndex.value
+    const list = getArrValue(arr[index]?.userList)
+    if (list.length <= 0) {
+        window.$message.warning('请先添加任务人')
+        return
+    }
+    userSortData.value = list
+    isUserSort.value = true
+}
+
+//任务人排序完成
+const userSortFinish = (data) => {
+    const index = fixedIndex.value
+    fixedData.value[index].userList = getArrValue(data)
+}
+
+//确定选择
+const confirmLoading = ref(false)
+const confirmClick = async () => {
+    const list = deepClone(fixedData.value)
+    if (list.length <= 0) {
+        window.$message.warning('请先创建人物流程和选择任务人')
+        return
+    }
+    //验证数组
+    let isRes = true
+    for (let i = 0; i < list.length; i++) {
+        delete list[i].isDataAdd
+        delete list[i].isDataSave
+        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>
+
+<style scoped>
+.cards-wrapper {
+    display: flex;
+    gap: 12px;
+    width: 100%;
+    height: 100%;
+}
+
+.card-div-2,
+.card-div-3,
+.card-div-4,
+.card-div-5 {
+    height: 100%;
+}
+
+.card-div-2 {
+    width: 235px;
+    flex-shrink: 0;
+}
+
+.card-div-3 {
+    width: 265px;
+    flex-shrink: 0;
+}
+
+.card-div-4,
+.card-div-5 {
+    flex: 1;
+    min-width: 205px;
+}
+</style>

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

@@ -0,0 +1,379 @@
+.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 .hc-new-main-body_content {
+        padding: 0;
+        height: 100%;
+        display: flex;
+    }
+    .card-div-1 {
+        position: relative;
+        border-left: 1px solid;
+        border-color: #EEEEEE;
+        .hc-process-item {
+            position: relative;
+            margin-top: 24px;
+            .process {
+                position: relative;
+                cursor: pointer;
+                height: 34px;
+                display: inline-flex;
+                align-items: center;
+                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;
+                    }
+                }
+                .name {
+                    padding: 10px 24px 10px 10px;
+                }
+                .del-icon {
+                    position: relative;
+                    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;
+                    }
+                }
+                &.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;
+                    }
+                }
+            }
+        }
+        .hc-process-item + .hc-process-item {
+            &::before{
+                content: "";
+                position: absolute;
+                background: #BBBBBB;
+                top: -24px;
+                height: 24px;
+                width: 1.5px;
+                left: 17px;
+            }
+        }
+        .hc-process-item:first-child {
+            margin-top: 14px;
+        }
+    }
+    .card-div-no, .card-empty-no {
+        position: relative;
+        border-left: 1px solid;
+        border-color: #EEEEEE;
+        background: #e8e8e8;
+    }
+    .card-div-no .hc-empty-box .hc-empty-body .hc-empty-title,
+    .card-empty-no .hc-empty-box .hc-empty-body .hc-empty-title {
+        color: #777777;
+    }
+    .card-empty-no {
+        height: 100%;
+        border-left: 0;
+    }
+    .card-empty-no .hc-empty-box .hc-empty-body .hc-empty-assets {
+        display: none;
+    }
+    .card-div-2 {
+        position: relative;
+        border-left: 1px solid;
+        border-color: #EEEEEE;
+    }
+    .card-div-3 {
+        position: relative;
+        border-left: 1px solid;
+        border-color: #EEEEEE;
+    }
+    .card-div-4 {
+        position: relative;
+        border-left: 1px solid;
+        border-color: #EEEEEE;
+    }
+    .card-div-5 {
+        position: relative;
+        border-left: 1px solid;
+        border-right: 1px solid;
+        border-color: #EEEEEE;
+    }
+    //卡片
+    .el-card.hc-card-box.hc-new-card-box {
+        box-shadow: none;
+        --el-card-border-radius: 0;
+        --el-card-bg-color: transparent;
+        .el-scrollbar__bar.is-vertical {
+            right: -8px;
+        }
+    }
+    //角色类型
+    .hc-tasks-user-role-item {
+        position: relative;
+        color: #1F222A;
+        background: white;
+        cursor: pointer;
+        padding: 6px 10px;
+        border-radius: 3px;
+        transition: all .2s;
+        display: flex;
+        align-items: center;
+        i {
+            font-size: 18px;
+            display: inline-block;
+        }
+        &:hover {
+            color: #3A85E9;
+            background: #f2f3f5;
+        }
+        &.cur {
+            color: #3A85E9;
+            background: #EDF3FF;
+        }
+    }
+    //人员列表
+    .hc-tasks-user-sign-pfx-box {
+        position: relative;
+        padding-right: 8px;
+        height: 100%;
+        .el-scrollbar__bar.is-vertical {
+            right: 2px;
+        }
+    }
+    .hc-sign-pfx-file-item {
+        position: relative;
+        background: #f7f7f7;
+        .hc-tasks-user-letter {
+            position: relative;
+            font-weight: bold;
+            padding: 6px 6px;
+            border-bottom: 1px solid #eee;
+        }
+        .hc-tasks-user-item {
+            position: relative;
+            color: #1F222A;
+            background: white;
+            cursor: pointer;
+            padding: 6px 6px;
+            border-radius: 3px;
+            transition: all .2s;
+            display: flex;
+            align-items: center;
+            i {
+                font-size: 16px;
+                display: inline-block;
+            }
+            &:hover {
+                color: #3A85E9;
+                background: #f2f3f5;
+            }
+            &.cur {
+                color: #3A85E9;
+                background: #EDF3FF;
+            }
+        }
+    }
+    //字母索引
+    .hc-tasks-user-letter-index {
+        position: absolute;
+        right: -8px;
+        top: 0;
+        bottom: 0;
+        width: 13px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        color: #5f5e5e;
+        .item {
+            position: relative;
+            flex: 13px;
+            width: 13px;
+            height: 13px;
+            font-size: 12px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            transition: all .2s;
+            &:hover {
+                color: #0a84ff;
+            }
+        }
+    }
+    //已选择列表
+    .hc-tasks-user-cur-box {
+        position: relative;
+        .hc-tasks-user-item {
+            position: relative;
+            margin-top: 18px;
+        }
+        .hc-tasks-user-item:first-child {
+            margin-top: 0;
+        }
+        &.type-1 {
+            .hc-tasks-user-item + .hc-tasks-user-item {
+                &::before{
+                    content: "";
+                    position: absolute;
+                    background: #BBBBBB;
+                    top: -18px;
+                    height: 18px;
+                    width: 1px;
+                    left: 18px;
+                }
+            }
+        }
+        .el-tag {
+            --el-tag-bg-color: #D7E6FB;
+            --el-tag-border-color: #AECCEE;
+            --el-tag-hover-color: var(--el-color-primary);
+            .el-tag__content {
+                display: flex;
+                align-items: center;
+                i {
+                    font-size: 14px;
+                    display: inline-block;
+                }
+            }
+        }
+    }
+}

src/views/tasks/flow.vue

@@ -19,7 +19,7 @@
                         <el-button plain size="small" type="primary" :disabled="!row.deletedIs" @click="handleTableEdit(row)">编辑</el-button>
                     </hc-tooltip>
                     <hc-tooltip keys="tasks_flow_del">
-                        <el-button v-del-com:[handleTableDel]="row" plain size="small" type="danger" :disabled="!row.deletedIs">删除</el-button>
+                        <el-button plain size="small" type="danger" :disabled="!row.deletedIs" @click="handleTableDel(row)">删除</el-button>
                     </hc-tooltip>
                     <hc-tooltip keys="tasks_flow_copy">
                         <el-button plain size="small" type="warning" @click="handleCopyEdit(row)">复制</el-button>
@@ -31,17 +31,17 @@
             </template>
         </hc-new-card>
         <!-- 新增/编辑流程 弹框 -->
-        <hc-new-dialog v-model="showEditModal" :title="`${flowFormData.id ? '编辑' : '新增'}流程`" widths="47rem">
-            <el-form ref="formFlowRef" :model="flowFormData" :rules="formFlowRules" label-width="auto" size="large">
-                <el-form-item label="流程名称" prop="fixedFlowName">
-                    <el-input v-model="flowFormData.fixedFlowName" placeholder="请输入流程名称" />
+
+        <hc-new-dialog v-model="showEditModal" :title="`${flowFormData.id ? '编辑' : '新增'}流程`" widths="40rem">
+            <el-form
+                ref="formFlowRef" class="p-4" :model="flowFormData" :rules="formFlowRules" label-width="auto"
+                size="large"
+            >
+                <el-form-item label="流程名称" prop="fixedName">
+                    <el-input v-model="flowFormData.fixedName" placeholder="请输入流程名称" />
                 </el-form-item>
-                <el-form-item label="任务人" prop="linkUserJoinString">
-                    <hc-tasks-user
-                        :fixed-flow-link-type-val="fixedFlowLinkTypeVal"
-                        :contract-id="contractId" :project-id="projectId" :users="userData"
-                        ui="w-full" :data="dataInfo" @change="tasksUserChange"
-                    />
+                <el-form-item label="选择任务人" prop="fixedBranchList">
+                    <HcTasksUser :data="flowFormData.fixedBranchList" :datas="fixedData" ui="w-full" @change="flowFormChange" />
                 </el-form-item>
             </el-form>
             <template #footer>
@@ -90,10 +90,10 @@
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { useAppStore } from '~src/store'
-import { getArrValue, getObjValue } from 'js-fast-way'
+import { deepClone, formValidate, getArrValue, getObjValue } from 'js-fast-way'
 import tasksFlowApi from '~api/tasks/flow'
-import { isInDestructureAssignment } from '@vue/compiler-sfc'
-
+import HcTasksUser from './components/hc-tasks-user/index.vue'
+import { HcDelMsg } from 'hc-vue3-ui'
 
 //变量
 const useAppState = useAppStore()
@@ -123,7 +123,7 @@ const tableLoading = ref(false)
 const tableListData = ref([])
 
 const tableListColumn = ref([
-    { key: 'fixedFlowName', name: '流程名称' },
+    { key: 'fixedName', name: '流程名称' },
     { key: 'linkUserJoinString', name: '流程详情' },
     { key: 'action', name: '操作', width: '200', align: 'center' },
 ])
@@ -146,82 +146,101 @@ const getTableData = async () => {
     }
 }
 
-//新增编辑数据
-const showEditModal = ref(false)
-const formFlowRef = ref(null)
-const flowFormData = ref({ id: '', fixedFlowName: '', linkUserJoinString: '' })
-const formFlowRules = {
-    fixedFlowName: {
-        required: true,
-        trigger: 'blur',
-        message: '请输入流程名称',
-    },
-    linkUserJoinString: {
-        required: true,
-        trigger: 'blur',
-        message: '请选择任务人',
-    },
-}
 
-//任务人选择改变
-const tasksUserChange = ( users) => {
-    let usersString = getTaskUsers(users)
-    flowFormData.value.linkUserJoinString = usersString
-}
-const getTaskUsers = (data)=>{
-    // 格式化字符串
-    const formattedStrings = data.map(item => `${item.userName}-${item.userId}`)
-    // 拼接字符串
-    const result = formattedStrings.join(',')
-    return result
+//复制流程
+const handleCopyEditLoad = ref(false)
+const handleCopyEdit = async (row) => {
+    handleCopyEditLoad.value = true
+
+    const { error, code, msg } = await tasksFlowApi.copyFixedFlowData(
+        {   
+            ids: row.id,
+        },
+    )
+        handleCopyEditLoad.value = false
+    if (!error && code === 200) {
+        window.$message?.success(msg)
+        getTableData().then()
+    } 
 }
+
+
 //新建流程
+const fixedData = ref({})
 const addFlowData = () => {
-    userData.value = []
-    flowFormData.value = { id: '', fixedFlowName: '', linkUserJoinString: '' }
+    flowFormData.value = { id: '', fixedName: '', fixedBranchList: [] }
+    fixedData.value = {
+        projectId: projectId.value,
+        contractId: contractId.value,
+    }
     showEditModal.value = true
 }
-const userData = ref([])
-const fixedFlowLinkTypeVal = ref('')
+
 //编辑流程
+const changeId = ref('')
 const handleTableEdit = async (row) => {
-    const { fixedFlowLinkType } = row
-    fixedFlowLinkTypeVal.value = fixedFlowLinkType
-    flowFormData.value = { id: '', fixedFlowName: '', linkUserJoinString: '' }
+    changeId.value = row.id
+    fixedData.value = {
+        id: row.id,
+        projectId: projectId.value,
+        contractId: contractId.value,
+    }
     showEditModal.value = true
+    getFlowDetail().then()
+}
+
+const getFlowDetail = async () => {
     const { error, code, data } = await tasksFlowApi.queryFixedFlowDetail({
-        id: row?.id,
+        id: changeId.value,
     })
     if (!error && code === 200) {
-        let users = '', res = getObjValue(data)
-        const list = getArrValue(res['fixedFlowLinkList'])
-        userData.value = []
-        for (let i = 0; i < list.length; i++) {
-          
-            const item = getObjValue(list[i])
-            userData.value.push({
-                userId:item['fixedFlowLinkUser'],
-                userName:item['fixedFlowLinkUserName'],
-            })
-            if (users) {
-                users += `,${item['fixedFlowLinkUserName']}-${item['fixedFlowLinkUser']}`
-            } else {
-                users = `${item['fixedFlowLinkUserName']}-${item['fixedFlowLinkUser']}`
-            }
+        const { fixedFlowName, fixedBranchVOList } = getObjValue(data)
+        flowFormData.value = {
+            id: changeId.value,
+            fixedName: fixedFlowName,
+            fixedBranchList: fixedBranchVOList,
         }
-        flowFormData.value = { id: res.id, fixedFlowName: res.fixedFlowName, linkUserJoinString: users }
     } else {
-        flowFormData.value = { id: '', fixedFlowName: '', linkUserJoinString: '' }
+        flowFormData.value = { id: '', fixedName: '', fixedBranchList: [] }
     }
 }
 
+//新增编辑数据
+const showEditModal = ref(false)
+const formFlowRef = ref(null)
+const flowFormData = ref({ id: '', fixedName: '', fixedBranchList: [] })
+const formFlowRules = {
+    fixedName: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入流程名称',
+    },
+    fixedBranchList: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择任务',
+    },
+}
+
+//流程数据
+const flowFormChange = (data) => {
+    flowFormData.value.fixedBranchList = getArrValue(data)
+}
+
 //提交保存
 const sevaLoading = ref(false)
 const saveFormClick = async () => {
-    const form = flowFormData.value
-    if (!form.id) {
+    const isValidate = await formValidate(formFlowRef.value)
+    if (!isValidate) return false
+    const form = deepClone(flowFormData.value)
+    const fixedBranchList = form.fixedBranchList
+    fixedBranchList.forEach((ele) => {
+        delete ele.users
+    })
+    form.fixedBranchList = fixedBranchList
+    if (!form.id && !form.fixedFlowId) {
         sevaLoading.value = true
-        const { error, code, msg } = await tasksFlowApi.addFixedFlowData({
+        const { error, code } = await tasksFlowApi.saveFixedFlow({
             ...form,
             projectId: projectId.value,
             contractId: contractId.value,
@@ -232,12 +251,12 @@ const saveFormClick = async () => {
             showEditModal.value = false
             window?.$message?.success('保存成功')
             getTableData().then()
-        } else {
-            window.$message.error(msg)
         }
     } else {
         sevaLoading.value = true
-        const { error, code, msg } = await tasksFlowApi.updateFixedFlowData({
+        form.fixedFlowId = changeId.value
+        delete form.id
+        const { error, code } = await tasksFlowApi.updateFixedFlowData({
             ...form,
             projectId: projectId.value,
             contractId: contractId.value,
@@ -248,32 +267,28 @@ const saveFormClick = async () => {
             showEditModal.value = false
             window?.$message?.success('保存成功')
             getTableData().then()
-        } else {
-            window.$message.error(msg)
         }
     }
 }
 
 //删除
-const handleTableDel = async ({ item }, resolve) => {
-    await removeFixedFlowData(item)
-    resolve()
-}
-
-//确认删除
-const removeFixedFlowData = async (row) => {
-    const { error, code } = await tasksFlowApi.removeFixedFlowData({
-        ids: row?.id || '',
+const handleTableDel = (row) => {
+    HcDelMsg(async (resolve) => {
+        const { error, code } = await tasksFlowApi.removeFixedFlowData({
+              ids: row?.id || '',
         projectId: projectId.value,
         contractId: contractId.value,
+        })
+        //处理数据
+        if (!error && code === 200) {
+            window.$message?.success('删除成功')
+               resolve() //关闭弹窗的回调
+            getTableData().then()
+        }
     })
-    //处理数据
-    if (!error && code === 200) {
-        window.$message?.success('删除成功')
-        getTableData().then()
-    }
 }
 
+
 //表格排序
 const sortModal = ref(false)
 //显示
@@ -286,7 +301,7 @@ const tableSortClick = () => {
 const sortTableColumn = ref([
     { key: 'fixedFlowName', name: '流程名称' },
     { key: 'linkUserJoinString', name: '流程详情' },
-    { key:'action', name: '排序', width: 90, align: 'center' },
+    { key: 'action', name: '排序', width: 90, align: 'center' },
 ])
 const sortTableData = ref([])
 
@@ -351,8 +366,6 @@ const sortModalSave = async () => {
         window.$message?.success('保存成功')
         sortModal.value = false
         getTableData().then()
-    } else {
-        window.$message?.error('保存失败')
     }
 }
 
@@ -360,22 +373,6 @@ const sortModalSave = async () => {
 const sortModalClose = () => {
     sortModal.value = false
 }
-//复制流程
-const handleCopyEditLoad = ref(false)
-const handleCopyEdit = async (row) => {
-    handleCopyEditLoad.value = true
-
-    const { error, code, msg } = await tasksFlowApi.copyFixedFlowData(
-        {   
-            ids: row.id,
-        },
-    )
-        handleCopyEditLoad.value = false
-    if (!error && code === 200) {
-        window.$message?.success(msg)
-        getTableData().then()
-    } 
-}
 </script>
 
 <style lang="scss" scoped>