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
<template>
<div>
<template v-if="data.type.indexOf('range') != -1">
<el-form-item label="开始占位内容" label-width="110px">
<el-input
v-model="data.startPlaceholder"
clearable
placeholder="开始占位内容"
></el-input>
</el-form-item>
<el-form-item label="结束占位内容" label-width="110px">
<el-input
v-model="data.endPlaceholder"
clearable
placeholder="结束占位内容"
></el-input>
</el-form-item>
</template>
<el-form-item label="占位内容" v-else>
<el-input
v-model="data.placeholder"
clearable
placeholder="占位内容"
></el-input>
</el-form-item>
<el-form-item label="默认值">
<el-input v-model="data.value" clearable placeholder="默认值"></el-input>
</el-form-item>
<el-form-item label="显示格式化" label-width="100px">
<el-input
v-model="data.format"
clearable
placeholder="显示格式化"
></el-input>
</el-form-item>
<el-form-item label="值格式化">
<el-input
v-model="data.valueFormat"
clearable
placeholder="值格式化"
></el-input>
</el-form-item>
<el-form-item
label="取消范围联动"
label-width="110px"
v-if="['timerange', 'daterange', 'datetimerange'].includes(data.type)"
>
<el-switch v-model="data.unlinkPanels"></el-switch>
</el-form-item>
<el-form-item label="是否禁用">
<el-switch v-model="data.disabled"></el-switch>
</el-form-item>
<el-form-item label="是否可见">
<el-switch v-model="data.display"></el-switch>
</el-form-item>
<el-form-item label="是否必填">
<el-switch v-model="data.required"></el-switch>
<el-input
v-if="data.required"
v-model.lazy="data.pattern"
placeholder="校验方法"
></el-input>
</el-form-item>
</div>
</template>
<script>
let checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("请选择出生日期"))
}
let birthday = new Date(value.replace(/-/g, "/"))
let d = new Date()
let age =
d.getFullYear() -
birthday.getFullYear() -
(d.getMonth() < birthday.getMonth() ||
(d.getMonth() == birthday.getMonth() && d.getDate() < birthday.getDate())
? 1
: 0)
console.log(age)
if (age < 40 || age > 80) {
callback(new Error("年龄不符合筛查条件"))
} else {
callback()
}
}
export default {
name: "config-date",
props: ["data"],
data() {
return {
validator: {
type: null,
required: null,
pattern: null,
length: null,
},
}
},
methods: {
generateRule() {
const rules = []
Object.keys(this.validator).forEach((key) => {
if (this.validator[key]) rules.push(this.validator[key])
})
this.data.rules = rules
console.log(this.data.rules)
},
// 在表单配置中增加checkAge字段，可以增加校验年龄的方法
ageRule() {
// const rules = []
// Object.keys(this.validator).forEach((key) => {
// if (this.validator[key]) rules.push(this.validator[key])
// })
// this.data.rules = rules
let i = this.data.rules.findIndex((e) => e.trigger)
this.data.rules[i] = { validator: checkAge, trigger: "change" }
console.log(this.data.rules)
},
},
watch: {
"data.required": function (val) {
if (val) {
this.validator.required = {
required: true,
message: `${this.data.label}必须填写`,
}
} else {
this.validator.required = null
}
this.generateRule()
},
"data.pattern": function (val) {
if (val) {
// console.log(val)
if (val == "checkAge") {
this.ageRule()
}
} else {
this.validator.pattern = null
}
// delete this.data.pattern
// this.generateRule()
},
},
}
</script>