<!--
  @description: 采购计划-采购计划查询列表
  @author: lxl
  @routerPath:/procurement/purPlan/purPlanQuery/purPlanQueryList
  @date： 2020-10-30 09:52
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :menu="true"
      :tabs="tabsList"
      :search-form.sync="searchForm"
      search-label-width="120px"
      @on-load="loadData"
    >
      <template v-slot:header>
        <span>采购计划查询</span>
      </template>
      <template v-slot:search="search">
        <!--行项目编号-->
        <el-form-item
          ref="purchaseNo"
          label="行项目编号"
          prop="purchaseNo"
        >
          <gx-input
            v-model.trim="searchForm.purchaseNo"
            :type-more="{type:'more',attr:'purchaseNo'}"
            @keyup.enter.native="search.onSearch"
            @onMoreSearch="onMoreSearch"
          />
        </el-form-item>
        <!--是否集采-->
        <el-form-item ref="collectionType" label="是否集采" prop="collectionType">
          <el-select v-model="searchForm.collectionType" placeholder="请选择">
            <el-option
              v-for="item in collectionTypeList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <!-- 处理状态 -->
        <el-form-item v-if="searchForm.queryStatus==='04'" ref="bizCode" label="处理状态" prop="bizCode">
          <el-select v-model="searchForm.bizCode" placeholder="请选择">
            <el-option
              v-for="item in businessReturnCodeList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <!-- 物资名称 -->
        <el-form-item
          ref="purchaseName"
          label="物资名称"
          prop="purchaseName"
        >
          <gx-input
            v-model.trim="searchForm.purchaseName"
            :type-more="{type:'more',attr:'purchaseName'}"
            @onMoreSearch="onMoreSearch"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 物资编码 -->
        <el-form-item
          ref="purchaseCode"
          label="物资编码"
          prop="purchaseCode"
        >
          <gx-input
            v-model.trim="searchForm.purchaseCode"
            :type-more="{type:'more',attr:'purchaseCode'}"
            @onMoreSearch="onMoreSearch"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 物资描述 -->
        <el-form-item
          ref="purchaseSpecification"
          label="物资描述"
          prop="purchaseSpecification"
        >
          <gx-input
            v-model.trim="searchForm.purchaseSpecification"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 采购单编号 -->
        <el-form-item
          ref="tenderNo"
          label="采购单编号"
          prop="tenderNo"
        >
          <gx-input
            v-model.trim="searchForm.tenderNo"
            :type-more="{type:'more',attr:'tenderNo'}"
            @onMoreSearch="onMoreSearch"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 品牌 -->
        <el-form-item
          ref="purchaseBrand"
          label="品牌"
          prop="purchaseBrand"
        >
          <gx-input
            v-model.trim="searchForm.purchaseBrand"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 一级分类 -->
        <el-form-item
          ref="purchaseClassificationParent"
          label="一级分类"
          prop="purchaseClassificationParent"
        >
          <gx-input
            v-model.trim="searchForm.purchaseClassificationParent"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 二级分类 -->
        <el-form-item
          ref="purchaseClassification"
          label="二级分类"
          prop="purchaseClassification"
        >
          <gx-input
            v-model.trim="searchForm.purchaseClassification"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- SAP订单号 -->
        <!--        <el-form-item
          ref="ebeln"
          label="SAP订单号"
          prop="ebeln"
        >
          <gx-input
            v-model.trim="searchForm.ebeln"
            :type-more="{type:'more',attr:'ebeln'}"
            @onMoreSearch="onMoreSearch"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>-->
        <!-- 结果执行编号 -->
        <el-form-item
          ref="resultExeNo"
          label="结果执行编号"
          prop="resultExeNo"
        >
          <gx-input
            v-model.trim="searchForm.resultExeNo"
            :type-more="{type:'more',attr:'resultExeNo'}"
            @onMoreSearch="onMoreSearch"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 采购方式 -->
        <el-form-item ref="tenderMethod" label="采购方式" prop="tenderMethod">
          <el-select v-model="searchForm.tenderMethod" placeholder="请选择">
            <el-option
              v-for="item in tender_methodList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>

        <!-- 数量 -->
        <el-form-item
          ref="purchaseNum"
          label="数量"
          prop="purchaseNum"
        >
          <gx-input
            v-model.trim="searchForm.purchaseNum"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!--计量单位-->
        <el-form-item ref="purchaseUnit" label="计量单位" prop="purchaseUnit">
          <el-select v-model="searchForm.purchaseUnit" placeholder="请选择" filterable>
            <el-option
              v-for="item in purchaseUnitList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <!-- 预算净单价 -->
        <el-form-item
          ref="purchaseBudget"
          label="预算净单价"
          prop="purchaseBudget"
        >
          <gx-input
            v-model.trim="searchForm.purchaseBudget"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 预算净总价 -->
        <el-form-item
          ref="purchaseTotalBudget"
          label="预算净总价"
          prop="purchaseTotalBudget"
        >
          <gx-input
            v-model.trim="searchForm.purchaseTotalBudget"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!--税率(%)-->
        <el-form-item ref="purchaseTaxRate" label="税率(%)" prop="purchaseTaxRate">
          <el-select v-model="searchForm.purchaseTaxRate" placeholder="请选择" filterable>
            <el-option
              v-for="item in taxRateList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <!--交货日期-->
        <el-form-item ref="deliveryTime" label="交货日期" prop="deliveryTime">
          <el-date-picker
            v-model="searchForm.deliveryTime"
            :value-format="elValueFormatDate"
            type="daterange"
            placeholder="选择开始日期时间"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:200px;"
            @change="handelDeliveryTime"
          />
        </el-form-item>
        <!--交货地点-->
        <el-form-item ref="deliveryAddress" label="交货地点" prop="deliveryAddress">
          <gx-input v-model.trim="searchForm.deliveryAddress" @keyup.enter.native="search.onSearch" />
        </el-form-item>
        <!-- 采购单位 -->
        <el-form-item
          ref="purchaseDepartName"
          label="采购单位"
          prop="purchaseDepartName"
        >
          <gx-input
            v-model.trim="searchForm.purchaseDepartName"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 上报人 -->
        <el-form-item
          ref="purchaseUserRealName"
          label="上报人"
          prop="purchaseUserRealName"
        >
          <gx-input
            v-model.trim="searchForm.purchaseUserRealName"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 技术联系人/电话 -->
        <el-form-item
          ref="planManagerName"
          label="技术联系人/电话"
          prop="planManagerName"
        >
          <gx-input
            v-model.trim="searchForm.planManagerName"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 采购员 -->
        <el-form-item
          ref="purchaseBuyer"
          label="采购员"
          prop="purchaseBuyer"
        >
          <gx-input
            v-model.trim="searchForm.purchaseBuyer"
            :type-more="{type:'more',attr:'purchaseBuyer'}"
            @onMoreSearch="onMoreSearch"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 采购计划编号 -->
        <el-form-item
          ref="purchasePlanNo"
          label="采购计划编号"
          prop="purchasePlanNo"
        >
          <gx-input
            v-model.trim="searchForm.purchasePlanNo"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 预算编号 -->
        <el-form-item
          ref="ykNo"
          label="预算编号"
          prop="ykNo"
        >
          <gx-input
            v-model.trim="searchForm.ykNo"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- BookID -->
