supplier_system/src/dashoo.cn/frontend_web/src/pages/oilsupplier/goodsaptitude2019/index.vue

<template>
  <div>
    <el-breadcrumb class="heading">
      <el-breadcrumb-item :to="{ path: '/' }">平台首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/oilsupplier/goodsaptitude' }">物资类项目与资质对照表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card"
             style="height: calc(100vh - 115px);" v-loading="loading">
      <div slot="header">
        <span>
          <i class="icon icon-table2"></i> 物资类项目与资质对照表
        </span>

        <el-form ref="form"
                 :inline="true"
                 style="float: right; margin-top: -10px">
          <el-form-item label="编码">
            <el-input size="mini"
                      v-model="Code"
                      style="width:100%"
                      placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item label="名称">
            <el-input size="mini"
                      v-model="Name"
                      style="width:100%"
                      placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item>
            <el-dropdown split-button
                         type="primary"
                         size="mini"
                         @click="initDatas"
                         @command="searchCommand">
              查询
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="clear">查询重置</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <router-link :to="'/oilsupplier/goodsaptitude2019/add/operation'">
              <el-button type="primary"
                         size="mini"
                         style="margin-left:10px; margin-top: -4px;">添加</el-button>
            </router-link>
            <el-button type="primary"
                       size="mini"
                       style="margin-left:10px; margin-top: -4px;"
                       @click="exportExcel">导出
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table id="rebateSetTable"
                :data="entityList"
                size="mini"
                border
                height="calc(100vh - 243px)"
                style="width: 100%"
                @sort-change="orderby">
        <el-table-column label="操作"
                         min-width="200"
                         align="center"
                         fixed="right">
          <template slot-scope="scope">
            <router-link :to="'/oilsupplier/goodsaptitude2019/' + scope.row.Id + '/operation'">
              <el-button type="primary"
                         plain
                         title="编辑"
                         size="mini">编辑</el-button>
            </router-link>
          </template>
        </el-table-column>

        <el-table-column v-for="column in tableColumns"
                         :prop="column.prop"
                         sortable
                         :width="column.width"
                         :key="column.Id"
                         :label="column.label"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>

        <!--动态显示的表头-->
        <el-table-column v-for="column in dynamicTableColumns"
                         :prop="column.prop"
                         sortable
                         :width="320"
                         :key="column.Id"
                         :label="column.label"
                         align="center"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            {{ transferStr(scope.row[column.prop]) }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[10, 50, 100, 200, 400]"
                     :page-size="size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="currentItemCount">
      </el-pagination>
    </el-card>

  </div>
</template>
<script>
import {
  mapGetters
} from 'vuex'
import api from '@/api/oilsupplier/goodsaptitude'
import setapi from '@/api/oilsupplier/oilclassorgset'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  computed: {
    ...mapGetters({
      authUser: 'authUser'
    })
  },
  name: 'oilgoodsaptitude2019',

  data () {
    return {
      loading: false,
      Code: '',
      Name: '',
      // 列表数据
      entityList: [],
      // 分页参数
      size: 10,
      currentPage: 1,
      currentItemCount: 0,
      // 列表排序
      Column: {
        Order: '',
        Prop: ''
      },

      tableColumns: [
        {
          prop: 'Code',
          label: '编码',
          width: 120,
          sort: true
        },

        {
          prop: 'Name',
          label: '名称',
          width: 150,
          sort: true
        },

        {
          prop: 'GoodsLevel',
          label: '物资级别',
          width: 110,
          sort: true
        },

        {
          prop: 'GoodsDesc',
          label: '产品说明',
          width: 110,
          sort: true
        },

        {
          prop: 'Standard',
          label: '标准备案',
          width: 110,
          sort: true
        },

        {
          prop: 'CompanyType',
          label: '供应商类型',
          width: 130,
          sort: true
        }

      ],
      dynamicTableColumns: []
    }
  },
  created () {
    this.initTableHeader()
    // 查询列表
    this.initDatas()
  },
  methods: {
    searchCommand (command) {
      if (command === 'search') {
        this.dialogVisible = true
      } else if (command === 'clear') {
        this.clearSearch()
      }
    },
    clearSearch () {
      this.size = 10
      this.currentPage = 1
      this.currentItemCount = 0
      this.Name = ''
      this.Code = ''
      this.initDatas()
    },
    // exportExcel () {
    //   /* generate workbook object from table */
    //   let table = document.querySelector('#rebateSetTable').cloneNode(true) // 克隆备份（原table不动）
    //   // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
    //   table.removeChild(table.querySelector('.el-table__fixed-right')) // 删掉备份的子节点
    //   let wb = XLSX.utils.table_to_book(table, {
    //     raw: true
    //   })
    //   /* get binary string as output */
    //   let wbout = XLSX.write(wb, {
    //     bookType: 'xlsx',
    //     bookSST: true,
    //     type: 'array'
    //   })
    //   try {
    //     FileSaver.saveAs(
    //       new Blob([wbout], {
    //         type: 'application/octet-stream'
    //       }),
    //       'Goods.xlsx'
    //     )
    //   } catch (e) {
    //     if (typeof console !== 'undefined') console.log(e, wbout)
    //   }
    //   return wbout
    // },
    exportExcel () {
      this.loading = true
      // 显示列
      let showcolumn = this.tableColumns.concat(this.dynamicTableColumns)
      let showcolumnarr = []
      let showcolumnnamearr = []

      for (var i = 0; i < showcolumn.length; i++) {
        showcolumnarr.push(showcolumn[i].label)
        showcolumnnamearr.push(showcolumn[i].prop.replace(/,/g, '，'))
      }
      let params = {
        _currentPage: this.currentPage,
        _size: this.size,
        Order: this.Column.Order,
        Prop: this.Column.Prop,
        Edition: '2',
        showcolumnarr: showcolumnarr + '',
        showcolumnnamearr: showcolumnnamearr + ''
      }
      api.exportExcelAll2019(params, this.$axios).then(res => {
        this.loading = false
        window.location = 'http://' + res.data
      })
    },
    initTableHeader () {
      setapi.initGoodTableHeader(this.$axios).then(res => {
        this.dynamicTableColumns = res.data.items
      })
    },
    initDatas () {
      // 分页及列表条件
      let params = {
        _currentPage: this.currentPage,
        _size: this.size,
        Order: this.Column.Order,
        Prop: this.Column.Prop,
        Edition: '2',
        Code: this.Code,
        Name: this.Name
      }

      // 访问接口
      api.get2019List(params, this.$axios).then(res => {
        this.entityList = res.data.items
        this.currentItemCount = res.data.currentItemCount
      }).catch(err => {
        console.error(err)
      })
    },

    // 列表排序功能
    orderby (column) {
      if (column.order === 'ascending') {
        this.Column.Order = 'asc'
      } else if (column.order === 'descending') {
        this.Column.Order = 'desc'
      }
      this.Column.Prop = column.prop
      this.initDatas()
    },

    handleCurrentChange (value) {
      this.currentPage = value
      this.initDatas()
    },
    handleSizeChange (value) {
      this.size = value
      this.currentPage = 1
      this.initDatas()
    },

    transferStr (val) {
      if (val === '1') {
        return '是'
      }
      if (val === '0') {
        return ''
      } else {
        return val
      }
    },

    jstimehandle (val) {
      if (val === '') {
        return '----'
      } else if (val === '0001-01-01T08:00:00+08:00') {
        return '----'
      } else if (val === '5000-01-01T23:59:59+08:00') {
        return '永久'
      } else {
        val = val.replace('T', ' ')
        return val.substring(0, 10)
      }
    },

    formatDateTime (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      var d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      var h = date.getHours()
      var minute = date.getMinutes()
      minute = minute < 10 ? ('0' + minute) : minute
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute
    }
  }
}
</script>

<style>
.el-col {
  margin-bottom: 5px;
}
</style>