faw-report-library-web/src/views/permissionApplication/components/reportTable.vue

<template>
  <div class="reportTable">
    <el-button v-if="!disabled" class="addbtn" size="big" @click="addReport">添加报告</el-button>
    <el-button v-if="!disabled" class="delbtn" size="big" @click="deleteAll">批量删除</el-button>
    <div class="table">
      <vxe-table :data="processTable" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="500"
      ref="xTable" @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
        <vxe-column type="checkbox" width="60"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="name" title="报告名称"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="name" title="车系"></vxe-column>
<!--        <vxe-column show-overflow show-header-overflow field="labelTwoName" :title="tagsForm.tags02.name"></vxe-column>-->
<!--        <vxe-column show-overflow show-header-overflow field="labelThreeName" :title="tagsForm.tags03.name"></vxe-column>-->
        <vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="createDate" title="报告部门"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="createDate" title="涉密等级"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="createDate" title="隐私等级"></vxe-column>
        <vxe-column show-overflow show-header-overflow field="labelOneName" :title="tagsForm.tags01.name"></vxe-column>

        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right" v-if="!disabled">
          <template #default="{ row }">
            <el-button type="text" class="del-btn" @click="reportDelete(row.id)">删除</el-button>
            <!--                        <el-button type="text" @click="downloadRow(row)">下载</el-button>-->
          </template>
        </vxe-column>
      </vxe-table>
      <el-pagination
        @size-change="handleLogSizeChange"
        @current-change="handleLogCurrentChange"
        :current-page="qLog.pageNo"
        :page-sizes="[5, 10, 20]"
        :page-size="qLog.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"/>
      <reportDialog ref="reportDialog" :tagsForm="tagsForm" :alreadyData="value" @confirm="addReportList"></reportDialog>
    </div>
  </div>
</template>

<script>
import reportDialog from './reportDialog'
export default {
  name: 'reportTable',
  props: {
    value: {
      type: Array,
      default: new Array([]),
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  components: {
    reportDialog
  },
  data () {
    return {
      processTable: [],
      total: 0,
      qLog: {
        pageSize: 10,
        pageNo: 1
      },
      copyTableData: [],
      checkIds: [],
      tagsForm: {
        tags01: {
          name: '',
          parentId: '0',
          type: '1',
          id: '',
          childList: [
            // {name: '无', type: '1', id: '', parentId: ''},
          ]
        },
        tags02: {
          name: '',
          parentId: '0',
          type: '2',
          id: '',
          childList: [
            // {name: '无', type: '2', id: '', parentId: ''},
          ]
        },
        tags03: {
          name: '',
          parentId: '0',
          type: '3',
          id: '',
          childList: [
            // {name: '无', type: '3', id: '', parentId: ''},
          ]
        }
      }
    }
  },
  watch: {
    value () {
      this.total = this.value.length
      this.processTable = this.value.slice(0, 9)
    }
  },
  created () {
    // this.copyTableData = JSON.parse(JSON.stringify(this.tableData))
    this.labelList()
  },
  methods: {
    addReportList (list) {
      this.$emit('updateTable', [...this.value , ...list])
    },
    pageChage (current) {
      setTimeout(() => {
        current = current || this.qLog.pageNo
        this.qLog.pageNo = current
        this.processTable = this.value.slice(this.qLog.pageSize * (current - 1), this.qLog.pageSize * current)
        // console.log(this.pages.size, this.pages.size * (current - 1), this.pages.size * this.pages.current, this.list)
        if (this.processTable.length < 1 && current > 1) {
          this.pageChage(current - 1)
          return false
        }
      })
      this.total = this.value.length
    },
    handleLogSizeChange (val) {
      this.qLog.pageSize = val
      this.qLog.pageNo = 1
      this.pageChage(1)
    },
    handleLogCurrentChange (val) {
      this.qLog.pageSize = val
      this.qLog.pageNo = 1
      this.pageChage(1)
    },
    // 标签列表
    labelList () {
      this.$api.report.labelList().then(({ data }) => {
        if (!data.labelOne.childList.length) {
          data.labelOne.childList = [{ name: '', id: '', parentId: this.tagsForm.tags01.id, type: '1' }]
        }
        if (!data.labelTwo.childList.length) {
          data.labelTwo.childList = [{ name: '', id: '', parentId: this.tagsForm.tags02.id, type: '2' }]
        }
        if (!data.labelThree.childList.length) {
          data.labelThree.childList = [{ name: '', id: '', parentId: this.tagsForm.tags03.id, type: '3' }]
        }
        this.tagsForm.tags01 = data.labelOne
        this.tagsForm.tags02 = data.labelTwo
        this.tagsForm.tags03 = data.labelThree
      })
    },
    selectAllEvent ({ checked }) {
      const records = this.$refs.xTable.getCheckboxRecords()
      this.checkIds = records.map(item => {
        return item.id
      })
    },
    selectChangeEvent ({ checked }) {
      const records = this.$refs.xTable.getCheckboxRecords()
      this.checkIds = records.map(item => {
        return item.id
      })
    },
    addReport () {
      this.$refs.reportDialog.show()
    },
    deleteAll () {
      this.reportDelete(this.checkIds)
    },
    reportDelete (id) {
      // 删除报告 假删除
      if (typeof id === 'string') {
        this.$confirm('此操作将删除所选数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('updateTable', this.value.filter(item => item.id !== id))
        })
      } else {
        if (Array.isArray(id)) {
          this.$confirm('此操作将删除所选数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$emit('updateTable', this.value.filter(item => id.indexOf(item.id) === -1))
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .table{
    margin-top: 10px;
  }
  .reportTable{
    margin-bottom: 20px;
  }
  .addbtn{
    background-color: #8400FF;
    color: #fff;
  }
  .delbtn{
    background-color: #d9001b;
    color: #fff;
  }
</style>