<!--        <el-form-item
          ref="ykBookid"
          label="Book ID"
          prop="ykBookid"
        >
          <gx-input
            v-model.trim="searchForm.ykBookid"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>-->
        <!-- 预算年度 -->
        <el-form-item
          ref="ykYear"
          label="预算年度"
          prop="ykYear"
        >
          <gx-input
            v-model.trim="searchForm.ykYear"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 计划编号 -->
        <el-form-item
          ref="ykPlanno"
          label="计划编号"
          prop="ykPlanno"
        >
          <gx-input
            v-model.trim="searchForm.ykPlanno"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 预算编号描述 -->
        <el-form-item
          ref="post1"
          label="预算编号描述"
          prop="post1"
        >
          <gx-input
            v-model.trim="searchForm.post1"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 计划名称 -->
        <el-form-item
          ref="ykPlannoT"
          label="计划名称"
          prop="ykPlannoT"
        >
          <gx-input
            v-model.trim="searchForm.ykPlannoT"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- 创建日期 -->
        <el-form-item label="创建日期">
          <el-date-picker
            v-model="searchForm.datePicker"
            :value-format="elValueFormatDate"
            type="daterange"
            placeholder="选择开始日期时间"
            range-separator="至"
            start-placeholder="创建日期"
            end-placeholder="结束日期"
            style="width:200px;"
            @change="onHandelTime"
          />
        </el-form-item>
        <!-- 批准日期 -->
        <el-form-item label="批准日期">
          <el-date-picker
            v-model="searchForm.approvalTime"
            :value-format="elValueFormatDate"
            type="daterange"
            placeholder="选择开始日期时间"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:200px;"
            @change="handelapprovalTime"
          />
        </el-form-item>
      </template>
      <template v-slot:menuLeft>
        <div class="mb10">
          <el-button type="primary" :loading="exportLoading" @click="onExportFile">
            导出
          </el-button>
        </div>
      </template>
      <template v-slot:GXTable>
        <!-- 待打包 -->
        <stayBaleTable v-if="searchForm.queryStatus==='32'" :loading="loading" :table-data="tableData" @orderData="onOrderData" @checkFile="onCheckFile" />
        <!-- 全部 -->
        <allTableComp v-if="searchForm.queryStatus==='06'" :loading="loading" :table-data="tableData" @orderData="onOrderData" @checkFile="onCheckFile" />
        <!-- 已删除 -->
        <alreadyTableComp v-if="searchForm.queryStatus==='03'" :loading="loading" :table-data="tableData" @orderData="onOrderData" @checkFile="onCheckFile" />
        <!-- 已退回 -->
        <backTableComp v-if="searchForm.queryStatus==='04'" :loading="loading" :table-data="tableData" @orderData="onOrderData" @checkFile="onCheckFile" />
        <!-- 待采购/采购中 -->
        <stayTableComp v-if="searchForm.queryStatus==='00' || searchForm.queryStatus==='01'" key="sk0031x" :active-code="searchForm.queryStatus" :loading="loading" :table-data="tableData" @orderData="onOrderData" @checkFile="onCheckFile" />
        <!-- 已生成订单 -->
        <createOrderTable v-if="searchForm.queryStatus==='02'" :loading="loading" :table-data="tableData" @orderData="onOrderData" @checkFile="onCheckFile" />
        <!-- 集采转自采记录 -->
        <turnTableComp v-if="searchForm.queryStatus==='05'" :loading="loading" :table-data="tableData" @orderData="onOrderData" @checkFile="onCheckFile" />
      </template>
    </table-crud>
    <!-- 附件查看 -->
    <template>
      <checkFIleCompDialog :dialog-file-data="dialogFileData" />
    </template>
  </div>
