sunmao-sdk/src/schema/sdkSchema.js

榫卯-开箱即用赋能-sdk

import { message } from "antd";
import lodash from "lodash";
import { getNew } from "../net/request";
import * as Api from "../net/api";
import * as formUtils from "../utils/formUtils";
import * as ModalFactory from "../component/ModalFactory";

/**
 * 页面基础信息
 */
export const pageBase = {
  pageFlag: {
    title: "页面路径",
    type: "string",
    "ui:options": {
      placeholder: "/开头，如/home"
    },
    "ui:width": "50%"
  }
};
/**
 * 页面包含多tab页
 */
export const tabBase = {
  name: {
    title: "名称",
    type: "string",
    "ui:options": {
      placeholder: "名称"
    },
    "ui:width": "50%"
  }
};
/**
 * 接口基础信息
 */
export const reqBase = {
  url: {
    title: "请求接口",
    type: "string",
    "ui:options": {
      placeholder: "请求接口" //,表格未配置默认取对应api中getList
    },
    "ui:width": "50%"
  },
  okPath: {
    title: "成功数据",
    type: "string",
    "ui:options": {
      placeholder: "默认 data;请求成功数据路径 "
    },
    "ui:width": "25%"
  }
};
export const reqQuery = {
  totalPath: {
    title: "表格总数",
    type: "string",
    "ui:options": {
      placeholder: "默认 data.count "
    },
    "ui:width": "25%"
  }
};
export const reqHandle = {
  okFunc: {
    title: "成功回调",
    type: "string",
    "ui:options": {
      placeholder: "默认refresh（res,fromData）"
    },
    "ui:width": "25%"
  }
};
/**
 * 查询项基础信息
 */
export const formBase = {
  formItems: {
    title: "表单配置",
    type: "array",
    minItems: 1,
    "ui:options": {
      foldable: true
    },
    items: {
      required: ["label", "key"],
      labelWidth: 80,
      type: "object",
      properties: {
        label: {
          title: "显示名",
          type: "string",
          "ui:width": "20%"
        },
        key: {
          title: "传参名",
          type: "string",
          "ui:width": "20%"
        },
        columns: {
          title: "占列数",
          type: "number",
          default: 1,
          "ui:width": "20%"
        },
        type: {
          title: "类型",
          type: "string",
          "ui:widget": "selectCommon",
          commonProps: {
            url: Api.getDictionaries,
            params: { level: 1, pid: 22 },
            requestFunc: getNew
          },
          default: "5fba5336e126bfe143d7c75e",
          "ui:width": "20%"
        },
        isRequired: {
          title: "是否必填",
          type: "string",
          "ui:widget": "selectCommon",
          commonProps: {
            url: Api.getDictionaries,
            params: { level: 1, pid: 36 },
            requestFunc: getNew
          },
          "ui:width": "20%",
          default: "5fb8b922e2559fcd82cad4d3"
        },
        dic: {
          title: "枚举字典",
          type: "string",
          "ui:width": "20%",
          "ui:hidden": (value, rootValue) =>
            !(
              rootValue.type === "5fba5336e126bfe143d7c75f" ||
              rootValue.type === "5fba5336e126bfe143d7c760" ||
              rootValue.type === "5fba5336e126bfe143d7c761" ||
              rootValue.type === "5fd9ae46a28bd54e44773290"
            ),
          "ui:widget": "selectCascader",
          "ui:options": {
            fieldNames: { label: "preName", value: "id", children: "children" },
            changeOnSelect: true
          },
          commonProps: {
            url: Api.getProDictionaries,
            requestFunc: getNew
          }
        },
        level: {
          title: "几级选择",
          type: "number", //TODO 树形选择
          default: 2,
          "ui:hidden": (value, rootValue) =>
            !(
              rootValue.type === "5fba5336e126bfe143d7c761" ||
              rootValue.type === "5fd9ae46a28bd54e44773290"
            ),
          "ui:width": "20%"
        },
        changeOnSelect: {
          title: "可选上级",
          type: "string", //TODO 树形选择
          default: "5fb8b922e2559fcd82cad4d3",
          "ui:hidden": (value, rootValue) =>
            rootValue.type !== "5fba5336e126bfe143d7c761",
          "ui:width": "20%",
          "ui:widget": "selectCommon",
          commonProps: {
            url: Api.getDictionaries,
            params: { level: 1, pid: 36 },
            requestFunc: getNew
          }
        }
      }
    }
  }
};
/**
 * 表头基础信息
 */
export const columnBase = {
  columnItems: {
    title: "列表项配置",
    type: "array",
    minItems: 1,
    "ui:options": {
      foldable: true
    },
    items: {
      required: ["title", "dataIndex"],
      labelWidth: 80,
      type: "object",
      properties: {
        title: {
          title: "列-Name",
          type: "string",
          "ui:width": "50%"
        },
        dataIndex: {
          title: "列-Key",
          type: "string",
          "ui:width": "50%"
        }
      }
    }
  }
};
/**
 * 表操作项基础信息
 */
