上传html文件
解决思路:新建一个上传组件,将它挪到页面之外。当点击文字时,手动触发上传组件,打开上传文件框。
<template>
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction :actions="[
{
label: '上传',
onClick: handleUploadClick.bind(null, record),
},
{
label: '上传记录',
onClick: handleCheck.bind(null, record),
}
]" />
</template>
</template>
</BasicTable>
<!-- 页面外的上传组件,点击文字后触发 -->
<a-upload ref="uploadDom" :show-upload-list="false" :customRequest="handleUpload" class="record-uploader">
<a-button type="primary">上传已填写的模板</a-button>
</a-upload>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, unref, onUpdated } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { message } from 'ant-design-vue';
import { grtBannerList } from "/@/api/b2b/serviceManagement";
import { getBasicColumns } from './index.data';
import { uploadHtml } from '/@/api/b2b/systemSet';
import {
Button,
Upload,
} from 'ant-design-vue';
export default defineComponent({
name: 'agreementSetPage',
components: {
BasicTable,
AButton: Button,
AUpload: Upload,
TableAction,
},
setup() {
const [registerTable, { setShowPagination }] = useTable({
// api: grtBannerList,
dataSource: tableData,
columns: getBasicColumns(),
useSearchForm: false,
tableSetting: {
redo: false,
size: false,
},
showIndexColumn: false,
rowKey: 'id',
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action'
},
});
const tabActiveKey = ref<string | number>('1');
const uploadDom = ref(null)
// 手动触发上传
function handleUploadClick(record: any) {
tabActiveKey.value = record.id
uploadDom.value.$el.querySelector('button').click()
}
// 上传方法
function handleUpload(file) {
if (file.file.type !== "text/html") {
message.warning('请上传html格式的文件')
return
}
let formData = new FormData();
formData.append('file', file.file);
formData.append('type', unref(tabActiveKey));
uploadHtml(formData).then(async (res) => {
message.success('上传成功')
});
}
// 查看上传记录
function handleCheck(record) {
tabActiveKey.value = record.id
title.value = `上传记录(${record.agreementType})`
let data = { id: record.id }
openModalOperateRecord(true, data);
}
return {
registerTable,
registerOperateRecord,
isShow,
handleUploadClick,
handleCheck,
bannerDate,
handleUpload,
tabActiveKey,
uploadDom,
tabActiveKey,
title
};
}
})
</script>
查看html文件
解决思路:将接口返回的html完整文件代码缓存到本地,然后读取本地保存的html数据,使用新窗口打开,就能查看html文件。
<template>
<div>
<BasicModal v-bind="$attrs" @register="registerModal" :title="title" okText="确定" cancelText="取消"
:canFullscreen="false" :footer="null" @visible-change="handleVisibleChange" @ok="handleOk"
wrapClassName="recordModalWrap" :useWrapper="false" :width="630" :top="19">
<BasicTable @register="registerRecordTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction :actions="[
{
label: '查看',
onClick: handleCheck.bind(null, record),
},
]" />
</template>
</template>
</BasicTable>
</BasicModal>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
import { GetOperateRecordPage } from '/@/api/b2b/systemSet';
const recordColumns: BasicColumn[] = [
{
title: '上传时间',
dataIndex: 'createTime',
},
];
export default defineComponent({
name: 'SystemSetOperateRecord',
components: { BasicTable, BasicModal, TableAction },
props: {
tabActiveKey: { type: [String, Number], require: true },
title: { type: String, default: '' }
},
emits: ['success', 'register'],
setup(props, { emit }) {
console.log(666, props);
const modelRef = ref({});
const [registerRecordTable, { reload }] = useTable({
api: GetOperateRecordPage,
columns: recordColumns,
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
striped: false,
rowKey: 'id',
scroll: { y: 330 },
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action'
},
fetchSetting: { listField: 'records', totalField: 'total' },
beforeFetch: (params) => {
let newParams = {
...params,
type: props.tabActiveKey,
};
return newParams;
},
});
const [registerModal] = useModalInner((data) => {
reload()
});
function handleCheck(record: any) {
// 读取本地保存的html数据,使用新窗口打开
window.localStorage.removeItem('callbackHTML');
window.localStorage.setItem('callbackHTML', record.content)
let newWin = window.open('')
newWin.document.write(localStorage.getItem('callbackHTML'))
newWin.document.close() // 关闭输出流
}
function handleVisibleChange(v) { }
async function handleOk() { }
return {
registerModal,
model: modelRef,
handleCheck,
registerRecordTable,
handleVisibleChange,
handleOk,
};
},
});
</script>
<style scoped lang="less">
:deep(.ant-table-wrapper) {
padding: 0px !important;
}
:deep(.ant-spin-container) {
height: 442px;
}
:deep(.scroll-container) {
padding: 0 !important;
}
:deep(.ant-pagination-options-quick-jumper) {
display: none;
}
:deep(.ant-table-body) {
height: 330px !important;
max-height: 696px !important;
}
</style>