<!--
  @description: 采购计划物料库列表查询
  @author: gmy
  @routerPath: /procurement/materialLibraryList
  @date: 2021/1/26
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :search-form.sync="searchForm"
      :menu="true"
      @on-load="queryMaterielData"
    >
      <template v-slot:header>
        物料库查询
      </template>
      <template v-slot:search="search">
        <el-form-item label="类型">
          <el-select
            v-model="searchForm.flag"
            placeholder="请选择类型"
          >
            <el-option
              v-for="(item,index) in material_stateList"
              :key="index"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <!-- 物资编码 -->
        <el-form-item label="物资编码">
          <el-input
            v-model.trim="searchForm.purchaseCode"
            clearable
            placeholder="请输入物资编码"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 物资名称 -->
        <el-form-item label="物资名称">
          <el-input
            v-model.trim="searchForm.purchaseName"
            clearable
            placeholder="请输入物资名称"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 一级专业分类 -->
        <el-form-item label="一级专业分类">
          <el-input
            v-model.trim="searchForm.purchaseClassificationParent"
            clearable
            placeholder="请输入一级专业分类"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 二级专业分类 -->
        <el-form-item label="二级专业分类">
          <el-input
            v-model.trim="searchForm.purchaseClassification"
            clearable
            placeholder="请输入二级专业分类"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 物资规格规格型号说明 -->
        <el-form-item label="物资描述">
          <el-input
            v-model.trim="searchForm.purchaseSpecification"
            clearable
            placeholder="请输入物资描述"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 品牌 -->
        <el-form-item label="品牌">
          <el-input
            v-model.trim="searchForm.purchaseBrand"
            clearable
            placeholder="请输入品牌"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 物资分类 -->
        <el-form-item label="物资分类">
          <el-input
            v-model.trim="searchForm.largeName"
            clearable
            placeholder="请输入物资分类"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 电力分类 -->
        <el-form-item label="电力分类">
          <el-input
            v-model.trim="searchForm.middleName"
            clearable
            placeholder="请输入电力分类"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 税收分类 -->
        <el-form-item label="税收分类">
          <el-input
            v-model.trim="searchForm.smallName"
            clearable
            placeholder="请输入税收分类"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
      </template>
      <template v-slot:menuLeft>
        <!-- 导出 -->
        <el-button :loading="exportBtnLoding" type="primary" @click="exportProcMateriel">
          导 出
        </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
            min-width="100px"
            align="center"
            sortable="custom"
            prop="purchaseCode"
            label="物资编码"
            fixed="left"
          />
          <!-- 物料名称 -->
          <el-table-column
            min-width="150px"
            align="left"
            sortable="custom"
            header-align="center"
            prop="purchaseName"
            label="物料名称"
            fixed="left"
          />
          <!-- 一级专业分类 -->
          <el-table-column
            prop="purchaseClassificationParent"
            width="150"
            sortable="custom"
            label="一级专业分类"
            header-align="center"
          />
          <!-- 二级专业分类 -->
          <el-table-column
            min-width="150px"
            header-align="center"
            sortable="custom"
            align="left"
            prop="purchaseClassification"
            label="二级专业分类"
          />
          <!-- 物资规格说明 -->
          <el-table-column
            min-width="150px"
            header-align="center"
            sortable="custom"
            align="left"
            prop="purchaseSpecification"
            label="物资描述"
          />
          <!-- 品牌 -->
          <el-table-column
            min-width="120px"
            header-align="center"
            sortable="custom"
            align="left"
            prop="purchaseBrand"
            label="品牌"
          />
          <!-- 物资分类 -->
          <el-table-column
            min-width="150px"
            header-align="center"
            sortable="custom"
            align="left"
            prop="largeName"
            label="物资分类"
          />
          <!-- 电力分类 -->
          <el-table-column
            min-width="150px"
            header-align="center"
            sortable="custom"
            align="left"
            prop="middleName"
            label="电力分类"
          />
          <!-- 税收分类 -->
          <el-table-column
            min-width="150px"
            header-align="center"
            sortable="custom"
            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
/* 混合开发-参数字段 */
import { procurementPlanDictMixins } from '../mixins/procurementPlanDictMixins'
export default {
  name: 'MaterialLibraryList',
  mixins: [procurementPlanDictMixins],
  data() {
    return {
      loading: true, // loading
      exportBtnLoding: false, // btnLoading
      tableData: [], // 列表数据
      // 物料类型
      material_stateList: [],
      // 搜索参数
      searchForm: {
        flag: '', // 类型
        purchaseCode: '', // 物资编码
        purchaseName: '', // 物资名称
        purchaseClassificationParent: '', // 一级专业分类
        purchaseClassification: '', // 二级专业分类
        purchaseSpecification: '', // 请输入物资描述
        purchaseBrand: '', // 品牌
        largeName: '', // 物资分类
        middleName: '', // 电力分类
        smallName: '' // 税收分类
      },
      exportMaterielData: {
        pageNo: '',
        pageSize: ''
      } // 列表导出数据
    }
  },
  created() {
    // 查询导出列表附件的附件id和附件类型
    this.queryMaterialFileParams()
    this.getGroupType()
  },
  methods: {
    filterDictText, // 数据字典替换方法
    getGroupType() {
      const dictionaryType = [
        'material_state'
      ]
      this.$store.dispatch('getGroupType', dictionaryType).then((data) => {
        // 遍历key存储相应的数据
        for (const key in data.bidTypeData) {
          /* 是否有数据*/
          if (data.bidTypeData[key]) {
            this[key] = data.bidTypeData[key]
          }
        }
        console.log(this.material_stateList)
      })
    },
    // 物料库列表导出
    exportProcMateriel() {
      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.exportProcMaterielMethods(data) // 导出物资列表方法
      } else {
        this.commonDownFile() // 调用公共下载方法
      }
    },
    // 初始化查询导出附件id和附件类型
    queryMaterialFileParams() {
      const data = { collectionType: '00' }
      getMaterialParams(data).then((res) => {
        this.exportGrounpPurData = res.data
      })
    },
    // 查询物料库列表请求
    queryMaterielData(params, callback) {
      this.exportMaterielData.pageNo = params.pageNo // 导出列表入参需要的页数
      this.exportMaterielData.pageSize = params.pageSize // 导出列表入参需要每页显示条数
      this.loading = true // loading
      getAllMaterialList(params).then(response => {
        this.tableData = Object.freeze(response.data.records)
        callback(response.data.total)
      }).catch(() => {
      }).finally(() => {
        this.loading = false // loading
        this.searchForm.column = ''
        this.searchForm.orderSort = ''
      })
    },
    /*
    *物料库导出列表请求
    * @parasm {
    * 搜索的参数
    * }
    * 导出当前搜索的列表参数默认导出全部
    * return 文件流
    */
    exportProcMaterielMethods(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>
