```vue
1. form表单基本使用
```
```js
// entity.js
import { ks_valueType } from './config';
/**
* 页面实体
*/
class Entity {
name = {
// form 的 key 属性 解析为 Entity.ITCode
name: 'name',
// label 字段描述
label: '名称',
rules: { required: true },
valueType: ks_valueType.text, // 默认的，可以不用写
messages: { required: '111选择' }
};
textarea = {
name: 'textarea',
// label 字段描述
label: '文本',
rules: { required: true },
valueType: ks_valueType.textarea // 默认的，可以不用写
};
password = {
// form 的 key 属性 解析为 Entity.ITCode
name: 'password',
// label 字段描述
label: '密码'
// valueType: WTM_ValueType.dateRange,
};
singletype = {
// form 的 key 属性 解析为 Entity.ITCode
name: 'singletype',
// label 字段描述
label: '下拉单选',
valueType: ks_valueType.select,
request: async () => this.getSalesList()
};
multipletype = {
// form 的 key 属性 解析为 Entity.ITCode
name: 'multipletype',
// label 字段描述
label: '下拉多选',
valueType: ks_valueType.select,
// fieldProps: {multiple: true},
request: async () => {
return [
{ value: '1', label: '测试1' },
{ value: '2', label: '测试2' },
{ value: '3', label: '测试3' }
];
}
};
name2 = {
// form 的 key 属性 解析为 Entity.ITCode
name: 'name2',
// label 字段描述
label: '名称',
rules: { required: true },
valueType: ks_valueType.text, // 默认的，可以不用写
messages: { required: '111选择' }
};
textarea2 = {
name: 'textarea2',
// label 字段描述
label: '文本',
rules: { required: true },
valueType: ks_valueType.textarea // 默认的，可以不用写
};
password2 = {
// form 的 key 属性 解析为 Entity.ITCode
name: 'password2',
// label 字段描述
label: '密码'
// valueType: WTM_ValueType.dateRange,
};
singletype2 = {
// form 的 key 属性 解析为 Entity.ITCode
name: 'singletype2',
// label 字段描述
label: '下拉单选',
valueType: ks_valueType.select,
request: async () => this.getSalesList()
};
multipletype2 = {
// form 的 key 属性 解析为 Entity.ITCode
name: 'multipletype2',
// label 字段描述
label: '下拉多选',
valueType: ks_valueType.select,
// fieldProps: {multiple: true},
request: async () => {
return [
{ value: '1', label: '测试1' },
{ value: '2', label: '测试2' },
{ value: '3', label: '测试3' }
];
}
};
name3 = {
// form 的 key 属性 解析为 Entity.ITCode
name: 'name3',
// label 字段描述
label: '名称',
rules: { required: true },
valueType: ks_valueType.text, // 默认的，可以不用写
messages: { required: '111选择' }
};
async getSalesList() {
const res = await new Promise((resolve) => {
// setTimeout(() => {
resolve([
{ label: '1', value: '1' },
{ label: '2', value: '2' }
]);
// }, 100);
});
return res;
}
}
export const PageEntity = new Entity();
```
```js
// config.js
// Description: 用于配置字段的类型 自己项目全局配置下
export const ks_valueType = {
/** 密码框 */
password: 'password',
/** 文本域 */
textarea: 'textarea',
/** 时间 */
date: 'date',
/** 按钮组 */
buttonGroup: 'buttonGroup',
/** 文本 */
text: 'text',
/** 选择框 */
select: 'select',
/** 滑动输入 */
slider: 'slider',
/** 多选框 */
checkbox: 'checkbox',
/** 评分 */
rate: 'rate',
/** 单选 */
radio: 'radio',
/** 开关 */
switch: 'switch',
// todo: 以下类型未实现
/** 图片上传 */
image: 'image',
/** 穿梭框 */
transfer: 'transfer',
/** 树形控件 */
tree: 'tree'
/** 文件 */
upload : "upload",
/** 数字输入框 */
spinner : "spinner",
};
```