分页 Pagination

  1. <!--
  2.   组件名：分页 Pagination
  4.   属性：
  5.   total <Number> 总条数
  6.   page <Number> 当前页码
  7.   limit <Number> 每页条数
  8.   autoScroll <Boolean> 点击分页是否自动滚动到最上面
  9.   hidden <Boolean> 是否隐藏分页组件
  10.   background <Boolean> 是否要分页背景
  12.   事件：
  13.   pagination({ page, limit }) 分页改变触发事件
  15. -->
  16. <template>
  17.   <div :class="{'hidden':hidden}" class="pagination-container">
  18.     <el-pagination
  19.       :background="background"
  20.       :current-page.sync="currentPage"
  21.       :page-size.sync="pageSize"
  22.       :layout="layout"
  23.       :page-sizes="pageSizes"
  24.       :total="total"
  25.       v-bind="$attrs"
  26.       @size-change="handleSizeChange"
  27.       @current-change="handleCurrentChange"
  28.     />
  29.   </div>
  30. </template>
  32. <script>
  33.   import { scrollTo } from '@/utils/scroll-to'
  35.   export default {
  36.     name: 'BuPagination',
  37.     props: {
  38.       total: {
  39.         type: Number,
  40.         default: 0
  41.       },
  42.       page: {
  43.         type: Number,
  44.         default: 1
  45.       },
  46.       limit: {
  47.         type: Number,
  48.         default: 20
  49.       },
  50.       pageSizes: {
  51.         type: Array,
  52.         default() {
  53.           return [10, 20, 30, 50]
  54.         }
  55.       },
  56.       layout: {
  57.         type: String,
  58.         default: 'total, sizes, prev, pager, next, jumper'
  59.       },
  60.       background: {
  61.         type: Boolean,
  62.         default: true
  63.       },
  64.       autoScroll: {
  65.         type: Boolean,
  66.         default: true
  67.       },
  68.       hidden: {
  69.         type: Boolean,
  70.         default: false
  71.       }
  72.     },
  73.     computed: {
  74.       currentPage: {
  75.         get() {
  76.           return this.page
  77.         },
  78.         set(val) {
  79.           this.$emit('update:page', val)
  80.         }
  81.       },
  82.       pageSize: {
  83.         get() {
  84.           return this.limit
  85.         },
  86.         set(val) {
  87.           this.$emit('update:limit', val)
  88.         }
  89.       }
  90.     },
  91.     methods: {
  92.       handleSizeChange(val) {
  93.         this.$emit('pagination', { page: this.currentPage, limit: val })
  94.         if (this.autoScroll) {
  95.           scrollTo(0, 800)
  96.         }
  97.       },
  98.       handleCurrentChange(val) {
  99.         this.$emit('pagination', { page: val, limit: this.pageSize })
  100.         if (this.autoScroll) {
  101.           scrollTo(0, 800)
  102.         }
  103.       }
  104.     }
  105.   }
  106. </script>
  108. <style scoped>
  109.   .pagination-container {
  110.     background: #fff;
  111.     padding: 32px 16px;
  112.     text-align: center;
  113.   }
  114.   .pagination-container.hidden {
  115.     display: none;
  116.   }
  117. </style>

