做网站软件wd,规划设计公司网站,网站降权怎么做,查网站开发语言上传html文件
解决思路#xff1a;新建一个上传组件#xff0c;将它挪到页面之外。当点击文字时#xff0c;手动触发上传组件#xff0c;打开上传文件框。
templateBasicTable registerregisterTabletemplate #bodyCell{ column, …上传html文件
解决思路新建一个上传组件将它挪到页面之外。当点击文字时手动触发上传组件打开上传文件框。
templateBasicTable registerregisterTabletemplate #bodyCell{ column, record }template v-ifcolumn.key actionTableAction :actions[{label: 上传,onClick: handleUploadClick.bind(null, record),},{label: 上传记录,onClick: handleCheck.bind(null, record),}] //template/template/BasicTable!-- 页面外的上传组件点击文字后触发 --a-upload refuploadDom :show-upload-listfalse :customRequesthandleUpload classrecord-uploadera-button typeprimary上传已填写的模板/a-button/a-upload
/templatescript langtsimport { 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 refstring | number(1);const uploadDom ref(null)// 手动触发上传function handleUploadClick(record: any) {tabActiveKey.value record.iduploadDom.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.idtitle.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文件。
templatedivBasicModal v-bind$attrs registerregisterModal :titletitle okText确定 cancelText取消:canFullscreenfalse :footernull visible-changehandleVisibleChange okhandleOkwrapClassNamerecordModalWrap :useWrapperfalse :width630 :top19BasicTable registerregisterRecordTabletemplate #bodyCell{ column, record }template v-ifcolumn.key actionTableAction :actions[{label: 查看,onClick: handleCheck.bind(null, record),},] //template/template/BasicTable/BasicModal/div
/templatescript langts
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,};},
});
/scriptstyle scoped langless
: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
