<template>
|
<win-lg class="stock-detail" :title="setting.title" @close="close" :width="'800px'" :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.outAgencyName}}</span>
|
</el-col>
|
<el-col :span="8">
|
<span>部门：</span>
|
<span>{{detail.inWarehouseName}}</span>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" style="margin-top: 20px">
|
<el-col :span="8">
|
<span>分发人：</span>
|
<span>{{detail.outOperatorName}}</span>
|
</el-col>
|
<el-col :span="8">
|
<span>分发时间：</span>
|
<span>{{detail.createTime|formatTime}}</span>
|
</el-col>
|
<el-col :span="8">
|
<span>领取人：</span>
|
<span>{{detail.inOperatorName}}</span>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20" style="margin-top: 20px">
|
<el-col :span="8">
|
<span>联系电话：</span>
|
<span>{{detail.tel}}</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" 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="8">
|
<span>物品分类：</span>
|
<span>{{ goodsItem.categoryName }}</span>
|
</el-col>
|
<el-col :span="8">
|
<span>物品名称：</span>
|
<span>{{ goodsItem.goodsName }}</span>
|
</el-col>
|
<el-col :span="8">
|
<span>物品类别：</span>
|
<span>{{ goodsItem.type }}类</span>
|
</el-col>
|
</el-row>
|
<el-form>
|
<el-row class="card3" v-for="(mItem, mIndex) in goodsItem.models" :key="mIndex">
|
<el-col :span="10">
|
<el-form-item label="规格型号:" style="margin-bottom: 0">
|
{{ mItem.baseGoodsModelsName }}
|
</el-form-item>
|
</el-col>
|
<el-col :span="4">
|
<el-form-item label="单位:" style="margin-bottom: 0" label-width="80">
|
{{mItem.unit}}
|
</el-form-item>
|
</el-col>
|
<!--A类商品 -->
|
<el-col :span="24" v-if="goodsItem.type==='A'">
|
<el-row v-for="(user, u) in mItem.useInfo" :key="u">
|
<el-col :span="6">
|
<el-form-item label="分发数量:" style="margin-bottom: 0" label-width="80">
|
{{user.num}}
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="使用人:" style="margin-bottom: 0" label-width="80">
|
{{user.name}}
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="联系电话:" style="margin-bottom: 0" label-width="80">
|
{{user.tel}}
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-col>
|
<!--BC类商品 -->
|
<el-col style="padding: 10px 0" :span="10" v-else>
|
<el-form-item label="分发数量:" prop="counts" style="margin-bottom: 0" label-width="80">
|
{{mItem.counts}}
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
</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="src.url"
|
:alt="src.name"
|
style="width: 100px; height: 100px"
|
/>
|
</span>
|
</div>
|
</win-lg>
|
</template>
|
<script>
|
import {transferDetail} from '@/api/stock/transfer';
|
import winLg from '@/components/win/win-lg';
|
import * as DateFormatter from '@/utils/DateFormatter';
|
import {getDownUrl} from '@/utils/base';
|
import Viewer from 'viewerjs';
|
import 'viewerjs/dist/viewer.css';
|
import de from "element-ui/src/locale/lang/de";
|
|
let viewer = null;
|
|
export default {
|
computed: {
|
de() {
|
return de
|
}
|
},
|
components: { winLg },
|
props: {
|
setting: {
|
type: Object,
|
default: () => {},
|
},
|
},
|
data() {
|
return {
|
loading:false,
|
fileList: [],
|
detail: {
|
baseCategoryName: '',
|
businessFormCode: '',
|
goodsTemplateName: '',
|
procureDoc: '',
|
agencyId: '',
|
agencyName: '',
|
states: '',
|
createName: '',
|
time: '',
|
procureGoods: [{}, {}],
|
fileKey: Math.random(),
|
},
|
};
|
},
|
filters: {
|
formatTime(time) {
|
if (!time) return '-';
|
return DateFormatter.LongToDateTime(time);
|
},
|
formatPrice(price) {
|
return price / 100
|
}
|
},
|
created() {
|
transferDetail({ id: this.setting.id }).then((res) => {
|
this.detail = res;
|
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++;
|
}
|
}
|
// 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.$emit('close');
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
@import url(../../../../styles/store.scss);
|
.card3 {
|
padding: 10px;
|
margin-top: 10px;
|
border-radius: 2px;
|
background: #ffffff;
|
}
|
.img-box{
|
width: 100px;
|
height: 100px;
|
}
|
.img-box .img{
|
width: 100px;
|
height: 100px;
|
}
|
</style>
|
