| @ -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> | |||||