数据提交表单配置示例

ddiot

1. formDesc: {
   
2.           name: {
   
3.             type: 'input',
   
4.             label: '菜单名称'
   
5.           },
   
6.           module_name: {
   
7.             type: 'select',
   
8.             label: '模块名称',
   
9.             isOptions: true,
   
10.             options: this.initAddons()
    
11.           },
    
12.           is_show: {
    
13.             type: 'radio',
    
14.             label: '是否隐藏',
    
15.             isOptions: true,
    
16.             options: [
    
17.               {
    
18.                 text: '不隐藏',
    
19.                 value: 0
    
20.               },
    
21.               {
    
22.                 text: '隐藏',
    
23.                 value: 1
    
24.               }
    
25.             ],
    
26.             default: 0
    
27.           },
    
28.           parent: {
    
29.             label: '父级菜单',
    
30.             // 只需要在这里指定为 tree-select 即可
    
31.             type: 'tree-select',
    
32.             // 属性参考: https://vue-treeselect.js.org/
    
33.             attrs: {
    
34.               multiple: false,
    
35.               clearable: true
    
36.             },
    
37.             vif: (data) => data.module_name,
    
38.             // 这里必须制定 optionsLinkageFields 做为关联字段，当次字段值发生变化时，会重新出发请求
    
39.             optionsLinkageFields: ['module_name', 'name'],
    
40.             options: async(data) => {
    
41.               if (data.name || data.module_name) {
    
42.                 const obj = {}
    
43.                 this.$set(obj, 'Menu[module_name]', data.module_name)
    
44.                 const res = await fetchList(obj)
    
45.                 const arr = [
    
46.                   {
    
47.                     id: 0,
    
48.                     label: '一级菜单'
    
49.                   }
    
50.                 ]
    
51.                 return arr.concat(res.data.list)
    
52.               }
    
53.             }
    
54.           },
    
55.           level_type: {
    
56.             type: 'radio',
    
57.             label: '菜单等级类型',
    
58.             isOptions: true,
    
59.             options: this.initMenType()
    
60.           },
    
61.           route_id: {
    
62.             type: 'select',
    
63.             label: '页面路径',
    
64.             isOptions: true,
    
65.             tip: '当菜单为二级且有子菜单时，请选择/main/index',
    
66.             vif: (data) => data.module_name,
    
67.             // 这里必须制定 optionsLinkageFields 做为关联字段，当字段值发生变化时，会重新出发请求
    
68.             optionsLinkageFields: ['module_name', 'name', 'level_type'],
    
69.             options: async(data) => {
    
70.               const arr = [
    
71.                 {
    
72.                   text: '选择菜单地址',
    
73.                   value: ''
    
74.                 }
    
75.               ]
    
76.               if (data.name || data.module_name || data.level_type) {
    
77.                 const list = await fetchRoute({
    
78.                   module_name: data.level_type !== 3 ? data.module_name : 'system',
    
79.                   route_type: [0, 1, 2]
    
80.                 })
    
81.                 list.data.forEach((item, index) => {
    
82.                   if (item.label.indexOf('*') === -1) {
    
83.                     arr.push({
    
84.                       text: item.label,
    
85.                       value: item.id
    
86.                     })
    
87.                   }
    
88.                 })
    
89. 
    
90.                 if (data.level_type === 3) {
    
91.                   return arr.filter((itm) => itm.text === '/main/index.vue')
    
92.                 } else {
    
93.                   return arr
    
94.                 }
    
95.               }
    
96.             },
    
97.             on: {
    
98.               change(val) {
    
99.                 console.log(val)
    
100.               }
     
101.             },
     
102.             attrs: {
     
103.               filterable: true
     
104.             }
     
105.           },
     
106.           icon: {
     
107.             type: 'FireIcon',
     
108.             label: '菜单图标'
     
109.           },
     
110.           order: {
     
111.             type: 'input',
     
112.             label: '菜单排序'
     
113.           },
     
114.           data: {
     
115.             type: 'textarea',
     
116.             label: '菜单数据',
     
117.             attrs: {
     
118.               autosizeType: 'switch',
     
119.               autosize: false
     
120.             }
     
121.           }
     
122.         }

复制代码