<!--
  @description: 采购员-结果执行查询列表
  @author: hdk
  @routerPath:/procurement/procurementPlanResultQueryList
  @date： 2020-11-03 17:32:00
-->
<template>
  <table-crud
    ref="tableCrud"
    :menu="true"
    :search-form.sync="searchForm"
    :tabs="executeQryStatusList"
    search-label-width="100px"
    @on-load="loadData"
  >
    <template v-slot:header>
      结果执行查询
    </template>
    <template v-slot:search="search">
      <!-- 采购单编号 -->
      <el-form-item
        ref="tenderNo"
        label="采购单编号"
        prop="tenderNo"
      >
        <gx-input
          v-model.trim="searchForm.tenderNo"
          @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 label="执行编号">
        <el-input
          v-model.trim="searchForm.executeNo"
          placeholder="请输入执行编号"
          style="width:220px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <el-form-item
        ref="tenderName"
        label="物资编号"
      >
        <el-input
          v-model.trim="searchForm.purchaseCode"
          placeholder="请输入物资编号"
          style="width:220px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <!-- 物资名称-->
      <!-- 暂时隐藏 -->
      <!-- <el-form-item ref="tenderNo" label="物资名称">
        <el-input
          v-model.trim="searchForm.purchaseName"
          placeholder="请输入物资名称"
          style="width:220px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item> -->
      <el-form-item
        ref="tenderName"
        label="供应商名称"
      >
        <el-input
          v-model.trim="searchForm.supplierName"
          placeholder="请输入供应商名称"
          style="width:220px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <el-form-item
        ref="tenderName"
        label="来源编号"
      >
        <el-input
          v-model.trim="searchForm.belongTenderNo"
          placeholder="请输入来源编号"
          style="width:220px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <el-form-item ref="tenderNo" label="执行方式" prop="tenderNo">
        <el-select
          v-model="searchForm.executeType"
          placeholder="请选择"
          style="width:220px"
        >
          <el-option
            v-for="item in executeTypeList"
            :key="item.typename"
            :label="item.typename"
            :value="item.typecode"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        ref="tenderName"
        label="代理单位"
      >
        <el-input
          v-model.trim="searchForm.belongOrgName"
          placeholder="请输入代理单位"
          style="width:220px"
          @keyup.enter.native="search.onSearch"
        />
      </el-form-item>
      <el-form-item
        ref="tenderName"
        label="来源"
      >
        <el-select v-model="searchForm.tenderMethod" style="width:220px;" placeholder="请选择">
          <el-option
            v-for="item in tenderMethodList"
            :key="item.typename"
            :label="item.typename"
            :value="item.typecode"
          />
        </el-select>
      </el-form-item>
      <el-form-item ref="date" label="执行日期 ">
        <el-date-picker
          v-model="searchForm.datePickerValue"
          :value-format="elValueFormatDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 220px;"
          @change="changeDate"
        />
      </el-form-item>
    </template>
    <template v-slot:menuLeft>
      <div class="operation-btn">
        <el-button type="primary" :loading="exportLoading" size="small" @click="onExportFile()">
          导出
        </el-button>
      </div>
    </template>
    <template v-slot:GXTable>
      <el-table ref="smallTable" v-loading="loading" :data="tableData" @sort-change="sortChange">
        <el-table-column type="index" label="序号" align="center" width="60" fixed="left" />
        <el-table-column
          prop="executeNo"
          label="执行编号"
          header-align="center"
          align="left"
          sortable="custom"
          min-width="140"
          fixed="left"
        />
        <!-- <el-table-column
          prop="purchaseCode"
          label="物资编号"
          header-align="center"
          align="left"
          min-width="230"
        /> -->
        <el-table-column
          prop="purchaseName"
          sortable="custom"
          label="物资信息"
          min-width="180"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="belongOrgName"
          sortable="custom"
          label="采购单位"
          min-width="180"
          header-align="center"
          align="left"
        />
        <el-table-column
          prop="executeType"
          sortable="custom"
          label="执行方式"
          min-width="200"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ filterDictText(executeTypeList, scope.row.executeType) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="tenderMethod"
          sortable="custom"
          label="来源"
          width="100"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ filterDictText(tenderMethodList, scope.row.tenderMethod) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="belongTenderNo"
          sortable="custom"
          label="来源编号"
          width="180"
          header-align="center"
          align="left"
        />
        <el-table-column
          label="执行日期"
          sortable="custom"
          min-width="110"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.executeTime && $Moment(scope.row.executeTime).format(momentDate) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="validityPeriod"
          sortable="custom"
          label="有效期至"
          width="180"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.validityPeriod && $Moment(scope.row.validityPeriod).format(momentDateTime) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="exeCreateUserRealName"
          sortable="custom"
          label="创建人"
          width="100"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="创建日期"
          sortable="custom"
          min-width="110"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime && $Moment(scope.row.createTime).format(momentDate) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          header-align="center"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="showDdtail(scope.row)"
            >
              [查看]
            </el-link>
            <el-link
              v-if="purchasplanResultExecutionAuditConfig"
              type="primary"
              @click="flowTracing(scope.row)"
            >
              [流程追踪]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </table-crud>
