@form-create/iview 2.6.3 → 2.7.0

package/src/core/api.js

@@ -11,7 +11,7 @@ function tidyBtnProp(btn, def) {
 }
 
 export default function extendApi(api, h) {
-    extend(api, {
+    return {
         formEl() {
             return h.$manager.form();
         },
@@ -37,16 +37,14 @@ export default function extendApi(api, h) {
                 })
             });
         },
-        validateField: (field, callback) => {
+        validateField(field, callback) {
             return new Promise((resolve, reject) => {
                 const ctx = h.getFieldCtx(field);
                 if (!ctx) return;
                 const sub = h.subForm[ctx.id];
                 const all = [h.$manager.validateField(ctx.id)];
                 toArray(sub).forEach(v => {
-                    all.push(v.validate().catch(() => {
-                        return Promise.reject('子表单验证未通过');
-                    }));
+                    all.push(v.validate());
                 })
                 Promise.all(all).then(() => {
                     resolve(null);
@@ -116,21 +114,18 @@ export default function extendApi(api, h) {
             api.refreshOptions();
         },
         submit(successFn, failFn) {
-            api.validate((valid) => {
-                if (valid) {
+            return new Promise((resolve, reject) => {
+                api.validate().then(() => {
                     let formData = api.formData();
-                    if (is.Function(successFn))
-                        invoke(() => successFn(formData, this));
-                    else {
-                        is.Function(h.options.onSubmit) && invoke(() => h.options.onSubmit(formData, this));
-                        h.vm.$emit('submit', formData, this);
-                    }
-                } else {
-                    is.Function(failFn) && invoke(() => failFn(this, ...arguments));
-                }
-            }).catch(e=>{});
+                    is.Function(successFn) && invoke(() => successFn(formData, api));
+                    is.Function(h.options.onSubmit) && invoke(() => h.options.onSubmit(formData, api));
+                    h.vm.emit('submit', formData, api);
+                    resolve(formData);
+                }).catch((...args) => {
+                    is.Function(failFn) && invoke(() => failFn(api, ...args));
+                    reject(...args)
+                })
+            });
         },
-    });
-
-    return api;
+    };
 }

package/src/core/index.js

@@ -6,6 +6,7 @@ import FormCreateFactory from '@form-create/core/src/index';
 import makers from './maker';
 import '../style/index.css';
 import extendApi from './api';
+import required from "./provider";
 
 function install(FormCreate) {
     FormCreate.componentAlias(alias);
@@ -14,6 +15,8 @@ function install(FormCreate) {
         FormCreate.component(component.name, component);
     });
 
+    FormCreate.register(required);
+
     parsers.forEach((parser) => {
         FormCreate.parser(parser);
     });

package/src/core/manager.js

@@ -1,6 +1,7 @@
 import getConfig, {info, iviewConfig} from './config';
 import mergeProps from '@form-create/utils/lib/mergeprops';
 import is, {hasProperty} from '@form-create/utils/lib/type';
+import toString from '@form-create/utils/lib/tostring';
 import extend from '@form-create/utils/lib/extend';
 
 function tidy(props, name) {
@@ -20,28 +21,32 @@ function tidyBool(opt, name) {
     }
 }
 
+function tidyRule(rule) {
+    const _rule = {...rule};
+    delete _rule.children;
+    return _rule;
+}
+
 export default {
     validate() {
         const form = this.form();
         if (form) {
-            return new Promise((resolve, reject) => {
-                form.validate().then(flag => {
-                    flag ? resolve(true) : reject(false);
-                })
-            });
+            return form.validate();
+        } else {
+            return new Promise(v => v());
         }
-        return new Promise(v => v());
     },
     validateField(field) {
-        const form = this.form();
-        if (form) {
-            return new Promise((resolve, reject) => {
-                form.validateField(field, e => {
-                    e ? reject(e) : resolve(null);
-                })
-            })
-        }
-        return new Promise(v => v());
+        return new Promise((resolve, reject) => {
+            const form = this.form();
+            if (form) {
+                form.validateField(field, (res, err) => {
+                    err ? reject(err) : resolve(res);
+                });
+            } else {
+                resolve();
+            }
+        });
     },
     clearValidateState(ctx) {
         const fItem = this.vm.$refs[ctx.wrapRef];
@@ -62,17 +67,15 @@ export default {
         return prop;
     },
     mergeProp(ctx) {
-        ctx.prop = mergeProps([{
-            info: this.options.info || {},
-            wrap: this.options.wrap || {},
-            col: this.options.col || {},
-            title: this.options.title || {},
-        }, ctx.prop], {
+        const def = {
             info: info(),
             title: {},
             col: {span: 24},
             wrap: {},
-        }, {normal: ['title', 'info', 'col', 'wrap']});
+        };
+        ['info', 'wrap', 'col', 'title'].forEach(name => {
+            ctx.prop[name] = mergeProps([this.options[name] || {}, ctx.prop[name] || {}], def[name]);
+        });
         this.setSize(ctx.prop.props);
     },
     setSize(props) {
@@ -92,7 +95,7 @@ export default {
                     e.preventDefault();
                 }
             },
-            class: [form.className, form.class, 'form-create'],
+            class: [form.className, form.class, 'form-create', this.$handle.preview ? 'is-preview' : ''],
             style: form.style,
             type: 'form',
         };
@@ -102,34 +105,34 @@ export default {
         extend(this.rule, {key, ref});
         extend(this.rule.props, {
             model: $handle.formData,
-            // rules: $handle.validate(),
         });
     },
     render(children) {
-        if (children.length) {
-            children.push(this.makeFormBtn());
+        if (children.slotLen() && !this.$handle.preview) {
+            children.setSlot(undefined, () => this.makeFormBtn());
         }
-        return this.$r(this.rule, isFalse(this.options.row.show) ? children : [this.makeRow(children)]);
+        return this.$r(this.rule, isFalse(this.options.row.show) ? children.getSlots() : [this.makeRow(children)]);
     },
     makeWrap(ctx, children) {
         const rule = ctx.prop;
         const uni = `${this.key}${ctx.key}`;
         const col = rule.col;
-        const isTitle = this.isTitle(rule);
+        const isTitle = this.isTitle(rule) && rule.wrap.title !== false;
         const labelWidth = (!col.labelWidth && !isTitle) ? 0 : col.labelWidth;
         const {inline, col: _col} = this.rule.props;
+        delete rule.wrap.title;
         const item = isFalse(rule.wrap.show) ? children : this.$r(mergeProps([rule.wrap, {
             props: {
                 labelWidth,
-                ...(rule.wrap || {}),
+                ...tidyRule(rule.wrap || {}),
                 prop: ctx.id,
                 rules: ctx.injectValidate(),
             },
-            class: rule.className,
+            class: this.$render.mergeClass(rule.className, 'fc-form-item'),
             key: `${uni}fi`,
             ref: ctx.wrapRef,
             type: 'formItem',
-        }]), [children, isTitle ? this.makeInfo(rule, uni, ctx) : null]);
+        }]), {default: () => children, ...(isTitle ? {label: () => this.makeInfo(rule, uni, ctx)} : {})});
         return (inline === true || isFalse(_col) || isFalse(col.show)) ? item : this.makeCol(rule, uni, [item]);
     },
     isTitle(rule) {
@@ -138,21 +141,33 @@ export default {
         return !((!title.title && !title.native) || isFalse(title.show))
     },
     makeInfo(rule, uni, ctx) {
-        const titleProp = rule.title;
-        const infoProp = rule.info;
+        const titleProp = {...rule.title};
+        const infoProp = {...rule.info};
+        const form = this.options.form;
         const titleSlot = this.getSlot('title');
-        const children = [titleSlot ? titleSlot({title: titleProp.title || '', rule: ctx.rule, options: this.options}) : titleProp.title];
+        const children = [titleSlot ? titleSlot({
+            title: ctx.refRule.__$title.value,
+            rule: ctx.rule,
+            options: this.options
+        }) : ((ctx.refRule.__$title.value) + (form.labelSuffix || form['label-suffix'] || ''))];
 
         if (!isFalse(infoProp.show) && (infoProp.info || infoProp.native) && !isFalse(infoProp.icon)) {
             const prop = {
                 type: infoProp.type || 'poptip',
-                props: {...infoProp},
+                props: tidyRule(infoProp),
                 key: `${uni}pop`,
                 slot: 'label'
             };
+
+            delete prop.props.icon;
+            delete prop.props.show;
+            delete prop.props.info;
+            delete prop.props.align;
+            delete prop.props.native;
+
             const field = 'content';
             if (infoProp.info && !hasProperty(prop.props, field)) {
-                prop.props[field] = infoProp.info;
+                prop.props[field] = ctx.refRule.__$info.value;
             }
             children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), [
                 this.$r({
@@ -163,17 +178,24 @@ export default {
                 })
             ]));
         }
