drp-ui/src/views/purchase/transferOrder/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.customerName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建人
        </template>
        {{ resData.createByName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建人编码
        </template>
        {{ resData.createBy }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建时间
        </template>
        {{ resData.createTime }}
      </el-descriptions-item>
    </el-descriptions>
      <el-table style="margin-top: 50px" :data="items" @row-click="rowClick">
        <el-table-column show-overflow-tooltip prop="materialCode" 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="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="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="warehouseName" 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="createTime" label="创建时间" width="200"></el-table-column>
      </el-table>
      <el-table style="margin-top: 50px" :data="showHistoryItems">
        <el-table-column show-overflow-tooltip prop="materialCode" 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="unitName" 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="createTime" label="操作时间" width="200"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {getDetailBySource} from '@/api/purchase/ownership.js'

export default {
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: null
    }
  },
  mounted() {
    this.getDetails(this.info)
  },
  data() {
    return {
      visible:this.isVisible,
      resData: {},
      items: [],
      historyItems: [],
      showHistoryItems: [],
    }
  },
  methods: {
    getDetails(row) {
      getDetailBySource(row.code).then(res => {
        if (res.code === 200) {
          this.resData = res.data;
          this.items = res.data.stMaterialOwnershipItemList;
          this.historyItems = res.data.stMaterialOwnershipHistoryList;
          this.showHistoryItems = this.historyItems.filter(ele => ele.ownerId == this.items[0].id);
        }
      })
    },
    handleClose() {
      this.$emit('updateReserved', false)
    },
    rowClick(row){
      this.showHistoryItems = this.historyItems.filter(ele => ele.ownerId == row.id);
    }
  }
}
</script>