表格组件vue antdv

/*
* 插件说明
* 1.控制是否显示设置，默认true
*     1）控制表格列的显示和隐藏
*     2）控制列的对齐方式
*     3）控制列的固定位置
*     4）控制列的排序
* 2.控制是否加载，默认false
* 3.控制表格是否显示边框，默认true
* 4.控制表格的尺寸，默认size为large
* 5.mSelect 控制表格是否显示单选或多选，默认0没有选择，2: 'checkbox'为多选，1: 'radio'为单选，rowClickSelection,选中的回调
* 6.控制分页的位置，默认bottomCenter
* 7.控制排序，sortable是true显示，false隐藏，非必传
* 8.控制筛选，tableScreen: '税额',筛选字段跟title一至，非必传
* 9.过滤，非必传
*    1）filterMode: 'tree', // 指定筛选菜单的用户界面 默认menu
*    2）filterSearch: true, // 筛选菜单项是否可搜索 false
*    3）filterMultiple: true, // 过滤单选，默认为true多选
* 10.调用如下
* */

<template>
  <div class="xTable" id="xTable">
    <!--设置按钮-->
    <div class="set" v-if="showSet"><i @click.stop="dialogVisible = true" class="el-icon-setting"></i></div>
    <!--显示table-->
    <a-table
      v-if="mSelect"
      :dataSource="tableData"
      :columns="tableColumns"
      :bordered="bordered"
      :loading="loading"
      :class="pagePosition === 'left' ? 'page-left' : pagePosition === 'center' ? 'page-center' : pagePosition === 'right'? 'page-right': 'page-left'"
      :size="size"
      :customRow="customRows"
      :pagination="{
        current: pagination.current,
        defaultPageSize: pagination.size,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30', '40'],
        showTotal: (total,range) => `共${total}条`,
        onShowSizeChange: onShowSizeChange,
        onChange: pageChange
      }"
      :row-selection="mSelect ? {type: mSelect == 1 ? 'radio' : 'checkbox', fixed: mSelectFixed, selectedRowKeys: selectedRowKeys, onChange: rowClickSelection }: {}"
    >
    </a-table>
    <a-table
      v-else
      :dataSource="tableData"
      :columns="tableColumns"
      :bordered="bordered"
      :loading="loading"
      :class="pagePosition === 'left' ? 'page-left' : pagePosition === 'center' ? 'page-center' : pagePosition === 'right'? 'page-right': 'page-left'"
      :size="size"
      :customRow="customRows"
      :pagination="{
        current: pagination.current,
        defaultPageSize: pagination.size,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30', '40'],
        showTotal: (total,range) => `共${total}条`,
        onShowSizeChange: onShowSizeChange,
        onChange: pageChange
      }"
    >
    </a-table>

    <!--设置table弹窗-->
    <a-modal
      title="列表控制"
      :visible="dialogVisible"
      okText="确定"
      cancelText="取消"
      :closable="true"
      :maskClosable="true"
      :width="716"
      @ok="handleClose"
      @cancel="cancelClose"
      dialogClass="xTableModel"
    >
      <div class="operateBtn">
        <div class="tag">
          <span @click.stop="recoveryBasic">恢复出厂</span><i>|</i>
          <span @click.stop="showHideAll">全部{{isHideAll ? '显示' : '隐藏'}}</span><i>|</i>
          <span @click.stop="topping">置顶</span><i>|</i>
          <span @click.stop="bottoming">置底</span><i>|</i>
          <span @click.stop="moveUp">上移</span><i>|</i>
          <span @click.stop="moveDown">下移</span>
        </div>
        <!--设置table-->
        <a-table
          :dataSource="setTableData"
          :columns="setTableColumns"
          :customRow="setCustomRows"
          :pagination="false"
          :scroll="{ x: 'auto', y: 470 }"
          @click.stop=""
          :row-selection="{type: 'checkbox', selectedRowKeys: setTableSelectedRowKeys, onChange: setSelectedTableChange}"
        >
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import { workPlaceAdd } from '../../api/common.js'
  /*
* 插件说明
* 1.控制是否显示设置，默认true
*     1）控制表格列的显示和隐藏
*     2）控制列的对齐方式
*     3）控制列的固定位置
*     4）控制列的排序
* 2.控制是否加载，默认false
* 3.控制表格是否显示边框，默认true
* 4.控制表格的尺寸，默认size为large
* 5.mSelect 控制表格是否显示单选或多选，默认0没有选择，2: 'checkbox'为多选，1: 'radio'为单选，rowClickSelection,选中的回调
* 6.控制分页的位置，默认bottomCenter
* 7.控制排序，sortable是true显示，false隐藏，非必传
* 8.控制筛选，tableScreen: '税额',筛选字段跟title一至，非必传
* 9.过滤，非必传
*    1）filterMode: 'tree', // 指定筛选菜单的用户界面 默认menu
*    2）filterSearch: true, // 筛选菜单项是否可搜索 false
*    3）filterMultiple: true, // 过滤单选，默认为true多选
* 10.调用如下
* */

  export default {
    name: 'xTable',
    data() {
      // 设置table的列
      const setTableColumns = [
        {
          title: '#',
          dataIndex: 'index',
          key: 'key',
          width: 60,
          customRender: (text, row, index) => {
            return (<span>{index + 1}</span>)
          }
        },
        {
          title: '列名',
          dataIndex: 'name',
          key: 'title',
          width: 150,
          customRender: (text, row, index) => {
            return (<span>{text}</span>)
          }
        },
        {
          title: '对齐方式',
          dataIndex: 'align',
          key: 'align',
          width: 150,
          customRender: (text, row, index) => {
            return <a-select
              defaultValue={text}
              onChange={
                (data) => {
                  this.setTableData.forEach((item, idx) => {
                    if (index === idx) {
                      item.align = data === 'default' ? 'left' : data
                    }
                  })
                }
              }
            >
              {
                this.options.map(item => {
                  return <a-select-option value={item.value}>{item.label}</a-select-option>
                })
              }
            </a-select>
          }
        },
        {
          title: '隐藏列',
          dataIndex: 'isHide',
          key: 'isHide',
          width: 120,
          customRender: (text, row, index) => {
            return <span>
              <a-switch defaultChecked={text} onChange={(data) => {
                event.stopPropagation()
                this.setTableData.forEach((item, idx) => {
                  if (index === idx) {
                    item.isHide = data
                  }
                })
              }}/></span>
          }
        }
      ]
      return {
        /* 显示table数据 */
        tableColumns: [
          { /*需要显示序号的table要传这个对象，dataIndex固定tableNumber, 宽度68*/
            title: '#',
            dataIndex: "tableNumber",
            align: "center",
            width: 60,
            customRender: (text, row, index) => {
              return index + 1
            }
          },
        ],
        screens: [
          {
            text: '包含',
            value: 1
          },
          {
            text: '不包含',
            value: 2
          },
          {
            text: '等于',
            value: 3
          },
          {
            text: '不等于',
            value: 4
          },
          {
            text: '以......开始',
            value: 5
          },
          {
            text: '以......结束',
            value: 6
          },
          {
            text: '为空',
            value: 7
          },
          {
            text: '不为空',
            value: 8
          }
        ], // 筛选数据
        selectedRows: [], // 选中的数据
        selectedRowKeys: [], // table选项数据
        screenVal: '', // 筛选框输入的默认值
        screenValRecord: {}, // input 输入的记录
        screenLi: 1,// 筛选的默认值
        screenLiRecord: {}, // 筛选的值输入的记录
        /* 设置table数据 */
        setTableColumns: setTableColumns, // 显示table列 head
        dialogVisible: false, // 显示弹窗
        setTableData: [], // 设置table data
        setTableSelectedRows: [], // 设置table row选择项
        setTableSelectedRowKeys: [], // 设置table key选择项
        options: [ // 对齐方式
          {
            value: 'default',
            label: '默认对齐'
          }, {
            value: 'left',
            label: '居左对齐'
          }, {
            value: 'center',
            label: '居中对齐'
          }, {
            value: 'right',
            label: '居右对齐'
          }
        ],
        isHideAll: false, // 全部显示
        // 控制点击确定隐藏Popover
        visible: false,
        showPName: ''
      }
    },
    props: {
      // 显示表格数据
      tableData: {
        type: Array,
        default: []
      },
      // 表头
      thead: {
        type: Array,
        default: []
      },
      // 是否显示设置
      showSet: {
        type: Boolean,
        default: true
      },
      loading: {
        type: Boolean,
        default: false
      },
      // 边框
      bordered: {
        type: Boolean,
        default: true
      },
      // table 尺寸
      size: {
        type: String,
        default: 'medium'
      },
      // 1 单选 2多选
      mSelect: {
        type: Number, // 绑定索引 序号
        default: 2
      },
      // 单选 多选是否悬浮左边
      mSelectFixed: {
        type: Boolean,
        default: true
      },
      // 分页位置
      pagePosition: {
        type: String,
        default: 'center'
      },
      // 分页
      pagination: {
        type: Object,
        default: () => {
          return {
            total: 0,
            current: 1,
            size: 10
          }
        }
      },
      pageCallback: {
        type: Function,
        require: true,
      },
      // 缓存的页面
      pageName: {
        type: String,
        default: ''
      }
    },
    mounted() {
      // 初始化数据
      this.thead.forEach((item) => {

        /* 基本设置 */
        if (!item.key) item.key = item.dataIndex
        if (!item.align) item.align = 'default'
        if (!item.isHide) item.isHide = false
        item.name = item.title
        // 显示排序
        if (item.sortable) {
          item.sorter = (a, b) => {
            return (a[item['dataIndex']] - b[item['dataIndex']])
          }
        }
        // 过滤
        if (item.filters && item.filters.length) {
          item.onFilter = (value, record) => {
            return (
              record[item.dataIndex].startsWith(value)
            )
          }
        }
        // 显示筛选
        if (item.tableScreen) {
          item.title = (tx, rs, idx) => {
            return <a-popover
              trigger="click"
              placement="bottomRight"
              overlayClassName="xTablePopover"
              visible={this.visible && this.showPName === item.dataIndex}
              onClick={
                (e) => {
                  e.stopPropagation()
                }
              }
              onVisibleChange={
                (visible) => {
                  this.visible = visible
                  if (visible) {
                    this.showPName = item.dataIndex
                    // 设置之前的值
                    this.screenVal = this.screenValRecord[item.dataIndex]
                    this.screenLi = this.screenLiRecord[item.dataIndex] ? this.screenLiRecord[item.dataIndex] : 1

                  } else {
                    this.showPName = ''
                  }
                  setTimeout(() => {
                    document.getElementById(item.dataIndex).focus()
                  }, 50)
                }
              }>
              <template slot="content">
                <ul class="screenDom">
                  <p>
                    <a-input placeholder="请输入关键字"
                             value={this.screenVal}
                             id={item.dataIndex}
                             onClick={
                               (e) => {
                                 e.stopPropagation()
                               }
                             }
                             onChange={
                               (e) => {
                                 console.log(e, 'e')
                                 const val = e.target.value
                                 this.screenVal = val
                                 // screenValRecord 是否存在 key为val的值
                                 const obj = Object.keys(this.screenValRecord)
                                 if (!obj.length) {
                                   this.screenValRecord[item.dataIndex] = val
                                 } else {
                                   const isKey = obj.includes(val)
                                   if (isKey) { // 存在
                                     this.screenValRecord[item.dataIndex] = val
                                   } else {
                                     this.screenValRecord[item.dataIndex] = val
                                   }
                                 }
                               }
                             }
                    />
                  </p>
                  {
                    this.screens.map((it, idx) => {
                      return (
                        <li key={idx} class={`${this.screenLi === it.value ? 'curr' : ''}`}
                            onClick={(e) => {
                              e.stopPropagation()
                              this.screenLi = it.value
                              // screenLiRecord 是否存在 key为val的值
                              const obj = Object.keys(this.screenLiRecord)
                              if (!obj.length) {
                                this.screenLiRecord[item.dataIndex] = this.screenLi
                              } else {
                                const isKey = obj.includes(item.dataIndex)
                                if (isKey) { // 存在
                                  this.screenLiRecord[item.dataIndex] = this.screenLi
                                } else {
                                  this.screenLiRecord[item.dataIndex] = this.screenLi
                                }
                              }
                            }}>{it}
                        </li>)
                    })
                  }
                  <div class="btns">
                    <a-button
                      style="marginRight: 10px"
                      onClick={
                        (e) => {
                          e.stopPropagation()
                          this.screenVal = ''
                          this.screenLi = 1
                          //清空记录
                          for (let key in this.screenValRecord) {
                            if (key === item.dataIndex) {
                              delete this.screenValRecord[key]
                            }
                          }
                          for (let key1 in this.screenLiRecord) {
                            if (key1 === item.dataIndex) {
                              delete this.screenLiRecord[key1]
                            }
                          }
                          this.$emit('xTableScreen', {
                            key: item.dataIndex,
                            keyWord: this.screenVal,
                            keyTtitle: this.screenLi
                          })
                        }
                      }
                    >重置
                    </a-button>
                    <a-button type="primary" onClick={
                      (e) => {
                        e.stopPropagation()
                        if (!this.screenVal) {
                          this.$message.warning('请输入关键字！')
                          return
                        }
                        this.$emit('xTableScreen', {
                          key: item.dataIndex,
                          keyWord: this.screenVal,
                          keyTtitle: this.screenLi
                        })
                        this.showPName = ''
                        this.visible = false
                      }
                    }>确定
                    </a-button>
                  </div>
                </ul>
              </template>
              <span class="filterBg">{item.tableScreen}<i></i></span>
            </a-popover>
          }
        }

        // // 显示操作按钮
        // if (item.tableButtons && item.tableButtons.length) {
        //   item.customRender = (tx, rs, idx) => {
        //     return (
        //       item.tableButtons.map(it => {
        //         return <a class="table-button" href="javascript:;" onClick={() => it.event(event, rs)}>{it.title}</a>
        //       })
        //     )
        //   }
        // }

        // 隐藏列
        if (!item.isHide) {
          // 显示table的列数据
          this.tableColumns.push(item)
        }

        // 设置table的列数据
        this.setTableData.push(item)
      })
    },
    methods: {
      // 分页
      pageChange (val, pageSize) {
        this.pagination.current = val;
        console.log(val, '-1---', pageSize)
        this.$emit('handleSizeChange', {
          current: val,
          size: pageSize
        })
      },
      onShowSizeChange (val, pageSize) {
        console.log('2211')
        this.pagination.current = 1;
        this.pagination.size = pageSize
        this.$emit('handleSizeChange', {
          current: val,
          size: pageSize
        })
      },
      // table点击行选中
      customRows (record) {
        return {
          props: {
            // xxx... //属性
          },
          on: { // 事件
            click: (event) => {
              console.log(record, 'record')
              // 单选
              if (this.mSelect === 1) {
                this.selectedRowKeys = []
                this.selectedRows = []
                this.selectedRowKeys.push(record.dataIndex);
                this.selectedRows.push(record)
              }
              // 多选
              if (this.mSelect === 2){
                let rowKeys = this.selectedRowKeys
                if(rowKeys.length >0 && rowKeys.includes(record.id)){
                  rowKeys.splice(rowKeys.indexOf(record.id),1)
                }else{
                  rowKeys.push(record.id)
                }
                this.selectedRowKeys = rowKeys;
                let rows = this.selectedRows
                if(rows.length > 0 && rows.includes(record)){
                  rows.splice(rows.indexOf(record),1)
                } else {
                  rows.push(record)
                }
                this.selectedRows = rows;

                console.log(this.selectedRowKeys, 'this.selectedRowKeys', this.selectedRows )
              }
              // selectedRows: [], // 选中的数据
              // selectedRowKeys: [], // table选项数据


            },       // 点击行
            dblclick: (event) => {},
            contextmenu: (event) => {},
            mouseenter: (event) => {},  // 鼠标移入行
            mouseleave: (event) => {}
          },
        }
      },
      // 设置table点击行选中
      setCustomRows (record) {
        return {
          props: {
            // xxx... //属性
          },
          on: { // 事件
            click: (event) => {
              let rowKeys = this.setTableSelectedRowKeys
              if(rowKeys.length > 0 && rowKeys.includes(record.dataIndex)){
                rowKeys.splice(rowKeys.indexOf(record.dataIndex),1)
              }else{
                rowKeys.push(record.dataIndex)
              }
              this.setTableSelectedRowKeys = rowKeys;

              let rows = this.setTableSelectedRows
              if(rows.length > 0 && rows.includes(record)){
                rows.splice(rows.indexOf(record),1)
              } else {
                rows.push(record)
              }
              this.setTableSelectedRows = rows;
              console.log(this.setTableSelectedRows, 'this.setTableSelectedRows')
            },       // 点击行
            dblclick: (event) => {},
            contextmenu: (event) => {},
            mouseenter: (event) => {},  // 鼠标移入行
            mouseleave: (event) => {}
          },
        }
      },
      // 显示table选中的数据
      rowClickSelection(selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.$emit('handleChange', selectedRows)
      },
      // model确定按钮
      handleClose() {
        this.dialogVisible = false
        // 清空之前选择的数据
        this.setTableSelectedRows = []
        this.setTableSelectedRowKeys = []
        // 清空选择的table列数据
        this.tableColumns = []
        // 生成新的table数据
        this.setTableData.forEach((item) => {
          if (!item.isHide) {
            this.tableColumns.push(item)
          }
        })
        console.log(this.setTableData, 'this.setTableData')
        // 保存数据
        const saveUserWorkPlaceDto = {
          pageName: this.pageName,
          content: JSON.stringify({
            showSet: this.showSet, // 是否显示设置
            loading: this.loading, // 是否加载
            bordered: this.bordered, // 表格是否显示边框
            size: this.size, // 表格的尺寸
            mSelect: this.mSelect, // 表格是否可选择
            pagePosition: this.pagePosition, // 分页的位置
            columns: this.tableColumns
          }),
          type: 3
        }
        workPlaceAdd(saveUserWorkPlaceDto).then(result => {
          if (result.code === 10200) {
            this.$message.success('设置成功！')
            this.dialogVisible = false
          } else {
            this.$message.error('设置失败！')
          }
        })
      },
      // model取消按钮
      cancelClose() {
        this.dialogVisible = false
        // 清空之前选择的数据
        this.setTableSelectedRows = []
        this.setTableSelectedRowKeys = []
      },

      // 设置table选中的数据
      setSelectedTableChange(selectedRowKeys, selectedRows) {
        this.setTableSelectedRowKeys = selectedRowKeys
        this.setTableSelectedRows = selectedRows
        console.log(this.setTableSelectedRowKeys, 'val', this.setTableSelectedRows)
      },
      // 恢复出厂
      recoveryBasic() {
        // 保存数据
        const saveUserWorkPlaceDto = {
          pageName: this.pageName,
          content: '',
          type: 3
        }
        workPlaceAdd(saveUserWorkPlaceDto).then(result => {
          if (result.code === 10200) {
            this.$message.success("设置成功！");
            this.dialogVisible = false
          } else {
            this.$message.error("设置失败！");
          }
        })
      },
      // 全部显示、隐藏
      showHideAll() {
        this.isHideAll = !this.isHideAll
        this.setTableData.map(item => {
          item.isHide = this.isHideAll
        })
        console.log(this.setTableData, 'this.setTableData')
      },
      // 置顶
      topping() {
        this.setTableSelectedRows.forEach(item => {
          this.setTableData.forEach(it => {
            if (item.title === it.title) {
              this.removeArray(this.setTableData, item)
              this.setTableData.splice(0, 0, item)
            }
          })
        })
      },
      // 置底
      bottoming() {
        this.setTableSelectedRows.forEach((item) => {
          this.setTableData.forEach(it => {
            if (item.title === it.title) {
              this.removeArray(this.setTableData, item)
              this.setTableData.splice(this.setTableData.length, 0, item)
            }
          })
        })
      },
      // 上移
      moveUp() {
        this.setTableSelectedRows.forEach((item) => {
          this.setTableData.forEach((it, index) => {
            console.log(item, '==', it)
            if (item.title === it.title && index !== 0) {
              this.removeArray(this.setTableData, it)
              this.setTableData.splice(index - 1, 0, item)
            }
          })
        })
      },
      // 下移
      moveDown() {
        this.setTableSelectedRows.reverse().forEach((item) => {
          let found = -1
          this.setTableData.forEach((it, index) => {
            if (item.title === it.title && this.setTableData.length - 1 > index) {
              this.removeArray(this.setTableData, it)
              found = index
            }
          })
          if (found !== -1) {
            this.setTableData.splice(found + 1, 0, item)
          }
        })
      },

      // 取消选中
      toggleSelection(rows) {
        this.selectedRows = []
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },

      /**
       * 从数组中删除指定对象
       * arrData:数组
       * objData:需删除的对象
       * */
      removeArray(arrData, objData) {
        let length = arrData.length
        for (let i = 0; i < length; i++) {
          if (arrData[i] === objData) {
            if (i === 0) {
              arrData.shift() // 删除并返回数组的第一个元素
              return arrData
            } else if (i === length - 1) {
              arrData.pop() // 删除并返回数组的最后一个元素
              return arrData
            } else {
              arrData.splice(i, 1) // 删除下标为i的元素
              return arrData
            }
          }
        }
      }
    }
  }
