@vue-start/pro 0.2.0 → 0.3.2

package/dist/index.js

@@ -7,6 +7,7 @@ var lodash = require('lodash');
 var rxjs = require('rxjs');
 var hooks = require('@vue-start/hooks');
 var request = require('@vue-start/request');
+var vueRouter = require('vue-router');
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -82,6 +83,50 @@ function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+function _isSlot$1(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+var proGridProps = function proGridProps() {
+  return {
+    row: {
+      type: Object,
+      "default": undefined
+    },
+    col: {
+      type: Object
+    },
+    items: {
+      type: Array
+    }
+  };
+};
+
+var createGrid = function createGrid(Row, Col) {
+  return vue.defineComponent({
+    props: _objectSpread2({}, proGridProps()),
+    setup: function setup(props) {
+      return function () {
+        var _slot;
+
+        return vue.createVNode(Row, props.row, _isSlot$1(_slot = lodash.map(props.items, function (item) {
+          return vue.createVNode(Col, vue.mergeProps({
+            "key": item.rowKey
+          }, props.col, item.col), {
+            "default": function _default() {
+              return [item.vNode];
+            }
+          });
+        })) ? _slot : {
+          "default": function _default() {
+            return [_slot];
+          }
+        });
+      };
+    }
+  });
+};
+
 var createUseRequestActor = function createUseRequestActor(filterFun) {
   return function (actors, callback) {
     var _useRequestProvide = request.useRequestProvide(),
@@ -154,17 +199,192 @@ var useComposeRequestActor = function useComposeRequestActor(actors, options, ca
   }, []);
 };
 
-/**
- * 获取Column的valueType，默认"text"
- * @param column
+var treeDefaultNames = {
+  children: "children",
+  label: "label",
+  value: "value"
+};
+/**
+ * 根据value从treeData中找到对象
+ * @param data
+ * @param value
+ * @param fieldNames
+ * @param cb 对象：同步   方法：回调，可以理解为异步
+ */
+
+var findTargetInTree = function findTargetInTree(data, value, fieldNames, cb) {
+  var index = lodash.findIndex(data, function (item) {
+    return lodash.get(item, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || treeDefaultNames.value) === value;
+  });
+
+  if (index > -1) {
+    if (lodash.isFunction(cb)) {
+      cb(index, data[index], data);
+    } else {
+      cb.index = index;
+      cb.target = data[index];
+      cb.list = data;
+    }
+
+    return;
+  }
+
+  lodash.forEach(data, function (item) {
+    var children = lodash.get(item, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.children) || treeDefaultNames.children);
+
+    if (lodash.size(children) > 0) {
+      findTargetInTree(children, value, fieldNames, cb);
+    }
+  });
+};
+/**
+ * 根据value从treeData中找出对象及父列表
+ * @param data
+ * @param value
+ * @param fieldNames
+ * @param cb
+ * @param parent
+ */
+
+var findTargetListInTree = function findTargetListInTree(data, value, fieldNames, cb) {
+  var parent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
+  var target = lodash.find(data, function (item) {
+    return lodash.get(item, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value) || treeDefaultNames.value) === value;
+  });
+
+  if (target) {
+    if (lodash.isFunction(cb)) {
+      cb([].concat(_toConsumableArray(parent), [target]));
+    } else {
+      cb.list = [].concat(_toConsumableArray(parent), [target]);
+    }
+
+    return;
+  }
+
+  lodash.forEach(data, function (item) {
+    var children = lodash.get(item, (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.children) || treeDefaultNames.children);
+
+    if (lodash.size(children) > 0) {
+      findTargetListInTree(children, value, fieldNames, cb, [].concat(_toConsumableArray(parent), [item]));
+    }
+  });
+};
+
+/**
+ * 剔除showState或showStateRules规则为!true的值
+ * @param values
+ * @param showState
+ * @param showStateRules
+ */
+
+var getValidValues = function getValidValues(values, showState, showStateRules) {
+  if (showState) {
+    var invalidKeys = lodash.filter(lodash.keys(showState), function (key) {
+      return !showState[key];
+    });
+    return lodash.omit(values, invalidKeys);
+  }
+
+  if (showStateRules) {
+    var _invalidKeys = lodash.filter(lodash.keys(showStateRules), function (key) {
+      return !showStateRules[key](values);
+    });
+
+    return lodash.omit(values, _invalidKeys);
+  }
+
+  return values;
+};
+/**
+ * string类型的path转为arr
+ * @param path
+ */
+
+var convertPathToList = function convertPathToList(path) {
+  if (!path) {
+    return undefined;
+  }
+
+  if (lodash.isArray(path)) {
+    return path;
+  }
+
+  if (path && lodash.isString(path) && path.indexOf(".") > 0) {
+    return lodash.split(path, ".");
+  }
+
+  return [path];
+};
+/**
+ * 将listState 中的数据通过id merge到 list item中
+ * ps：数组会替换
+ * 注意：mergeWith 会改变原始对象
+ * @param list
+ * @param listState
+ * @param id
+ */
+
+var mergeStateToList = function mergeStateToList(list, listState, id) {
+  if (!listState || !id) {
+    return list;
+  }
+
+  return lodash.map(list, function (item) {
+    var idName = lodash.isFunction(id) ? id(item) : id; //如果listState中有值，merge处理
+
+    var stateData = lodash.get(listState, idName);
+
+    if (!stateData || lodash.isEmpty(stateData) || lodash.isFunction(stateData) || !lodash.isObject(stateData)) {
+      return item;
+    } //只有是对象（键值对）才合并
+
+
+    return lodash.mergeWith(item, stateData, function (objValue, srcValue) {
+      //如果是数组，替换
+      if (lodash.isArray(objValue) || lodash.isArray(srcValue)) {
+        return srcValue;
+      }
+    });
+  });
+};
+
+/**
+ * 唯一id
+ */
+
+var generateId = function generateId() {
+  return Number(Math.random().toString().substr(3, 3) + Date.now()).toString(36);
+};
+/**
+ * ref 传递
+ */
+
+var createExpose = function createExpose(methods, targetRef) {
+  return lodash.reduce(methods, function (pair, method) {
+    return _objectSpread2(_objectSpread2({}, pair), {}, _defineProperty({}, method, function () {
+      var _targetRef$value, _targetRef$value$meth;
+
+      for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
+        params[_key] = arguments[_key];
+      }
+
+      return (_targetRef$value = targetRef.value) === null || _targetRef$value === void 0 ? void 0 : (_targetRef$value$meth = _targetRef$value[method]) === null || _targetRef$value$meth === void 0 ? void 0 : _targetRef$value$meth.call.apply(_targetRef$value$meth, [_targetRef$value].concat(params));
+    }));
+  }, {});
+};
+
+/**
+ * 获取Column的valueType，默认"text"
+ * @param column
  */
 
 var getColumnValueType = function getColumnValueType(column) {
   return column.formValueType || column.valueType || "text";
 };
-/**
- *获取Column的FormItem name
- * @param column
+/**
+ *获取Column的FormItem name
+ * @param column
  */
 
 var getColumnFormItemName = function getColumnFormItemName(column) {
@@ -172,12 +392,12 @@ var getColumnFormItemName = function getColumnFormItemName(column) {
 
   return ((_column$formItemProps = column.formItemProps) === null || _column$formItemProps === void 0 ? void 0 : _column$formItemProps.name) || column.dataIndex;
 };
-/**
- * 根据Column生成FormItem VNode
- * formFieldProps中的slots参数会以v-slots的形式传递到FormItem的录入组件（子组件）中
- * @param formElementMap
- * @param column
- * @param needRules
+/**
+ * 根据Column生成FormItem VNode
+ * formFieldProps中的slots参数会以v-slots的形式传递到FormItem的录入组件（子组件）中
+ * @param formElementMap
+ * @param column
+ * @param needRules
  */
 
 var getFormItemEl = function getFormItemEl(formElementMap, column) {
@@ -202,11 +422,11 @@ var getFormItemEl = function getFormItemEl(formElementMap, column) {
     showProps: column.showProps
   }), (_column$formFieldProp = column.formFieldProps) === null || _column$formFieldProp === void 0 ? void 0 : _column$formFieldProp.slots);
 };
