# dc-search-table

> 业务组件--基于ElementUI的 [表单/表格/分页] 组合组件

Latest version **1.0.73** (published 2021-07-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install dc-search-table
pnpm add dc-search-table
yarn add dc-search-table
bun add dc-search-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.73 |
| Published | 2021-07-26 |
| First published | 2021-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 8.0.0 |
| Dependencies | 7 |
| Unpacked size | 4.1 MB |
| Known vulnerabilities | 0 (+27 in 3 direct dependencies) |
| Install scripts | no |
| Author | davidZhou |
| Maintainers | zhoudawei |
| Keywords | vue, elementUI, axios |

## Links

- npm: https://www.npmjs.com/package/dc-search-table
- npm.io page: https://npm.io/package/dc-search-table

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [vuex](https://npm.io/package/vuex.md) ^3.1.1
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.14.1
- [element-ui](https://npm.io/package/element-ui.md) ^2.13.2
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.6
- [vue-awesome](https://npm.io/package/vue-awesome.md) ^4.0.2

## Recent versions

- 1.0.73 (latest) — 2021-07-26
- 1.0.1 — 2021-06-18

## README

# dc-search-table

## 如何使用
+ 确保安装好elementUI
```bash
npm install element-ui --save
```
+ 确保安装好axios
```bash
npm install axios --save
```

## 安装
+ 先切回到公司内部npm源
```bash
nrm use dc
```
+ Windows系统安装
```bash
npm install dc-search-table --save
```
+ Mac系统安装
```bash
sudo npm install dc-search-table --save
```

## 更新
```bash
npm install dc-search-table@latest
```

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

## 引用
+ main.js
  
```javascript
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
  
```javascript
<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文件】

```javascript
// 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文件】
```javascript
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](http://192.168.3.8:4873/).

See [jenkins](http://jenkins.dachentech.com/jenkins/job/dev_web_dc-search-table/).

See [dev](http://dev.dachentech.com.cn/dc-search-table/web/dist/#/login).

See [gitlab](http://gitlab.dachentech.com/web/dc-search-table).

---
_Source: https://npm.io/package/dc-search-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._