ylyx-cli 1.0.16 → 1.1.1

package/templates/vue-app/files/src/components/Crud/crud.js

@@ -1,907 +1,907 @@
-import { initData, initDataPost, download } from '@/api/data';
-import { parseTime, downloadFile } from '@/utils/index';
-import Vue from 'vue';
-
-/**
- * CRUD配置
- * @author moxun
- * @param {*} options <br>
- * @return crud instance.
- * @example
- * 要使用多crud时，请在关联crud的组件处使用crud-tag进行标记，如：<jobForm :job-status="dict.job_status" crud-tag="job" />
- */
-function CRUD(options) {
-  const defaultOptions = {
-    tag: 'default',
-    // id字段名
-    idField: 'id',
-    // 标题
-    title: '',
-    // 请求数据的url
-    url: '',
-    // 表格数据
-    data: [],
-    // 选择项
-    selections: [],
-    // 待查询的对象
-    query: {},
-    // 查询数据的参数
-    params: {},
-    // Form 表单
-    form: {},
-    // 重置表单
-    defaultForm: () => {},
-    // 排序规则，默认 id 降序， 支持多字段排序 ['id,desc', 'createTime,asc']
-    sort: ['id,desc'],
-    // 等待时间
-    time: 50,
-    // CRUD Method
-    crudMethod: {
-      add: form => {},
-      del: id => {},
-      edit: form => {},
-      get: id => {},
-    },
-    // 主页操作栏显示哪些按钮
-    optShow: {
-      add: true,
-      edit: false,
-      del: false,
-      download: false,
-      reset: false,
-    },
-    // 自定义一些扩展属性
-    props: {},
-    // 在主页准备
-    queryOnPresenterCreated: true,
-    // 调试开关
-    debug: false,
-    type: '',
-  };
-  options = mergeOptions(defaultOptions, options);
-  const data = {
-    ...options,
-    // 记录数据状态
-    dataStatus: {},
-    status: {
-      add: CRUD.STATUS.NORMAL,
-      edit: CRUD.STATUS.NORMAL,
-      // 添加或编辑状态
-      get cu() {
-        if (this.add === CRUD.STATUS.NORMAL && this.edit === CRUD.STATUS.NORMAL) {
-          return CRUD.STATUS.NORMAL;
-        } else if (this.add === CRUD.STATUS.PREPARED || this.edit === CRUD.STATUS.PREPARED) {
-          return CRUD.STATUS.PREPARED;
-        } else if (this.add === CRUD.STATUS.PROCESSING || this.edit === CRUD.STATUS.PROCESSING) {
-          return CRUD.STATUS.PROCESSING;
-        }
-        throw new Error("wrong crud's cu status");
-      },
-      // 标题
-      get title() {
-        return this.add > CRUD.STATUS.NORMAL
-          ? `新增${crud.title}`
-          : this.edit > CRUD.STATUS.NORMAL
-            ? `编辑${crud.title}`
-            : crud.title;
-      },
-    },
-    msg: {
-      submit: '提交成功',
-      add: '新增成功',
-      edit: '编辑成功',
-      del: '删除成功',
-    },
-    page: {
-      // 页码
-      page: 0,
-      // 每页数据条数
-      size: 10,
-      // 总数据条数
-      total: 0,
-    },
-    // 整体loading
-    loading: false,
-    // 导出的 Loading
-    downloadLoading: false,
-    // 删除的 Loading
-    delAllLoading: false,
-  };
-  const methods = {
-    /**
-     * 通用的提示
-     */
-    submitSuccessNotify() {
-      crud.notify(crud.msg.submit, CRUD.NOTIFICATION_TYPE.SUCCESS);
-    },
-    addSuccessNotify() {
-      crud.notify(crud.msg.add, CRUD.NOTIFICATION_TYPE.SUCCESS);
-    },
-    editSuccessNotify() {
-      crud.notify(crud.msg.edit, CRUD.NOTIFICATION_TYPE.SUCCESS);
-    },
-    delSuccessNotify() {
-      crud.notify(crud.msg.del, CRUD.NOTIFICATION_TYPE.SUCCESS);
-    },
-    // 搜索
-    toQuery() {
-      crud.page.page = 1;
-      crud.refresh();
-    },
-    // 刷新
-    refresh() {
-      if (!callVmHook(crud, CRUD.HOOK.beforeRefresh)) {
-        return;
-      }
-      // 没有地址的时候 阻止进行下一步
-      if (!crud.url) return;
-      return new Promise((resolve, reject) => {
-        crud.loading = true;
-        // 请求数据
-        let initDataType = crud.type == 'post' ? initDataPost : initData;
-        initDataType(crud.url, crud.getQueryParams())
-          .then(data => {
-            const table = crud.getTable();
-            if (table && table.lazy) {
-              // 懒加载子节点数据，清掉已加载的数据
-              table.store.states.treeData = {};
-              table.store.states.lazyTreeNodeMap = {};
-            }
-            crud.page.total = data.totalElements;
-            crud.data = data.content;
-            crud.resetDataStatus();
-            // time 毫秒后显示表格
-            setTimeout(() => {
-              crud.loading = false;
-              callVmHook(crud, CRUD.HOOK.afterRefresh);
-            }, crud.time);
-            resolve(data);
-          })
-          .catch(err => {
-            crud.loading = false;
-            reject(err);
-          });
-      });
-    },
-    /**
-     * 启动添加
-     */
-    toAdd() {
-      crud.resetForm();
-      if (
-        !(
-          callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) &&
-          callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form)
-        )
-      ) {
-        return;
-      }
-      crud.status.add = CRUD.STATUS.PREPARED;
-      callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form);
-      callVmHook(crud, CRUD.HOOK.afterToCU, crud.form);
-    },
-    /**
-     * 启动编辑
-     * @param {*} data 数据项
-     */
-    toEdit(data) {
-      crud.resetForm(JSON.parse(JSON.stringify(data)));
-      if (
-        !(
-          callVmHook(crud, CRUD.HOOK.beforeToEdit, crud.form) &&
-          callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form)
-        )
-      ) {
-        return;
-      }
-      crud.status.edit = CRUD.STATUS.PREPARED;
-      crud.getDataStatus(crud.getDataId(data)).edit = CRUD.STATUS.PREPARED;
-      callVmHook(crud, CRUD.HOOK.afterToEdit, crud.form);
-      callVmHook(crud, CRUD.HOOK.afterToCU, crud.form);
-    },
-    /**
-     * 启动删除
-     * @param {*} data 数据项
-     */
-    toDelete(data) {
-      crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.PREPARED;
-    },
-    /**
-     * 取消删除
-     * @param {*} data 数据项
-     */
-    cancelDelete(data) {
-      if (!callVmHook(crud, CRUD.HOOK.beforeDeleteCancel, data)) {
-        return;
-      }
-      crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.NORMAL;
-      callVmHook(crud, CRUD.HOOK.afterDeleteCancel, data);
-    },
-    /**
-     * 取消新增/编辑
-     */
-    cancelCU() {
-      const addStatus = crud.status.add;
-      const editStatus = crud.status.edit;
-      if (addStatus === CRUD.STATUS.PREPARED) {
-        if (!callVmHook(crud, CRUD.HOOK.beforeAddCancel, crud.form)) {
-          return;
-        }
-        crud.status.add = CRUD.STATUS.NORMAL;
-      }
-      if (editStatus === CRUD.STATUS.PREPARED) {
-        if (!callVmHook(crud, CRUD.HOOK.beforeEditCancel, crud.form)) {
-          return;
-        }
-        crud.status.edit = CRUD.STATUS.NORMAL;
-        crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL;
-      }
-      crud.resetForm();
-      if (addStatus === CRUD.STATUS.PREPARED) {
-        callVmHook(crud, CRUD.HOOK.afterAddCancel, crud.form);
-      }
-      if (editStatus === CRUD.STATUS.PREPARED) {
-        callVmHook(crud, CRUD.HOOK.afterEditCancel, crud.form);
-      }
-      // 清除表单验证
-      if (crud.findVM('form').$refs['form']) {
-        crud.findVM('form').$refs['form'].clearValidate();
-      }
-    },
-    /**
-     * 提交新增/编辑
-     */
-    submitCU() {
-      if (!callVmHook(crud, CRUD.HOOK.beforeValidateCU)) {
-        return;
-      }
-      crud.findVM('form').$refs['form'].validate(valid => {
-        if (!valid) {
-          return;
-        }
-        if (!callVmHook(crud, CRUD.HOOK.afterValidateCU)) {
-          return;
-        }
-        if (crud.status.add === CRUD.STATUS.PREPARED) {
-          crud.doAdd();
-        } else if (crud.status.edit === CRUD.STATUS.PREPARED) {
-          crud.doEdit();
-        }
-      });
-    },
-    /**
-     * 执行添加
-     */
-    doAdd() {
-      if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
-        return;
-      }
-      crud.status.add = CRUD.STATUS.PROCESSING;
-      crud.crudMethod
-        .add(crud.form)
-        .then(() => {
-          crud.status.add = CRUD.STATUS.NORMAL;
-          crud.resetForm();
-          crud.addSuccessNotify();
-          callVmHook(crud, CRUD.HOOK.afterSubmit);
-          crud.toQuery();
-        })
-        .catch(() => {
-          crud.status.add = CRUD.STATUS.PREPARED;
-          callVmHook(crud, CRUD.HOOK.afterAddError);
-        });
-    },
-    /**
-     * 执行编辑
-     */
-    doEdit() {
-      if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
-        return;
-      }
-      crud.status.edit = CRUD.STATUS.PROCESSING;
-      crud.crudMethod
-        .edit(crud.form)
-        .then(() => {
-          crud.status.edit = CRUD.STATUS.NORMAL;
-          crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL;
-          crud.editSuccessNotify();
-          crud.resetForm();
-          callVmHook(crud, CRUD.HOOK.afterSubmit);
-          crud.refresh();
-        })
-        .catch(() => {
-          crud.status.edit = CRUD.STATUS.PREPARED;
-          callVmHook(crud, CRUD.HOOK.afterEditError);
-        });
-    },
-    /**
-     * 执行删除
-     * @param {*} data 数据项
-     */
-    doDelete(data) {
-      let delAll = false;
-      let dataStatus;
-      const ids = [];
-      if (data instanceof Array) {
-        delAll = true;
-        data.forEach(val => {
-          ids.push(this.getDataId(val));
-        });
-      } else {
-        ids.push(this.getDataId(data));
-        dataStatus = crud.getDataStatus(this.getDataId(data));
-      }
-      if (!callVmHook(crud, CRUD.HOOK.beforeDelete, data)) {
-        return;
-      }
-      if (!delAll) {
-        dataStatus.delete = CRUD.STATUS.PROCESSING;
-      }
-      return crud.crudMethod
-        .del(ids)
-        .then(() => {
-          if (delAll) {
-            crud.delAllLoading = false;
-          } else dataStatus.delete = CRUD.STATUS.PREPARED;
-          crud.dleChangePage(1);
-          crud.delSuccessNotify();
-          callVmHook(crud, CRUD.HOOK.afterDelete, data);
-          crud.refresh();
-        })
-        .catch(() => {
-          if (delAll) {
-            crud.delAllLoading = false;
-          } else dataStatus.delete = CRUD.STATUS.PREPARED;
-        });
-    },
-    /**
-     * 通用导出
-     */
-    doExport() {
-      crud.downloadLoading = true;
-      download(crud.url + '/download', crud.getQueryParams())
-        .then(result => {
-          crud.downloadLoading = false;
-        })
-        .catch(result => {
-          downloadFile(result, crud.title + '数据', 'xlsx');
-          crud.downloadLoading = false;
-        });
-    },
-    /**
-     * 获取查询参数
-     */
-    getQueryParams: function () {
-      //字符串清空前后空格
-      Object.keys(crud.query).map(key => {
-        if (typeof crud.query[key] == 'string') {
-          crud.query[key] = crud.query[key].trim();
-        }
-      });
-      // 清除参数无值的情况
-      Object.keys(crud.query).length !== 0 &&
-        Object.keys(crud.query).forEach(item => {
-          if (crud.query[item] === null || crud.query[item] === '') crud.query[item] = undefined;
-        });
-      Object.keys(crud.params).length !== 0 &&
-        Object.keys(crud.params).forEach(item => {
-          if (crud.params[item] === null || crud.params[item] === '') crud.params[item] = undefined;
-        });
-      return {
-        page: crud.page.page - 1,
-        size: crud.page.size,
-        sort: crud.sort,
-        ...crud.query,
-        ...crud.params,
-      };
-    },
-    // 当前页改变
-    pageChangeHandler(e) {
-      crud.page.page = e;
-      crud.refresh();
-    },
-    // 每页条数改变
-    sizeChangeHandler(e) {
-      crud.page.size = e;
-      crud.page.page = 1;
-      crud.refresh();
-    },
-    // 预防删除第二页最后一条数据时，或者多选删除第二页的数据时，页码错误导致请求无数据
-    dleChangePage(size) {
-      if (crud.data.length === size && crud.page.page !== 1) {
-        crud.page.page -= 1;
-      }
-    },
-    // 选择改变
-    selectionChangeHandler(val) {
-      crud.selections = val;
-    },
-    /**
-     * 重置查询参数
-     * @param {Boolean} toQuery 重置后进行查询操作
-     */
-    resetQuery(toQuery = true) {
-      const defaultQuery = JSON.parse(JSON.stringify(crud.defaultQuery));
-      const query = crud.query;
-      Object.keys(query).forEach(key => {
-        query[key] = defaultQuery[key];
-      });
-      // 重置参数
-      this.params = {};
-      if (toQuery) {
-        crud.toQuery();
-      }
-    },
-    /**
-     * 重置表单
-     * @param {Array} data 数据
-     */
-    resetForm(data) {
-      const form =
-        data ||
-        (typeof crud.defaultForm === 'object'
-          ? JSON.parse(JSON.stringify(crud.defaultForm))
-          : crud.defaultForm.apply(crud.findVM('form')));
-      const crudFrom = crud.form;
-      for (const key in form) {
-        if (crudFrom.hasOwnProperty(key)) {
-          crudFrom[key] = form[key];
-        } else {
-          Vue.set(crudFrom, key, form[key]);
-        }
-      }
-      // add by ghl 2020-10-04  页面重复添加信息时，下拉框的校验会存在，需要找工取消
-      if (crud.findVM('form').$refs['form']) {
-        crud.findVM('form').$refs['form'].clearValidate();
-      }
-    },
-    /**
-     * 重置数据状态
-     */
-    resetDataStatus() {
-      const dataStatus = {};
-      function resetStatus(datas) {
-        datas = datas || [];
-        datas.forEach(e => {
-          dataStatus[crud.getDataId(e)] = {
-            delete: 0,
-            edit: 0,
-          };
-          if (e.children) {
-            resetStatus(e.children);
-          }
-        });
-      }
-      resetStatus(crud.data);
-      crud.dataStatus = dataStatus;
-    },
-    /**
-     * 获取数据状态
-     * @param {Number | String} id 数据项id
-     */
-    getDataStatus(id) {
-      return crud.dataStatus[id];
-    },
-    /**
-     * 用于树形表格多选, 选中所有
-     * @param selection
-     */
-    selectAllChange(selection) {
-      // 如果选中的数目与请求到的数目相同就选中子节点，否则就清空选中
-      if (selection && selection.length === crud.data.length) {
-        selection.forEach(val => {
-          crud.selectChange(selection, val);
-        });
-      } else {
-        crud.getTable().clearSelection();
-      }
-    },
-    /**
-     * 用于树形表格多选，单选的封装
-     * @param selection
-     * @param row
-     */
-    selectChange(selection, row) {
-      // 如果selection中存在row代表是选中，否则是取消选中
-      if (
-        selection.find(val => {
-          return crud.getDataId(val) === crud.getDataId(row);
-        })
-      ) {
-        if (row.children) {
-          row.children.forEach(val => {
-            crud.getTable().toggleRowSelection(val, true);
-            selection.push(val);
-            if (val.children) {
-              crud.selectChange(selection, val);
-            }
-          });
-        }
-      } else {
-        crud.toggleRowSelection(selection, row);
-      }
-    },
-    /**
-     * 切换选中状态
-     * @param selection
-     * @param data
-     */
-    toggleRowSelection(selection, data) {
-      if (data.children) {
-        data.children.forEach(val => {
-          crud.getTable().toggleRowSelection(val, false);
-          if (val.children) {
-            crud.toggleRowSelection(selection, val);
-          }
-        });
-      }
-    },
-    findVM(type) {
-      return crud.vms.find(vm => vm && vm.type === type).vm;
-    },
-    notify(title, type = CRUD.NOTIFICATION_TYPE.INFO) {
-      crud.vms[0].vm.$notify({
-        title,
-        type,
-        duration: 2500,
-      });
-    },
-    updateProp(name, value) {
-      Vue.set(crud.props, name, value);
-    },
-    getDataId(data) {
-      return data[this.idField];
-    },
-    getTable() {
-      return this.findVM('presenter').$refs.table;
-    },
-    attchTable() {
-      const table = this.getTable();
-      this.updateProp('table', table);
-      const that = this;
-      table.$on('expand-change', (row, expanded) => {
-        if (!expanded) {
-          return;
-        }
-        const lazyTreeNodeMap = table.store.states.lazyTreeNodeMap;
-        row.children = lazyTreeNodeMap[crud.getDataId(row)];
-        if (row.children) {
-          row.children.forEach(ele => {
-            const id = crud.getDataId(ele);
-            if (that.dataStatus[id] === undefined) {
-              that.dataStatus[id] = {
-                delete: 0,
-                edit: 0,
-              };
-            }
-          });
-        }
-      });
-    },
-  };
-  const crud = Object.assign({}, data);
-  // 可观测化
-  Vue.observable(crud);
-  // 附加方法
-  Object.assign(crud, methods);
-  // 记录初始默认的查询参数，后续重置查询时使用
-  Object.assign(crud, {
-    defaultQuery: JSON.parse(JSON.stringify(data.query)),
-    // 预留4位存储：组件 主页、头部、分页、表单，调试查看也方便找
-    vms: Array(4),
-    /**
-     * 注册组件实例
-     * @param {String} type 类型
-     * @param {*} vm 组件实例
-     * @param {Number} index 该参数内部使用
-     */
-    registerVM(type, vm, index = -1) {
-      const vmObj = {
-        type,
-        vm: vm,
-      };
-      if (index < 0) {
-        this.vms.push(vmObj);
-        return;
-      }
-      if (index < 4) {
-        // 内置预留vm数
-        this.vms[index] = vmObj;
-        return;
-      }
-      this.vms.length = Math.max(this.vms.length, index);
-      this.vms.splice(index, 1, vmObj);
-    },
-    /**
-     * 取消注册组件实例
-     * @param {*} vm 组件实例
-     */
-    unregisterVM(type, vm) {
-      for (let i = this.vms.length - 1; i >= 0; i--) {
-        if (this.vms[i] === undefined) {
-          continue;
-        }
-        if (this.vms[i].type === type && this.vms[i].vm === vm) {
-          if (i < 4) {
-            // 内置预留vm数
-            this.vms[i] = undefined;
-          } else {
-            this.vms.splice(i, 1);
-          }
-          break;
-        }
-      }
-    },
-  });
-  // 冻结处理，需要扩展数据的话，使用crud.updateProp(name, value)，以crud.props.name形式访问，这个是响应式的，可以做数据绑定
-  Object.freeze(crud);
-  return crud;
-}
-
-// hook VM
-function callVmHook(crud, hook) {
-  const tagHook = crud.tag ? hook + '$' + crud.tag : null;
-  let ret = true;
-  const nargs = [crud];
-  for (let i = 2; i < arguments.length; ++i) {
-    nargs.push(arguments[i]);
-  }
-  // 有些组件扮演了多个角色，调用钩子时，需要去重
-  const vmSet = new Set();
-  crud.vms.forEach(vm => vm && vmSet.add(vm.vm));
-  vmSet.forEach(vm => {
-    if (vm[hook]) {
-      ret = vm[hook].apply(vm, nargs) !== false && ret;
-    }
-    if (tagHook && vm[tagHook]) {
-      ret = vm[tagHook].apply(vm, nargs) !== false && ret;
-    }
-  });
-  return ret;
-}
-
-function mergeOptions(src, opts) {
-  const optsRet = {
-    ...src,
-  };
-  for (const key in src) {
-    if (opts.hasOwnProperty(key)) {
-      optsRet[key] = opts[key];
-    }
-  }
-  return optsRet;
-}
-
-/**
- * 查找crud
- * @param {*} vm
- * @param {string} tag
- */
-function lookupCrud(vm, tag) {
-  tag = tag || vm.$attrs['crud-tag'] || 'default';
-  // function lookupCrud(vm, tag) {
-  if (vm.$crud) {
-    const ret = vm.$crud[tag];
-    if (ret) {
-      return ret;
-    }
-  }
-  return vm.$parent ? lookupCrud(vm.$parent, tag) : undefined;
-}
-
-/**
- * crud主页
- */
-function presenter(crud) {
-  if (crud) {
-    console.warn(
-      '[CRUD warn]: ' + 'please use $options.cruds() { return CRUD(...) or [CRUD(...), ...] }'
-    );
-  }
-  return {
-    data() {
-      // 在data中返回crud，是为了将crud与当前实例关联，组件观测crud相关属性变化
-      return {
-        crud: this.crud,
-      };
-    },
-    beforeCreate() {
-      this.$crud = this.$crud || {};
-      let cruds = this.$options.cruds instanceof Function ? this.$options.cruds() : crud;
-      if (!(cruds instanceof Array)) {
-        cruds = [cruds];
-      }
-      cruds.forEach(ele => {
-        if (this.$crud[ele.tag]) {
-          console.error('[CRUD error]: ' + 'crud with tag [' + ele.tag + ' is already exist');
-        }
-        this.$crud[ele.tag] = ele;
-        ele.registerVM('presenter', this, 0);
-      });
-      this.crud = this.$crud['defalut'] || cruds[0];
-    },
-    methods: {
-      parseTime,
-    },
-    created() {
-      for (const k in this.$crud) {
-        if (this.$crud[k].queryOnPresenterCreated) {
-          this.$crud[k].toQuery();
-        }
-      }
-    },
-    destroyed() {
-      for (const k in this.$crud) {
-        this.$crud[k].unregisterVM('presenter', this);
-      }
-    },
-    mounted() {
-      // 如果table未实例化（例如使用了v-if），请稍后在适当时机crud.attchTable刷新table信息
-      if (this.$refs.table !== undefined) {
-        this.crud.attchTable();
-      }
-    },
-  };
-}
-
-/**
- * 头部
- */
-function header() {
-  return {
-    data() {
-      return {
-        crud: this.crud,
-        query: this.crud.query,
-      };
-    },
-    beforeCreate() {
-      this.crud = lookupCrud(this);
-      this.crud.registerVM('header', this, 1);
-    },
-    destroyed() {
-      this.crud.unregisterVM('header', this);
-    },
-  };
-}
-
-/**
- * 分页
- */
-function pagination() {
-  return {
-    data() {
-      return {
-        crud: this.crud,
-        page: this.crud.page,
-      };
-    },
-    beforeCreate() {
-      this.crud = lookupCrud(this);
-      this.crud.registerVM('pagination', this, 2);
-    },
-    destroyed() {
-      this.crud.unregisterVM('pagination', this);
-    },
-  };
-}
-
-/**
- * 表单
- */
-function form(defaultForm) {
-  return {
-    data() {
-      return {
-        crud: this.crud,
-        form: this.crud.form,
-      };
-    },
-    beforeCreate() {
-      this.crud = lookupCrud(this);
-      this.crud.registerVM('form', this, 3);
-    },
-    created() {
-      this.crud.defaultForm = defaultForm;
-      this.crud.resetForm();
-    },
-    destroyed() {
-      this.crud.unregisterVM('form', this);
-    },
-  };
-}
-
-/**
- * crud
- */
-function crud(options = {}) {
-  const defaultOptions = {
-    type: undefined,
-  };
-  options = mergeOptions(defaultOptions, options);
-  return {
-    data() {
-      return {
-        crud: this.crud,
-      };
-    },
-    beforeCreate() {
-      this.crud = lookupCrud(this);
-      this.crud.registerVM(options.type, this);
-    },
-    destroyed() {
-      this.crud.unregisterVM(options.type, this);
-    },
-  };
-}
-
-/**
- * CRUD钩子
- */
-CRUD.HOOK = {
-  /** 刷新 - 之前 */
-  beforeRefresh: 'beforeCrudRefresh',
-  /** 刷新 - 之后 */
-  afterRefresh: 'afterCrudRefresh',
-  /** 删除 - 之前 */
-  beforeDelete: 'beforeCrudDelete',
-  /** 删除 - 之后 */
-  afterDelete: 'afterCrudDelete',
-  /** 删除取消 - 之前 */
-  beforeDeleteCancel: 'beforeCrudDeleteCancel',
-  /** 删除取消 - 之后 */
-  afterDeleteCancel: 'afterCrudDeleteCancel',
-  /** 新建 - 之前 */
-  beforeToAdd: 'beforeCrudToAdd',
-  /** 新建 - 之后 */
-  afterToAdd: 'afterCrudToAdd',
-  /** 编辑 - 之前 */
-  beforeToEdit: 'beforeCrudToEdit',
-  /** 编辑 - 之后 */
-  afterToEdit: 'afterCrudToEdit',
-  /** 开始 "新建/编辑" - 之前 */
-  beforeToCU: 'beforeCrudToCU',
-  /** 开始 "新建/编辑" - 之后 */
-  afterToCU: 'afterCrudToCU',
-  /** "新建/编辑" 验证 - 之前 */
-  beforeValidateCU: 'beforeCrudValidateCU',
-  /** "新建/编辑" 验证 - 之后 */
-  afterValidateCU: 'afterCrudValidateCU',
-  /** 添加取消 - 之前 */
-  beforeAddCancel: 'beforeCrudAddCancel',
-  /** 添加取消 - 之后 */
-  afterAddCancel: 'afterCrudAddCancel',
-  /** 编辑取消 - 之前 */
-  beforeEditCancel: 'beforeCrudEditCancel',
-  /** 编辑取消 - 之后 */
-  afterEditCancel: 'afterCrudEditCancel',
-  /** 提交 - 之前 */
-  beforeSubmit: 'beforeCrudSubmitCU',
-  /** 提交 - 之后 */
-  afterSubmit: 'afterCrudSubmitCU',
-  afterAddError: 'afterCrudAddError',
-  afterEditError: 'afterCrudEditError',
-};
-
-/**
- * CRUD状态
- */
-CRUD.STATUS = {
-  NORMAL: 0,
-  PREPARED: 1,
-  PROCESSING: 2,
-};
-
-/**
- * CRUD通知类型
- */
-CRUD.NOTIFICATION_TYPE = {
-  SUCCESS: 'success',
-  WARNING: 'warning',
-  INFO: 'info',
-  ERROR: 'error',
-};
-
-export default CRUD;
-
-export { presenter, header, form, pagination, crud };
+import { initData, initDataPost, download } from '@/api/data';
+import { parseTime, downloadFile } from '@/utils/index';
+import Vue from 'vue';
+
+/**
+ * CRUD配置
+ * @author moxun
+ * @param {*} options <br>
+ * @return crud instance.
+ * @example
+ * 要使用多crud时，请在关联crud的组件处使用crud-tag进行标记，如：<jobForm :job-status="dict.job_status" crud-tag="job" />
+ */
+function CRUD(options) {
+  const defaultOptions = {
+    tag: 'default',
+    // id字段名
+    idField: 'id',
+    // 标题
+    title: '',
+    // 请求数据的url
+    url: '',
+    // 表格数据
+    data: [],
+    // 选择项
+    selections: [],
+    // 待查询的对象
+    query: {},
+    // 查询数据的参数
+    params: {},
+    // Form 表单
+    form: {},
+    // 重置表单
+    defaultForm: () => {},
+    // 排序规则，默认 id 降序， 支持多字段排序 ['id,desc', 'createTime,asc']
+    sort: ['id,desc'],
+    // 等待时间
+    time: 50,
+    // CRUD Method
+    crudMethod: {
+      add: form => {},
+      del: id => {},
+      edit: form => {},
+      get: id => {},
+    },
+    // 主页操作栏显示哪些按钮
+    optShow: {
+      add: true,
+      edit: false,
+      del: false,
+      download: false,
+      reset: false,
+    },
+    // 自定义一些扩展属性
+    props: {},
+    // 在主页准备
+    queryOnPresenterCreated: true,
+    // 调试开关
+    debug: false,
+    type: '',
+  };
+  options = mergeOptions(defaultOptions, options);
+  const data = {
+    ...options,
+    // 记录数据状态
+    dataStatus: {},
+    status: {
+      add: CRUD.STATUS.NORMAL,
+      edit: CRUD.STATUS.NORMAL,
+      // 添加或编辑状态
+      get cu() {
+        if (this.add === CRUD.STATUS.NORMAL && this.edit === CRUD.STATUS.NORMAL) {
+          return CRUD.STATUS.NORMAL;
+        } else if (this.add === CRUD.STATUS.PREPARED || this.edit === CRUD.STATUS.PREPARED) {
+          return CRUD.STATUS.PREPARED;
+        } else if (this.add === CRUD.STATUS.PROCESSING || this.edit === CRUD.STATUS.PROCESSING) {
+          return CRUD.STATUS.PROCESSING;
+        }
+        throw new Error("wrong crud's cu status");
+      },
+      // 标题
+      get title() {
+        return this.add > CRUD.STATUS.NORMAL
+          ? `新增${crud.title}`
+          : this.edit > CRUD.STATUS.NORMAL
+            ? `编辑${crud.title}`
+            : crud.title;
+      },
+    },
+    msg: {
+      submit: '提交成功',
+      add: '新增成功',
+      edit: '编辑成功',
+      del: '删除成功',
+    },
+    page: {
+      // 页码
+      page: 0,
+      // 每页数据条数
+      size: 10,
+      // 总数据条数
+      total: 0,
+    },
+    // 整体loading
+    loading: false,
+    // 导出的 Loading
+    downloadLoading: false,
+    // 删除的 Loading
+    delAllLoading: false,
+  };
+  const methods = {
+    /**
+     * 通用的提示
+     */
+    submitSuccessNotify() {
+      crud.notify(crud.msg.submit, CRUD.NOTIFICATION_TYPE.SUCCESS);
+    },
+    addSuccessNotify() {
+      crud.notify(crud.msg.add, CRUD.NOTIFICATION_TYPE.SUCCESS);
+    },
+    editSuccessNotify() {
+      crud.notify(crud.msg.edit, CRUD.NOTIFICATION_TYPE.SUCCESS);
+    },
+    delSuccessNotify() {
+      crud.notify(crud.msg.del, CRUD.NOTIFICATION_TYPE.SUCCESS);
+    },
+    // 搜索
+    toQuery() {
+      crud.page.page = 1;
+      crud.refresh();
+    },
+    // 刷新
+    refresh() {
+      if (!callVmHook(crud, CRUD.HOOK.beforeRefresh)) {
+        return;
+      }
+      // 没有地址的时候 阻止进行下一步
+      if (!crud.url) return;
+      return new Promise((resolve, reject) => {
+        crud.loading = true;
+        // 请求数据
+        let initDataType = crud.type == 'post' ? initDataPost : initData;
+        initDataType(crud.url, crud.getQueryParams())
+          .then(data => {
+            const table = crud.getTable();
+            if (table && table.lazy) {
+              // 懒加载子节点数据，清掉已加载的数据
+              table.store.states.treeData = {};
+              table.store.states.lazyTreeNodeMap = {};
+            }
+            crud.page.total = data.totalElements;
+            crud.data = data.content;
+            crud.resetDataStatus();
+            // time 毫秒后显示表格
+            setTimeout(() => {
+              crud.loading = false;
+              callVmHook(crud, CRUD.HOOK.afterRefresh);
+            }, crud.time);
+            resolve(data);
+          })
+          .catch(err => {
+            crud.loading = false;
+            reject(err);
+          });
+      });
+    },
+    /**
+     * 启动添加
+     */
+    toAdd() {
+      crud.resetForm();
+      if (
+        !(
+          callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) &&
+          callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form)
+        )
+      ) {
+        return;
+      }
+      crud.status.add = CRUD.STATUS.PREPARED;
+      callVmHook(crud, CRUD.HOOK.afterToAdd, crud.form);
+      callVmHook(crud, CRUD.HOOK.afterToCU, crud.form);
+    },
+    /**
+     * 启动编辑
+     * @param {*} data 数据项
+     */
+    toEdit(data) {
+      crud.resetForm(JSON.parse(JSON.stringify(data)));
+      if (
+        !(
+          callVmHook(crud, CRUD.HOOK.beforeToEdit, crud.form) &&
+          callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form)
+        )
+      ) {
+        return;
+      }
+      crud.status.edit = CRUD.STATUS.PREPARED;
+      crud.getDataStatus(crud.getDataId(data)).edit = CRUD.STATUS.PREPARED;
+      callVmHook(crud, CRUD.HOOK.afterToEdit, crud.form);
+      callVmHook(crud, CRUD.HOOK.afterToCU, crud.form);
+    },
+    /**
+     * 启动删除
+     * @param {*} data 数据项
+     */
+    toDelete(data) {
+      crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.PREPARED;
+    },
+    /**
+     * 取消删除
+     * @param {*} data 数据项
+     */
+    cancelDelete(data) {
+      if (!callVmHook(crud, CRUD.HOOK.beforeDeleteCancel, data)) {
+        return;
+      }
+      crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.NORMAL;
+      callVmHook(crud, CRUD.HOOK.afterDeleteCancel, data);
+    },
+    /**
+     * 取消新增/编辑
+     */
+    cancelCU() {
+      const addStatus = crud.status.add;
+      const editStatus = crud.status.edit;
+      if (addStatus === CRUD.STATUS.PREPARED) {
+        if (!callVmHook(crud, CRUD.HOOK.beforeAddCancel, crud.form)) {
+          return;
+        }
+        crud.status.add = CRUD.STATUS.NORMAL;
+      }
+      if (editStatus === CRUD.STATUS.PREPARED) {
+        if (!callVmHook(crud, CRUD.HOOK.beforeEditCancel, crud.form)) {
+          return;
+        }
+        crud.status.edit = CRUD.STATUS.NORMAL;
+        crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL;
+      }
+      crud.resetForm();
+      if (addStatus === CRUD.STATUS.PREPARED) {
+        callVmHook(crud, CRUD.HOOK.afterAddCancel, crud.form);
+      }
+      if (editStatus === CRUD.STATUS.PREPARED) {
+        callVmHook(crud, CRUD.HOOK.afterEditCancel, crud.form);
+      }
+      // 清除表单验证
+      if (crud.findVM('form').$refs['form']) {
+        crud.findVM('form').$refs['form'].clearValidate();
+      }
+    },
+    /**
+     * 提交新增/编辑
+     */
+    submitCU() {
+      if (!callVmHook(crud, CRUD.HOOK.beforeValidateCU)) {
+        return;
+      }
+      crud.findVM('form').$refs['form'].validate(valid => {
+        if (!valid) {
+          return;
+        }
+        if (!callVmHook(crud, CRUD.HOOK.afterValidateCU)) {
+          return;
+        }
+        if (crud.status.add === CRUD.STATUS.PREPARED) {
+          crud.doAdd();
+        } else if (crud.status.edit === CRUD.STATUS.PREPARED) {
+          crud.doEdit();
+        }
+      });
+    },
+    /**
+     * 执行添加
+     */
+    doAdd() {
+      if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
+        return;
+      }
+      crud.status.add = CRUD.STATUS.PROCESSING;
+      crud.crudMethod
+        .add(crud.form)
+        .then(() => {
+          crud.status.add = CRUD.STATUS.NORMAL;
+          crud.resetForm();
+          crud.addSuccessNotify();
+          callVmHook(crud, CRUD.HOOK.afterSubmit);
+          crud.toQuery();
+        })
+        .catch(() => {
+          crud.status.add = CRUD.STATUS.PREPARED;
+          callVmHook(crud, CRUD.HOOK.afterAddError);
+        });
+    },
+    /**
+     * 执行编辑
+     */
+    doEdit() {
+      if (!callVmHook(crud, CRUD.HOOK.beforeSubmit)) {
+        return;
+      }
+      crud.status.edit = CRUD.STATUS.PROCESSING;
+      crud.crudMethod
+        .edit(crud.form)
+        .then(() => {
+          crud.status.edit = CRUD.STATUS.NORMAL;
+          crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL;
+          crud.editSuccessNotify();
+          crud.resetForm();
+          callVmHook(crud, CRUD.HOOK.afterSubmit);
+          crud.refresh();
+        })
+        .catch(() => {
+          crud.status.edit = CRUD.STATUS.PREPARED;
+          callVmHook(crud, CRUD.HOOK.afterEditError);
+        });
+    },
+    /**
+     * 执行删除
+     * @param {*} data 数据项
+     */
+    doDelete(data) {
+      let delAll = false;
+      let dataStatus;
+      const ids = [];
+      if (data instanceof Array) {
+        delAll = true;
+        data.forEach(val => {
+          ids.push(this.getDataId(val));
+        });
+      } else {
+        ids.push(this.getDataId(data));
+        dataStatus = crud.getDataStatus(this.getDataId(data));
+      }
+      if (!callVmHook(crud, CRUD.HOOK.beforeDelete, data)) {
+        return;
+      }
+      if (!delAll) {
+        dataStatus.delete = CRUD.STATUS.PROCESSING;
+      }
+      return crud.crudMethod
+        .del(ids)
+        .then(() => {
+          if (delAll) {
+            crud.delAllLoading = false;
+          } else dataStatus.delete = CRUD.STATUS.PREPARED;
+          crud.dleChangePage(1);
+          crud.delSuccessNotify();
+          callVmHook(crud, CRUD.HOOK.afterDelete, data);
+          crud.refresh();
+        })
+        .catch(() => {
+          if (delAll) {
+            crud.delAllLoading = false;
+          } else dataStatus.delete = CRUD.STATUS.PREPARED;
+        });
+    },
+    /**
+     * 通用导出
+     */
+    doExport() {
+      crud.downloadLoading = true;
+      download(crud.url + '/download', crud.getQueryParams())
+        .then(result => {
+          crud.downloadLoading = false;
+        })
+        .catch(result => {
+          downloadFile(result, crud.title + '数据', 'xlsx');
+          crud.downloadLoading = false;
+        });
+    },
+    /**
+     * 获取查询参数
+     */
+    getQueryParams: function () {
+      //字符串清空前后空格
+      Object.keys(crud.query).map(key => {
+        if (typeof crud.query[key] == 'string') {
+          crud.query[key] = crud.query[key].trim();
+        }
+      });
+      // 清除参数无值的情况
+      Object.keys(crud.query).length !== 0 &&
+        Object.keys(crud.query).forEach(item => {
+          if (crud.query[item] === null || crud.query[item] === '') crud.query[item] = undefined;
+        });
+      Object.keys(crud.params).length !== 0 &&
+        Object.keys(crud.params).forEach(item => {
+          if (crud.params[item] === null || crud.params[item] === '') crud.params[item] = undefined;
+        });
+      return {
+        page: crud.page.page - 1,
+        size: crud.page.size,
+        sort: crud.sort,
+        ...crud.query,
+        ...crud.params,
+      };
+    },
+    // 当前页改变
+    pageChangeHandler(e) {
+      crud.page.page = e;
+      crud.refresh();
+    },
+    // 每页条数改变
+    sizeChangeHandler(e) {
+      crud.page.size = e;
+      crud.page.page = 1;
+      crud.refresh();
+    },
+    // 预防删除第二页最后一条数据时，或者多选删除第二页的数据时，页码错误导致请求无数据
+    dleChangePage(size) {
+      if (crud.data.length === size && crud.page.page !== 1) {
+        crud.page.page -= 1;
+      }
+    },
+    // 选择改变
+    selectionChangeHandler(val) {
+      crud.selections = val;
+    },
+    /**
+     * 重置查询参数
+     * @param {Boolean} toQuery 重置后进行查询操作
+     */
+    resetQuery(toQuery = true) {
+      const defaultQuery = JSON.parse(JSON.stringify(crud.defaultQuery));
+      const query = crud.query;
+      Object.keys(query).forEach(key => {
+        query[key] = defaultQuery[key];
+      });
+      // 重置参数
+      this.params = {};
+      if (toQuery) {
+        crud.toQuery();
+      }
+    },
+    /**
+     * 重置表单
+     * @param {Array} data 数据
+     */
+    resetForm(data) {
+      const form =
+        data ||
+        (typeof crud.defaultForm === 'object'
+          ? JSON.parse(JSON.stringify(crud.defaultForm))
+          : crud.defaultForm.apply(crud.findVM('form')));
+      const crudFrom = crud.form;
+      for (const key in form) {
+        if (crudFrom.hasOwnProperty(key)) {
+          crudFrom[key] = form[key];
+        } else {
+          Vue.set(crudFrom, key, form[key]);
+        }
+      }
+      // add by ghl 2020-10-04  页面重复添加信息时，下拉框的校验会存在，需要找工取消
+      if (crud.findVM('form').$refs['form']) {
+        crud.findVM('form').$refs['form'].clearValidate();
+      }
+    },
+    /**
+     * 重置数据状态
+     */
+    resetDataStatus() {
+      const dataStatus = {};
+      function resetStatus(datas) {
+        datas = datas || [];
+        datas.forEach(e => {
+          dataStatus[crud.getDataId(e)] = {
+            delete: 0,
+            edit: 0,
+          };
+          if (e.children) {
+            resetStatus(e.children);
+          }
+        });
+      }
+      resetStatus(crud.data);
+      crud.dataStatus = dataStatus;
+    },
+    /**
+     * 获取数据状态
+     * @param {Number | String} id 数据项id
+     */
+    getDataStatus(id) {
+      return crud.dataStatus[id];
+    },
+    /**
+     * 用于树形表格多选, 选中所有
+     * @param selection
+     */
+    selectAllChange(selection) {
+      // 如果选中的数目与请求到的数目相同就选中子节点，否则就清空选中
+      if (selection && selection.length === crud.data.length) {
+        selection.forEach(val => {
+          crud.selectChange(selection, val);
+        });
+      } else {
+        crud.getTable().clearSelection();
+      }
+    },
+    /**
+     * 用于树形表格多选，单选的封装
+     * @param selection
+     * @param row
+     */
+    selectChange(selection, row) {
+      // 如果selection中存在row代表是选中，否则是取消选中
+      if (
+        selection.find(val => {
+          return crud.getDataId(val) === crud.getDataId(row);
+        })
+      ) {
+        if (row.children) {
+          row.children.forEach(val => {
+            crud.getTable().toggleRowSelection(val, true);
+            selection.push(val);
+            if (val.children) {
+              crud.selectChange(selection, val);
+            }
+          });
+        }
+      } else {
+        crud.toggleRowSelection(selection, row);
+      }
+    },
+    /**
+     * 切换选中状态
+     * @param selection
+     * @param data
+     */
+    toggleRowSelection(selection, data) {
+      if (data.children) {
+        data.children.forEach(val => {
+          crud.getTable().toggleRowSelection(val, false);
+          if (val.children) {
+            crud.toggleRowSelection(selection, val);
+          }
+        });
+      }
+    },
+    findVM(type) {
+      return crud.vms.find(vm => vm && vm.type === type).vm;
+    },
+    notify(title, type = CRUD.NOTIFICATION_TYPE.INFO) {
+      crud.vms[0].vm.$notify({
+        title,
+        type,
+        duration: 2500,
+      });
+    },
+    updateProp(name, value) {
+      Vue.set(crud.props, name, value);
+    },
+    getDataId(data) {
+      return data[this.idField];
+    },
+    getTable() {
+      return this.findVM('presenter').$refs.table;
+    },
+    attchTable() {
+      const table = this.getTable();
+      this.updateProp('table', table);
+      const that = this;
+      table.$on('expand-change', (row, expanded) => {
+        if (!expanded) {
+          return;
+        }
+        const lazyTreeNodeMap = table.store.states.lazyTreeNodeMap;
+        row.children = lazyTreeNodeMap[crud.getDataId(row)];
+        if (row.children) {
+          row.children.forEach(ele => {
+            const id = crud.getDataId(ele);
+            if (that.dataStatus[id] === undefined) {
+              that.dataStatus[id] = {
+                delete: 0,
+                edit: 0,
+              };
+            }
+          });
+        }
+      });
+    },
+  };
+  const crud = Object.assign({}, data);
+  // 可观测化
+  Vue.observable(crud);
+  // 附加方法
+  Object.assign(crud, methods);
+  // 记录初始默认的查询参数，后续重置查询时使用
+  Object.assign(crud, {
+    defaultQuery: JSON.parse(JSON.stringify(data.query)),
+    // 预留4位存储：组件 主页、头部、分页、表单，调试查看也方便找
+    vms: Array(4),
+    /**
+     * 注册组件实例
+     * @param {String} type 类型
+     * @param {*} vm 组件实例
+     * @param {Number} index 该参数内部使用
+     */
+    registerVM(type, vm, index = -1) {
+      const vmObj = {
+        type,
+        vm: vm,
+      };
+      if (index < 0) {
+        this.vms.push(vmObj);
+        return;
+      }
+      if (index < 4) {
+        // 内置预留vm数
+        this.vms[index] = vmObj;
+        return;
+      }
+      this.vms.length = Math.max(this.vms.length, index);
+      this.vms.splice(index, 1, vmObj);
+    },
+    /**
+     * 取消注册组件实例
+     * @param {*} vm 组件实例
+     */
+    unregisterVM(type, vm) {
+      for (let i = this.vms.length - 1; i >= 0; i--) {
+        if (this.vms[i] === undefined) {
+          continue;
+        }
+        if (this.vms[i].type === type && this.vms[i].vm === vm) {
+          if (i < 4) {
+            // 内置预留vm数
+            this.vms[i] = undefined;
+          } else {
+            this.vms.splice(i, 1);
+          }
+          break;
+        }
+      }
+    },
+  });
+  // 冻结处理，需要扩展数据的话，使用crud.updateProp(name, value)，以crud.props.name形式访问，这个是响应式的，可以做数据绑定
+  Object.freeze(crud);
+  return crud;
+}
+
+// hook VM
+function callVmHook(crud, hook) {
+  const tagHook = crud.tag ? hook + '$' + crud.tag : null;
+  let ret = true;
+  const nargs = [crud];
+  for (let i = 2; i < arguments.length; ++i) {
+    nargs.push(arguments[i]);
+  }
+  // 有些组件扮演了多个角色，调用钩子时，需要去重
+  const vmSet = new Set();
+  crud.vms.forEach(vm => vm && vmSet.add(vm.vm));
+  vmSet.forEach(vm => {
+    if (vm[hook]) {
+      ret = vm[hook].apply(vm, nargs) !== false && ret;
+    }
+    if (tagHook && vm[tagHook]) {
+      ret = vm[tagHook].apply(vm, nargs) !== false && ret;
+    }
+  });
+  return ret;
+}
+
+function mergeOptions(src, opts) {
+  const optsRet = {
+    ...src,
+  };
+  for (const key in src) {
+    if (opts.hasOwnProperty(key)) {
+      optsRet[key] = opts[key];
+    }
+  }
+  return optsRet;
+}
+
+/**
+ * 查找crud
+ * @param {*} vm
+ * @param {string} tag
+ */
+function lookupCrud(vm, tag) {
+  tag = tag || vm.$attrs['crud-tag'] || 'default';
+  // function lookupCrud(vm, tag) {
+  if (vm.$crud) {
+    const ret = vm.$crud[tag];
+    if (ret) {
+      return ret;
+    }
+  }
+  return vm.$parent ? lookupCrud(vm.$parent, tag) : undefined;
+}
+
+/**
+ * crud主页
+ */
+function presenter(crud) {
+  if (crud) {
+    console.warn(
+      '[CRUD warn]: ' + 'please use $options.cruds() { return CRUD(...) or [CRUD(...), ...] }'
+    );
+  }
+  return {
+    data() {
+      // 在data中返回crud，是为了将crud与当前实例关联，组件观测crud相关属性变化
+      return {
+        crud: this.crud,
+      };
+    },
+    beforeCreate() {
+      this.$crud = this.$crud || {};
+      let cruds = this.$options.cruds instanceof Function ? this.$options.cruds() : crud;
+      if (!(cruds instanceof Array)) {
+        cruds = [cruds];
+      }
+      cruds.forEach(ele => {
+        if (this.$crud[ele.tag]) {
+          console.error('[CRUD error]: ' + 'crud with tag [' + ele.tag + ' is already exist');
+        }
+        this.$crud[ele.tag] = ele;
+        ele.registerVM('presenter', this, 0);
+      });
+      this.crud = this.$crud['defalut'] || cruds[0];
+    },
+    methods: {
+      parseTime,
+    },
+    created() {
+      for (const k in this.$crud) {
+        if (this.$crud[k].queryOnPresenterCreated) {
+          this.$crud[k].toQuery();
+        }
+      }
+    },
+    destroyed() {
+      for (const k in this.$crud) {
+        this.$crud[k].unregisterVM('presenter', this);
+      }
+    },
+    mounted() {
+      // 如果table未实例化（例如使用了v-if），请稍后在适当时机crud.attchTable刷新table信息
+      if (this.$refs.table !== undefined) {
+        this.crud.attchTable();
+      }
+    },
+  };
+}
+
+/**
+ * 头部
+ */
+function header() {
+  return {
+    data() {
+      return {
+        crud: this.crud,
+        query: this.crud.query,
+      };
+    },
+    beforeCreate() {
+      this.crud = lookupCrud(this);
+      this.crud.registerVM('header', this, 1);
+    },
+    destroyed() {
+      this.crud.unregisterVM('header', this);
+    },
+  };
+}
+
+/**
+ * 分页
+ */
+function pagination() {
+  return {
+    data() {
+      return {
+        crud: this.crud,
+        page: this.crud.page,
+      };
+    },
+    beforeCreate() {
+      this.crud = lookupCrud(this);
+      this.crud.registerVM('pagination', this, 2);
+    },
+    destroyed() {
+      this.crud.unregisterVM('pagination', this);
+    },
+  };
+}
+
+/**
+ * 表单
+ */
+function form(defaultForm) {
+  return {
+    data() {
+      return {
+        crud: this.crud,
+        form: this.crud.form,
+      };
+    },
+    beforeCreate() {
+      this.crud = lookupCrud(this);
+      this.crud.registerVM('form', this, 3);
+    },
+    created() {
+      this.crud.defaultForm = defaultForm;
+      this.crud.resetForm();
+    },
+    destroyed() {
+      this.crud.unregisterVM('form', this);
+    },
+  };
+}
+
+/**
+ * crud
+ */
+function crud(options = {}) {
+  const defaultOptions = {
+    type: undefined,
+  };
+  options = mergeOptions(defaultOptions, options);
+  return {
+    data() {
+      return {
+        crud: this.crud,
+      };
+    },
+    beforeCreate() {
+      this.crud = lookupCrud(this);
+      this.crud.registerVM(options.type, this);
+    },
+    destroyed() {
+      this.crud.unregisterVM(options.type, this);
+    },
+  };
+}
+
+/**
+ * CRUD钩子
+ */
+CRUD.HOOK = {
+  /** 刷新 - 之前 */
+  beforeRefresh: 'beforeCrudRefresh',
+  /** 刷新 - 之后 */
+  afterRefresh: 'afterCrudRefresh',
+  /** 删除 - 之前 */
+  beforeDelete: 'beforeCrudDelete',
+  /** 删除 - 之后 */
+  afterDelete: 'afterCrudDelete',
+  /** 删除取消 - 之前 */
+  beforeDeleteCancel: 'beforeCrudDeleteCancel',
+  /** 删除取消 - 之后 */
+  afterDeleteCancel: 'afterCrudDeleteCancel',
+  /** 新建 - 之前 */
+  beforeToAdd: 'beforeCrudToAdd',
+  /** 新建 - 之后 */
+  afterToAdd: 'afterCrudToAdd',
+  /** 编辑 - 之前 */
+  beforeToEdit: 'beforeCrudToEdit',
+  /** 编辑 - 之后 */
+  afterToEdit: 'afterCrudToEdit',
+  /** 开始 "新建/编辑" - 之前 */
+  beforeToCU: 'beforeCrudToCU',
+  /** 开始 "新建/编辑" - 之后 */
+  afterToCU: 'afterCrudToCU',
+  /** "新建/编辑" 验证 - 之前 */
+  beforeValidateCU: 'beforeCrudValidateCU',
+  /** "新建/编辑" 验证 - 之后 */
+  afterValidateCU: 'afterCrudValidateCU',
+  /** 添加取消 - 之前 */
+  beforeAddCancel: 'beforeCrudAddCancel',
+  /** 添加取消 - 之后 */
+  afterAddCancel: 'afterCrudAddCancel',
+  /** 编辑取消 - 之前 */
+  beforeEditCancel: 'beforeCrudEditCancel',
+  /** 编辑取消 - 之后 */
+  afterEditCancel: 'afterCrudEditCancel',
+  /** 提交 - 之前 */
+  beforeSubmit: 'beforeCrudSubmitCU',
+  /** 提交 - 之后 */
+  afterSubmit: 'afterCrudSubmitCU',
+  afterAddError: 'afterCrudAddError',
+  afterEditError: 'afterCrudEditError',
+};
+
+/**
+ * CRUD状态
+ */
+CRUD.STATUS = {
+  NORMAL: 0,
+  PREPARED: 1,
+  PROCESSING: 2,
+};
+
+/**
+ * CRUD通知类型
+ */
+CRUD.NOTIFICATION_TYPE = {
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  INFO: 'info',
+  ERROR: 'error',
+};
+
+export default CRUD;
+
+export { presenter, header, form, pagination, crud };