-/**
- *  根据Column生成Item VNode
- * @param elementMap
- * @param column
- * @param value
+/**
+ *  根据Column生成Item VNode
+ * @param elementMap
+ * @param column
+ * @param value
  */
 
 var getItemEl = function getItemEl(elementMap, column, value) {
@@ -238,44 +458,44 @@ var RequestAction = {
 
 var proModuleProps = function proModuleProps() {
   return {
-    /**
-     * module状态
+    /**
+     * module状态
      */
     state: {
       type: Object
     },
 
-    /**
-     * 配置（静态）
+    /**
+     * 配置（静态）
      */
     columns: {
       type: Array
     },
 
-    /**
-     * 配置（动态）
-     * columns动态属性兼容
+    /**
+     * 配置（动态）
+     * columns动态属性兼容
      */
     columnState: {
       type: Object
     },
 
-    /**
-     * 展示组件集
+    /**
+     * 展示组件集
      */
     elementMap: {
       type: Object
     },
 
-    /**
-     * 录入组件集
+    /**
+     * 录入组件集
      */
     formElementMap: {
       type: Object
     },
 
-    /**
-     * requests
+    /**
+     * requests
      */
     requests: {
       type: Array
@@ -286,27 +506,15 @@ var proModuleProps = function proModuleProps() {
 var ProModule = vue.defineComponent({
   props: _objectSpread2({}, proModuleProps()),
   setup: function setup(props, _ref) {
-    var slots = _ref.slots;
+    var slots = _ref.slots,
+        expose = _ref.expose;
 
-    /**
-     * columns columnState 合并
+    /**
+     * columns columnState 合并
      */
     var columns = vue.computed(function () {
-      return lodash.map(props.columns, function (item) {
-        //如果columnState中有值，merge处理
-        var mapData = lodash.get(props.columnState, getColumnFormItemName(item));
-
-        if (lodash.isObject(mapData) && !lodash.isEmpty(mapData) && !lodash.isArray(mapData) && !lodash.isFunction(mapData)) {
-          //合并
-          return lodash.mergeWith(item, mapData, function (objValue, srcValue) {
-            //如果是数组，替换
-            if (lodash.isArray(objValue) || lodash.isArray(srcValue)) {
-              return srcValue;
-            }
-          });
-        }
-
-        return item;
+      return mergeStateToList(props.columns, props.columnState, function (item) {
+        return getColumnFormItemName(item);
       });
     });
     /*********************************** 渲染组件 ***************************************/
@@ -460,6 +668,10 @@ var ProModule = vue.defineComponent({
       requests: props.requests,
       sendRequest: sendRequest
     });
+    expose({
+      sendEvent: sendEvent,
+      sendRequest: sendRequest
+    });
     return function () {
       var _slots$default;
 
@@ -542,18 +754,23 @@ exports.CurdAddAction = void 0;
   CurdAddAction["CONTINUE"] = "CONTINUE";
 })(exports.CurdAddAction || (exports.CurdAddAction = {}));
 
+var defaultPage = {
+  page: 1,
+  pageSize: 10
+};
+
 var proCurdProps = function proCurdProps() {
   return {
-    /**
-     * 列表 或 详情 的唯一标识
+    /**
+     * 列表 或 详情 的唯一标识
      */
     rowKey: {
       type: String,
       "default": "id"
     },
 
-    /**
-     * operates
+    /**
+     * operates
      */
     operates: {
       type: Array
@@ -578,17 +795,18 @@ var proCurdProps = function proCurdProps() {
 var Curd = vue.defineComponent({
   props: _objectSpread2({}, proCurdProps()),
   setup: function setup(props, _ref) {
-    var slots = _ref.slots;
+    var slots = _ref.slots,
+        expose = _ref.expose;
 
     var _ref2 = useProModule(),
         columns = _ref2.columns,
         state = _ref2.state,
         sendEvent = _ref2.sendEvent,
         sendRequest = _ref2.sendRequest;
-    /**
-     * 排序
-     * @param list
-     * @param propName
+    /**
+     * 排序
+     * @param list
+     * @param propName
      */
 
 
@@ -597,8 +815,8 @@ var Curd = vue.defineComponent({
         return lodash.get(item, propName);
       });
     };
-    /**
-     * 非 hideInForm columns
+    /**
+     * 非 hideInForm columns
      */
 
 
@@ -607,8 +825,8 @@ var Curd = vue.defineComponent({
         return !item.hideInForm;
       }), "formSort");
     });
-    /**
-     * 非 hideInDetail columns
+    /**
+     * 非 hideInDetail columns
      */
 
     var descColumns = vue.computed(function () {
@@ -616,8 +834,8 @@ var Curd = vue.defineComponent({
         return !item.hideInDetail;
       }), "descSort");
     });
-    /**
-     *  非 hideInTable columns
+    /**
+     *  非 hideInTable columns
      */
 
     var tableColumns = vue.computed(function () {
@@ -625,8 +843,8 @@ var Curd = vue.defineComponent({
         return !item.hideInTable;
       }), "tableSort");
     });
-    /**
-     * search columns
+    /**
+     * search columns
      */
 
     var searchColumns = vue.computed(function () {
@@ -647,12 +865,18 @@ var Curd = vue.defineComponent({
     var sendCurdEvent = function sendCurdEvent(event) {
       sendEvent({
         type: event.action,
-        payload: lodash.omit(event, "action")
+        payload: lodash.omit(event, "action", "source"),
+        source: event.source
       });
     }; //事件订阅
 
 
     useModuleEvent(function (event) {
+      //如果当前event存在source 不处理
+      if (event.source) {
+        return;
+      }
+
       var action = event.type;
       var _ref3 = event.payload,
           type = _ref3.type,
@@ -729,6 +953,11 @@ var Curd = vue.defineComponent({
       descProps: descProps,
       modalProps: modalProps
     });
+    expose({
+      sendCurdEvent: sendCurdEvent,
+      getOperate: getOperate,
+      refreshList: handleSearch
+    });
     return function () {
       var _slots$default;
 
@@ -745,7 +974,10 @@ var ProCurd = vue.defineComponent({
   setup: function setup(props, _ref4) {
     var _curdOperateOpts;
 
-    var slots = _ref4.slots;
+    var slots = _ref4.slots,
+        expose = _ref4.expose;
+    var moduleRef = vue.ref();
+    var curdRef = vue.ref();
     var curdState = props.curdState || vue.reactive({
       detailData: {}
     });
@@ -797,183 +1029,913 @@ var ProCurd = vue.defineComponent({
       },
       label: "删除"
     }), _curdOperateOpts);
+    /****************************** columns分类 *************************************/
+
     var requests = lodash.map(props.operates, function (item) {
       var curdOpts = lodash.get(curdOperateOpts, item.action);
       return _objectSpread2(_objectSpread2({}, curdOpts), item);
     });
     var moduleKeys = lodash.keys(lodash.omit(ProModule.props, "state", "requests"));
+    expose({
+      moduleRef: moduleRef,
+      curdRef: curdRef
+    });
     return function () {
-      return vue.h(ProModule, _objectSpread2(_objectSpread2({}, lodash.pick(props, moduleKeys)), {}, {
-        state: curdState,
-        requests: requests
-      }), vue.h(Curd, _objectSpread2(_objectSpread2({}, lodash.omit.apply(void 0, [props].concat(_toConsumableArray(moduleKeys), ["curdState", "operates"]))), {}, {
-        operates: requests
-      }), slots));
+      return vue.createVNode(ProModule, vue.mergeProps({
+        "ref": moduleRef
+      }, lodash.pick(props, moduleKeys), {
+        "state": curdState,
+        "requests": requests
+      }), {
+        "default": function _default() {
+          return [vue.createVNode(Curd, vue.mergeProps({
+            "ref": curdRef
+          }, lodash.omit.apply(void 0, [props].concat(_toConsumableArray(moduleKeys), ["curdState", "operates"])), {
+            "operates": requests
+          }), slots)];
+        }
+      });
     };
   }
 });
 
-var ProFormKey = Symbol("pro-form");
-var useProForm = function useProForm() {
-  return vue.inject(ProFormKey);
-};
-
-var provideProForm = function provideProForm(ctx) {
-  vue.provide(ProFormKey, ctx);
-};
-
-var proFormProps = function proFormProps() {
+var modalCurdProps = function modalCurdProps() {
   return {
-    /**
-     * 同 antd 或 element  form中的model
-     */
-    model: {
+    defaultAddRecord: {
       type: Object
-    },
+    }
+  };
+};
 
-    /**
-     *  子组件是否只读样式
-     */
-    readonly: {
-      type: Boolean,
-      "default": undefined
-    },
+/**
+ * 事件处理
+ */
+var ModalCurd = vue.defineComponent({
+  props: _objectSpread2({}, modalCurdProps()),
+  setup: function setup(props) {
+    var _listProps$value;
+
+    var _useProModule = useProModule(),
+        dispatch = _useProModule.dispatch,
+        sendRequest = _useProModule.sendRequest;
+
+    var _useProCurd = useProCurd(),
+        rowKey = _useProCurd.rowKey,
+        curdState = _useProCurd.curdState,
+        listProps = _useProCurd.listProps,
+        getOperate = _useProCurd.getOperate,
+        refreshList = _useProCurd.refreshList;
+
+    var pageState = (listProps === null || listProps === void 0 ? void 0 : (_listProps$value = listProps.value) === null || _listProps$value === void 0 ? void 0 : _listProps$value.pageState) || vue.reactive(_objectSpread2({}, defaultPage)); //发送详情接口
+
+    var sendDetailRequest = function sendDetailRequest(record) {
+      var operateOpts = getOperate(exports.CurdAction.DETAIL);
+
+      if (operateOpts !== null && operateOpts !== void 0 && operateOpts.actor) {
+        //如果注册了详情接口 发起请求
+        sendRequest(exports.CurdAction.DETAIL, record, rowKey);
+      } else {
+        //直接使用当前record作为详情数据
+        dispatch({
+          type: "detailData",
+          payload: record
+        });
+      }
+    };
 
-    /**
-     *  FormComponent 根据此项来确定组件是否显示
-     *  rules 根据rules中方法生成showState对象
-     */
-    showState: {
-      type: Object
-    },
-    showStateRules: {
-      type: Object
-    },
+    var dealDetail = function dealDetail(subAction, _ref) {
+      var record = _ref.record;
 
-    /**
-     * 是否只读
-     */
-    readonlyState: {
-      type: Object
-    },
-    readonlyStateRules: {
-      type: Object
-    },
+      if (subAction === exports.CurdSubAction.EMIT) {
+        dispatch({
+          type: "mode",
+          payload: exports.CurdCurrentMode.DETAIL
+        });
+        sendDetailRequest(record);
+      }
+    };
 
-    /**
-     * 是否disabled
-     */
-    disableState: {
-      type: Object
-    },
-    disableStateRules: {
-      type: Object
-    },
+    var dealAdd = function dealAdd(subAction) {
+      if (subAction === exports.CurdSubAction.EMIT) {
+        dispatch({
+          type: "mode",
+          payload: exports.CurdCurrentMode.ADD
+        });
+        dispatch({
+          type: "detailData",
+          payload: props.defaultAddRecord || {}
+        });
+      } else if (subAction === exports.CurdSubAction.SUCCESS) {
+        //添加成功
+        pageState.page = 1; //重置当前页数
+        //刷新List
 
-    /**
-     *
-     */
-    columns: {
-      type: Array
-    },
+        refreshList({
+          page: 1
+        });
 
-    /**
-     * 展示控件集合，readonly模式下使用这些组件渲染
-     */
-    elementMap: {
-      type: Object
-    },
+        if (curdState.addAction === exports.CurdAddAction.CONTINUE) {
+          dispatch({
+            type: "detailData",
+            payload: props.defaultAddRecord || {}
+          });
+        } else {
+          dispatch({
+            type: "mode",
+            payload: undefined
+          });
+        }
+      }
+    };
 
-    /**
-     * 录入控件集合
-     */
-    formElementMap: {
-      type: Object
-    },
+    var dealEdit = function dealEdit(subAction, _ref2) {
+      var record = _ref2.record;
 
-    /**
-     * 是否启用rules验证
-     */
-    needRules: {
-      type: Boolean,
-      "default": true
-    },
+      if (subAction === exports.CurdSubAction.EMIT) {
+        dispatch({
+          type: "mode",
+          payload: exports.CurdCurrentMode.EDIT
+        });
+        sendDetailRequest(record);
+      } else if (subAction === exports.CurdSubAction.SUCCESS) {
+        // 编辑成功
+        dispatch({
+          type: "mode",
+          payload: undefined
+        }); //刷新列表
+
+        refreshList();
+      }
+    };
 
-    /**
-     * provide传递
-     */
-    provideExtra: {
+    var dealDelete = function dealDelete(subAction) {
+      if (subAction === exports.CurdSubAction.SUCCESS) {
+        //刷新列表
+        refreshList();
+      }
+    };
+
+    useModuleEvent(function (_ref3) {
+      var type = _ref3.type,
+          payload = _ref3.payload,
+          source = _ref3.source;
+
+      if (source) {
+        return;
+      }
+
+      var action = type;
+      var subAction = payload === null || payload === void 0 ? void 0 : payload.type;
+      var record = payload === null || payload === void 0 ? void 0 : payload.record;
+
+      if (action === RequestAction.Success) {
+        //覆盖
+        action = lodash.get(payload, ["requestOpts", "action"]);
+        subAction = exports.CurdSubAction.SUCCESS;
+      }
+
+      switch (action) {
+        case exports.CurdAction.DETAIL:
+          dealDetail(subAction, {
+            record: record
+          });
+          break;
+
+        case exports.CurdAction.ADD:
+          dealAdd(subAction);
+          break;
+
+        case exports.CurdAction.EDIT:
+          dealEdit(subAction, {
+            record: record
+          });
+          break;
+
+        case exports.CurdAction.DELETE:
+          dealDelete(subAction);
+          break;
+      }
+    });
+    return function () {
+      return null;
+    };
+  }
+});
+var ProModalCurd = vue.defineComponent({
+  props: _objectSpread2(_objectSpread2({}, ProCurd.props), ModalCurd.props),
+  setup: function setup(props, _ref4) {
+    var slots = _ref4.slots;
+    var invalidKeys = lodash.keys(ModalCurd.props);
+    return function () {
+      var _slots$default;
+
+      return vue.createVNode(ProCurd, lodash.omit(props, invalidKeys), {
+        "default": function _default() {
+          return [vue.createVNode(ModalCurd, lodash.pick(props, invalidKeys), null), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+        }
+      });
+    };
+  }
+});
+
+var pageCurdProps = function pageCurdProps() {
+  return {
+    defaultAddRecord: {
       type: Object
+    },
+    routeBack: {
+      type: Function
     }
   };
 };
 
-var ProForm = vue.defineComponent({
-  props: _objectSpread2({}, proFormProps()),
-  setup: function setup(props, _ref) {
-    var slots = _ref.slots;
-    var formState = props.model || vue.reactive({}); //组件状态相关
+var PageCurd = vue.defineComponent({
+  props: _objectSpread2({}, pageCurdProps()),
+  setup: function setup(props) {
+    var router = vueRouter.useRouter();
+    var route = vueRouter.useRoute();
+
+    var _useProModule = useProModule(),
+        dispatch = _useProModule.dispatch,
+        sendRequest = _useProModule.sendRequest;
+
+    var _useProCurd = useProCurd(),
+        rowKey = _useProCurd.rowKey,
+        curdState = _useProCurd.curdState;
+
+    var dealList = function dealList(subAction) {
+      if (subAction === exports.CurdSubAction.PAGE) {
+        //其实就是个重置过程
+        dispatch({
+          type: "mode",
+          payload: undefined
+        });
+        dispatch({
+          type: "detailData",
+          payload: {}
+        });
+        dispatch({
+          type: "detailLoading",
+          payload: false
+        });
+        dispatch({
+          type: "addAction",
+          payload: undefined
+        });
+      }
+    };
 
-    var showState = props.showState || vue.reactive({});
-    var readonlyState = props.readonlyState || vue.reactive({});
-    var disableState = props.disableState || vue.reactive({}); //formState改变情况下，更新 showState，readonlyState，disableState状态
+    var dealDetail = function dealDetail(subAction, _ref) {
+      var record = _ref.record;
 
-    hooks.useEffect(function () {
-      if (props.showStateRules) {
-        lodash.forEach(props.showStateRules, function (fn, key) {
-          showState[key] = fn(formState);
+      if (subAction === exports.CurdSubAction.EMIT) {
+        router.push({
+          path: "".concat(route.path, "/detail"),
+          query: lodash.pick(record, rowKey)
+        });
+      } else if (subAction === exports.CurdSubAction.PAGE) {
+        dispatch({
+          type: "mode",
+          payload: exports.CurdCurrentMode.DETAIL
         });
+        sendRequest(exports.CurdAction.DETAIL, route.query, rowKey);
       }
+    };
 
-      if (props.readonlyStateRules) {
-        lodash.forEach(props.readonlyStateRules, function (fn, key) {
-          readonlyState[key] = fn(formState);
+    var dealAdd = function dealAdd(subAction) {
+      if (subAction === exports.CurdSubAction.EMIT) {
+        router.push({
+          path: "".concat(route.path, "/add")
         });
+      } else if (subAction === exports.CurdSubAction.PAGE) {
+        dispatch({
+          type: "mode",
+          payload: exports.CurdCurrentMode.ADD
+        });
+        dispatch({
+          type: "detailData",
+          payload: props.defaultAddRecord || {}
+        });
+      } else if (subAction === exports.CurdSubAction.SUCCESS) {
+        if (curdState.addAction === exports.CurdAddAction.CONTINUE) {
+          dispatch({
+            type: "detailData",
+            payload: props.defaultAddRecord || {}
+          });
+        } else {
+          props.routeBack ? props.routeBack(exports.CurdAction.ADD) : router.go(-1);
+        }
       }
+    };
 
-      if (props.disableStateRules) {
-        lodash.forEach(props.disableStateRules, function (fn, key) {
-          disableState[key] = fn(formState);
+    var dealEdit = function dealEdit(subAction, _ref2) {
+      var record = _ref2.record;
+
+      if (subAction === exports.CurdSubAction.EMIT) {
+        router.push({
+          path: "".concat(route.path, "/edit"),
+          query: lodash.pick(record, rowKey)
+        });
+      } else if (subAction === exports.CurdSubAction.PAGE) {
+        dispatch({
+          type: "mode",
+          payload: exports.CurdCurrentMode.EDIT
         });
+        sendRequest(exports.CurdAction.DETAIL, route.query, rowKey);
+      } else if (subAction === exports.CurdSubAction.SUCCESS) {
+        props.routeBack ? props.routeBack(exports.CurdAction.EDIT) : router.go(-1);
       }
-    }, formState); //转换为ref对象
+    };
 
-    var readonly = vue.computed(function () {
-      return props.readonly;
-    });
-    /**
-     * 将columns 转化为FormItem VNode对象
-     */
+    useModuleEvent(function (_ref3) {
+      var type = _ref3.type,
+          payload = _ref3.payload,
+          source = _ref3.source;
 
-    var formItemVNodes = vue.computed(function () {
-      if (lodash.size(props.formElementMap) <= 0) {
-        return [];
+      if (source) {
+        return;
       }
 
-      return lodash.map(props.columns, function (item) {
-        return getFormItemEl(props.formElementMap, item, props.needRules);
-      });
+      var action = type;
+      var subAction = payload === null || payload === void 0 ? void 0 : payload.type;
+      var record = payload === null || payload === void 0 ? void 0 : payload.record;
+
+      if (action === RequestAction.Success) {
+        //覆盖
+        action = lodash.get(payload, ["requestOpts", "action"]);
+        subAction = exports.CurdSubAction.SUCCESS;
+      }
+
+      switch (action) {
+        case exports.CurdAction.LIST:
+          dealList(subAction);
+          break;
+
+        case exports.CurdAction.DETAIL:
+          dealDetail(subAction, {
+            record: record
+          });
+          break;
+
+        case exports.CurdAction.ADD:
+          dealAdd(subAction);
+          break;
+
+        case exports.CurdAction.EDIT:
+          dealEdit(subAction, {
+            record: record
+          });
+          break;
+      }
     });
-    provideProForm(_objectSpread2({
-      formState: formState,
-      showState: showState,
-      readonlyState: readonlyState,
-      disableState: disableState,
-      //
-      elementMap: props.elementMap,
-      //
-      readonly: readonly,
-      //
-      formItemVNodes: formItemVNodes
-    }, props.provideExtra));
+    return function () {
+      return null;
+    };
+  }
+});
+var ProPageCurd = vue.defineComponent({
+  props: _objectSpread2(_objectSpread2({}, ProCurd.props), PageCurd.props),
+  setup: function setup(props, _ref4) {
+    var slots = _ref4.slots;
+    var invalidKeys = lodash.keys(PageCurd.props);
     return function () {
       var _slots$default;
 
-      return (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
+      return vue.createVNode(ProCurd, lodash.omit(props, invalidKeys), {
+        "default": function _default() {
+          return [vue.createVNode(PageCurd, lodash.pick(props, invalidKeys), null), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+        }
+      });
     };
   }
 });
 
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+
+var createCurdDesc = function createCurdDesc(Descriptions, DescriptionsItem) {
+  return vue.defineComponent({
+    props: _objectSpread2({}, Descriptions.props),
+    setup: function setup(props, _ref) {
+      var slots = _ref.slots;
+
+      var _useProModule = useProModule(),
+          getItemVNode = _useProModule.getItemVNode;
+
+      var _useProCurd = useProCurd(),
+          curdState = _useProCurd.curdState,
+          descColumns = _useProCurd.descColumns;
+
+      var descVNodes = vue.computed(function () {
+        return lodash.map(descColumns.value, function (item) {
+          var _slot;
+
+          var value = lodash.get(curdState.detailData, item.dataIndex);
+          return vue.createVNode(DescriptionsItem, vue.mergeProps({
+            "key": item.dataIndex,
+            "label": item.title
+          }, lodash.get(item.extra, "desc")), _isSlot(_slot = getItemVNode(item, value)) ? _slot : {
+            "default": function _default() {
+              return [_slot];
+            }
+          });
+        });
+      });
+      return function () {
+        var _slots$start, _slots$default;
+
+        return vue.createVNode(Descriptions, props, _objectSpread2({
+          "default": function _default() {
+            return [(_slots$start = slots.start) === null || _slots$start === void 0 ? void 0 : _slots$start.call(slots), descVNodes, (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+          }
+        }, lodash.omit(slots, "default", "start")));
+      };
+    }
+  });
+};
+
+var proCurdAddOrEditProps = function proCurdAddOrEditProps() {
+  return {
+    //是否使用operate bar
+    operateBar: {
+      type: Boolean,
+      "default": true
+    },
+    //显示 确定并继续 按钮
+    showContinueAdd: {
+      type: Boolean,
+      "default": false
+    },
+    //
+    okText: {
+      type: String,
+      "default": "确定"
+    },
+    okButtonProps: {
+      type: Object
+    },
+    //
+    continueText: {
+      type: String,
+      "default": "确定并继续"
+    },
+    continueButtonProps: {
+      type: Object
+    }
+  };
+};
+
+var createCurdForm = function createCurdForm(Form, Button, convertFormProps) {
+  return vue.defineComponent({
+    props: _objectSpread2(_objectSpread2({}, Form.props), proCurdAddOrEditProps()),
+    setup: function setup(props, _ref) {
+      var slots = _ref.slots;
+
+      var _useProModule = useProModule(),
+          elementMap = _useProModule.elementMap,
+          formElementMap = _useProModule.formElementMap;
+
+      var _useProCurd = useProCurd(),
+          curdState = _useProCurd.curdState,
+          formColumns = _useProCurd.formColumns,
+          sendCurdEvent = _useProCurd.sendCurdEvent;
+
+      var formRef = vue.ref();
+
+      var handleFinish = function handleFinish(values) {
+        if (curdState.mode === exports.CurdCurrentMode.EDIT) {
+          //edit
+          sendCurdEvent({
+            action: exports.CurdAction.EDIT,
+            type: exports.CurdSubAction.EXECUTE,
+            values: values
+          });
+        } else {
+          //add
+          sendCurdEvent({
+            action: exports.CurdAction.ADD,
+            type: exports.CurdSubAction.EXECUTE,
+            values: values
+          });
+        }
+      };
+
+      var handleAdd = function handleAdd() {
+        var _formRef$value;
+
+        curdState.addAction = exports.CurdAddAction.NORMAL;
+        (_formRef$value = formRef.value) === null || _formRef$value === void 0 ? void 0 : _formRef$value.submit();
+      };
+
+      var handleContinueAdd = function handleContinueAdd() {
+        var _formRef$value2;
+
+        curdState.addAction = exports.CurdAddAction.CONTINUE;
+        (_formRef$value2 = formRef.value) === null || _formRef$value2 === void 0 ? void 0 : _formRef$value2.submit();
+      };
+
+      return function () {
+        var _slots$divide, _slots$operateStart, _slots$operateCenter, _slots$operateEnd, _slots$default;
+
+        return vue.createVNode(Form, vue.mergeProps({
+          "ref": formRef
+        }, props, {
+          "elementMap": props.elementMap || elementMap,
+          "formElementMap": props.formElementMap || formElementMap,
+          "columns": formColumns.value,
+          "model": curdState.detailData,
+          "readonly": curdState.mode === exports.CurdCurrentMode.DETAIL,
+          "onFinish": handleFinish
+        }, convertFormProps === null || convertFormProps === void 0 ? void 0 : convertFormProps(curdState)), _objectSpread2({
+          "default": function _default() {
+            return [(_slots$divide = slots.divide) === null || _slots$divide === void 0 ? void 0 : _slots$divide.call(slots), props.operateBar && vue.createVNode("div", {
+              "class": "pro-curd-form-operate"
+            }, [(_slots$operateStart = slots.operateStart) === null || _slots$operateStart === void 0 ? void 0 : _slots$operateStart.call(slots), curdState.mode !== exports.CurdCurrentMode.DETAIL && vue.createVNode(Button, vue.mergeProps({
+              "onClick": handleAdd
+            }, props.okButtonProps, {
+              "loading": curdState.operateLoading
+            }), {
+              "default": function _default() {
+                return [props.okText];
+              }
+            }), (_slots$operateCenter = slots.operateCenter) === null || _slots$operateCenter === void 0 ? void 0 : _slots$operateCenter.call(slots), props.showContinueAdd && curdState.mode === exports.CurdCurrentMode.ADD && vue.createVNode(Button, vue.mergeProps({
+              "onClick": handleContinueAdd
+            }, props.continueButtonProps, {
+              "loading": curdState.operateLoading
+            }), {
+              "default": function _default() {
+                return [props.continueText];
+              }
+            }), (_slots$operateEnd = slots.operateEnd) === null || _slots$operateEnd === void 0 ? void 0 : _slots$operateEnd.call(slots)]), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+          }
+        }, lodash.omit(slots, "default", "divide", "operateStart", "operateCenter", "operateEnd")));
+      };
+    }
+  });
+};
+
+var proCurdListProps = function proCurdListProps() {
+  return {
+    /**
+     * extra 是否放到SearchForm中
+     */
+    extraInSearch: {
+      type: Boolean,
+      "default": undefined
+    },
+    //search
+    searchProps: {
+      type: Object
+    },
+    //table
+    tableProps: {
+      type: Object
+    },
+    //pageState
+    pageState: {
+      type: Object
+    }
+  };
+};
+
+var createCurdList = function createCurdList(SearchForm, Table) {
+  return vue.defineComponent({
+    props: _objectSpread2({}, proCurdListProps()),
+    setup: function setup(props, _ref) {
+      var slots = _ref.slots;
+
+      var _useProModule = useProModule(),
+          elementMap = _useProModule.elementMap,
+          formElementMap = _useProModule.formElementMap;
+
+      var _useProCurd = useProCurd(),
+          curdState = _useProCurd.curdState,
+          searchColumns = _useProCurd.searchColumns,
+          tableColumns = _useProCurd.tableColumns,
+          getOperate = _useProCurd.getOperate,
+          sendCurdEvent = _useProCurd.sendCurdEvent;
+      /******************* search pagination ********************/
+
+
+      var pageState = props.pageState || vue.reactive(_objectSpread2({}, defaultPage));
+      var prevValues;
+
+      var handleSearch = function handleSearch() {
+        sendCurdEvent({
+          action: exports.CurdAction.LIST,
+          type: exports.CurdSubAction.EMIT,
+          values: _objectSpread2(_objectSpread2({}, prevValues), pageState)
+        });
+      };
+
+      var executeSearchWithResetPage = function executeSearchWithResetPage(values) {
+        prevValues = values;
+        pageState.page = 1;
+        handleSearch();
+      };
+      /******************* table ********************/
+
+
+      var createTableItem = function createTableItem(action) {
+        var operate = getOperate(action);
+
+        var item = _objectSpread2(_objectSpread2({}, lodash.pick(operate, "label", "element", "disabled", "sort", "onClick")), {}, {
+          show: !lodash.isUndefined(operate === null || operate === void 0 ? void 0 : operate.show) ? operate === null || operate === void 0 ? void 0 : operate.show : false,
+          value: action
+        });
+
+        if (!item.onClick) {
+          return _objectSpread2(_objectSpread2({}, item), {}, {
+            onClick: function onClick(record) {
+              //默认发送事件
+              sendCurdEvent({
+                action: action,
+                type: exports.CurdSubAction.EMIT,
+                record: record
+              });
+            }
+          });
+        }
+
+        return item;
+      }; //table操作栏 items
+
+
+      var tableOperateItems = [createTableItem(exports.CurdAction.DETAIL), createTableItem(exports.CurdAction.EDIT), createTableItem(exports.CurdAction.DELETE)]; //新配置的operate item，添加默认发送事件方法
+
+      var convertOperateItems = function convertOperateItems(list) {
+        return lodash.map(list, function (item) {
+          if (!item.onClick) {
+            return _objectSpread2(_objectSpread2({}, item), {}, {
+              onClick: function onClick(record) {
+                sendCurdEvent({
+                  action: "operate",
+                  type: item.value,
+                  record: record
+                });
+              }
+            });
+          }
+
+          return item;
+        });
+      };
+
+      return function () {
+        var _props$searchProps, _slots$divide, _curdState$listData, _slots$divide2, _slots$footerStart, _slots$pagination, _curdState$listData2, _slots$footerEnd;
+
+        var tableProps = props.tableProps;
+        var extra = slots.extra ? vue.createVNode("div", {
+          "class": "pro-curd-list-extra"
+        }, [slots.extra()]) : null;
+        return vue.createVNode(vue.Fragment, null, [vue.createVNode(SearchForm, vue.mergeProps({
+          "formElementMap": formElementMap
+        }, lodash.omit(props.searchProps, "slots"), {
+          "columns": searchColumns.value,
+          "onFinish": executeSearchWithResetPage
+        }), _objectSpread2({
+          "default": function _default() {
+            return [props.extraInSearch && extra];
+          }
+        }, (_props$searchProps = props.searchProps) === null || _props$searchProps === void 0 ? void 0 : _props$searchProps.slots)), (_slots$divide = slots.divide) === null || _slots$divide === void 0 ? void 0 : _slots$divide.call(slots), !props.extraInSearch && extra, slots.table ? slots.table() : vue.createVNode(Table, vue.mergeProps({
+          "elementMap": elementMap
+        }, lodash.omit(tableProps, "slots", "operate"), {
+          "operate": lodash.mergeWith({
+            items: tableOperateItems
+          }, tableProps === null || tableProps === void 0 ? void 0 : tableProps.operate, function (objValue, srcValue) {
+            if (lodash.isArray(objValue) && lodash.isArray(srcValue)) {
+              return lodash.concat(objValue, convertOperateItems(srcValue));
+            }
+          }),
+          "paginationState": {
+            page: pageState.page,
+            pageSize: pageState.pageSize
+          },
+          "columns": tableColumns.value,
+          "loading": curdState.listLoading,
+          "dataSource": (_curdState$listData = curdState.listData) === null || _curdState$listData === void 0 ? void 0 : _curdState$listData.dataSource
+        }), tableProps === null || tableProps === void 0 ? void 0 : tableProps.slots), (_slots$divide2 = slots.divide2) === null || _slots$divide2 === void 0 ? void 0 : _slots$divide2.call(slots), vue.createVNode("div", {
+          "class": "pro-curd-list-footer"
+        }, [(_slots$footerStart = slots.footerStart) === null || _slots$footerStart === void 0 ? void 0 : _slots$footerStart.call(slots), (_slots$pagination = slots.pagination) === null || _slots$pagination === void 0 ? void 0 : _slots$pagination.call(slots, pageState, (_curdState$listData2 = curdState.listData) === null || _curdState$listData2 === void 0 ? void 0 : _curdState$listData2.total, handleSearch), (_slots$footerEnd = slots.footerEnd) === null || _slots$footerEnd === void 0 ? void 0 : _slots$footerEnd.call(slots)])]);
+      };
+    }
+  });
+};
+
+var ProFormKey = Symbol("pro-form");
+var useProForm = function useProForm() {
+  return vue.inject(ProFormKey);
+};
+
+var provideProForm = function provideProForm(ctx) {
+  vue.provide(ProFormKey, ctx);
+};
+
+var proFormProps = function proFormProps() {
+  return {
+    /**
+     * 同 antd 或 element  form中的model
+     */
+    model: {
+      type: Object
+    },
+
+    /**
+     *  子组件是否只读样式
+     */
+    readonly: {
+      type: Boolean,
+      "default": undefined
+    },
+
+    /**
+     *  FormComponent 根据此项来确定组件是否显示
+     *  rules 根据rules中方法生成showState对象
+     */
+    showState: {
+      type: Object
+    },
+    showStateRules: {
+      type: Object
+    },
+
+    /**
+     * 是否只读
+     */
+    readonlyState: {
+      type: Object
+    },
+    readonlyStateRules: {
+      type: Object
+    },
+
+    /**
+     * 是否disabled
+     */
+    disableState: {
+      type: Object
+    },
+    disableStateRules: {
+      type: Object
+    },
+
+    /**
+     *
+     */
+    columns: {
+      type: Array
+    },
+    columnState: {
+      type: Object
+    },
+
+    /**
+     * 展示控件集合，readonly模式下使用这些组件渲染
+     */
+    elementMap: {
+      type: Object
+    },
+
+    /**
+     * 录入控件集合
+     */
+    formElementMap: {
+      type: Object
+    },
+
+    /**
+     * 是否启用rules验证
+     */
+    needRules: {
+      type: Boolean,
+      "default": true
+    },
+
+    /**
+     * provide传递
+     */
+    provideExtra: {
+      type: Object
+    }
+  };
+};
+
+var createForm = function createForm(Form, Grid) {
+  return vue.defineComponent({
+    inheritAttrs: false,
+    props: _objectSpread2(_objectSpread2(_objectSpread2({}, Form.props), proFormProps()), lodash.omit(Grid.props, "items")),
+    setup: function setup(props, _ref) {
+      var slots = _ref.slots,
+          emit = _ref.emit,
+          expose = _ref.expose,
+          attrs = _ref.attrs;
+      var formState = props.model || vue.reactive({}); //组件状态相关
+
+      var showState = props.showState || vue.reactive({});
+      var readonlyState = props.readonlyState || vue.reactive({});
+      var disableState = props.disableState || vue.reactive({}); //formState改变情况下，更新 showState，readonlyState，disableState状态
+
+      hooks.useEffect(function () {
+        if (props.showStateRules) {
+          lodash.forEach(props.showStateRules, function (fn, key) {
+            showState[key] = fn(formState);
+          });
+        }
+
+        if (props.readonlyStateRules) {
+          lodash.forEach(props.readonlyStateRules, function (fn, key) {
+            readonlyState[key] = fn(formState);
+          });
+        }
+
+        if (props.disableStateRules) {
+          lodash.forEach(props.disableStateRules, function (fn, key) {
+            disableState[key] = fn(formState);
+          });
+        }
+      }, formState); //readonly
+
+      var readonly = vue.computed(function () {
+        return props.readonly;
+      }); //columns合并
+
+      var columns = vue.computed(function () {
+        return mergeStateToList(props.columns, props.columnState, function (item) {
+          return getColumnFormItemName(item);
+        });
+      });
+
+      var handleFinish = function handleFinish(values) {
+        //删除不显示的值再触发事件
+        var showValues = getValidValues(values, showState, props.showStateRules);
+        emit("finish", showValues, values);
+      };
+
+      var formRef = vue.ref();
+      expose({
+        submit: function submit() {
+          var _formRef$value;
+
+          (_formRef$value = formRef.value) === null || _formRef$value === void 0 ? void 0 : _formRef$value.submit();
+        },
+        resetFields: function resetFields() {
+          var _formRef$value2;
+
+          for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
+            params[_key] = arguments[_key];
+          }
+
+          (_formRef$value2 = formRef.value) === null || _formRef$value2 === void 0 ? void 0 : _formRef$value2.resetFields.apply(_formRef$value2, params);
+        }
+      });
+      provideProForm(_objectSpread2({
+        formState: formState,
+        showState: showState,
+        readonlyState: readonlyState,
+        disableState: disableState,
+        //
+        elementMap: props.elementMap,
+        formElementMap: props.formElementMap,
+        //
+        readonly: readonly,
+        //
+        columns: columns,
+        //
+        formRef: formRef
+      }, props.provideExtra));
+      var invalidKeys = lodash.keys(proFormProps());
+      var gridKeys = lodash.keys(lodash.omit(Grid.props, "items"));
+      return function () {
+        var _slots$start, _slots$default;
+
+        return vue.createVNode(Form, vue.mergeProps({
+          "ref": formRef
+        }, lodash.omit(attrs, "onFinish"), lodash.omit.apply(void 0, [props].concat(_toConsumableArray(invalidKeys), _toConsumableArray(gridKeys), ["onFinish"])), {
+          "model": formState,
+          "onFinish": handleFinish
+        }), _objectSpread2({
+          "default": function _default() {
+            return [(_slots$start = slots.start) === null || _slots$start === void 0 ? void 0 : _slots$start.call(slots), props.formElementMap && lodash.size(columns.value) > 0 && vue.createVNode(vue.Fragment, null, [props.row ? vue.createVNode(Grid, {
+              "row": props.row,
+              "col": props.col,
+              "items": lodash.map(columns.value, function (item) {
+                return {
+                  rowKey: getColumnFormItemName(item),
+                  vNode: getFormItemEl(props.formElementMap, item, props.needRules),
+                  col: lodash.get(item, ["extra", "col"])
+                };
+              })
+            }, null) : lodash.map(columns.value, function (item) {
+              return getFormItemEl(props.formElementMap, item, props.needRules);
+            })]), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+          }
+        }, lodash.omit(slots, "default")));
+      };
+    }
+  });
+};
+
 exports.SearchMode = void 0;
 
 (function (SearchMode) {
@@ -1021,6 +1983,11 @@ var proSearchFormProps = function proSearchFormProps() {
     debounceKeys: {
       type: Array
     },
+    //默认 valueType 为 text 的控件会debounce处理
+    debounceTypes: {
+      type: Array,
+      "default": ["text"]
+    },
     debounceTime: {
       type: Number,
       "default": 800
@@ -1032,106 +1999,73 @@ var proSearchFormProps = function proSearchFormProps() {
  * 该组件只是个模式，最终返回null，不做任何渲染，应配合着ProForm的包装类一起使用
  * 针对传入的model（监听对象）做相应的finish（回调）处理
  */
-var ProSearchForm = vue.defineComponent({
-  props: _objectSpread2({}, proSearchFormProps()),
-  setup: function setup(props, _ref) {
-    var emit = _ref.emit;
-    //根据column valueType 算出默认需要debounce处理的属性集合
-    var defaultDebounceKeys = lodash.map(lodash.filter(props.columns, function (column) {
-      var valueType = getColumnValueType(column); //默认input组件的触发事件需要debounce处理
-
-      return valueType === "text";
-    }), function (column) {
-      return getColumnFormItemName(column);
-    });
-
-    var handleFinish = function handleFinish() {
-      emit("finish");
-    };
-
-    var debounceFinish = lodash.debounce(function () {
-      handleFinish();
-    }, props.debounceTime); //初始化
-
-    hooks.useEffect(function () {
-      if (props.initEmit) {
-        handleFinish();
-      }
-    }, []);
-
-    var isDebounceDataChange = function isDebounceDataChange(state, prevState, debounceKeys) {
-      return lodash.some(debounceKeys, function (key) {
-        return lodash.get(state, key) !== lodash.get(prevState, key);
+var createSearchForm = function createSearchForm(Form, Props) {
+  return vue.defineComponent({
+    props: _objectSpread2(_objectSpread2(_objectSpread2({}, Form.props), Props), proSearchFormProps()),
+    setup: function setup(props, _ref) {
+      var slots = _ref.slots;
+      var formState = props.model || vue.reactive({});
+      var valueTypeSet = new Set(props.debounceTypes); //根据column valueType 算出默认需要debounce处理的属性集合
+
+      var defaultDebounceKeys = lodash.map(lodash.filter(props.columns, function (column) {
+        var valueType = getColumnValueType(column); //默认input组件的触发事件需要debounce处理
+
+        return valueTypeSet.has(valueType);
+      }), function (column) {
+        return getColumnFormItemName(column);
       });
-    }; //监听
-
-
-    hooks.useWatch(function (state, prevState) {
-      if (props.searchMode !== exports.SearchMode.AUTO) {
-        return;
-      } //如果改变的值中包括debounceKeys中注册的 延时触发
-
+      var formRef = vue.ref();
 
-      var debounceKeys = lodash.size(props.debounceKeys) > 0 ? props.debounceKeys : defaultDebounceKeys;
+      var handleFinish = function handleFinish() {
+        var _formRef$value;
 
-      if (lodash.size(debounceKeys) > 0 && isDebounceDataChange(state, prevState, debounceKeys)) {
-        debounceFinish();
-        return;
-      }
+        (_formRef$value = formRef.value) === null || _formRef$value === void 0 ? void 0 : _formRef$value.submit();
+      };
 
-      handleFinish();
-    }, function () {
-      return lodash.clone(props.model);
-    });
-    return function () {
-      return null;
-    };
-  }
-});
+      var debounceFinish = lodash.debounce(function () {
+        handleFinish();
+      }, props.debounceTime); //初始化
 
-/**
- * 剔除showState或showStateRules规则为!true的值
- * @param values
- * @param showState
- * @param showStateRules
- */
-var getValidValues = function getValidValues(values, showState, showStateRules) {
-  if (showState) {
-    var invalidKeys = lodash.filter(lodash.keys(showState), function (key) {
-      return !showState[key];
-    });
-    return lodash.omit(values, invalidKeys);
-  }
+      hooks.useEffect(function () {
+        if (props.initEmit) {
+          handleFinish();
+        }
+      }, []);
 
-  if (showStateRules) {
-    var _invalidKeys = lodash.filter(lodash.keys(showStateRules), function (key) {
-      return !showStateRules[key](values);
-    });
+      var isDebounceDataChange = function isDebounceDataChange(state, prevState, debounceKeys) {
+        return lodash.some(debounceKeys, function (key) {
+          return lodash.get(state, key) !== lodash.get(prevState, key);
+        });
+      }; //监听
 
-    return lodash.omit(values, _invalidKeys);
-  }
 
-  return values;
-};
-/**
- * string类型的path转为arr
- * @param path
- */
+      hooks.useWatch(function (state, prevState) {
+        if (props.searchMode !== exports.SearchMode.AUTO) {
+          return;
+        } //如果改变的值中包括debounceKeys中注册的 延时触发
 
-var convertPathToList = function convertPathToList(path) {
-  if (!path) {
-    return undefined;
-  }
 
-  if (lodash.isArray(path)) {
-    return path;
-  }
+        var debounceKeys = lodash.size(props.debounceKeys) > 0 ? props.debounceKeys : defaultDebounceKeys;
 
-  if (path && lodash.isString(path) && path.indexOf(".") > 0) {
-    return lodash.split(path, ".");
-  }
+        if (lodash.size(debounceKeys) > 0 && isDebounceDataChange(state, prevState, debounceKeys)) {
+          debounceFinish();
+          return;
+        }
 
-  return [path];
+        handleFinish();
+      }, function () {
+        return lodash.clone(formState);
+      });
+      var invalidKeys = lodash.keys(lodash.omit(proSearchFormProps(), "columns"));
+      return function () {
+        return vue.createVNode(Form, vue.mergeProps({
+          "ref": formRef
+        }, lodash.omit(props, invalidKeys), {
+          "model": formState
+        }), slots);
+      };
+    }
+  });
 };
 
 /**
@@ -1166,86 +2100,83 @@ var FormListProvider = vue.defineComponent({
   }
 });
 
-var proFormListProps = function proFormListProps() {
-  return {
-    //每行默认id
-    rowKey: {
-      type: String,
-      "default": "id"
-    },
-    //name
-    name: {
-      type: [String, Number, Array],
-      required: true
-    }
-  };
-};
-
-var ProFormList = vue.defineComponent({
-  props: _objectSpread2({}, proFormListProps()),
-  setup: function setup(props, _ref2) {
-    var slots = _ref2.slots;
-
-    var _useProForm = useProForm(),
-        formState = _useProForm.formState,
-        readonly = _useProForm.readonly;
+var createFormList = function createFormList(FormItem) {
+  return vue.defineComponent({
+    props: _objectSpread2(_objectSpread2({}, FormItem.props), {}, {
+      //每行默认id
+      rowKey: {
+        type: String,
+        "default": "id"
+      }
+    }),
+    setup: function setup(props, _ref2) {
+      var slots = _ref2.slots;
 
-    var formListCtx = useProFormList();
-    var nameList = convertPathToList(props.name);
-    var path = formListCtx !== null && formListCtx !== void 0 && formListCtx.pathList ? [].concat(_toConsumableArray(formListCtx.pathList), _toConsumableArray(nameList)) : nameList;
+      var _useProForm = useProForm(),
+          formState = _useProForm.formState,
+          readonly = _useProForm.readonly;
 
-    var handleAdd = function handleAdd() {
-      var targetList = lodash.get(formState, path);
+      var formListCtx = useProFormList();
+      var nameList = convertPathToList(props.name);
+      var path = formListCtx !== null && formListCtx !== void 0 && formListCtx.pathList ? [].concat(_toConsumableArray(formListCtx.pathList), _toConsumableArray(nameList)) : nameList;
 
-      if (!lodash.isArray(targetList)) {
-        targetList = [];
-      }
+      var handleAdd = function handleAdd() {
+        var targetList = lodash.get(formState, path);
 
-      targetList.push(_defineProperty({}, props.rowKey, new Date().valueOf()));
-      lodash.set(formState, path, targetList);
-    };
+        if (!lodash.isArray(targetList)) {
+          targetList = [];
+        }
 
-    var handleRemove = function handleRemove(index) {
-      var targetList = lodash.get(formState, path);
+        targetList.push(_defineProperty({}, props.rowKey, new Date().valueOf()));
+        lodash.set(formState, path, targetList);
+      };
 
-      if (lodash.size(targetList) <= 0) {
-        return;
-      }
+      var handleRemove = function handleRemove(index) {
+        var targetList = lodash.get(formState, path);
 
-      targetList.splice(index, 1);
-    };
+        if (lodash.size(targetList) <= 0) {
+          return;
+        }
 
-    return function () {
-      var _slots$add;
+        targetList.splice(index, 1);
+      };
 
-      return vue.createVNode(vue.Fragment, null, [lodash.map(lodash.get(formState, path), function (item, index) {
-        var _slots$default2, _slots$itemAdd, _slots$itemMinus;
+      return function () {
+        var _slots$add;
 
-        return vue.createVNode(FormListProvider, {
-          "key": index,
-          "pathList": [].concat(_toConsumableArray(path), [index])
-        }, {
+        return vue.createVNode(FormItem, lodash.omit(props, "rowKey"), {
           "default": function _default() {
-            return [vue.createVNode("div", {
-              "class": "pro-form-list-item"
-            }, [(_slots$default2 = slots["default"]) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots), !readonly.value && vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
-              "class": "pro-form-list-item-add",
+            return [lodash.map(lodash.get(formState, path), function (item, index) {
+              var _slots$default2, _slots$itemAdd, _slots$itemMinus;
+
+              return vue.createVNode(FormListProvider, {
+                "key": item[props.rowKey] || index,
+                "pathList": [].concat(_toConsumableArray(path), [index])
+              }, {
+                "default": function _default() {
+                  return [vue.createVNode("div", {
+                    "class": "pro-form-list-item"
+                  }, [(_slots$default2 = slots["default"]) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots), !readonly.value && vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
+                    "class": "pro-form-list-item-add",
+                    "onClick": handleAdd
+                  }, [(_slots$itemAdd = slots.itemAdd) === null || _slots$itemAdd === void 0 ? void 0 : _slots$itemAdd.call(slots)]), vue.createVNode("div", {
+                    "class": "pro-form-list-item-minus",
+                    "onClick": function onClick() {
+                      return handleRemove(index);
+                    }
+                  }, [(_slots$itemMinus = slots.itemMinus) === null || _slots$itemMinus === void 0 ? void 0 : _slots$itemMinus.call(slots)])])])];
+                }
+              });
+            }), !readonly.value && vue.createVNode("div", {
+              "class": "pro-form-list-add",
               "onClick": handleAdd
-            }, [(_slots$itemAdd = slots.itemAdd) === null || _slots$itemAdd === void 0 ? void 0 : _slots$itemAdd.call(slots)]), vue.createVNode("div", {
-              "class": "pro-form-list-item-minus",
-              "onClick": function onClick() {
-                return handleRemove(index);
-              }
-            }, [(_slots$itemMinus = slots.itemMinus) === null || _slots$itemMinus === void 0 ? void 0 : _slots$itemMinus.call(slots)])])])];
+            }, [(_slots$add = slots.add) === null || _slots$add === void 0 ? void 0 : _slots$add.call(slots)])];
           }
         });
-      }), !readonly.value && vue.createVNode("div", {
-        "class": "pro-form-list-add",
-        "onClick": handleAdd
-      }, [(_slots$add = slots.add) === null || _slots$add === void 0 ? void 0 : _slots$add.call(slots)])]);
-    };
-  }
-});
+      };
+    }
+  });
+};
 
 var proFormItemProps = function proFormItemProps() {
   return {
@@ -1350,8 +2281,8 @@ var proTableProps = function proTableProps() {
       type: String
     },
 
-    /**
-     * 公共column，会merge到columns item中
+    /**
+     * 公共column，会merge到columns item中
      */
     column: {
       type: Object
@@ -1360,23 +2291,33 @@ var proTableProps = function proTableProps() {
     columns: {
       type: Array
     },
+    columnState: {
+      type: Object
+    },
 
-    /**
-     * 展示控件集合，readonly模式下使用这些组件渲染
+    /**
+     * 展示控件集合，readonly模式下使用这些组件渲染
      */
     elementMap: {
       type: Object
     },
 
-    /**
-     * loading
+    /**
+     * 序号
      */
-    loading: {
+    serialNumber: {
       type: Boolean
     },
 
-    /**
-     * provide传递
+    /**
+     * 分页
+     */
+    paginationState: {
+      type: Object
+    },
+
+    /**
+     * provide传递
      */
     provideExtra: {
       type: Object
@@ -1384,37 +2325,35 @@ var proTableProps = function proTableProps() {
   };
 };
 
-var ProTable = vue.defineComponent({
-  props: _objectSpread2({}, proTableProps()),
-  setup: function setup(props, _ref) {
-    var slots = _ref.slots;
-    var columns = vue.computed(function () {
-      //根据valueType选择对应的展示组件
-      var columns = lodash.map(props.columns, function (item) {
-        //merge公共item
-        var nextItem = lodash.merge(props.column, item);
-
-        if (!item.customRender) {
-          nextItem.customRender = function (_ref2) {
-            var text = _ref2.text;
-            var vn = getItemEl(props.elementMap, _objectSpread2(_objectSpread2({}, item), {}, {
-              showProps: _objectSpread2(_objectSpread2({}, item.showProps), {}, {
-                content: props.columnEmptyText
-              })
-            }), text); //如果找不到注册的组件，使用当前值 及 columnEmptyText
+var createTable = function createTable(Table, Props) {
+  return vue.defineComponent({
+    props: _objectSpread2(_objectSpread2(_objectSpread2({}, Table.props), Props), proTableProps()),
+    setup: function setup(props, _ref) {
+      var slots = _ref.slots;
+
+      var createNumberColumn = function createNumberColumn() {
+        return _objectSpread2(_objectSpread2({
+          title: "序号",
+          dataIndex: "serialNumber",
+          width: 80
+        }, props.column), {}, {
+          customRender: function customRender(_ref2) {
+            var _props$paginationStat, _props$paginationStat2;
 
-            return vn || text || props.columnEmptyText;
-          };
-        }
+            var index = _ref2.index;
 
-        return nextItem;
-      });
-      var operate = props.operate; //处理operate
+            if ((_props$paginationStat = props.paginationState) !== null && _props$paginationStat !== void 0 && _props$paginationStat.page && (_props$paginationStat2 = props.paginationState) !== null && _props$paginationStat2 !== void 0 && _props$paginationStat2.pageSize) {
+              return props.paginationState.pageSize * (props.paginationState.page - 1) + index + 1;
+            }
+
+            return index + 1;
+          }
+        });
+      };
+
+      var createOperateColumn = function createOperateColumn() {
+        var operate = props.operate; //将itemState补充的信息拼到item中
 
-      if (operate && operate.items && lodash.some(operate.items, function (item) {
-        return item.show;
-      })) {
-        //将itemState补充的信息拼到item中
         var items = lodash.map(operate.items, function (i) {
           return _objectSpread2(_objectSpread2({}, i), lodash.get(operate.itemState, i.value));
         }); //排序
@@ -1422,14 +2361,14 @@ var ProTable = vue.defineComponent({
         var sortedItems = lodash.sortBy(items, function (item) {
           return item.sort;
         });
-        columns.push(_objectSpread2(_objectSpread2({
+        return _objectSpread2(_objectSpread2(_objectSpread2({}, props.column), {}, {
           title: "操作",
           dataIndex: "operate",
           fixed: "right"
-        }, props.column), {}, {
+        }, operate.column), {}, {
           customRender: function customRender(_ref3) {
             var record = _ref3.record;
-            var validItems = lodash.filter(sortedItems, function (item) {
+            var showItems = lodash.filter(sortedItems, function (item) {
               if (item.show && lodash.isFunction(item.show)) {
                 return item.show(record);
               }
@@ -1442,7 +2381,7 @@ var ProTable = vue.defineComponent({
             });
             return vue.createVNode("div", {
               "class": "pro-table-operate"
-            }, [lodash.map(validItems, function (item) {
+            }, [lodash.map(showItems, function (item) {
               //自定义
               if (lodash.isFunction(item.element)) {
                 return item.element(record, item);
@@ -1459,36 +2398,90 @@ var ProTable = vue.defineComponent({
               }, [item.label]);
             })]);
           }
-        }, operate.column));
-      }
+        });
+      };
 
-      return columns;
-    });
-    provideProTable(_objectSpread2({
-      columns: columns
-    }, props.provideExtra));
-    return function () {
-      var _slots$default;
+      var columns = vue.computed(function () {
+        var mergeColumns = mergeStateToList(props.columns, props.columnState, function (item) {
+          return item.dataIndex;
+        }); //根据valueType选择对应的展示组件
+
+        var columns = lodash.map(mergeColumns, function (item) {
+          //merge公共item
+          var nextItem = _objectSpread2(_objectSpread2({}, props.column), item);
+
+          if (!item.customRender) {
+            nextItem.customRender = function (_ref4) {
+              var text = _ref4.text;
+              var vn = getItemEl(props.elementMap, _objectSpread2(_objectSpread2({}, item), {}, {
+                showProps: _objectSpread2(_objectSpread2({}, item.showProps), {}, {
+                  content: props.columnEmptyText
+                })
+              }), text); //如果找不到注册的组件，使用当前值 及 columnEmptyText
+
+              return vn || text || props.columnEmptyText;
+            };
+          }
 
-      return (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, columns.value);
-    };
-  }
-});
+          return nextItem;
+        }); //处理序号
+
+        if (props.serialNumber) {
+          columns.unshift(createNumberColumn());
+        } //处理operate
+
+
+        if (props.operate && props.operate.items && lodash.some(props.operate.items, function (item) {
+          return item.show;
+        })) {
+          columns.push(createOperateColumn());
+        }
+
+        return columns;
+      });
+      var tableRef = vue.ref();
+      provideProTable(_objectSpread2({
+        columns: columns,
+        tableRef: tableRef
+      }, props.provideExtra));
+      var invalidKeys = lodash.keys(proTableProps());
+      return function () {
+        return vue.createVNode(Table, vue.mergeProps({
+          "ref": tableRef
+        }, lodash.omit(props, invalidKeys), {
+          "columns": columns.value
+        }), slots);
+      };
+    }
+  });
+};
 
 exports.ProCurd = ProCurd;
-exports.ProForm = ProForm;
-exports.ProFormList = ProFormList;
+exports.ProModalCurd = ProModalCurd;
 exports.ProModule = ProModule;
-exports.ProSearchForm = ProSearchForm;
-exports.ProTable = ProTable;
+exports.ProPageCurd = ProPageCurd;
 exports.RequestAction = RequestAction;
 exports.convertPathToList = convertPathToList;
+exports.createCurdDesc = createCurdDesc;
+exports.createCurdForm = createCurdForm;
+exports.createCurdList = createCurdList;
+exports.createExpose = createExpose;
+exports.createForm = createForm;
 exports.createFormItemCompFn = createFormItemCompFn;
+exports.createFormList = createFormList;
+exports.createGrid = createGrid;
+exports.createSearchForm = createSearchForm;
+exports.createTable = createTable;
+exports.defaultPage = defaultPage;
+exports.findTargetInTree = findTargetInTree;
+exports.findTargetListInTree = findTargetListInTree;
+exports.generateId = generateId;
 exports.getColumnFormItemName = getColumnFormItemName;
 exports.getColumnValueType = getColumnValueType;
 exports.getFormItemEl = getFormItemEl;
 exports.getItemEl = getItemEl;
 exports.getValidValues = getValidValues;
+exports.mergeStateToList = mergeStateToList;
 exports.provideProCurd = provideProCurd;
 exports.provideProModule = provideProModule;
 exports.useComposeRequestActor = useComposeRequestActor;