1 | import getConfig, {info, iviewConfig} from './config';
|
2 | import mergeProps from '@form-create/utils/lib/mergeprops';
|
3 | import is, {hasProperty} from '@form-create/utils/lib/type';
|
4 | import extend from '@form-create/utils/lib/extend';
|
5 |
|
6 | function tidy(props, name) {
|
7 | if (!hasProperty(props, name)) return;
|
8 | if (is.String(props[name])) {
|
9 | props[name] = {[name]: props[name], show: true};
|
10 | }
|
11 | }
|
12 |
|
13 | function isFalse(val) {
|
14 | return val === false;
|
15 | }
|
16 |
|
17 | function tidyBool(opt, name) {
|
18 | if (hasProperty(opt, name) && !is.Object(opt[name])) {
|
19 | opt[name] = {show: !!opt[name]};
|
20 | }
|
21 | }
|
22 |
|
23 | export default {
|
24 | validate(call) {
|
25 | this.form().validate(call);
|
26 | },
|
27 | validateField(field, call) {
|
28 | this.form().validateField(field, call);
|
29 | },
|
30 | clearValidateState(ctx) {
|
31 | const fItem = this.vm.$refs[ctx.wrapRef];
|
32 | if (fItem) {
|
33 | fItem.validateMessage = '';
|
34 | fItem.validateState = '';
|
35 | }
|
36 | },
|
37 | tidyOptions(options) {
|
38 | ['submitBtn', 'resetBtn', 'row', 'info', 'wrap', 'col'].forEach(name => {
|
39 | tidyBool(options, name);
|
40 | })
|
41 | return options;
|
42 | },
|
43 | tidyRule({prop}) {
|
44 | tidy(prop, 'title');
|
45 | tidy(prop, 'info');
|
46 | return prop;
|
47 | },
|
48 | mergeProp(ctx) {
|
49 | ctx.prop = mergeProps([{
|
50 | info: this.options.info || {},
|
51 | wrap: this.options.wrap || {},
|
52 | col: this.options.col || {},
|
53 | }, ctx.prop], {
|
54 | info: info(),
|
55 | title: {},
|
56 | col: {span: 24},
|
57 | wrap: {},
|
58 | }, {normal: ['title', 'info', 'col', 'wrap']});
|
59 | this.setSize(ctx.prop.props);
|
60 | },
|
61 | setSize(props) {
|
62 | if (!props.size && this.options.form.size) {
|
63 | props.size = this.options.form.size;
|
64 | }
|
65 | },
|
66 | getDefaultOptions() {
|
67 | return getConfig();
|
68 | },
|
69 | update() {
|
70 | const form = this.options.form;
|
71 | this.rule = {
|
72 | props: {...form},
|
73 | nativeOn: {
|
74 | submit: (e) => {
|
75 | e.preventDefault();
|
76 | }
|
77 | },
|
78 | class: [form.className, form.class, 'form-create'],
|
79 | style: form.style,
|
80 | type: 'form',
|
81 | };
|
82 | },
|
83 | beforeRender() {
|
84 | const {key, ref, $handle} = this;
|
85 | extend(this.rule, {key, ref});
|
86 | extend(this.rule.props, {
|
87 | model: $handle.formData,
|
88 | rules: $handle.validate(),
|
89 | });
|
90 | },
|
91 | render(children) {
|
92 | if (children.length) {
|
93 | children.push(this.makeFormBtn());
|
94 | }
|
95 | return this.$r(this.rule, isFalse(this.options.row.show) ? children : [this.makeRow(children)]);
|
96 | },
|
97 | makeWrap(ctx, children) {
|
98 | const rule = ctx.prop;
|
99 | const uni = `${this.key}${ctx.key}`;
|
100 | const col = rule.col;
|
101 | const isTitle = this.isTitle(rule);
|
102 | const labelWidth = (!col.labelWidth && !isTitle) ? 0 : col.labelWidth;
|
103 | const {inline, col: _col} = this.rule.props;
|
104 | const item = isFalse(rule.wrap.show) ? children : this.$r(mergeProps([rule.wrap, {
|
105 | props: {
|
106 | labelWidth,
|
107 | ...(rule.wrap || {}),
|
108 | prop: ctx.id,
|
109 | rules: rule.validate,
|
110 | },
|
111 | class: rule.className,
|
112 | key: `${uni}fi`,
|
113 | ref: ctx.wrapRef,
|
114 | type: 'formItem',
|
115 | }]), [children, isTitle ? this.makeInfo(rule, uni) : null]);
|
116 | return (inline === true || isFalse(_col) || isFalse(col.show)) ? item : this.makeCol(rule, uni, [item]);
|
117 | },
|
118 | isTitle(rule) {
|
119 | if (this.options.form.title === false) return false;
|
120 | const title = rule.title;
|
121 | return !((!title.title && !title.native) || isFalse(title.show))
|
122 | },
|
123 | makeInfo(rule, uni) {
|
124 | const titleProp = rule.title;
|
125 | const infoProp = rule.info;
|
126 | const children = [titleProp.title];
|
127 |
|
128 | const titleFn = (pop) => this.$r(mergeProps([titleProp, {
|
129 | props: titleProp,
|
130 | slot: titleProp.slot || (pop ? 'default' : 'label'),
|
131 | key: `${uni}tit`,
|
132 | type: titleProp.type || 'span',
|
133 | }]), children);
|
134 |
|
135 | if (!isFalse(infoProp.show) && (infoProp.info || infoProp.native) && !isFalse(infoProp.icon)) {
|
136 | const prop = {
|
137 | type: infoProp.type || 'poptip',
|
138 | props: {...infoProp},
|
139 | key: `${uni}pop`,
|
140 | slot: 'label'
|
141 | };
|
142 | const field = 'content';
|
143 | if (infoProp.info && !hasProperty(prop.props, field)) {
|
144 | prop.props[field] = infoProp.info;
|
145 | }
|
146 | children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), [
|
147 | this.$r({
|
148 | type: 'icon',
|
149 | props: {type: infoProp.icon === true ? iviewConfig.infoIcon : infoProp.icon, size: 16},
|
150 | style: 'margin-top: -1px',
|
151 | key: `${uni}i`
|
152 | })
|
153 | ]));
|
154 | }
|
155 | return this.$r(mergeProps([titleProp, {
|
156 | props: titleProp,
|
157 | slot: titleProp.slot || 'label',
|
158 | key: `${uni}tit`,
|
159 | type: titleProp.type || 'span',
|
160 | }]), children);
|
161 | },
|
162 | makeCol(rule, uni, children) {
|
163 | const col = rule.col;
|
164 | return this.$r({
|
165 | class: col.class,
|
166 | type: 'col',
|
167 | props: col || {span: 24},
|
168 | key: `${uni}col`
|
169 | }, children);
|
170 | },
|
171 | makeRow(children) {
|
172 | const row = this.options.row || {};
|
173 | return this.$r({
|
174 | type: 'row',
|
175 | props: row,
|
176 | class: row.class,
|
177 | key: `${this.key}row`
|
178 | }, children)
|
179 | },
|
180 | makeFormBtn() {
|
181 | let vn = [];
|
182 | if (!isFalse(this.options.submitBtn.show)) {
|
183 | vn.push(this.makeSubmitBtn())
|
184 | }
|
185 | if (!isFalse(this.options.resetBtn.show)) {
|
186 | vn.push(this.makeResetBtn())
|
187 | }
|
188 | if (!vn.length) {
|
189 | return;
|
190 | }
|
191 | const item = this.$r({
|
192 | type: 'formItem',
|
193 | key: `${this.key}fb`
|
194 | }, vn);
|
195 |
|
196 | return this.rule.props.inline === true
|
197 | ? item
|
198 | : this.$r({
|
199 | type: 'col',
|
200 | props: {span: 24},
|
201 | key: `${this.key}fc`
|
202 | }, [item]);
|
203 | },
|
204 | makeResetBtn() {
|
205 | const resetBtn = this.options.resetBtn;
|
206 | this.setSize(resetBtn);
|
207 | return this.$r({
|
208 | type: 'button',
|
209 | props: resetBtn,
|
210 | style: {width: resetBtn.width, marginLeft: '15px'},
|
211 | on: {
|
212 | click: () => {
|
213 | const fApi = this.$handle.api;
|
214 | resetBtn.click
|
215 | ? resetBtn.click(fApi)
|
216 | : fApi.resetFields();
|
217 | }
|
218 | },
|
219 | key: `${this.key}b2`,
|
220 | }, [resetBtn.innerText]);
|
221 | },
|
222 | makeSubmitBtn() {
|
223 | const submitBtn = this.options.submitBtn;
|
224 | this.setSize(submitBtn);
|
225 | return this.$r({
|
226 | type: 'button',
|
227 | props: submitBtn,
|
228 | style: {width: submitBtn.width},
|
229 | on: {
|
230 | click: () => {
|
231 | const fApi = this.$handle.api;
|
232 | submitBtn.click
|
233 | ? submitBtn.click(fApi)
|
234 | : fApi.submit();
|
235 | }
|
236 | },
|
237 | key: `${this.key}b1`,
|
238 | }, [submitBtn.innerText]);
|
239 | }
|
240 | }
|