修改名字

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20240710161401"
+  "value": "20240710180239"
 }

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

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

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

@@ -0,0 +1,50 @@
+.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/views/tasks/flow.vue

@@ -8,7 +8,11 @@
             <el-button hc-btn type="warning" @click="tableSortClick">排序</el-button>
         </template>
         <template #extra>
-            <el-alert :closable="false" title="同一合同段内，只需要设置重复岗位的流程即可，其他任务岗位，系统将自动推送，无需创建更多任务流" type="error" />
+            <el-alert
+                :closable="false"
+                title="同一合同段内，只需要设置重复岗位的流程即可，其他任务岗位，系统将自动推送，无需创建更多任务流"
+                type="error"
+            />
         </template>
         <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :index-style="{ width: 60 }" is-new>
             <template #action="{ row }">
@@ -21,12 +25,19 @@
         </template>
         <!-- 新增/编辑流程 弹框 -->
         <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
+                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="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
+                        :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"
+                    />
                 </el-form-item>
             </el-form>
             <template #footer>
@@ -38,12 +49,16 @@
         </hc-new-dialog>
 
         <!-- 排序 -->
-        <hc-new-dialog v-model="sortModal" title="调整排序" widths="80vw" is-table is-footer-center @close="sortModalClose">
+        <hc-new-dialog
+            v-model="sortModal" title="调整排序" widths="80vw" is-table is-footer-center
+            @close="sortModalClose"
+        >
             <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="error" :closable="false" />
             <div class="hc-table-h">
                 <hc-table
                     ui="hc-table-row-drop" :column="sortTableColumn" :datas="sortTableData" :loading="sortTableLoading"
-                    is-row-drop quick-sort is-new :index-style="{ width: 80 }" @row-drop="sortTableRowDrop" @row-sort="sortTableRowDrop"
+                    is-row-drop quick-sort is-new :index-style="{ width: 80 }" @row-drop="sortTableRowDrop"
+                    @row-sort="sortTableRowDrop"
                 >
                     <template #key2="{ row }">
                         <span class="text-link">{{ row?.key2 }}</span>
@@ -150,25 +165,25 @@ const handleTableEdit = async (row) => {
     getFlowDetail()
 
 }
-const getFlowDetail = async ()=>{
+const getFlowDetail = async () => {
     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) {
+        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']}`
-                    }
-
-
-            console.log(users, 'users')
+            } else {
+                users = `${element['userName']}-${element['userId']}`
+            }
+        }
+        flowFormData.value = {
+            id: changeId.value,
+            fixedName: res.fixedFlowName,
+            fixedBranchList: res.fixedBranchVOList,
         }
-        flowFormData.value = { id: changeId.value, fixedName: res.fixedFlowName, fixedBranchList:res.fixedBranchVOList }
         linkUserJoinString.value = users
     } else {
         flowFormData.value = { id: '', fixedName: '', fixedBranchList: [] }
@@ -193,7 +208,7 @@ const formFlowRules = {
 }
 
 //任务人选择改变
-const tasksUserChange = ( a, b, fixedBranchList) => {
+const tasksUserChange = (a, b, fixedBranchList) => {
     flowFormData.value.fixedBranchList = fixedBranchList
 }
 
@@ -205,7 +220,7 @@ const saveFormClick = async () => {
     const form = deepClone(flowFormData.value)
     console.log(form, 'form')
     const fixedBranchList = form.fixedBranchList
-    fixedBranchList.forEach((ele)=>{
+    fixedBranchList.forEach((ele) => {
         delete ele.users
     })
     form.fixedBranchList = fixedBranchList
@@ -251,7 +266,7 @@ const saveFormClick = async () => {
 const handleTableDel = (row) => {
     delMessage(async () => {
         const { error, code } = await tasksFlowApi.removeFixedFlowData({
-            id:row?.id || '',
+            id: row?.id || '',
             name: row?.fixedFlowName,
 
         })
@@ -276,7 +291,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([])