</template>
<script>
/* api*/
import {
  getPurchasePlanDetailQryList, // 查询列表数据
  downProcurementPlanQryList, // 导出
  downProcurementPlanDetailPackList, // 待打包导出
  getPurchasePlanDetailsWaitPackCustomList // 待打包
} from '@/api/procurement/purchasplan'
/* 弹框*/
import checkFIleCompDialog from '@/views/procurement/procurementPlan/components/checkFIleComp-dialog.vue'// 查看附件
/* 表格组件*/
import allTableComp from './allTableComp.vue' // 全部
import alreadyTableComp from './alreadyTableComp.vue' // 已删除
import backTableComp from './backTableComp.vue' // 已退回
import stayTableComp from './stayTableComp.vue' // 待采购/采购中/已生成订单
import turnTableComp from './turnTableComp.vue' // 集采专自采
import createOrderTable from './createOrderTable.vue' // 已生成订单
import stayBaleTable from './stayBaleTable.vue' //  待打包
/* 公用*/
import { filterDictText, filterObj } from '@/assets/js/utils'// 常用方法
/* 导出公用方法*/
import { download } from '@/assets/js/utils'// 常用方法
export default {
  name: 'PurPlanQueryList',
  components: {
    allTableComp, // 全部
    alreadyTableComp, // 已删除
    backTableComp, // 已退回
    stayTableComp, // 待采购/采购中/已生成订单
    turnTableComp, // 集采转自采记录
    checkFIleCompDialog, // 查看附件弹框
    createOrderTable, // 已生成订单
    stayBaleTable // 待打包
  },
  data() {
    return {
      loading: true,
      tableData: [], // 表格数据
      /* --------------字典----------------*/
      tender_methodList: [], // 采购方式
      collectionTypeList: [], // 是否集采
      purchaseUnitList: [], // 计量单位
      taxRateList: [], // 税率
      businessReturnCodeList: [], // 处理状态
      dictionaryType: ['tender_method', 'collectionType', 'purchaseUnit', 'taxRate', 'businessReturnCode'], // 字典请求参数
      /* ------------------------------*/
      dialogFileData: {
        checkFileVisible: false, // 查看附件弹框状态
        bizId: ''
      },
      exportLoading: false, // 导出Loading
      searchForm: {
        purchaseNo: '', // 行项目编号
        collectionType: '', // 是否集采
        bizCode: '', // 处理状态
        purchaseName: '', // 物资名称
        purchaseCode: '', // 物资编码
        purchaseSpecification: '', // 物资描述
        tenderNo: '', // 采购单编号
        purchaseBrand: '', // 品牌
        purchaseClassificationParent: '', // 一级分类
        purchaseClassification: '', // 二级分类
        ebeln: '', // SAP订单号
        resultExeNo: '', // 结果执行编号
        tenderMethod: '', // 采购方式
        purchaseNum: '', // 数量
        purchaseUnit: '', // 计量单位
        purchaseBudget: '', // 预算净单价
        purchaseTotalBudget: '', // 预算净总价
        purchaseTaxRate: '', // 税率(%)
        deliveryTime: [], // 交货日期
        deliveryAddress: '', // 交货地点
        purchaseDepartName: '', // 采购单位
        purchaseUserRealName: '', // 上报人
        planManagerName: '', // 技术联系人/电话
        purchaseBuyer: '', // 采购员
        purchasePlanNo: '', // 采购计划编号
        ykNo: '', // 预算编号
        ykBookid: '', // Book ID
        ykYear: '', // 预算年度
        ykPlanno: '', // 计划编号
        post1: '', // 预算编号描述
        ykPlannoT: '', // 计划名称
        datePicker: [], // 创建日期
        approvalTime: [], // 批准日期
        queryStatus: '32' // tabs默认值
      },
      tabsList: [ // 查询tabs数据
        {
          name: '待打包',
          index: '32'
        },
        {
          name: '待采购',
          index: '00'
        },
        {
          name: '采购中',
          index: '01'
        },
        {
          name: '已生成订单',
          index: '02'
        },
        {
          name: '已删除',
          index: '03'
        },
        {
          name: '已退回',
          index: '04'
        },
        {
          name: '集采转自采记录',
          index: '05'
        },
        {
          name: '全部',
          index: '06'
        }
      ]
    }
  },
  created() {
    this.getGroupType()
  },
  methods: {
    filterDictText, // 字典检索
    // 交货日期
    handelDeliveryTime(val) {
      if (val) {
        this.searchForm.deliveryTimeStart = val[0]
        this.searchForm.deliveryTimeEnd = val[1]
      }
    },
    // 选择时间触发事件-创建日期
    onHandelTime(val) {
      if (val) {
        this.searchForm.createTimeStart = val[0]
        this.searchForm.createTimeEnd = val[1]
      }
    },
    // 选择时间触发事件-批准日期
    handelapprovalTime(val) {
      if (val) {
        this.searchForm.approvalTimeStart = val[0]
        this.searchForm.approvalTimeEnd = val[1]
      }
    },
    // 字典请求
    getGroupType() {
      this.$store.dispatch('getGroupType', this.dictionaryType).then((data) => {
        // 遍历key存储相应的数据
        for (const key in data.bidTypeData) {
          /* 是否有数据*/
          if (data.bidTypeData[key]) {
            this[key] = data.bidTypeData[key]
          }
        }
      })
    },
    // 数据请求
    loadData(params, callback, tabData) {
      this.loading = true
      if (tabData) {
        params.queryStatus = tabData.index
        this.searchForm.queryStatus = tabData.index
      }
      if (params.queryStatus === '32') {
        params.packStatus = '00'
        getPurchasePlanDetailsWaitPackCustomList(params).then((response) => {
          this.tableData = response.data.records
          callback(response.data.total)
        }).catch(() => {}).finally(() => {
          this.searchForm.column = ''
          this.searchForm.orderSort = ''
          this.loading = false
        })
      } else {
        getPurchasePlanDetailQryList(params).then(response => {
          this.tableData = response.data.records
          callback(response.data.total)
        }).catch(() => {
        }).finally(() => {
          this.searchForm.column = ''
          this.searchForm.orderSort = ''
          this.loading = false
        })
      }
    },
    // tabs事件
    onStepsClick() {
      this.$refs.tableCrud.onSearchChange(this.searchForm)
    },
    // 导出
    onExportFile() {
      const params = {
        queryStatus: this.searchForm.queryStatus,
        packStatus: '00', // 待打包导出参数
        ...this.searchForm
      }
      const index = this.tabsList.findIndex((item) => this.searchForm.queryStatus === item.index)
      if (this.tableData.length <= 0) {
        this.$message.warning('没有可导出的数据!')
        return false
      } else {
        this.exportLoading = true
        const URLFN = this.searchForm.queryStatus === '32' ? downProcurementPlanDetailPackList : downProcurementPlanQryList
        URLFN(filterObj(params)).then((res) => {
          this.exportLoading = false
          download(res, `采购计划查询${this.tabsList[index].name}.xls`)
        }).catch(() => {
          this.exportLoading = false
        })
      }
    },
    // 查看附件
    onCheckFile(res) {
      this.dialogFileData.checkFileVisible = true
      this.dialogFileData.bizId = res.planDetailId
    },
    // 多值查询
    onMoreSearch({ attr, value }) {
      this.$refs.tableCrud.onSearchChange(Object.assign(this.searchForm, {
        [attr]: value
      }))
    },
    // 排序
    onOrderData(res) {
      this.searchForm.column = res.column
      this.searchForm.orderSort = res.orderSort
      this.$refs.tableCrud.onSearchChange()
    }
  }
}
</script>