-        return this.$r(mergeProps([titleProp, {
-            props: titleProp,
-            slot: titleProp.slot || 'label',
+        const _prop = mergeProps([titleProp, {
+            props: tidyRule(titleProp),
             key: `${uni}tit`,
+            class: 'fc-form-title',
+            slot: titleProp.slot || 'label',
             type: titleProp.type || 'span',
-        }]), children);
+        }]);
+
+        delete _prop.props.show;
+        delete _prop.props.title;
+        delete _prop.props.native;
+
+        return this.$r(_prop, children);
     },
     makeCol(rule, uni, children) {
         const col = rule.col;
         return this.$r({
-            class: col.class,
+            class: this.$render.mergeClass(col.class, 'fc-form-col'),
             type: 'col',
             props: col || {span: 24},
             key: `${uni}col`
@@ -184,7 +206,7 @@ export default {
         return this.$r({
             type: 'row',
             props: row,
-            class: row.class,
+            class: this.$render.mergeClass(row.class, 'fc-form-row'),
             key: `${this.key}row`
         }, children)
     },
@@ -201,6 +223,7 @@ export default {
         }
         const item = this.$r({
             type: 'formItem',
+            class: 'fc-form-item',
             key: `${this.key}fb`
         }, vn);
 
@@ -208,44 +231,57 @@ export default {
             ? item
             : this.$r({
                 type: 'col',
+                class: 'fc-form-col fc-form-footer',
                 props: {span: 24},
                 key: `${this.key}fc`
             }, [item]);
     },
+
     makeResetBtn() {
-        const resetBtn = this.options.resetBtn;
-        this.setSize(resetBtn);
+        const resetBtn = {...this.options.resetBtn};
+        const innerText = resetBtn.innerText;
+        delete resetBtn.innerText;
+        delete resetBtn.click;
+        delete resetBtn.col;
+        delete resetBtn.show;
         return this.$r({
             type: 'button',
             props: resetBtn,
-            style: {width: resetBtn.width, marginLeft: '15px'},
+            class: 'fc-reset-btn',
+            style: {width: resetBtn.width},
             on: {
                 click: () => {
                     const fApi = this.$handle.api;
-                    resetBtn.click
-                        ? resetBtn.click(fApi)
+                    this.options.resetBtn.click
+                        ? this.options.resetBtn.click(fApi)
                         : fApi.resetFields();
                 }
             },
             key: `${this.key}b2`,
-        }, [resetBtn.innerText]);
+        }, [innerText]);
     },
     makeSubmitBtn() {
-        const submitBtn = this.options.submitBtn;
-        this.setSize(submitBtn);
+        const submitBtn = {...this.options.submitBtn};
+        const innerText = submitBtn.innerText;
+        delete submitBtn.innerText;
+        delete submitBtn.click;
+        delete submitBtn.col;
+        delete submitBtn.show;
         return this.$r({
             type: 'button',
             props: submitBtn,
+            class: 'fc-submit-btn',
             style: {width: submitBtn.width},
             on: {
                 click: () => {
                     const fApi = this.$handle.api;
-                    submitBtn.click
-                        ? submitBtn.click(fApi)
-                        : fApi.submit();
+                    this.options.submitBtn.click
+                        ? this.options.submitBtn.click(fApi)
+                        : fApi.submit().catch(() => {
+                        });
                 }
             },
             key: `${this.key}b1`,
-        }, [submitBtn.innerText]);
+        }, [innerText]);
     }
 }

