laws_weilai/jero-web/src/components/ocrTable/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: true}"
        :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=='未同步'?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="detailClick" slot-scope="text,record">-->
        <!--              <a class="text" :title="text" @click="detailClick(record)">{{text}}</a>-->
        <!--        </span>-->
        <!--        <span slot="detailText" slot-scope="text,record">-->
        <!--              <span class="text" :title="text">-->
        <!--               {{text.length > 18?text.slice(0,17)+'...':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"
        @change="onChange"
        @showSizeChange="SizeChange"
      />
    </div>
  </div>
</template>

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

  export default {
    name: 'docTable',
    props: {
      //接口
      url: {
        type: Object,
        default: {}
      },
      // 操作按钮
      OperationList: {
        type: Array,
        default: []
      },
      flag: {
        type: String,
        default: ''
      },
      //是否显示操作；默认不显示
      showAction: {
        type: Boolean,
        default: false
      }
    },
    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('searchQuery', 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('searchReset', target => {
        this.searchParmes = {}
        this.getData()
        this.getTableList()
      })
      this.getData()
      this.getTableList()
    },
    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
              })
              if (res.click) {
                this.columns[index].scopedSlots = {
                  customRender: 'detailClick'
                }
              } 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,
          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.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;
  }

  .ant-table td {
    white-space: nowrap;
  }
</style>
<style scoped>
  .box {
    width: 100%;
    height: calc(100% - 100px);
    overflow: auto;
  }

  .text {
    margin-right: 10px;
  }

  .page {
    text-align: right;
    margin-top: 20px;
  }
</style>