通用查询

万一丁 于 2019年07月16日16:33:17 修改

概述

后台管理系统中由于会用到比较多的表格展示，如果每个都去重新写的话，代码量会较多，且页面样式难以保持一致；因此基于这个需求，我们系统中将查询展示表格的页面进行了部分功能抽取，即通过一部分的配置+适当的代码扩展，使得开发过程更加标准化，更加利于维护。

本文主要讲解在前端中的配置扩展功能(基本用法)

Full Example Screenshot

Full Example Code

<template>
  <query
    :customTemplateCode="code"
    :rowOperation="rowOperation"
    :customColumn="customColumn"
    :rowSelectIdentification="rowSelectIdentification"
    :showOperation="showOperation"
    rowOperationTop
    @on-row-edit="rowEdit"
    @on-row-view="rowView"
    @on-row-publish="rowPublish"
    @on-row-delete="rowDelete">
    <template slot="card-header-btn-additional">
      <e-button icon="plus" type="text" @click="doAdd">新增</e-button>
    </template>
  </query>
</template>

<script>
  export default {
    name: 'query-demo',
    data: () => ({
      code: 'apiindex533-243',
      rowSelectIdentification: 'tmBasPlantId',
      showOperation: true,
      rowOperation: [
        {
          type: 'edit',
          eventName: 'on-row-edit',
          title: '编辑',
          visible: true
        },
        {
          type: 'view',
          eventName: 'on-row-view',
          title: '查看',
          visible: true
        },
        {
          type: 'publish',
          eventName: 'on-row-publish',
          title: '发布',
          visible: true,
          icon: 'plane'
        },
        {
          type: 'delete',
          eventName: 'on-row-delete',
          title: '删除',
          visible: true
        }
      ],
      customColumn: [
        {
          key: 'markStatus',
          render: (h, params) => {
            let isActive = params.row.markStatus
            return (
              <Tag color={isActive ? 'green' : 'red'}>{isActive ? '激活' : '停用'}</Tag>
            )
          }
        }
      ]
    }),
    methods: {
      doAdd () {
        alert('click add')
      },
      rowEdit (row) {
        console.log(row)
        alert('click edit')
      },
      rowView (row) {
        alert('click view')
      },
      rowPublish (row) {
        alert('click publish')
      },
      rowDelete (row) {
        alert('click delete')
      }
    }
  }
</script>

API

Query props

属性	说明	类型	默认值
customTemplateCode	配置的模板code，用来获取模板信息（模板生效的必填项）	String	-
rowOperation	每一行的操作按钮的定义，具体的配置如下	Array	-
customColumn	自定义列，具体的配置如下	Array	-
rowSelectIdentification	标志每一行的不同标志字段名，主要用来再选择行时用来区分	String	id
showOperation	是否显示操作按钮	Boolean	true
rowOperationTop	是否将行操作按钮放在顶部	Boolean	false

Query props rowOperation

{
  type: 'publish',                      // 指定按钮类型
  eventName: 'on-row-publish',          // 指定监听按钮点击时的事件名称
  title: '发布',                         // 指定按钮上的文字
  visible: true,                        // 指定按钮是否显示，可以接收Boolean
  // visible: (row) => {                // 同时也可以接受function,参数为row（行数据），返回true/false控制是否显示按钮
  //   return row.isOk
  // }
  icon: 'plane'                         // 指定按钮的图标
}

Query props customColumn

[
  {
    key: 'markStatus',
    render: (h, params) => {
      let isActive = params.row.markStatus
      return (
        <Tag color={isActive ? 'green' : 'red'}>{isActive ? '激活' : '停用'}</Tag>
      )
    }
  }
]

Query Events

rowOperation中每个按钮绑定的eventName需要在query组件中绑定相应事件，从而达到监听的作用

Query slot

名称	说明
card-header-btn-additional	给表格上加按钮，例如新增等按钮，不与行进行绑定，只做单独的一些业务操作功能