通用查询

概述

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

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

# Full Example Screenshot

query-base

# 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 给表格上加按钮,例如新增等按钮,不与行进行绑定,只做单独的一些业务操作功能