From f75031d68076a00fdc4e2aa04bbb255452ff7f7f Mon Sep 17 00:00:00 2001 From: 石广澎 <shiguangpeng@163.com> Date: 星期六, 02 十二月 2023 13:35:45 +0800 Subject: [PATCH] fix: 物品退回接口对接 --- admin-web/src/views/departmentitem/itemret/returnNote/detail.vue | 176 +++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 130 insertions(+), 46 deletions(-) diff --git a/admin-web/src/views/departmentitem/itemret/returnNote/detail.vue b/admin-web/src/views/departmentitem/itemret/returnNote/detail.vue index f8f428d..292f2f1 100644 --- a/admin-web/src/views/departmentitem/itemret/returnNote/detail.vue +++ b/admin-web/src/views/departmentitem/itemret/returnNote/detail.vue @@ -1,79 +1,109 @@ <template> - <win-md class="stock-detail" :title="setting.title" @close="close" :width="'800px'"> + <win-md class="stock-detail" title="閮ㄩ棬鐗╁搧閫�鍥炲崟璇︽儏" @close="close" :loading="loading"> <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> + <span>{{detail.businessFormCode}}</span> </el-col> <el-col :span="8"> <span>鎵�灞炴満鏋勶細</span> - <span>{{ detail.agencyName }}</span> + <span>{{detail.agencyName}}</span> + </el-col> + <el-col :span="8"> + <span>閮ㄩ棬锛�</span> + <span>{{detail.departmentName}}</span> </el-col> </el-row> <el-row :gutter="20" style="margin-top: 20px"> <el-col :span="8"> - <span>鍒涘缓浜猴細</span> - <span>{{ detail.operatorName }}</span> + <span>閫�鍥炰汉锛�</span> + <span>{{detail.operatorName}}</span> </el-col> <el-col :span="8"> <span>閫�鍥炴椂闂达細</span> - <span>{{ detail.dealTime | formatTime }}</span> + <span>{{detail.dealTime|formatTime}}</span> </el-col> </el-row> - <el-row v-if="detail.procureDoc" :gutter="20" style="margin-top: 20px"> + <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.fromOutputGoods" :key="goodsIndex"> + <div class="goods-card" v-for="(goodsItem, goodsIndex) in detail.goodsTemplateInfoList" :key="goodsIndex"> <el-row :gutter="20"> - <el-col :span="8"> + <el-col :span="7"> <span>鐗╁搧鍒嗙被锛�</span> <span>{{ goodsItem.categoryName }}</span> </el-col> <el-col :span="8"> <span>鐗╁搧鍚嶇О锛�</span> - <span>{{ goodsItem.goodsName }}</span> + <span>{{ goodsItem.baseGoodsTemplateName }}</span> + </el-col> + <el-col :span="3"> + <span>绫诲埆锛�</span> + <span>{{ goodsItem.type }}绫�</span> + </el-col> + <el-col :span="6"> + <span>鍒嗗彂鍗曞彿锛�</span> + <span>{{ goodsItem.businessFormCode }}</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="counts" label="閫�鍥炴暟閲�" align="center"> - <template slot-scope="scope"> - {{ 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 | formatPrice}} - </template> - </el-table-column> - </el-table> + <div class="card3" v-for="(mItem,k) in goodsItem.modelInfoList" :key="k"> + <el-row v-if="goodsItem.type==='A'" :gutter="24" type="flex" align="middle"> + <el-col :span="8"> + <span>瑙勬牸鍨嬪彿锛�</span> + <span>{{ mItem.baseGoodsModelsName }}</span> + </el-col> + <el-col :span="4"> + <span>鍗曚綅锛�</span> + <span>{{ mItem.unit }}</span> + </el-col> + </el-row> + <el-table :data="mItem.useInfoList" style="margin-top: 15px"> + <el-table-column prop="baseGoodsModelsName" label="瑙勬牸鍨嬪彿" align="left" v-if="goodsItem.type!=='A'"> + <template slot-scope="{row}"> + {{mItem.baseGoodsModelsName}} + </template> + </el-table-column> + <el-table-column prop="unit" label="鍗曚綅" align="center" v-if="goodsItem.type!=='A'"> + <template slot-scope="{row}"> + {{mItem.unit}} + </template> + </el-table-column> + <el-table-column prop="useName" label="浣跨敤浜�" align="left" v-if="goodsItem.type==='A'"/> + <el-table-column prop="useUnm" label="鍦ㄧ敤鏁伴噺" align="center"/> + <el-table-column prop="returnNum" label="閫�鍥炴暟閲�" align="center"/> + </el-table> + </div> + </div> + <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="getUrl(src.path)" + :alt="src.name" + style="width: 100px; height: 100px" + /> + </span> </div> </win-md> </template> <script> -import { outputDetail } from '@/api/stock/accessStock'; 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'; +import {returnDetail} from "@/api/deptGoods/itemret"; + +let viewer = null; export default { components: { winMd }, - props: { setting: { type: Object, @@ -82,21 +112,26 @@ }, data() { return { + loading: true, + fileList: [], detail: { - categoryName: '', + baseCategoryName: '', businessFormCode: '', - goodsName: '', + goodsTemplateName: '', + procureDoc: '', agencyId: '', agencyName: '', states: '', createName: '', - fromOutputGoods: [], + time: '', + procureGoods: [{}, {}], + fileKey: Math.random(), }, }; }, filters: { formatTime(time) { - if (!time) return; + if (!time) return '-'; return DateFormatter.LongToDateTime(time); }, formatPrice(price) { @@ -104,17 +139,66 @@ } }, created() { - outputDetail({ id: this.setting.id }).then((res) => { + returnDetail({ id: this.setting.id }).then((res) => { this.detail = res; + this.loading = false + this.fileList = this.detail.procureDoc ? JSON.parse(this.detail.procureDoc) : []; + this.$nextTick(() => { + this.initPreviewImg(); + }); }); }, methods: { + 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++; + } + } + 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.$emit('close') + this.$emit('close'); }, }, }; </script> <style lang="scss" scoped> -@import url(../../../../styles/store.scss); +//@import url(../../../../styles/store.scss); +.card3 { + padding: 15px; + margin-top: 20px; + border-radius: 2px; + background: #ffffff; +} </style> -- Gitblit v1.9.1