tougao_web/src/components/page/PB_formWork.vue

<template>
	<div style="min-width: 1200px;height: 99%;overflow: hidden;">
		<div class="step_role">
			<el-steps :active="3" class="move_bar">
				<el-step title="Choice" @click.native="handleStep1()">
					<i class="step01" slot="icon"></i>
				</el-step>
				<el-step title="Check" @click.native="handleStep2()">
					<i class="step02" slot="icon"></i>
				</el-step>
				<el-step title="Generate">
					<i class="step03" slot="icon"></i>
				</el-step>
			</el-steps>
		</div>
		<el-row :gutter="20" style="margin: 10px auto 0 auto;height: 90%;background-color: #fff;width: 1400px;box-shadow: 0 0 6px 0 rgb(0 0 0 / 13%);padding: 10px;">
			<el-col :span="16" style="height: 100%;">
				<div class="pre_view" v-loading="loading" element-loading-text="Loading desperately..." element-loading-spinner="el-icon-loading"
				 element-loading-background="rgba(0, 0, 0, 0.8)">
					<h1>
						<img src="../../assets/img/temp-iocn.png" v-if="this.article_title!=''" style="vertical-align: middle;margin: 0 5px 0 0;">
						{{this.article_title}}
					</h1>
					<div>
						<div>
							<div class="pdf">
								<pdf :src="pdfUrl" v-for="i in numPages" :key="i" :page="i" @num-pages="pageCount=$event"></pdf>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="8" style="height: 99%;padding:50px 0 0 40px;overflow: auto;">
				<div class="con_dite">
					<div style="margin-bottom: 30px;">
						Choose Template：
						<el-select v-model="shuTter.board" placeholder="请选择模板" @change="select_tem($event)" style="width: 220px;">
							<el-option v-for="item in fol_low" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div style="margin-bottom: 30px;">
						<font style="float: left;margin-top: 170px;">Preview <br>Formatted <br>Document：</font>
						<!-- <el-image style="width: 250px;" :src="url" :preview-src-list="srcList">
						</el-image> -->
						<img src="../../assets/img/output-1.png" alt="" style="width: 250px;">
					</div>
					<div>
						Save As：
						<el-radio-group v-model="shuTter.stgte">
							<el-radio :label="1">Word</el-radio>
							<el-radio :label="2" :disabled="true">Pdf</el-radio>
						</el-radio-group>
					</div>
				</div>
				<div style="text-align: center;">
					<el-button type="primary" style="width: 100%;margin: 40px auto 50px auto;" @click="checkActicle">OK</el-button>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	// import pdf from 'vue-pdf';
	export default {
		data() {
			return {
				article_id: this.$route.query.esay_id,
				article_title: '',
				loading: false,
				IMGfile_Url: this.IMGfileUrl,
				shuTter: {
					'stgte': 1,
					'board': '1'
				},
				fol_low: [{
					value: '1',
					label: 'Template 1'
				}],
				url: 'http://192.168.110.159:8080/static/img/output-1.png',
				srcList: [
					'http://192.168.110.159:8080/static/img/output-1.png'
				],
				pageCount: 0,
				pdfUrl: '',
				src: 'CANCER.pdf', // pdf文件地址
				numPages: 0
			};
		},
		mounted() {

			this.loadPdfHandler()
		},
		created() {
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				this.$api
					.post('typeset/gettypesetdetail', {
						'typesetId': this.article_id
					})
					.then(res => {
						if (res.ret == 0) {
							this.article_title = res.data.info.title;
						} else {
							this.$message.error(res.error);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},
			// 点击步骤条
			handleStep1() {
				this.$router.push({
					path: '/compose',
					query: {
						esay_id: this.article_id
					}
				});
			},
			handleStep2() {
				this.$router.push({
					path: '/checklate',
					query: {
						esay_id: this.article_id
					}
				});
			},
			// 下拉换模板预览
			select_tem(event) {
				console.log(event)
			},
			// pdf预览
			loadPdfHandler() {
				//src为你服务器上存放pdf的路径
				this.pdfUrl = pdf.createLoadingTask(this.src);
				this.pdfUrl.promise.then(pdf => {
					this.numPages = pdf.numPages
				})
			},
			// 点击下载
			checkActicle() {
				this.$api
					.post('typeset/getDocx', {
						'typesetId': this.article_id
					})
					.then(res => {
						if (res.ret == 0) {
							window.location.href = this.IMGfile_Url + 'upload/' + res.data.file;
							this.$message.success('Download succeeded!');
						} else {
							this.$message.error(res.error);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			}
		},
		components: {
			pdf
		},

	};
</script>

<style scoped>
	.step_role {
		margin: 15px auto 10px auto;
		width: 800px;
	}

	.step_role .move_bar {
		width: 100%;
		margin: 5px 0 0 0;
	}

	.pre_view {
		height: 100%;
	}

	.pre_view>h1 {
		font-size: 16px;
		margin: 0 0 5px 0;
		padding: 15px 0 15px 20px;
	}

	.pre_view>div {
		height: 90%;
		overflow-y: scroll;
	}

	.pre_view>div>div {
		/* background-color: #e8ecef; */
		/* height: 2000px; */
	}


	.con_dite {
		margin: 10px 0 0 0;
	}

	.con_dite .el-radio-group {
		margin: 10px 0 0 0;
	}

	.con_dite .el-radio-group .el-radio {
		display: block;
		margin-bottom: 15px;
	}
</style>