采购单，采购明细，库存管理，出入库，调拨管理，库存盘点

haoyahui

2023-11-11 332c012e7336f2996c4fe5c8c110d00713c1bde2

 admin-web/src/views/stock/procure/purchaseOrder/detail.vue

@@ -1,15 +1,5 @@
<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"
  >
  <win-md class="stock-detail" :title="setting.title" @close="close" :width="'800px'">
    <el-row :gutter="20">
      <el-col :span="8">
        <span>入库单号：</span>
@@ -17,17 +7,17 @@
      </el-col>
      <el-col :span="8">
        <span>入库仓库：</span>
        <span>{{ detail.goodsTemplateName }}</span>
        <span>{{ detail.warehouseName }}</span>
      </el-col>
      <el-col :span="8">
        <span>所属机构：</span>
        <span>{{ detail.agencyId }}</span>
        <span>{{ detail.agencyName }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="8">
        <span>状态：</span>
        <span>{{ detail.states==1?'待入库':'已入库' }}</span>
        <span>{{ detail.states == 1 ? '待入库' : '已入库' }}</span>
      </el-col>
      <el-col :span="8">
        <span>创建人：</span>
@@ -35,34 +25,42 @@
      </el-col>
      <el-col :span="8">
        <span>入库时间：</span>
        <span>{{ detail.time }}</span>
        <span>{{ detail.incomeTime | formatTime }}</span>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col class="img-row" :span="12">
        <span>采购类型：</span>
        <span>{{ detail.buyType == 1 ? '集采' : '自采' }}</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>
        <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.procureGoods" :key="goodsIndex">
      <el-row :gutter="20">
        <el-col :span="8">
          <span>物品分类：</span>
          <span>{{ goodsItem.baseCategoryId }}</span>
          <span>{{ goodsItem.baseCategoryName }}</span>
        </el-col>
        <el-col :span="8">
          <span>物品名称：</span>
          <span>{{ goodsItem.baseGoodsTemplateId }}</span>
          <span>{{ goodsItem.goodsTemplateName }}</span>
        </el-col>
        <el-col :span="8">
          <span>供货商：</span>
          <span>{{ goodsItem.supplier }}</span>
        </el-col>
      </el-row>
      <el-table :data="goodsItem.models" :stripe="true" style="margin-top: 20px;">
        <el-table-column prop="baseGoodsModelsId" label="规格型号" align="center">
      <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.baseGoodsModelsId }}
            {{ scope.row.baseGoodsModelsName }}
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center">
@@ -70,78 +68,145 @@
            {{ scope.row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="现有库存" align="center">
        <el-table-column prop="price" label="单价" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price"></el-input>
            {{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="counts" label="出库数量" align="center">
        <el-table-column prop="counts" label="入库数量" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.counts"></el-input>
            {{ scope.row.counts }}
          </template>
        </el-table-column>
        <el-table-column prop="counts" label="金额" align="center">
          <template slot-scope="scope">
            {{ (scope.row.price * scope.row.counts).toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
    <div id="uploadPreviewImages" style="display: none">
      <span v-for="(src, index) in fileList" :key="index">
        <img
          v-if="checkImg(src.name)"
          class="v-img"
          :src="src.url"
          :alt="src.name"
          style="width: 100px; height: 100px"
        />
      </span>
    </div>
  </win-md>
</template>
<script>
import {
  procureDetail,
} from '@/api/stock/procure/purchaseOrder';
import { procureDetail } from '@/api/stock/procure/purchaseOrder';
import winMd from '@/components/win/win-md';
import * as DateFormatter from '@/utils/DateFormatter';
import { getDownUrl } from '@/utils/base';
import Viewer from 'viewerjs';
import 'viewerjs/dist/viewer.css';

let viewer = null;

export default {
  components: { winMd },

  props: {
    setting: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      visible: false,
      fileList: [],
      detail: {
        businessFormCode:'',
        goodsTemplateName:'',
        agencyId:'',
        states:'',
        createName:'',
        time:'',
        procureGoods:[{},{}]
        baseCategoryName: '',
        businessFormCode: '',
        goodsTemplateName: '',
        procureDoc: '',
        agencyId: '',
        agencyName: '',
        states: '',
        createName: '',
        time: '',
        procureGoods: [{}, {}],
        fileKey: Math.random(),
      },
    };
  },
  filters: {
    formatTime(time) {
      if (!time) return;
      return DateFormatter.LongToDateTime(time);
    },
  },
  created() {
    procureDetail({ id: this.setting.id }).then((res) => {
      this.detail = res;
      this.fileList = this.detail.procureDoc ? JSON.parse(this.detail.procureDoc) : [];
      this.$nextTick(() => {
        this.initPreviewImg();
      });
    });
  },
  methods: {
    open(id) {
      this.visible = true;
      procureDetail({ id }).then(res=>{
        this.detail = res
      })
    initPreviewImg() {
      if (viewer != null) {
        viewer.destroy();
      }
      const ViewerDom = document.querySelector('#uploadPreviewImages');
      viewer = new Viewer(ViewerDom, {});
    },
    handlePreview(file) {
      if (!this.checkImg(file.name)) {
        return false;
      }
      let index = 0;
      for (let i = 0; i < this.fileList.length; i++) {
        const f = this.fileList[i];
        if (this.checkImg(f.name)) {
          if (file.id == f.id) {
            break;
          }
          index++;
        }
      }
      // this.fileList.forEach((f, i) => {
      //   if (file.uid == f.uid) {
      //     index = i
      //   }
      // })
      // document.querySelector('#uploadPreviewImages').children[0].click()
      viewer.view(index);
    },
    checkImg(name) {
      const suffix = name.substring(name.lastIndexOf('.'), name.length);
      const imgArray = ['.jpg', '.jpeg', '.png', '.bmp'];
      if (imgArray.indexOf(suffix) < 0) {
        return false;
      }
      return true;
    },
    getUrl(path) {
      if (path.substr(0, 7).toLowerCase() == 'http://' || path.substr(0, 8).toLowerCase() == 'https://') {
        return path;
      } else {
        return getDownUrl() + path;
      }
    },
    close() {
      this.visible = false;
      this.$emit('close');
    },
  },
};
</script>
<style lang="scss" scoped>
.img-row {
  display: flex;
  align-content: center;
@import url(../../index.scss);
.el-dialog {
  z-index: 1100 !important;
}
.img-box {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: #f9f9f9;
  margin-right: 20px;
  img {
    width: 100%;
  }
}

.goods-card {
  position: relative;
  background: #f6f6f6;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #f9f9f9;
  margin-top: 20px;
  &:nth-of-type(1) {
    margin-top: 0;
  }
>>> .el-dialog {
  z-index: 1100 !important;
}
</style>