| | |
| | | <template> |
| | | <win-md class="stock-detail" :title="setting.title" @close="close" :width="'1100px'"> |
| | | <div v-loading="loading"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <span>调拨单号:</span> |
| | | <span>{{ detail.businessFormCode }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <span>调拨机构:</span> |
| | | <span>{{ detail.outAgencyName }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <span>调拨人:</span> |
| | | <span>{{ detail.outOperatorName || '-' }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <span>接收机构:</span> |
| | | <span>{{ detail.inAgencyName }}</span> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20" style="margin-top: 20px"> |
| | | <el-col :span="6"> |
| | | <span>申请人:</span> |
| | | <span>{{ detail.operatorName }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <span>申请调拨时间:</span> |
| | | <span>{{ detail.createTime | formatTime }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <span>状态:</span> |
| | | <span>{{ getStatesLabel(detail.states) }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <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> |
| | | <win-md class="stock-detail" :loading="loading" :title="setting.title" @close="close" :width="'1100px'"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6"> |
| | | <span>调拨单号:</span> |
| | | <span>{{ detail.businessFormCode }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <span>调拨机构:</span> |
| | | <span>{{ detail.outAgencyName }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <span>调拨人:</span> |
| | | <span>{{ detail.outOperatorName || '-' }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <span>接收机构:</span> |
| | | <span>{{ detail.inAgencyName }}</span> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20" style="margin-top: 20px"> |
| | | <el-col :span="6"> |
| | | <span>申请人:</span> |
| | | <span>{{ detail.operatorName }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <span>申请调拨时间:</span> |
| | | <span>{{ detail.createTime | formatTime }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <span>状态:</span> |
| | | <span>{{ getStatesLabel(detail.states) }}</span> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <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="" /> |
| | | <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> |
| | | <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="counts" label="调拨数量" align="center"> |
| | | <template slot-scope="scope"> |
| | | {{ scope.row.counts }} |
| | | </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> |
| | | </div> |
| | | <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="price" label="金额" align="center"> |
| | | <template slot-scope="scope"> |
| | | {{ scope.row.totalAmount }} |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </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> |
| | |
| | | import * as DateFormatter from '@/utils/DateFormatter'; |
| | | import winMd from '@/components/win/win-md'; |
| | | import transfer from '../../../mixins/transfer'; |
| | | import {getDownUrl} from "@/utils/base"; |
| | | import Viewer from 'viewerjs'; |
| | | import 'viewerjs/dist/viewer.css'; |
| | | |
| | | let viewer = null; |
| | | |
| | | export default { |
| | | mixins: [transfer], |
| | | components: { winMd }, |
| | | components: {winMd}, |
| | | props: { |
| | | setting: { |
| | | type: Object, |
| | | default: () => {}, |
| | | default: () => { |
| | | }, |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | loading: false, |
| | | detail: {}, |
| | | fileList:[] |
| | | fileList: [] |
| | | }; |
| | | }, |
| | | filters: { |
| | |
| | | }, |
| | | created() { |
| | | this.loading = true; |
| | | transferDetail({ id: this.setting.id }).then((res) => { |
| | | transferDetail({id: this.setting.id}).then((res) => { |
| | | this.detail = res; |
| | | this.fileList = this.detail.procureDoc ? JSON.parse(this.detail.procureDoc) : []; |
| | | this.loading = false; |
| | | 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'); |
| | | }, |