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