前端如何通过配置即快速生成搜索页面，再也不用写页面和样式啦

一、开发背景

　　2年前做了一个基于element-ui的layout组件发布到npm package上去，广受大家的欢迎，下载量每周颇升。这个组件的好处在于开发者不用写太多html代码和逻辑，只要通过配置json的方式就能马上生成后台，包括菜单栏和导航面包屑等一键生成，还能根据不同的需求做定制化后台界面，就像拼积木一样，让用户只专注于内容核心代码的开发。现在还没做大范围的推广，如果我觉得它做得足够好，我一定会放到npm上推荐给各位读者使用哈。当初为了解答网友的疑问，我还专门建立了该组件的官网。logo看起来有没有很熟悉？哈哈哈，它其实就是element-ui的logo进行改造的，意义就是告诉使用者，这是element-ui功能的组合加强版。

　　为了迎合公司的OKR，我提出了对表单表格组件的封装。为什么我会有这个想法？其实这个组件我很早就想做了，只是以前做的是基于UI层面的，近期我接手了公司的一个项目叫童画，每天做的事情感觉就是复制粘贴，修改部分不同的功能和字段名称。组件的意义在于可以在遇到同一类设计场景时，可以复用，从而减少设计的时间和形成产品的统一性。传统的搜索表单不就是这样吗？上面是表单搜索字段，中间是搜索结果的表格，下面是搜索结果的分页。把表单和表格组合起来的好处在于很多搜索字段都是基于表格组件的某些字段，那我根据search字段进行筛选不就可以了么，很久之前，我们总是在吐槽产品经理总是喜欢截图现有功能，然后做字段修改，搞成原型扔给前端。如果前端也能像他这样简单，那该多好呀，类似这样的想法油然而生。刚开始我只是为了方便我的工作，没想到领导却重视了起来，想把这个组件推广给公司其他十几个前端同事使用，于是乎，我便认真开搞了起来。有理论还不行，得有场景实践，刚好公司的项目童画有很多场景，我根据它里面的场景，做了很多功能的封装和兼容。

　　写到这里，有人会说了，这不就是CRUD组件吗？有这想法的话，说明你还太年轻和小看这个组件的功能了。传统的CRUD组件灵活性不是很高，这个组件的好处是配置即可用，不用考虑其他搜索，翻页，清空等各种逻辑，让组件达到高度复用，封装了场景的插槽类型，但为了防止翻车，我还是预留了变态需求的插槽。字段的使用更多采用elementUI的命名方式，让使用者减少学习成本。这样做的好处是什么呢？首先，前端再也不用写页面了，其次，对于比较规矩的搜索表单页面，完全可以通过请求接口的形式交给后端来配置呈现页面即可，根本没有前端什么事了，前端的工作可以解放出来做更复杂的功能开发。

二、部分原理

1. 搜索字段通过search=true进行筛选；
2. 分页通过请求的total总数进行分页；
3. Vue.prototype.$query接入请求。

三、组件文档

为了使用方便，我把它做成了组件并放到了公司的私服上，接下来的工作就是写文档啦，以下是部分文档的编写，因为时间问题，没来得及好好检查，各位看官将就看一下就行啦。

export default {
options: {
  request: {
    api: '/student/web/student/enroll/list',
    method: 'GET',
    paramMap: {
      index: 'pageIndex',
      limit: 'pageSize'
    },
    resultMapping: {
      total: 'total',
      data: 'pageData'
    }
  },
  size: '',  // medium/mini/small, 默认medium
  labelWidth: 90,
  submitBtn: true, // 搜索按钮，默认true，非必填
  submitText: '查询', // 搜索按钮的文字，默认查询，非必填
  clearBtn: true, // 清除按钮，默认true
  clearSize: 'mini', // medium/mini/small, 默认medium
  clearText: '清除', // 清除按钮的文字，默认清除，非必填
  column: [
    {
       slotType: 'selection'
    },
    {
      prop: 'keyword',
      label: '学员/家长',
      search: true,
      hide: true
    },
    {
      prop: 'studentName',
      label: '学员'
    },
    {
      prop: 'telephone',
      label: '家长手机号',
      width: 130
    },
    {
      prop: 'type',
      label: '报名类型',
      width: 90,
      search: true,
      type: 'select',
      slot: true,
      slotType: 'text',
      slotArray: [{
        label: '新报',
        value: 1
      },
      {
        label: '续报',
        value: 2
      }],
      dicData: [{
        label: '新报',
        value: 1
      },
      {
        label: '续报',
        value: 2
      }]
    },
    {
      prop: 'courseFee',
      label: '缴费金额',
      slot: true,
      slotType: 'regEx',
      regEx: '￥{{courseFee/100}}'
    },
    {
      prop: 'payType',
      label: '支付方式',
      search: true,
      type: 'select',
      width: 100,
      dicData: [
        {
          label: '微信',
          value: '微信'
        },
        {
          label: '支付宝',
          value: '支付宝'
        },
        {
          label: '银行卡转账',
          value: '银行卡转账'
        },
        {
          label: '其它',
          value: '其它'
        }
      ]
    },
    {
      prop: 'courseCount',
      label: '报名课时'
    },
    {
      prop: 'followTeacher',
      label: '跟进人'
    },
    {
      prop: 'createTime',
      label: '报名时间',
      param: 'beginTime,endTime',
      format: 'yyyy 年 MM 月 dd 日',
      valueFormat: 'timestamp',
      search: true,
      width: 160,
      type: 'daterange'
    },
    {
      prop: 'auditor',
      label: '报名老师',
      search: true,
      param: 'teacherId', // 修正请求参数名
      type: 'select',
      dicData: [],
      dicUrl: '/org/web/org/user/list/teacher',
      dicMap: {
        label: 'userName',
        value: 'id'
      }
    },
    {
      prop: 'status',
      label: '报名状态',
      slot: true,
      slotType: 'tag',
      width: 110,
      slotArray: [{
        type: 'warning',
        label: '待审核',
        value: 1
      },
      {
        type: 'danger',
        label: '审核不通过',
        value: 3
      },
      {
        type: 'success',
        label: '审核通过',
        value: 2
      }],
      dicUrl: ''
    },
    {
      prop: 'operation',
      label: '操作',
      width: 80,
      slot: true,
      slotType: 'operation',
      slotArray: [
        {
          label: '去审核',
          value: 'handle',
          filter: ({status}) => {
            return status === 1
          }
        }
      ]
    }
  ]
}
}

生成的页面

四、最后感谢

最后，感谢同事世丞在字段命名上给了很多建议，同时也感谢领导给了很多刁难的意见，让这个组件的功能越发强大，也让开发者使用更方便，达到配置即可使用的地步。当然了，组件还需要更多场景的训练才能真正实现各种功能的兼容。后期我希望可以尽快放到layout官网上，供大家使用。

五、关于作者

一个会美工与后端PHP/nodejs的全栈工程师

更多学习内容欢迎关注

微信公众号 ：程序员周先生