</script>
<style lang="less">
  /*  设置表格 样式*/
  .xTable {
    .ant-table {
      border-radius: 6px 6px 0 0;
      overflow: hidden;

      .ant-table-thead > tr > th {
        background: #f7f9fc;
        color: #45474d;
        border-color: #e3eaf2;
        padding: 13px 16px;

        .ant-table-column-has-actions.ant-table-column-has-sorters:hover {
          background: #f2f3f6 !important;
        }
      }

    }
    .ant-pagination-options-quick-jumper input {
      text-align: center;
    }

    .page-left {
      .ant-pagination {
        text-align: left;
      }

      .ant-table-pagination.ant-pagination {
        float: none;
      }
    }

    .page-center {
      .ant-pagination {
        text-align: center;
      }

      .ant-table-pagination.ant-pagination {
        float: none;
      }
    }

    .page-right {
      .ant-pagination {
        text-align: right;
      }

      .ant-table-pagination.ant-pagination {
        float: none;
      }
    }

    .ant-table-tbody > tr > td {
      padding: 13px 16px;
    }

    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
      background: #f7f9fc;
    }

    .el-checkbox__inner {
      width: 16px !important;
      height: 16px !important;
    }

    .filterBg {
      i {
        width: 1em;
        height: 1em;
        display: inline-block;
        background: url("../../assets/images/filter-fill.png") center right no-repeat;
        background-size: 12px auto;
        opacity: 0.8;
        margin-left: 8px;
        position: relative;
        top: 3px;

        &:hover {
          opacity: 1;
        }
      }
    }
  }

  .ant-input:hover, .ant-input:focus {
    border-color: #5c92ff;
  }

  .ant-popover-inner {
    border-radius: 6px !important;

    .ant-popover-inner-content {
      padding: 12px;
    }

    p {
      margin-bottom: 10px;
    }
  }

  .ant-modal {
    border-radius: 6px !important;
    overflow: hidden;

    .ant-switch-checked {
      background-color: #306DF6;
    }

    .ant-modal-header {
      background: #F4F6FA;
    }
  }

  .ant-select-selection {
    border-radius: 4px;
  }

  .ant-table-scroll {
    border-radius: 4px 4px 0 0;
  }

  .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
    padding: 13px 16px;
  }

  .ant-table-thead > tr > th {
    background: #f7f9fc;
  }

  .ant-btn {
    border-radius: 6px;

    &:hover {
      color: #5c92ff;
      border-color: #5c92ff;
    }

    &.ant-btn-primary {
      background: #306df6 !important;
      border-color: #306df6 !important;

      &:hover {
        background: #6796ff !important;
        border-color: #6796ff !important;
        color: #fff;
      }
    }

    &.ant-btn-primary:focus {
      background: #6796ff;
      border-color: #6796ff;
    }
  }

  .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-thead > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td, .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background: #fafafa;
  }

  .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled), .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background-color: #fafafa !important;
  }

  .ant-table-filter-dropdown-link {
    &.confirm {
      float: right;
      height: 24px;
      line-height: 24px;
      border-radius: 4px;
      padding: 0 7px;
      color: #fff;
      display: inline-block;
      background: #306DF6;

      &:hover {
        background: #6896FF;
        /*color: #6896FF;*/
      }
    }
    &.clear {
      float: left;
      height: 24px;
      line-height: 24px;
      border-radius: 4px;
      padding: 0 7px;
      display: inline-block;
      border: 1px solid #306DF6;
      margin-right: 10px;
    }
  }
  .ant-dropdown-menu-item:hover {
    background-color: #fafafa !important;
  }
  .ant-dropdown-menu-item-selected {
    background-color: #fafafa !important;
    color: #306DF6;
  }

  .ant-select-dropdown-menu-item-selected {
    background-color: #f0f7ff;
  }
  .ant-modal-content {
    border-radius: 6px;
  }
