0
This commit is contained in:
徐哼唧L
215
src/components/page/PB_formWork.vue
Normal file
215
src/components/page/PB_formWork.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<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.156:8080/static/img/output-1.png',
|
||||
srcList: [
|
||||
'http://192.168.110.156: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>
|
||||
Reference in New Issue
Block a user