GY_ceshi_web/src/views/data/frontHome/defectRuleProblem.vue

<template>
  <div class="box">
    <div class="box_wrapper">
      <SearchBoxVue :data="searchData" :codes="tableShowCode" @search="handleSearch" @reset="handleReset" @codesChange="handleCodesChange" />
      <TableBoxVue :loading="loading" :data="tableData" :codes="tableShowCode" @export="handelExport" style="margin-top: -40px;" />
      <div style="overflow: hidden;">
        <el-pagination
          v-if="tableData && tableData.length !== 0"
          :total="paginationData.total"
          background
          class="table-pagination"
          :page-size="paginationData.limit"
          :current-page.sync="paginationData.page"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="SizeChangeEvent"
          @current-change="pageHasChanged"
        />
      </div>
    </div>
  </div>
</template>

<script>
import SearchBoxVue from './components/SearchBox2.vue'
import TableBoxVue from './components/TableBox2.vue'
import { errorDetailsListExport } from '@/api/excel'

export default {
  components: {
    SearchBoxVue,
    TableBoxVue
  },
  data() {
    return {
      loading: false,
      searchData: {
        AAA28: '',
        dep_id: '',
        start_time: '',
        end_time: '',
        type: '',
        level: '',
        desc: '',
        AEE04: '',
        AEE08: '',
        ICD10_NAME: '',
        ICD10_ID1: '',
        ICD9_NAME: '',
        ICD9_ID1: ''
      },
      tableData: [],
      paginationData: {
        total: 0,
        page: 1,
        limit: 10
      },
      error_rule: '',
      tableShowCode: [
        'field',
        'desc',
        'AAA28',
        'AAA01',
        'time',
        'AAC11N',
        'AEE08',
        'AEE04',
        'type',
        'level',
        'ICD10_NAME',
        'ICD10_ID1',
        'ICD9_NAME',
        'ICD9_ID1'
      ]
    }
  },
  created() {
    this.error_rule = this.$route.query.error_rule
    this.getList()
  },
  methods: {
    // 展示字段变化
    handleCodesChange(val) {
      localStorage.setItem('surgery_talbe_codes', val)
      this.$set(this, 'tableShowCode', val)
    },
    getList() {
      const {
        page,
        limit
      } = this.paginationData
      const params = {
        ...this.searchData,
        error_rule: this.error_rule,
        page,
        page_size: limit
      }
      this.$axios.post('/home_quality/errorDetailsList', params).then(res => {
        this.tableData = res.data.list
        this.paginationData.total = res.data.count
      });
    },
    SizeChangeEvent(val) {
      this.paginationData.limit = val
      this.getList()
    },
    pageHasChanged(val) {
      this.paginationData.page = val
      this.getList()
      
    },
    handleSearch() {
      this.paginationData.page = 1
      this.getList()
    },
    handelExport() {
      errorDetailsListExport(...this.searchData).then(res => {
        const content = res.data; // 后台返回二进制数据
        const blob = new Blob([content]);
        const fileName = `缺陷问题详情.csv`;
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    handleReset() {
      this.paginationData.page = 1
      this.paginationData.limit = 10
      this.searchData = {
        AAA28: '',
        dep_id: '',
        start_time: '',
        end_time: '',
        type: '',
        level: '',
        desc: '',
        AEE04: '',
        AEE08: '',
        ICD10_NAME: '',
        ICD10_ID1: '',
        ICD9_NAME: '',
        ICD9_ID1: ''
      }
      this.tableData = []
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  user-select: none;
  padding: 16px;
  .box_wrapper {
    padding: 16px;
    padding: 16px;
    background: #fff;
    border-radius: 5px;
    position: relative;
  }
  .table-pagination {
    float: right;
  }
}
</style>