✨ feat(成员列表弹框): 组织架构和角色数据结构渲染调整

hookehuyr
Commit 30583cb7120ebec1c45a6bda49e0d1621f2edd51 30583cb7 1 parent e8439667
Showing 1 changed file with 490 additions and 184 deletions
doc/App.vue
--- a/doc/App.vue
View file @30583cb
+++ b/doc/App.vue
View file @30583cb
@@ -55,40 +55,85 @@
           label-width="100px"
         >
           <template v-if="state.detailModel.activity === undefined">
-             <el-tabs v-model="state.activeName" class="" @tab-change="handleActiveChange" stretch>
+             <el-tabs
+               v-model="state.activeName"
+               class=""
+               @tab-change="handleActiveChange"
+               stretch
+             >
               <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem">
                 <el-form-item prop="label">
-                   <div slot="label">节点名称 <span style="color: red;">*</span></div>
+                   <div slot="label">
+                     节点名称 <span style="color: red;">*</span>
+                   </div>
                   <el-input v-model="state.detailModel.label" />
                 </el-form-item>
                 <el-form-item prop="attr">
-                   <el-radio-group v-model="state.attr_radio" size="large" class="attr-radio-group">
-                     <el-radio-button label="基础属性"/>
+                   <el-radio-group
+                     v-model="state.attr_radio"
+                     size="large"
+                     class="attr-radio-group"
+                   >
+                     <el-radio-button label="基础属性" />
                     <el-radio-button label="更多属性" />
                   </el-radio-group>
                 </el-form-item>
                 <el-form-item v-if="state.attr_radio === '基础属性'" prop="">
-                   <div slot="label">字段权限 <span style="color: red;">*</span></div>
-                   <el-row style="width: 100%; background-color: #f0f1f4; padding-left: 10px;">
+                   <div slot="label">
+                     字段权限 <span style="color: red;">*</span>
+                   </div>
+                   <el-row
+                     style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"
+                   >
                     <el-col :span="12">字段</el-col>
                     <el-col :span="6">可见</el-col>
                     <el-col :span="6">可编辑</el-col>
                   </el-row>
                   <el-row style="width: 100%; padding-left: 10px;">
                     <el-col :span="12" style="color: #409eff;">全选</el-col>
-                     <el-col :span="6" style="padding-left: 5px;"><el-checkbox @change="onAuthAllChange" v-model="state.auth_all_checked" label="" size="large" /></el-col>
-                     <el-col :span="6" style="padding-left: 5px;"><el-checkbox @change="onAuthAllEditChange" v-model="state.auth_all_edit" label="" size="large" /></el-col>
+                     <el-col :span="6" style="padding-left: 5px;"
+                       ><el-checkbox
+                         @change="onAuthAllChange"
+                         v-model="state.auth_all_checked"
+                         label=""
+                         size="large"
+                     /></el-col>
+                     <el-col :span="6" style="padding-left: 5px;"
+                       ><el-checkbox
+                         @change="onAuthAllEditChange"
+                         v-model="state.auth_all_edit"
+                         label=""
+                         size="large"
+                     /></el-col>
                   </el-row>
-                   <el-row v-for="(field, index) in state.field_auths" :key="index" style="width: 100%; padding-left: 10px;">
+                   <el-row
+                     v-for="(field, index) in state.field_auths"
+                     :key="index"
+                     style="width: 100%; padding-left: 10px;"
+                   >
                     <el-col :span="12" style="">{{ field.name }}</el-col>
-                     <el-col :span="6" style="padding-left: 5px;"><el-checkbox v-model="field.visible.checked" :disabled="field.visible.disabled" label="" size="large" /></el-col>
-                     <el-col :span="6" style="padding-left: 5px;"><el-checkbox v-model="field.editable.checked" :disabled="field.editable.disabled" label="" size="large" /></el-col>
+                     <el-col :span="6" style="padding-left: 5px;"
+                       ><el-checkbox
+                         v-model="field.visible.checked"
+                         :disabled="field.visible.disabled"
+                         label=""
+                         size="large"
+                     /></el-col>
+                     <el-col :span="6" style="padding-left: 5px;"
+                       ><el-checkbox
+                         v-model="field.editable.checked"
+                         :disabled="field.editable.disabled"
+                         label=""
+                         size="large"
+                     /></el-col>
                   </el-row>
                 </el-form-item>
               </el-tab-pane>
               <el-tab-pane label="流程属性" name="flow" style="padding: 0 1rem">
                 <el-form-item prop="label">
