<!--
  @description: 采购单-保证金管理
  @author: 苏志刚
  @routerPath:/procurement/procurementDrive/marginManagementList
  @date： 2020-6-28 10:33:00
-->
<template>
  <div class="offer-enquiry main">
    <!--标题-->
    <section class="p0-16">
      <section>
        <el-table ref="smallTable" v-loading="loading" :data="tableData">
          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column
            prop="purchasePlanName"
            label="供应商名称"
            header-align="center"
            align="left"
            min-width="200"
          />
          <el-table-column
            prop="purchaseNo"
            label="交易时间"
            header-align="center"
            align="center"
            min-width="125"
          />
          <el-table-column
            prop="purchaseNo"
            label="来款账号"
            min-width="140"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="purchaseName"
            label="来款账号名称"
            min-width="140"
            header-align="center"
            align="left"
          />
          <el-table-column
            prop="purchaseDepartName"
            label="交易金额"
            min-width="100"
            header-align="center"
            align="right"
          />
          <el-table-column
            prop="dataStatus"
            label="状态"
            header-align="center"
            align="center"
            min-width="125"
          >
            <template slot-scope="scope">
              <p
                v-for="(item, index) in plan_data_statusList"
                v-if="scope.row.dataStatus === item.typecode"
                :key="index"
              >
                {{ item.typename }}
              </p>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
    </section>
  </div>
</template>

<script>
/* api接口*/
import { listPurchasePlanDetailAllPages } from '@/api/procurement/purchasplan'
/* 公共参数方法*/
import { ListMixin } from '@/mixins/ListMixin'
import { procuremEntensureManageGroupMixins } from './mixins/procuremEntensureManageGroupMixins' // 字典信息
import { filterObj } from '@/assets/js/utils'
/* 分页组件*/
import pagination from '@comp/common/pagination/pagination'
export default {
  name: 'PurchasePlanDetailsList',
  components: {
    pagination
  },
  mixins: [ListMixin, procuremEntensureManageGroupMixins],
  data() {
    return {
      loading: true,
      date: '',
      searchForm: {
        purchaseType: '', // 类型
        purchaseOrganization: '', // 采购组织形式
        dataStatus: '', // 采购计划状态
        purchaseDepartName: '', // 采购人
        purchaseName: '', // 物资名称
        purchaseNo: '', // 行项目编号
        purchasePlanName: '' // 采购计划名称
      },
      tableData: []
    }
  },
  created() {
    this.loadData()
    this.initWebTypeGroup() // 字典接口数据方法
  },
  methods: {
    // 获取数据
    loadData() {
      const params = this.getQueryParams() // 查询条件
      listPurchasePlanDetailAllPages(params)
        .then(response => {
          this.purchaserType = response.data.records[0].purchaseOrganization
          this.loading = false
          this.tableData = response.data.records
          this.paginationData.total = response.data.total
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    }
  }
}
</script>

<style lang="less" scoped></style>