export const handleBase = {
  handleItems: {
    type: "array",
    items: {
      required: ["label", "funcName"],
      labelWidth: 80,
      type: "object",
      properties: {
        label: {
          title: "按键名",
          type: "string",
          "ui:width": "20%"
        },
        funcName: {
          title: "函数名",
          type: "string",
          "ui:options": { placeholder: "本地函数必填" },
          "ui:width": "30%"
        },
        content: {
          title: "网络请求配置",
          type: "string",
          "ui:width": "35%",
          "ui:options": { placeholder: "配置无需本地" },
          "ui:disabled": true
        },
        btn: {
          type: "string",
          default: "内容配置",
          commonProps: {
            onClick: (formData, onChange, rootValue) => {
              ModalFactory.showModalForm({
                formSchema: getMoreObj(
                  modalSchema,
                  rootValue?.content,
                  modalRequired
                ),
                title: "操作弹框配置",
                width: 1300,
                request: {
                  url: "",
                  handleOk: (formData, validate) => {
                    if (validate.length) return false;
                    onChange("content", formData);
                    return true; // 未写请求，故拦截请求。
                  }
                }
              });
            }
          },
          "ui:width": "15%",
          "ui:widget": "formBtn"
        }
      }
    }
  }
};

export const todoObj = {
  handleType: {
    title: "操作类型",
    type: "html",
    default: "暂只支持网络请求：表单、二次确认、直接操作",
    "ui:width": "100%"
  }
};

/**
 * 额外转化基础
 */
export const tranBase = tran => ({
  labels: {
    title: "批量（,分割）",
    type: "string",
    default:
      '{"corpId":"ID","name":"姓名","age":"年龄","hobby":"爱好","addr":"地址"}',
    "ui:options": {
      placeholder: "输入类型名称"
    },
    "ui:width": "85%"
  },
  btn: {
    type: "string",
    default: "转化",
    commonProps: {
      onClick: tran
    },
    "ui:width": "15%",
    "ui:widget": "formBtn"
  }
});
export const tableMock = {
  mockData: {
    title: "数据结构",
    type: "string",
    default:
      '{"request":{"name":"名称","content":"内容"},"response":{"ok":true,"status":200,"statusText":"错误或正确提示","data":{"rows":[{"id":"ID","name":"名称","content":"内容"}],"count":11}}}',
    "ui:options": {
      placeholder:
        '{"request":{"name":"名称","content":"内容"},"response":{"ok":true,"status":200,"statusText":"错误或正确提示","data":{"rows":[{"id":"ID","name":"名称","content":"内容"}],"count":11}}}'
    },
    "ui:width": "75%"
  },
  formTran: {
    type: "string",
    default: "转化为查询",
    commonProps: {
      onClick: (formData, onChange, rootValue) => {
        try {
          const apiData = JSON.parse(formData.mockData);
          labelsBtn({ labels: JSON.stringify(apiData.request) }, onChange);
        } catch {
          message.error("JSON格式错误-------：", formData?.mockData);
        }
      }
    },
    "ui:width": "10%",
    "ui:widget": "formBtn"
  },
  columnTran: {
    type: "string",
    default: "转化为列表",
    commonProps: {
      onClick: (formData, onChange, rootValue) => {
        try {
          const apiData = JSON.parse(formData.mockData);
          const data = lodash.get(apiData.response, formData.okPath || "data");
          let rows = [];
          for (const key in data)
            if (Array.isArray(data[key])) {
              rows = data[key];
              break;
            }
          columnsBtn({ labels: JSON.stringify(rows[0]) }, onChange);
        } catch {
          message.error("JSON格式错误-------：", formData?.mockData);
        }
      }
    },
    "ui:width": "10%",
    "ui:widget": "formBtn"
  },
  columnItems: {
    type: "string",
    "ui:hidden": true
  },
  formItems: {
    type: "string",
    "ui:hidden": true
  },
  tableData: {
    type: "string",
    "ui:hidden": true
  }
};

export const getMoreObj = (properties, formData, required = []) => {
  const common = formUtils.defaultFormSchema();
  common.formData = formData;
  common.propsSchema.properties = properties;
  common.propsSchema.required = required;
  return common;
};

const labelsBtn = (formData, onChange, type = "formItems") => {
  try {
    const formItems = formUtils.jsonToListOfForm(formData.labels);
    onChange && onChange(type, formItems);
    message.info("转化成功！");
  } catch {
    message.error("JSON格式错误-------：", formData.labels);
  }
};

const columnsBtn = (formData, onChange, type = "columnItems") => {
  try {
    const columnItems = formUtils.jsonToListOfColumn(formData.labels);
    onChange && onChange(type, columnItems);
    message.info("转化成功！");
  } catch {
    message.error("JSON格式错误-------：", formData.labels);
  }
};

/**
 * 查询页-页基础信息配置
 */
export const pageSchema = {
  ...pageBase,
  ...tabBase,
  ...reqBase,
  ...reqQuery,
  ...tableMock
};
export const pageSchemaUp = { ...tabBase, ...reqBase, ...reqQuery };
export const pageRequired = ["pageFlag", "name"];
export const pageRequiredUp = ["name"];
/**
 * 查询表单配置
 */
// export const querySchema = { ...tranBase(labelsBtn), ...formBase };
export const querySchema = { ...formBase };
export const queryRequired = [];
/**
 * 弹框表单配置
 */
// export const modalSchema = { ...reqBase, ...reqHandle, ...tabBase, ...tranBase(labelsBtn), ...formBase, ...todoObj };
export const modalSchema = {
  ...reqBase,
  ...reqHandle,
  ...formBase,
  ...todoObj
};
export const modalRequired = ["url"];
/**
 * 表头配置
 */
// export const columnSchema = { ...tranBase(columnsBtn), ...columnBase };
export const columnSchema = { ...columnBase };
export const columnRequired = [];
/**
 * 表操作项配置
 */
export const handleSchema = { ...handleBase };
export const handleRequired = [];

/**
 * 表格tableMock
 */
export const mockSchema = { ...tableMock };
export const mockRequired = [];