# cheersForm 表单
# 表单参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| inline | 是否在行内 | boolean | true |
| labelWidth | form宽度 | number，string | — |
| ruleFormBtn | 按钮设置 | array | [] |
| fieldList | 表单form数据 | array | 详见表单类型 |
| ruleForm | 表单数据 | object | {} |
# 表单类型参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| Input | 输入框 | String | — |
| Textarea | 文本域 | String | — |
| Input | 数字 | String | — |
| Password | 密码框 | String | — |
| Select | 下拉框 | String | — |
| Cascader | 级联下拉 | String | — |
| Radio | 单选 | String | — |
| Checkbox | 复选框 | String | — |
| Year | yyyy | String | — |
| YearMonth | yyyy-MM | String | — |
| Date | yyyy-MM-dd | String | — |
| DateRange | 起止时间 | String | — |
# Input 输入框
{
type: "Input", label: "输入框", value: "input",
// 表单验证
rules: [{ required: true, message: "请输入姓名", trigger: "blur" }]
},
1
2
3
4
5
2
3
4
5
# Textarea 文本域
{
type: "Textarea", label: "文本域", value: "textarea",
// 表单验证
rules: [{ required: true, message: "请输入姓名", trigger: "blur" }]
},
1
2
3
4
5
2
3
4
5
# NumberInput 数字
{
type: "NumberInput", label: "数字", value: "numberInput",
rules: [{ required: true, message: "Year", trigger: "change" }],
attr: { step: 5 },
change: row => { console.log(row); }
},
1
2
3
4
5
6
2
3
4
5
6
# Password 密码框
{
type: "Password", label: "密码框", value: "password",
rules: [{ required: true, message: "Year", trigger: "change" }],
attr: { step: 5 },
change: row => { console.log(row); }
},
1
2
3
4
5
6
2
3
4
5
6
# Select 下拉框
{
type: "Select", label: "下拉框", value: "sex",
// 渲染数组// 下拉转换
options: caseState, props: { label: "label", value: "value" },
attr: {
clearable: true
},
rules: [{ required: true, message: "请选择性别", trigger: "change" }],
change: row => { console.log(row); }
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Cascader 级联下拉框
{
type: "Cascader", label: "级联下拉框", value: "city",
// 渲染数组// 下拉转换
options: this.selectData.cityData,
props: { label: "departName", value: "id" },
rules: [{ required: true, message: "请选择城市", trigger: "change" }],
change: row => { console.log(row); }
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# Radio 单选
{
type: "Radio", label: "单选", value: "radio",
// 渲染数组// 下拉转换
options: caseState,
props: { label: "label", value: "value" },
attr: {
border: true
},
rules: [{ required: true, message: "请选择性别", trigger: "change" }],
change: row => { console.log(row); }
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Checkbox 复选
{
type: "Checkbox", label: "复选", value: "box",
// 渲染数组// 下拉转换
options: caseState,
props: { label: "label", value: "value" },
attr: {
border: true
},
rules: [{ required: true, message: "请选择性别", trigger: "change" }],
change: row => { console.log(row); }
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Date 日期
{
type: "Year", label: "年", value: "year",
rules: [{ required: true, message: "Year", trigger: "change" }],
change: row => { console.log(row); }
}, {
type: "YearMonth", label: "年月", value: "yearMonth",
rules: [{ required: true, message: "Year", trigger: "change" }],
change: row => { console.log(row); }
}, {
type: "Date", label: "年月日", value: "date",
rules: [{ required: true, message: "Year", trigger: "change" }],
change: row => { console.log(row); }
}, {
type: "DateRange", label: "时间区间", value: "dateRange",
rules: [{ required: true, message: "Year", trigger: "change" }],
change: row => { console.log(row); }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 自定义扩展表单组件
<cheers-form slot="body" :inline="false" labelWidth="100px" ref="formrow" :ruleFormBtn="ruleFormBtn"
:ruleForm="ruleForm" :fieldList="fieldList" @f_listenBtn="f_listenBtn" @f_save="f_save">
<template v-slot:form-avatar>
<cheers-upload-image :previewFile='$previewFile' :uploadUrl='$uploadUrl' text='备注' v-model="ruleForm.avatar"
:isCropper="true" :multi="2" :maxSize="10240" :width="150" :height="150">
</cheers-upload-image>
</template>
</cheers-form>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
{
type: "slot", solt: "avatar", label: "图片", value: "avatar",
// 表单验证
rules: [{ required: true, message: "请选择图片", trigger: "change" }]
},
1
2
3
4
5
2
3
4
5
# 自定义验证和隐藏显示
{
type: "Input", label: "隐藏显示", value: "name", flag: 'this.ruleForm.numberInput == 5',
// 表单验证
rules: [{ required: true, message: "请输入姓名", trigger: "blur" }]
},
{
type: "Input", label: "自定义验证", value: "phone",
rules: [{ required: true, validator: checkPhone, trigger: "blur" }]
},
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 完整代码
<template>
<cheers-card>
<span slot="center">档案库</span>
<cheers-form slot="body" :inline="false" labelWidth="100px" ref="formrow" :ruleFormBtn="ruleFormBtn"
:ruleForm="ruleForm" :fieldList="fieldList" @f_listenBtn="f_listenBtn" @f_save="f_save">
<template v-slot:form-avatar>
<cheers-upload-image :previewFile='$previewFile' :uploadUrl='$uploadUrl' text='备注' v-model="ruleForm.avatar"
:isCropper="true" :multi="2" :maxSize="10240" :width="150" :height="150">
</cheers-upload-image>
</template>
</cheers-form>
</cheers-card>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
ruleForm: {
box: []
},
ruleFormBtn: [],
selectData: {
cityData: []
}
};
},
computed: {
fieldList() {
return [
{
row: [
{
title: "基本信息",
col: 12,
list: [
{
type: "slot", solt: "avatar", label: "图片", value: "avatar",
// 表单验证
rules: [{ required: true, message: "请选择图片", trigger: "change" }]
},
{
type: "NumberInput", label: "数字", value: "numberInput",
rules: [{ required: true, message: "Year", trigger: "change" }],
attr: { step: 5 },
change: row => { this.changeYear(row); }
},
{
type: "Input", label: "隐藏显示", value: "name", flag: 'this.ruleForm.numberInput == 5',
// 表单验证
rules: [{ required: true, message: "请输入姓名", trigger: "blur" }]
},
{
type: "Input", label: "输入框", value: "show",
// 表单验证
rules: [{ required: true, message: "请输入姓名", trigger: "blur" }]
},
{
type: "Password", label: "密码框", value: "pass",
// 表单验证
rules: [{ required: true, message: "请输入活动名称", trigger: "blur" }]
},
{
type: "Input", label: "自定义验证", value: "phone",
rules: [{ required: true, validator: checkPhone, trigger: "blur" }]
},
{
type: "Select", label: "下拉框", value: "sex",
// 渲染数组// 下拉转换
options: caseState, props: { label: "label", value: "value" },
attr: {
clearable: true
},
rules: [{ required: true, message: "请选择性别", trigger: "change" }],
change: row => { this.changeSex(row); }
}, {
type: "Cascader", label: "级联下拉框", value: "city",
// 渲染数组// 下拉转换
options: this.selectData.cityData,
props: { label: "departName", value: "id" },
rules: [{ required: true, message: "请选择城市", trigger: "change" }],
change: row => { this.changeCity(row); }
}, {
type: "Radio", label: "单选", value: "radio",
// 渲染数组// 下拉转换
options: caseState,
props: { label: "label", value: "value" }, attr: {
border: true
},
rules: [{ required: true, message: "请选择性别", trigger: "change" }],
change: row => { this.changeSex(row); }
}, {
type: "Checkbox", label: "复选", value: "box",
// 渲染数组// 下拉转换
options: caseState,
props: { label: "label", value: "value" }, attr: {
border: true
},
rules: [{ required: true, message: "请选择性别", trigger: "change" }],
change: row => { this.changeSex(row); }
},
{
type: "Year", label: "年", value: "year",
rules: [{ required: true, message: "Year", trigger: "change" }],
change: row => { this.changeYear(row); }
}, {
type: "YearMonth", label: "年月", value: "yearMonth",
rules: [{ required: true, message: "Year", trigger: "change" }],
change: row => { this.changeYear(row); }
}, {
type: "Date", label: "年月日", value: "date",
rules: [{ required: true, message: "Year", trigger: "change" }],
change: row => { this.changeYear(row); }
}, {
type: "DateRange", label: "时间区间", value: "dateRange",
rules: [{ required: true, message: "Year", trigger: "change" }],
change: row => { this.changeYear(row); }
}, {
type: "Switch", label: "开关", value: "Switch",
rules: [{ required: true, message: "Year", trigger: "change" }],
change: row => { this.changeYear(row); }
},
// {
// type: "Select", label: "所属部门", value: "depart", options: [], placeholder: "请选择所属部门",
// rules: [{ required: true, message: "请选择所属部门", trigger: "change" }],
// change: row => "",
// },
],
},
],
},
];
}
},
mounted() {
this.ruleFormBtn = [
{ title: "保存", icon: "el-icon-plus", methods: "f_validate", option: [] },
{ title: "取消", icon: "el-icon-delete", methods: "f_cancel", option: [] }
];
this.f_getSelectData()
},
methods: {
changeYear(row) {
console.log(row)
},
changeSex(row) {
console.log(row)
},
changeCity(row) {
console.log(row)
},
async f_getSelectData() {
let res = await axios.get("/json/city.json")
this.selectData.cityData = res.data.data
},
//按钮回调
f_listenBtn(methodsWords, option) {
this[methodsWords](...option);
},
f_validate(val) {
this.$refs.formrow.f_validate();
},
f_save(valid) {
if (valid) {
console.log(this.ruleForm);
}
},
f_cancel(val) {
console.log(2);
},
},
};
let caseState = [
{ label: "男", value: "1" },
{ label: "女", value: "2" },
];
let checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error("手机号不能为空"));
} else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
if (reg.test(value)) {
callback();
} else {
return callback(new Error("请输入正确的手机号"));
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190