dc-search-table

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

Events

Methods [this.$refs.SearchTable]

Data [this.$refs.SearchTable]

Options Attributes

Tabs Attributes

Buttons Attributes

Columns Attributes

SlotArray Attributes

Scoped Slot

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

版本升级

• [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.