Notorious Penguin Magicians

    dc-search-table

    1.0.73 • Public • Published

    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.

    Install

    npm i dc-search-table

    DownloadsWeekly Downloads

    1

    Version

    1.0.73

    License

    MIT

    Unpacked Size

    4.35 MB

    Total Files

    181

    Last publish

    Collaborators

    • zhoudawei