<template> <a-card :bordered="false"> <!-- 查询区域 --> <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> <a-col :md="6" :sm="8"> <a-form-item label="收据名称"> <j-input placeholder="请输入收据名称" v-model="queryParam.templateName"></j-input> </a-form-item> </a-col> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <a-col :md="6" :sm="24"> <a-button type="primary" @click="searchQuery">查询</a-button> <a-button style="margin-left: 8px" @click="searchReset">重置</a-button> </a-col> </span> </a-row> </a-form> </div> <!-- 操作按钮区域 --> <div class="table-operator"> <a-button @click="onHandleAdd" type="primary" icon="plus">新增</a-button> <!-- <a-button type="primary" icon="download" @click="handleExportXls('t_property_settled')">导出</a-button> --> <a-dropdown v-if="selectedRowKeys.length > 0"> <a-menu slot="overlay"> <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item> </a-menu> <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button> </a-dropdown> </div> <!-- table区域-begin --> <div> <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;"> <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项 <a style="margin-left: 24px" v-if="selectedRowKeys.length > 0" @click="onClearSelected">清空</a> </div> <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" class="j-table-force-nowrap" @change="handleTableChange" > <span slot="action" slot-scope="text, record"> <a @click="previewContract(record)">预览</a> <a-divider type="vertical"/> <a-dropdown> <a class="ant-dropdown-link"> 更多 <a-icon type="down"/> </a> <a-menu slot="overlay"> <a-menu-item> <a href="javascript:;" @click="downloadContract(record)">下载</a> </a-menu-item> <a-menu-item> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)" placement="topLeft"> <a>删除</a> </a-popconfirm> </a-menu-item> </a-menu> </a-dropdown> </span> </a-table> </div> <!-- table区域-end --> <div> <vue-html2pdf :show-layout="false" :float-layout="true" :enable-download="true" :preview-modal="false" :html-to-pdf-options="pdfOptions" :paginate-elements-by-height="1400" filename="tempFileName" :pdf-quality="2" :manual-pagination="false" pdf-format="a4" pdf-orientation="landscape" pdf-content-width="98%" ref="html2PdfDownLoad"> <section slot="pdf-content"> <!-- PDF Content Here --> <span id="report1" v-html="contractBindingValue"></span> </section> </vue-html2pdf> <vue-html2pdf :show-layout="false" :float-layout="true" :enable-download="false" :preview-modal="true" :html-to-pdf-options="pdfOptions" :paginate-elements-by-height="1400" filename="tempFileName" :pdf-quality="2" :manual-pagination="false" pdf-format="a4" pdf-orientation="landscape" pdf-content-width="98%" ref="html2PdfPreview"> <section slot="pdf-content"> <!-- PDF Content Here --> <span id="report" v-html="contractBindingValue"></span> </section> </vue-html2pdf> </div> </a-card> </template> <script> import VueHtml2pdf from "vue-html2pdf"; import { JeecgListMixin } from '@/mixins/JeecgListMixin' const columns = [ { title: '收据编号', dataIndex: 'templateCode', key: 'templateCode', align: 'center' }, { title: '收据名称', dataIndex: 'templateName', key: 'templateName', align: 'center' }, { title: '收据类型', dataIndex: 'typeName', key: 'typeName', align: 'center' }, { title: '上传人', dataIndex: 'createBy', key: 'createBy', align: 'center' }, { title: '上传时间', dataIndex: 'createTime', key: 'createTime', align: 'center' }, { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, align: 'center', width: 150 } ] export default { name: 'PermissionListAsync', mixins: [JeecgListMixin], components: { VueHtml2pdf }, data() { return { // 表头 columns: columns, pagination: { total: 0, current: 1, pageSize: 10, showSizeChanger: true }, url: { list: "/property-company/system/receiptTemplate/list", delete: '/property-company/system/receiptTemplate/delete', deleteBatch: '/property-company/system/receiptTemplate/deleteBatch' }, pdfOptions: { margin: [20, 10, 20, 10], filename: "" }, contractBindingValue: "" } }, methods: { onHandleAdd() { this.$router.push({ path: '/charge/templateSettings/add', // params: Object.assign({}, this.$route.params, { // pageNo: val // }), }); }, previewContract(row) { this.contractBindingValue = row.templateStyle.replace( '<p><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="产品列表" data-info="%7B%22id%22%3A%22e%22%7D">@产品列表</span></p>', '' ); this.$refs.html2PdfPreview.generatePdf(); }, downloadContract(row) { this.pdfOptions.filename = row.templateName; this.contractBindingValue = row.templateStyle.replace( '<p><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="产品列表" data-info="%7B%22id%22%3A%22e%22%7D">@产品列表</span></p>', '' ); this.$refs.html2PdfDownLoad.generatePdf(); } } } </script> <style scoped> @import '~@assets/less/common.less'; </style>