drp-ui/src/views/purchase/PurchaseDemandList/reserved.vue

<template>
  <div class="reserved">
    <el-dialog
      :visible.sync="visible"
      :before-close="handleClose"
      width="70%"
    >
    <el-descriptions class="margin-top" title="货权预留单" :column="3" size="small" border>
      <el-descriptions-item>
        <template slot="label">
          预留单据号
        </template>
        {{ resData.code }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          来源单据号
        </template>
        {{ resData.source }}
      </el-descriptions-item>
      <!-- <el-descriptions-item>
        <template slot="label">
          客户
        </template>
        {{ resData.customer }}
      </el-descriptions-item> -->
      <el-descriptions-item>
        <template slot="label">
          客户名称
        </template>
        {{ resData.customerName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建人
        </template>
        {{ resData.createBy }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建人名称
        </template>
        {{ resData.createByName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建时间
        </template>
        {{ resData.createTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          更新人
        </template>
        {{ resData.updateBy }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          更新人名称
        </template>
        {{ resData.updateByName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          更新时间
        </template>
        {{ resData.updateTime }}
      </el-descriptions-item>
    </el-descriptions>

      <el-table style="margin-top: 50px" :data="tableList2">
        <el-table-column show-overflow-tooltip prop="material" label="物料编码" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="materialName" label="物料名称" width="150"></el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="unit" label="单位" width="150"></el-table-column> -->
        <el-table-column show-overflow-tooltip prop="unitName" label="单位名称" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="reservedQty" label="预留数量" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="reservedProportion" label="预留比例" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="reservedPeriod" label="预留周期" width="150"></el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="warehouse" label="仓库" width="150"></el-table-column> -->
        <el-table-column show-overflow-tooltip prop="warehouseName" label="仓库名称" width="150"></el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="allocation" label="货位" width="150"></el-table-column> -->
        <el-table-column show-overflow-tooltip prop="allocationName" label="货位名称" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="qty" label="可用量" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="usedQty" label="已用量" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="200"></el-table-column>
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="200"></el-table-column>
      </el-table>
      <el-table style="margin-top: 50px" :data="tableList3">
        <el-table-column show-overflow-tooltip prop="material" label="物料编码" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="materialName" label="物料名称" width="150"></el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="unit" label="单位" width="150"></el-table-column> -->
        <el-table-column show-overflow-tooltip prop="unitName" label="单位名称" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="reservedQty" label="预留数量" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="allotQty" label="操作数量" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="reservedProportion" label="预留比例" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="reservedPeriod" label="预留周期" width="150"></el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="deliveryWarehouse" label="调出仓库" width="150"></el-table-column> -->
        <el-table-column show-overflow-tooltip prop="deliveryWarehouseName" label="调出仓库名称" width="150"></el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="deliveryAllocation" label="调出货位" width="150"></el-table-column> -->
        <el-table-column show-overflow-tooltip prop="deliveryAllocationName" label="调出货位名称" width="150"></el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="storageWarehouse" label="调入仓库" width="150"></el-table-column> -->
        <el-table-column show-overflow-tooltip prop="storageWarehouseName" label="调入仓库名称" width="150"></el-table-column>
        <!-- <el-table-column show-overflow-tooltip prop="storageAllocation" label="调入货位" width="150"></el-table-column> -->
        <el-table-column show-overflow-tooltip prop="storageAllocationName" label="调入货位名称" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="200"></el-table-column>
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="200"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {getResevedDetail} from '@/api/purchase/transferOrder.js'
export default {
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: null
    }
  },
  mounted() {
    console.log('出现')
    console.log(this.info)
    this.getDetails(this.info)
  },
  data() {
    return {
      visible:this.isVisible,
      resData: {},
      tableList2: [],
      tableList3: [],
    }
  },
  methods: {
    getDetails(row) {
      getResevedDetail(row.code).then(res => {
        if (res.code === 200) {
          this.resData = res.data
          this.tableList2 = res.data.stMaterialOwnershipItemList
          this.tableList3 = res.data.stMaterialOwnershipHistoryList
        }
      })
    },
    handleClose() {
      console.log('调用')
      this.$emit('updateReserved', false)
    }
  }
}
</script>