封装配置数据格式

// Description: example
// 新增配置
export const insertlist = {
    
    
  url: "/workOrder/insertlist", // 需要调用的接口地址 必传
  method: "post", // 请求方式 默认为post 非比传
  type: "Modal", // 弹框类型 默认为Modal 非必传
  title: "Basic Modal", // 弹框标题 默认为路由meta.title 非必传
  btnPosition: "center", // 按钮位置 默认为center 非必传
  form: {
    
    
    // 表单配置
    labelWidth: "80px", // 表单label宽度 默认为80px 非必传
    labelPosition: "right", // 表单label位置 默认为right 非必传
    labelSuffix: ":", // 表单label后缀 默认为: 非必传
    size: "mini", // 表单尺寸 默认为mini 非必传
    inline: true, // 表单是否行内 默认为false 非必传
    gutter: 20, // 表单间距 默认为20 非必传
    formItem: [
      // 表单项配置
      [
        {
    
    
          colSpan: 12, // 表单项占据的列数 默认为24 非必传
          type: "input", // 表单项类型 默认为input 非必传
          label: "工单编号", // 表单项label 默认为prop 必传
          prop: "workOrderNo", // 表单项绑定的字段 必传
          placeholder: "请输入工单编号", // 表单项placeholder 默认为请输入+label 非必传
          rules: [
            // 表单项验证规则 非必传
            {
    
     required: true, message: "请输入工单编号", trigger: "blur" },
          ],
          attr: {
    
    }, // 非必传 用于配置el-input的属性
        },
      ],
    ],
  },
  btn: [
    // 按钮配置
    {
    
    
      type: "primary", // 按钮类型 默认为primary 非必传
      size: "mini", // 按钮尺寸 默认为mini 非必传
      text: "确定", // 按钮文本 默认为确定 非必传
      icon: "el-icon-check", // 按钮图标 默认为null 非必传
      round: false, // 按钮是否圆角 默认为false 非必传
      circle: false, // 按钮是否圆形 默认为false 非必传
      plain: false, // 按钮是否朴素 默认为false 非必传
      disabled: false, // 按钮是否禁用 默认为false 非必传
      loading: false, // 按钮是否加载中 默认为false 非必传
      click: (form) => {
    
    
        // 按钮点击事件
        console.log(form);
      },
    },
    {
    
    
      type: "info", // 按钮类型 默认为primary 非必传
      size: "mini", // 按钮尺寸 默认为mini 非必传
      text: "取消", // 按钮文本 默认为确定 非必传
      icon: "el-icon-close", // 按钮图标 默认为null 非必传
      round: false, // 按钮是否圆角 默认为false 非必传
      circle: false, // 按钮是否圆形 默认为false 非必传
      plain: false, // 按钮是否朴素 默认为false 非必传
      disabled: false, // 按钮是否禁用 默认为false 非必传
      loading: false, // 按钮是否加载中 默认为false 非必传
      click: (form) => {
    
    
        // 按钮点击事件
        console.log(form);
      },
    },
  ],
};
// 删除配置
export const del = {
    
    
  url: "/workOrder/delete", // 需要调用的接口地址 必传
  method: "post", // 请求方式 默认为post 非必传
  type: "Delete", // 删除类型 默认为Delete 非必传
  title: "删除", // 删除提示标题 默认为删除 非必传
  content: "是否删除该条数据", // 删除提示内容 默认为是否删除该条数据 非必传
  confirmButtonText: "确定", // 删除确认按钮文本 默认为确定 非必传
  cancelButtonText: "取消", // 删除取消按钮文本 默认为取消 非必传
  success: (res) => {
    
    }, // 删除成功回调函数 非必传
  error: (err) => {
    
    }, // 删除失败回调函数 非必传
};

// table配置
export const table = {
    
    
  url: "/workOrder/list", // 需要调用的接口地址 必传
  method: "post", // 请求方式 默认为post 非必传
  type: "Table", // 表格类型 默认为Table 非必传
  selecet: "multiple", // 表格选择类型 默认为false 非必传
  pagination: true, // 表格是否分页 默认为true 非必传
  paginationPosition: "bottom", // 表格分页位置 默认为bottom 非必传
  paginationSize: "small", // 表格分页尺寸 默认为small 非必传
  paginationLayout: "total, sizes, prev, pager, next, jumper", // 表格分页布局 默认为total, sizes, prev, pager, next, jumper 非必传
  paginationTotal: false, // 表格分页是否显示总条数 默认为false 非必传
  paginationPageSizes: [10, 20, 30, 40], // 表格分页每页显示条数 默认为[10, 20, 30, 40] 非必传
  paginationBackground: true, // 表格分页是否有背景色 默认为true 非必传
  paginationAlign: "right", // 表格分页对齐方式 默认为right 非必传
  paginationBefore: true, // 表格分页是否显示上一页下一页 默认为true 非必传
  paginationAfter: true, // 表格分页是否显示总页数 默认为true 非必传
  paginationSimple: false, // 表格分页是否简单模式 默认为false 非必传
  paginationPageSize: 10, // 表格分页每页显示条数 默认为10 非必传
  paginationCurrentPage: 1, // 表格分页当前页 默认为1 非必传
  paginationTotalCount: 0, // 表格分页总条数 默认为0 非必传
  paginationPageCount: 0, // 表格分页总页数 默认为0 非必传
  paginationPopperClass: "", // 表格分页下拉框样式 默认为空 非必传
  paginationPrevText: "上一页", // 表格分页上一页文本 默认为上一页 非必传
  paginationNextText: "下一页", // 表格分页下一页文本 默认为下一页 非必传
  columes: [
    {
    
    
      label: "工单编号",
      prop: "workOrderNo", // 列绑定的字段 必传
      width: "100", // 列宽 默认为100 非必传
      align: "center", // 列对齐方式 默认为center 非必传
      sortable: true, // 是否可排序 默认为false 非必传
      fixed: "left", // 列是否固定 默认为false 非必传
      formatter: (row, column, cellValue, index) => {
    
    }, // 列格式化函数 非必传
      attr: {
    
    }, // 非必传 用于配置el-table-column的属性
    },
  ],
  data: [], // 表格数据 默认为空数组 非必传
  height: "100%", // 表格高度 默认为100% 非必传
  maxHeight: "100%", // 表格最大高度 默认为100% 非必传
  stripe: false, // 表格是否斑马纹 默认为false 非必传
  border: false, // 表格是否带有纵向边框 默认为false 非必传
  fit: true, // 列的宽度是否自撑开 默认为true 非必传
  showHeader: true, // 是否显示表头 默认为true 非必传
  highlightCurrentRow: false, // 是否要高亮当前行 默认为false 非必传
  currentRowKey: "", // 当前行的key 默认为空 非必传
};

おすすめ

転載: blog.csdn.net/m0_51531365/article/details/128257342