abp-vnext-pro 實戰（五，下拉框，增加搜索條件）

 

假如下拉的選項是後端指定，而不是用戶可以自定義的，可以後端定義dto和接口。 假如要用戶自定義，可以使用字典模塊，這樣用戶可以在網頁修改。

    public async Task<List<PageCustomerTypeOutput>> AllCustomerTypeAsync()
    {
        var result = new List<PageCustomerTypeOutput>();
        var list = await _customerManager.AllCustomerTypeAsync();

        //需要在Application項目的ERPApplicationAutoMapperProfile增加映射
        result = ObjectMapper.Map<List<CustomerTypeDto>, List<PageCustomerTypeOutput>>(list);
        return result;

    }

Domain.shared 項目

public class CustomerTypeDto
{
    public string DisplayText { get; set; }
    public string Code { get; set; }
}

Domain項目customerManager.cs

   public async Task<List<CustomerTypeDto>> AllCustomerTypeAsync()
    {
        List<CustomerTypeDto> result = new List<CustomerTypeDto>();
        await Task.Run(() => {
            foreach (int i in Enum.GetValues(typeof(CustomerType)))
            {
                result.Add(new CustomerTypeDto()
                {
                    Code = i.ToString(),
                    DisplayText = Enum.GetName(typeof(CustomerType), i)
                });
            }
        });        


        return result;
    }

 後端項目build後，在前端vben28\nswag\refresh.bat ,  "..\node_modules\.bin\nswag" run  /runtime:Net70   這個會更新\src\services\裏面的ServiceProxies.ts

    /**
     * 查詢客戶類型信息
     * @return Success
     */
    customerType(  cancelToken?: CancelToken | undefined): Promise<PageCustomerTypeOutput[]> {
        let url_ = this.baseUrl + "/Customers/CustomerType";
        url_ = url_.replace(/[?&]$/, "");

        let options_ = <AxiosRequestConfig>{
            method: "POST",
            url: url_,
            headers: {
                "Accept": "text/plain"
            },
            cancelToken
        };

        return this.transformOptions(options_).then(transformedOptions_ => {
            return this.instance.request(transformedOptions_);
        }).catch((_error: any) => {
            if (isAxiosError(_error) && _error.response) {
                return _error.response;
            } else {
                throw _error;
            }
        }).then((_response: AxiosResponse) => {
            return this.transformResult(url_, _response, (_response: AxiosResponse) => this.processCustomerType(_response));
        });
    }

    protected processCustomerType(response: AxiosResponse): Promise<PageCustomerTypeOutput[]> {
        const status = response.status;
        let _headers: any = {};
        if (response.headers && typeof response.headers === "object") {
            for (let k in response.headers) {
                if (response.headers.hasOwnProperty(k)) {
                    _headers[k] = response.headers[k];
                }
            }
        }
        if (status === 200) {
            const _responseText = response.data;
            let result200: any = null;
            let resultData200  = _responseText;
            if (Array.isArray(resultData200)) {
                result200 = [] as any;
                for (let item of resultData200)
                    result200!.push(PageCustomerTypeOutput.fromJS(item));
            }
            else {
                result200 = <any>null;
            }
            return Promise.resolve<PageCustomerTypeOutput[]>(result200);

        } else if (status === 403) {
            const _responseText = response.data;
            let result403: any = null;
            let resultData403  = _responseText;
            result403 = RemoteServiceErrorResponse.fromJS(resultData403);
            return throwException("Forbidden", status, _responseText, _headers, result403);

        } else if (status === 401) {
            const _responseText = response.data;
            let result401: any = null;
            let resultData401  = _responseText;
            result401 = RemoteServiceErrorResponse.fromJS(resultData401);
            return throwException("Unauthorized", status, _responseText, _headers, result401);

        } else if (status === 400) {
            const _responseText = response.data;
            let result400: any = null;
            let resultData400  = _responseText;
            result400 = RemoteServiceErrorResponse.fromJS(resultData400);
            return throwException("Bad Request", status, _responseText, _headers, result400);

        } else if (status === 404) {
            const _responseText = response.data;
            let result404: any = null;
            let resultData404  = _responseText;
            result404 = RemoteServiceErrorResponse.fromJS(resultData404);
            return throwException("Not Found", status, _responseText, _headers, result404);

        } else if (status === 501) {
            const _responseText = response.data;
            let result501: any = null;
            let resultData501  = _responseText;
            result501 = RemoteServiceErrorResponse.fromJS(resultData501);
            return throwException("Server Error", status, _responseText, _headers, result501);

        } else if (status === 500) {
            const _responseText = response.data;
            let result500: any = null;
            let resultData500  = _responseText;
            result500 = RemoteServiceErrorResponse.fromJS(resultData500);
            return throwException("Server Error", status, _responseText, _headers, result500);

        } else if (status !== 200 && status !== 204) {
            const _responseText = response.data;
            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
        }
        return Promise.resolve<PageCustomerTypeOutput[]>(null as any);
    }

 

前端參考這個寫法，component: 'ApiSelect',   api: getLanguageAsync,

export const createFormSchema: FormSchema[] = [
  {
    field: 'cultureName',
    label: t('routes.admin.language_cultureName'),
    component: 'ApiSelect',
    required: true,
    colProps: { span: 18 },
    componentProps: () => {
      return {
        api: getLanguageAsync,
        labelField: 'displayName',
        valueField: 'cultureName',
        showSearch: true,
        optionFilterProp: 'label',
      };
    },
  },

假如要改成從字典模塊取值，則後端代碼可以省略。前端改成這樣    api:dataDictAsync

export async function dataDictAsync() {
  const dataDictionaryServiceProxy = new DataDictionaryServiceProxy();
  const input = new PagingDataDictionaryDetailInput();
  input.dataDictionaryId = '3a0cd740-f56e-db56-2a4e-00c1e9fb6880';
  console.log(input);
  return (await dataDictionaryServiceProxy.pageDetail(input)).items;
}

 

如果要在列表頁的BasicTable把Code轉成Text，可以考慮把Code,Text 在app啓動的事後放入全局的map裏

Vben Admin 源碼學習:狀態管理-項目配置 - Anduril - 博客園 (cnblogs.com)

https://www.cnblogs.com/hexiaobang/p/15184822.html