-                   <div slot="label">测试属性 <span style="color: red;">*</span></div>
+                   <div slot="label">
+                     测试属性 <span style="color: red;">*</span>
+                   </div>
                   <el-input v-model="state.detailModel.data.test" />
                 </el-form-item>
               </el-tab-pane>
@@ -107,7 +152,12 @@
               </el-form-item>
             </template> -->
             <div style="margin-left: 20px;">
-               <el-button type="primary" @click="state.dialogUserFormVisible = true"> 设置人员配置 </el-button>
+               <el-button
+                 type="primary"
+                 @click="state.dialogUserFormVisible = true"
+               >
+                 设置人员配置
+               </el-button>
             </div>
           </template>
           <template v-else>
@@ -149,12 +199,12 @@
   <el-dialog v-model="state.dialogUserFormVisible" title="成员列表">
     <div style="border: 1px dashed #DCDFE6; padding: 10px;">
       <el-tag
-         v-for="tag in state.tags"
+         v-for="tag in state.userTags"
         :key="tag.name"
-         class="mx-1"
+         class=""
         style="margin-left: 0.25rem; margin-right: 0.25rem;"
         closable
-         :type="tag.type"
+         @close="handleTagClose(tag)"
       >
         {{ tag.name }}
       </el-tag>
@@ -166,70 +216,122 @@
             <div class="flow-tabs__nav-wrap">
               <div class="flow-tabs__nav-scroll">
                 <div class="flow-tabs__nav is-top">
-                   <div ref_key="barRef" class="flow-tabs__active-bar" :style="{ width: state.tabTextWidth, transform: 'translateX' + '(' + state.tabOffset + ')' }"></div>
                   <div
-                     v-for="(item, index) in state.userTabs" :key="index"
-                     :class="['flow-tabs__item', 'is-top', item.id === state.activeTabId ? 'is-active' : '']"
-                     :id="item.id" @click="handleTabClick(item, $event, index)">
+                     ref_key="barRef"
+                     class="flow-tabs__active-bar"
+                     :style="{
+                       width: state.tabTextWidth,
+                       transform: 'translateX' + '(' + state.tabOffset + ')'
+                     }"
+                   ></div>
+                   <div
+                     v-for="(item, index) in state.userTabs"
+                     :key="index"
+                     :class="[
+                       'flow-tabs__item',
+                       'is-top',
+                       item.id === state.activeTabId ? 'is-active' : ''
+                     ]"
+                     :id="item.id"
+                     @click="handleTabClick(item, $event, index)"
+                   >
                     {{ item.label }}
                   </div>
                 </div>
               </div>
             </div>
-             <div class="flow-tab-search" @click="state.is_active_search = !state.is_active_search">
+             <div
+               class="flow-tab-search"
+               @click="state.is_active_search = !state.is_active_search"
+             >
               <el-icon :size="15"><Search /></el-icon> &nbsp;搜索框
             </div>
           </div>
           <div v-else>
-             <el-input v-model="state.search_input" class="w-50 m-2" placeholder="请输入关键字">
+             <el-input
+               v-model="state.search_input"
+               class="w-50 m-2"
+               placeholder="请输入关键字"
+             >
               <template #prefix>
                 <el-icon class="el-input__icon"><search /></el-icon>
               </template>
               <template #append>
-                 <el-button @click="state.is_active_search = !state.is_active_search">取消</el-button>
+                 <el-button
+                   @click="state.is_active_search = !state.is_active_search"
+                   >取消</el-button
+                 >
               </template>
             </el-input>
           </div>
         </div>
       </div>
+       <!-- 未激活搜索框 -->
       <div v-if="!state.is_active_search">
