ImportLogDialog.vue 2.54 KB
<template>
  <el-dialog
    title="导入日志"
    :visible.sync="visible"
    :before-close="handleClose"
  >
    <ht-table
      ref="htTable"
      :data="tableData"
      :pageResult="pageResult"
      quick-search-props="name,account"
      :show-export="false"
      :default-sorter="[{direction: 'DESC', property: 'create_time_'}]"
      :showCustomColumn="false"
      :header-cell-class-name="headerCellClassName"
      @load="loadData"
    >
      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="name"
          label="导入人"
          :sortable="true"
          :show-overflow-tooltip="true"
        />
        <ht-table-column prop="account" label="导入账号" />
        <ht-table-column
          prop="importTime"
          label="导入时间"
          :sortable="true"
        />
        <ht-table-column
          prop="status"
          label="导入状态"
          :render-header="renderHeaderMethod"
          :filters="filters"
        >
          <template v-slot="{row}">
            <span :class="[row.status == 'success'?'green-color':'red-color']">{{
              statusMap[row.status]
            }}</span>
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" type="primary">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
export default {
  name: 'ImportLogDialog',
  mixins: [tableHeaderFilter],
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [
        {
          name: '管理员',
          account: 'admin',
          importTime: '2022-04-15 11:00:00',
          status: 'success'
        },
        {
          name: '管理员',
          account: 'admin',
          importTime: '2022-04-15 11:00:00',
          status: 'fail'
        }
      ],
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      statusMap: {
        success: '导入成功',
        fail: '导入失败'
      }
    }
  },
  computed: {
    filters() {
      return Object.keys(this.statusMap).map(item => {
        return {
          text: this.statusMap[item],
          value: item
        }
      })
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    loadData(params, cb) {
      cb()
    }
  }
}
</script>

<style lang="scss" scoped></style>