|
|
@@ -0,0 +1,329 @@
|
|
|
+<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);">
|
|
|
+ <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/goodsaptitude/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 {
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ 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>
|