干燥机配套车间生产管理系统/云平台服务端
baoshiwei
2024-05-27 fa3ac93010bea3805438ee3ab0a182bfbf7423da
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
<template>
  <JVxeTable
    ref="vTable"
    toolbar
    rowNumber
    rowSelection
    :maxHeight="580"
    :dataSource="dataSource"
    :columns="columns"
    :linkageConfig="linkageConfig"
  />
</template>
 
<script lang="ts" setup>
  import { ref } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { JVxeTypes, JVxeColumn, JVxeLinkageConfig } from '/@/components/jeecg/JVxeTable/types';
 
  // 联动配置
  const linkageConfig = ref<JVxeLinkageConfig[]>([
    { requestData: requestMockData, key: 's1' },
    // 可配置多个联动
    { requestData: requestMenu, key: 'menu1' },
  ]);
 
  const columns = ref<JVxeColumn[]>([
    {
      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}',
    },
  ]);
 
  const dataSource = ref([
    { sex: '1', s1: '110000', s2: '110100', s3: '110101' },
    { sex: '2', s1: '130000', s2: '130300', s3: '130303' },
  ]);
 
  // 模拟数据
  const 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' },
  ];
 
  /** 模拟从后台查询数据 */
  function requestMockData(parent) {
    return new Promise((resolve) => {
      let data = mockData.filter((i) => i.parent === parent);
      setTimeout(() => resolve(data), 500);
    });
  }
 
  /** 查询后台真实数据 */
  async function requestMenu(parent) {
    let result;
    // 如果parent为空,则查询第一级菜单
    if (parent === '') {
      result = await defHttp.get({
        url: '/sys/permission/getSystemMenuList',
        params: {},
      });
    } else {
      result = await defHttp.get({
        url: '/sys/permission/getSystemSubmenu',
        params: { parentId: parent },
      });
    }
    // 返回的数据里必须包含 value 和 text 字段
    return result.map((item) => ({ value: item.id, text: item.name }));
  }
</script>