<!--
  @description: 采购计划-集采目录查询列表
  @author: gmy
  @routerPath: /procurement/procPlanGrounpPurCatalog-list
  @date: 2021/1/26
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :search-form.sync="searchForm"
      :menu="true"
      search-label-width="130px"
      @on-load="queryMaterielData"
    >
      <template v-slot:header>
        集采目录查询
      </template>
      <template v-slot:search="search">
        <!-- 物资编码 -->
        <el-form-item label="物资编码">
          <el-input
            v-model.trim="searchForm.purchaseCode"
            placeholder="请输入物资编码"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 物资名称 -->
        <el-form-item label="物资名称">
          <el-input
            v-model.trim="searchForm.purchaseName"
            placeholder="请输入物资名称"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 一级专业分类 -->
        <el-form-item label="一级专业分类">
          <el-input
            v-model.trim="searchForm.purchaseClassificationParent"
            placeholder="请输入一级专业分类"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 二级专业分类 -->
        <el-form-item label="二级专业分类">
          <el-input
            v-model.trim="searchForm.purchaseClassification"
            placeholder="请输入二级专业分类"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 物资规格规格型号说明 -->
        <el-form-item label="物资描述">
          <el-input
            v-model.trim="searchForm.purchaseSpecification"
            placeholder="请输入物资描述"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 品牌 -->
        <el-form-item label="品牌">
          <el-input
            v-model.trim="searchForm.purchaseBrand"
            placeholder="请输入品牌"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 物资分类 -->
        <el-form-item label="物资分类">
          <el-input
            v-model.trim="searchForm.largeName"
            placeholder="请输入物资分类"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 电力分类 -->
        <el-form-item label="电力分类">
          <el-input
            v-model.trim="searchForm.middleName"
            placeholder="请输入电力分类"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 税收分类 -->
        <el-form-item label="税收分类">
          <el-input
            v-model.trim="searchForm.smallName"
            placeholder="请输入税收分类"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
      </template>
      <template v-slot:menuLeft>
        <!-- 导出 -->
        <el-button :loading="exportBtnLoding" type="primary" @click="exportGrounpPur">
          导 出
        </el-button>
      </template>
      <template v-slot:GXTable>
        <el-table
          v-loading="loading"
          :data="tableData"
          @sort-change="sortChange"
        >
          <el-table-column
            type="index"
            width="60px"
            align="center"
            label="序号"
            fixed="left"
          />
          <!-- 物资编码 -->
          <el-table-column
            sortable="custom"
            min-width="120px"
            align="center"
            prop="purchaseCode"
            label="物资编码"
            fixed="left"
          />
          <!-- 物料名称 -->
          <el-table-column
            min-width="150px"
            sortable="custom"
            align="left"
            header-align="center"
            prop="purchaseName"
            label="物料名称"
            fixed="left"
          />
          <!-- 一级专业分类 -->
          <el-table-column
            sortable="custom"
            prop="purchaseClassificationParent"
            width="150"
            label="一级专业分类"
            header-align="center"
          />
          <!-- 二级专业分类 -->
          <el-table-column
            sortable="custom"
            min-width="150px"
            header-align="center"
            align="left"
            prop="purchaseClassification"
            label="二级专业分类"
          />
          <!-- 物资规格说明 -->
          <el-table-column
            sortable="custom"
            min-width="150px"
            header-align="center"
            align="left"
            prop="purchaseSpecification"
            label="物资描述"
          />
          <!-- 品牌 -->
          <el-table-column
            sortable="custom"
            min-width="120px"
            header-align="center"
            align="left"
            prop="purchaseBrand"
            label="品牌"
          />
          <!-- 物资分类 -->
          <el-table-column
            sortable="custom"
            min-width="150px"
            header-align="center"
            align="left"
            prop="largeName"
            label="物资分类"
          />
          <!-- 电力分类 -->
          <el-table-column
            sortable="custom"
            min-width="150px"
            header-align="center"
            align="left"
            prop="middleName"
            label="电力分类"
          />
          <!-- 税收分类 -->
          <el-table-column
            sortable="custom"
            min-width="150px"
            header-align="center"
            align="left"
            prop="smallName"
            label="税收分类"
          />
        </el-table>
      </template>
    </table-crud>
  </div>
</template>

