```vue
1. form表单基本使用
--
{{ $value }}
Mbps
文案：我是下面的tips
组件
您还可以关联 0 个安全组，已关联 5 个
2. 自定义footer
3. 使用自带按钮，但是自定义 取消和确认按钮文本
4. 珊格布局
Mbps
我是下面的tips
我是提示信息
5. 自定义label
自定义名称
```
```js
// entity.js
import { ks_valueType } from "./config";
/**
* 页面实体 class，用于配置表单的model信息
* @class Entity
*/
class Entity {
// 对象名称和对象里面的name建议统一，对象名称对应
name = {
// form 的 key 属性 解析为 Entity.ITCode
name: "name",
// label 字段描述
label: "名称",
rules: { required: true },
valueType: ks_valueType.text, // 默认的，可以不用写
messages: { required: "111选择" },
};
readOnly = {
name: 'readOnly',
label: '只读',
valueType: ks_valueType.readOnly
};
project = {
name: 'project',
label: '所属项目',
valueType: ks_valueType.readOnly,
};
textarea = {
name: "textarea",
// label 字段描述
label: "文本",
rules: { required: true },
valueType: ks_valueType.textarea,
};
selectTransfer = {
name:'selectTransfer',
label:'穿梭框',
valueType: ks_valueType.select,
request: [
{label:'服务器',value:'1'},{label:'数据库',value:'2'}
]
},
inputCompose1 = {
name: 'inputCompose1',
label: '组合input1',
valueType: ks_valueType.inputCompose,
placeholder: ['请输入开始', '请输入结束']
};
inputCompose2 = {
name: 'inputCompose2',
label: '组合input2',
valueType: ks_valueType.inputCompose,
placeholder: ['请输入开始', '请输入结束']
};
password = {
// form 的 key 属性 解析为 Entity.ITCode
name: "password",
// label 字段描述
label: "密码",
// valueType: WTM_ValueType.dateRange,
hidden: true,
};
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" },
];
},
hidden: function(formState){
return formState.singletype === '2'
}
};
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选择" },
};
treeSelect = {
label: '树形选择',
name: 'treeSelect',
valueType: ks_valueType.treeSelect,
request: async () => {
return [
{
label: 'Node1',
key: '0-0',
children: [
{
label: 'Child Node1',
key: '0-0-1'
},
{
label: 'Child Node2',
key: '0-0-2'
}
]
},
{
label: 'Node2',
key: '1-1',
children: [
{
label: 'Child Node3',
key: '1-1-1'
},
{
label: 'Child Node4',
key: '1-1-2'
}
]
}
];
}
}
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();
// class使用说明
import { PageEntity } from './controllers/entity';
provide('formInfo', {
...
PageEntity
});
/**
* 页面实体 function,用于配置表单的model信息
* @function Entity
* 这里是拿的系统管理项目中的配置，主要是为了说明entity的核心是配置，形式是函数还是class都可以
*/
export function useEntity(name, treeData, detail) {
const projectName = {
name: 'name',
label: name + '名称',
rules: {
required: true,
valiName: valiName,
},
};
const parentId = {
name: 'parentId',
label: '上级' + name,
valueType: ks_valueType.treeSelect,
rules: { required: true },
request: async () => treeData,
};
const organizationInfoList = {
name: 'organizationInfoList',
label: '所属组织',
valueType: ks_valueType.select,
rules: { required: true },
request: async () => getOwnerList(),
};
const managerIds = {
name: 'managerIds',
label: name + '管理员',
valueType: ks_valueType.select,
rules: { required: true },
request: [
{ label: '管理员1', value: 1 },
{ label: '管理员2', value: 2 },
{ label: '管理员3', value: 3 }
]
};
const description = {
name: 'description',
label: '描述',
valueType: ks_valueType.textarea,
};
async function valiName(val, formState) {
if (!isEmpty(detail)) {
// 编辑时候，去重逻辑要排除自己
if (detail.name === val) return true;
}
const res = { isExisted: 0 };
if (get(res, 'isExisted', 0) === 1) {
return '组织名称已存在';
}
return true;
}
async function getOwnerList() {
const res = await new Promise((resolve) => {
resolve([
{ label: '管理员1', value: 1 },
{ label: '管理员2', value: 2 },
{ label: '管理员3', value: 3 },
]);
});
return res;
}
return {
projectName,
parentId,
organizationInfoList,
managerIds,
description,
};
}
// 函数使用
import { useEntity } from './controllers/entity';
const PageEntity = useEntity(
'组织',
treeData.value,
detailInfo.value,
);
provide('formInfo', {
...,
PageEntity,
});
```
```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',
/** 数字输入框 */
spinner : "spinner",
/** 级联选择 */
cascader: "cascader",
/** 穿梭框 */
transfer: 'transfer',
/** 下拉树选择 */
treeSelect: "treeSelect",
/** 自定义组件-组合input */
inputCompose: "inputCompose",
/** 只读 */
readOnly: 'readOnly',
// todo: 以下类型未实现
/** 图片上传 */
image: 'image',
/** 文件 */
upload : "upload",
};
```