-         <div v-if="state.userTabType === 'tree'">
-           <el-row>
-             <el-col :span="8">
-               <el-tree :data="state.tree_data" :props="state.defaultProps" empty-text="暂无数据" @node-click="handleNodeClick" />
-             </el-col>
-             <el-col :span="16">
-               <div style="border-left: 2px solid #e4e7ed; width: 2px; height: 100%; padding-left: 10px;">
-                 <el-checkbox-group class="flow-checkbox-group" v-model="state.checkList">
-                   <el-checkbox label="1">选项 A</el-checkbox>
-                   <el-checkbox label="2">选项 B</el-checkbox>
-                   <el-checkbox label="3">选项 C</el-checkbox>
-                   <el-checkbox label="4" disabled>禁用</el-checkbox>
-                   <el-checkbox label="5" disabled>选中和禁用</el-checkbox>
-                 </el-checkbox-group>
-               </div>
-             </el-col>
-           </el-row>
-         </div>
-         <div v-if="state.userTabType === 'list'">
-           <el-tabs tab-position="left" style="" class="demo-tabs" v-model="activeTabContent" @tab-click="handleTabContentClick">
-             <el-tab-pane label="流程发起人">
-               <el-checkbox-group class="flow-checkbox-group" v-model="state.checkList">
-                 <el-checkbox label="1">选项 A</el-checkbox>
-                 <el-checkbox label="2">选项 B</el-checkbox>
-                 <el-checkbox label="3">选项 C</el-checkbox>
-                 <el-checkbox label="4" disabled>禁用</el-checkbox>
-                 <el-checkbox label="5" disabled>选中和禁用</el-checkbox>
-               </el-checkbox-group>
-             </el-tab-pane>
-             <el-tab-pane label="成员字段">成员字段</el-tab-pane>
-             <el-tab-pane label="部门字段">部门字段</el-tab-pane>
-             <el-tab-pane label="主管">主管</el-tab-pane>
-           </el-tabs>
+         <div v-for="(item, index) in state.userTabs" :key="index">
+           <div v-if="item.id === state.activeTabId && item.type === 'tree'">
+             <el-row>
+               <el-col :span="8">
+                 <el-tree
+                   :data="item.data"
+                   :props="state.defaultProps"
+                   empty-text="暂无数据"
+                   @node-click="handleNodeClick"
+                 />
+               </el-col>
+               <el-col :span="16">
+                 <div
+                   style="border-left: 2px solid #e4e7ed; width: 2px; height: 100%; padding-left: 10px;"
+                 >
+                   <el-checkbox-group
+                     class="flow-checkbox-group"
+                     v-model="state.checkedUserList"
+                   >
+                     <el-checkbox
+                       v-for="(user, idx) in state.userList"
+                       :key="idx"
+                       :label="user.id"
+                       :disabled="user.disabled"
+                       >{{ user.label }}</el-checkbox
+                     >
+                   </el-checkbox-group>
+                 </div>
+               </el-col>
+             </el-row>
+           </div>
+           <div v-if="item.id === state.activeTabId && item.type === 'list'">
+             <el-tabs
+               tab-position="left"
+               style=""
+               class="demo-tabs"
+               v-model="activeTabContent"
+               @tab-click="handleTabContentClick"
+             >
+               <el-tab-pane v-for="(role, idx) in item.data" :key="idx" :label="role.label">
+                 <el-checkbox-group
+                     class="flow-checkbox-group"
+                     v-model="state.checkedUserList"
+                   >
+                     <el-checkbox
+                       v-for="(user, idx) in state.userList"
+                       :key="idx"
+                       :label="user.id"
+                       :disabled="user.disabled"
+                       >{{ user.label }}</el-checkbox
+                     >
+                   </el-checkbox-group>
+               </el-tab-pane>
+             </el-tabs>
+           </div>
         </div>
       </div>
+       <!-- 激活搜索框 -->
       <div v-else>
-         <el-checkbox-group class="flow-checkbox-group" style="padding-left: 10px;" v-model="state.checkList">
+         <el-checkbox-group
+           class="flow-checkbox-group"
+           style="padding-left: 10px;"
+           v-model="state.searchUserList"
+         >
           <el-checkbox label="1">选项 A</el-checkbox>
           <el-checkbox label="2">选项 B</el-checkbox>
           <el-checkbox label="3">选项 C</el-checkbox>
@@ -240,10 +342,8 @@
     </div>
     <template #footer>
       <span class="dialog-footer">
-         <el-button @click="state.dialogUserFormVisible = false">取消</el-button>
-         <el-button type="primary" @click="state.dialogUserFormVisible = false">
-           确定
-         </el-button>
+         <el-button @click="closeUserForm">取消</el-button>
+         <el-button type="primary" @click="confirmUserForm">确定</el-button>
       </span>
     </template>
   </el-dialog>
@@ -253,15 +353,15 @@
 import { reactive, onMounted, watch, nextTick } from "vue";
 import { AppData } from "./data.js";
 import { staticPath } from "./utils";
