|
1
2
3
4
|
<template xmlns:background-color="http://www.w3.org/1999/xhtml">
<a-row :gutter="10">
<a-col :md="12" :sm="24">
<a-card :bordered="false">
|
|
5
|
|
|
6
|
<!-- 按钮操作区域 -->
|
|
7
|
<a-row style="margin-left: 14px">
|
|
8
9
|
<a-button @click="handleAdd(1)" type="primary">添加部门</a-button>
<a-button @click="handleAdd(2)" type="primary">添加下级</a-button>
|
|
10
11
12
13
|
<a-button type="primary" icon="download" @click="handleExportXls('部门信息')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
|
|
14
|
<a-button title="删除多条数据" @click="batchDel" type="default">批量删除</a-button>
|
|
15
|
<!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button>-->
|
|
16
17
18
|
</a-row>
<div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
<a-alert type="info" :showIcon="true">
|
|
19
|
<div slot="message">
|
|
20
|
当前选择:<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
|
|
21
22
23
|
<a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
</div>
</a-alert>
|
|
24
|
<a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
|
|
25
|
<!-- 树-->
|
|
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<a-col :md="10" :sm="24">
<template>
<a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
<span style="user-select: none">
<a-tree
checkable
multiple
@select="onSelect"
@check="onCheck"
@rightClick="rightHandle"
:selectedKeys="selectedKeys"
:checkedKeys="checkedKeys"
:treeData="departTree"
|
|
39
|
:checkStrictly="checkStrictly"
|
|
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
:expandedKeys="iExpandedKeys"
:autoExpandParent="autoExpandParent"
@expand="onExpand"/>
</span>
<!--新增右键点击事件,和增加添加和删除功能-->
<a-menu slot="overlay">
<a-menu-item @click="handleAdd(3)" key="1">添加</a-menu-item>
<a-menu-item @click="handleDelete" key="2">删除</a-menu-item>
<a-menu-item @click="closeDrop" key="3">取消</a-menu-item>
</a-menu>
</a-dropdown>
</template>
</a-col>
</div>
</a-card>
|
|
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
<div class="drawer-bootom-button">
<a-dropdown :trigger="['click']" placement="topCenter">
<a-menu slot="overlay">
<a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
<a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
<a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
<a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
<a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
<a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
</a-menu>
<a-button>
树操作 <a-icon type="up" />
</a-button>
</a-dropdown>
</div>
<!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
|
|
72
73
|
</a-col>
<a-col :md="12" :sm="24">
|
|
74
75
|
<a-tabs defaultActiveKey="1">
<a-tab-pane tab="基本信息" key="1" >
|
|
76
|
<a-card :bordered="false" v-if="selectedKeys.length>0">
|
|
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<a-form :form="form">
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="机构名称">
<a-input placeholder="请输入机构/部门名称" v-decorator="['departName', validatorRules.departName ]"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
<a-tree-select
style="width:100%"
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
:treeData="treeData"
:disabled="disable"
v-model="model.parentId"
placeholder="无">
</a-tree-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="机构编码">
<a-input disabled placeholder="请输入机构编码" v-decorator="['orgCode', validatorRules.orgCode ]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="机构类型">
<template v-if="orgCategoryDisabled">
<a-radio-group v-decorator="['orgCategory',validatorRules.orgCategory]" placeholder="请选择机构类型">
<a-radio value="1">
公司
</a-radio>
</a-radio-group>
</template>
<template v-else>
<a-radio-group v-decorator="['orgCategory',validatorRules.orgCategory]" placeholder="请选择机构类型">
<a-radio value="2">
部门
</a-radio>
<a-radio value="3">
岗位
</a-radio>
</a-radio-group>
</template>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="排序">
<a-input-number v-decorator="[ 'departOrder',{'initialValue':0}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="手机号">
<a-input placeholder="请输入手机号" v-decorator="['mobile', {'initialValue':''}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="地址">
<a-input placeholder="请输入地址" v-decorator="['address', {'initialValue':''}]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="备注">
<a-textarea placeholder="请输入备注" v-decorator="['memo', {'initialValue':''}]"/>
</a-form-item>
</a-form>
<div class="anty-form-btn">
<a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
|
|
149
|
<a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button>
|
|
150
151
|
</div>
</a-card>
|
|
152
153
154
155
156
|
<a-card v-else >
<a-empty>
<span slot="description"> 请先选择一个部门! </span>
</a-empty>
</a-card>
|
|
157
158
159
160
161
162
|
</a-tab-pane>
<a-tab-pane tab="部门权限" key="2" forceRender>
<depart-auth-modal ref="departAuth"/>
</a-tab-pane>
</a-tabs>
|
|
163
164
165
|
</a-col>
<depart-modal ref="departModal" @ok="loadTree"></depart-modal>
</a-row>
|
|
166
167
168
169
|
</template>
<script>
import DepartModal from './modules/DepartModal'
import pick from 'lodash.pick'
|
|
170
171
172
|
import {queryDepartTreeList, searchByKeywords, deleteByDepartId} from '@/api/api'
import {httpAction, deleteAction} from '@/api/manage'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
|
173
|
import DepartAuthModal from './modules/DepartAuthModal'
|
|
174
175
176
177
|
// 表头
const columns = [
{
title: '机构名称',
|
|
178
|
dataIndex: 'departName'
|
|
179
180
181
|
},
{
title: '机构类型',
|
|
182
|
align: 'center',
|
|
183
184
185
186
|
dataIndex: 'orgType'
},
{
title: '机构编码',
|
|
187
|
dataIndex: 'orgCode',
|
|
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
},
{
title: '手机号',
dataIndex: 'mobile'
},
{
title: '传真',
dataIndex: 'fax'
},
{
title: '地址',
dataIndex: 'address'
},
{
|
|
202
203
204
|
title: '排序',
align: 'center',
dataIndex: 'departOrder'
|
|
205
206
207
|
},
{
title: '操作',
|
|
208
|
align: 'center',
|
|
209
|
dataIndex: 'action',
|
|
210
|
scopedSlots: {customRender: 'action'}
|
|
211
|
}
|
|
212
|
]
|
|
213
|
export default {
|
|
214
|
name: 'DepartList',
|
|
215
|
mixins: [JeecgListMixin],
|
|
216
|
components: {
|
|
217
|
DepartAuthModal,
|
|
218
219
|
DepartModal
},
|
|
220
|
data() {
|
|
221
|
return {
|
|
222
223
224
225
226
227
|
iExpandedKeys: [],
loading: false,
autoExpandParent: true,
currFlowId: '',
currFlowName: '',
disable: true,
|
|
228
|
treeData: [],
|
|
229
230
231
|
visible: false,
departTree: [],
rightClickSelectedKey: '',
|
|
232
|
rightClickSelectedOrgCode: '',
|
|
233
234
235
236
237
238
239
240
241
242
|
hiding: true,
model: {},
dropTrigger: '',
depart: {},
columns: columns,
disableSubmit: false,
checkedKeys: [],
selectedKeys: [],
autoIncr: 1,
currSelected: {},
|
|
243
244
245
246
|
allTreeKeys:[],
checkStrictly: true,
|
|
247
248
|
form: this.$form.createForm(this),
labelCol: {
|
|
249
250
|
xs: {span: 24},
sm: {span: 5}
|
|
251
252
|
},
wrapperCol: {
|
|
253
254
|
xs: {span: 24},
sm: {span: 16}
|
|
255
|
},
|
|
256
257
258
|
graphDatasource: {
nodes: [],
edges: []
|
|
259
|
},
|
|
260
|
validatorRules: {
|
|
261
262
|
departName: {rules: [{required: true, message: '请输入机构/部门名称!'}]},
orgCode: {rules: [{required: true, message: '请输入机构编码!'}]},
|
|
263
|
orgCategory: {rules: [{required: true, message: '请输入机构类型!'}]},
|
|
264
|
mobile: {rules: [{validator: this.validateMobile}]}
|
|
265
266
|
},
url: {
|
|
267
268
269
270
271
|
delete: '/sys/sysDepart/delete',
edit: '/sys/sysDepart/edit',
deleteBatch: '/sys/sysDepart/deleteBatch',
exportXlsUrl: "sys/sysDepart/exportXls",
importExcelUrl: "sys/sysDepart/importExcel",
|
|
272
|
},
|
|
273
|
orgCategoryDisabled:false,
|
|
274
275
276
277
278
|
}
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
|
279
280
|
}
},
|
|
281
|
methods: {
|
|
282
283
284
|
loadData() {
this.refresh();
},
|
|
285
286
287
288
289
290
|
loadTree() {
var that = this
that.treeData = []
that.departTree = []
queryDepartTreeList().then((res) => {
if (res.success) {
|
|
291
292
|
//部门全选后,再添加部门,选中数量增多
this.allTreeKeys = [];
|
|
293
|
for (let i = 0; i < res.result.length; i++) {
|
|
294
295
296
297
|
let temp = res.result[i]
that.treeData.push(temp)
that.departTree.push(temp)
that.setThisExpandedKeys(temp)
|
|
298
299
|
that.getAllKeys(temp);
// console.log(temp.id)
|
|
300
|
}
|
|
301
|
this.loading = false
|
|
302
|
}
|
|
303
|
})
|
|
304
|
},
|
|
305
306
307
308
309
|
setThisExpandedKeys(node) {
if (node.children && node.children.length > 0) {
this.iExpandedKeys.push(node.key)
for (let a = 0; a < node.children.length; a++) {
this.setThisExpandedKeys(node.children[a])
|
|
310
311
312
|
}
}
},
|
|
313
314
315
316
317
318
319
320
321
|
refresh() {
this.loading = true
this.loadTree()
},
// 右键操作方法
rightHandle(node) {
this.dropTrigger = 'contextmenu'
console.log(node.node.eventKey)
this.rightClickSelectedKey = node.node.eventKey
|
|
322
|
this.rightClickSelectedOrgCode = node.node.dataRef.orgCode
|
|
323
|
},
|
|
324
|
onExpand(expandedKeys) {
|
|
325
326
327
328
329
330
|
console.log('onExpand', expandedKeys)
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
// or, you can remove all expanded children keys.
this.iExpandedKeys = expandedKeys
this.autoExpandParent = false
},
|
|
331
332
333
334
335
336
337
338
339
340
341
342
|
backFlowList() {
this.$router.back(-1)
},
// 右键点击下拉框改变事件
dropStatus(visible) {
if (visible == false) {
this.dropTrigger = ''
}
},
// 右键店家下拉关闭下拉框
closeDrop() {
this.dropTrigger = ''
|
|
343
|
},
|
|
344
345
|
addRootNode() {
this.$refs.nodeModal.add(this.currFlowId, '')
|
|
346
|
},
|
|
347
|
batchDel: function () {
|
|
348
|
console.log(this.checkedKeys)
|
|
349
350
351
352
353
354
|
if (this.checkedKeys.length <= 0) {
this.$message.warning('请选择一条记录!')
} else {
var ids = ''
for (var a = 0; a < this.checkedKeys.length; a++) {
ids += this.checkedKeys[a] + ','
|
|
355
|
}
|
|
356
|
var that = this
|
|
357
|
this.$confirm({
|
|
358
|
title: '确认删除',
|
|
359
|
content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据,以及子节点数据吗?',
|
|
360
361
|
onOk: function () {
deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
|
|
362
363
364
365
366
367
|
if (res.success) {
that.$message.success(res.message)
that.loadTree()
that.onClearSelected()
} else {
that.$message.warning(res.message)
|
|
368
|
}
|
|
369
|
})
|
|
370
|
}
|
|
371
|
})
|
|
372
373
|
}
},
|
|
374
375
376
|
onSearch(value) {
let that = this
if (value) {
|
|
377
|
searchByKeywords({keyWord: value}).then((res) => {
|
|
378
379
|
if (res.success) {
that.departTree = []
|
|
380
|
for (let i = 0; i < res.result.length; i++) {
|
|
381
382
|
let temp = res.result[i]
that.departTree.push(temp)
|
|
383
|
}
|
|
384
385
|
} else {
that.$message.warning(res.message)
|
|
386
387
|
}
})
|
|
388
389
|
} else {
that.loadTree()
|
|
390
391
392
|
}
},
|
|
393
394
395
396
|
nodeModalOk() {
this.loadTree()
},
nodeModalClose() {
|
|
397
|
},
|
|
398
399
400
|
hide() {
console.log(111)
this.visible = false
|
|
401
|
},
|
|
402
|
onCheck(checkedKeys, info) {
|
|
403
|
console.log('onCheck', checkedKeys, info)
|
|
404
|
this.hiding = false
|
|
405
406
407
408
409
410
411
412
|
//this.checkedKeys = checkedKeys.checked
// <!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
if(this.checkStrictly){
this.checkedKeys = checkedKeys.checked;
}else{
this.checkedKeys = checkedKeys
}
// <!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
|
|
413
|
},
|
|
414
|
onSelect(selectedKeys, e) {
|
|
415
|
console.log('selected', selectedKeys, e)
|
|
416
417
418
419
420
421
422
423
|
this.hiding = false
let record = e.node.dataRef
console.log('onSelect-record', record)
this.currSelected = Object.assign({}, record)
this.model = this.currSelected
this.selectedKeys = [record.key]
this.model.parentId = record.parentId
this.setValuesToForm(record)
|
|
424
|
this.$refs.departAuth.show(record.id);
|
|
425
426
|
},
|
|
427
428
|
// 触发onSelect事件时,为部门树右侧的form表单赋值
setValuesToForm(record) {
|
|
429
430
431
432
433
|
if(record.orgCategory == '1'){
this.orgCategoryDisabled = true;
}else{
this.orgCategoryDisabled = false;
}
|
|
434
435
436
437
|
this.$nextTick(() => {
this.form.getFieldDecorator('fax', {initialValue: ''})
this.form.setFieldsValue(pick(record, 'departName','orgCategory', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'))
})
|
|
438
|
},
|
|
439
440
|
getCurrSelectedTitle() {
return !this.currSelected.title ? '' : this.currSelected.title
|
|
441
|
},
|
|
442
443
|
onClearSelected() {
this.hiding = true
|
|
444
|
this.checkedKeys = []
|
|
445
446
447
|
this.currSelected = {}
this.form.resetFields()
this.selectedKeys = []
|
|
448
|
this.$refs.departAuth.departId = ''
|
|
449
|
},
|
|
450
451
|
handleNodeTypeChange(val) {
this.currSelected.nodeType = val
|
|
452
|
},
|
|
453
454
|
notifyTriggerTypeChange(value) {
this.currSelected.notifyTriggerType = value
|
|
455
|
},
|
|
456
457
458
459
460
|
receiptTriggerTypeChange(value) {
this.currSelected.receiptTriggerType = value
},
submitCurrForm() {
this.form.validateFields((err, values) => {
|
|
461
|
if (!err) {
|
|
462
463
|
if (!this.currSelected.id) {
this.$message.warning('请点击选择要修改部门!')
|
|
464
465
466
|
return
}
|
|
467
|
let formData = Object.assign(this.currSelected, values)
|
|
468
|
console.log('Received values of form: ', formData)
|
|
469
|
httpAction(this.url.edit, formData, 'put').then((res) => {
|
|
470
|
if (res.success) {
|
|
471
472
|
this.$message.success('保存成功!')
this.loadTree()
|
|
473
474
|
} else {
this.$message.error(res.message)
|
|
475
476
477
|
}
})
}
|
|
478
|
})
|
|
479
|
},
|
|
480
481
|
emptyCurrForm() {
this.form.resetFields()
|
|
482
|
},
|
|
483
484
|
nodeSettingFormSubmit() {
this.form.validateFields((err, values) => {
|
|
485
486
487
|
if (!err) {
console.log('Received values of form: ', values)
}
|
|
488
|
})
|
|
489
|
},
|
|
490
491
|
openSelect() {
this.$refs.sysDirectiveModal.show()
|
|
492
|
},
|
|
493
494
495
496
497
498
499
|
handleAdd(num) {
if (num == 1) {
this.$refs.departModal.add()
this.$refs.departModal.title = '新增'
} else if (num == 2) {
let key = this.currSelected.key
if (!key) {
|
|
500
|
this.$message.warning('请先点击选中上级部门!')
|
|
501
|
return false
|
|
502
|
}
|
|
503
504
505
506
507
|
this.$refs.departModal.add(this.selectedKeys)
this.$refs.departModal.title = '新增'
} else {
this.$refs.departModal.add(this.rightClickSelectedKey)
this.$refs.departModal.title = '新增'
|
|
508
509
|
}
},
|
|
510
|
handleDelete() {
|
|
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
|
var that = this
this.$confirm({
title: '确认删除',
content: '确定要删除此部门以及子节点数据吗?',
onOk: function () {
deleteByDepartId({id: that.rightClickSelectedKey}).then((resp) => {
if (resp.success) {
//删除成功后,去除已选中中的数据
that.checkedKeys.splice(that.checkedKeys.findIndex(key => key === that.rightClickSelectedKey), 1);
that.$message.success('删除成功!')
that.loadTree()
//删除后同步清空右侧基本信息内容
let orgCode=that.form.getFieldValue("orgCode");
if(orgCode && orgCode === that.rightClickSelectedOrgCode){
that.onClearSelected()
}
} else {
that.$message.warning('删除失败!')
}
})
|
|
531
532
533
534
535
|
}
})
},
selectDirectiveOk(record) {
console.log('选中指令数据', record)
|
|
536
|
this.nodeSettingForm.setFieldsValue({directiveCode: record.directiveCode})
|
|
537
|
this.currSelected.sysCode = record.sysCode
|
|
538
|
},
|
|
539
|
getFlowGraphData(node) {
|
|
540
|
this.graphDatasource.nodes.push({
|
|
541
542
|
id: node.id,
text: node.flowNodeName
|
|
543
|
})
|
|
544
545
|
if (node.children.length > 0) {
for (let a = 0; a < node.children.length; a++) {
|
|
546
547
|
let temp = node.children[a]
this.graphDatasource.edges.push({
|
|
548
549
550
551
|
source: node.id,
target: temp.id
})
this.getFlowGraphData(temp)
|
|
552
553
|
}
}
|
|
554
|
},
|
|
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
|
// <!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
expandAll () {
this.iExpandedKeys = this.allTreeKeys
},
closeAll () {
this.iExpandedKeys = []
},
checkALL () {
this.checkStriccheckStrictlytly = false
this.checkedKeys = this.allTreeKeys
},
cancelCheckALL () {
//this.checkedKeys = this.defaultCheckedKeys
this.checkedKeys = []
},
switchCheckStrictly (v) {
if(v==1){
this.checkStrictly = false
}else if(v==2){
this.checkStrictly = true
}
},
getAllKeys(node) {
// console.log('node',node);
this.allTreeKeys.push(node.key)
if (node.children && node.children.length > 0) {
for (let a = 0; a < node.children.length; a++) {
this.getAllKeys(node.children[a])
}
}
}
// <!---- author:os_chengtgen -- date:20190827 -- for:切换父子勾选模式 =======------>
|
|
588
|
},
|
|
589
590
591
|
created() {
this.currFlowId = this.$route.params.id
this.currFlowName = this.$route.params.name
|
|
592
593
|
// this.loadTree()
},
|
|
594
595
596
597
|
}
</script>
<style scoped>
|
|
598
599
600
601
|
.ant-card-body .table-operator {
margin: 15px;
}
|
|
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
|
.anty-form-btn {
width: 100%;
text-align: center;
}
.anty-form-btn button {
margin: 0 5px;
}
.anty-node-layout .ant-layout-header {
padding-right: 0
}
.header {
padding: 0 8px;
}
.header button {
margin: 0 3px
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
|
|
637
638
639
|
#app .desktop {
height: auto !important;
}
|
|
640
641
642
643
644
|
/** Button按钮间距 */
.ant-btn {
margin-left: 3px
}
|
|
645
646
647
648
649
650
651
652
653
654
655
656
|
.drawer-bootom-button {
/*position: absolute;*/
bottom: 0;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: left;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
|
|
657
|
</style>
|