<!--
  @description: 采购计划执行结果分配
  @Modifier: haofengxian
  @routerPath: /procurement/purchasePlanDetailResultAssignList
  @date: 2021-2-22-10:25
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :menu="true"
      :tabs="tabList"
      :search-form="searchForm"
      search-label-width="100px"
      @on-load="loadData"
    >
      <template v-slot:header>
        <span>结果执行分配</span>
      </template>
      <template v-slot:search="search">
        <!-- 采购计划编号 -->
        <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="purchasePlanName"
          label="采购计划名称"
          prop="purchasePlanName"
        >
          <gx-input v-model.trim="searchForm.purchasePlanName" @keyup.enter.native="search.onSearch" />
        </el-form-item>
        <!-- 物资编号 -->
        <el-form-item
          ref="purchaseCode"
          label="物资编号"
          prop="purchaseCode"
        >
          <gx-input v-model.trim="searchForm.purchaseCode" @keyup.enter.native="search.onSearch" />
        </el-form-item>
        <!-- 物资名称 -->
        <el-form-item
          ref="purchaseName"
          label="物资名称"
          prop="purchaseName"
        >
          <gx-input v-model.trim="searchForm.purchaseName" @keyup.enter.native="search.onSearch" />
        </el-form-item>
        <!-- 物资名称 -->
        <el-form-item
          ref="purchaseDesc"
          label="物资描述"
          prop="purchaseDesc"
        >
          <gx-input v-model.trim="searchForm.purchaseDesc" @keyup.enter.native="search.onSearch" />
        </el-form-item>
        <!-- 行项目编号 -->
        <el-form-item
          ref="purchaseNo"
          label="行项目编号"
          prop="purchaseNo"
        >
          <gx-input v-model.trim="searchForm.purchaseNo" @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>
      </template>
      <template v-slot:menuLeft>
        <div class="mb10">
          <!-- 结果执行分配状态 00-待分配;01-已分配;02-重新打包采购 -->
          <el-button v-if="searchForm.resultAssignStatus==='00'" type="primary" @click="onAffirm">
            分配人员
          </el-button>
          <el-button v-if="searchForm.resultAssignStatus==='01'" type="primary" @click="onAnew">
            重新分配
          </el-button>
          <el-button type="primary" :loading="exportLoading" plain @click="onExportFile">
            导出
          </el-button>
        </div>
      </template>
      <template v-slot:GXTable>
        <resultAssignTableComp ref="resultAssignTableComp" :table-data="tableData" @orderData="onOrderData" @MultipleData="onMultipleData" @checkFile="onCheckFile" />
      </template>
    </table-crud>
    <!-- 结果执行分配 -->
    <resultAssignDialog :dialog-execute-data="dialogExecuteData" @close="onClose" />
    <!-- 查看附件 -->
    <checkFIleCompDialog :dialog-file-data="dialogFileData" />
  </div>
</template>
<script>
/* api*/
import { getPurchasePlanDetailResultAssignList, downProcurementPlanDetailResAssignList, purchasePlanDetailApplyOnResultAssign } from
  '@/api/procurement/purchasplan'
