abp-vnext-pro 實戰（九，前端vue和vben學習）

vben效果 Vben Admin (vvbin.cn)  對應的代碼在 vue-vben-admin/src/views/demo/page/form/basic/data.ts at main · vbenjs/vue-vben-admin (github.com)

  {
    field: 'time',
    component: 'RangePicker',
    label: '起止日期',
    colProps: { span: 18 },
    required: true,
  },
  {
    field: 'weights',
    component: 'InputNumber',
    label: '權重',
    colProps: { span: 18 },
    subLabel: '( 選填 )',
    componentProps: {
      formatter: (value: string) => (value ? `${value}%` : ''),
      parser: (value: string) => value.replace('%', ''),
      placeholder: '請輸入',
    }
  },

基礎表單 - Vben Admin (vvbin.cn)

Typescript 基礎：（number，any，string) TypeScript 基礎類型 

多餘的空格，回車要刪除，用逗號分隔每行參數的，最後一行也要帶逗號。

例子： 國家和省份聯動，都是從後端取數據，國家設默認值china。

  {
    field: 'country',
    component: 'ApiSelect',
    label: '國家',
    required: true,
    componentProps: ({ formModel, formActionType }) => {
      return {
        // more details see /src/components/Form/src/components/ApiSelect.vue
        api: countryAsync,
        resultField: 'list',
        labelField: 'displayText',
        valueField: 'code',
        // not request untill to select
        immediate: true,
        onChange: (selectValue, result) => {
          console.log('ApiSelect====>:', selectValue,result);
          console.log(formModel.country);
          formModel.stateProvince = undefined; //  reset state value
          const { updateSchema } = formActionType;
          updateSchema({
            field: 'stateProvince',
            componentProps: {
              api: provinceAsync,
              params: {
                countryId: selectValue,
              },
              labelField: 'displayText',
              valueField: 'code',
              immediate: true,
            },
          });
        },
        // atfer request callback 取數據後調用
        onOptionsChange: (options) => {
          console.log('onOptionsChange',formModel.country);
          const { updateSchema } = formActionType;
          updateSchema({
            field: 'stateProvince',
            componentProps: {
              api: provinceAsync,
              params: {
                countryId: formModel.country,
              },
              labelField: 'displayText',
              valueField: 'code',
              immediate: true,
            },
          });
          console.log('get options', options.length, options);
        },
      };
    },
    colProps: {
      span: 18,
    },
    defaultValue: '46',
  },
  {
    field: 'stateProvince',
    component: 'ApiSelect',
    label: '省份',
    colProps: {
      span: 18,
    },
    componentProps: {
      options: [], // defalut []
      placeholder: '省份與國家聯動',
    },
  },