Browse Source

feat:[申请表单,计划表单]导出

lkf
15881625488@163.com 2 months ago
parent
commit
fdfc3f5659
6 changed files with 795 additions and 104 deletions
  1. +7
    -1
      src/api/business/study/studyFormApply.js
  2. +7
    -1
      src/api/business/study/studyFormPlan.js
  3. +2
    -2
      src/views/business/comps/template/comps/gsp/SYWZPZJHB.vue
  4. +425
    -43
      src/views/business/study/comp/jhbd/Xq.vue
  5. +349
    -52
      src/views/business/study/comp/sqbd/Xq.vue
  6. +5
    -5
      src/views/business/study/comp/ytbd/Bj.vue

+ 7
- 1
src/api/business/study/studyFormApply.js View File

@ -24,7 +24,13 @@ export function studyFormApply_qmxx(query) {
params: query params: query
}) })
} }
export function studyFormApply_jcgjqmxxList(query) {
return request({
url: '/system/business/studyFormApply/jcgjqmxxList',
method: 'get',
params: query
})
}
//详情 //详情
export function studyFormApply_info(query) { export function studyFormApply_info(query) {
return request({ return request({

+ 7
- 1
src/api/business/study/studyFormPlan.js View File

@ -24,7 +24,13 @@ export function studyFormPlan_qmxx(query) {
params: query params: query
}) })
} }
export function studyFormPlan_jcgjqmxxList(query) {
return request({
url: '/system/business/studyFormPlan/jcgjqmxxList',
method: 'get',
params: query
})
}
//详情 //详情
export function studyFormPlan_info(query) { export function studyFormPlan_info(query) {
return request({ return request({

+ 2
- 2
src/views/business/comps/template/comps/gsp/SYWZPZJHB.vue View File

@ -149,7 +149,7 @@ export default {
width: 280, width: 280,
headerSelectKey: "preparationConcentrationUnit", headerSelectKey: "preparationConcentrationUnit",
fillType: "actFill", fillType: "actFill",
headerOptions: this.$store.state.template.volumeOptions,
headerOptions: this.getDictOptions('business_nddw'),
defaultValue: "mg", defaultValue: "mg",
bodyType: "inputNumber", bodyType: "inputNumber",
bodyFillType: "actFill", bodyFillType: "actFill",
@ -161,7 +161,7 @@ export default {
width: 280, width: 280,
headerSelectKey: "preparationVolumeUnit", headerSelectKey: "preparationVolumeUnit",
fillType: "actFill", fillType: "actFill",
headerOptions: this.$store.state.template.volumeOptions,
headerOptions: this.getDictOptions('business_tjdw'),
bodyType: "inputNumber", bodyType: "inputNumber",
bodyFillType: "actFill", bodyFillType: "actFill",
bodyMaxlength: 10, bodyMaxlength: 10,

+ 425
- 43
src/views/business/study/comp/jhbd/Xq.vue View File

@ -10,66 +10,174 @@
</div> </div>
<div class="right-top"> <div class="right-top">
<el-button @click="cancel()">{{ $t('form.close') }}</el-button> <el-button @click="cancel()">{{ $t('form.close') }}</el-button>
<el-button type="primary" v-if="form.bdzt === 5 && form.tbzt === 1" @click="openApprove = true">{{
$t('page.business.study.studyFormPlan.tb') }}</el-button>
</div> </div>
</div> </div>
<div class="edit-content ">
<div class="content">
<!-- 1:流程3编辑5人员7修改9补充说明 -->
<el-button type="primary" @click="exportExcel(-1)">{{ $t('page.business.study.studyFormPlan.dcqbjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(1)">{{ $t('page.business.study.studyFormPlan.dclcjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(3)">{{ $t('page.business.study.studyFormPlan.dcbjjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(7)">{{ $t('page.business.study.studyFormPlan.dcxgjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormPlan.dcbhsjgj') }}
</el-button>
<TemplateTable ref="templateTable" :sn="form.templateSn" fillType="audit" :templateData="form" />
<div class="content-title">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormPlan.qmxx') }}</div>
</div>
<div class="pal">
<el-table :data="qmxxList" v-loading="loadingQmxx">
<el-table-column :label="$t('page.business.study.studyFormPlan.qmr')" align="center" prop="qmrMc"
width="150px" />
<el-table-column :label="$t('page.business.study.studyFormPlan.qmyy')" align="center"
:prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" width="150px" />
<el-table-column :label="$t('page.business.study.studyFormPlan.qmsj')" align="center" prop="createTime"
width="150px" />
<el-table-column :label="$t('page.business.study.studyFormPlan.bzyy')" align="center" prop="remark"
:show-overflow-tooltip="true" />
</el-table>
</div>
<div class="pal">
<pagination v-show="totalQmxx > 0" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
<!-- 1:流程3编辑5人员7修改9补充说明 -->
<el-button type="primary" @click="exportExcel(-1)">{{ $t('page.business.study.studyFormPlan.dcqbjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(1)">{{ $t('page.business.study.studyFormPlan.dclcjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(3)">{{ $t('page.business.study.studyFormPlan.dcbjjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(7)">{{ $t('page.business.study.studyFormPlan.dcxgjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormPlan.dcbhsjgj') }}
</el-button>
<div class="edit-content">
<div class="detail-content" style="width: 100%; height: 100%;">
<vue-html2pdf :show-layout="true" pdf-content-width="100%" :pdf-format="form.templatePdfSize" :pdf-quality="2"
:float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="0" :enable-download="true"
:preview-modal="false" :filename="form.bdmc" @beforeDownload="addDynamicWatermark" ref="html2Pdf"
@progress="onProgress">
<section slot="pdf-content">
<div class="pdf-content">
<TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="detail" />
<div v-if="showExport" style="width: 100%; padding: 0px 30px ;">
<div class="content-title" style="margin-bottom: 10px;">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormPlan.qmxx') }}</div>
</div>
<table class="datatable">
<thead>
<tr>
<th style="width: 20%;">{{ $t('page.business.study.studyFormPlan.qmr') }}</th>
<th style="width: 20%;">{{ $t('page.business.study.studyFormPlan.qmyy') }}</th>
<th style="width: 20%;">{{ $t('page.business.study.studyFormPlan.qmsj') }}</th>
<th style="width: 40%;">{{ $t('page.business.study.studyFormPlan.bzyy') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in qmxxExportList" :key="index">
<td>{{ item.qmrMc }}</td>
<td>{{ $i18n.locale === 'zh_CN' ? item.qmyy : item.qmyyEn }}</td>
<td>{{ item.createTime }}</td>
<td>{{ item.remark }}</td>
</tr>
</tbody>
</table>
<div class="content-title" style="margin-top: 10px;" v-show="jcgjlxExport != 999">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormPlan.jcgj') }}</div>
</div>
<JcgjList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
</div>
</div>
<div v-if="showExport" id="watermark-overlay" ref="watermarkContainer" :style="{
'--watermark-text': `'${watermarkText}'`,
'--watermark-opacity': opacity,
'--watermark-size': '14px',
'--watermark-color': 'red'
}"></div>
</section>
</vue-html2pdf>
<div style="padding: 0px 20px 0px 30px;margin-left: 10px;">
<div class="content-title">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormPlan.qmxx') }}</div>
</div>
<div class="pal">
<el-table :data="qmxxList" v-loading="loadingQmxx" style="width: 100%;">
<el-table-column :label="$t('page.business.study.studyFormPlan.qmr')" align="center" prop="qmrMc" />
<el-table-column :label="$t('page.business.study.studyFormPlan.qmyy')" align="center"
:prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" />
<el-table-column :label="$t('page.business.study.studyFormPlan.qmsj')" align="center"
prop="createTime" />
<el-table-column :label="$t('page.business.study.studyFormPlan.bzyy')" align="center" prop="remark" />
</el-table>
</div>
<pagination v small layout="prev, pager, next" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
:limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" /> :limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" />
<div class="content-title" style="margin-top: 10px;">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormPlan.jcgj') }}</div>
</div>
<JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
<pagination v small layout="prev, pager, next" :total="jcgjTotal" @pagination="getJjcgjList" />
</div> </div>
<div class="content-title">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormPlan.jcgj') }}</div>
</div>
<JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
<pagination v-show="jcgjTotal > 0" small layout="prev, pager, next" :total="jcgjTotal"
@pagination="getJjcgjList" />
</div> </div>
</div> </div>
</div> </div>
<!-- 填报 -->
<el-dialog :title="$t('page.business.study.studyFormPlan.cjjl')" :visible.sync="openApprove" width="500px"
append-to-body :close-on-click-modal="false">
<el-form ref="formApprove" :model="formApprove" :rules="rulesApprove" label-width="120px" v-if="openApprove">
<el-alert :title="$t('page.business.study.studyFormPlan.ts')" :closable="false" type="success">
</el-alert>
<el-row>
<el-col :span="24">
<el-form-item :label="$t('form.qmyy')" prop="qmyy">
<el-input type="text" :value="formApprove.qmyy" maxlength="50" disabled
:placeholder="$t('form.placeholderInput')" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item :label="$t('form.remark')" prop="remark">
<el-input type="textarea" v-model="formApprove.remark" :rows="5" maxlength="500"
:placeholder="$t('form.placeholderInput')">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item :label="$t('form.signer')">
<el-input type="text" v-model="nickName" maxlength="50" disabled
:placeholder="$t('form.placeholderInput')" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item :label="$t('form.password')" prop="qmrmm">
<el-input type="password" show-password v-model="formApprove.qmrmm" maxlength="20"
:placeholder="$t('form.placeholderInput')" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="approve">{{ $t('form.confirm') }}</el-button>
<el-button @click="openApprove = false">{{ $t('form.cancel') }}</el-button>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { studyFormPlan_info, studyFormPlan_jcgj, studyFormPlan_qmxx, studyFormPlan_exportDetail } from "@/api/business/study/studyFormPlan"
import { studyFormPlan_jcgjqmxxList, studyFormPlan_tb, studyFormPlan_info, studyFormPlan_jcgj, studyFormPlan_qmxx, studyFormPlan_exportDetail } from "@/api/business/study/studyFormPlan"
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import JcgjList from "@/views/business/comps/common/JcgjList"; import JcgjList from "@/views/business/comps/common/JcgjList";
import TemplateTable from '@/views/business/comps/template/TemplateTable'; import TemplateTable from '@/views/business/comps/template/TemplateTable';
import moment from "moment";
import VueHtml2pdf from 'vue-html2pdf'
export default { export default {
name: "Xq", name: "Xq",
components: { JcgjList, TemplateTable },
components: { JcgjList, TemplateTable, VueHtml2pdf },
data() { data() {
return { return {
watermarkText:'',
opacity: 0.8,
watermarkOpacity: 0.8,
watermarkSize: 40,
openApprove: false,
formApprove: {
id: null,
qmyy: this.$t('page.business.study.studyFormPlan.cjjl'),
remark: '',
qmrmm: '',
},
rulesApprove: {
qmrmm: [{
required: true,
message: ' ',
trigger: 'blur'
}]
},
qmxxList: [], qmxxList: [],
totalQmxx: 0, totalQmxx: 0,
loadingQmxx: true, loadingQmxx: true,
@ -100,7 +208,11 @@ export default {
pageNum: 1, pageNum: 1,
formId: null, formId: null,
pageSize: 5, pageSize: 5,
}
},
showExport: false,
qmxxExportList: [],
jcgjExportList: [],
jcgjlxExport: 0
} }
}, },
computed: { computed: {
@ -111,8 +223,120 @@ export default {
created() { created() {
}, },
methods: { methods: {
updateWatermark() {
//
const text = this.nickName +' '+ moment().format("YYYY-MM-DD HH:mm:ss");
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// canvas
canvas.width = 300;
canvas.height = 300;
//
ctx.fillStyle = `rgba(255, 0, 0, ${this.opacity})`;
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 45
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(-45 * Math.PI / 180);
ctx.fillText(text, 0, 0);
//
const container = this.$refs.watermarkContainer;
container.style.backgroundImage = `url(${canvas.toDataURL()})`;
container.style.backgroundRepeat = 'repeat';
},
onProgress(progress) {
console.log(`生成进度: ${progress}%`)
this.removePageBreak()
if (progress == 100) {
this.showExport = false
this.$modal.closeLoading()
}
},
exportExcel(jcgjlx) { exportExcel(jcgjlx) {
this.$modal.loading() this.$modal.loading()
this.jcgjlxExport = jcgjlx
this.showExport = true
studyFormPlan_jcgjqmxxList({ jcgjlx: jcgjlx, id: this.form.id }).then(response => {
this.jcgjExportList = response.data.jcgj
this.qmxxExportList = response.data.qmxx
this.updateWatermark()
this.$refs.jcgjExportList.init(this.jcgjExportList)
setTimeout(() => {
this.$refs.html2Pdf.generatePdf()
}, 200);
})
},
//
async addDynamicWatermark({ pdfContent }) {
return new Promise((resolve) => {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
//
const rect = this.$refs.contentArea.getBoundingClientRect()
canvas.width = rect.width
canvas.height = rect.height
//
ctx.fillStyle = `rgba(100, 100, 100, ${this.watermarkOpacity})`
ctx.font = `${this.watermarkSize}px Arial`
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
//
const stepX = 300
const stepY = 200
//
ctx.save()
ctx.translate(canvas.width / 2, canvas.height / 2)
ctx.rotate(-Math.PI / 4) // 45
for (let x = -canvas.width; x < canvas.width * 2; x += stepX) {
for (let y = -canvas.height; y < canvas.height * 2; y += stepY) {
//
const dynamicText = `${this.watermarkText} - ${this.getCurrentTime()}`
ctx.fillText(dynamicText, x, y)
}
}
ctx.restore()
//
const watermarkLayer = document.createElement('div')
watermarkLayer.className = 'watermark-layer'
watermarkLayer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image: url(${canvas.toDataURL('image/png')});
background-repeat: repeat;
z-index: 9999;
`
//
this.$refs.contentArea.style.position = 'relative'
this.$refs.contentArea.appendChild(watermarkLayer)
//
setTimeout(() => resolve(), 100)
})
},
//
removePageBreak() {
document.querySelectorAll('.html2pdf__page-break').forEach(el => {
el.remove()
})
},
exportExcel_bak(jcgjlx) {
this.$modal.loading()
studyFormPlan_exportDetail(_.merge({}, this.queryParamsJcgj, { jcgjlx: jcgjlx, lang: this.$store.getters.language.split("_")[0] })).then(response => { studyFormPlan_exportDetail(_.merge({}, this.queryParamsJcgj, { jcgjlx: jcgjlx, lang: this.$store.getters.language.split("_")[0] })).then(response => {
window.open(process.env.VUE_APP_FILE_DOMAIN + response.msg) window.open(process.env.VUE_APP_FILE_DOMAIN + response.msg)
}).finally(() => { }).finally(() => {
@ -157,6 +381,7 @@ export default {
show(row) { show(row) {
this.reset() this.reset()
this.$modal.loading() this.$modal.loading()
this.formApprove.id = row.id
this.queryParamsJcgj.formId = row.id this.queryParamsJcgj.formId = row.id
this.queryParamsQmxx.formId = row.id this.queryParamsQmxx.formId = row.id
studyFormPlan_info({ id: row.id }).then(response => { studyFormPlan_info({ id: row.id }).then(response => {
@ -167,7 +392,164 @@ export default {
}).finally(() => { }).finally(() => {
this.$modal.closeLoading() this.$modal.closeLoading()
}) })
},
approve() {
this.$refs["formApprove"].validate(valid => {
if (valid) {
this.$modal.loading()
studyFormPlan_tb(this.formApprove).then(response => {
this.openApprove = false
this.$emit('close')
this.open = false
}).finally(() => {
this.$modal.closeLoading()
})
}
})
} }
} }
} }
</script> </script>
<style scoped>
.content-title {
width: 100%;
background: #f9f9ff;
font-size: 0.96rem;
font-weight: bold;
padding-left: 10px;
height: 40px;
line-height: 40px;
display: flex;
justify-content: flex-start;
text-align: left;
}
.line {
width: 2px;
float: left;
height: 16px;
margin-top: 12px;
margin-right: 8px;
border-left: #3178ff 3px solid;
}
.subtitle {
height: 40px;
line-height: 40px;
color: #464647 !important;
}
.pdf-content {
padding: 20px;
font-family: Arial, sans-serif;
}
#watermark-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.6;
font-size: 12px;
pointer-events: none;
z-index: 10;
color: red;
}
.pdf-content h1 {
color: #333;
border-bottom: 2px solid #4CAF50;
padding-bottom: 10px;
}
.pdf-content table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.pdf-content th,
.pdf-content td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.pdf-content th {
background-color: #f2f2f2;
}
.datatable {
border-collapse: collapse;
width: 100%;
}
.upload-file-list .el-upload-list__item {
margin-bottom: 0px !important;
}
.datatable thead {
border-left: 1px solid #d0d0d0;
}
.datatable th {
padding: 5px 5px 4px 5px;
max-width: 200px;
line-height: 35px;
text-align: center;
color: #414753;
background: #F5F7FA;
border: 1px solid #d0d0d0;
}
.el-dialog__body {
padding: 10px 20px !important;
}
.datatable th.operate {
padding: 5px 5px 4px 5px;
width: 100px;
line-height: 35px;
background: #F5F7FA;
border: 1px solid #d0d0d0;
text-align: center;
}
.datatable .rowAlt td,
.datatable tbody tr:nth-child(2n) td {
background: #F5F7FA;
}
.datatable td {
border: solid 1px #d0d0d0;
padding: 3px 5px 4px 5px;
max-width: 100px;
color: #414753;
line-height: 35px;
text-align: center;
}
.html2pdf__page-break {
display: none !important;
}
.content {
position: relative;
z-index: 1;
}
.controls {
margin-bottom: 20px;
padding: 10px;
background: #f5f5f5;
}
input {
margin: 0 10px;
padding: 8px;
}
</style>

+ 349
- 52
src/views/business/study/comp/sqbd/Xq.vue View File

@ -14,52 +14,89 @@
$t('page.business.study.studyFormApply.tb') }}</el-button> $t('page.business.study.studyFormApply.tb') }}</el-button>
</div> </div>
</div> </div>
<div class="edit-content ">
<div class="content">
<div>
<!-- 1:流程3编辑5人员7修改9补充说明 -->
<el-button type="primary" @click="exportExcel(-1)">{{ $t('page.business.study.studyFormApply.dcqbjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(1)">{{ $t('page.business.study.studyFormApply.dclcjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(3)">{{ $t('page.business.study.studyFormApply.dcbjjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(7)">{{ $t('page.business.study.studyFormApply.dcxgjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormApply.dcbhsjgj') }}
</el-button>
</div>
<TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="audit" />
<div class="content-title">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormApply.qmxx') }}</div>
</div>
<div class="pal">
<el-table :data="qmxxList" v-loading="loadingQmxx">
<el-table-column :label="$t('page.business.study.studyFormApply.qmr')" align="center" prop="qmrMc"
width="150px" />
<el-table-column :label="$t('page.business.study.studyFormApply.qmyy')" align="center"
:prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" width="150px" />
<el-table-column :label="$t('page.business.study.studyFormApply.qmsj')" align="center" prop="createTime"
width="150px" />
<el-table-column :label="$t('page.business.study.studyFormApply.bzyy')" align="center" prop="remark"
:show-overflow-tooltip="true" />
</el-table>
</div>
<div class="pal">
<pagination v-show="totalQmxx > 0" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
<!-- 1:流程3编辑5人员7修改9补充说明 -->
<el-button type="primary" @click="exportExcel(-1)">{{ $t('page.business.study.studyFormApply.dcqbjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(1)">{{ $t('page.business.study.studyFormApply.dclcjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(3)">{{ $t('page.business.study.studyFormApply.dcbjjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(7)">{{ $t('page.business.study.studyFormApply.dcxgjcgj') }}
</el-button>
<el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormApply.dcbhsjgj') }}
</el-button>
<div class="edit-content">
<div class="detail-content" style="width: 100%; height: 100%;">
<vue-html2pdf :show-layout="true" pdf-content-width="100%" :pdf-format="form.templatePdfSize" :pdf-quality="2"
:float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="0" :enable-download="true"
:preview-modal="false" :filename="form.bdmc" @beforeDownload="addDynamicWatermark" ref="html2Pdf"
@progress="onProgress">
<section slot="pdf-content">
<div class="pdf-content">
<TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="detail" />
<div v-if="showExport" style="width: 100%; padding: 0px 30px ;">
<div class="content-title" style="margin-bottom: 10px;">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormApply.qmxx') }}</div>
</div>
<table class="datatable">
<thead>
<tr>
<th style="width: 20%;">{{ $t('page.business.study.studyFormApply.qmr') }}</th>
<th style="width: 20%;">{{ $t('page.business.study.studyFormApply.qmyy') }}</th>
<th style="width: 20%;">{{ $t('page.business.study.studyFormApply.qmsj') }}</th>
<th style="width: 40%;">{{ $t('page.business.study.studyFormApply.bzyy') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in qmxxExportList" :key="index">
<td>{{ item.qmrMc }}</td>
<td>{{ $i18n.locale === 'zh_CN' ? item.qmyy : item.qmyyEn }}</td>
<td>{{ item.createTime }}</td>
<td>{{ item.remark }}</td>
</tr>
</tbody>
</table>
<div class="content-title" style="margin-top: 10px;" v-show="jcgjlxExport != 999">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormApply.jcgj') }}</div>
</div>
<JcgjList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
</div>
</div>
<div v-if="showExport" id="watermark-overlay" ref="watermarkContainer" :style="{
'--watermark-text': `'${watermarkText}'`,
'--watermark-opacity': opacity,
'--watermark-size': '14px',
'--watermark-color': 'red'
}"></div>
</section>
</vue-html2pdf>
<div style="padding: 0px 20px 0px 30px;margin-left: 10px;">
<div class="content-title">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormApply.qmxx') }}</div>
</div>
<div class="pal">
<el-table :data="qmxxList" v-loading="loadingQmxx" style="width: 100%;">
<el-table-column :label="$t('page.business.study.studyFormApply.qmr')" align="center" prop="qmrMc" />
<el-table-column :label="$t('page.business.study.studyFormApply.qmyy')" align="center"
:prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" />
<el-table-column :label="$t('page.business.study.studyFormApply.qmsj')" align="center"
prop="createTime" />
<el-table-column :label="$t('page.business.study.studyFormApply.bzyy')" align="center" prop="remark" />
</el-table>
</div>
<pagination v small layout="prev, pager, next" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
:limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" /> :limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" />
<div class="content-title" style="margin-top: 10px;">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormApply.jcgj') }}</div>
</div>
<JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
<pagination v small layout="prev, pager, next" :total="jcgjTotal" @pagination="getJjcgjList" />
</div> </div>
<div class="content-title">
<div class="line"></div>
<div class="subtitle"> {{ $t('page.business.study.studyFormApply.jcgj') }}</div>
</div>
<JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
<pagination v-show="jcgjTotal > 0" small layout="prev, pager, next" :total="jcgjTotal"
@pagination="getJjcgjList" />
</div> </div>
</div> </div>
</div> </div>
@ -97,8 +134,7 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item :label="$t('form.password')" prop="qmrmm"> <el-form-item :label="$t('form.password')" prop="qmrmm">
<div class="sbzdtcma"> <input type="text"></div>
<el-input type="password" show-password v-model="formApprove.qmrmm" maxlength="20"
<el-input type="password" show-password v-model="formApprove.qmrmm" maxlength="20"
:placeholder="$t('form.placeholderInput')" /> :placeholder="$t('form.placeholderInput')" />
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -113,18 +149,22 @@
</template> </template>
<script> <script>
import { studyFormApply_tb, studyFormApply_info, studyFormApply_jcgj, studyFormApply_qmxx, studyFormApply_exportDetail } from "@/api/business/study/studyFormApply"
import { studyFormApply_jcgjqmxxList, studyFormApply_tb, studyFormApply_info, studyFormApply_jcgj, studyFormApply_qmxx, studyFormApply_exportDetail } from "@/api/business/study/studyFormApply"
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import JcgjList from "@/views/business/comps/common/JcgjList"; import JcgjList from "@/views/business/comps/common/JcgjList";
import TemplateTable from '@/views/business/comps/template/TemplateTable'; import TemplateTable from '@/views/business/comps/template/TemplateTable';
import moment from "moment";
import VueHtml2pdf from 'vue-html2pdf'
export default { export default {
name: "Xq", name: "Xq",
components: { JcgjList, TemplateTable },
components: { JcgjList, TemplateTable, VueHtml2pdf },
data() { data() {
return { return {
watermarkText:'',
opacity: 0.8,
watermarkOpacity: 0.8,
watermarkSize: 40,
openApprove: false, openApprove: false,
open: false,
formApprove: { formApprove: {
id: null, id: null,
qmyy: this.$t('page.business.study.studyFormApply.cjjl'), qmyy: this.$t('page.business.study.studyFormApply.cjjl'),
@ -168,7 +208,11 @@ export default {
pageNum: 1, pageNum: 1,
formId: null, formId: null,
pageSize: 5, pageSize: 5,
}
},
showExport: false,
qmxxExportList: [],
jcgjExportList: [],
jcgjlxExport: 0
} }
}, },
computed: { computed: {
@ -179,11 +223,122 @@ export default {
created() { created() {
}, },
methods: { methods: {
updateWatermark() {
//
const text = this.nickName +' '+ moment().format("YYYY-MM-DD HH:mm:ss");
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// canvas
canvas.width = 300;
canvas.height = 300;
//
ctx.fillStyle = `rgba(255, 0, 0, ${this.opacity})`;
ctx.font = '12px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 45
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(-45 * Math.PI / 180);
ctx.fillText(text, 0, 0);
//
const container = this.$refs.watermarkContainer;
container.style.backgroundImage = `url(${canvas.toDataURL()})`;
container.style.backgroundRepeat = 'repeat';
},
onProgress(progress) {
console.log(`生成进度: ${progress}%`)
this.removePageBreak()
if (progress == 100) {
this.showExport = false
this.$modal.closeLoading()
}
},
exportExcel(jcgjlx) { exportExcel(jcgjlx) {
this.$modal.loading() this.$modal.loading()
this.jcgjlxExport = jcgjlx
this.showExport = true
studyFormApply_jcgjqmxxList({ jcgjlx: jcgjlx, id: this.form.id }).then(response => {
this.jcgjExportList = response.data.jcgj
this.qmxxExportList = response.data.qmxx
this.updateWatermark()
this.$refs.jcgjExportList.init(this.jcgjExportList)
setTimeout(() => {
this.$refs.html2Pdf.generatePdf()
}, 200);
})
},
//
async addDynamicWatermark({ pdfContent }) {
return new Promise((resolve) => {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
//
const rect = this.$refs.contentArea.getBoundingClientRect()
canvas.width = rect.width
canvas.height = rect.height
//
ctx.fillStyle = `rgba(100, 100, 100, ${this.watermarkOpacity})`
ctx.font = `${this.watermarkSize}px Arial`
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
//
const stepX = 300
const stepY = 200
//
ctx.save()
ctx.translate(canvas.width / 2, canvas.height / 2)
ctx.rotate(-Math.PI / 4) // 45
for (let x = -canvas.width; x < canvas.width * 2; x += stepX) {
for (let y = -canvas.height; y < canvas.height * 2; y += stepY) {
//
const dynamicText = `${this.watermarkText} - ${this.getCurrentTime()}`
ctx.fillText(dynamicText, x, y)
}
}
ctx.restore()
//
const watermarkLayer = document.createElement('div')
watermarkLayer.className = 'watermark-layer'
watermarkLayer.style.cssText = `
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background-image: url(${canvas.toDataURL('image/png')});
background-repeat: repeat;
z-index: 9999;
`
//
this.$refs.contentArea.style.position = 'relative'
this.$refs.contentArea.appendChild(watermarkLayer)
//
setTimeout(() => resolve(), 100)
})
},
//
removePageBreak() {
document.querySelectorAll('.html2pdf__page-break').forEach(el => {
el.remove()
})
},
exportExcel_bak(jcgjlx) {
this.$modal.loading()
studyFormApply_exportDetail(_.merge({}, this.queryParamsJcgj, { jcgjlx: jcgjlx, lang: this.$store.getters.language.split("_")[0] })).then(response => { studyFormApply_exportDetail(_.merge({}, this.queryParamsJcgj, { jcgjlx: jcgjlx, lang: this.$store.getters.language.split("_")[0] })).then(response => {
window.open(process.env.VUE_APP_FILE_DOMAIN + response.msg) window.open(process.env.VUE_APP_FILE_DOMAIN + response.msg)
this.$modal.closeLoading()
}).finally(() => { }).finally(() => {
this.$modal.closeLoading() this.$modal.closeLoading()
}) })
@ -194,7 +349,6 @@ export default {
this.jcgjList = response.rows this.jcgjList = response.rows
this.jcgjTotal = response.total this.jcgjTotal = response.total
this.$refs.jcgjList.init(this.jcgjList) this.$refs.jcgjList.init(this.jcgjList)
this.$modal.closeLoading()
}).finally(() => { }).finally(() => {
this.$modal.closeLoading() this.$modal.closeLoading()
}) })
@ -256,3 +410,146 @@ export default {
} }
} }
</script> </script>
<style scoped>
.content-title {
width: 100%;
background: #f9f9ff;
font-size: 0.96rem;
font-weight: bold;
padding-left: 10px;
height: 40px;
line-height: 40px;
display: flex;
justify-content: flex-start;
text-align: left;
}
.line {
width: 2px;
float: left;
height: 16px;
margin-top: 12px;
margin-right: 8px;
border-left: #3178ff 3px solid;
}
.subtitle {
height: 40px;
line-height: 40px;
color: #464647 !important;
}
.pdf-content {
padding: 20px;
font-family: Arial, sans-serif;
}
#watermark-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.6;
font-size: 12px;
pointer-events: none;
z-index: 10;
color: red;
}
.pdf-content h1 {
color: #333;
border-bottom: 2px solid #4CAF50;
padding-bottom: 10px;
}
.pdf-content table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.pdf-content th,
.pdf-content td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.pdf-content th {
background-color: #f2f2f2;
}
.datatable {
border-collapse: collapse;
width: 100%;
}
.upload-file-list .el-upload-list__item {
margin-bottom: 0px !important;
}
.datatable thead {
border-left: 1px solid #d0d0d0;
}
.datatable th {
padding: 5px 5px 4px 5px;
max-width: 200px;
line-height: 35px;
text-align: center;
color: #414753;
background: #F5F7FA;
border: 1px solid #d0d0d0;
}
.el-dialog__body {
padding: 10px 20px !important;
}
.datatable th.operate {
padding: 5px 5px 4px 5px;
width: 100px;
line-height: 35px;
background: #F5F7FA;
border: 1px solid #d0d0d0;
text-align: center;
}
.datatable .rowAlt td,
.datatable tbody tr:nth-child(2n) td {
background: #F5F7FA;
}
.datatable td {
border: solid 1px #d0d0d0;
padding: 3px 5px 4px 5px;
max-width: 100px;
color: #414753;
line-height: 35px;
text-align: center;
}
.html2pdf__page-break {
display: none !important;
}
.content {
position: relative;
z-index: 1;
}
.controls {
margin-bottom: 20px;
padding: 10px;
background: #f5f5f5;
}
input {
margin: 0 10px;
padding: 8px;
}
</style>

+ 5
- 5
src/views/business/study/comp/ytbd/Bj.vue View File

@ -166,11 +166,11 @@ export default {
message: this.$t('form.placeholderSelect'), message: this.$t('form.placeholderSelect'),
trigger: 'blur' trigger: 'blur'
}], }],
shryId: [{
required: true,
message: ' ',
trigger: 'blur'
}]
// shryId: [{
// required: true,
// message: ' ',
// trigger: 'blur'
// }]
}, },
rules: { rules: {
bdmc: [{ bdmc: [{

Loading…
Cancel
Save