@vue-start/pro 0.1.0

package/dist/index.es.js

@@ -0,0 +1,728 @@
+import { defineComponent, computed, reactive, inject, h, provide } from 'vue';
+import { map, isString, forEach, get, isObject, isEmpty, isArray, isFunction, mergeWith, reduce, keys, omit, filter as filter$1, sortBy, pick, split } from 'lodash';
+import { filter, tap, merge, Subject } from 'rxjs';
+import { useEffect, setReactiveValue } from '@vue-start/hooks';
+import { useRequestProvide, isFailedRequestActor, isPreRequestActor, isDoneRequestActor } from '@vue-start/request';
+
+const createUseRequestActor = filterFun => (actors, callback) => {
+  const {
+    requestSubject$
+  } = useRequestProvide();
+  const nameSet = new Set(map(actors, actor => isString(actor) ? actor : actor.name));
+  useEffect(() => {
+    const sub = requestSubject$.pipe(filter(filterFun), tap(actor => {
+      if (nameSet.has(actor.name)) {
+        callback(actor);
+      }
+    })).subscribe();
+    return () => {
+      sub.unsubscribe();
+    };
+  }, []);
+};
+
+const useDoneRequestActor = createUseRequestActor(isDoneRequestActor);
+const useFailedRequestActor = createUseRequestActor(isFailedRequestActor);
+const useComposeRequestActor = (actors, options, cancelWhileUnmount) => {
+  const {
+    requestSubject$,
+    dispatchRequest
+  } = useRequestProvide();
+  const nameSet = new Set(map(actors, actor => isString(actor) ? actor : actor.name));
+  const lastRequestActors = {};
+  useEffect(() => {
+    const sub = merge(requestSubject$.pipe(filter(isPreRequestActor), tap(actor => {
+      if (nameSet.has(actor.name)) {
+        var _options$onStart;
+
+        (_options$onStart = options.onStart) === null || _options$onStart === void 0 ? void 0 : _options$onStart.call(options, actor);
+        lastRequestActors[actor.name] = actor;
+      }
+    })), requestSubject$.pipe(filter(isDoneRequestActor), tap(actor => {
+      if (nameSet.has(actor.name)) {
+        var _options$onSuccess, _options$onFinish;
+
+        (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options, actor);
+        (_options$onFinish = options.onFinish) === null || _options$onFinish === void 0 ? void 0 : _options$onFinish.call(options, actor);
+        lastRequestActors[actor.name] = undefined;
+      }
+    })), requestSubject$.pipe(filter(isFailedRequestActor), tap(actor => {
+      if (nameSet.has(actor.name)) {
+        var _options$onFailed, _options$onFinish2;
+
+        (_options$onFailed = options.onFailed) === null || _options$onFailed === void 0 ? void 0 : _options$onFailed.call(options, actor);
+        (_options$onFinish2 = options.onFinish) === null || _options$onFinish2 === void 0 ? void 0 : _options$onFinish2.call(options, actor);
+        lastRequestActors[actor.name] = undefined;
+      }
+    }))).subscribe();
+    return () => {
+      sub.unsubscribe();
+
+      if (cancelWhileUnmount) {
+        //组件销毁的时候cancel请求
+        forEach(lastRequestActors, actor => {
+          actor && dispatchRequest({ ...actor,
+            stage: "CANCEL"
+          });
+        });
+      }
+    };
+  }, []);
+};
+
+/**
+ * 获取Column的valueType，默认"text"
+ * @param column
+ */
+
+const getColumnValueType = column => {
+  return column.formValueType || column.valueType || "text";
+};
+/**
+ *获取Column的FormItem name
+ * @param column
+ */
+
+const getColumnFormItemName = column => {
+  var _column$formItemProps;
+
+  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
+ */
+
+const getFormItemEl = (formElementMap, column, needRules = true) => {
+  var _column$formFieldProp;
+
+  const valueType = getColumnValueType(column);
+  const Comp = get(formElementMap, valueType);
+
+  if (!Comp) {
+    return null;
+  }
+
+  const name = getColumnFormItemName(column);
+  const itemProps = needRules ? column.formItemProps : omit(column.formItemProps, "rules");
+  return h(Comp, {
+    key: name,
+    name,
+    label: column.title,
+    ...itemProps,
+    fieldProps: omit(column.formFieldProps, "slots"),
+    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
+ */
+
+const getItemEl = (elementMap, column, value) => {
+  var _column$formFieldProp2;
+
+  const valueType = column.valueType || "text";
+  const Comp = get(elementMap, valueType);
+
+  if (!Comp) {
+    return null;
+  }
+
+  return h(Comp, { ...omit(column.formFieldProps, "slots"),
+    showProps: column.showProps,
+    value
+  }, (_column$formFieldProp2 = column.formFieldProps) === null || _column$formFieldProp2 === void 0 ? void 0 : _column$formFieldProp2.slots);
+};
+const ProModuleKey = Symbol("pro-module");
+const useProModule = () => inject(ProModuleKey);
+const provideProModule = ctx => {
+  provide(ProModuleKey, ctx);
+};
+const RequestAction = {
+  Success: "request-success$",
+  Fail: "request-fail$"
+};
+
+const proModuleProps = () => ({
+  /**
+   * module状态
+   */
+  state: {
+    type: Object
+  },
+
+  /**
+   * 配置（静态）
+   */
+  columns: {
+    type: Array
+  },
+
+  /**
+   * 配置（动态）
+   * columns动态属性兼容
+   */
+  columnState: {
+    type: Object
+  },
+
+  /**
+   * 展示组件集
+   */
+  elementMap: {
+    type: Object
+  },
+
+  /**
+   * 录入组件集
+   */
+  formElementMap: {
+    type: Object
+  },
+
+  /**
+   * requests
+   */
+  requests: {
+    type: Array
+  }
+});
+
+const ProModule = defineComponent({
+  props: { ...proModuleProps()
+  },
+  setup: (props, {
+    slots
+  }) => {
+    /**
+     * columns columnState 合并
+     */
+    const columns = computed(() => {
+      return map(props.columns, item => {
+        //如果columnState中有值，merge处理
+        const mapData = get(props.columnState, getColumnFormItemName(item));
+
+        if (isObject(mapData) && !isEmpty(mapData) && !isArray(mapData) && !isFunction(mapData)) {
+          //合并
+          return mergeWith(item, mapData, (objValue, srcValue) => {
+            //如果是数组，替换
+            if (isArray(objValue) || isArray(srcValue)) {
+              return srcValue;
+            }
+          });
+        }
+
+        return item;
+      });
+    });
+    /*********************************** 渲染组件 ***************************************/
+    // 获取FormItem VNode
+
+    const getFormItemVNode = (column, needRules = true) => {
+      return getFormItemEl(props.formElementMap, column, needRules);
+    }; // 获取Item VNode
+
+
+    const getItemVNode = (column, value) => {
+      return getItemEl(props.elementMap, column, value);
+    };
+    /*********************************** 事件处理 ***************************************/
+
+
+    const subject$ = new Subject(); //发送Module事件
+
+    const sendEvent = action => {
+      subject$.next(action);
+    };
+    /*********************************** 页面状态 ***************************************/
+
+
+    const state = props.state || reactive({});
+
+    const dispatch = action => {
+      //如果要更新的属性值是 object ，执行覆盖操作
+      if (isObject(state[action.type])) {
+        setReactiveValue(state[action.type], action.payload);
+        return;
+      }
+
+      state[action.type] = action.payload;
+    };
+    /*********************************** request ***************************************/
+
+
+    const {
+      dispatchRequest
+    } = useRequestProvide();
+    const requestMap = reduce(props.requests, (pair, item) => ({ ...pair,
+      [item.actor.name]: item
+    }), {});
+    const actionMap = reduce(props.requests, (pair, item) => ({ ...pair,
+      [item.action]: item
+    }), {}); //发送请求
+
+    const sendRequest = (requestNameOrAction, ...params) => {
+      const requestOpts = get(requestMap, requestNameOrAction) || get(actionMap, requestNameOrAction);
+
+      if (!requestOpts) {
+        return;
+      }
+
+      let nextParams;
+
+      if (requestOpts.convertParams) {
+        nextParams = requestOpts.convertParams(...params);
+      } else {
+        nextParams = get(params, 0);
+      }
+
+      dispatchRequest(requestOpts.actor, nextParams);
+    };
+
+    useComposeRequestActor(keys(requestMap), {
+      onStart: actor => {
+        //如果设置了loading，将请求状态维护到state中
+        const loadingName = get(requestMap, [actor.name, "loadingName"]);
+
+        if (loadingName) {
+          dispatch({
+            type: loadingName,
+            payload: true
+          });
+        }
+      },
+      onSuccess: actor => {
+        var _requestOpts$onSucces;
+
+        const requestOpts = get(requestMap, actor.name); //如果设置了stateName，将结果维护到state中
+
+        if (requestOpts !== null && requestOpts !== void 0 && requestOpts.stateName) {
+          var _actor$res;
+
+          const data = requestOpts.convertData ? requestOpts.convertData(actor) : (_actor$res = actor.res) === null || _actor$res === void 0 ? void 0 : _actor$res.data;
+          dispatch({
+            type: requestOpts.stateName,
+            payload: data
+          });
+        } //发送成功事件
+
+
+        sendEvent({
+          type: RequestAction.Success,
+          payload: {
+            actor
+          }
+        }); //回调事件
+
+        (_requestOpts$onSucces = requestOpts.onSuccess) === null || _requestOpts$onSucces === void 0 ? void 0 : _requestOpts$onSucces.call(requestOpts, actor);
+      },
+      onFailed: actor => {
+        var _requestOpts$onFailed;
+
+        const requestOpts = get(requestMap, actor.name); //发送失败事件
+
+        sendEvent({
+          type: RequestAction.Fail,
+          payload: {
+            actor
+          }
+        }); //回调事件
+
+        (_requestOpts$onFailed = requestOpts.onFailed) === null || _requestOpts$onFailed === void 0 ? void 0 : _requestOpts$onFailed.call(requestOpts, actor);
+      },
+      onFinish: actor => {
+        const loadingName = get(requestMap, [actor.name, "loadingName"]);
+
+        if (loadingName) {
+          dispatch({
+            type: loadingName,
+            payload: false
+          });
+        }
+      }
+    }, true);
+    provideProModule({
+      columns,
+      getFormItemVNode,
+      getItemVNode,
+      elementMap: props.elementMap,
+      formElementMap: props.formElementMap,
+      //
+      subject$,
+      sendEvent,
+      //
+      state,
+      dispatch,
+      //
+      requests: props.requests,
+      sendRequest
+    });
+    return () => {
+      var _slots$default;
+
+      return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
+    };
+  }
+});
+
+//订阅module事件
+const useModuleEvent = cb => {
+  const {
+    subject$
+  } = useProModule();
+  useEffect(() => {
+    const sub = subject$.subscribe({
+      next: action => {
+        cb(action);
+      }
+    });
+    return () => {
+      return sub.unsubscribe();
+    };
+  }, []);
+};
+
+const ProCurdKey = Symbol("pro-curd");
+const useProCurd = () => inject(ProCurdKey);
+const provideProCurd = ctx => provide(ProCurdKey, ctx);
+/************************************ 常量 *************************************/
+
+/**
+ * curd 5种action
+ */
+
+let CurdAction;
+
+(function (CurdAction) {
+  CurdAction["LIST"] = "LIST";
+  CurdAction["DETAIL"] = "DETAIL";
+  CurdAction["ADD"] = "ADD";
+  CurdAction["EDIT"] = "EDIT";
+  CurdAction["DELETE"] = "DELETE";
+})(CurdAction || (CurdAction = {}));
+
+/**
+ * curd 操作模式
+ */
+let CurdCurrentMode;
+
+(function (CurdCurrentMode) {
+  CurdCurrentMode["ADD"] = "ADD";
+  CurdCurrentMode["EDIT"] = "EDIT";
+  CurdCurrentMode["DETAIL"] = "DETAIL";
+})(CurdCurrentMode || (CurdCurrentMode = {}));
+
+/**
+ * curd add 模式下 标记 "确定" "确定并继续" 触发
+ */
+let CurdAddAction;
+
+(function (CurdAddAction) {
+  CurdAddAction["NORMAL"] = "NORMAL";
+  CurdAddAction["CONTINUE"] = "CONTINUE";
+})(CurdAddAction || (CurdAddAction = {}));
+
+const proCurdProps = () => ({
+  /**
+   * 列表 或 详情 的唯一标识
+   */
+  rowKey: {
+    type: String,
+    default: "id"
+  },
+
+  /**
+   * operates
+   */
+  operates: {
+    type: Array
+  },
+
+  /************************* 子组件props *******************************/
+  listProps: {
+    type: Object
+  },
+  formProps: {
+    type: Object
+  },
+  descProps: {
+    type: Object
+  },
+  modalProps: {
+    type: Object
+  }
+});
+
+const Curd = defineComponent({
+  props: { ...proCurdProps()
+  },
+  setup: (props, {
+    slots
+  }) => {
+    const {
+      columns,
+      state,
+      sendEvent,
+      sendRequest
+    } = useProModule();
+    /**
+     * 排序
+     * @param list
+     * @param propName
+     */
+
+    const dealSort = (list, propName) => {
+      return sortBy(list, item => get(item, propName));
+    };
+    /**
+     * 非 hideInForm columns
+     */
+
+
+    const formColumns = computed(() => {
+      return dealSort(filter$1(columns.value, item => !item.hideInForm), "formSort");
+    });
+    /**
+     * 非 hideInDetail columns
+     */
+
+    const descColumns = computed(() => {
+      return dealSort(filter$1(columns.value, item => !item.hideInDetail), "descSort");
+    });
+    /**
+     *  非 hideInTable columns
+     */
+
+    const tableColumns = computed(() => {
+      return dealSort(filter$1(columns.value, item => !item.hideInTable), "tableSort");
+    });
+    /**
+     * search columns
+     */
+
+    const searchColumns = computed(() => {
+      return dealSort(filter$1(columns.value, item => !!item.search), "searchSort");
+    });
+    /******************************** 逻辑 *************************************/
+    //上一次发起列表请求的参数
+
+    let prevListParams; //刷新列表
+
+    const handleSearch = extra => {
+      sendRequest(CurdAction.LIST, { ...prevListParams,
+        ...extra
+      });
+    }; //发送事件
+
+
+    const sendCurdEvent = event => {
+      sendEvent({
+        type: event.action,
+        payload: omit(event, "action")
+      });
+    }; //事件订阅
+
+
+    useModuleEvent(event => {
+      if (event.type === RequestAction.Success) {
+        return;
+      } else if (event.type === RequestAction.Fail) {
+        return;
+      }
+
+      const action = event.type;
+      const {
+        type,
+        values,
+        record
+      } = event.payload;
+
+      switch (action) {
+        case CurdAction.LIST:
+          if (type === "emit") {
+            prevListParams = values;
+            handleSearch();
+          }
+
+          return;
+
+        case CurdAction.ADD:
+          if (type === "execute") {
+            sendRequest(CurdAction.ADD, values, state.detailData);
+          }
+
+          return;
+
+        case CurdAction.EDIT:
+          if (type === "execute") {
+            sendRequest(CurdAction.EDIT, values, state.detailData);
+          }
+
+          return;
+
+        case CurdAction.DELETE:
+          if (type === "emit") {
+            sendRequest(CurdAction.DELETE, record, props.rowKey);
+          }
+
+          return;
+      }
+    });
+    const operateMap = reduce(props.operates, (pair, item) => ({ ...pair,
+      [item.action]: item
+    }), {}); //根据Action获取ICurdOperateOpts
+
+    const getOperate = action => {
+      return get(operateMap, action);
+    };
+
+    provideProCurd({
+      rowKey: props.rowKey,
+      curdState: state,
+      formColumns,
+      descColumns,
+      tableColumns,
+      searchColumns,
+      //
+      sendCurdEvent,
+      //
+      getOperate,
+      //
+      listProps: props.listProps,
+      formProps: props.formProps,
+      descProps: props.descProps,
+      modalProps: props.modalProps
+    });
+    return () => {
+      var _slots$default;
+
+      return (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
+    };
+  }
+});
+const ProCurd = defineComponent({
+  props: { ...ProModule.props,
+    ...Curd.props
+  },
+  setup: (props, {
+    slots
+  }) => {
+    const curdState = props.curdState || reactive({
+      detailData: {}
+    });
+    /****************** 请求处理 **********************/
+    //curd默认网络属性
+
+    const curdOperateOpts = {
+      [CurdAction.LIST]: {
+        convertParams: values => values,
+        convertData: actor => {
+          var _actor$res;
+
+          return (_actor$res = actor.res) === null || _actor$res === void 0 ? void 0 : _actor$res.data;
+        },
+        loadingName: "listLoading",
+        stateName: "listData"
+      },
+      [CurdAction.DETAIL]: {
+        convertParams: (record, rowKey) => pick(record, rowKey),
+        convertData: actor => {
+          var _actor$res2;
+
+          return (_actor$res2 = actor.res) === null || _actor$res2 === void 0 ? void 0 : _actor$res2.data;
+        },
+        loadingName: "detailLoading",
+        stateName: "detailData",
+        label: "详情"
+      },
+      [CurdAction.ADD]: {
+        convertParams: (values, record) => ({
+          body: { ...record,
+            ...values
+          }
+        }),
+        loadingName: "operateLoading",
+        label: "添加"
+      },
+      [CurdAction.EDIT]: {
+        convertParams: (values, record) => ({
+          body: { ...record,
+            ...values
+          }
+        }),
+        loadingName: "operateLoading",
+        label: "编辑"
+      },
+      [CurdAction.DELETE]: {
+        convertParams: (values, record) => ({
+          body: { ...record,
+            ...values
+          }
+        }),
+        label: "删除"
+      }
+    };
+    const requests = map(props.operates, item => {
+      const curdOpts = get(curdOperateOpts, item.action);
+      return { ...curdOpts,
+        ...item
+      };
+    });
+    const moduleKeys = keys(ProModule.props);
+    return () => {
+      return h(ProModule, { ...pick(props, moduleKeys),
+        state: curdState,
+        requests
+      }, h(Curd, { ...omit(props, ...moduleKeys, "curdState")
+      }, slots));
+    };
+  }
+});
+
+/**
+ * 剔除showState或showStateRules规则为!true的值
+ * @param values
+ * @param showState
+ * @param showStateRules
+ */
+const getValidValues = (values, showState, showStateRules) => {
+  if (showState) {
+    const invalidKeys = filter$1(keys(showState), key => !showState[key]);
+    return omit(values, invalidKeys);
+  }
+
+  if (showStateRules) {
+    const invalidKeys = filter$1(keys(showStateRules), key => !showStateRules[key](values));
+    return omit(values, invalidKeys);
+  }
+
+  return values;
+};
+/**
+ * string类型的path转为arr
+ * @param path
+ */
+
+const convertPathToList = path => {
+  if (!path) {
+    return undefined;
+  }
+
+  if (isArray(path)) {
+    return path;
+  }
+
+  if (path && isString(path) && path.indexOf(".") > 0) {
+    return split(path, ".");
+  }
+
+  return [path];
+};
+
+export { CurdAction, CurdAddAction, CurdCurrentMode, ProCurd, ProModule, RequestAction, convertPathToList, getColumnFormItemName, getColumnValueType, getFormItemEl, getItemEl, getValidValues, provideProCurd, provideProModule, useComposeRequestActor, useDoneRequestActor, useFailedRequestActor, useModuleEvent, useProCurd, useProModule };