选择器 Select

  1. <!--
  2.   组件名：下拉选择 Select
  4.   属性：
  5.   options <Array> 下拉选择列表项
  6.   placeholder <string> 无选择时显示的文字
  7.   labelText <string> 对于下拉列表的 label 值
  8.   valueText <string> 对于下拉列表的 value 值
  9.   selectValue <string> 选中的值用于回显
  10.   remote <object> select 使用请求的配置项
  11.     url <string> 请求的url
  12.     body <object> 请求的参数
  13.   multiple <boolean> 是否多选
  14.   filterFunction <function> 处理请求的结果， 必须 return 最终结果
  16.   事件：
  17.   remote(val) 与element用法一致
  18.   loadMore 加载更多的事件
  19.   change(value, label) 选择下拉列表项后触发事件
  20.   beforeSend 在请求之前的处理操作
  22. -->
  23. <!--:remote="remoteable"-->
  24. <template>
  25.   <el-select
  26.     class="bu-select" :style="{width: width + 'px'}" v-model="value" :clearable="true" @change="handleChange" :placeholder="placeholder"
  27.     :multiple="multiple"
  28.     :filterable="filterable" :filter-method="remoteSearch" :loading="loading"
  29.     v-loadmore="loadMore"
  30.   >
  31.     <el-option v-for='item in optionList' :key="JSON.stringify(item)" :label='item[labelText]'
  32.                :value='item[valueText]'></el-option>
  33.   </el-select>
  34. </template>
  35. <script>
  36.   import { isFunction, isNumber } from '../../utils/dataType'
  38.   export default {
  39.     name: 'BuSelect',
  40.     props: {
  41.       width: {
  42.         type: Number,
  43.         default: 130
  44.       },
  45.       options: {
  46.         type: Array,
  47.         default: () => []
  48.       },
  49.       placeholder: {
  50.         type: String,
  51.         default: ''
  52.       },
  53.       labelText: {
  54.         type: String,
  55.         default: 'label'
  56.       },
  57.       valueText: {
  58.         type: String,
  59.         default: 'value'
  60.       },
  61.       remote: {
  62.         type: Object,
  63.         default: () => {
  64.           return { url: '', body: {} }
  65.         }
  66.       },
  67.       multiple: {
  68.         type: Boolean,
  69.         default: false
  70.       },
  71.       filterFunction: {
  72.         type: Function,
  73.         default: (res) => {
  74.           return res
  75.         }
  76.       },
  77.       selectValue: {
  78.         type: String,
  79.         default: ''
  80.       }
  81.     },
  82.     data () {
  83.       return {
  84.         optionList: [],
  85.         value: '',
  86.         filterable: false,
  87.         remoteable: false,
  88.         loading: false,
  89.         page: 1,
  90.         limit: 20,
  91.         searchKey: ''
  92.       }
  93.     },
  94.     watch: {
  95.       selectValue: {
  96.         handler (val) {
  97.           this.value = val
  98.         },
  99.         immediate: true
  100.       },
  101.       remote: {
  102.         handler (val) {
  103.           if (val.url) {
  104.             this.filterable = true
  105.             this.remoteable = true
  106.           }
  107.         },
  108.         immediate: true
  109.       },
  110.       options: {
  111.         handler (val) {
  112.           this.optionList = val
  113.         },
  114.         immediate: true
  115.       },
  116.     },
  117.     mounted () {
  118.       this.remoteSearch()
  119.     },
  120.     methods: {
  121.       remoteSearch (val) {
  122.         this.searchKey = val ? val : ''
  123.         if (!this.remote.url) {
  124.           return
  125.         }
  126.         this.optionList = []
  127.         this.page = 1
  128.         this.getData()
  129.         this.$emit('remote', val)
  130.       },
  131.       loadMore () {
  132.         this.page++
  133.         this.getData()
  134.         this.$emit('loadMore')
  135.       },
  136.       handleChange () {
  137.         let label = ''
  138.         let item = {}
  139.         for (let i = 0; i < this.optionList.length; i++) {
  140.           if (this.optionList[i].value === this.value) {
  141.             label = this.optionList[i].label
  142.             item = this.optionList[i].item
  143.             break
  144.           }
  145.         }
  146.         this.$emit('change', this.value, label, item)
  147.       },
  148.       getData (p) {
  149.         this.$emit('beforeSend')
  150.         // 若 p === 1 则刷新数据
  151.         if (isNumber(p)){
  152.           this.page = p
  153.           if (p === 1) {
  154.             this.value = ''
  155.             this.optionList = []
  156.             this.remote.body['SEARCH_KEY'] = ''
  157.           }
  158.         }
  159.         let { url, body } = this.remote
  160.         if (!url) {
  161.           throw new Error('url can not be null.')
  162.           return
  163.         }
  164.         const page = { 'PN': this.page, 'PAGE_SIZE': this.limit }
  165.         body = Object.assign({}, body, page, { 'SEARCH_KEY': this.searchKey ? this.searchKey : '' })
  167.         this.$axios({ method: 'POST', url, body }, res => {
  168.           if (this.filterFunction && isFunction(this.filterFunction)) {
  169.             const list = Object.freeze(this.filterFunction(res))
  170.             this.optionList.push(...list)
  171.           }
  172.         })
  173.       }
  174.     }
  175.   }
  176. </script>
  178. <style scoped lang="scss">
  179.   .bu-select {
  180.     /*width: 130px;*/
  181.   }
  182. </style>