/* 公共方法*/
import { filterDictText, download } from '@/assets/js/utils' // 常用方法
/* 组件*/
import resultAssignTableComp from './resultAssignTableComp' // 表格组件
import resultAssignDialog from './resultAssign-dialog' // 执行分配弹框
import checkFIleCompDialog from '@/views/procurement/procurementPlan/components/checkFIleComp-dialog.vue'// 查看附件
export default {
  name: 'PurPlanResultAssignList',
  components: {
    resultAssignTableComp,
    resultAssignDialog,
    checkFIleCompDialog
  },
  data() {
    return {
      dialogAnewData: {
        AnewVisible: false, // 重新执行采购弹框状态
        paramsData: [] // 重新执行采购弹框数据
      },
      // 结果执行分配
      dialogExecuteData: {
        executeVisible: false, // 确认执行结果弹框状态
        executeTableData: [], // 结果执行确认弹框数据
        planDetailId: '' // 确认接口参数
      },
      // 查看附件弹框
      dialogFileData: {
        checkFileVisible: false, // 查看附件弹框状态
        bizId: ''
      },
      selMethods: [], // 选择数据存储
      tableData: [], // 表格数据
      exportLoading: false,
      tabList: [
        {
          name: '待分配',
          index: '00'
        },
        {
          name: '已分配',
          index: '01'
        },
        {
          name: '重新打包采购',
          index: '02'
        }
      ],
      searchForm: {
        purchaseCode: '', // 物资编号
        purchaseDesc: '', // 物资描述
        purchaseName: '', // 物资名称
        purchaseNo: '', // 行项目编号
        purchasePlanName: '', // 采购计划名称
        purchasePlanNo: '', // 采购计划编号
        purchaseUserRealName: '', // 上报人
        resultAssignStatus: '00' // 结果执行分配状态 00-待分配;01-已分配;02-重新打包采购
      }
    }
  },
  methods: {
    filterDictText,
    // 导出
    onExportFile() {
      const params = {
        resultAssignStatus: this.searchForm.resultAssignStatus
      }
      this.exportLoading = true
      const index = this.tabList.findIndex((item) => this.searchForm.resultAssignStatus === item.index)
      if (this.tableData.length <= 0) {
        this.$message.warning('没有可导出的数据！')
        return false
      } else {
        downProcurementPlanDetailResAssignList(params).then((res) => {
          this.exportLoading = false
          download(res, `结果执行${this.tabList[index].name}.xls`)
        }).catch(() => {
          this.exportLoading = false
        })
      }
    },
    // 查看附件
    onCheckFile(res, flg) {
      this.dialogFileData.checkFileVisible = flg
      this.dialogFileData.bizId = res.planDetailId
    },
    // 初始化数据
    loadData(params, callback, tabData) {
      if (tabData) {
        params.resultAssignStatus = tabData.index
        this.searchForm.resultAssignStatus = tabData.index
      }
      getPurchasePlanDetailResultAssignList(params).then((response) => {
        this.tableData = response.data.records
        callback(response.data.total)
      }).catch(() => {
      })
    },
    // 判断选择数据返回状态
    selFlg() {
      if (this.selMethods.length > 0) {
        return true
      } else {
        this.$message.warning('请选择数据')
        return false
      }
    },
    // 确认执行结果弹框
    onAffirm() {
      if (this.selFlg()) {
        this.dialogExecuteData.executeVisible = true
      }
    },
    // 重新执行采购弹框
    onAnew() {
      if (this.selFlg()) {
        this.$confirm('确认重新分配?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          type: 'warning'
        }).then(() => {
          const params = {
            planDetailIds: this.dialogExecuteData.planDetailId
          }
          purchasePlanDetailApplyOnResultAssign(params).then(res => {
            this.$message.success(res.header.msg)
            this.$refs.tableCrud.onSearchChange()
          }).catch(() => {
          })
        }).catch(() => {
          this.$refs.resultAssignTableComp.clearSel() // 清空复选框
        })
      }
    },
    // 弹框关闭时清楚选择数据
    onClose() {
      this.$refs.resultAssignTableComp.clearSel() // 清空复选框
      this.$refs.tableCrud.onSearchChange(this.searchForm)
    },
    // 选择表格数据方法
    onMultipleData(res) {
      const bales = []
      this.selMethods = res
      this.dialogExecuteData.executeTableData = res
      res.filter((item) => {
        bales.push(item.planDetailId)
      })
      this.dialogExecuteData.planDetailId = bales.join(',')
      this.dialogAnewData.paramsData = res
    },
    // 排序
    onOrderData(res) {
      this.searchForm.column = res.column
      this.searchForm.orderSort = res.orderSort
      this.$refs.tableCrud.onSearchChange()
    }
  }
}
</script>