</style>
<style scoped lang="less">
  /*设置表格样式*/
  .xTable {
    position: relative;

    /*设置*/

    .set {
      text-align: center;
      line-height: 48px;
      height: 47px;
      width: 47px;
      position: absolute;
      right: 1px;
      top: 1px;
      z-index: 999;
      border-left: 1px solid #E9EEF2;
      background: #F4F6FA;
      border-radius: 0 6px 0 0;
      cursor: pointer;
      opacity: .8;

      &:hover {
        opacity: 1;
      }

      &.curr {
        top: 60px;
      }
    }

    /*分页*/

    .pageStyle {
      text-align: center;
      padding-top: 10px;
    }

    /*操作按钮样式*/

    .table-button {
      height: 32px;
      line-height: 1.5715;
      border-radius: 4px;
      padding: 4px 15px;
      color: #306DF6;
      display: inline-block;

      &:hover {
        background: rgba(0, 0, 0, 0.018);
        /*color: #6896FF;*/
      }
    }
  }

  /*设置弹窗操作项*/
  .xTableModel {
    .operateBtn {
      padding-bottom: 10px;

      .tag {
        text-align: right;
        padding-bottom: 12px;
        cursor: pointer;
        color: #306DF6;
        font-size: 14px;
        position: relative;
        top: -5px;

        > span {
          &:hover {
            color: #6896FF;
          }

          &:first-child {
            color: #FF4949;

            &:hover {
              color: #FF7773;
            }
          }
        }

        i {
          margin: 0 18px;
          color: #E9EEF2;
          font-style: normal;
          font-size: 9px;
        }
      }
    }
  }

  /*筛选弹窗样式*/
  .xTablePopover {
    /* 筛选 */

    .screenInput {
      margin-bottom: 10px;
    }

    .screenDom {
      .btns {
        button {
          border-radius: 6px;

          &:first-child {
            margin-right: 10px;

            &:hover {
              color: #5c92ff;
              border-color: #5c92ff;
            }
          }

          &:last-child {
            background: #306df6;
            border-color: #306df6;

            &:hover {
              background: #6796ff;
              border-color: #6796ff;
            }
          }
        }
      }

      li {
        line-height: 32px;
        cursor: pointer;
        border-radius: 4px;
        padding-left: 10px;

        &:nth-last-child(2) {
          margin-bottom: 10px;
        }

        &.curr {
          color: #306DF6;
          background: rgba(48, 109, 246, 0.1);

          &:hover {
            background: rgba(48, 109, 246, 0.1);
          }
        }

        &:hover {
          background: #F4F6FA;
        }
      }
    }
  }
