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" height="300px">
        <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="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="reservedQty" label="预留数量" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="totalIn" 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>
      <el-table style="margin-top: 50px" :data="showHistoryItems" height="300px">
        <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="warehouseName" label="仓库" width="150"></el-table-column>
        <el-table-column label="操作单据" align="center" prop="operateBill"  width="150">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.ow_operatetype" :value="scope.row.operateBill"/>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="operateBillcode" label="操作单据编码" width="200"></el-table-column>
        <el-table-column show-overflow-tooltip prop="operateBillitem" label="操作明细行号" width="150"></el-table-column>
        <el-table-column show-overflow-tooltip prop="allotQty" label="操作数量" width="150">
          <template slot-scope="scope">
            {{scope.row.allotQty > 0 ? "+" + scope.row.allotQty : scope.row.allotQty}}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="createTime" label="操作时间" width="150"></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>