检索和表单同时使用的下拉数据封装

ddiot

1、全部采用异步请求的方式处理，在init的文件中，需要注意enumList方法的请求接口地址不能使用path变量，直接使用真实接口

1. import {
   
2.   enumList
   
3. } from './api'
   
4. 
   
5. const getEnumList = async(type) => {
   
6.   const arr = []
   
7.   const response = await enumList({
   
8.     type: type
   
9.   })
   
10. 
    
11.   const list = response.data.list
    
12.   for (const key in list) {
    
13.     arr.push({
    
14.       text: list[key],
    
15.       value: key
    
16.     })
    
17.   }
    
18.   return arr
    
19. }

复制代码

2、在表单中调用方法获取options

1. 
   
2.   source: {
   
3.     type: 'select',
   
4.     label: '商机来源',
   
5.     options: () => {
   
6.       return getEnumList('businessSource')
   
7.     }
   
8.   },

复制代码

3、在检索中配置list值

1. export const filterInfo = {
   
2.   fieldList: [{
   
3.     label: '关键字',
   
4.     type: 'input',
   
5.     placeholder: '请输入关键字',
   
6.     value: 'DiandiBusinessOpportunityList[keywords]'
   
7.   }, {
   
8.     label: '客户名称',
   
9.     type: 'input',
   
10.     value: 'DiandiBusinessOpportunityList[name]'
    
11.   }, {
    
12.     label: '状态',
    
13.     type: 'select',
    
14.     value: 'DiandiBusinessOpportunityList[status]',
    
15.     list: 'statusList'
    
16.   }, {
    
17.     label: '商机来源',
    
18.     type: 'select',
    
19.     value: 'DiandiBusinessOpportunityList[source]',
    
20.     list: 'stjList'
    
21.   }, {
    
22.     label: '跟进人',
    
23.     type: 'select',
    
24.     value: 'DiandiBusinessOpportunityList[follower]'
    
25.   }],
    
26.   listTypeInfo: {
    
27.     stjList: () => {
    
28.       return getEnumList('businessSource')
    
29.     },
    
30.     statusList: () => {
    
31.       return getEnumList('businessStatus')
    
32.     }
    
33.   }
    
34. }

复制代码