</style>

<template>
            <XTable
                v-if="showTable"
                :thead="thead"
                :tableData="tableData"
                :showSet="showSet"
                :bordered="bordered"
                :loading="loading"
                :size="size"
                :mSelect="mSelect"
                :mSelectFixed="false"
                :pagePosition="pagePosition"
                pageName="inputInvoicePoolData"
                @handleChange="rowClickSelection"
                @xTableScreen="xTableScreen"
                @handleSizeChange="handleSizeChange"
              />
</template>
<script>
  import XTable from "@/components/XTable/index.vue";
  import { workPlaceList } from "@/api/common.js";
 
export default {
    name: 'xtable',
    components: {
      XTable
    },
    data() {
        return {
          tableData: [
            {
              key: '1',
            id: '1'
              name: 'John Brown',
              age: 32,
              address: 'New York No. 1 Lake Park',
              tags: ['nice', 'developer'],
            },
            {
              key: '2',
              name: 'Jim Green',
              age: 42,
              address: 'London No. 1 Lake Park',
              tags: ['loser'],
            },
            {
              key: '3',
              name: 'Joe Black',
              age: 32,
              address: 'Sidney No. 1 Lake Park',
              tags: ['cool', 'teacher'],
            },
          ],
          thead: [
            /*
            * 1.title、dataIndex 必传
             * 3.width列的宽度，非必传
             * 4.align 列的对齐方式，非必传
             * 5.isHide, 隐藏列，true隐藏，false显示，非必传
             * 6.sortable 排序，true显示，false隐藏，非必传
             * 7.tableScreen: '税额',筛选字段跟title一至，非必传
             * 8.过滤，非必传
             *    1）filterMode: 'tree', // 指定筛选菜单的用户界面 默认menu
             *    2）filterMultiple: true, // 过滤单选，默认为true多选
             * 9.tableButtons 操作按钮，传对象[{title: '按钮名称'，event: '按钮事件'}] ，非必传
            *10.点击行选中
            * */
            {
              title: '姓名',
              dataIndex: 'name',
              align: "center",
              width: 200,
              sortable: true, // 排序，可传，需要显示要传
              filters: [ // 过滤，可传，需要显示要传
                { text: 'John Brown', value: 'John Brown' },
                { text: 'Jim Green', value: 'Jim Green' },
              ],
              filterMultiple: false,
              tableScreen: "姓名", // 筛选，可传，需要显示要传
            },
            {
              title: '年龄',
              dataIndex: 'age',
              align: "center",
              filters: [
                { text: 'Male', value: 'male' },
                { text: 'Female', value: 'female' },
              ],
              sortable: true,
              tableScreen: "年龄",
            },
            {
              title: 'Tags',
              isHide: true,
              dataIndex: 'tags',
            },
            {
              title: '操作',
              dataIndex: 'operation', // 操作固定字段
              fixed: 'right',
              width: 150,
              // 按钮
              customRender: (text, record, index) => {
                return <span slot-scope="scope">
                    <a-button onClick={
                        () => this.handleInvoiceDetail(event, record)}>详情2</a-button>
                    <a-button onClick={
                        () => this.deleteColumns(event, record)}>删除2</a-button>
                  </span>
              }
            }
          ],
          showTable: false, // 是否显示组件
          showSet: true, // 是否显示设置
          bordered: true, // 表格是否显示边框
          loading: false, // 表格加载
          size: "default", // 表格的尺寸
          mSelect: 2, // 多选单选
          pagePosition: "center", // 分页的位置
          /* xtable */
        }
    },
    mounted() {
        this.getSetData()
    },
    methods: {
    // 分页
      handleSizeChange (val) {
        console.log(val, '11111')
      },
    // 操作按钮的回调
    handleInvoiceDetail (e, val){
        e.stopPropagation()
        console.log(val, '2222222222222222222', e)
    },
      // 操作按钮调用
      deleteColumns (e,val) {
        console.log(val, '========================')
      },
        // 选中的数据
      rowClickSelection(val) {
        console.log(val, "111");
      },
      // 筛选
      xTableScreen(val) {
        console.log(val, "-------");
      },
      // 获取设置的数据
      getSetData() {
        workPlaceList({ pageName: "inputInvoicePoolData", type: 3 }).then(
          (result) => {
            const data = result.data && result.data[0];
            if (data && data.content) {
              const content = JSON.parse(data.content);
              content.columns.forEach(item => {
                if (item.dataIndex === 'operation') {
                  item.customRender = (text, record, index) => {
                    return <span slot-scope="scope">
                    <a-button onClick={
                        () => this.handleInvoiceDetail(event, record)}>详情2</a-button>
                    <a-button onClick={
                        () => this.deleteColumns(event, record)}>删除2</a-button>
                  </span>
                  }
                }
              })
                this.thead = []
              this.thead = content.columns;
              this.showSet = content.showSet ? content.showSet : true;
              this.bordered = content.bordered ? content.bordered : true;
              this.size = content.size ? content.size : "medium";
              this.mSelect = content.mSelect ? content.mSelect : 2;
              this.pagePosition = content.pagePosition
                ? content.pagePosition
                : "center";
              this.showTable = true;
            } else {
              this.showTable = true;
            }
          }
        );
      },
    }
}
</script>