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 基础类型 

多余的空格，回车要删除，用逗号分隔每行参数的，最后一行也要带逗号。

colProps: { span: 18 },  一行分成24格，18意味着宽度=18/24
搞懂 Vue3 中的各种 ref:toRef,toRefs,isRef,unref... 
响应式对象是一个什么对象 (qq.com)
浅谈Vue3响应式原理与源码解读
Vue3 写了 hook 三天，治好了我的组件封装强迫症
vue3中defineComponent 的作用详解

例子： 国家和省份联动，都是从后端取数据，国家设默认值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: '省份与国家联动',
    },
  },

 apiSelect和apiTreeSelect组件作为编辑组件时，本来的设计是用于那些仅有新增行的表格。如果你的table不仅用于新增行，还需要编辑已有数据，请使用Select和TreeSelect并自行填充options、treeData，

apiSelect、apiTreeSelect不适合此场景

 

===========================vben 还不知道编辑怎么写==========================

这个是另一个项目的写法

  <el-form-item prop="principalUserId" label="负责人">
                <el-select
                  style="width: 100%"
                  v-model="taskForm.principalUserId"
                  filterable
                  placeholder="请选择"
                  :disabled="disabledPrincipal"
                >
                  <el-option
                    v-for="item in userOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
    </el-form-item>

 

前端模拟数据 数据 mock&联调    模拟数据的语法参考 https://hub.nuaa.cf/nuysoft/Mock/wiki

路径在 \vben28\mock\demo\system.ts 里面 例如账号列表

const accountList = (() => {
  const result: any[] = [];
  for (let index = 0; index < 20; index++) {
    result.push({
      id: `${index}`,
      account: '@first',
      email: '@email',
      nickname: '@cname()',
      role: '管理员',
      createTime: '@datetime',
      remark: '@cword(10,20)',
      'status|1': ['0', '1'],
    });
  }
  return result;
})();