SZJCFLFJ/src/views/system/securityCheck/components/securityCheckTableWaybill.vue

<template>
  <div class="security-check-table-wrapper" :style="{ height: tableWrapperHeight }">
    <a-table
      :data-source="tableData"
      :columns="columns"
      :row-key="rowKey"
      :row-selection="withSelection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null"
      :rowClassName="rowClassName"
      bordered
      :pagination="pagination"
      @change="handleTableChange"
      :loading="loading"
      :scroll="{ y: 600 }"
    >
      <template v-if="withOperateColumn" slot="operation" slot-scope="text, record">
        <div class="column-operate">
          <span class="cell-operate-edit" @click="editRow(record)">修改</span>
          <span class="cell-operate-delete" @click="deleteRow(record)">删除</span>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  name: 'SecurityCheckTable',
  props: {
    height: {
      type: [Number, String],
      default: '50vh',
    },
    tableCols: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    rowKey: {
      type: String,
      default: 'key',
    },
    withSelection: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    pagination: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      selectedRowKeys: [],
    }
  },
  computed: {
    columns() {
      function setClickHandler(columns) {
        return columns.map((col) => {
          if (col.clickHandler) {
            col.customCell = (row, rowIndex) => {
              return {
                class: 'cell-click',
                on: {
                  click: () => {
                    col.clickHandler(row, rowIndex)
                  },
                },
              }
            }
          }
          if (col.children) {
            setClickHandler(col.children)
          }
          return col
        })
      }
      return setClickHandler(this.tableCols)
    },
    tableWrapperHeight() {
      return typeof this.height === 'number' ? this.height + 'px' : this.height
    },
    withOperateColumn() {
      return this.columns.find((col) => col.dataIndex === 'operation')
    },
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log(selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    rowClassName(index) {
      if (index.index % 2 == 0) {
        return 'warning-row'
      } else {
        return 'warning-rows'
      }
    },
    editRow(row) {
      // console.log('edit')
    },
    deleteRow(row) {
      // console.log('delete')
    },
    clickHandler(index) {
      // console.log(index)
    },
    handleTableChange(pagination, filters, sorter) {
      this.$emit('handleTableChange', pagination)
    },
  },
}
</script>

<style lang="scss" scoped>
.security-check-table-wrapper {
  width: 100%;
  ::v-deep .ant-table {
    width: 100%;
    // .ant-table-content {
    //   height: 550px !important;
    // }
    // .ant-table-placeholder {
    //   min-height: 600px;
    // }
    .ant-table-body {
      height: 600px !important;
    }
    // .ant-table-tbody {
    //   min-height: 600px !important;
    // }
    .ant-table-thead {
      th {
        padding: 15px 12px;
      }
      .ant-table-column-title {
        font-size: 14px;
        font-family: Helvetica, 'Microsoft YaHei';
        color: #101116;
        font-weight: bold;
      }
    }
    .ant-table-tbody {
      .warning-row {
        background-color: #f3f5f8;
        padding: 9px 16px;
      }
      .warning-rows {
        background-color: #fff;
        padding: 9px 16px;
      }
      td {
        font-size: 14px;
        font-family: Helvetica, 'Microsoft YaHei';
        color: #101116;
        padding: 13px 8px;
        &.cell-click {
          color: #2d67e3;
          cursor: pointer;
        }
      }
      .column-operate {
        span {
          cursor: pointer;
          &:not(:last-child) {
            margin-right: 25px;
          }
          &.cell-operate-edit {
            color: #2d67e3;
          }
          &.cell-operate-delete {
            color: #ea4545;
          }
        }
      }
    }
  }
}
</style>