Blame view

ant-design-vue-jeecg/src/views/system/DepartList.vue 21.5 KB
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
zhangdaihao authored
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>