|
|
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
20
21
22
23
24
|
<div slot="message">
当前选择：
<a v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</a>
<a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
</div>
</a-alert>
|
|
|
25
|
<a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
|
|
|
26
|
<!-- 树-->
|
|
|
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<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"
|
|
|
40
|
:checkStrictly="checkStrictly"
|
|
|
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
: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>
|
|
|
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<!---- 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:切换父子勾选模式 =======------>
|
|
|
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
</a-col>
<a-col :md="12" :sm="24">
<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"
|
|
|
96
97
98
99
100
101
|
label="机构编码">
<a-input disabled placeholder="请输入机构编码" v-decorator="['orgCode', validatorRules.orgCode ]"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
|
|
|
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
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"
|
|
|
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
|
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-col>
<depart-modal ref="departModal" @ok="loadTree"></depart-modal>
</a-row>
|
|
|
154
155
156
157
|
</template>
<script>
import DepartModal from './modules/DepartModal'
import pick from 'lodash.pick'
|
|
|
158
159
160
|
import {queryDepartTreeList, searchByKeywords, deleteByDepartId} from '@/api/api'
import {httpAction, deleteAction} from '@/api/manage'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
|
|
161
162
163
164
|
// 表头
const columns = [
{
title: '机构名称',
|
|
|
165
|
dataIndex: 'departName'
|
|
|
166
167
168
|
},
{
title: '机构类型',
|
|
|
169
|
align: 'center',
|
|
|
170
171
172
173
|
dataIndex: 'orgType'
},
{
title: '机构编码',
|
|
|
174
|
dataIndex: 'orgCode',
|
|
|
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
},
{
title: '手机号',
dataIndex: 'mobile'
},
{
title: '传真',
dataIndex: 'fax'
},
{
title: '地址',
dataIndex: 'address'
},
{
|
|
|
189
190
191
|
title: '排序',
align: 'center',
dataIndex: 'departOrder'
|
|
|
192
193
194
|
},
{
title: '操作',
|
|
|
195
|
align: 'center',
|
|
|
196
|
dataIndex: 'action',
|
|
|
197
|
scopedSlots: {customRender: 'action'}
|
|
|
198
|
}
|
|
|
199
|
]
|
|
|
200
|
export default {
|
|
|
201
|
name: 'DepartList',
|
|
|
202
|
mixins: [JeecgListMixin],
|
|
|
203
204
205
|
components: {
DepartModal
},
|
|
|
206
|
data() {
|
|
|
207
|
return {
|
|
|
208
209
210
211
212
213
|
iExpandedKeys: [],
loading: false,
autoExpandParent: true,
currFlowId: '',
currFlowName: '',
disable: true,
|
|
|
214
|
treeData: [],
|
|
|
215
216
217
218
219
220
221
222
223
224
225
226
227
|
visible: false,
departTree: [],
rightClickSelectedKey: '',
hiding: true,
model: {},
dropTrigger: '',
depart: {},
columns: columns,
disableSubmit: false,
checkedKeys: [],
selectedKeys: [],
autoIncr: 1,
currSelected: {},
|
|
|
228
229
230
231
|
allTreeKeys:[],
checkStrictly: true,
|
|
|
232
233
|
form: this.$form.createForm(this),
labelCol: {
|
|
|
234
235
|
xs: {span: 24},
sm: {span: 5}
|
|
|
236
237
|
},
wrapperCol: {
|
|
|
238
239
|
xs: {span: 24},
sm: {span: 16}
|
|
|
240
|
},
|
|
|
241
242
243
|
graphDatasource: {
nodes: [],
edges: []
|
|
|
244
|
},
|
|
|
245
|
validatorRules: {
|
|
|
246
247
|
departName: {rules: [{required: true, message: '请输入机构/部门名称!'}]},
orgCode: {rules: [{required: true, message: '请输入机构编码!'}]},
|
|
|
248
|
orgCategory: {rules: [{required: true, message: '请输入机构类型!'}]},
|
|
|
249
|
mobile: {rules: [{validator: this.validateMobile}]}
|
|
|
250
251
|
},
url: {
|
|
|
252
253
254
255
256
|
delete: '/sys/sysDepart/delete',
edit: '/sys/sysDepart/edit',
deleteBatch: '/sys/sysDepart/deleteBatch',
exportXlsUrl: "sys/sysDepart/exportXls",
importExcelUrl: "sys/sysDepart/importExcel",
|
|
|
257
|
},
|
|
|
258
|
orgCategoryDisabled:false,
|
|
|
259
260
261
262
263
|
}
},
computed: {
importExcelUrl: function () {
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
|
|
|
264
265
|
}
},
|
|
|
266
|
methods: {
|
|
|
267
268
269
|
loadData() {
this.refresh();
},
|
|
|
270
271
272
273
274
275
|
loadTree() {
var that = this
that.treeData = []
that.departTree = []
queryDepartTreeList().then((res) => {
if (res.success) {
|
|
|
276
|
for (let i = 0; i < res.result.length; i++) {
|
|
|
277
278
279
280
|
let temp = res.result[i]
that.treeData.push(temp)
that.departTree.push(temp)
that.setThisExpandedKeys(temp)
|
|
|
281
282
|
that.getAllKeys(temp);
// console.log(temp.id)
|
|
|
283
|
}
|
|
|
284
|
this.loading = false
|
|
|
285
|
}
|
|
|
286
|
})
|
|
|
287
|
},
|
|
|
288
289
290
291
292
|
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])
|
|
|
293
294
295
|
}
}
},
|
|
|
296
297
298
299
300
301
302
303
304
|
refresh() {
this.loading = true
this.loadTree()
},
// 右键操作方法
rightHandle(node) {
this.dropTrigger = 'contextmenu'
console.log(node.node.eventKey)
this.rightClickSelectedKey = node.node.eventKey
|
|
|
305
|
},
|
|
|
306
|
onExpand(expandedKeys) {
|
|
|
307
308
309
310
311
312
|
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
},
|
|
|
313
314
315
316
317
318
319
320
321
322
323
324
|
backFlowList() {
this.$router.back(-1)
},
// 右键点击下拉框改变事件
dropStatus(visible) {
if (visible == false) {
this.dropTrigger = ''
}
},
// 右键店家下拉关闭下拉框
closeDrop() {
this.dropTrigger = ''
|
|
|
325
|
},
|
|
|
326
327
|
addRootNode() {
this.$refs.nodeModal.add(this.currFlowId, '')
|
|
|
328
|
},
|
|
|
329
|
batchDel: function () {
|
|
|
330
|
console.log(this.checkedKeys)
|
|
|
331
332
333
334
335
336
|
if (this.checkedKeys.length <= 0) {
this.$message.warning('请选择一条记录！')
} else {
var ids = ''
for (var a = 0; a < this.checkedKeys.length; a++) {
ids += this.checkedKeys[a] + ','
|
|
|
337
|
}
|
|
|
338
|
var that = this
|
|
|
339
|
this.$confirm({
|
|
|
340
|
title: '确认删除',
|
|
|
341
|
content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据，以及子节点数据吗?',
|
|
|
342
343
|
onOk: function () {
deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
|
|
|
344
345
346
347
348
349
|
if (res.success) {
that.$message.success(res.message)
that.loadTree()
that.onClearSelected()
} else {
that.$message.warning(res.message)
|
|
|
350
|
}
|
|
|
351
|
})
|
|
|
352
|
}
|
|
|
353
|
})
|
|
|
354
355
|
}
},
|
|
|
356
357
358
|
onSearch(value) {
let that = this
if (value) {
|
|
|
359
|
searchByKeywords({keyWord: value}).then((res) => {
|
|
|
360
361
|
if (res.success) {
that.departTree = []
|
|
|
362
|
for (let i = 0; i < res.result.length; i++) {
|
|
|
363
364
|
let temp = res.result[i]
that.departTree.push(temp)
|
|
|
365
|
}
|
|
|
366
367
|
} else {
that.$message.warning(res.message)
|
|
|
368
369
|
}
})
|
|
|
370
371
|
} else {
that.loadTree()
|
|
|
372
373
374
|
}
},
|
|
|
375
376
377
378
|
nodeModalOk() {
this.loadTree()
},
nodeModalClose() {
|
|
|
379
|
},
|
|
|
380
381
382
|
hide() {
console.log(111)
this.visible = false
|
|
|
383
|
},
|
|
|
384
|
onCheck(checkedKeys, info) {
|
|
|
385
|
console.log('onCheck', checkedKeys, info)
|
|
|
386
|
this.hiding = false
|
|
|
387
388
389
390
391
392
393
394
|
//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:切换父子勾选模式 =======------>
|
|
|
395
|
},
|
|
|
396
|
onSelect(selectedKeys, e) {
|
|
|
397
|
console.log('selected', selectedKeys, e)
|
|
|
398
399
400
401
402
403
404
405
406
|
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)
|
|
|
407
408
|
},
|
|
|
409
410
|
// 触发onSelect事件时,为部门树右侧的form表单赋值
setValuesToForm(record) {
|
|
|
411
412
413
414
415
|
if(record.orgCategory == '1'){
this.orgCategoryDisabled = true;
}else{
this.orgCategoryDisabled = false;
}
|
|
|
416
|
this.form.getFieldDecorator('fax', {initialValue: ''})
|
|
|
417
|
this.form.setFieldsValue(pick(record, 'departName','orgCategory', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'))
|
|
|
418
|
},
|
|
|
419
420
|
getCurrSelectedTitle() {
return !this.currSelected.title ? '' : this.currSelected.title
|
|
|
421
|
},
|
|
|
422
423
|
onClearSelected() {
this.hiding = true
|
|
|
424
|
this.checkedKeys = []
|
|
|
425
426
427
|
this.currSelected = {}
this.form.resetFields()
this.selectedKeys = []
|
|
|
428
|
},
|
|
|
429
430
|
handleNodeTypeChange(val) {
this.currSelected.nodeType = val
|
|
|
431
|
},
|
|
|
432
433
|
notifyTriggerTypeChange(value) {
this.currSelected.notifyTriggerType = value
|
|
|
434
|
},
|
|
|
435
436
437
438
439
|
receiptTriggerTypeChange(value) {
this.currSelected.receiptTriggerType = value
},
submitCurrForm() {
this.form.validateFields((err, values) => {
|
|
|
440
|
if (!err) {
|
|
|
441
442
|
if (!this.currSelected.id) {
this.$message.warning('请点击选择要修改部门!')
|
|
|
443
444
445
|
return
}
|
|
|
446
|
let formData = Object.assign(this.currSelected, values)
|
|
|
447
|
console.log('Received values of form: ', formData)
|
|
|
448
|
httpAction(this.url.edit, formData, 'put').then((res) => {
|
|
|
449
|
if (res.success) {
|
|
|
450
451
|
this.$message.success('保存成功!')
this.loadTree()
|
|
|
452
453
|
} else {
this.$message.error(res.message)
|
|
|
454
455
456
|
}
})
}
|
|
|
457
|
})
|
|
|
458
|
},
|
|
|
459
460
|
emptyCurrForm() {
this.form.resetFields()
|
|
|
461
|
},
|
|
|
462
463
|
nodeSettingFormSubmit() {
this.form.validateFields((err, values) => {
|
|
|
464
465
466
|
if (!err) {
console.log('Received values of form: ', values)
}
|
|
|
467
|
})
|
|
|
468
|
},
|
|
|
469
470
|
openSelect() {
this.$refs.sysDirectiveModal.show()
|
|
|
471
|
},
|
|
|
472
473
474
475
476
477
478
479
480
|
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
|
|
|
481
|
}
|
|
|
482
483
484
485
486
|
this.$refs.departModal.add(this.selectedKeys)
this.$refs.departModal.title = '新增'
} else {
this.$refs.departModal.add(this.rightClickSelectedKey)
this.$refs.departModal.title = '新增'
|
|
|
487
488
|
}
},
|
|
|
489
|
handleDelete() {
|
|
|
490
|
deleteByDepartId({id: this.rightClickSelectedKey}).then((resp) => {
|
|
|
491
492
493
494
495
496
497
498
499
500
|
if (resp.success) {
this.$message.success('删除成功!')
this.loadTree()
} else {
this.$message.warning('删除失败!')
}
})
},
selectDirectiveOk(record) {
console.log('选中指令数据', record)
|
|
|
501
|
this.nodeSettingForm.setFieldsValue({directiveCode: record.directiveCode})
|
|
|
502
|
this.currSelected.sysCode = record.sysCode
|
|
|
503
|
},
|
|
|
504
|
getFlowGraphData(node) {
|
|
|
505
|
this.graphDatasource.nodes.push({
|
|
|
506
507
|
id: node.id,
text: node.flowNodeName
|
|
|
508
|
})
|
|
|
509
510
|
if (node.children.length > 0) {
for (let a = 0; a < node.children.length; a++) {
|
|
|
511
512
|
let temp = node.children[a]
this.graphDatasource.edges.push({
|
|
|
513
514
515
516
|
source: node.id,
target: temp.id
})
this.getFlowGraphData(temp)
|
|
|
517
518
|
}
}
|
|
|
519
|
},
|
|
|
520
521
522
523
524
525
526
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
|
// <!---- 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:切换父子勾选模式 =======------>
|
|
|
553
|
},
|
|
|
554
555
556
|
created() {
this.currFlowId = this.$route.params.id
this.currFlowName = this.$route.params.name
|
|
|
557
558
|
// this.loadTree()
},
|
|
|
559
560
561
562
|
}
</script>
<style scoped>
|
|
|
563
564
565
566
|
.ant-card-body .table-operator {
margin: 15px;
}
|
|
|
567
568
569
570
571
572
573
574
575
576
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
|
.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
}
|
|
|
602
603
604
|
#app .desktop {
height: auto !important;
}
|
|
|
605
606
607
608
609
|
/** Button按钮间距 */
.ant-btn {
margin-left: 3px
}
|
|
|
610
611
612
613
614
615
616
617
618
619
620
621
|
.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;
}
|
|
|
622
|
</style>
|