- import { ElNotification } from 'element-plus'
- import axios from './axios';
- import $ from 'jquery'
- import { Calendar, Search } from '@element-plus/icons-vue'
+ import { ElNotification } from "element-plus";
+ import axios from "./axios";
+ import $ from "jquery";
+ import { Calendar, Search } from "@element-plus/icons-vue";
 
 const G6 = (window as any).G6.default as any;
 
 function delay(time) {
-   return new Promise((resolve) => setTimeout(resolve, time));
+   return new Promise(resolve => setTimeout(resolve, time));
 }
 
 export default {
@@ -274,7 +374,7 @@ export default {
         { label: "待确认", value: "0" },
         { label: "填写表单", value: "1" },
         { label: "部门负责人审批", value: "2" },
-         { label: "总经理审批", value: "3" },
+         { label: "总经理审批", value: "3" }
       ],
       menuData: [
         {
@@ -283,8 +383,8 @@ export default {
             { label: "开始", shape: "ellipse", id: "start-node" },
             { label: "结束", shape: "ellipse", id: "end-node" },
             { label: "审批节点", busType: "123" },
-             { label: "判断节点", shape: "diamond" },
-           ],
+             { label: "判断节点", shape: "diamond" }
+           ]
         },
         {
           label: "其他形状节点",
@@ -294,123 +394,260 @@ export default {
             { label: "椭圆节点", shape: "ellipse" },
             { label: "菱形节点", shape: "diamond" },
             { label: "三角形节点", shape: "triangle" },
-             { label: "星形节点", shape: "star" },
-           ],
-         },
+             { label: "星形节点", shape: "star" }
+           ]
+         }
       ],
       activityConfig: {
         advertisement: {
           text: "广告宣传1",
           desc: "通过广告宣传新品",
           color: "#9283ed",
-           img: 'https://cdn.ipadbiz.cn/oa/advertisement-node.svg',
+           img: "https://cdn.ipadbiz.cn/oa/advertisement-node.svg"
         },
         coupon: {
           text: "优惠券",
           desc: "发放奖励优惠券",
           color: "#ed8383",
-           img: 'https://cdn.ipadbiz.cn/oa/coupon-node.svg',
+           img: "https://cdn.ipadbiz.cn/oa/coupon-node.svg"
         },
         crowd: {
           text: "用户反馈",
           desc: "收集用户反馈信息",
           color: "#92dba8",
-           img: 'https://cdn.ipadbiz.cn/oa/crowd-node.svg',
-         },
+           img: "https://cdn.ipadbiz.cn/oa/crowd-node.svg"
+         }
       },
       dialogUserFormVisible: true,
       activeName: "node",
       attr_radio: "基础属性",
       auth_all_checked: false,
       auth_all_edit: false,
