|
|
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
|
<a-button @click="handleAdd(2)" type="primary">添加子部门</a-button>
|
|
|
9
10
11
12
13
|
<a-button @click="handleAdd(1)" type="primary">添加一级部门</a-button>
<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
76
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
149
150
151
152
153
154
155
156
157
|
<a-tabs defaultActiveKey="1">
<a-tab-pane tab="基本信息" key="1" >
<a-card :bordered="false">
<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>
<a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">修改并保存</a-button>
</div>
</a-card>
</a-tab-pane>
<a-tab-pane tab="部门权限" key="2" forceRender>
<depart-auth-modal ref="departAuth"/>
</a-tab-pane>
</a-tabs>
|
|
|
158
159
160
|
</a-col>
<depart-modal ref="departModal" @ok="loadTree"></depart-modal>
</a-row>
|
|
|
161
162
163
164
|
</template>
<script>
import DepartModal from './modules/DepartModal'
import pick from 'lodash.pick'
|
|
|
165
166
167
|
import {queryDepartTreeList, searchByKeywords, deleteByDepartId} from '@/api/api'
import {httpAction, deleteAction} from '@/api/manage'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
|
|
168
|
import DepartAuthModal from './modules/DepartAuthModal'
|
|
|
169
170
171
172
|
// 表头
const columns = [
{
title: '机构名称',
|
|
|
173
|
dataIndex: 'departName'
|
|
|
174
175
176
|
},
{
title: '机构类型',
|
|
|
177
|
align: 'center',
|
|
|
178
179
180
181
|
dataIndex: 'orgType'
},
{
title: '机构编码',
|
|
|
182
|
dataIndex: 'orgCode',
|
|
|
183
184
185
186
187
188
189
190
191
192
193
194
195
196
|
},
{
title: '手机号',
dataIndex: 'mobile'
},
{
title: '传真',
dataIndex: 'fax'
},
{
title: '地址',
dataIndex: 'address'
},
{
|
|
|
197
198
199
|
title: '排序',
align: 'center',
dataIndex: 'departOrder'
|
|
|
200
201
202
|
},
{
title: '操作',
|
|
|
203
|
align: 'center',
|
|
|
204
|
dataIndex: 'action',
|
|
|
205
|
scopedSlots: {customRender: 'action'}
|
|
|
206
|
}
|
|
|
207
|
]
|
|
|
208
|
export default {
|
|
|
209
|
name: 'DepartList',
|
|
|
210
|
mixins: [JeecgListMixin],
|
|
|
211
|
components: {
|
|
|
212
|
DepartAuthModal,
|
|
|
213
214
|
DepartModal
},
|
|
|
215
|
data() {
|
|
|
216
|
return {
|
|
|
217
218
219
220
221
222
|
iExpandedKeys: [],
loading: false,
autoExpandParent: true,
currFlowId: '',
currFlowName: '',
disable: true,
|
|
|
223
|
treeData: [],
|
|
|
224
225
226
227
228
229
230
231
232
233
234
235
236
|
visible: false,
departTree: [],
rightClickSelectedKey: '',
hiding: true,
model: {},
dropTrigger: '',
depart: {},
columns: columns,
disableSubmit: false,
checkedKeys: [],
selectedKeys: [],
autoIncr: 1,
currSelected: {},
|
|
|
237
238
239
240
|
allTreeKeys:[],
checkStrictly: true,
|
|
|
241
242
|
form: this.$form.createForm(this),
labelCol: {
|
|
|
243
244
|
xs: {span: 24},
sm: {span: 5}
|
|
|
245
246
|
},
wrapperCol: {
|
|
|
247
248
|
xs: {span: 24},
sm: {span: 16}
|
|
|
249
|
},
|
|
|
250
251
252
|
graphDatasource: {
nodes: [],
edges: []
|
|
|
253
|
},
|
|
|
254
|
validatorRules: {
|
|
|
255
256
|
departName: {rules: [{required: true, message: '请输入机构/部门名称!'}]},
orgCode: {rules: [{required: true, message: '请输入机构编码!'}]},
|
|
|
257
|
orgCategory: {rules: [{required: true, message: '请输入机构类型!'}]},
|
|
|
258
|
mobile: {rules: [{validator: this.validateMobile}]}
|
|
|
259
260
|
},
url: {
|
|
|
261
262
263
264
265
|
delete: '/sys/sysDepart/delete',
edit: '/sys/sysDepart/edit',
deleteBatch: '/sys/sysDepart/deleteBatch',
exportXlsUrl: "sys/sysDepart/exportXls",
importExcelUrl: "sys/sysDepart/importExcel",
|
|
|
266
|
},
|
|
|
267
|
orgCategoryDisabled:false,
|
|
|
268
269
270
271
272
|
}
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
|
|
273
274
|
}
},
|
|
|
275
|
methods: {
|
|
|
276
277
278
|
loadData() {
this.refresh();
},
|
|
|
279
280
281
282
283
284
|
loadTree() {
var that = this
that.treeData = []
that.departTree = []
queryDepartTreeList().then((res) => {
if (res.success) {
|
|
|
285
|
for (let i = 0; i < res.result.length; i++) {
|
|
|
286
287
288
289
|
let temp = res.result[i]
that.treeData.push(temp)
that.departTree.push(temp)
that.setThisExpandedKeys(temp)
|
|
|
290
291
|
that.getAllKeys(temp);
// console.log(temp.id)
|
|
|
292
|
}
|
|
|
293
|
this.loading = false
|
|
|
294
|
}
|
|
|
295
|
})
|
|
|
296
|
},
|
|
|
297
298
299
300
301
|
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])
|
|
|
302
303
304
|
}
}
},
|
|
|
305
306
307
308
309
310
311
312
313
|
refresh() {
this.loading = true
this.loadTree()
},
// 右键操作方法
rightHandle(node) {
this.dropTrigger = 'contextmenu'
console.log(node.node.eventKey)
this.rightClickSelectedKey = node.node.eventKey
|
|
|
314
|
},
|
|
|
315
|
onExpand(expandedKeys) {
|
|
|
316
317
318
319
320
321
|
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
},
|
|
|
322
323
324
325
326
327
328
329
330
331
332
333
|
backFlowList() {
this.$router.back(-1)
},
// 右键点击下拉框改变事件
dropStatus(visible) {
if (visible == false) {
this.dropTrigger = ''
}
},
// 右键店家下拉关闭下拉框
closeDrop() {
this.dropTrigger = ''
|
|
|
334
|
},
|
|
|
335
336
|
addRootNode() {
this.$refs.nodeModal.add(this.currFlowId, '')
|
|
|
337
|
},
|
|
|
338
|
batchDel: function () {
|
|
|
339
|
console.log(this.checkedKeys)
|
|
|
340
341
342
343
344
345
|
if (this.checkedKeys.length <= 0) {
this.$message.warning('请选择一条记录！')
} else {
var ids = ''
for (var a = 0; a < this.checkedKeys.length; a++) {
ids += this.checkedKeys[a] + ','
|
|
|
346
|
}
|
|
|
347
|
var that = this
|
|
|
348
|
this.$confirm({
|
|
|
349
|
title: '确认删除',
|
|
|
350
|
content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据，以及子节点数据吗?',
|
|
|
351
352
|
onOk: function () {
deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
|
|
|
353
354
355
356
357
358
|
if (res.success) {
that.$message.success(res.message)
that.loadTree()
that.onClearSelected()
} else {
that.$message.warning(res.message)
|
|
|
359
|
}
|
|
|
360
|
})
|
|
|
361
|
}
|
|
|
362
|
})
|
|
|
363
364
|
}
},
|
|
|
365
366
367
|
onSearch(value) {
let that = this
if (value) {
|
|
|
368
|
searchByKeywords({keyWord: value}).then((res) => {
|
|
|
369
370
|
if (res.success) {
that.departTree = []
|
|
|
371
|
for (let i = 0; i < res.result.length; i++) {
|
|
|
372
373
|
let temp = res.result[i]
that.departTree.push(temp)
|
|
|
374
|
}
|
|
|
375
376
|
} else {
that.$message.warning(res.message)
|
|
|
377
378
|
}
})
|
|
|
379
380
|
} else {
that.loadTree()
|
|
|
381
382
383
|
}
},
|
|
|
384
385
386
387
|
nodeModalOk() {
this.loadTree()
},
nodeModalClose() {
|
|
|
388
|
},
|
|
|
389
390
391
|
hide() {
console.log(111)
this.visible = false
|
|
|
392
|
},
|
|
|
393
|
onCheck(checkedKeys, info) {
|
|
|
394
|
console.log('onCheck', checkedKeys, info)
|
|
|
395
|
this.hiding = false
|
|
|
396
397
398
399
400
401
402
403
|
//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:切换父子勾选模式 =======------>
|
|
|
404
|
},
|
|
|
405
|
onSelect(selectedKeys, e) {
|
|
|
406
|
console.log('selected', selectedKeys, e)
|
|
|
407
408
409
410
411
412
413
414
|
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)
|
|
|
415
|
this.$refs.departAuth.show(record.id);
|
|
|
416
417
|
},
|
|
|
418
419
|
// 触发onSelect事件时,为部门树右侧的form表单赋值
setValuesToForm(record) {
|
|
|
420
421
422
423
424
|
if(record.orgCategory == '1'){
this.orgCategoryDisabled = true;
}else{
this.orgCategoryDisabled = false;
}
|
|
|
425
|
this.form.getFieldDecorator('fax', {initialValue: ''})
|
|
|
426
|
this.form.setFieldsValue(pick(record, 'departName','orgCategory', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'))
|
|
|
427
|
},
|
|
|
428
429
|
getCurrSelectedTitle() {
return !this.currSelected.title ? '' : this.currSelected.title
|
|
|
430
|
},
|
|
|
431
432
|
onClearSelected() {
this.hiding = true
|
|
|
433
|
this.checkedKeys = []
|
|
|
434
435
436
|
this.currSelected = {}
this.form.resetFields()
this.selectedKeys = []
|
|
|
437
|
this.$refs.departAuth.departId = ''
|
|
|
438
|
},
|
|
|
439
440
|
handleNodeTypeChange(val) {
this.currSelected.nodeType = val
|
|
|
441
|
},
|
|
|
442
443
|
notifyTriggerTypeChange(value) {
this.currSelected.notifyTriggerType = value
|
|
|
444
|
},
|
|
|
445
446
447
448
449
|
receiptTriggerTypeChange(value) {
this.currSelected.receiptTriggerType = value
},
submitCurrForm() {
this.form.validateFields((err, values) => {
|
|
|
450
|
if (!err) {
|
|
|
451
452
|
if (!this.currSelected.id) {
this.$message.warning('请点击选择要修改部门!')
|
|
|
453
454
455
|
return
}
|
|
|
456
|
let formData = Object.assign(this.currSelected, values)
|
|
|
457
|
console.log('Received values of form: ', formData)
|
|
|
458
|
httpAction(this.url.edit, formData, 'put').then((res) => {
|
|
|
459
|
if (res.success) {
|
|
|
460
461
|
this.$message.success('保存成功!')
this.loadTree()
|
|
|
462
463
|
} else {
this.$message.error(res.message)
|
|
|
464
465
466
|
}
})
}
|
|
|
467
|
})
|
|
|
468
|
},
|
|
|
469
470
|
emptyCurrForm() {
this.form.resetFields()
|
|
|
471
|
},
|
|
|
472
473
|
nodeSettingFormSubmit() {
this.form.validateFields((err, values) => {
|
|
|
474
475
476
|
if (!err) {
console.log('Received values of form: ', values)
}
|
|
|
477
|
})
|
|
|
478
|
},
|
|
|
479
480
|
openSelect() {
this.$refs.sysDirectiveModal.show()
|
|
|
481
|
},
|
|
|
482
483
484
485
486
487
488
489
490
|
handleAdd(num) {
if (num == 1) {
this.$refs.departModal.add()
this.$refs.departModal.title = '新增'
} else if (num == 2) {
let key = this.currSelected.key
if (!key) {
this.$message.warning('请先选中一条记录!')
return false
|
|
|
491
|
}
|
|
|
492
493
494
495
496
|
this.$refs.departModal.add(this.selectedKeys)
this.$refs.departModal.title = '新增'
} else {
this.$refs.departModal.add(this.rightClickSelectedKey)
this.$refs.departModal.title = '新增'
|
|
|
497
498
|
}
},
|
|
|
499
|
handleDelete() {
|
|
|
500
|
deleteByDepartId({id: this.rightClickSelectedKey}).then((resp) => {
|
|
|
501
502
503
504
505
506
507
508
509
510
|
if (resp.success) {
this.$message.success('删除成功!')
this.loadTree()
} else {
this.$message.warning('删除失败!')
}
})
},
selectDirectiveOk(record) {
console.log('选中指令数据', record)
|
|
|
511
|
this.nodeSettingForm.setFieldsValue({directiveCode: record.directiveCode})
|
|
|
512
|
this.currSelected.sysCode = record.sysCode
|
|
|
513
|
},
|
|
|
514
|
getFlowGraphData(node) {
|
|
|
515
|
this.graphDatasource.nodes.push({
|
|
|
516
517
|
id: node.id,
text: node.flowNodeName
|
|
|
518
|
})
|
|
|
519
520
|
if (node.children.length > 0) {
for (let a = 0; a < node.children.length; a++) {
|
|
|
521
522
|
let temp = node.children[a]
this.graphDatasource.edges.push({
|
|
|
523
524
525
526
|
source: node.id,
target: temp.id
})
this.getFlowGraphData(temp)
|
|
|
527
528
|
}
}
|
|
|
529
|
},
|
|
|
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
|
// <!---- 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:切换父子勾选模式 =======------>
|
|
|
563
|
},
|
|
|
564
565
566
|
created() {
this.currFlowId = this.$route.params.id
this.currFlowName = this.$route.params.name
|
|
|
567
568
|
// this.loadTree()
},
|
|
|
569
570
571
572
|
}
</script>
<style scoped>
|
|
|
573
574
575
576
|
.ant-card-body .table-operator {
margin: 15px;
}
|
|
|
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
|
.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
}
|
|
|
612
613
614
|
#app .desktop {
height: auto !important;
}
|
|
|
615
616
617
618
619
|
/** Button按钮间距 */
.ant-btn {
margin-left: 3px
}
|
|
|
620
621
622
623
624
625
626
627
628
629
630
631
|
.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;
}
|
|
|
632
|
</style>
|