表格 Table

  1. <!--
  2.   组件名：表格 Table
  4.   属性：
  5.   data <Array> 表格数据
  6.   height <String｜Number> 表格高度
  7.   setting <Array> 表格配置项
  8.     label <String> 表格列名
  9.     prop <String> data中对应的要渲染的属性名
  10.     formatter <Function> 格式化最终值函数
  11.     img <Boolean> 是否以图片的形式显示
  12.     btn <String｜Array> 按钮的值 格式 "详情" 或 ["详情", "删除"]
  13.     dropdown(scope) <Function> 下拉列表 必须返回一个数组 格式例如 [{command: "1", text: "删除"}]
  14.       command <String> 命令值
  15.       text <String> 文本
  16.     btnGroup <Boolean> 是否显示btn和dropdown
  17.     sortable <Boolean> 是否显示排序
  18.     slot <String> 插槽的名称，拥有这个属性即可使用对应的插槽，例如:
  19.         <bu-table :data="tableData" :setting="setting" @command="handleCommand">
  20.           <template slot="name" slot-scope="scope">
  21.             <div>scope.row['name']</div>
  22.           </template>
  23.         </bu-table>
  25.   事件：
  26.   operation(index, val, item) 表格操作按钮事件
  27.   command(command, template, item) 表格下拉选择列表事件
  29. -->
  30. <template>
  31.   <el-table :data="tableData" stripe @sort-change="handleSort">
  32.     <el-table-column
  33.       v-for="item in setting"
  34.       :key="item.label"
  35.       :label="item.label"
  36.       :sortable="item.sortable"
  37.       :prop="item.prop"
  38.       :width="item.width"
  39.       :min-width="item.minWidth"
  40.       :fixed="item.fixed"
  41.       :align="item.align"
  42.     >
  43.       <template slot-scope="scope">
  44.         <slot v-if="item.slot" :name="item.slot" :row="scope.row"></slot>
  45.         <div v-else-if="item.img">
  46.           <!-- 可换成自己的图片组件 -->
  47.           <buImage :src="scope.row[item.prop] | image"></buImage>
  48.         </div>
  49.         <div v-else-if="item.btnGroup">
  50.           <el-dropdown v-if="item.dropdown" @command="handleCommand" trigger="click">
  51.             <span class="el-dropdown-link">
  52.               <el-button type="text" icon="el-icon-more" style="color: #F56C6C;"></el-button>
  53.             </span>
  54.             <el-dropdown-menu slot="dropdown" class="w100">
  55.               <el-dropdown-item v-for="(item, index) in item.dropdown(scope)" :key="index" :command="item.command" :row="scope.row">{{item.text}}</el-dropdown-item>
  56.             </el-dropdown-menu>
  57.           </el-dropdown>
  58.           <template v-if="isString(item.btn)">
  59.             <el-button type="text" @click="handleOperation(0, item.btn, scope.row)">{{item.btn}}</el-button>
  60.           </template>
  61.           <template v-if="isArray(item.btn)">
  62.             <el-button v-for="(btn, index) in item.btn" :key="btn" type="text" @click="handleOperation(index, btn, scope.row)">{{ btn }}</el-button>
  63.           </template>
  64.         </div>
  65.         <div v-else>
  66.           {{ typeof item.formatter === 'function' ? item.formatter(scope.row[item.prop]) : scope.row[item.prop] }}
  67.         </div>
  68.       </template>
  69.     </el-table-column>
  70.   </el-table>
  71. </template>
  72. <script>
  73.   import { isArray, isString } from '../../utils/dataType'
  75.   export default {
  76.     name: 'BuTable',
  77.     components: {
  78.     },
  79.     props: {
  80.       /**
  81.        * 表格数据
  82.        */
  83.       data: {
  84.         type: Array,
  85.         default: () => []
  86.       },
  87.       /**
  88.        * 表格配置
  89.        */
  90.       setting: {
  91.         type: Array,
  92.         default: () => []
  93.       },
  94.       height: {
  95.         type: String | Number
  96.       }
  97.     },
  98.     data () {
  99.       return {
  100.         tableData: [],
  101.         cacheData: []
  102.       }
  103.     },
  104.     watch: {
  105.       data: {
  106.         handler (val) {
  107.           this.tableData = val
  108.           this.cacheData = this.deepClone(this.data)
  109.         },
  110.         immediate: true,
  111.         deep: true
  112.       }
  113.     },
  114.     methods: {
  115.       isArray(obj) {
  116.         return isArray(obj)
  117.       },
  118.       isString(obj) {
  119.         return isString(obj)
  120.       },
  121.       handleOperation(index, val, item) {
  122.         this.$emit('operation', index, val, item)
  123.       },
  124.       handleCommand(command, template, item) {
  125.         this.$emit('command', command, template, item)
  126.       },
  127.       bubbleSort (arr, prop, isDesc) {
  128.         let len = arr.length
  129.         for (let i = 0; i < len - 1; i++) {
  130.           for (let j = 0; j < len - 1 - i; j++) {
  131.             if (Number(arr[j][prop]) > Number(arr[j + 1][prop])) {
  132.               let temp = arr[j]
  133.               arr[j] = arr[j + 1]
  134.               arr[j + 1] = temp
  135.             }
  136.           }
  137.         }
  138.         if (isDesc) {
  139.           arr.reverse()
  140.         }
  141.         return arr
  142.       },
  143.       deepClone(obj = {}) {
  144.         // 值类型的情况下直接返回
  145.         // obj 是 null，或者不是对象也不是数组，就直接返回
  146.         if (typeof obj !== 'object' || obj == null) {
  147.           return obj
  148.         }
  149.         // 初始化返回结果,是数组就定义为数组，是对象就定义为对象
  150.         let result
  151.         if (obj instanceof Array) {
  152.           result = []
  153.         } else {
  154.           result = {}
  155.         }
  157.         for (const key in obj) {
  158.           // 判断 key 是否是自身的属性
  159.           // eslint-disable-next-line no-prototype-builtins
  160.           if (obj.hasOwnProperty(key)) {
  161.             // 保证不是原型上的属性
  162.             result[key] = this.deepClone(obj[key])
  163.           }
  164.         }
  165.         return result
  166.       },
  167.       handleSort ({ prop, order }) {
  168.         if (order === 'ascending') {
  169.           this.tableData = this.deepClone(this.bubbleSort(this.cacheData, prop))
  170.         } else if (order === 'descending') {
  171.           this.tableData = this.deepClone(this.bubbleSort(this.cacheData, prop, true))
  172.         } else {
  173.           this.tableData = this.deepClone(this.cacheData)
  174.         }
  175.       }
  176.     }
  177.   }
  178. </script>
  180. <style scoped lang="scss">
  182. </style>

