laws_weilai/jero-web/src/components/SplitTable/DocTable.vue

<template>
  <div style="height: 100%">
    <div class="box">
      <a-table
        class="table"
        rowKey="id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :pagination="false"
        :scroll="{x: '100%'}"
        :data-source="dataSource"
        :loading="loading"
        :columns="columns"
        @change="tableOnChange"
      >
        <span slot="operation" slot-scope="record">
           <a class="text" v-for="(ol,index) in OperationList"
              @click="OperationClick(ol,record)">
              <span v-if="ol.text==$t('SyncLibrary')">
                     {{record.resultContent=='转换成功'&&record.syncState=='未同步'&&record.fileSource=='1'?ol.text:''}}
              </span>
             <span v-if="ol.text==$t('check')">
                     {{record.resultContent=='转换成功'&&record.syncState=='未同步'?ol.text:''}}
              </span>
             <span v-if="ol.text==$t('download')">
                     {{record.resultContent=='转换成功'?ol.text:''}}
              </span>
             <span v-if="ol.text==$t('delete')">
                     {{record.resultContent=='转换成功'?ol.text:''}}
              </span>
           </a>
         </span>
        <span slot="detailText" slot-scope="text,record">
              <span class="text" :title="text">
               {{text}}
              </span>
        </span>
        <span slot="detail" slot-scope="text,record">
           <span class="textName" :title="text">
                {{text}}
           </span>
        </span>
      </a-table>
    </div>
    <div class="page" v-if="dataSource.length > 0">
      <a-pagination
        :show-total="total => $t('total')+` ${total} ` +$t('strip')"
        show-quick-jumper
        show-size-changer
        :page-size.sync="pageSize"
        :total="total"
        :current="pageNo"
        @change="onChange"
        @showSizeChange="SizeChange"
      />
    </div>
  </div>
</template>

<script>
  import eventBUs from '../../common/event'
  import { getAction, postAction } from '@/api/manage'

  export default {
    name: 'SplitDocTable',
    props: {
      //接口
      url: {
        type: Object,
        default: {}
      },
      // 操作按钮
      OperationList: {
        type: Array,
        default: []
      },
      flag: {
        type: String,
        default: ''
      },
      //是否显示操作；默认不显示
      showAction: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        jsonBody: [],
        checkboxList: [],
        tableAll: false,
        indeterminate: false,
        columns: [],
        selectedRowKeys: [],
        dataSource: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        searchParmes: {},
        loading: false,
        orderBy: '1',
        orderByField: ''
      }
    },
    mounted() {
      eventBUs.$on('searchQueryOne', search => {
        Object.keys(search).forEach(res => {
          if (search[res] instanceof Array) {
            search[res] = search[res].join(',')
          }
        })
        this.searchParmes = search
        this.getData()
        this.getTableList()
      })
      eventBUs.$on('searchResetOne', target => {
        this.searchParmes = {}
        this.selectedRowKeys = []
        this.getData()
        this.getTableList()
      })
      this.getData()
      this.getTableList()
    },
    beforeDestroy(){
      eventBUs.$off('searchQueryOne')
      eventBUs.$off('searchResetOne')
    },
    methods: {

      getTextWith(text, fontStyle) {
        var canvas = document.createElement('canvas')
        var context = canvas.getContext('2d')
        context.font = fontStyle || '14px' // 设置字体样式
        var dimension = context.measureText(text)
        return dimension.width + 40
      },
      getData() {
        let params = {
          flag: this.flag
        }
        getAction(this.url.tableHeader, params).then((res) => {
          if (res.success) {
            var jsonHead = res.result
            this.columns = []
            // this.columns.push(
            //   {
            //     title: this.$t('serialNumber'),
            //     dataIndex: 'index',
            //     key: 'index',
            //     align: 'center',
            //     customRender: (text,record,index) => `${index+1}`,
            //   })
            jsonHead.forEach((res, index) => {
              this.columns.push({
                title: res.db_field_txt,
                dataIndex: res.db_field_name,
                align: 'center',
                ellipsis: true,
                sorter: res.sort,
                width: 170
              })
              if (res.click) {
                this.columns[index].scopedSlots = {
                  customRender: 'detailClick'
                }
              } else if (res.db_field_txt == 'number' || res.db_field_txt == 'Title' || res.db_field_txt == '编号' || res.db_field_txt == '标题') {
                this.columns[index].scopedSlots = {
                  customRender: 'detail'
                }
                this.columns[index].ellipsis = false
              } else {
                this.columns[index].scopedSlots = {
                  customRender: 'detailText'
                }
              }
            })
            let width = 0
            if (this.OperationList.length > 0) {
              for (let i = 0; i < this.OperationList.length; i++) {
                width += this.getTextWith(this.OperationList[i].text)
              }
            }
            if (this.showAction) {
              this.columns.push({
                title: this.$t('operation'),
                align: 'center',
                fixed: 'right',
                width: width,
                scopedSlots: { customRender: 'operation' }
              })
            }
          }
        })
      },
      tableOnChange(pagination, filters, sorter) {
        this.orderBy = sorter.order == 'ascend' ? '1' : '2'
        this.orderByField = sorter.columnKey
        this.getTableList()
      },
      getTableList() {
        let pageNo = JSON.parse(JSON.stringify(this.pageNo))
        let pageSize = JSON.parse(JSON.stringify(this.pageSize))
        let params = {
          ...this.searchParmes,
          type: this.type,
          orderBy: this.orderBy,
          orderByField: this.orderByField,
          pageNo: pageNo + '',
          pageSize: pageSize + ''
        }
        this.loading = true
        postAction(this.url.tableList, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.total = res.result.total
            this.loading = false
          } else {
            this.loading = false
          }
        })
      },
      onChange(page, pageSize) {
        this.pageNo = page
        this.getTableList()
      },
      SizeChange(page, pageSize) {
        this.pageNo = 1
        this.pageSize = pageSize
        this.getTableList()
      },
      onSelectChange(value, rows) {
        this.selectedRowKeys = value
        this.$emit('onSelectChange', value, rows)
      },
      OperationClick(ol, item) {
        this.$emit(ol.ClickEvent, item)
      },
      detailClick(item, index) {
        this.$emit('detailClick', item)
      }
    }
  }
</script>
<style>
  .table .ant-table-column-title {
    font-weight: bold;
  }
</style>
<style scoped>
  .box {
    width: 100%;
    height: calc(100% - 100px);
    overflow: auto;
  }

  .text {
    margin-right: 10px;
  }

  .page {
    text-align: right;
    margin-top: 20px;
  }

  .textName {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /*! autoprefixer: on;*/
    text-justify: inter-ideograph;
    word-break: break-all
  }
</style>