dc-search-table

如何使用

• 确保安装好elementUI

npm install element-ui --save

• 确保安装好axios

npm install axios --save

安装

• 先切回到公司内部npm源

nrm use dc

• Windows系统安装

npm install dc-search-table --save

• Mac系统安装

sudo npm install dc-search-table --save

更新

npm install dc-search-table@latest

组件列表

• dc-search-table [表单+表格+页码]搜索表格组件
• dc-form [表单]表单组件，可单独使用
• dc-table [表格]表格组件，可单独使用

引用

• main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
import SearchTable from 'dc-search-table'
import 'dc-search-table/npm/css/main.css'
Vue.use(SearchTable, {
  token: {
    name: 'dc-access-token',
    value: '',
    headers: '',
    storage: 'LocalStorage' // 存储方式：Cookies/LocalStorage/SessionStorage, 默认是SessionStorage
  }
});

• [page].vue

<template>
  <div class="demo">
    <search-table 
      :option="option"
      v-model="formData" 
      ref="SearchTable"
      @on-operation="handleOperation"
      @request-done="requestDone"
      @request-error="requestError"
    >
    </search-table>
  </div>
</template>
<script>
import option from './option';
export default {
  name: 'demo',
  // components: { SearchTable },
  data() {
    return {
      // ...option,
      option: option.data.call(this),
      formData: {}
    };
  },
  methods: {
    // 请求结束
    requestDone() {
      // let iframeHeight = document.getElementsByClassName('search-table')[0].offsetHeight;
      // this.$framework.messager.init(null, res => {
      //   console.log(res.event, res.data);
      // });
    },
    // 表格最后一列的操作
    handleOperation({ value }, ...arg) {
      if (value === 'handle') {
        this.handle(...arg);
      }
    },
    handle(...arg) {
      console.log(...arg);
    },
    // 请求错误，如token过期
    requestError(res){
      if(res.resultCode===1030102){
        this.$router.push('/login')
      }
    }
  }
};
</script>

使用示例

【与[page].vue同级建立option.js文件】

