Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
30583cb7 1 parent e8439667

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

Inline Side-by-side
Showing 1 changed file with 452 additions and 146 deletions
...@@ -55,40 +55,85 @@ ...@@ -55,40 +55,85 @@
55 label-width="100px" 55 label-width="100px"
56 > 56 >
57 <template v-if="state.detailModel.activity === undefined"> 57 <template v-if="state.detailModel.activity === undefined">
58 - <el-tabs v-model="state.activeName" class="" @tab-change="handleActiveChange" stretch> 58 + <el-tabs
59 + v-model="state.activeName"
60 + class=""
61 + @tab-change="handleActiveChange"
62 + stretch
63 + >
59 <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem"> 64 <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem">
60 <el-form-item prop="label"> 65 <el-form-item prop="label">
61 - <div slot="label">节点名称 <span style="color: red;">*</span></div> 66 + <div slot="label">
67 + 节点名称 <span style="color: red;">*</span>
68 + </div>
62 <el-input v-model="state.detailModel.label" /> 69 <el-input v-model="state.detailModel.label" />
63 </el-form-item> 70 </el-form-item>
64 <el-form-item prop="attr"> 71 <el-form-item prop="attr">
65 - <el-radio-group v-model="state.attr_radio" size="large" class="attr-radio-group"> 72 + <el-radio-group
66 - <el-radio-button label="基础属性"/> 73 + v-model="state.attr_radio"
74 + size="large"
75 + class="attr-radio-group"
76 + >
77 + <el-radio-button label="基础属性" />
67 <el-radio-button label="更多属性" /> 78 <el-radio-button label="更多属性" />
68 </el-radio-group> 79 </el-radio-group>
69 </el-form-item> 80 </el-form-item>
70 <el-form-item v-if="state.attr_radio === '基础属性'" prop=""> 81 <el-form-item v-if="state.attr_radio === '基础属性'" prop="">
71 - <div slot="label">字段权限 <span style="color: red;">*</span></div> 82 + <div slot="label">
72 - <el-row style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"> 83 + 字段权限 <span style="color: red;">*</span>
84 + </div>
85 + <el-row
86 + style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"
87 + >
73 <el-col :span="12">字段</el-col> 88 <el-col :span="12">字段</el-col>
74 <el-col :span="6">可见</el-col> 89 <el-col :span="6">可见</el-col>
75 <el-col :span="6">可编辑</el-col> 90 <el-col :span="6">可编辑</el-col>
76 </el-row> 91 </el-row>
77 <el-row style="width: 100%; padding-left: 10px;"> 92 <el-row style="width: 100%; padding-left: 10px;">
78 <el-col :span="12" style="color: #409eff;">全选</el-col> 93 <el-col :span="12" style="color: #409eff;">全选</el-col>
79 - <el-col :span="6" style="padding-left: 5px;"><el-checkbox @change="onAuthAllChange" v-model="state.auth_all_checked" label="" size="large" /></el-col> 94 + <el-col :span="6" style="padding-left: 5px;"
80 - <el-col :span="6" style="padding-left: 5px;"><el-checkbox @change="onAuthAllEditChange" v-model="state.auth_all_edit" label="" size="large" /></el-col> 95 + ><el-checkbox
96 + @change="onAuthAllChange"
97 + v-model="state.auth_all_checked"
98 + label=""
99 + size="large"
100 + /></el-col>
101 + <el-col :span="6" style="padding-left: 5px;"
102 + ><el-checkbox
103 + @change="onAuthAllEditChange"
104 + v-model="state.auth_all_edit"
105 + label=""
106 + size="large"
107 + /></el-col>
81 </el-row> 108 </el-row>
82 - <el-row v-for="(field, index) in state.field_auths" :key="index" style="width: 100%; padding-left: 10px;"> 109 + <el-row
110 + v-for="(field, index) in state.field_auths"
111 + :key="index"
112 + style="width: 100%; padding-left: 10px;"
113 + >
83 <el-col :span="12" style="">{{ field.name }}</el-col> 114 <el-col :span="12" style="">{{ field.name }}</el-col>
84 - <el-col :span="6" style="padding-left: 5px;"><el-checkbox v-model="field.visible.checked" :disabled="field.visible.disabled" label="" size="large" /></el-col> 115 + <el-col :span="6" style="padding-left: 5px;"
85 - <el-col :span="6" style="padding-left: 5px;"><el-checkbox v-model="field.editable.checked" :disabled="field.editable.disabled" label="" size="large" /></el-col> 116 + ><el-checkbox
117 + v-model="field.visible.checked"
118 + :disabled="field.visible.disabled"
119 + label=""
120 + size="large"
121 + /></el-col>
122 + <el-col :span="6" style="padding-left: 5px;"
123 + ><el-checkbox
124 + v-model="field.editable.checked"
125 + :disabled="field.editable.disabled"
126 + label=""
127 + size="large"
128 + /></el-col>
86 </el-row> 129 </el-row>
87 </el-form-item> 130 </el-form-item>
88 </el-tab-pane> 131 </el-tab-pane>
89 <el-tab-pane label="流程属性" name="flow" style="padding: 0 1rem"> 132 <el-tab-pane label="流程属性" name="flow" style="padding: 0 1rem">
90 <el-form-item prop="label"> 133 <el-form-item prop="label">
91 - <div slot="label">测试属性 <span style="color: red;">*</span></div> 134 + <div slot="label">
135 + 测试属性 <span style="color: red;">*</span>
136 + </div>
92 <el-input v-model="state.detailModel.data.test" /> 137 <el-input v-model="state.detailModel.data.test" />
93 </el-form-item> 138 </el-form-item>
94 </el-tab-pane> 139 </el-tab-pane>
...@@ -107,7 +152,12 @@ ...@@ -107,7 +152,12 @@
107 </el-form-item> 152 </el-form-item>
108 </template> --> 153 </template> -->
109 <div style="margin-left: 20px;"> 154 <div style="margin-left: 20px;">
110 - <el-button type="primary" @click="state.dialogUserFormVisible = true"> 设置人员配置 </el-button> 155 + <el-button
156 + type="primary"
157 + @click="state.dialogUserFormVisible = true"
158 + >
159 + 设置人员配置
160 + </el-button>
111 </div> 161 </div>
112 </template> 162 </template>
113 <template v-else> 163 <template v-else>
...@@ -149,12 +199,12 @@ ...@@ -149,12 +199,12 @@
149 <el-dialog v-model="state.dialogUserFormVisible" title="成员列表"> 199 <el-dialog v-model="state.dialogUserFormVisible" title="成员列表">
150 <div style="border: 1px dashed #DCDFE6; padding: 10px;"> 200 <div style="border: 1px dashed #DCDFE6; padding: 10px;">
151 <el-tag 201 <el-tag
152 - v-for="tag in state.tags" 202 + v-for="tag in state.userTags"
153 :key="tag.name" 203 :key="tag.name"
154 - class="mx-1" 204 + class=""
155 style="margin-left: 0.25rem; margin-right: 0.25rem;" 205 style="margin-left: 0.25rem; margin-right: 0.25rem;"
156 closable 206 closable
157 - :type="tag.type" 207 + @close="handleTagClose(tag)"
158 > 208 >
159 {{ tag.name }} 209 {{ tag.name }}
160 </el-tag> 210 </el-tag>
...@@ -166,70 +216,122 @@ ...@@ -166,70 +216,122 @@
166 <div class="flow-tabs__nav-wrap"> 216 <div class="flow-tabs__nav-wrap">
167 <div class="flow-tabs__nav-scroll"> 217 <div class="flow-tabs__nav-scroll">
168 <div class="flow-tabs__nav is-top"> 218 <div class="flow-tabs__nav is-top">
169 - <div ref_key="barRef" class="flow-tabs__active-bar" :style="{ width: state.tabTextWidth, transform: 'translateX' + '(' + state.tabOffset + ')' }"></div>
170 <div 219 <div
171 - v-for="(item, index) in state.userTabs" :key="index" 220 + ref_key="barRef"
172 - :class="['flow-tabs__item', 'is-top', item.id === state.activeTabId ? 'is-active' : '']" 221 + class="flow-tabs__active-bar"
173 - :id="item.id" @click="handleTabClick(item, $event, index)"> 222 + :style="{
223 + width: state.tabTextWidth,
224 + transform: 'translateX' + '(' + state.tabOffset + ')'
225 + }"
226 + ></div>
227 + <div
228 + v-for="(item, index) in state.userTabs"
229 + :key="index"
230 + :class="[
231 + 'flow-tabs__item',
232 + 'is-top',
233 + item.id === state.activeTabId ? 'is-active' : ''
234 + ]"
235 + :id="item.id"
236 + @click="handleTabClick(item, $event, index)"
237 + >
174 {{ item.label }} 238 {{ item.label }}
175 </div> 239 </div>
176 </div> 240 </div>
177 </div> 241 </div>
178 </div> 242 </div>
179 - <div class="flow-tab-search" @click="state.is_active_search = !state.is_active_search"> 243 + <div
244 + class="flow-tab-search"
245 + @click="state.is_active_search = !state.is_active_search"
246 + >
180 <el-icon :size="15"><Search /></el-icon> &nbsp;搜索框 247 <el-icon :size="15"><Search /></el-icon> &nbsp;搜索框
181 </div> 248 </div>
182 </div> 249 </div>
183 <div v-else> 250 <div v-else>
184 - <el-input v-model="state.search_input" class="w-50 m-2" placeholder="请输入关键字"> 251 + <el-input
252 + v-model="state.search_input"
253 + class="w-50 m-2"
254 + placeholder="请输入关键字"
255 + >
185 <template #prefix> 256 <template #prefix>
186 <el-icon class="el-input__icon"><search /></el-icon> 257 <el-icon class="el-input__icon"><search /></el-icon>
187 </template> 258 </template>
188 <template #append> 259 <template #append>
189 - <el-button @click="state.is_active_search = !state.is_active_search">取消</el-button> 260 + <el-button
261 + @click="state.is_active_search = !state.is_active_search"
262 + >取消</el-button
263 + >
190 </template> 264 </template>
191 </el-input> 265 </el-input>
192 </div> 266 </div>
193 </div> 267 </div>
194 </div> 268 </div>
269 + <!-- 未激活搜索框 -->
195 <div v-if="!state.is_active_search"> 270 <div v-if="!state.is_active_search">
196 - <div v-if="state.userTabType === 'tree'"> 271 + <div v-for="(item, index) in state.userTabs" :key="index">
272 + <div v-if="item.id === state.activeTabId && item.type === 'tree'">
197 <el-row> 273 <el-row>
198 <el-col :span="8"> 274 <el-col :span="8">
199 - <el-tree :data="state.tree_data" :props="state.defaultProps" empty-text="暂无数据" @node-click="handleNodeClick" /> 275 + <el-tree
276 + :data="item.data"
277 + :props="state.defaultProps"
278 + empty-text="暂无数据"
279 + @node-click="handleNodeClick"
280 + />
200 </el-col> 281 </el-col>
201 <el-col :span="16"> 282 <el-col :span="16">
202 - <div style="border-left: 2px solid #e4e7ed; width: 2px; height: 100%; padding-left: 10px;"> 283 + <div
203 - <el-checkbox-group class="flow-checkbox-group" v-model="state.checkList"> 284 + style="border-left: 2px solid #e4e7ed; width: 2px; height: 100%; padding-left: 10px;"
204 - <el-checkbox label="1">选项 A</el-checkbox> 285 + >
205 - <el-checkbox label="2">选项 B</el-checkbox> 286 + <el-checkbox-group
206 - <el-checkbox label="3">选项 C</el-checkbox> 287 + class="flow-checkbox-group"
207 - <el-checkbox label="4" disabled>禁用</el-checkbox> 288 + v-model="state.checkedUserList"
208 - <el-checkbox label="5" disabled>选中和禁用</el-checkbox> 289 + >
290 + <el-checkbox
291 + v-for="(user, idx) in state.userList"
292 + :key="idx"
293 + :label="user.id"
294 + :disabled="user.disabled"
295 + >{{ user.label }}</el-checkbox
296 + >
209 </el-checkbox-group> 297 </el-checkbox-group>
210 </div> 298 </div>
211 </el-col> 299 </el-col>
212 </el-row> 300 </el-row>
213 </div> 301 </div>
214 - <div v-if="state.userTabType === 'list'"> 302 + <div v-if="item.id === state.activeTabId && item.type === 'list'">
215 - <el-tabs tab-position="left" style="" class="demo-tabs" v-model="activeTabContent" @tab-click="handleTabContentClick"> 303 + <el-tabs
216 - <el-tab-pane label="流程发起人"> 304 + tab-position="left"
217 - <el-checkbox-group class="flow-checkbox-group" v-model="state.checkList"> 305 + style=""
218 - <el-checkbox label="1">选项 A</el-checkbox> 306 + class="demo-tabs"
219 - <el-checkbox label="2">选项 B</el-checkbox> 307 + v-model="activeTabContent"
220 - <el-checkbox label="3">选项 C</el-checkbox> 308 + @tab-click="handleTabContentClick"
221 - <el-checkbox label="4" disabled>禁用</el-checkbox> 309 + >
222 - <el-checkbox label="5" disabled>选中和禁用</el-checkbox> 310 + <el-tab-pane v-for="(role, idx) in item.data" :key="idx" :label="role.label">
311 + <el-checkbox-group
312 + class="flow-checkbox-group"
313 + v-model="state.checkedUserList"
314 + >
315 + <el-checkbox
316 + v-for="(user, idx) in state.userList"
317 + :key="idx"
318 + :label="user.id"
319 + :disabled="user.disabled"
320 + >{{ user.label }}</el-checkbox
321 + >
223 </el-checkbox-group> 322 </el-checkbox-group>
224 </el-tab-pane> 323 </el-tab-pane>
225 - <el-tab-pane label="成员字段">成员字段</el-tab-pane>
226 - <el-tab-pane label="部门字段">部门字段</el-tab-pane>
227 - <el-tab-pane label="主管">主管</el-tab-pane>
228 </el-tabs> 324 </el-tabs>
229 </div> 325 </div>
230 </div> 326 </div>
327 + </div>
328 + <!-- 激活搜索框 -->
231 <div v-else> 329 <div v-else>
232 - <el-checkbox-group class="flow-checkbox-group" style="padding-left: 10px;" v-model="state.checkList"> 330 + <el-checkbox-group
331 + class="flow-checkbox-group"
332 + style="padding-left: 10px;"
333 + v-model="state.searchUserList"
334 + >
233 <el-checkbox label="1">选项 A</el-checkbox> 335 <el-checkbox label="1">选项 A</el-checkbox>
234 <el-checkbox label="2">选项 B</el-checkbox> 336 <el-checkbox label="2">选项 B</el-checkbox>
235 <el-checkbox label="3">选项 C</el-checkbox> 337 <el-checkbox label="3">选项 C</el-checkbox>
...@@ -240,10 +342,8 @@ ...@@ -240,10 +342,8 @@
240 </div> 342 </div>
241 <template #footer> 343 <template #footer>
242 <span class="dialog-footer"> 344 <span class="dialog-footer">
243 - <el-button @click="state.dialogUserFormVisible = false">取消</el-button> 345 + <el-button @click="closeUserForm">取消</el-button>
244 - <el-button type="primary" @click="state.dialogUserFormVisible = false"> 346 + <el-button type="primary" @click="confirmUserForm">确定</el-button>
245 - 确定
246 - </el-button>
247 </span> 347 </span>
248 </template> 348 </template>
249 </el-dialog> 349 </el-dialog>
...@@ -253,15 +353,15 @@ ...@@ -253,15 +353,15 @@
253 import { reactive, onMounted, watch, nextTick } from "vue"; 353 import { reactive, onMounted, watch, nextTick } from "vue";
254 import { AppData } from "./data.js"; 354 import { AppData } from "./data.js";
255 import { staticPath } from "./utils"; 355 import { staticPath } from "./utils";
256 -import { ElNotification } from 'element-plus' 356 +import { ElNotification } from "element-plus";
257 -import axios from './axios'; 357 +import axios from "./axios";
258 -import $ from 'jquery' 358 +import $ from "jquery";
259 -import { Calendar, Search } from '@element-plus/icons-vue' 359 +import { Calendar, Search } from "@element-plus/icons-vue";
260 360
261 const G6 = (window as any).G6.default as any; 361 const G6 = (window as any).G6.default as any;
262 362
263 function delay(time) { 363 function delay(time) {
264 - return new Promise((resolve) => setTimeout(resolve, time)); 364 + return new Promise(resolve => setTimeout(resolve, time));
265 } 365 }
266 366
267 export default { 367 export default {
...@@ -274,7 +374,7 @@ export default { ...@@ -274,7 +374,7 @@ export default {
274 { label: "待确认", value: "0" }, 374 { label: "待确认", value: "0" },
275 { label: "填写表单", value: "1" }, 375 { label: "填写表单", value: "1" },
276 { label: "部门负责人审批", value: "2" }, 376 { label: "部门负责人审批", value: "2" },
277 - { label: "总经理审批", value: "3" }, 377 + { label: "总经理审批", value: "3" }
278 ], 378 ],
279 menuData: [ 379 menuData: [
280 { 380 {
...@@ -283,8 +383,8 @@ export default { ...@@ -283,8 +383,8 @@ export default {
283 { label: "开始", shape: "ellipse", id: "start-node" }, 383 { label: "开始", shape: "ellipse", id: "start-node" },
284 { label: "结束", shape: "ellipse", id: "end-node" }, 384 { label: "结束", shape: "ellipse", id: "end-node" },
285 { label: "审批节点", busType: "123" }, 385 { label: "审批节点", busType: "123" },
286 - { label: "判断节点", shape: "diamond" }, 386 + { label: "判断节点", shape: "diamond" }
287 - ], 387 + ]
288 }, 388 },
289 { 389 {
290 label: "其他形状节点", 390 label: "其他形状节点",
...@@ -294,123 +394,260 @@ export default { ...@@ -294,123 +394,260 @@ export default {
294 { label: "椭圆节点", shape: "ellipse" }, 394 { label: "椭圆节点", shape: "ellipse" },
295 { label: "菱形节点", shape: "diamond" }, 395 { label: "菱形节点", shape: "diamond" },
296 { label: "三角形节点", shape: "triangle" }, 396 { label: "三角形节点", shape: "triangle" },
297 - { label: "星形节点", shape: "star" }, 397 + { label: "星形节点", shape: "star" }
298 - ], 398 + ]
299 - }, 399 + }
300 ], 400 ],
301 activityConfig: { 401 activityConfig: {
302 advertisement: { 402 advertisement: {
303 text: "广告宣传1", 403 text: "广告宣传1",
304 desc: "通过广告宣传新品", 404 desc: "通过广告宣传新品",
305 color: "#9283ed", 405 color: "#9283ed",
306 - img: 'https://cdn.ipadbiz.cn/oa/advertisement-node.svg', 406 + img: "https://cdn.ipadbiz.cn/oa/advertisement-node.svg"
307 }, 407 },
308 coupon: { 408 coupon: {
309 text: "优惠券", 409 text: "优惠券",
310 desc: "发放奖励优惠券", 410 desc: "发放奖励优惠券",
311 color: "#ed8383", 411 color: "#ed8383",
312 - img: 'https://cdn.ipadbiz.cn/oa/coupon-node.svg', 412 + img: "https://cdn.ipadbiz.cn/oa/coupon-node.svg"
313 }, 413 },
314 crowd: { 414 crowd: {
315 text: "用户反馈", 415 text: "用户反馈",
316 desc: "收集用户反馈信息", 416 desc: "收集用户反馈信息",
317 color: "#92dba8", 417 color: "#92dba8",
318 - img: 'https://cdn.ipadbiz.cn/oa/crowd-node.svg', 418 + img: "https://cdn.ipadbiz.cn/oa/crowd-node.svg"
319 - }, 419 + }
320 }, 420 },
321 dialogUserFormVisible: true, 421 dialogUserFormVisible: true,
322 activeName: "node", 422 activeName: "node",
323 attr_radio: "基础属性", 423 attr_radio: "基础属性",
324 auth_all_checked: false, 424 auth_all_checked: false,
325 auth_all_edit: false, 425 auth_all_edit: false,
326 - field_auths: [{ 426 + field_auths: [
427 + {
327 name: "字段1", 428 name: "字段1",
328 visible: { 429 visible: {
329 checked: true, 430 checked: true,
330 - disabled: false, 431 + disabled: false
331 }, 432 },
332 editable: { 433 editable: {
333 checked: false, 434 checked: false,
334 - disabled: true, 435 + disabled: true
335 } 436 }
336 - }, { 437 + },
438 + {
337 name: "字段2", 439 name: "字段2",
338 visible: { 440 visible: {
339 checked: true, 441 checked: true,
340 - disabled: false, 442 + disabled: false
341 }, 443 },
342 editable: { 444 editable: {
343 checked: false, 445 checked: false,
344 - disabled: false, 446 + disabled: false
345 } 447 }
346 - }, { 448 + },
449 + {
347 name: "字段3", 450 name: "字段3",
348 visible: { 451 visible: {
349 checked: true, 452 checked: true,
350 - disabled: false, 453 + disabled: false
351 }, 454 },
352 editable: { 455 editable: {
353 checked: false, 456 checked: false,
354 - disabled: false, 457 + disabled: false
355 - } 458 + }
356 - }], 459 + }
357 - tags: [
358 - { name: '成员1', id: '1' },
359 - { name: '成员2', id: '2' },
360 - { name: '成员3', id: '3' },
361 - { name: '成员4', id: '4' },
362 ], 460 ],
363 - activeTabId: 'tab-1', // TODO: 需要获取默认第一个ID 461 + userTags: [
364 - userTabs: [ 462 + { name: "成员1", id: "1" },
365 - { id: 'tab-1', label: '组织架构', type: 'tree' }, 463 + { name: "成员2", id: "2" },
366 - { id: 'tab-2', label: '角色', type: 'list' }, 464 + { name: "成员3", id: "3" },
367 - // { id: 'tab-3', label: '成员' }, 465 + { name: "成员4", id: "4" }
368 - // { id: 'tab-4', label: '动态负责人' },
369 - // { id: 'tab-5', label: '组织架构' },
370 - // { id: 'tab-6', label: '角色' },
371 - // { id: 'tab-7', label: '成员' },
372 - // { id: 'tab-8', label: '动态负责人' },
373 - // { id: 'tab-9', label: '角色' },
374 - // { id: 'tab-10', label: '成员' },
375 - // { id: 'tab-11', label: '动态负责人' },
376 ], 466 ],
377 - userTabType: 'tree', 467 + activeTabId: "tab-1", // TODO: 需要获取默认第一个ID
378 - tabOffset: '0px', 468 + userTabs: [
379 - tabTextWidth: '76px', // 文字宽度需要打开弹框时重新计算
380 - is_active_search: false,
381 - search_input: '',
382 - checkList: ['1' , '5'],
383 - tree_data: [
384 { 469 {
385 - label: '上级部门 1', 470 + id: "tab-1",
471 + label: "组织架构",
472 + type: "tree",
473 + data: [
474 + {
475 + id: "dept-1",
476 + label: "上级部门 1",
386 children: [ 477 children: [
387 { 478 {
388 - label: '部门名称 1-1', 479 + id: "dept-1-1",
480 + label: "部门名称 1-1",
389 children: [], 481 children: [],
482 + list: [
483 + {
484 + id: "user-1-1",
485 + label: "用户1-1",
486 + checked: true,
487 + disabled: false
390 }, 488 },
391 - ], 489 + {
490 + id: "user-1-2",
491 + label: "用户1-2",
492 + checked: false,
493 + disabled: false
494 + },
495 + {
496 + id: "user-1-3",
497 + label: "用户1-3",
498 + checked: false,
499 + disabled: true
500 + }
501 + ]
502 + }
503 + ]
392 }, 504 },
393 { 505 {
394 - label: '上级部门 2', 506 + id: "dept-2",
507 + label: "上级部门 2",
395 children: [ 508 children: [
396 { 509 {
397 - label: '部门名称 2-1', 510 + id: "dept-2-1",
511 + label: "部门名称 2-1",
512 + children: [],
513 + list: [
514 + {
515 + id: "user-2-1",
516 + label: "用户2-1",
517 + checked: false,
518 + disabled: false
519 + },
520 + {
521 + id: "user-2-2",
522 + label: "用户2-2",
523 + checked: false,
524 + disabled: false
525 + },
526 + {
527 + id: "user-2-3",
528 + label: "用户2-3",
529 + checked: false,
530 + disabled: true
531 + }
532 + ]
533 + }
534 + ]
535 + }
536 + ]
537 + },
538 + {
539 + id: "tab-2",
540 + label: "角色",
541 + type: "list",
542 + data: [
543 + {
544 + id: "role-1-1",
545 + label: "流程发起人",
398 children: [], 546 children: [],
547 + list: [
548 + {
549 + id: "role-1-2",
550 + label: "选项 A",
551 + checked: true,
552 + disabled: false
553 + },
554 + {
555 + id: "role-1-3",
556 + label: "选项 B",
557 + checked: false,
558 + disabled: false
399 }, 559 },
560 + {
561 + id: "role-1-4",
562 + label: "选项 C",
563 + checked: false,
564 + disabled: true
565 + }
566 + ]
567 + }, {
568 + id: "role-1-2",
569 + label: "成员字段",
570 + children: [],
571 + list: [],
572 + }, {
573 + id: "role-1-3",
574 + label: "部门字段",
575 + children: [],
576 + list: [],
577 + }, {
578 + id: "role-1-4",
579 + label: "主管",
580 + children: [],
581 + list: [],
582 + }
583 + ]
584 + }
400 ], 585 ],
586 + tabSelectData: [],
587 + userTabType: "tree",
588 + tabOffset: "0px",
589 + tabTextWidth: "76px", // 文字宽度需要打开弹框时重新计算
590 + is_active_search: false,
591 + search_input: "",
592 + userList: [],
593 + checkedUserList: [],
594 + checkedDeptUserList: [], // 选中部门用户ID
595 + deptUserList: [
596 + {
597 + id: "dept-1",
598 + label: "部门1",
599 + checked: false,
600 + disabled: false
601 + },
602 + {
603 + id: "dept-2",
604 + label: "部门2",
605 + checked: false,
606 + disabled: false
607 + },
608 + {
609 + id: "dept-3",
610 + label: "部门3",
611 + checked: false,
612 + disabled: true
613 + }
614 + ], // 组织架构框 选中 用户ID
615 + checkedRoleUserList: [], // 选中角色用户ID
616 + roleUserList: [], // 角色框 选中 用户ID
617 + searchUserList: [], // 搜索框 选中 用户ID
618 + userGroup: [], // 待选用户列表
619 + tree_data: [
620 + {
621 + label: "上级部门 1",
622 + children: [
623 + {
624 + label: "部门名称 1-1",
625 + children: []
626 + }
627 + ]
401 }, 628 },
629 + {
630 + label: "上级部门 2",
631 + children: [
632 + {
633 + label: "部门名称 2-1",
634 + children: []
635 + }
636 + ]
637 + }
402 ], 638 ],
403 defaultProps: { 639 defaultProps: {
404 - children: 'children', 640 + children: "children",
405 - label: 'label', 641 + label: "label"
406 } 642 }
407 }); 643 });
408 644
409 function handleActiveChange(name) { 645 function handleActiveChange(name) {
410 - console.warn(name) 646 + console.warn(name);
411 } 647 }
412 648
413 - const onAuthAllChange = (val) => { // 全选可见按钮回调 649 + const onAuthAllChange = val => {
650 + // 全选可见按钮回调
414 if (val) { 651 if (val) {
415 // 全部选中 652 // 全部选中
416 state.field_auths.forEach(ele => { 653 state.field_auths.forEach(ele => {
...@@ -422,39 +659,87 @@ export default { ...@@ -422,39 +659,87 @@ export default {
422 ele.visible.checked = false; 659 ele.visible.checked = false;
423 }); 660 });
424 } 661 }
425 - } 662 + };
426 - const onAuthAllEditChange = (val) => { // 全选可编辑按钮回调 663 + const onAuthAllEditChange = val => {
664 + // 全选可编辑按钮回调
427 console.warn(val); 665 console.warn(val);
428 - } 666 + };
429 667
430 - const handleTabClick = (tab, event, idx) => { // 点击Tab切换回调 668 + const handleTabClick = (tab, event, idx) => {
669 + // 点击Tab切换回调
670 + state.tabSelectData = tab.data; // tab选中数据提供给list类型使用
671 + state.userList = []; // 清空用户列表
672 + state.checkedUserList = []; // 清空选中用户列表
431 console.log(tab, event); 673 console.log(tab, event);
432 // 设置当前激活的tab 674 // 设置当前激活的tab
433 state.userTabType = tab.type; 675 state.userTabType = tab.type;
434 state.activeTabId = tab.id; 676 state.activeTabId = tab.id;
435 // 子容器相对于父容器的相对x轴位移, 第一项为0 677 // 子容器相对于父容器的相对x轴位移, 第一项为0
436 if (idx) { 678 if (idx) {
437 - state.tabOffset = $('#'+tab.id).position().left + 20 + 'px'; 679 + state.tabOffset = $("#" + tab.id).position().left + 20 + "px";
438 } else { 680 } else {
439 - state.tabOffset = '0px' 681 + state.tabOffset = "0px";
440 } 682 }
441 // 文字宽度 683 // 文字宽度
442 - state.tabTextWidth = $('#'+tab.id).width() + 'px'; 684 + state.tabTextWidth = $("#" + tab.id).width() + "px";
685 + // 检查列表第一项是否有值
686 + if (tab?.data[0]?.list) {
687 + let list = tab.data[0].list;
688 + state.userList = list;
689 + state.checkedUserList = list.filter(ele => {
690 + return ele.checked;
691 + }).map(ele => {
692 + return ele.id;
693 + });
443 } 694 }
695 + };
444 696
445 - const handleTabContentClick = (tab, event) => { 697 + const handleTabContentClick = (tab, event) => { // 侧边栏Tab点击回调
446 - console.log(tab); 698 + // console.log(event);
447 - console.log(event); 699 + state.tabSelectData.forEach(ele => {
700 + if (ele.label === tab.props.label) {
701 + state.userList = ele.list;
702 + state.checkedUserList = ele.list.filter(ele => {
703 + return ele.checked;
704 + }).map(ele => {
705 + return ele.id;
706 + });
448 } 707 }
708 + })
709 + };
449 710
450 - const handleNodeClick = (data) => { 711 + const handleNodeClick = data => {
451 - console.log(data) 712 + console.log(data);
713 + if (data.list) {
714 + state.userList = data.list;
715 + state.checkedUserList = data.list.filter(ele => {
716 + return ele.checked;
717 + }).map(ele => {
718 + return ele.id;
719 + });
720 + console.warn(state.checkedUserList);
452 } 721 }
722 + };
723 +
724 + const handleTagClose = tag => {
725 + // 移除成员标签回调
726 + state.userTags.splice(state.userTags.indexOf(tag), 1);
727 + console.log(tag);
728 + };
729 +
730 + const closeUserForm = () => {
731 + // 关闭用户列表表单回调
732 + state.dialogUserFormVisible = false;
733 + };
734 + const confirmUserForm = () => {
735 + // 确认用户列表表单回调
736 + state.dialogUserFormVisible = false;
737 + console.log(state.userTags);
738 + };
453 739
454 onMounted(() => { 740 onMounted(() => {
455 // // 显示提示框的标志位 741 // // 显示提示框的标志位
456 // var showConfirmation = true; 742 // var showConfirmation = true;
457 -
458 // // 监听 beforeunload 事件 743 // // 监听 beforeunload 事件
459 // window.addEventListener('beforeunload', function (event) { 744 // window.addEventListener('beforeunload', function (event) {
460 // if (showConfirmation) { 745 // if (showConfirmation) {
...@@ -462,38 +747,34 @@ export default { ...@@ -462,38 +747,34 @@ export default {
462 // event.preventDefault(); 747 // event.preventDefault();
463 // // Chrome 和 Firefox 需要返回一个值以显示确认对话框 748 // // Chrome 和 Firefox 需要返回一个值以显示确认对话框
464 // event.returnValue = ''; 749 // event.returnValue = '';
465 -
466 // // 显示自定义的提示信息 750 // // 显示自定义的提示信息
467 // var confirmationMessage = '确定要离开此页面吗？'; 751 // var confirmationMessage = '确定要离开此页面吗？';
468 // (event || window.event).returnValue = confirmationMessage; // 兼容旧版浏览器 752 // (event || window.event).returnValue = confirmationMessage; // 兼容旧版浏览器
469 -
470 // return confirmationMessage; 753 // return confirmationMessage;
471 // } 754 // }
472 // }); 755 // });
473 -
474 // // 监听 unload 事件 756 // // 监听 unload 事件
475 // window.addEventListener('unload', function () { 757 // window.addEventListener('unload', function () {
476 // // 设置标志位为 false，避免在刷新页面时再次显示提示框 758 // // 设置标志位为 false，避免在刷新页面时再次显示提示框
477 // showConfirmation = false; 759 // showConfirmation = false;
478 // }); 760 // });
479 -
480 // axios.get('/srv/?a=query_form_all_field') 761 // axios.get('/srv/?a=query_form_all_field')
481 // .then(res => { 762 // .then(res => {
482 // console.warn(res.data); 763 // console.warn(res.data);
483 -
484 // }); 764 // });
485 -
486 // $('.el-tabs__nav') 765 // $('.el-tabs__nav')
487 -
488 }); 766 });
489 767
490 - watch(() => state.dialogUserFormVisible, (val) => { 768 + watch(
769 + () => state.dialogUserFormVisible,
770 + val => {
491 if (val) { 771 if (val) {
492 nextTick(() => { 772 nextTick(() => {
493 - state.tabTextWidth = $('#'+ state.activeTabId).width() + 'px'; 773 + state.tabTextWidth = $("#" + state.activeTabId).width() + "px";
494 - })
495 - }
496 }); 774 });
775 + }
776 + }
777 + );
497 778
498 let editor; 779 let editor;
499 780
...@@ -515,7 +796,7 @@ export default { ...@@ -515,7 +796,7 @@ export default {
515 style: style || {}, 796 style: style || {},
516 labelCfg: labelCfg || { style: {} }, 797 labelCfg: labelCfg || { style: {} },
517 type: null, 798 type: null,
518 - id: null, 799 + id: null
519 }; 800 };
520 model.type = e.item.get("type"); 801 model.type = e.item.get("type");
521 model.id = e.item.get("id"); 802 model.id = e.item.get("id");
...@@ -594,14 +875,14 @@ export default { ...@@ -594,14 +875,14 @@ export default {
594 y, 875 y,
595 text, 876 text,
596 desc, 877 desc,
597 - img, 878 + img
598 }) 879 })
599 ); 880 );
600 edges = edges.map(({ source, sourceAnchor, target, targetAnchor }) => ({ 881 edges = edges.map(({ source, sourceAnchor, target, targetAnchor }) => ({
601 source, 882 source,
602 sourceAnchor, 883 sourceAnchor,
603 target, 884 target,
604 - targetAnchor, 885 + targetAnchor
605 })); 886 }));
606 console.log(JSON.stringify({ nodes, edges }, null, 2)); 887 console.log(JSON.stringify({ nodes, edges }, null, 2));
607 } 888 }
...@@ -626,13 +907,16 @@ export default { ...@@ -626,13 +907,16 @@ export default {
626 handleTabClick, 907 handleTabClick,
627 handleTabContentClick, 908 handleTabContentClick,
628 handleNodeClick, 909 handleNodeClick,
910 + handleTagClose,
911 + closeUserForm,
912 + confirmUserForm,
629 913
630 logData, 914 logData,
631 915
632 - onRef: (e) => (editor = e), 916 + onRef: e => (editor = e),
633 - staticPath, 917 + staticPath
634 }; 918 };
635 - }, 919 + }
636 }; 920 };
637 </script> 921 </script>
638 922
...@@ -690,19 +974,41 @@ body { ...@@ -690,19 +974,41 @@ body {
690 } 974 }
691 975
692 .flow-tabs__active-bar { 976 .flow-tabs__active-bar {
693 - 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; 977 + position: absolute;
978 + bottom: 0;
979 + left: 0;
980 + height: 2px;
981 + background-color: #409eff;
982 + z-index: 1;
983 + transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
984 + transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
985 + list-style: none;
694 } 986 }
695 987
696 .flow-tabs__nav { 988 .flow-tabs__nav {
697 - display: flex; white-space: nowrap; position: relative; transition: transformX(0px); float: left; 989 + display: flex;
990 + white-space: nowrap;
991 + position: relative;
992 + transition: transformX(0px);
993 + float: left;
698 .flow-tabs__item { 994 .flow-tabs__item {
699 - 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; 995 + padding: 0 20px;
996 + height: 40px;
997 + box-sizing: border-box;
998 + display: flex;
999 + align-items: center;
1000 + justify-content: center;
1001 + list-style: none;
1002 + font-size: 14px;
1003 + font-weight: 500;
1004 + color: #303133;
1005 + position: relative;
700 &:hover { 1006 &:hover {
701 - color: #409EFF; 1007 + color: #409eff;
702 cursor: pointer; 1008 cursor: pointer;
703 } 1009 }
704 &.is-active { 1010 &.is-active {
705 - color: #409EFF; 1011 + color: #409eff;
706 } 1012 }
707 &.is-top:nth-child(2) { 1013 &.is-top:nth-child(2) {
708 padding-left: 0; 1014 padding-left: 0;
...@@ -713,7 +1019,8 @@ body { ...@@ -713,7 +1019,8 @@ body {
713 .flow-tab-search { 1019 .flow-tab-search {
714 position: absolute; 1020 position: absolute;
715 top: 0; 1021 top: 0;
716 - right: 0; width: 100px; 1022 + right: 0;
1023 + width: 100px;
717 display: flex; 1024 display: flex;
718 align-items: center; 1025 align-items: center;
719 background-color: #e4e7ed; 1026 background-color: #e4e7ed;
...@@ -730,5 +1037,4 @@ body { ...@@ -730,5 +1037,4 @@ body {
730 display: flex !important; 1037 display: flex !important;
731 } 1038 }
732 } 1039 }
733 -
734 </style> 1040 </style>
......