</template>

<script>
/* api*/
import { getPurchasePlanResultExecuteList, downProcurementResultExecuteList } from '@/api/procurement/purchasplan'
/* 公共混入*/
// import { resultQueryMixins } from './mixins/resultQueryMixins'
// import { procurementPlanGrounpMixins } from '@views/procurement/procurementPlan/mixins/procurementPlanGroupMixins'
/* 公共混入*/
import { rstMgmtMixins } from '../purPlanRstMgmt/mixins/rstMgmtMixins'
/* 公共方法*/
import { filterDictText, download, filterObj } from '@/assets/js/utils'// 常用方法

export default {
  name: 'PurPlanRstQryList',
  components: {},
  mixins: [rstMgmtMixins],
  data() {
    return {
      searchForm: {
        datePickerValue: [], // 日期
        executeStatus: '01' // 默认展示第一个tab选中
      },
      // 执行方式
      executeQryStatusList: [{
        index: '01',
        typename: '执行中',
        name: '执行中'
      }, {
        index: '02',
        typename: '已结束',
        name: '已结束'
      }, {
        index: '03',
        typename: '已终止',
        name: '已终止'
      }],
      exportLoading: false,
      /* 字典*/
      // 执行方式
      executeTypeList: [],
      // 计划采购方式
      tenderMethodList: [],
      dictionaryType: ['executeType', 'tenderMethod'], // 'executeQryStatus',
      loading: true,
      tableData: [] // 列表数据
    }
  },
  created() {
    this.purchasplanResultExecutionAudit() // 获取是否进入工作流
    // 字典初始化
    this.getGroup()
  },
  methods: {
    // 字典检索
    filterDictText,
    getGroup() {
      // 获取字典信息
      this.$store.dispatch('getGroupType', this.dictionaryType).then((data) => {
      // 遍历key存储相应的数据
        for (const key in data.bidTypeData) {
        /* 是否有数据*/
          if (data.bidTypeData[key]) {
            this[key] = data.bidTypeData[key]
          }
        }
      })
    },
    // 切换日期
    changeDate(arr) {
      // 起始日期
      this.searchForm.executeTimeStart = arr[0]
      // 截止日期
      this.searchForm.executeTimeEnd = arr[1]
    },
    // 导出
    onExportFile() {
      const params = {
        executeStatus: this.searchForm.executeStatus,
        ...this.searchForm
      }
      if (this.tableData.length <= 0) {
        this.$message.warning('没有可导出的数据')
        return false
      } else {
        this.exportLoading = true
        downProcurementResultExecuteList(filterObj(params)).then((res) => {
          this.exportLoading = false
          download(res, `结果执行查询${filterDictText(this.executeQryStatusList, this.searchForm.executeStatus)}.xls`)
        }).catch(() => {
          this.exportLoading = false
        })
      }
    },
    // 获取执行结果查询列表数据
    loadData(params, callback, tabData) {
      if (tabData) {
        params.executeStatus = tabData.index
        this.searchForm.executeStatus = tabData.index
      }
      getPurchasePlanResultExecuteList(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
      })
    },
    // 查看
    showDdtail(row) {
      // 跳转到查看页
      this.$router.push({
        name: 'procurementPlanQryListDetail',
        params: {
          // 执行单id
          executeId: row.executeId
        }
      })
    },
    // 排序
    sortChange: function(column, prop, order) {
      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()
    },
    // 流程追踪
    flowTracing(row) {
    }
  }
}
</script>

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