-       field_auths: [{
-         name: "字段1",
-         visible: {
-           checked: true,
-           disabled: false,
-         },
-         editable: {
-           checked: false,
-           disabled: true,
-         }
-       }, {
-         name: "字段2",
-         visible: {
-           checked: true,
-           disabled: false,
+       field_auths: [
+         {
+           name: "字段1",
+           visible: {
+             checked: true,
+             disabled: false
+           },
+           editable: {
+             checked: false,
+             disabled: true
+           }
         },
-         editable: {
-           checked: false,
-           disabled: false,
-         }
-       }, {
-         name: "字段3",
-         visible: {
-           checked: true,
-           disabled: false,
+         {
+           name: "字段2",
+           visible: {
+             checked: true,
+             disabled: false
+           },
+           editable: {
+             checked: false,
+             disabled: false
+           }
         },
-         editable: {
-           checked: false,
-           disabled: false,
+         {
+           name: "字段3",
+           visible: {
+             checked: true,
+             disabled: false
+           },
+           editable: {
+             checked: false,
+             disabled: false
+           }
         }
-       }],
-       tags: [
-         { name: '成员1', id: '1' },
-         { name: '成员2', id: '2' },
-         { name: '成员3', id: '3' },
-         { name: '成员4', id: '4' },
       ],
-       activeTabId: 'tab-1', // TODO: 需要获取默认第一个ID
+       userTags: [
+         { name: "成员1", id: "1" },
+         { name: "成员2", id: "2" },
+         { name: "成员3", id: "3" },
+         { name: "成员4", id: "4" }
+       ],
+       activeTabId: "tab-1", // TODO: 需要获取默认第一个ID
       userTabs: [
-         { id: 'tab-1', label: '组织架构', type: 'tree' },
-         { id: 'tab-2', label: '角色', type: 'list' },
-         // { id: 'tab-3', label: '成员' },
-         // { id: 'tab-4', label: '动态负责人' },
-         // { id: 'tab-5', label: '组织架构' },
-         // { id: 'tab-6', label: '角色' },
-         // { id: 'tab-7', label: '成员' },
-         // { id: 'tab-8', label: '动态负责人' },
-         // { id: 'tab-9', label: '角色' },
-         // { id: 'tab-10', label: '成员' },
-         // { id: 'tab-11', label: '动态负责人' },
+         {
+           id: "tab-1",
+           label: "组织架构",
+           type: "tree",
+           data: [
+             {
+               id: "dept-1",
+               label: "上级部门 1",
+               children: [
+                 {
+                   id: "dept-1-1",
+                   label: "部门名称 1-1",
+                   children: [],
+                   list: [
+                     {
+                       id: "user-1-1",
+                       label: "用户1-1",
+                       checked: true,
+                       disabled: false
+                     },
+                     {
+                       id: "user-1-2",
+                       label: "用户1-2",
+                       checked: false,
+                       disabled: false
+                     },
+                     {
+                       id: "user-1-3",
+                       label: "用户1-3",
+                       checked: false,
+                       disabled: true
+                     }
+                   ]
+                 }
+               ]
+             },
+             {
+               id: "dept-2",
+               label: "上级部门 2",
+               children: [
+                 {
+                   id: "dept-2-1",
+                   label: "部门名称 2-1",
+                   children: [],
+                   list: [
+                     {
+                       id: "user-2-1",
+                       label: "用户2-1",
+                       checked: false,
+                       disabled: false
+                     },
+                     {
+                       id: "user-2-2",
+                       label: "用户2-2",
+                       checked: false,
+                       disabled: false
+                     },
+                     {
+                       id: "user-2-3",
+                       label: "用户2-3",
+                       checked: false,
+                       disabled: true
+                     }
+                   ]
+                 }
+               ]
+             }
+           ]
+         },
+         {
+           id: "tab-2",
+           label: "角色",
+           type: "list",
+           data: [
+             {
+               id: "role-1-1",
+               label: "流程发起人",
+               children: [],
+               list: [
+                 {
+                   id: "role-1-2",
+                   label: "选项 A",
+                   checked: true,
+                   disabled: false
+                 },
+                 {
+                   id: "role-1-3",
+                   label: "选项 B",
+                   checked: false,
+                   disabled: false
+                 },
+                 {
+                   id: "role-1-4",
+                   label: "选项 C",
+                   checked: false,
+                   disabled: true
+                 }
+               ]
+             }, {
+               id: "role-1-2",
+               label: "成员字段",
+               children: [],
+               list: [],
+             }, {
+               id: "role-1-3",
+               label: "部门字段",
+               children: [],
+               list: [],
+             }, {
+               id: "role-1-4",
+               label: "主管",
+               children: [],
+               list: [],
+             }
+           ]
+         }
       ],
-       userTabType: 'tree',
-       tabOffset: '0px',
-       tabTextWidth: '76px', // 文字宽度需要打开弹框时重新计算
+       tabSelectData: [],
+       userTabType: "tree",
+       tabOffset: "0px",
+       tabTextWidth: "76px", // 文字宽度需要打开弹框时重新计算
       is_active_search: false,
-       search_input: '',
-       checkList: ['1' , '5'],
+       search_input: "",
+       userList: [],
+       checkedUserList: [],
+       checkedDeptUserList: [], // 选中部门用户ID
+       deptUserList: [
+         {
+           id: "dept-1",
+           label: "部门1",
+           checked: false,
+           disabled: false
+         },
+         {
+           id: "dept-2",
+           label: "部门2",
+           checked: false,
+           disabled: false
+         },
+         {
+           id: "dept-3",
+           label: "部门3",
+           checked: false,
+           disabled: true
+         }
+       ], // 组织架构框 选中 用户ID
+       checkedRoleUserList: [], // 选中角色用户ID
+       roleUserList: [], // 角色框 选中 用户ID
+       searchUserList: [], // 搜索框 选中 用户ID
+       userGroup: [], // 待选用户列表
       tree_data: [
         {
-           label: '上级部门 1',
+           label: "上级部门 1",
           children: [
             {
-               label: '部门名称 1-1',
-               children: [],
-             },
-           ],
+               label: "部门名称 1-1",
+               children: []
+             }
+           ]
         },
         {
-           label: '上级部门 2',
+           label: "上级部门 2",
           children: [
             {
-               label: '部门名称 2-1',
-               children: [],
-             },
-           ],
-         },
+               label: "部门名称 2-1",
+               children: []
+             }
+           ]
+         }
       ],
       defaultProps: {
-         children: 'children',
-         label: 'label',
+         children: "children",
+         label: "label"
       }
     });
 
     function handleActiveChange(name) {
-       console.warn(name)
+       console.warn(name);
     }
 