// let proxyPrefix = process.env.NODE_ENV === 'development' ? 'api' : '';
import baseUrl from '@/services/http/apiRoot.js';
import permission from './permission';
let proxyPrefix = baseUrl;
export default {
  data() {
    return {
      permission: permission.data.call(this),
      request: {
        url: proxyPrefix + '/student/web/student/enroll/list',
        method: 'get', //非必填
        paramMap: { //非必填
          index: 'pageIndex',
          size: 'pageSize'
        },
        paramInit: {}, // 初始值, 对象或者function
        // paramInit: ()=>{
        //   return {
        //     a:1
        //   }
        // }
        page:{
          index: 0, //选填，若后端index是0开始的得调整
          size: 10 //非必填
        },
        resultMap: { //非必填
          total: 'total',
          data: 'pageData'
        }
      },
      formItemSize: '',  // medium/mini/small, 默认medium
      labelWidth: 90,
      submitBtn: true, // 搜索按钮，默认true，非必填
      submitText: '查询', // 搜索按钮的文字，默认查询，非必填
      clearBtn: true, // 重置按钮，默认true
      clearSize: 'small', // medium/mini/small, 默认medium
      clearText: '重置', // 重置按钮的文字，默认重置，非必填
      tabs:  // 顶部选项卡
        {
          label: '审核状态',
          prop: 'authorityStatus',
          dicUrl: proxyPrefix + '/health/admin/user/getAuthorityCount', // 非必填项
          list: [
            {
              label: '待审核',
              value: 2,
              number: 2 //显示数量
            },
            {
              label: '已通过',
              value: 1,
              name: 'pass',
              number: 0 //可通过调接口映射
            },
            {
              label: '未通过',
              value: 3
              name: 'fail',
              number: 0
            }
          ]
      },
      buttons: {  // 搜索顶部按钮
        placement: 'top',
        isSink: true, //是否下沉
        size: 'small',
        list: [
          {
            label: '导出',
            value: 'click',
            type: 'primary', // success,info,warning,danger
            style: 'plain',
            icon: 'el-icon-delete',
            callback: function() {
              console.log(this);
            }
          }
        ]
      },
      columns: [
        {
          slotType: 'selection',
          buttons: [
            {
              label: '批量删除',
              value: 'click',
              type: 'danger',
              style: 'plain',
              icon: 'el-icon-delete',
              callback: function() {
                //
              }
            }
          ]
        },
        {
          props: ['name', 'auditor', 'telephone'], // 根据下面属性就行自动筛选
          searchType: 'input-with-select',
          hide: true,
          canSearch: true
        },
        {
          prop: 'headPicFileName',
          label: '头像',
          slotType: 'avatar',
          width: 61
        },
        {
          prop: 'keyword',
          label: '学员/家长',
          canSearch: true, // searchType不写默认为input类型
          hide: true
        },
        {
          prop: 'name',
          label: '学员'
        },
        {
          prop: 'telephone',
          label: '家长手机号',
          width: 130
        },
        {
          prop: 'sheng',
          param: 'id',
          label: '省市区',
          isLazyload: true,
          showAllValues: true,
          searchType: 'cascader',
          dicUrl: proxyPrefix + '/health/admin/check/getArea',
          dicMethod: 'post',
          dicLevel: 3,
          dicMap: {
            label: 'name',
            value: 'code'
          },
          canSearch: true
        },
        {
          prop: 'departments',
          param: 'deptId',
          label: '科室',
          canSearch: true,
          searchType: 'cascader',
          dicUrl: proxyPrefix + '/health/admin/check/getDepts',
          dicMethod: 'post',
          dicData: [],
          dicMap: {
            label: 'name',
            value: 'id'
          }
        },
        {
          prop: 'type',
          label: '报名类型',
          minWidth: 90, // 注意与width的区别
          canSearch: true,
          searchType: 'select',
          slotType: 'text',
          slotArray: [{
            label: '新报',
            value: 1
          },
          {
            label: '续报',
            value: 2
          }],
          // 当上属性与下属性相同时，下方可省略
          // dicData: [{
          //   label: '新报',
          //   value: 1
          // },
          // {
          //   label: '续报',
          //   value: 2
          // }]
        },
        {
          prop: 'auditor',
          label: '报名老师',
          canSearch: true,
          param: 'teacherId', // 修正请求参数名
          searchType: 'select',
          dicUrl: proxyPrefix + '/org/web/org/user/list/teacher',
          dicMap: {
            label: 'userName',
            value: 'id'
          },
          dicData: [], 
          dicInit: [ // 初始值
            {label: '不限', value:0}
          ]
        },
        {
          prop: 'courseFee',
          label: '缴费金额',
          // showWordLimit: true,
          // showOverflowTooltip: true,
          slotType: 'format',
          slotRender: (row)=>{
            if(row.status===1){
              return row.courseFee + '元'
            }else{
              return row.courseFee + '美金'
            }
          }
        },
        {
          prop: 'profCheckTime',
          label: '审核时间',
          param: 'startTime,endTime',
          searchType: 'daterange',
          // format: 'yyyy年MM月dd日,hh点mm分',
          // valueFormat: 'timestamp',
          canSearch: true,
          width: 195,
          slotType: 'format',
          slotRender: dt => {
            if (dt.authorityStatus == 1 && dt.profCheckTime) {
              // 已通过
              return dt.profCheckTime;
            } else if (dt.authorityStatus == 2 && dt.profSubmitTime) {
              // 待审核
              return dt.profSubmitTime;
            } else {
              return '';
            }
          }
        },
        {
          prop: 'status',
          label: '报名状态',
          slotType: 'tag',
          width: 110,
          slotArray: [{
            type: 'warning',
            label: '待审核',
            value: 1
          },
          {
            type: 'danger',
            label: '审核不通过',
            value: 3
          },
          {
            type: 'success',
            label: '审核通过',
            value: 2
          }]
        },
        {
          prop: 'operation',
          label: '操作',
          width: 80,
          slotType: 'operation',
          slotArray: [
            {
              label: '方法一',
              value: 'handle'// 监听on-operation方法
            },
            {
              label: '方法二',
              value: 'handle2',
              filter: ({status}) => { //显示条件
                return status === 1
              },
              callback: function(callback, row){
                console.log('这里注意不要使用箭头函数',this)
              }
            }
          ]
        }
      ]
    }
  }
}

【与option.js同级建立permission.js文件】

import baseUrl from '@/http/apiRoot.js';
let telephone = router.app.$route.query.telephone;
let proxyPrefix = baseUrl;
let onlineHospitalService = 'online-hospital';
export default {
  data() {
    return {
      // 更改
      update: {
        url: proxyPrefix + onlineHospitalService + '/doctor/doctor/saveOrUpdate',
        method: 'post', // 非必填
        paramInit: function() {
          return {
            telephone: this.$route.query.telephone
          };
        }, // 初始值
        resultMap: {
          // 非必填
          total: 'total',
          data: 'pageData'
        }
      },
      insert: {
        url: proxyPrefix + onlineHospitalService + '/doctor/doctor/onlineRegisterStatus/' + telephone,
        method: 'get', // 非必填
        headers: {
          isJson: true
        },
        paramInit: function() {
          return {
            // id: 881976,
            telephone: this.$route.query.telephone
          };
        }, // 初始值
        resultMap: {
          // 非必填
          data: 'doctor'
        },
        callback(res) {}
      },
      detail: {
        url: function() {
          return proxyPrefix + onlineHospitalService + '/doctor/doctor/onlineRegisterStatus/' + this.$route.query.telephone;
        },
        method: 'get', // 非必填
        headers: {
          isJson: true
        },
        paramInit: function() {
          return {
            telephone: this.$route.query.telephone
          };
        }, // 初始值
        resultMap: {
          // 非必填
          data: 'doctor'
        },
        resultData: function(res){ // 当返回值为null时formData的初始化
          return {
            title: '',
            titleTag: '',
            imageInfoVO: {
              docCer: []
            }
          }
        },
        callback(res) {}
      }
    };
  }
};

