新建流程页面修改

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

@@ -13,6 +13,25 @@
         <!-- 选择任务人 -->
         <el-dialog v-model="showModal" title="选择任务人" width="62rem" class="hc-modal-border hc-modal-nop" draggable destroy-on-close append-to-body>
             <div class="hc-tasks-user-modal-content-box">
+                <div class="tasks-name-box">
+                    <p class="mb-2">创建任务人流程</p>
+                    <div class="flex pt-2">
+                        <el-input v-model="taskNameinput" placeholder="请输入" size="default" class="mr-4" />  
+                        <el-button type="primary" size="default" @click="addTaskName">添加</el-button>
+                    </div>
+                    <div class="task-list-box">
+                        <div v-for="(item, index) in taskNameList" class="task-list-box-item">
+                            <el-tooltip :content="item.type === 1 ? '平行审批' : '任务审批'" placement="right">
+                                <el-button size="default">
+                                    {{ item.title }}
+                                    <HcIcon v-if="item.type === 1" name="links" class="ml-2" @click="item.type = 2" />
+                                    <HcIcon v-if="item.type === 2" name="exchange-2" class="ml-2" @click="item.type = 1" />
+                                    <HcIcon name="close" class="ml-2" @click="delTask(index)" />
+                                </el-button>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                </div>
                 <div class="tree-box">
                     <el-scrollbar>
                         <ElTree class="hc-tree-node-box" :props="ElTreeProps" :data="ElTreeData" node-key="roleId" highlight-current accordion :default-expanded-keys="[0]" @node-click="ElTreeNodeClick" />
@@ -281,6 +300,34 @@ const sureSignUserClick = () => {
         window.$message?.warning('请先选择任务人员，或点击取消')
     }
 }
+const taskNameinput = ref('')
+const taskNameList = ref([
+    {
+    title:'任务1',
+    type:1,
+    },
+    {
+    title:'任务2',
+    type:2,
+    },
+])
+const addTaskName = ()=>{
+    if (taskNameinput.value) {
+            taskNameList.value.push({
+            title:taskNameinput.value,
+            type:1,
+        })
+        taskNameinput.value = ''
+    } else {
+        window.$message.warning('请输入任务名称')
+    }
+    
+}
+
+const delTask = (index)=>{
+    console.log(index, 'index')
+    taskNameList.value.splice(index, 1)
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -31,6 +31,21 @@
     position: relative;
     display: flex;
     height: 460px;
+    .tasks-name-box{
+        flex: 1;
+        border: 2px solid #EEEEEE;
+        padding: 20px;
+        .task-list-box{
+            
+            overflow-y: auto;
+            height: calc(100% - 40px);
+      
+            .task-list-box-item{
+                margin-top: 15px;
+             
+            }
+        }
+    }
     .tree-box {
         flex: 1;
         user-select: none;