<!--
  @description: 采购员-采购方式维护-物料采购方式维护
  @author: hdk
  @routerPath:/procurement/procurementPlanMaterielList
  @date： 2020-10-29
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :menu="true"
      :search-form.sync="searchForm"
      :tabs="procurementOrderOrderStatusTab"
      search-label-min-width="100px"
      @on-load="loadData"
    >
      <template v-slot:header>
        物料采购方式维护
      </template>
      <template v-slot:search="search">
        <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.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.manufacturerName"
            placeholder="请输入制造厂商"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <el-form-item label="供货供应商">
          <el-input
            v-model.trim="searchForm.suppliersName"
            placeholder="请输入供货供应商"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <el-form-item label="采购方式">
          <el-select
            v-model="searchForm.purchaseMethodValue"
            placeholder="请选择"
          >
            <el-option
              v-for="item in tender_methodList"
              :key="item.typename"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建日期">
          <el-date-picker
            v-model="searchForm.datePickerValue"
            :value-format="elValueFormatDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="min-width: 220px;"
            @change="changeDate"
          />
        </el-form-item>
      </template>
      <template v-slot:menuLeft>
        <div class="operation-btn">
          <el-button type="primary" size="small" @click="materielAdd('00')">
            新增物料采购方式
          </el-button>
          <el-button type="primary" :loading="exportLoading" @click="onExportFile">
            导出
          </el-button>
          <el-upload
            ref="uploads"
            :on-success="handleSuccess"
            :on-error="handleError"
            :headers="importHeaders"
            :show-file-list="false"
            :action="action"
            :data="upLoadData"
            multiple
            class="btn-ml10"
            style="display: inline-block;margin:0px 10px;"
          >
            <el-button>模板导入</el-button>
          </el-upload>
          <el-button class="btn-ml10" @click="downloadClick">
            下载模板文件
          </el-button>
        </div>
      </template>
      <template v-slot:GXTable>
        <!-- 执行中 -->
        <executeTable v-if="searchForm.tabStatus === '01'" :table-data="tableData" :loading="loading" @orderData="onOrderData" @materielAdd="materielAdd" @onFlowTrace="onFlowTrace" />
        <!-- 带生效 -->
        <vacatioLegisTable v-if="searchForm.tabStatus === '00'" :table-data="tableData" :loading="loading" @orderData="onOrderData" @materielAdd="materielAdd" @onFlowTrace="onFlowTrace" />
        <!-- 变更记录 -->
        <changeRecordTable v-if="searchForm.tabStatus === '02'" :table-data="tableData" :loading="loading" @orderData="onOrderData" @materielAdd="materielAdd" @onFlowTrace="onFlowTrace" />
      </template>
    </table-crud>
    <!-- 新增物料采购方式 -->
    <addMaterielDialog
      v-if="materielAddVisible"
      :materiel-add-visible="materielAddVisible"
      :edit-mode="editMode"
      :edit-row-data="editRowData"
      @closeDialog="closeMaterielMaintenance"
    />
    <!--流程追踪查看弹框-->
    <flow-detail-dialog ref="tracingFlow" />
  </div>
</template>

<script>
/* api*/
import {
  getPlanPurchaseMaintenanceList,
  downProcurementMaintenanceList,
  getPlanPurchaseMaintenanceAuditRecordList,
  importProcurementMaintenanceTemplate, // 模板导入
  downLoadProcurementMaintenanceTemplate // 模板下载
} from '@/api/procurement/purchasplan'
// import { downloadTemplate } from '@/api/procurement/datacenterDangtfz' // 导入接口

/* 公共混入*/
import { materielMixins } from './mixins/materielMixins'
// import { ListMixin } from '@/mixins/ListMixin'
/* 公共方法*/
import { filterDictText, download, filterObj } from '@/assets/js/utils'// 常用方法
import Cookies from 'js-cookie'

/* 组件*/
import addMaterielDialog from './addMateriel/addMateriel-dialog' // 新增物料采购方式
import flowDetailDialog from '@views/work/process/flowDetail-dialog' //  流程追踪组件

/* 表格*/
import executeTable from './executeTable.vue' // 执行中表格
import vacatioLegisTable from './vacatioLegisTable' // 待生效表格
import changeRecordTable from './changeRecordTable.vue' // 变更记录表格

