| @ -1,252 +0,0 @@ | |||
| <template> | |||
| <!-- 详情 --> | |||
| <div> | |||
| <div class="detail-container"> | |||
| <div ref="content"> | |||
| <div class="detail-title"><img src="@/assets/images/detail-title.png">{{ $t('page.business.resource.gsp.gspxq') | |||
| }}<img src="@/assets/images/detail-title.png" /></div> | |||
| <div class="detail-content"> | |||
| <div style="width: 100%;"> | |||
| <!-- 基本信息 --> | |||
| <div class="content-title"> | |||
| <div class="line"></div> | |||
| <div class="subtitle"> {{ $t('page.business.resource.gsp.mc') }}</div> | |||
| </div> | |||
| <div class="pal"> | |||
| <div class="left"> | |||
| <div class="left-title">{{ $t('page.business.resource.gsp.mc') }}</div> | |||
| <el-input type="text" :value="form.mc" maxlength="50" disabled /> | |||
| </div> | |||
| <div class="right"> | |||
| <div class="right-title">{{ $t('page.business.resource.gsp.bh') }}</div> | |||
| <el-input type="text" :value="form.bh" maxlength="50" disabled /> | |||
| </div> | |||
| </div> | |||
| <div class="pal"> | |||
| <div class="left"> | |||
| <div class="left-title">{{ $t('page.business.resource.gsp.ph') }}</div> | |||
| <el-input type="text" :value="form.ph" maxlength="50" disabled /> | |||
| </div> | |||
| <div class="right"> | |||
| <div class="right-title">{{ $t('page.business.resource.gsp.gg') }}</div> | |||
| <el-input type="text" :value="form.gg" maxlength="50" disabled> <template slot="append">{{ | |||
| form.ggdw }}</template> </el-input> | |||
| </div> | |||
| </div> | |||
| <div class="pal"> | |||
| <div class="left"> | |||
| <div class="left-title">{{ $t('page.business.resource.gsp.jsrq') }}</div> | |||
| <el-input type="text" :value="form.jsrq" maxlength="50" disabled /> | |||
| </div> | |||
| <div class="right"> | |||
| <div class="right-title">{{ $t('page.business.resource.gsp.kcl') }}</div> | |||
| <el-input type="text" :value="form.kc" maxlength="50" disabled> <template slot="append">{{ | |||
| form.kcdw }}</template> </el-input> | |||
| </div> | |||
| </div> | |||
| <div class="pal"> | |||
| <div class="left"> | |||
| <div class="left-title">{{ $t('page.business.resource.gsp.yxq') }}</div> | |||
| <el-input type="text" :value="form.yxq" maxlength="50" disabled /> | |||
| </div> | |||
| <div class="right"> | |||
| <div class="right-title">{{ $t('page.business.resource.gsp.zjzt') }}</div> | |||
| <el-select v-model="form.zjzt" disabled style="width: 100%;"> | |||
| <el-option key="1" :label="$t('page.business.resource.resource.zjzt.rk')" :value="1" /> | |||
| <el-option key="3" :label="$t('page.business.resource.resource.zjzt.yff')" :value="3" /> | |||
| <el-option key="5" :label="$t('page.business.resource.resource.zjzt.ysd')" :value="5" /> | |||
| <el-option key="7" :label="$t('page.business.resource.resource.zjzt.dgd')" :value="7" /> | |||
| <el-option key="9" :label="$t('page.business.resource.resource.zjzt.gd')" :value="9" /> | |||
| <el-option key="11" :label="$t('page.business.resource.resource.zjzt.djd')" :value="11" /> | |||
| </el-select> | |||
| </div> | |||
| </div> | |||
| <!-- 台账 --> | |||
| <div class="content-title"> | |||
| <div class="line"></div> | |||
| <div class="subtitle"> {{ $t('page.business.resource.gsp.tz') }}</div> | |||
| </div> | |||
| <div class="pal"> | |||
| <el-table :data="tzList" v-loading="loadingTz"> | |||
| <el-table-column :label="$t('page.business.resource.mjy.syr')" align="center" prop="qmrMc" | |||
| :show-overflow-tooltip="true" /> | |||
| <el-table-column :label="$t('page.business.resource.mjy.lqghr')" align="center" | |||
| :show-overflow-tooltip="true"> | |||
| <template slot-scope="scope"> | |||
| {{ scope.row.lqrMc }}{{ scope.row.ghrMc }} | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column :label="$t('page.business.resource.mjy.ffjsr')" align="center" | |||
| :show-overflow-tooltip="true"> | |||
| <template slot-scope="scope"> | |||
| {{ scope.row.ffrMc }}{{ scope.row.jsrMc }} | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column :label="$t('page.business.resource.mjy.czlx')" align="center" prop="qmyy" | |||
| :show-overflow-tooltip="true" /> | |||
| <el-table-column :label="$t('page.business.resource.mjy.czl')" align="center" | |||
| :show-overflow-tooltip="true"> | |||
| <template slot-scope="scope"> | |||
| {{ scope.row.czl }}{{ scope.row.czldw }} | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column :label="$t('page.business.resource.mjy.bzyy')" align="center" prop="remark" | |||
| :show-overflow-tooltip="true" /> | |||
| <el-table-column :label="$t('page.business.resource.mjy.ccsj')" align="center" prop="createTime" | |||
| width="150px" /> | |||
| </el-table> | |||
| </div> | |||
| <!-- 稽查轨迹 --> | |||
| <div class="content-title"> | |||
| <div class="line"></div> | |||
| <div class="subtitle"> {{ $t('page.business.resource.gsp.jcgj') }}</div> | |||
| </div> | |||
| <div> | |||
| <div v-for="(item, index) in jcgjList" :key="index"> | |||
| <div> | |||
| <span>{{ $i18n.locale === 'zh_CN' ? item.jcmc : item.jcmcEn }},</span> | |||
| <span class="jcglList-jcnr"> | |||
| <template v-if="$i18n.locale === 'zh_CN'"> | |||
| <span v-for="(pitem, pindex) in item.jcnrList" :key="pindex"> | |||
| {{ pitem.name }}:{{ pitem.value }}, | |||
| </span> | |||
| </template> | |||
| <template v-else> | |||
| <span v-for="(pitem, pindex) in item.jcnrListEn" :key="pindex"> | |||
| {{ pitem.name }}:{{ pitem.value }}, | |||
| </span> | |||
| </template> | |||
| <span v-if="item.remark && item.remark !== ''"> | |||
| {{ $t('form.remark') }}:{{ item.remark }}, | |||
| </span> | |||
| <span v-if="item.qmrId && item.qmrId > 0"> | |||
| {{ $t('form.qmyy') }}:{{ $i18n.locale === 'zh_CN' ? item.jcmc : item.jcmcEn }}, | |||
| </span> | |||
| <span v-if="item.qmrId && item.qmrId > 0"> | |||
| <!-- {{$t('form.signer')}}:{{ $i18n.locale === 'zh_CN'?item.qmrMc:item.qmrMcEn }} --> | |||
| {{ $t('form.signer') }}:{{ item.qmrMc }}, | |||
| </span> | |||
| <span>{{ $t('form.signTime') }}:{{ item.createTime }}</span> | |||
| </span> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import { info, tzList, jcgjList } from "@/api/business/gsp/gsp" | |||
| import JcgjList from "@/views/business/comps/common/JcgjList"; | |||
| import html2canvas from 'html2canvas'; | |||
| import jsPDF from 'jspdf' | |||
| export default { | |||
| name: "XqExport", | |||
| components: { JcgjList }, | |||
| data() { | |||
| return { | |||
| form: {}, | |||
| tzList: [], | |||
| totalTz: 0, | |||
| loadingTz: true, | |||
| open: false, | |||
| queryParamstZ: { | |||
| mjyId: null, | |||
| pageNum: 1, | |||
| pageSize: 9999999 | |||
| }, | |||
| jcgjTotal: 0, | |||
| jcgjList: [], | |||
| queryJcgjParams: { | |||
| pageNum: 1, | |||
| mjyId: null, | |||
| pageSize: 9999999, | |||
| } | |||
| } | |||
| }, | |||
| created() { | |||
| }, | |||
| methods: { | |||
| async exportPDF() { | |||
| this.$modal.loading() | |||
| const element = this.$refs.content | |||
| const canvas = await html2canvas(element, { | |||
| scale: 2, // 提高清晰度 | |||
| useCORS: true, // 允许跨域图片 | |||
| backgroundColor: '#ffffff' | |||
| }) | |||
| const imgData = canvas.toDataURL('image/png') | |||
| const pdf = new jsPDF('p', 'mm', 'a4') // A4纸,纵向 | |||
| const imgWidth = 210 // A4纸宽度 | |||
| const pageHeight = 295 // A4纸高度 | |||
| const imgHeight = (canvas.height * imgWidth) / canvas.width | |||
| let heightLeft = imgHeight | |||
| let position = 0 | |||
| // 第一页 | |||
| pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight) | |||
| heightLeft -= pageHeight | |||
| // 多页处理 | |||
| while (heightLeft > 0) { | |||
| position = heightLeft - imgHeight | |||
| pdf.addPage() | |||
| pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight) | |||
| heightLeft -= pageHeight | |||
| } | |||
| pdf.save('document.pdf') | |||
| this.$modal.closeLoading() | |||
| }, | |||
| exportExcel() { | |||
| alert('todo') | |||
| }, | |||
| jcgjListHandleQuery(val) { | |||
| this.$modal.loading() | |||
| jcgjList(_.merge({}, this.queryJcgjParams, val)).then(response => { | |||
| this.jcgjList = response.rows | |||
| this.jcgjTotal = response.total | |||
| this.$modal.closeLoading() | |||
| }) | |||
| }, | |||
| getJjcgjList() { | |||
| jcgjList(this.queryJcgjParams).then(response => { | |||
| this.jcgjList = response.rows | |||
| this.jcgjTotal = response.total | |||
| this.$modal.closeLoading() | |||
| }) | |||
| }, | |||
| cancel() { | |||
| this.open = false | |||
| this.$emit('callback') | |||
| }, | |||
| getTzList() { | |||
| this.loadingTz = true | |||
| tzList(this.queryParamstZ).then(response => { | |||
| this.tzList = response.rows | |||
| this.totalTz = response.total | |||
| this.loadingTz = false | |||
| this.getJjcgjList() | |||
| }) | |||
| }, | |||
| show(row) { | |||
| this.$modal.loading() | |||
| this.queryParamstZ.gspId = row.id | |||
| this.queryJcgjParams.gspId = row.id | |||
| info({ id: row.id }).then(response => { | |||
| this.form = response.data | |||
| this.getTzList() | |||
| this.open = true | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| </script> | |||