库存管理

haoyahui

2023-11-16 94de1745b4b69eeeb1ac8c5d3508ce87258afc25

 admin-web/src/views/stock/transfer/transferApplication/detail.vue

@@ -1,124 +1,118 @@
<template>
  <el-dialog
    title="详情"
    width="60%"
    :modal="true"
    :visible.sync="visible"
    :top="'15vh'"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    @close="close"
    class="stock-detail"
  >
    <el-row :gutter="20">
      <el-col :span="8">
        <span>调拨单号：</span>
        <span>{{ detail.businessFormCode }}</span>
      </el-col>
      <el-col :span="8">
        <span>调拨仓库：</span>
        <span>{{ detail.warehouseName }}</span>
      </el-col>
      <el-col :span="8">
        <span>所属机构：</span>
        <span>{{ detail.agencyId }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <span>状态：</span>
        <span>{{ detail.states == 1 ? '待调拨' : '已调拨' }}</span>
      </el-col>
      <el-col :span="8">
        <span>创建人：</span>
        <span>{{ detail.buyerName }}</span>
      </el-col>
      <el-col :span="8">
        <span>调拨时间：</span>
        <span>{{ detail.incomeTime | formatTime }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col class="img-row" :span="24">
        <span>调拨手续照片：</span>
        <div class="img-box"></div>
      </el-col>
    </el-row>
    <div class="goods-card" v-for="(goodsItem, goodsIndex) in detail.procureGoods" :key="goodsIndex">
  <win-md class="stock-detail" :title="setting.title" @close="close" :width="'800px'">
    <div v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="8">
          <span>物品分类：</span>
          <span>{{ goodsItem.baseCategoryId }}</span>
          <span>调拨单号：</span>
          <span>{{ detail.businessFormCode }}</span>
        </el-col>
        <el-col :span="8">
          <span>物品名称：</span>
          <span>{{ goodsItem.goodsTemplateName }}</span>
          <span>调拨机构：</span>
          <span>{{ detail.outAgencyName }}</span>
        </el-col>
        <el-col :span="8">
          <span>供货商：</span>
          <span>{{ goodsItem.supplier }}</span>
          <span>接收机构：</span>
          <span>{{ detail.inAgencyName }}</span>
        </el-col>
      </el-row>
      <el-table :data="goodsItem.models" :stripe="true" style="margin-top: 20px">
        <el-table-column prop="baseGoodsModelsName" label="规格型号" align="center">
          <template slot-scope="scope">
            {{ scope.row.baseGoodsModelsName }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
          <template slot-scope="scope">
            {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="现有库存" align="center">
          <template slot-scope="scope">
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="counts" label="调拨数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.counts }}
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="8">
          <span>申请调拨时间：</span>
          <span>{{ detail.createTime | formatTime }}</span>
        </el-col>
        <el-col :span="8">
          <span>状态：</span>
          <span>{{ getStatesLabel(detail.states) }}</span>
        </el-col>
        <el-col :span="8">
          <span>调拨时间：</span>
          <span>{{ detail.outputTime | formatTime }}</span>
        </el-col>
      </el-row>
      <el-row v-if="fileList && fileList.length" :gutter="20" style="margin-top: 20px">
        <el-col class="img-row" :span="24">
          <span>调拨手续照片：</span>
        <div class="img-box" v-for="(item, index) in fileList" :key="index" @click="handlePreview(item)">
          <img class="img" :src="getUrl(item.path)" alt="" />
        </div>
        </el-col>
      </el-row>
      <div class="goods-card" v-for="(goodsItem, goodsIndex) in detail.formTransferGoods" :key="goodsIndex">
        <el-row :gutter="20">
          <el-col :span="12">
            <span>物品分类：</span>
            <span>{{ goodsItem.categoryName }}</span>
          </el-col>
          <el-col :span="12">
            <span>物品名称：</span>
            <span>{{ goodsItem.goodsName }}</span>
          </el-col>
        </el-row>
        <el-table :data="goodsItem.models" :stripe="true" style="margin-top: 20px">
          <el-table-column prop="baseGoodsModelsName" label="规格型号" align="center">
            <template slot-scope="scope">
              {{ scope.row.baseGoodsModelsName }}
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center">
            <template slot-scope="scope">
              {{ scope.row.unit }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="现有库存" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="counts" label="调拨数量" align="center">
            <template slot-scope="scope">
              {{ scope.row.counts }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
  </win-md>
</template>
<script>
import { procureDetail } from '@/api/stock/procure/purchaseOrder';
import { transferDetail } from '@/api/stock/transfer';
import * as DateFormatter from '@/utils/DateFormatter';
import winMd from '@/components/win/win-md';
import transfer from '../../../mixins/transfer';

export default {
  mixins: [transfer],
  components: { winMd },
  props: {
    setting: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      visible: false,
      detail: {
        businessFormCode: '',
        goodsTemplateName: '',
        agencyId: '',
        states: '',
        createName: '',
        time: '',
        procureGoods: [{}, {}],
      },
      loading: false,
      detail: {},
      fileList:[]
    };
  },
  filters:{
  filters: {
    formatTime(time) {
      if(!time) return
      return DateFormatter.LongToDateTime(time)
    }
      if (!time) return '-';
      return DateFormatter.LongToDateTime(time);
    },
  },
  created() {
    this.loading = true;
    transferDetail({ id: this.setting.id }).then((res) => {
      this.detail = res;
      this.fileList = this.detail.procureDoc ? JSON.parse(this.detail.procureDoc) : [];
      this.loading = false;
    });
  },
  methods: {
    open(id) {
      this.visible = true;
      procureDetail({ id }).then((res) => {
        this.detail = res;
      });
    },
    close() {
      this.visible = false;
      this.$emit('close');
    },
  },
};