taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

知识库图片预览,自定义瓦片渲染

Browse Source
This commit is contained in:
Teo
2025-07-02 10:45:48 +08:00
parent 1f1a82aae0
commit 64b04286e3
7 changed files with 75 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/safety/knowledgeDocument/component/documentsDeails.vue
View File

@ -13,6 +13,8 @@
</template>
<script lang="ts">
import { setMove } from '@/utils/moveDiv';
declare const CXO_API: any;
export default defineComponent({
name: 'index',
setup(props, { emit }) {
@ -68,10 +70,6 @@ export default defineComponent({
};
const init = (obj) => {
let documentKey = obj.id.toString() + new Date().getTime();
let baseURL = import.meta.env.VITE_APP_BASE_API + '/';
console.log(baseURL);
let url = baseURL + obj.filePath.replaceAll('+', ' ');
console.log('🚀 ~ init ~ url:', obj.fileUrl);
let type = obj.fileSuffix;
if (obj.fileSuffix.includes('.')) {
@ -83,8 +81,6 @@ export default defineComponent({
} else if (type == 'ppt' || type == 'pptx') {
documentType = 'slide'; //演示文档文件
}
console.log(documentType, obj.fileSuffix);
new CXO_API.CXEditor('box_app', {
document: {
fileType: type,
@ -130,7 +126,7 @@ export default defineComponent({
}
});
</script>
<style lang="scss">
<style lang="scss" scoped>
.document_detail {
position: fixed;
top: 50%;

6
src/views/safety/knowledgeDocument/component/documentsEdit.vue
View File

@ -16,6 +16,10 @@ import { toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentIns
import { setMove } from '@/utils/moveDiv';
import { useUserStoreHook } from '@/store/modules/user';
// Ensure CXO_API is available globally or import it if it's a module
// Example for global usage (e.g., included via script tag in index.html):
declare const CXO_API: any;
export default defineComponent({
name: 'index',
setup(props, { emit }) {
@ -134,7 +138,7 @@ export default defineComponent({
}
});
</script>
<style lang="scss">
<style lang="scss" scoped>
.document_detail_eidt {
position: fixed;
top: 50%;

114
src/views/safety/knowledgeDocument/index.vue
View File

@ -78,16 +78,6 @@
>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-button type="primary" v-auth="'/zm/api/v1/system/documentData/add'" :disabled="!parentPid" @click="uploadFile(2)"
><el-icon><Plus /></el-icon>导入本地文件</el-button
>
</el-col> -->
<!-- <el-col :span="4">
<el-button type="primary" @click="onMoveFile"
><el-icon><Plus /></el-icon>移动</el-button
>
</el-col> -->
</el-row>
</el-form>
</div>
@ -99,13 +89,13 @@
<el-table-column label="上传时间" align="center" prop="createTime"> </el-table-column>
<el-table-column label="操作" align="center" width="300">
<template #default="scope">
<el-button type="primary" link @click="handleView(scope.row)" v-if="state.acceptType.includes(scope.row.fileSuffix)"
<el-button type="primary" link @click="handleView(scope.row)" v-if="acceptType.includes(scope.row.fileSuffix)"
><el-icon><View /></el-icon>查看</el-button
>
<el-button
type="primary"
v-auth="'/zm/api/v1/system/documentData/complaintBoxAdd'"
v-if="state.acceptType.includes(scope.row.fileSuffix)"
v-if="state.wordType.includes(scope.row.fileSuffix)"
link
@click="updataView(scope.row)"
><el-icon><EditPen /></el-icon>修改文件</el-button
@ -132,14 +122,6 @@
</div>
<documentsDeailsVue ref="documentDetailRef" v-if="state.showDocumentDetail" @onClose="onClose"></documentsDeailsVue>
<documentsEdit ref="documentDataEditRef" v-if="state.showdocumentDataEdit" @onClose="onCloseEdit"></documentsEdit>
<!--<uploadFileder
ref="uploadFilederRef"
v-if="state.showUploadFileder"
@onCloseFile="state.showUploadFileder = false"
@getDocumentListFileType="getdocumentDataListFileType"
></uploadFileder>
<fileOnline ref="fileOnlineRef" @getfileOnlineType="getfileOnlineType"></fileOnline>
<moveFile ref="moveFileRef"></moveFile> -->
<bookFile ref="bookFileRef" @onExportView="onExportView" @onBook="handleView" @onExport="onExport"></bookFile>
<el-dialog title="上传文件" v-model="uploadFileder" width="30%">
<file-upload v-model="state.paramsQuery.file"></file-upload>
@ -156,32 +138,28 @@
<RecyclingStation ref="recylingRef"></RecyclingStation>
</el-tab-pane>
</el-tabs>
<el-image-viewer
ref="imageRef"
style="width: 100%; height: 100%"
:url-list="[imgUrl]"
v-if="imgUrl"
show-progress
fit="cover"
@close="imgUrl = ''"
/>
</template>
<script setup name="KnowledgeDocument" lang="ts">
import {
listKnowledgeDocument,
getKnowledgeDocument,
delKnowledgeDocument,
addKnowledgeDocument,
getUniFolderDownloadList,
treeStructureData,
documentDataEdit,
getProfileDetail,
updateKnowledgeDocument
documentDataEdit
} from '@/api/safety/knowledgeDocument';
import { KnowledgeDocumentVO, KnowledgeDocumentQuery, KnowledgeDocumentForm } from '@/api/quality/knowledgeDocument/types';
type KnowledgeDocumentOption = {
id: number;
fileName: string;
children?: KnowledgeDocumentOption[];
};
import documentsEdit from './component/documentsEdit.vue';
// import profileData from '/@/views/OnlineEngineering/profileData/index.vue';
// import uploadFileder from '/@/views/OnlineEngineering/comm/uploadFileder/index.vue';
// import fileOnline from '/@/views/OnlineEngineering/profileEngineering/fileOnline/index.vue';
// import moveFile from '/@/views/OnlineEngineering/profileEngineering/moveFile/index.vue';
import documentsDeailsVue from './component/documentsDeails.vue';
import RecyclingStation from './component/recyclingStation.vue';
@ -203,16 +181,15 @@ const uploadParams = computed(() => {
};
});
const imgUrl = ref<string>('');
const filterText = ref('');
const treeRef = ref();
const documentDetailRef = ref();
const documentDataEditRef = ref();
const uploadFileder = ref(false);
const fileOnlineRef = ref();
const moveFileRef = ref();
const imageRef = ref();
const recylingRef = ref();
const bookFileRef = ref();
const baseURL: string | undefined | boolean = import.meta.env.VITE_API_URL;
const state = reactive({
treeList: [] as any,
arrayList: [] as any,
@ -243,46 +220,20 @@ const state = reactive({
parentName: '',
selectedNodeId: null,
projectId: currentProject.value?.id || '',
acceptType: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'],
imgType: ['jpg', 'png', 'jpeg', 'gif', 'svg'],
wordType: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'],
browserViewableType: ['html', 'htm', 'txt', 'log', 'md', 'json', 'xml', 'css', 'js'],
draggableCheck: true,
activeName: ''
});
const acceptType = computed(() => [...state.imgType, ...state.wordType, ...state.browserViewableType]);
watch(filterText, (val: any) => {
treeRef.value!.filter(val);
});
// 新建文件夹
// const addFile = () => {
// let tip = '在根目录下新建文件夹';
// if (state.parentPid) {
// tip = '在“' + state.parentName + '文件夹”下新建文件夹';
// }
// ElMessageBox.prompt('请输入文件夹名称', tip, {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// inputErrorMessage: '请输入文件夹名称',
// inputValue: ''
// })
// .then(({ value }) => {
// documentDataNewFolder({ fileName: value, pid: state.parentPid, fileType: 3, projectId: state.projectId }).then((res: any) => {
// if (res.code == 0) {
// ElMessage({
// type: 'success',
// message: '添加成功'
// });
// gettreeStructureData();
// } else {
// ElMessage({
// type: 'error',
// message: res.message
// });
// }
// });
// })
// .catch(() => {});
// };
// 上传文件
const uploadFile = (files: any[]) => {
proxy.$modal.success('上传成功');
@ -297,7 +248,6 @@ const subMitUpload = () => {
ElMessage.warning('请选择文件！');
return;
}
addKnowledgeDocument(state.paramsQuery, { projectId: state.projectId, pid: state.parentPid }).then((res: any) => {
if (res.code == 200) {
ElMessage.success('上传成功');
@ -417,10 +367,17 @@ const updateName = (row) => {
editName(row, '请输入文件名称', 1);
};
const handleView = (row) => {
state.showDocumentDetail = true;
nextTick(() => {
documentDetailRef.value.openDialog(row);
});
if (state.imgType.includes(row.fileSuffix)) {
imgUrl.value = row.fileUrl;
return;
} else if (state.wordType.includes(row.fileSuffix)) {
state.showDocumentDetail = true;
nextTick(() => {
documentDetailRef.value.openDialog(row);
});
} else {
window.open(row.fileUrl);
}
};
// 关闭在线编辑弹框
const onClose = () => {
@ -492,15 +449,6 @@ const onExport = () => {
}
});
};
// 在线模板文件导入
const uploadOnlineFile = (node, data) => {
state.paramsQuery.folderId = data.folderId;
fileOnlineRef.value.openDialog(data.id);
};
const onMoveFile = () => {
// 移动文件
// moveFileRef.value.openDialog();
};
// 查看所有资料
const onBook = () => {