-     const onAuthAllChange = (val) => { // 全选可见按钮回调
+     const onAuthAllChange = val => {
+       // 全选可见按钮回调
       if (val) {
         // 全部选中
         state.field_auths.forEach(ele => {
@@ -422,39 +659,87 @@ export default {
           ele.visible.checked = false;
         });
       }
-     }
-     const onAuthAllEditChange = (val) => { // 全选可编辑按钮回调
+     };
+     const onAuthAllEditChange = val => {
+       // 全选可编辑按钮回调
       console.warn(val);
-     }
+     };
 
-     const handleTabClick = (tab, event, idx) => { // 点击Tab切换回调
+     const handleTabClick = (tab, event, idx) => {
+       // 点击Tab切换回调
+       state.tabSelectData = tab.data; // tab选中数据提供给list类型使用
+       state.userList = []; // 清空用户列表
+       state.checkedUserList = []; // 清空选中用户列表
       console.log(tab, event);
       // 设置当前激活的tab
       state.userTabType = tab.type;
       state.activeTabId = tab.id;
       // 子容器相对于父容器的相对x轴位移, 第一项为0
       if (idx) {
-         state.tabOffset = $('#'+tab.id).position().left + 20 + 'px';
+         state.tabOffset = $("#" + tab.id).position().left + 20 + "px";
       } else {
-         state.tabOffset = '0px'
+         state.tabOffset = "0px";
       }
       // 文字宽度
-       state.tabTextWidth = $('#'+tab.id).width() + 'px';
-     }
+       state.tabTextWidth = $("#" + tab.id).width() + "px";
+       // 检查列表第一项是否有值
+       if (tab?.data[0]?.list) {
+         let list = tab.data[0].list;
+         state.userList = list;
+         state.checkedUserList = list.filter(ele => {
+           return ele.checked;
+         }).map(ele => {
+           return ele.id;
+         });
+       }
+     };
 
-     const handleTabContentClick = (tab, event) => {
-       console.log(tab);
-       console.log(event);
-     }
+     const handleTabContentClick = (tab, event) => { // 侧边栏Tab点击回调
+       // console.log(event);
+       state.tabSelectData.forEach(ele => {
+         if (ele.label === tab.props.label) {
+           state.userList = ele.list;
+           state.checkedUserList = ele.list.filter(ele => {
+             return ele.checked;
+           }).map(ele => {
+             return ele.id;
+           });
+         }
+       })
+     };
 
-     const handleNodeClick = (data) => {
-       console.log(data)
-     }
+     const handleNodeClick = data => {
+       console.log(data);
+       if (data.list) {
+         state.userList = data.list;
+         state.checkedUserList = data.list.filter(ele => {
+           return ele.checked;
+         }).map(ele => {
+           return ele.id;
+         });
+         console.warn(state.checkedUserList);
+       }
+     };
+ 
+     const handleTagClose = tag => {
+       // 移除成员标签回调
+       state.userTags.splice(state.userTags.indexOf(tag), 1);
+       console.log(tag);
+     };
+ 
+     const closeUserForm = () => {
+       // 关闭用户列表表单回调
+       state.dialogUserFormVisible = false;
+     };
+     const confirmUserForm = () => {
+       // 确认用户列表表单回调
+       state.dialogUserFormVisible = false;
+       console.log(state.userTags);
+     };
 
     onMounted(() => {
       // // 显示提示框的标志位
       // var showConfirmation = true;
- 
       // // 监听 beforeunload 事件
       // window.addEventListener('beforeunload', function (event) {
       //   if (showConfirmation) {
@@ -462,38 +747,34 @@ export default {
       //     event.preventDefault();
       //     // Chrome 和 Firefox 需要返回一个值以显示确认对话框
       //     event.returnValue = '';
- 
       //     // 显示自定义的提示信息
       //     var confirmationMessage = '确定要离开此页面吗？';
       //     (event || window.event).returnValue = confirmationMessage;  // 兼容旧版浏览器
- 
       //     return confirmationMessage;
       //   }
       // });
- 
       // // 监听 unload 事件
       // window.addEventListener('unload', function () {
       //   // 设置标志位为 false，避免在刷新页面时再次显示提示框
       //   showConfirmation = false;
       // });
- 
       // axios.get('/srv/?a=query_form_all_field')
       // .then(res => {
       //   console.warn(res.data);
- 
       // });
- 
       // $('.el-tabs__nav')
- 
     });
 
-     watch(() => state.dialogUserFormVisible, (val) => {
-       if (val) {
-         nextTick(() => {
-           state.tabTextWidth = $('#'+ state.activeTabId).width() + 'px';
-         })
+     watch(
+       () => state.dialogUserFormVisible,
+       val => {
+         if (val) {
+           nextTick(() => {
+             state.tabTextWidth = $("#" + state.activeTabId).width() + "px";
+           });
+         }
       }
-     });
+     );
 
     let editor;
 
@@ -515,7 +796,7 @@ export default {
         style: style || {},
         labelCfg: labelCfg || { style: {} },
         type: null,
-         id: null,
+         id: null
       };
       model.type = e.item.get("type");
       model.id = e.item.get("id");
@@ -567,7 +848,7 @@ export default {
             const node = data.nodes[i];
             if (node.id === model.id) {
               ElNotification.error(
-               `只能有一个${model.id === "start-node" ? "开始" : "结束"}节点`
+                 `只能有一个${model.id === "start-node" ? "开始" : "结束"}节点`
               );
               return Promise.reject("reject");
             }
@@ -594,14 +875,14 @@ export default {
           y,
           text,
           desc,
-           img,
+           img
         })
       );
       edges = edges.map(({ source, sourceAnchor, target, targetAnchor }) => ({
         source,
         sourceAnchor,
         target,
-         targetAnchor,
+         targetAnchor
       }));
       console.log(JSON.stringify({ nodes, edges }, null, 2));
     }
@@ -626,13 +907,16 @@ export default {
       handleTabClick,
       handleTabContentClick,
       handleNodeClick,
+       handleTagClose,
+       closeUserForm,
+       confirmUserForm,
 
       logData,
 
-       onRef: (e) => (editor = e),
-       staticPath,
+       onRef: e => (editor = e),
+       staticPath
     };
-   },
+   }
 };
 </script>
 
