xxjProject/low-consum-manage.git

			@@ -24,10 +24,12 @@
			<span>{{ detail.dealTime \| formatTime }}</span>
			</el-col>
			</el-row>
			<el-row v-if="detail.procureDoc" :gutter="20" style="margin-top: 20px">
			<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"></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">
			@@ -64,6 +66,17 @@
			</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="src.url"
			:alt="src.name"
			style="width: 100px; height: 100px"
			/>
			</span>
			</div>
			</win-md>
			</template>
			<script>
			@@ -71,6 +84,11 @@
			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 },

			@@ -83,6 +101,7 @@
			data() {
			return {
			loading:true,
			fileList: [],
			detail: {
			categoryName: '',
			businessFormCode: '',
			@@ -107,10 +126,50 @@
			created() {
			outputDetail({ id: this.setting.id }).then((res) => {
			this.detail = res;
			this.loading = false
			this.fileList = this.detail.doc ? JSON.parse(this.detail.doc) : [];
			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++;
			}
			}
			viewer.view(index);
			},
			checkImg(name) {
			const suffix = name.substring(name.lastIndexOf('.'), name.length);
			const imgArray = ['.jpg', '.jpeg', '.png', '.bmp'];
			return imgArray.indexOf(suffix) >= 0;

			},
			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')
			},