export default {
  name: 'PurPlanMaterielList',
  components: {
    addMaterielDialog, // 新增物料采购方式
    flowDetailDialog, // 流程追踪组件
    executeTable, // 执行中
    vacatioLegisTable, // 带生效
    changeRecordTable // 变更记录
  },
  mixins: [materielMixins],
  data() {
    return {
      loading: true,
      exportLoading: false,
      action: importProcurementMaintenanceTemplate, // 导入接口
      importHeaders: {}, // 导入
      upLoadData: { // 模板导入数据
        planMainId: ''
      },
      editRowData: {}, // 要编辑的行数据
      editMode: '00', // 编辑模式 00新增 01编辑 02变更
      materielAddVisible: false, // 新增物料采购方式显隐
      searchForm: { // 搜索参数
        datePickerValue: [], // 日期
        tabStatus: '00' // 默认展示第一个tab选中
      },
      tableData: [] // 列表数据
    }
  },
  created() {
    this.importHeaders['X-AUTH-TOKEN'] = Cookies.get('X-AUTH-TOKEN')
  },
  methods: {
    // 字典检索
    filterDictText,
    // 下载计划详情模板
    downloadClick() {
      //  模板类型
      const data = {
        systemConfigType: 'PROCUREMENT_MAINTENANCE'
      }
      downLoadProcurementMaintenanceTemplate(data).then(res => {
        download(res, '物料采购方式维护模板.xls')
      })
    },
    // 模板导入成功后的回调
    handleSuccess(response, file, fileList) {
      // 模板导入成功后
      if (response.header.ret === '0') {
        this.$message.success(response.header.msg)
        //  清空
        this.$refs.uploads.clearFiles()
        // 加载行项目数据列表方法
        this.initLineInfoData()
        return
      }
      // 上传失败
      this.$message.warning(response.header.msg)
    },
    // 模板导入失败后的回调
    handleError(response, file, fileList) {
      this.$refs.uploads.clearFiles()
      this.$message.error(response.header.msg)
      this.initLineInfoData()
    },
    // 导出
    onExportFile() {
      const params = {
        tabStatus: this.searchForm.tabStatus,
        ...this.searchForm
      }
      const index = this.procurementOrderOrderStatusTab.findIndex((item) => this.searchForm.tabStatus === item.index)
      if (this.tableData.length <= 0) {
        this.$message.warning('没有可导出的数据!')
        return false
      } else {
        this.exportLoading = true
        downProcurementMaintenanceList(filterObj(params)).then((res) => {
          download(res, `物料采购方式维护${this.procurementOrderOrderStatusTab[index].name}.xls`)
        })
      }
    },
    // 选择日期
    changeDate(arr) {
      this.searchForm.createTimeStart = arr[0]
      this.searchForm.createTimeEnd = arr[1]
    },
    // 获取订单列表数据
    loadData(params, callback, tabData) {
      if (tabData) {
        params.tabStatus = tabData.index
        this.searchForm.tabStatus = tabData.index
      }
      // 请求列表数据

      if (params.tabStatus === '02') {
        getPlanPurchaseMaintenanceAuditRecordList(params).then((response) => {
          this.searchForm.column = ''
          this.searchForm.orderSort = ''
          this.loading = false
          this.tableData = response.data.records
          callback(response.data.total)
        }).catch(() => {
          this.searchForm.column = ''
          this.searchForm.orderSort = ''
          this.loading = false
        })
      } else {
        getPlanPurchaseMaintenanceList(params).then(response => {
          this.searchForm.column = ''
          this.searchForm.orderSort = ''
          this.loading = false
          this.tableData = response.data.records
          callback(response.data.total)
        }).catch(() => {
          this.searchForm.column = ''
          this.searchForm.orderSort = ''
          this.loading = false
        })
      }
    },
    // editMode 编辑模式 00新增 01编辑 02变更
    materielAdd(params) {
      const { editMode, row } = params
      // 编辑数据
      if (row) {
        this.editRowData = row
      } else {
        // 新增数据置空
        this.editRowData = {}
      }
      this.editMode = editMode
      this.materielAddVisible = true
    },
    // 新增物料采购方式关闭
    closeMaterielMaintenance() {
      this.materielAddVisible = false
      // 新增、编辑、变更之后刷新当前列表
      this.$refs.tableCrud.onSearchChange(this.searchForm)
    },
    // 流程追踪
    onFlowTrace(row) {
      this.$refs.tracingFlow.openDialogInitData(row.bizId)
    },
    // 排序
    onOrderData(res) {
      this.searchForm.column = res.column
      this.searchForm.orderSort = res.orderSort
      this.$refs.tableCrud.onSearchChange()
    }
  }
}
</script>

<style scoped>
.operation-btn{
  margin-bottom: 10px;
}
</style>
