project_rules.md 6.4KB
- 表单组件配置参考下面内容
[ { // 组件需要在 #/adapter.ts内注册，并加上类型 component: 'Input', // 对应组件的参数 componentProps: { placeholder: '请输入用户名', }, // 字段名 fieldName: 'username', // 界面显示的label label: '字符串', rules: 'required', }, { // 组件需要在 #/adapter.ts内注册，并加上类型 component: 'ApiSelect', // 对应组件的参数 componentProps: { // 菜单接口转options格式 afterFetch: (data: { name: string; path: string }[]) => { return data.map((item: any) => ({ label: item.name, value: item.path, })); }, // 菜单接口 api: getAllMenusApi, }, // 字段名 fieldName: 'api', // 界面显示的label label: 'ApiSelect', }, { component: 'ApiSelect', // 对应组件的参数 componentProps: () => { return { api: fetchRemoteOptions, // 禁止本地过滤 filterOption: false, // 如果正在获取数据，使用插槽显示一个loading notFoundContent: fetching.value ? undefined : null, // 搜索词变化时记录下来， 使用useDebounceFn防抖。 onSearch: useDebounceFn((value: string) => { keyword.value = value; }, 300), // 远程搜索参数。当搜索词变化时，params也会更新 params: { keyword: keyword.value || undefined, }, showSearch: true, }; }, // 字段名 fieldName: 'remoteSearch', // 界面显示的label label: '远程搜索', renderComponentContent: () => { return { notFoundContent: fetching.value ? h(Spin) : undefined, }; }, }, { component: 'ApiTreeSelect', // 对应组件的参数 componentProps: { // 菜单接口 api: getAllMenusApi, childrenField: 'children', // 菜单接口转options格式 labelField: 'name', valueField: 'path', }, // 字段名 fieldName: 'apiTree', // 界面显示的label label: 'ApiTreeSelect', }, { component: 'InputPassword', componentProps: { placeholder: '请输入密码', }, fieldName: 'password', label: '密码', }, { component: 'InputNumber', componentProps: { placeholder: '请输入', }, fieldName: 'number', label: '数字(带后缀)', suffix: () => '¥', }, { component: 'IconPicker', fieldName: 'icon', label: '图标', }, { component: 'Select', componentProps: { allowClear: true, filterOption: true, options: [ { label: '选项1', value: '1', }, { label: '选项2', value: '2', }, ], placeholder: '请选择', showSearch: true, }, fieldName: 'options', label: '下拉选', }, { component: 'RadioGroup', componentProps: { options: [ { label: '选项1', value: '1', }, { label: '选项2', value: '2', }, ], }, fieldName: 'radioGroup', label: '单选组', }, { component: 'Radio', fieldName: 'radio', label: '', renderComponentContent: () => { return { default: () => ['Radio'], }; }, }, { component: 'CheckboxGroup', componentProps: { name: 'cname', options: [ { label: '选项1', value: '1', }, { label: '选项2', value: '2', }, ], }, fieldName: 'checkboxGroup', label: '多选组', }, { component: 'Checkbox', fieldName: 'checkbox', label: '', renderComponentContent: () => { return { default: () => ['我已阅读并同意'], }; }, }, { component: 'Mentions', componentProps: { options: [ { label: 'afc163', value: 'afc163', }, { label: 'zombieJ', value: 'zombieJ', }, ], placeholder: '请输入', }, fieldName: 'mentions', label: '提及', }, { component: 'Rate', fieldName: 'rate', label: '评分', }, { component: 'Switch', componentProps: { class: 'w-auto', }, fieldName: 'switch', label: '开关', }, { component: 'DatePicker', fieldName: 'datePicker', label: '日期选择框', }, { component: 'RangePicker', fieldName: 'rangePicker', label: '范围选择器', }, { component: 'TimePicker', fieldName: 'timePicker', label: '时间选择框', }, { component: 'TreeSelect', componentProps: { allowClear: true, placeholder: '请选择', showSearch: true, treeData: [ { label: 'root 1', value: 'root 1', children: [ { label: 'parent 1', value: 'parent 1', children: [ { label: 'parent 1-0', value: 'parent 1-0', children: [ { label: 'my leaf', value: 'leaf1', }, { label: 'your leaf', value: 'leaf2', }, ], }, { label: 'parent 1-1', value: 'parent 1-1', }, ], }, { label: 'parent 2', value: 'parent 2', }, ], }, ], treeNodeFilterProp: 'label', }, fieldName: 'treeSelect', label: '树选择', }, ] - 生成过程中不可以执行任何命令，如果需要执行请列出来，由我手动执行或跳过