容器 Container

  1. <!--
  2.   组件名：表格 Container
  4.   属性：
  5.   url <String> 请求表格的url
  6.   filter <Object> 请求表格的参数
  7.   data <Array> 表格数据
  8.   height <String｜Number> 表格高度
  9.   setting <Array> 表格配置项 参数请参考BuTable组件的setting
  10.   total <Number> 总条数
  11.   page <Number> 当前页码
  12.   limit <Number> 每页条数
  13.   autoScroll <Boolean> 点击分页是否自动滚动到最上面
  14.   hiddenPagination <Boolean> 是否隐藏分页组件
  15.   background <Boolean> 是否要分页背景
  16.   excel <object> 导出表格配置
  17.     url <string> 导出表格的的url，若无url，则不显示导出按钮
  18.     body <object> 请求的参数
  20.   事件：
  21.   operation(index, val, item) 表格操作按钮事件
  22.   command(command, template, item) 表格下拉选择列表事件
  23.   pagination({ page, limit }) 分页改变触发事件
  24.   beforeExport() 导出表格之前触发
  26. -->
  27. <template>
  28.   <div class="bu-container">
  29.     <div>
  30.       <slot name="header"></slot>
  31.       <el-button v-if="excel" type="primary" class="fl-right" @click="exportExcel">导出excel</el-button>
  32.     </div>
  33.     <div>
  34.       <bu-table :data="tableData" :setting="setting" @operation="handleOperation" @command="handleCommand"></bu-table>
  35.     </div>
  36.     <bu-pagination
  37.       :total="p_total"
  38.       :page="p_page"
  39.       :limit="p_limit"
  40.       :page-sizes="pageSizes"
  41.       :layout="layout"
  42.       :background="background"
  43.       :auto-scroll="autoScroll"
  44.       :hidden="hiddenPagination"
  45.       @pagination="handlePagination"
  46.     />
  47.     <div>
  48.       <slot name="footer"></slot>
  49.     </div>
  50.   </div>
  51. </template>
  52. <script>
  53.   import BuTable from '../BuTable/index'
  54.   import BuPagination from '../BuPagination/index'
  55.   import request from '../../utils/request'
  57.   export default {
  58.     name: 'BuContainer',
  59.     components: {
  60.       BuTable,
  61.       BuPagination
  62.     },
  63.     props: {
  64.       url: {
  65.         type: String,
  66.         default: ''
  67.       },
  68.       filter: {
  69.         type: Object,
  70.         default: () => {
  71.           return {}
  72.         }
  73.       },
  74.       /**
  75.        * 表格数据
  76.        */
  77.       data: {
  78.         type: Array,
  79.         default: () => []
  80.       },
  81.       /**
  82.        * 表格配置
  83.        */
  84.       setting: {
  85.         type: Array,
  86.         default: () => []
  87.       },
  88.       height: {
  89.         type: String | Number
  90.       },
  91.       excel: {
  92.         type: Object | String,
  93.         default: ''
  94.       },
  95.       total: {
  96.         type: Number,
  97.         default: 0
  98.       },
  99.       page: {
  100.         type: Number,
  101.         default: 1
  102.       },
  103.       limit: {
  104.         type: Number,
  105.         default: 20
  106.       },
  107.       pageSizes: {
  108.         type: Array,
  109.         default () {
  110.           return [10, 20, 30, 50]
  111.         }
  112.       },
  113.       layout: {
  114.         type: String,
  115.         default: 'total, prev, pager, next, jumper'
  116.       },
  117.       background: {
  118.         type: Boolean,
  119.         default: true
  120.       },
  121.       autoScroll: {
  122.         type: Boolean,
  123.         default: true
  124.       },
  125.       hiddenPagination: {
  126.         type: Boolean,
  127.         default: false
  128.       }
  129.     },
  130.     data () {
  131.       return {
  132.         tableData: [],
  133.         p_limit: 20,
  134.         p_page: 1,
  135.         p_total: 0
  136.       }
  137.     },
  138.     watch: {
  139.       data: {
  140.         handler (val) {
  141.           this.tableData = val
  142.         },
  143.         immediate: true
  144.       },
  145.       url: {
  146.         handler (val) {
  147.           if (val) {
  148.             this.fetchData()
  149.           }
  150.         },
  151.         immediate: true
  152.       },
  153.       limit: {
  154.         handler (val) {
  155.           this.p_limit = val
  156.         },
  157.         immediate: true
  158.       },
  159.       page: {
  160.         handler (val) {
  161.           this.p_page = val
  162.         },
  163.         immediate: true
  164.       }
  165.     },
  166.     methods: {
  167.       fetchData (filterData, type) {
  168.         if (type === 'init') {
  169.           this.p_page = 1
  170.         }
  171.         let data = { 'PN': this.p_page, 'PAGE_SIZE': this.p_limit }
  172.         if (filterData) {
  173.           data = Object.assign({}, data, filterData)
  174.         } else {
  175.           data = Object.assign({}, data, this.filter)
  176.         }
  177.         request({
  178.           url: this.url,
  179.           data
  180.         }).then(res => {
  181.           this.tableData = res.data
  182.           res.extraData && res.extraData.page && (this.p_total = res.extraData.page.querySize)
  183.         })
  184.       },
  185.       handleOperation (index, val, item) {
  186.         this.$emit('operation', index, val, item)
  187.       },
  188.       handleCommand (command, template, item) {
  189.         this.$emit('command', command, template, item)
  190.       },
  191.       exportExcel (excel) {
  192.         this.$emit("beforeExport")
  193.         if (excel.url) {
  194.           this.excel = excel
  195.         }
  196.         const { url, body = {} } = this.excel
  197.         if (!url) {
  198.           return
  199.         }
  200.         this.$axios({ method: 'POST', type: 'form', url, body }, res => {
  201.           let url = res.extraData['URL']
  202.           if (url) {
  203.             window.open(url)
  204.           } else if (res.code === 400 || !url) {
  205.             this.$message({
  206.               message: '导出失败',
  207.               type: 'warn'
  208.             })
  209.           }
  210.         })
  211.       },
  212.       handlePagination ({ page, limit }) {
  213.         this.p_page = page
  214.         this.fetchData()
  215.         this.$emit('pagination', { page, limit })
  216.       },
  217.     }
  218.   }
  219. </script>
  221. <style scoped lang="scss">
  222.   .fl-right {
  223.     float: right;
  224.   }
  226.   .bu-container {
  227.     padding: 30px 15px;
  228.   }
  229. </style>