package/src/core/provider.js

@@ -0,0 +1,52 @@
+import is from '@form-create/utils/lib/type';
+
+const required = {
+    name: 'required',
+    load(inject, rule, api) {
+        const val = parseVal(inject.getValue());
+        if (val.required === false) {
+            inject.clearProp();
+            api.clearValidateState([rule.field]);
+        } else {
+            const validate = {
+                required: true,
+                validator(_, v, call) {
+                    is.empty(v) ? call(validate.message) : call();
+                },
+                ...val,
+            };
+            if (!validate.message) {
+                validate.message = rule.__fc__.refRule.__$title.value + (api.getLocale() === 'en' ? ' is required' : '不能为空');
+            } else {
+                const match = validate.message.match(/^\{\{\s*\$t\.(.+)\s*\}\}$/);
+                if (match) {
+                    validate.message = api.t(match[1], {title: rule.__fc__.refRule.__$title.value});
+                }
+            }
+            inject.getProp().validate = [validate];
+        }
+        api.sync(rule);
+    },
+    watch(...args) {
+        required.load(...args);
+    }
+}
+
+function parseVal(val) {
+    if (is.Boolean(val)) {
+        return {required: val}
+    } else if (is.String(val)) {
+        return {message: val};
+    } else if (is.Undef(val)) {
+        return {required: false};
+    } else if (is.Function(val)) {
+        return {validator: val};
+    } else if (!is.Object(val)) {
+        return {};
+    } else {
+        return val;
+    }
+}
+
+
+export default required