参数说明

Variables

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | options | 组件配置属性，详情见下面options属性 | Object | - | - |

Events

| 事件名 | 说明 | 参数 | | ---- | ---- | ---- | | on-search | 点击搜索后触发该事件，非必填 | - | | on-page | 切换页面时触发该事件，非必填 | - | | on-selection | 当选择项发生变化时会触发该事件，非必填 | - | | on-select | 当搜索选择列表发生变化时会触发该事件，非必填 | - | | on-clear | 重置时，触发该事件，非必填，常用于自己写组件 | - | | on-operation | 当"操作"(包括'switch-change')发生变化时会触发该事件 | 属性slotArray[{value}]| | request-done | 请求结束触发该事件，非必填 | - | | request-error | 请求接口错误时,触发该事件，非必填,常用户token失效跳登录页面 | - |

Methods [this.$refs.SearchTable]

| 方法名 | 说明 | 参数 | | ---- | ---- | ---- | | setOptionData | 获取select选项数据接口后塞入的字段 | {result: res.data,label: 'name',value: 'id',target: 'courseName'} | | getTableData | 重新请求该页面事件 | - | | setTabsData | 通过接口获取tabs各选项的number值后塞入的字段 | {result: res.data} |

Data [this.$refs.SearchTable]

| 常用值 | 说明 | | ---- | ---- |
| searchData | 请求的参数 | | formData | 表单的参数 | | tableData | 表格的参数 |

Options Attributes

| 参数 | 说明 | 类型 | 可选值/例子 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | request.url | 请求地址，必填项 | String | /student/web/audition/list | - | | request.method | 请求方法，可不填 | String | get/post | get | | request.headers | 请求头，可不填 | Object | {isJson: false} |{isJson: true} | | request.paramMap.index | 请求映射index参数 | String | pageIndex | pageIndex | | request.paramMap.size | 请求映射size参数 | String | pageSize | pageSize | | request.paramInit | 请求初始化参数 |Object/Function| {} / ()=>{ return {a:1}} | {} | | request.resultMap.total | 请求映射total参数 | String | total | total | | request.resultMap.data | 请求映射data参数 | String | pageData | pageData | | request.params | 初始参数值 | String | - | - | | dialogWidth | 弹窗宽度 | Number | - | 600 | | formItemSize | 表单组件的大小 | String | medium/mini/small | mini | | labelWidth | label的宽度 | Number | - | 70 | | submitBtn | 是否显示搜索按钮 | Boolean | true/false | true | | submitText | 搜索文本 | String | - | 查询 | | clearBtn | 是否显示清空按钮 | Boolean | true/false | true | | clearText | 清空文本 | String | - | 重置 | | tabs | 选项卡配置属性，详情见下方Tabs属性 | Object | - | [ ] | | columns | 表格配置属性，详情见下面Columns属性 | Array | - | [ ] | | buttons | 顶部按钮配置属性，详情见下面Buttons属性 | Object | - | [ ] |

Tabs Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | ---- | ---- | ---- | ---- | | prop | 字段参数 | String | - | - |
| canSearch | 字段参数是否参与请求 | Boolean | - | true | | list | tab列表 | Array | Array:object[{label,value,number}] | true |

Buttons Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | ---- | ---- | ---- | ---- | | placement | 按钮摆放的位置 | String | top/bottom | top | | isSink | 是否下层，当搜索右边有大量位置时，顶部的按钮因为美观会选择下沉位置 | Boolean | true/false | false | | size | 按钮大小 | String | medium/mini/small | mini | | list | 按钮列表 | Array |Array[Object]:[{label,value，type，style，icon，callback}]| false |