@@ -690,19 +974,41 @@ body {
 }
 
 .flow-tabs__active-bar {
-   position: absolute; bottom: 0; left: 0; height: 2px; background-color: #409eff; z-index: 1; transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); list-style: none;
+   position: absolute;
+   bottom: 0;
+   left: 0;
+   height: 2px;
+   background-color: #409eff;
+   z-index: 1;
+   transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+     transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+   list-style: none;
 }
 
 .flow-tabs__nav {
-   display: flex; white-space: nowrap; position: relative; transition: transformX(0px); float: left;
+   display: flex;
+   white-space: nowrap;
+   position: relative;
+   transition: transformX(0px);
+   float: left;
   .flow-tabs__item {
-     padding: 0 20px; height: 40px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; list-style: none; font-size: 14px; font-weight: 500; color: #303133; position: relative;
+     padding: 0 20px;
+     height: 40px;
+     box-sizing: border-box;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     list-style: none;
+     font-size: 14px;
+     font-weight: 500;
+     color: #303133;
+     position: relative;
     &:hover {
-       color: #409EFF;
+       color: #409eff;
       cursor: pointer;
     }
     &.is-active {
-       color: #409EFF;
+       color: #409eff;
     }
     &.is-top:nth-child(2) {
       padding-left: 0;
@@ -713,7 +1019,8 @@ body {
 .flow-tab-search {
   position: absolute;
   top: 0;
-   right: 0; width: 100px;
+   right: 0;
+   width: 100px;
   display: flex;
   align-items: center;
   background-color: #e4e7ed;
@@ -730,5 +1037,4 @@ body {
     display: flex !important;
   }
 }
- 
 </style>