@form-create/element-ui 3.1.35 → 3.2.1

package/dist/form-create.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.1.35
+ * @form-create/element-ui v3.2.1
  * (c) 2018-2024 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -213,9 +213,9 @@
     return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
   }
 
-  var NAME$9 = 'fcCheckbox';
+  var NAME$8 = 'fcCheckbox';
   var Checkbox = vue.defineComponent({
-    name: NAME$9,
+    name: NAME$8,
     inheritAttrs: false,
     props: {
       formCreateInject: Object,
@@ -525,9 +525,9 @@
     return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
   }
 
-  var NAME$8 = 'fcFrame';
+  var NAME$7 = 'fcFrame';
   var Frame = vue.defineComponent({
-    name: NAME$8,
+    name: NAME$7,
     props: {
       type: {
         type: String,
@@ -1008,9 +1008,9 @@
     }
   });
 
-  var NAME$7 = 'fcRadio';
+  var NAME$6 = 'fcRadio';
   var Radio = vue.defineComponent({
-    name: NAME$7,
+    name: NAME$6,
     inheritAttrs: false,
     props: {
       formCreateInject: Object,
@@ -1161,9 +1161,9 @@
     return {}.hasOwnProperty.call(rule, k);
   }
 
-  var NAME$6 = 'fcSelect';
+  var NAME$5 = 'fcSelect';
   var Select = vue.defineComponent({
-    name: NAME$6,
+    name: NAME$5,
     inheritAttrs: false,
     props: {
       formCreateInject: Object,
@@ -1231,9 +1231,9 @@
     }
   });
 
-  var NAME$5 = 'fcTree';
+  var NAME$4 = 'fcTree';
   var Tree = vue.defineComponent({
-    name: NAME$5,
+    name: NAME$4,
     inheritAttrs: false,
     formCreateParser: {
       mergeProp: function mergeProp(ctx) {
@@ -1333,9 +1333,9 @@
     return ('' + file).split('/').pop();
   }
 
-  var NAME$4 = 'fcUpload';
+  var NAME$3 = 'fcUpload';
   var Upload = vue.defineComponent({
-    name: NAME$4,
+    name: NAME$3,
     inheritAttrs: false,
     formCreateParser: {
       toFormValue: function toFormValue(value) {
@@ -1527,9 +1527,9 @@
   var css_248z$1 = "._fc-group{display:flex;flex-direction:column;justify-content:center;min-height:38px;width:100%}._fc-group-disabled ._fc-group-add,._fc-group-disabled ._fc-group-btn{cursor:not-allowed}._fc-group-handle{background-color:#fff;border:1px dashed #d9d9d9;border-radius:15px;bottom:-15px;display:flex;flex-direction:row;padding:3px 8px;position:absolute;right:30px}._fc-group-btn{cursor:pointer}._fc-group-idx{align-items:center;background:#eee;border-radius:15px;bottom:-15px;display:flex;font-weight:700;height:30px;justify-content:center;left:10px;position:absolute;width:30px}._fc-group-handle ._fc-group-btn+._fc-group-btn{margin-left:7px}._fc-group-container{border:1px dashed #d9d9d9;border-radius:5px;display:flex;flex-direction:column;margin:5px 5px 25px;padding:20px 20px 25px;position:relative}._fc-group-arrow{height:20px;position:relative;width:20px}._fc-group-arrow:before{border-left:2px solid #999;border-top:2px solid #999;content:\"\";height:9px;left:5px;position:absolute;top:8px;transform:rotate(45deg);width:9px}._fc-group-arrow._fc-group-down{transform:rotate(180deg)}._fc-group-plus-minus{cursor:pointer;height:20px;position:relative;width:20px}._fc-group-plus-minus:after,._fc-group-plus-minus:before{background-color:#409eff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60%}._fc-group-plus-minus:before{transform:translate(-50%,-50%) rotate(90deg)}._fc-group-plus-minus._fc-group-minus:before{display:none}._fc-group-plus-minus._fc-group-minus:after{background-color:#f56c6c}._fc-group-add{border:1px solid rgba(64,158,255,.5);border-radius:15px;cursor:pointer;height:25px;width:25px}._fc-group-add._fc-group-plus-minus:after,._fc-group-add._fc-group-plus-minus:before{width:50%}";
   styleInject(css_248z$1);
 
-  var NAME$3 = 'fcGroup';
+  var NAME$2 = 'fcGroup';
   var Group = vue.defineComponent({
-    name: NAME$3,
+    name: NAME$2,
     props: {
       field: String,
       rule: Array,
@@ -1939,9 +1939,9 @@
     }
   });
 
-  var NAME$2 = 'fcSubForm';
+  var NAME$1 = 'fcSubForm';
   var Sub = vue.defineComponent({
-    name: NAME$2,
+    name: NAME$1,
     props: {
       rule: Array,
       options: {
@@ -2046,8 +2046,20 @@
 
   var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub, script];
 
-  function toString(val) {
-    return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
+  function debounce(fn, wait) {
+    var timeout = null;
+    return function () {
+      var _this = this;
+
+      for (var _len = arguments.length, arg = new Array(_len), _key = 0; _key < _len; _key++) {
+        arg[_key] = arguments[_key];
+      }
+
+      if (timeout !== null) clearTimeout(timeout);
+      timeout = setTimeout(function () {
+        return fn.call.apply(fn, [_this].concat(arg));
+      }, wait);
+    };
   }
 
   function toLine(name) {
@@ -2059,131 +2071,6 @@
     return str.replace(str[0], str[0].toLocaleUpperCase());
   }
 
-  function format(type, msg, rule) {
-    return "[form-create ".concat(type, "]: ").concat(msg) + (rule ? '\n\nrule: ' + JSON.stringify(rule.getRule ? rule.getRule() : rule) : '');
-  }
-  function err(msg, rule) {
-    console.error(format('err', msg, rule));
-  }
-  function logError(e) {
-    err(e.toString());
-    console.error(e);
-  }
-
-  var PREFIX = '[[FORM-CREATE-PREFIX-';
-  var SUFFIX = '-FORM-CREATE-SUFFIX]]';
-  var $T = '$FN:';
-  var $TX = '$FNX:';
-  var $ON = '$GLOBAL:';
-  var FUNCTION = 'function';
-  function toJson(obj, space) {
-    return JSON.stringify(deepExtend(Array.isArray(obj) ? [] : {}, obj, true), function (key, val) {
-      if (val && val._isVue === true) return undefined;
-
-      if (_typeof(val) !== FUNCTION) {
-        return val;
-      }
-
-      if (val.__json) {
-        return val.__json;
-      }
-
-      if (val.__origin) val = val.__origin;
-      if (val.__emit) return undefined;
-      return PREFIX + val + SUFFIX;
-    }, space);
-  }
-
-  function makeFn(fn) {
-    return new Function('return ' + fn)();
-  }
-
-  function parseFn(fn, mode) {
-    if (fn && is.String(fn) && fn.length > 4) {
-      var v = fn.trim();
-      var flag = false;
-
-      try {
-        if (v.indexOf(SUFFIX) > 0 && v.indexOf(PREFIX) === 0) {
-          v = v.replace(SUFFIX, '').replace(PREFIX, '');
-          flag = true;
-        } else if (v.indexOf($T) === 0) {
-          v = v.replace($T, '');
-          flag = true;
-        } else if (v.indexOf($ON) === 0) {
-          var name = v.replace($ON, '');
-
-          v = function v() {
-            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-              args[_key] = arguments[_key];
-            }
-
-            var callback = args[0].api.getGlobalEvent(name);
-
-            if (callback) {
-              return callback.call.apply(callback, [this].concat(args));
-            }
-
-            return undefined;
-          };
-
-          v.__json = fn;
-          v.__inject = true;
-          return v;
-        } else if (v.indexOf($TX) === 0) {
-          v = makeFn('function($inject){' + v.replace($TX, '') + '}');
-          v.__json = fn;
-          v.__inject = true;
-          return v;
-        } else if (!mode && v.indexOf(FUNCTION) === 0 && v !== FUNCTION) {
-          flag = true;
-        }
-
-        if (!flag) return fn;
-        var val = makeFn(v.indexOf(FUNCTION) === -1 && v.indexOf('(') !== 0 ? FUNCTION + ' ' + v : v);
-        val.__json = fn;
-        return val;
-      } catch (e) {
-        err("\u89E3\u6790\u5931\u8D25:".concat(v, "\n\nerr: ").concat(e));
-        return undefined;
-      }
-    }
-
-    return fn;
-  }
-  function parseJson(json, mode) {
-    return JSON.parse(json, function (k, v) {
-      if (is.Undef(v) || !v.indexOf) return v;
-      return parseFn(v, mode);
-    });
-  }
-
-  var id$2 = 0;
-  function uniqueId() {
-    var num = 370 + ++id$2;
-    return 'F' + Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now())).toString(36) + num.toString(36) + 'c';
-  }
-
-  function deepSet(data, idx, val) {
-    var _data = data,
-        to;
-    (idx || '').split('.').forEach(function (v) {
-      if (to) {
-        if (!_data[to] || _typeof(_data[to]) != 'object') {
-          _data[to] = {};
-        }
-
-        _data = _data[to];
-      }
-
-      to = v;
-    });
-    _data[to] = val;
-    return _data;
-  }
-
-  var NAME$1 = 'FormCreate';
-
   var getRuleInject = function getRuleInject(vm, parent) {
     if (!vm || vm === parent) {
       return;
@@ -2200,7 +2087,7 @@
 
   function $FormCreate(FormCreate, components, directives) {
     return vue.defineComponent({
-      name: NAME$1,
+      name: 'FormCreate' + (FormCreate.isMobile ? 'Mobile' : ''),
       components: components,
       directives: directives,
       props: {
@@ -2328,10 +2215,24 @@
             document.head.appendChild(styleEl);
           }
         });
+        var emit$topForm = debounce(function () {
+          fc.bus.$emit('$loadData.$topForm');
+        }, 100);
+        var emit$form = debounce(function () {
+          fc.bus.$emit('$loadData.$form');
+        }, 100);
         vue.onMounted(function () {
+          if (parent) {
+            fapi.top.bus.$on('$loadData.$form', emit$topForm);
+          }
+
           fc.mounted();
         });
         vue.onBeforeUnmount(function () {
+          if (parent) {
+            fapi.top.bus.$off('$loadData.$form', emit$topForm);
+          }
+
           styleEl && document.head.removeChild(styleEl);
           rmSubForm();
           data.destroyed = true;
@@ -2394,6 +2295,13 @@
 
             data.updateValue = json;
             vm.emit('update:modelValue', value);
+            vue.nextTick(function () {
+              emit$form();
+
+              if (!parent) {
+                emit$topForm();
+              }
+            });
           }
         });
       },
@@ -2481,6 +2389,105 @@
     return [].concat(keyAttrs, _toConsumableArray(normalMerge), _toConsumableArray(toArrayMerge), _toConsumableArray(functionalMerge), arrayAttrs, normalAttrs);
   }
 
+  function format(type, msg, rule) {
+    return "[form-create ".concat(type, "]: ").concat(msg) + (rule ? '\n\nrule: ' + JSON.stringify(rule.getRule ? rule.getRule() : rule) : '');
+  }
+  function err(msg, rule) {
+    console.error(format('err', msg, rule));
+  }
+  function logError(e) {
+    err(e.toString());
+    console.error(e);
+  }
+
+  var PREFIX = '[[FORM-CREATE-PREFIX-';
+  var SUFFIX = '-FORM-CREATE-SUFFIX]]';
+  var $T = '$FN:';
+  var $TX = '$FNX:';
+  var $ON = '$GLOBAL:';
+  var FUNCTION = 'function';
+  function toJson(obj, space) {
+    return JSON.stringify(deepExtend(Array.isArray(obj) ? [] : {}, obj, true), function (key, val) {
+      if (val && val._isVue === true) return undefined;
+
+      if (_typeof(val) !== FUNCTION) {
+        return val;
+      }
+
+      if (val.__json) {
+        return val.__json;
+      }
+
+      if (val.__origin) val = val.__origin;
+      if (val.__emit) return undefined;
+      return PREFIX + val + SUFFIX;
+    }, space);
+  }
+
+  function makeFn(fn) {
+    return new Function('return ' + fn)();
+  }
+
+  function parseFn(fn, mode) {
+    if (fn && is.String(fn) && fn.length > 4) {
+      var v = fn.trim();
+      var flag = false;
+
+      try {
+        if (v.indexOf(SUFFIX) > 0 && v.indexOf(PREFIX) === 0) {
+          v = v.replace(SUFFIX, '').replace(PREFIX, '');
+          flag = true;
+        } else if (v.indexOf($T) === 0) {
+          v = v.replace($T, '');
+          flag = true;
+        } else if (v.indexOf($ON) === 0) {
+          var name = v.replace($ON, '');
+
+          v = function v() {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+
+            var callback = args[0].api.getGlobalEvent(name);
+
+            if (callback) {
+              return callback.call.apply(callback, [this].concat(args));
+            }
+
+            return undefined;
+          };
+
+          v.__json = fn;
+          v.__inject = true;
+          return v;
+        } else if (v.indexOf($TX) === 0) {
+          v = makeFn('function($inject){' + v.replace($TX, '') + '}');
+          v.__json = fn;
+          v.__inject = true;
+          return v;
+        } else if (!mode && v.indexOf(FUNCTION) === 0 && v !== FUNCTION) {
+          flag = true;
+        }
+
+        if (!flag) return fn;
+        var val = makeFn(v.indexOf(FUNCTION) === -1 && v.indexOf('(') !== 0 ? FUNCTION + ' ' + v : v);
+        val.__json = fn;
+        return val;
+      } catch (e) {
+        err("\u89E3\u6790\u5931\u8D25:".concat(v, "\n\nerr: ").concat(e));
+        return undefined;
+      }
+    }
+
+    return fn;
+  }
+  function parseJson(json, mode) {
+    return JSON.parse(json, function (k, v) {
+      if (is.Undef(v) || !v.indexOf) return v;
+      return parseFn(v, mode);
+    });
+  }
+
   function enumerable(value, writable) {
     return {
       value: value,
@@ -2698,7 +2705,28 @@
     pattern: function pattern(a, b) {
       return new RegExp(b, 'g').test(a);
     }
-  };
+  };
+  function deepGet(val, split) {
+    (Array.isArray(split) ? split : (split || '').split('.')).forEach(function (k) {
+      if (val != null) {
+        val = val[k];
+      }
+    });
+    return val;
+  }
+  function extractVar(str) {
+    var regex = /{{\s*(.*?)\s*}}/g;
+    var match;
+    var matches = {};
+
+    while ((match = regex.exec(str)) !== null) {
+      if (match[1]) {
+        matches[match[1]] = true;
+      }
+    }
+
+    return Object.keys(matches);
+  }
 
   function baseRule() {
     return {
@@ -2838,7 +2866,7 @@
 
     var headers = option.headers || {};
     Object.keys(headers).forEach(function (item) {
-      if (headers[item] !== null) {
+      if (headers[item] != null) {
         xhr.setRequestHeader(item, headers[item]);
       }
     });
@@ -2858,12 +2886,7 @@
             fn = parse;
           } else if (parse && is.String(parse)) {
             fn = function fn(v) {
-              parse.split('.').forEach(function (k) {
-                if (v) {
-                  v = v[k];
-                }
-              });
-              return v;
+              return deepGet(v, parse);
             };
           }
 
@@ -3328,6 +3351,18 @@
         findRules(ctx ? ctx.loadChildrenPending() : rule.children);
         return rules;
       },
+      getParentSubRule: function getParentSubRule(id) {
+        var flag = _typeof(id) === 'object';
+        var ctx = flag ? byCtx(id) : h.getCtx(id);
+
+        if (ctx) {
+          var group = ctx.getParentGroup();
+
+          if (group) {
+            return group.rule;
+          }
+        }
+      },
       getChildrenFormData: function getChildrenFormData(id) {
         var rules = api.getChildrenRuleList(id);
         return rules.reduce(function (formData, rule) {
@@ -3337,12 +3372,14 @@
       },
       setChildrenFormData: function setChildrenFormData(id, formData, cover) {
         var rules = api.getChildrenRuleList(id);
-        rules.forEach(function (rule) {
-          if (hasProperty(formData, rule.field)) {
-            rule.value = formData[rule.field];
-          } else if (cover) {
-            rule.value = undefined;
-          }
+        h.deferSyncValue(function () {
+          rules.forEach(function (rule) {
+            if (hasProperty(formData, rule.field)) {
+              rule.value = formData[rule.field];
+            } else if (cover) {
+              rule.value = undefined;
+            }
+          });
         });
       },
       getGlobalEvent: function getGlobalEvent(name) {
@@ -3404,7 +3441,7 @@
         });
       },
       getData: function getData(id, def) {
-        return h.fc.getData(id, def);
+        return h.fc.getLoadData(id, def);
       },
       setData: function setData(id, data) {
         return h.fc.setData(id, data);
@@ -3487,6 +3524,34 @@
     return str.replace(str[0], str[0].toLowerCase());
   }
 
+  function toString(val) {
+    return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
+  }
+
+  var id$2 = 0;
+  function uniqueId() {
+    var num = 370 + ++id$2;
+    return 'F' + Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now())).toString(36) + num.toString(36) + 'c';
+  }
+
+  function deepSet(data, idx, val) {
+    var _data = data,
+        to;
+    (idx || '').split('.').forEach(function (v) {
+      if (to) {
+        if (!_data[to] || _typeof(_data[to]) != 'object') {
+          _data[to] = {};
+        }
+
+        _data = _data[to];
+      }
+
+      to = v;
+    });
+    _data[to] = val;
+    return _data;
+  }
+
   function useRender$1(Render) {
     extend(Render.prototype, {
       initRender: function initRender() {
@@ -3798,6 +3863,9 @@
 
               _this7.onMounted(ctx, vn.el);
             },
+            'fc.updateValue': function fcUpdateValue(data) {
+              _this7.$handle.onUpdateValue(ctx, data);
+            },
             'fc.el': function fcEl(el) {
               ctx.exportEl = el;
 
@@ -4068,6 +4136,52 @@
         fn.__origin = _fn;
         fn.__json = _fn.__json;
         return fn;
+      },
+      loadStrVar: function loadStrVar(str, get) {
+        var _this3 = this;
+
+        if (str && typeof str === 'string' && str.indexOf('{{') > -1 && str.indexOf('}}') > -1) {
+          var vars = extractVar(str);
+          vars.forEach(function (v) {
+            var split = v.split('||');
+            var field = split[0].trim();
+
+            if (field) {
+              var def = (split[1] || '').trim();
+              var val = get ? get(field, def) : _this3.fc.getLoadData(field, def);
+              str = str.replaceAll("{{".concat(v, "}}"), val == null ? '' : val);
+            }
+          });
+        }
+
+        return str;
+      },
+      loadFetchVar: function loadFetchVar(options, get) {
+        var _this4 = this;
+
+        var loadVal = function loadVal(str) {
+          return _this4.loadStrVar(str, get);
+        };
+
+        options.action = loadVal(options.action);
+
+        if (options.headers) {
+          var _headers = {};
+          Object.keys(options.headers).forEach(function (k) {
+            _headers[loadVal(k)] = loadVal(options.headers[k]);
+          });
+          options.headers = _headers;
+        }
+
+        if (options.data) {
+          var _data = {};
+          Object.keys(options.data).forEach(function (k) {
+            _data[loadVal(k)] = loadVal(options.data[k]);
+          });
+          options.data = _data;
+        }
+
+        return options;
       }
     });
   }
@@ -4187,7 +4301,6 @@
       defaultValue: isInput ? deepCopy(defaultValue) : undefined,
       field: rule.field || undefined
     });
-    this.updateType();
     this.updateKey();
     bind(this);
     this.update(handle, true);
@@ -4323,6 +4436,7 @@
     updateType: function updateType() {
       this.originType = this.rule.type;
       this.type = toCase(this.rule.type);
+      this.trueType = this.$handle.getType(this.originType);
     },
     setParser: function setParser(parser) {
       this.parser = parser;
@@ -4411,7 +4525,6 @@
         computed: {},
         el: undef,
         $handle: undef,
-        $render: undef,
         $api: undef,
         vm: undef,
         vNode: undef,
@@ -4467,7 +4580,6 @@
         $render: handle.$render,
         $api: handle.api,
         vm: handle.vm,
-        trueType: handle.getType(this.originType),
         vNode: handle.$render.vNode,
         updated: false,
         cacheValue: this.rule.value
@@ -4475,6 +4587,7 @@
       !init && this.unwatch();
       this.watchTo();
       this.link();
+      this.updateType();
     }
   });
 
@@ -4946,6 +5059,28 @@
           this.setValue(ctx, val, value);
         }
       },
+      onUpdateValue: function onUpdateValue(ctx, data) {
+        var _this = this;
+
+        this.deferSyncValue(function () {
+          var group = ctx.getParentGroup();
+          var subForm = group ? _this.subRuleData[group.id] : null;
+          var subData = {};
+          Object.keys(data || {}).forEach(function (k) {
+            if (subForm && hasProperty(subForm, k)) {
+              subData[k] = data[k];
+            } else if (hasProperty(_this.api.form, k)) {
+              _this.api.form[k] = data[k];
+            } else if (_this.api.top !== _this.api && hasProperty(_this.api.top.form, k)) {
+              _this.api.top.form[k] = data[k];
+            }
+          });
+
+          if (Object.keys(subData).length) {
+            _this.api.setChildrenFormData(group.rule, subData);
+          }
+        });
+      },
       onBaseInput: function onBaseInput(ctx, value) {
         this.setFormData(ctx, value);
         ctx.modelValue = value;
@@ -4977,11 +5112,11 @@
         return this.formData[ctx.id];
       },
       syncForm: function syncForm() {
-        var _this = this;
+        var _this2 = this;
 
         var data = vue.reactive({});
         this.fields().reduce(function (initial, field) {
-          var ctx = _this.getCtx(field);
+          var ctx = _this2.getCtx(field);
 
           initial[field] = vue.toRef(ctx.rule, 'value');
           return initial;
@@ -5030,11 +5165,11 @@
         return (is.Object(value) || Array.isArray(value)) && value === ctx.rule.value;
       },
       refreshUpdate: function refreshUpdate(ctx, val, origin, field) {
-        var _this2 = this;
+        var _this3 = this;
 
         if (is.Function(ctx.rule.update)) {
           var state = invoke(function () {
-            return ctx.rule.update(val, ctx.origin, _this2.api, {
+            return ctx.rule.update(val, ctx.origin, _this3.api, {
               origin: origin || 'change',
               linkField: field
             });
@@ -5058,18 +5193,18 @@
         this.refreshUpdate(ctx, val, origin, field);
       },
       appendLink: function appendLink(ctx) {
-        var _this3 = this;
+        var _this4 = this;
 
         var link = ctx.rule.link;
         is.trueArray(link) && link.forEach(function (field) {
           var fn = function fn() {
-            return _this3.refreshRule(ctx, ctx.rule.value, 'link', field);
+            return _this4.refreshRule(ctx, ctx.rule.value, 'link', field);
           };
 
-          _this3.bus.$on('change-' + field, fn);
+          _this4.bus.$on('change-' + field, fn);
 
           ctx.linkOn.push(function () {
-            return _this3.bus.$off('change-' + field, fn);
+            return _this4.bus.$off('change-' + field, fn);
           });
         });
       },
@@ -5920,39 +6055,37 @@
     var loadData = {
       name: 'loadData',
       _fn: [],
-      created: function created(inject, rule, api) {
+      mounted: function mounted(inject, rule, api) {
         this.deleted(inject);
         var attrs = toArray(inject.getValue());
-        var events = [];
+        var unwatchs = [];
         attrs.forEach(function (attr) {
-          if (attr) {
-            var on = function on() {
-              if (attr.watch !== false) {
-                fc.bus.$off('p.loadData.' + attr.attr, on);
-                fc.bus.$once('p.loadData.' + attr.attr, on);
-              }
+          if (attr && (attr.attr || attr.template)) {
+            var unwatch = fc.watchLoadData(debounce(function (get) {
+              var value;
 
-              var value = undefined;
-
-              if (attr.attr) {
-                value = fc.loadData[attr.attr] || attr["default"];
+              if (attr.template) {
+                value = fc.$handle.loadStrVar(attr.template, get);
+              } else {
+                value = get(attr.attr, attr["default"]);
+              }
 
-                if (attr.copy !== false) {
-                  value = deepCopy(value);
-                }
+              if (attr.copy !== false) {
+                value = deepCopy(value);
               }
 
               deepSet(inject.getProp(), attr.to || 'options', value);
               api.sync(rule);
-            };
+            }, attr.wait || 300));
 
-            events.push(function () {
-              return fc.bus.$off('p.loadData.' + attr.attr, on);
-            });
-            on();
+            if (attr.watch !== false) {
+              unwatchs.push(unwatch);
+            } else {
+              unwatch();
+            }
           }
         });
-        this._fn[inject.id] = events;
+        this._fn[inject.id] = unwatchs;
       },
       deleted: function deleted(inject) {
         if (this._fn[inject.id]) {
@@ -6015,6 +6148,7 @@
 
     function run(inject, rule, api) {
       var option = inject.value;
+      fetchAttr.deleted(inject);
 
       if (is.Function(option)) {
         option = option(rule, api);
@@ -6069,76 +6203,85 @@
         }
       };
 
-      var config = _objectSpread2(_objectSpread2({
-        headers: {}
-      }, option), {}, {
-        onSuccess: function onSuccess(body, flag) {
-          if (check()) return;
-
-          var fn = function fn(v) {
-            return flag ? v : hasProperty(v, 'data') ? v.data : v;
-          };
+      fetchAttr._fn[inject.id] = fc.watchLoadData(debounce(function (get) {
+        var _option = fc.$handle.loadFetchVar(deepCopy(option), get);
 
-          var parse = parseFn(option.parse);
+        var config = _objectSpread2(_objectSpread2({
+          headers: {}
+        }, _option), {}, {
+          onSuccess: function onSuccess(body, flag) {
+            if (check()) return;
 
-          if (is.Function(parse)) {
-            fn = parse;
-          } else if (parse && is.String(parse)) {
-            fn = function fn(v) {
-              parse.split('.').forEach(function (k) {
-                if (v) {
-                  v = v[k];
-                }
-              });
-              return v;
+            var fn = function fn(v) {
+              return flag ? v : hasProperty(v, 'data') ? v.data : v;
             };
-          }
 
-          set(fn(body, rule, api));
-          api.sync(rule);
-        },
-        onError: function onError(e) {
-          set(undefined);
-          if (check()) return;
+            var parse = parseFn(_option.parse);
 
-          (_onError || function (e) {
-            return err(e.message || 'fetch fail ' + option.action);
-          })(e, rule, api);
-        }
-      });
+            if (is.Function(parse)) {
+              fn = parse;
+            } else if (parse && is.String(parse)) {
+              fn = function fn(v) {
+                return deepGet(v, parse);
+              };
+            }
 
-      fc.$handle.beforeFetch(config, {
-        rule: rule,
-        api: api
-      }).then(function () {
-        if (is.Function(option.action)) {
-          option.action(rule, api).then(function (val) {
-            config.onSuccess(val, true);
-          })["catch"](function (e) {
-            config.onError(e);
-          });
-          return;
-        }
+            set(fn(body, rule, api));
+            api.sync(rule);
+          },
+          onError: function onError(e) {
+            set(undefined);
+            if (check()) return;
 
-        invoke(function () {
-          return fc.create.fetch(config, {
-            inject: inject,
-            rule: rule,
-            api: api
+            (_onError || function (e) {
+              return err(e.message || 'fetch fail ' + _option.action);
+            })(e, rule, api);
+          }
+        });
+
+        fc.$handle.beforeFetch(config, {
+          rule: rule,
+          api: api
+        }).then(function () {
+          if (is.Function(_option.action)) {
+            _option.action(rule, api).then(function (val) {
+              config.onSuccess(val, true);
+            })["catch"](function (e) {
+              config.onError(e);
+            });
+
+            return;
+          }
+
+          invoke(function () {
+            return fc.create.fetch(config, {
+              inject: inject,
+              rule: rule,
+              api: api
+            });
           });
         });
-      });
+      }, option.wait || 1000));
     }
 
-    return {
+    var fetchAttr = {
       name: 'fetch',
-      loaded: function loaded() {
+      _fn: [],
+      mounted: function mounted() {
         run.apply(void 0, arguments);
       },
       watch: function watch() {
         run.apply(void 0, arguments);
+      },
+      deleted: function deleted(inject) {
+        if (this._fn[inject.id]) {
+          this._fn[inject.id]();
+        }
+
+        inject.clearProp();
       }
     };
+    return fetchAttr;
   };
 
   var $provider = {
@@ -6166,6 +6309,71 @@
     }
   };
 
+  function getCookie(name) {
+    name = name + '=';
+    var decodedCookie = decodeURIComponent(document.cookie);
+    var cookieArray = decodedCookie.split(';');
+
+    for (var i = 0; i < cookieArray.length; i++) {
+      var cookie = cookieArray[i];
+
+      while (cookie.charAt(0) === ' ') {
+        cookie = cookie.substring(1);
+      }
+
+      if (cookie.indexOf(name) === 0) {
+        cookie = cookie.substring(name.length, cookie.length);
+
+        try {
+          return JSON.parse(cookie);
+        } catch (e) {
+          return cookie;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  function getLocalStorage(name) {
+    var value = localStorage.getItem(name);
+
+    if (value) {
+      try {
+        return JSON.parse(value);
+      } catch (e) {
+        return value;
+      }
+    }
+
+    return null;
+  }
+
+  function baseDriver(driver, name) {
+    if (!name) {
+      return null;
+    }
+
+    var split = name.split('.');
+    var value = driver(split.shift());
+
+    if (!split.length) {
+      return value;
+    }
+
+    if (value == null) {
+      return null;
+    }
+
+    return deepGet(value, split);
+  }
+  function cookieDriver(name) {
+    return baseDriver(getCookie, name);
+  }
+  function localStorageDriver(name) {
+    return baseDriver(getLocalStorage, name);
+  }
+
   function parseProp(name, id) {
     var prop;
 
@@ -6206,6 +6414,7 @@
     var directives = {};
     var modelFields = {};
     var useApps = [];
+    var listener = [];
     var extendApiFn = [config.extendApi];
 
     var providers = _objectSpread2({}, $provider);
@@ -6217,6 +6426,7 @@
     var loadData = vue.reactive({});
     var CreateNode = CreateNodeFactory();
     var formulas = {};
+    var isMobile = config.isMobile === true;
     exportAttrs(config.attrs || {});
 
     function getApi(name) {
@@ -6361,23 +6571,53 @@
       formulas[name] = fn;
     }
 
-    function _emitData(id) {
+    function emitData(id) {
       Object.keys(instance).forEach(function (v) {
         var apis = Array.isArray(instance[v]) ? instance[v] : [instance[v]];
         apis.forEach(function (that) {
-          that.bus.$emit('p.loadData.' + id);
+          that.bus.$emit('$loadData.' + id);
         });
       });
     }
 
     function setData(id, data) {
       loadData[id] = data;
+      emitData(id);
+    }
+
+    function setDataDriver(id, data) {
+      var callback = function callback() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return invoke(function () {
+          return data.apply(void 0, args);
+        });
+      };
 
-      _emitData(id);
+      callback._driver = true;
+      setData(id, callback);
     }
 
     function getData(id, def) {
-      return hasProperty(loadData, id) ? loadData[id] : def;
+      var split = (id || '').split('.');
+      id = split.shift();
+      var field = split.join('.');
+
+      if (hasProperty(loadData, id)) {
+        var val = loadData[id];
+
+        if (val && val._driver) {
+          val = val(field);
+        } else if (split.length) {
+          val = deepGet(val, split);
+        }
+
+        return val == null || val === '' ? def : val;
+      } else {
+        return def;
+      }
     }
 
     function extendApi(fn) {
@@ -6386,8 +6626,14 @@
 
     function removeData(id) {
       delete loadData[id];
+      emitData(id);
+    }
 
-      _emitData(id);
+    function on(name, callback) {
+      listener.push({
+        name: name,
+        callback: callback
+      });
     }
 
     function FormCreate(vm) {
@@ -6402,6 +6648,7 @@
         providers: providers,
         modelFields: modelFields,
         formulas: formulas,
+        isMobile: isMobile,
         rules: vm.props.rule,
         name: vm.props.name || uniqueId(),
         inFor: vm.props.inFor,
@@ -6411,12 +6658,17 @@
         },
         setData: setData,
         getData: getData,
+        emitData: emitData,
         loadData: loadData,
         CreateNode: CreateNode,
         bus: new Mitt(),
         unwatch: null,
         options: vue.ref({}),
-        extendApiFn: extendApiFn
+        extendApiFn: extendApiFn,
+        fetchCache: new WeakMap()
+      });
+      listener.forEach(function (item) {
+        _this.bus.$on(item.name, item.callback);
       });
       vue.nextTick(function () {
         vue.watch(_this.options, function () {
@@ -6441,6 +6693,7 @@
       }
     }
 
+    FormCreate.isMobile = isMobile;
     extend(FormCreate.prototype, {
       init: function init() {
         var _this2 = this;
@@ -6460,6 +6713,159 @@
         this.initOptions();
         this.$handle.init();
       },
+      globalDataDriver: function globalDataDriver(id) {
+        var _this3 = this;
+
+        var split = id.split('.');
+        var key = split.shift();
+        var option = this.options.value.globalData && this.options.value.globalData[key];
+
+        if (option) {
+          if (option.type === 'static') {
+            return deepGet(option.data, split);
+          } else {
+            var val;
+            var res = this.fetchCache.get(option);
+
+            if (res) {
+              if (res.status) {
+                val = deepGet(res.data, split);
+              }
+
+              if (!res.loading) {
+                return val;
+              }
+
+              res.loading = false;
+              this.fetchCache.set(option, res);
+            } else {
+              this.fetchCache.set(option, {
+                status: false
+              });
+            }
+
+            var reload = debounce(function () {
+              unwatch();
+
+              var res = _this3.fetchCache.get(option);
+
+              if (_this3.options.value.globalData && Object.values(_this3.options.value.globalData).indexOf(option) !== -1) {
+                if (res) {
+                  res.loading = true;
+
+                  _this3.fetchCache.set(option, res);
+                }
+
+                _this3.bus.$emit('$loadData.$globalData');
+              } else {
+                _this3.fetchCache["delete"](option);
+              }
+            }, option.wait || 1000);
+
+            var callback = function callback(get, change) {
+              if (change) {
+                reload();
+                return;
+              }
+
+              var options = _this3.$handle.loadFetchVar(copy$1(option), get);
+
+              _this3.$handle.api.fetch(options).then(function (res) {
+                _this3.fetchCache.set(option, {
+                  status: true,
+                  data: res
+                });
+
+                _this3.bus.$emit('$loadData.$globalData');
+              });
+            };
+
+            var unwatch = this.watchLoadData(callback);
+            return val;
+          }
+        }
+      },
+      getLoadData: function getLoadData(id, def) {
+        var val = null;
+
+        if (id != null) {
+          var split = id.split('.');
+          var key = split.shift();
+
+          if (key === '$form') {
+            val = this.$handle.api.top.formData();
+          } else if (key === '$subForm') {
+            val = this.$handle.api.formData();
+          } else if (key === '$options') {
+            val = this.options.value;
+          } else if (key === '$globalData') {
+            val = this.globalDataDriver(split.join('.'));
+            split = [];
+          } else {
+            val = getData(id, def);
+            split = [];
+          }
+
+          if (split.length) {
+            val = deepGet(val, split);
+          }
+        }
+
+        console.log(id, val);
+        return val == null || val === '' ? def : val;
+      },
+      watchLoadData: function watchLoadData(fn) {
+        var _this4 = this;
+
+        var unwatch = {};
+
+        var run = function run(flag) {
+          invoke(function () {
+            fn(get, flag);
+          });
+        };
+
+        var get = function get(id, def) {
+          if (unwatch[id]) {
+            return unwatch[id].val;
+          }
+
+          var val = _this4.getLoadData(id, def);
+
+          var key = id.split('.').shift();
+
+          var callback = function callback() {
+            if (key !== id) {
+              var temp = _this4.getLoadData(id, def);
+
+              if (JSON.stringify(temp) !== JSON.stringify(unwatch[id].val)) {
+                unwatch[id].val = temp;
+                run(true);
+              }
+            } else {
+              run(true);
+            }
+          };
+
+          _this4.bus.$on('$loadData.' + key, callback);
+
+          unwatch[id] = {
+            fn: function fn() {
+              _this4.bus.$off('$loadData.' + key, callback);
+            },
+            val: val
+          };
+          return val;
+        };
+
+        run(false);
+        return function () {
+          Object.keys(unwatch).forEach(function (k) {
+            return unwatch[k].fn();
+          });
+          unwatch = {};
+        };
+      },
       isSub: function isSub() {
         return this.vm.setupState.parent && this.vm.props.extendOption;
       },
@@ -6498,6 +6904,7 @@
       updateOptions: function updateOptions(options) {
         this.options.value = this.mergeOptions(this.options.value, options);
         this.$handle.$manager.updateOptions(this.options.value);
+        this.bus.$emit('$loadData.$options');
       },
       api: function api() {
         return this.$handle.api;
@@ -6509,6 +6916,8 @@
         this.$handle.mounted();
       },
       unmount: function unmount() {
+        var _this5 = this;
+
         if (this.name) {
           if (this.inFor) {
             var idx = instance[this.name].indexOf(this);
@@ -6518,14 +6927,17 @@
           }
         }
 
+        listener.forEach(function (item) {
+          _this5.bus.$off(item.name, item.callback);
+        });
         this.unwatch && this.unwatch();
         this.$handle.reloadRule([]);
       },
       updated: function updated() {
-        var _this3 = this;
+        var _this6 = this;
 
         this.$handle.bindNextTick(function () {
-          return _this3.bus.$emit('next-tick', _this3.$handle.api);
+          return _this6.bus.$emit('next-tick', _this6.$handle.api);
         });
       }
     });
@@ -6536,6 +6948,7 @@
         ui: config.ui,
         extendApi: extendApi,
         getData: getData,
+        setDataDriver: setDataDriver,
         setData: setData,
         removeData: removeData,
         maker: maker,
@@ -6557,17 +6970,20 @@
         parseJson: parseJson,
         toJson: toJson,
         useApp: useApp,
-        getApi: getApi
+        getApi: getApi,
+        on: on
       });
     }
 
     function useStatic(formCreate) {
       extend(formCreate, {
         create: create,
+        isMobile: isMobile,
         install: function install(app, options) {
           globalConfig = _objectSpread2(_objectSpread2({}, globalConfig), options || {});
-          if (app._installedFormCreate === true) return;
-          app._installedFormCreate = true;
+          var key = '_installedFormCreate_' + config.ui;
+          if (app[key] === true) return;
+          app[key] = true;
 
           var $formCreate = function $formCreate(rules) {
             var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -6576,7 +6992,8 @@
 
           useAttr($formCreate);
           app.config.globalProperties.$formCreate = $formCreate;
-          app.component('FormCreate', $form());
+          var $component = $form();
+          app.component($component.name, $component);
           useApps.forEach(function (v) {
             invoke(function () {
               return v(formCreate, app);
@@ -6588,6 +7005,8 @@
 
     useAttr(create);
     useStatic(create);
+    setDataDriver('$cookie', cookieDriver);
+    setDataDriver('$localStorage', localStorageDriver);
     CreateNode.use({
       fragment: 'fcFragment'
     });
@@ -6612,7 +7031,10 @@
       inherit.formulas && extend(formulas, inherit.formulas);
     }
 
-    return create;
+    var FcComponent = $form();
+    setPrototypeOf(FcComponent, create);
+    FcComponent.util = create;
+    return FcComponent;
   }
 
   var DEFAULT_FORMATS = {
@@ -7119,6 +7541,7 @@
       return this.$r({
         type: 'button',
         props: resetBtn,
+        "class": '_fc-reset-btn',
         style: {
           width: resetBtn.width
         },
@@ -7144,6 +7567,7 @@
       return this.$r({
         type: 'button',
         props: submitBtn,
+        "class": '_fc-submit-btn',
         style: {
           width: submitBtn.width
         },
@@ -7240,7 +7664,7 @@
     return maker;
   }
 
-  var css_248z = ".form-create .form-create .el-form-item{margin-bottom:22px}.form-create{width:100%}.form-create .fc-none,.form-create.is-preview .fc-clock{display:none!important}.form-create.is-preview .el-form-item.is-required>.el-form-item__label-wrap>.el-form-item__label:before,.form-create.is-preview .el-form-item.is-required>.el-form-item__label:before{content:\"\"!important}";
+  var css_248z = ".form-create .form-create .el-form-item{margin-bottom:22px}.form-create{width:100%}.form-create .fc-none,.form-create.is-preview .el-form-item.is-required>.el-form-item__label-wrap>.el-form-item__label:before,.form-create.is-preview .el-form-item.is-required>.el-form-item__label:before,.form-create.is-preview .fc-clock{display:none!important}.fc-wrap-left .el-form-item__label{justify-content:flex-start;justify-content:flex-end}.fc-wrap-top.el-form-item{display:block}.fc-wrap-top.el-form-item .el-form-item__label{display:block;height:auto;line-height:22px;margin-bottom:8px;text-align:left}.el-form--large .fc-wrap-top.el-form-item .el-form-item__label{line-height:22px;margin-bottom:12px}.el-form--default .fc-wrap-top.el-form-item .el-form-item__label{line-height:22px;margin-bottom:8px}.el-form--small .fc-wrap-top.el-form-item .el-form-item__label{line-height:20px;margin-bottom:4px}";
   styleInject(css_248z);
 
   function tidyBtnProp(btn, def) {
@@ -7493,7 +7917,7 @@
   function elmFormCreate() {
     return FormCreateFactory({
       ui: 'element-ui',
-      version: '3.1.35',
+      version: '3.2.1',
       manager: manager,
       extendApi: extendApi,
       install: install,