<script>
/* 接口 */
import { downLoadFileUrl } from '@/api/common/uploadCenter'
import { getAllMaterialList, downProcurementMaintenanceAllList, getMaterialParams } from '@/api/procurement/purchasplan'
/* 公用方法*/
import { filterDictText, filterObj, download, downloadUrlFile } from '@/assets/js/utils'// 数据字典替换 filterObj downloadUrlFile
/* 混合开发-参数字段 */
import { procurementPlanDictMixins } from '../mixins/procurementPlanDictMixins'
export default {
  name: 'GroupCatQueryList',
  mixins: [procurementPlanDictMixins],
  data() {
    return {
      loading: true, // loading
      exportBtnLoding: false, // btnLoading
      tableData: [], // 列表数据
      // 搜索参数
      searchForm: {
        purchaseCode: '', // 物资编码
        purchaseName: '', // 物资名称
        purchaseClassificationParent: '', // 一级专业分类
        purchaseClassification: '', // 二级专业分类
        purchaseSpecification: '', // 请输入物资描述
        purchaseBrand: '', // 品牌
        largeName: '', // 物资分类
        middleName: '', // 电力分类
        smallName: '', // 税收分类
        collectionType: '01' // 01 集采目录固定字段传值给后端
      },
      // 列表导出数据
      exportMaterielData: {
        pageNo: '',
        pageSize: ''
      }
    }
  },
  created() {
    // 查询导出列表附件的附件id和附件类型
    this.queryMaterialFileParams()
  },
  methods: {
    filterDictText, // 数据字典替换方法
    // 集采目录列表导出
    exportGrounpPur() {
      this.exportBtnLoding = true // btnLoding
      // 获取导出请求需要传递参数
      const data = filterObj(this.searchForm)
      // data.pageNo = this.exportMaterielData.pageNo
      // data.pageSize = this.exportMaterielData.pageSize
      // 按断搜索内容是否全部为空 为空返回false 不为空返回true
      if (this.judgeObjectComplete(filterObj(data))) {
        this.exportGrounpPurMethods(data) // 导出物资列表方法
      } else {
        this.commonDownFile() // 代用公共下载方法
      }
    },
    // 初始化查询导出附件id和附件类型
    queryMaterialFileParams() {
      const data = { collectionType: this.searchForm.collectionType }
      getMaterialParams(data).then((res) => {
        this.exportGrounpPurData = res.data
      })
    },
    // 查询集采目录列表请求
    queryMaterielData(params, callback) {
      this.searchForm.collectionType = '01' // 01 集采目录固定字段
      params.collectionType = this.searchForm.collectionType
      this.exportMaterielData.pageNo = params.pageNo // 导出列表入参需要的页数
      this.exportMaterielData.pageSize = params.pageSize // 导出列表入参需要每页显示条数
      this.loading = true // loading
      getAllMaterialList(params).then(response => {
        this.searchForm.column = ''
        this.searchForm.orderSort = ''
        this.loading = false // loading
        this.tableData = Object.freeze(response.data.records)
        callback(response.data.total)
      }).catch(() => {
        this.searchForm.column = ''
        this.searchForm.orderSort = ''
        this.loading = false // loading
      })
    },
    /*
    *集采目录导出列表请求
    * @parasm {
    * 搜索的参数
    * }
    * 导出当前搜索的列表参数默认导出全部
    * return 文件流
    */
    exportGrounpPurMethods(data) {
      downProcurementMaintenanceAllList(data).then((res) => {
        this.exportBtnLoding = false // btnLaoding
        download(res, '集采物资列表.xlsx')
      }).catch(() => {
        this.exportBtnLoding = false // btnLaoding
      })
    },
    // 公共下载方法 downLoadFileUrl
    commonDownFile() {
      this.exportBtnLoding = false // btnLaoding
      const url = downLoadFileUrl + '?fileId=' + this.exportGrounpPurData.fileId + '&fileType=' + this.exportGrounpPurData.fileType
      downloadUrlFile(url)
    },
    // 排序
    sortChange: function(column, prop, order) {
      if (this.tableData.length > 0) {
        let orderType = ''
        switch (column.order) {
          case 'ascending':
            orderType = 'ASC'
            break
          case 'descending':
            orderType = 'DESC'
            break
        }
        this.searchForm.column = column.prop
        this.searchForm.orderSort = orderType
        this.$refs.tableCrud.onSearchChange()
      }
    }
  }
}
</script>
<style lang="less" scoped>

</style>