Columns Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | ---- | ---- | ---- | ---- | | prop | 字段参数 | String | - | - |
| param | 当请求参数与字段不同时，可用该参数修正，多参用逗号隔开，非必填 | String | 'beginTime,endTime'/'teacherId' | - |
| width | th 宽度，非必填 | String | - | - | | labelWidth | label宽度，非必填 | String | - | - | |hideSearchLabel| 全部隐藏搜索的label，非必填 | Boolean | true/false | false | | minWidth |对应列的最小宽度，minWidth会把剩余宽度按比例分配给设置了minWidth的列，非必填| String | - | - |
| imageWidth | 图片宽度，非必填, 当slotType='image'时生效 | Number | - | 100 |
| imageHeight | 图片高度，非必填, 当slotType='image'时生效 | Number | - | 50 |
| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧，非必填 |string, boolean| true, left, right | — |
| format | type=daterange时，'yyyy 年 MM 月 dd 日' | String | yyyy 年 MM 月 dd 日 | - | | valueFormat | type=daterange时，值的显示格式 | String | timestamp | timestamp | | label | 字段名称 | String | - | - |
| searchLabel | 搜索字段名称，若不想要搜索名称，请赋值" ", 注意双引号内是空格，非必填 | String | - | " " |
| hide | 隐藏字段，仅搜索表单显示，表格不显示的字段 | Boolean | - | - |
| filter | 根据tab条件，是否显示，接收的参数是this | Boolean | - | this |
| event | 触发事件，如click | String | click | - |
| callback | event事件的回调 | Function | - | - |
| cansSearch | 是否是搜索字段 | Boolean | true/false | - |
| searchType | 搜索表单组件类型, 当canSearch=true时才有效 | String |tabs/select/input/daterange/cascader/input-with-select| input | | dicData | select选项的值 | Array | [{label:'',value:''}] | [] | | dicUrl | select选项的请求地址 | String | - | - | | dicLevel | select显示几级，例如省市区为3级，则为3 | String | 2/3 | 2 | | dicMap.label| label字段映射 | String | - | - | | dicMap.value| value字段映射 | String | - | - | | dicMap.other| 当映射的值不止一个时，字符串值时，为label值的参数，对象为多参数 |String/Objecy | - | - | | slot | table字段是否使用插槽 | Boolean | true/false | false |
| slotType | table插槽类型 | String | selection/tag/image/avatar/text/button | - |
| slotArray |表格插槽显示字段的各种值，详情见下面SlotArray属性,注意callback的this指向|Array[Object]| - | - | | slotFilter | 表格插槽显示的条件 |Function[Object]| ({roles}) => {roles!==1} | - | | searchRight | 表格头部(搜索)右侧内容插槽显示字段的各种值 |Array[Object] |[{type:'',label:'',value:'',filter:({s})=>{}}] | - |

SlotArray Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---- | ---- | ---- | ---- | ---- | | type | 类型 | String | info/primary/success/warning/danger | primary | | label | 显示文本 | String | - | - | | value | 值 | Any | - | - | | filter | 显示条件 | Function | filter: ({ status }) => {return status != 1} | - | | append | 显示在文本之后的字段 | Function |({successCount})=>{return <br/>成功${successCount}条;}| - | | preppend | 显示在文本之前的字段 | Function | 同上 | - |

Scoped Slot

默认插槽, 用以处理复杂字段和场景

| 参数 | 说明 | | ---- | ---- | | 列的名称 | 列自定义列的内容，参数为{row,label,dic,$index} | | searchTop | 表格头部(搜索)上侧内容 | | searchBottom | 表格头部(搜索)下侧内容 | |search-列的名称| 表格头部(搜索)的插槽，searchSlot:true, this.$refs.SearchTable.searchData[列的名称]='值'设置请求参数 | |detail-列的名称| 详情页面的插槽，slot: true, this.$refs.SearchTable.formData[列的名称]='值'设置请求参数 |

版本升级

• [0.0.0] 项目初始化
• [0.0.1] 文档编写
• [0.0.2] 组件编写迁移
• [0.0.3] 增加setTabsData方法
• [0.0.4] 组件样式的生效引入
• [0.0.5] loading效果优化
• [0.0.6] 封装了省市区接口搜索，增加dicLevel参数
• [0.0.7] 添加request.paramInit参数, 可以初始化参数与搜索字段进行合并
• [0.0.8] 修改this的指向值为上级$parent
• [0.0.13] 修改样式所属
• [0.0.17] 解决正则表达式影响打包问题兼容safari浏览器问题
• [0.0.21] 增加是否显示字段filter参数
• [0.0.22] 增加tabs请求完成标识
• [0.0.24] 增加tabs返回结果的处理resultFormat
• [0.0.25] 保存route信息
• [0.0.26] 添加request.paramInit参数的类型为function
• [0.0.27] 增加el-table-column的fixed属性
• [1.0.0] 版本升级重构组件的按需加载方式结构改动较大
• [1.0.68] 在request.headers增加hideLoading字段隐藏loading
• [1.0.72] 增加hideSearchLabel字段全部隐藏SearchLabel

更多内容，请参考官网

See dc-search-table.

See jenkins.

See dev.

See gitlab.