Blame view

ant-design-vue-jeecg/src/views/jeecg/JVxeDemo/JVxeDemo3.vue 5.01 KB
肖超群 authored
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <j-vxe-table
    ref="vTable"
    toolbar
    row-number
    row-selection
    keep-source
    :height="484"
    :dataSource="dataSource"
    :columns="columns"
    :linkage-config="linkageConfig"
  />
</template>

<script>
肖超群 authored
16
17
import {JVXETypes} from '@/components/jeecg/JVxeTable'
import {getAction} from '@api/manage'
肖超群 authored
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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
158
159
160
161
162
163
164

export default {
  name: 'JVxeDemo2',
  data() {
    return {
      // 联动配置
      linkageConfig: [
        {requestData: this.requestData, key: 's1'},
        // 可配置多个联动
        {requestData: this.loadMenu, key: 'menu1',},
      ],
      columns: [
        {
          title: '性别',
          key: 'sex',
          type: JVXETypes.select,
          dictCode: 'sex',
          width: '180px',
          placeholder: '请选择${title}',
        },
        {
          title: '省/直辖市/自治区',
          key: 's1',
          type: JVXETypes.select,
          width: '180px',
          placeholder: '请选择${title}',
          // 联动字段(即下一级的字段)
          linkageKey: 's2',
        },
        {
          title: '市',
          key: 's2',
          type: JVXETypes.select,
          width: '180px',
          placeholder: '请选择${title}',
          // 联动字段(即下一级的字段)
          linkageKey: 's3',
        },
        {
          title: '县/区',
          key: 's3',
          type: JVXETypes.select,
          width: '180px',
          options: [],
          placeholder: '请选择${title}',
        },
        {
          title: '一级菜单',
          key: 'menu1',
          type: JVXETypes.select,
          width: '180px',
          placeholder: '请选择${title}',
          // 联动字段(即下一级的字段)
          linkageKey: 'menu2',
        },
        {
          title: '二级菜单',
          key: 'menu2',
          type: JVXETypes.select,
          width: '180px',
          placeholder: '请选择${title}',
          // 联动字段(即下一级的字段)
          linkageKey: 'menu3',
        },
        {
          title: '三级菜单',
          key: 'menu3',
          type: JVXETypes.select,
          width: '180px',
          placeholder: '请选择${title}',
        }
      ],
      dataSource: [
        {sex: '1', s1: '110000', s2: '110100', s3: '110101'},
        {sex: '2', s1: '130000', s2: '130300', s3: '130303'},
      ],
      // 模拟数据
      mockData: [
        {text: '北京市', value: '110000', parent: ''},
        {text: '天津市', value: '120000', parent: ''},
        {text: '河北省', value: '130000', parent: ''},
        {text: '上海市', value: '310000', parent: ''},

        {text: '北京市', value: '110100', parent: '110000'},
        {text: '天津市市', value: '120100', parent: '120000'},
        {text: '石家庄市', value: '130100', parent: '130000'},
        {text: '唐山市', value: '130200', parent: '130000'},
        {text: '秦皇岛市', value: '130300', parent: '130000'},
        {text: '上海市', value: '310100', parent: '310000'},

        {text: '东城区', value: '110101', parent: '110100'},
        {text: '西城区', value: '110102', parent: '110100'},
        {text: '朝阳区', value: '110105', parent: '110100'},
        {text: '和平区', value: '120101', parent: '120100'},
        {text: '河东区', value: '120102', parent: '120100'},
        {text: '河西区', value: '120103', parent: '120100'},
        {text: '黄浦区', value: '310101', parent: '310100'},
        {text: '徐汇区', value: '310104', parent: '310100'},
        {text: '长宁区', value: '310105', parent: '310100'},
        {text: '长安区', value: '130102', parent: '130100'},
        {text: '桥西区', value: '130104', parent: '130100'},
        {text: '新华区', value: '130105', parent: '130100'},
        {text: '路南区', value: '130202', parent: '130200'},
        {text: '路北区', value: '130203', parent: '130200'},
        {text: '古冶区', value: '130204', parent: '130200'},
        {text: '海港区', value: '130302', parent: '130300'},
        {text: '山海关区', value: '130303', parent: '130300'},
        {text: '北戴河区', value: '130304', parent: '130300'},
      ],
    }
  },
  methods: {
    /**
     * 模拟从后台查询数据
     */
    requestData(parent) {
      return new Promise((resolve, reject) => {
        let data = this.mockData.filter(i => i.parent === parent)
        setTimeout(() => {
          resolve(data)
        }, 500)
      })
    },

    async loadMenu(parent) {
      let res
      // 如果parent为空,则查询第一级菜单
      if (parent === '') {
        res = await getAction('/sys/permission/getSystemMenuList')
      } else {
        res = await getAction('/sys/permission/getSystemSubmenu', {parentId: parent})
      }
      if (res.success) {
        // 返回的数据里必须包含 value 和 text 字段
        return res.result.map(item => ({value: item.id, text: item.name}))
      }
      this.$message.warning('loadMenu失败:' + res.message)
      return []
    },

  }
}
</script>

<style scoped>

</style>