|
|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog v-model="isDialog" :show-close="false" width="900" destroy-on-close>
|
|
|
|
|
<el-dialog v-model="isDialog" :show-close="false" width="900" append-to-body destroy-on-close>
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="custom-header flex">
|
|
|
|
|
<span>选择{{ title }}</span>
|
|
|
|
|
@ -15,8 +15,10 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-list">
|
|
|
|
|
<ul>
|
|
|
|
|
<li v-for="(item, index) in fileList" :class="activeIndex == index ? 'li-active' : ''" @click="clickItem(index, item)">
|
|
|
|
|
<li v-for="(item, index) in fileList" :class="activeIndex == index ? 'li-active' : ''"
|
|
|
|
|
@click="clickItem(index, item)">
|
|
|
|
|
<el-image class="img" :src="url" />
|
|
|
|
|
<el-button type="primary" class="prev-btn" @click.stop="onPrevItem(item)">预览</el-button>
|
|
|
|
|
<el-text truncated>{{ item.fileName }}</el-text>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
@ -24,8 +26,8 @@
|
|
|
|
|
</div>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="dialog-footer">
|
|
|
|
|
<el-upload class="upload-demo" :action="uploadFileUrl" :limit="1" :show-file-list="false"
|
|
|
|
|
:headers="headers" :on-success="onSuccess">
|
|
|
|
|
<el-upload class="upload-demo" :action="uploadFileUrl" :limit="1" :show-file-list="false" :headers="headers"
|
|
|
|
|
:on-success="onSuccess">
|
|
|
|
|
<el-button type="primary">上传</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
<div>
|
|
|
|
|
@ -37,6 +39,31 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<el-dialog v-model="prevVisible" fullscreen :show-close="false" class="prev-dialog">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="custom-header flex">
|
|
|
|
|
<span>预览</span>
|
|
|
|
|
<i class="iconfont icon-guanbi" @click="prevVisible = false"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div style="height: calc(100vh - 120px);">
|
|
|
|
|
<template v-if="getFileSuffix(prevItem.fileUrl) == 'pdf'">
|
|
|
|
|
<iframe :src="prevItem.fileUrl"
|
|
|
|
|
frameborder="0" width="100%" height="100%"></iframe>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<el-image :src="prevItem.fileUrl" style="height:100%"/>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="dialog-footer">
|
|
|
|
|
<div></div>
|
|
|
|
|
<el-button type="primary" @click="prevVisible = false">
|
|
|
|
|
关闭
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
@ -47,6 +74,7 @@ import { sessionStore } from '@/utils/store'
|
|
|
|
|
import { dataSetJson } from '@/utils/comm.js'
|
|
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
|
import useUserStore from '@/store/modules/user'
|
|
|
|
|
import { getFileSuffix } from '@/utils/ruoyi.js'
|
|
|
|
|
import emitter from '@/utils/mitt';
|
|
|
|
|
|
|
|
|
|
const userInfo = useUserStore().user
|
|
|
|
|
@ -56,6 +84,7 @@ const headers = ref({ Authorization: "Bearer " + getToken() });
|
|
|
|
|
const url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F11044b08-04c1-41a0-a453-1fd20b58a614%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1732953359&t=7ab1d1b3a903db85b1149914407aea35'
|
|
|
|
|
|
|
|
|
|
const isDialog = defineModel()
|
|
|
|
|
const prevVisible = ref(false)
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
modeType: {
|
|
|
|
|
@ -99,21 +128,21 @@ const activeIndex = ref(0)
|
|
|
|
|
const dataset_id = ref('')
|
|
|
|
|
|
|
|
|
|
// 上传成功
|
|
|
|
|
const onSuccess = async (response) =>{
|
|
|
|
|
console.log(response,'response')
|
|
|
|
|
const onSuccess = async (response) => {
|
|
|
|
|
console.log(response, 'response')
|
|
|
|
|
let data = {
|
|
|
|
|
url: response.url,
|
|
|
|
|
dataset_id: dataset_id.value
|
|
|
|
|
}
|
|
|
|
|
const res = await completion(data)
|
|
|
|
|
|
|
|
|
|
if(res.data.code != 200) return
|
|
|
|
|
if (res.data.code != 200) return
|
|
|
|
|
let docData = {
|
|
|
|
|
fileUrl: response.url,
|
|
|
|
|
fileId: response.file.id,
|
|
|
|
|
fileName: response.file.fileName,
|
|
|
|
|
filesize: response.file.fileSize,
|
|
|
|
|
datasetId: dataset_id.value,
|
|
|
|
|
datasetId: dataset_id.value,
|
|
|
|
|
docId: res.data.document_id,
|
|
|
|
|
edustage: curNode.edustage,
|
|
|
|
|
edusubject: curNode.edusubject
|
|
|
|
|
@ -127,25 +156,32 @@ const curNode = reactive({})
|
|
|
|
|
|
|
|
|
|
const fileList = ref([])
|
|
|
|
|
const curFile = reactive({})
|
|
|
|
|
const getList = () =>{
|
|
|
|
|
const getList = () => {
|
|
|
|
|
docList({
|
|
|
|
|
userId: userInfo.userId,
|
|
|
|
|
dataset_id: dataset_id.value
|
|
|
|
|
}).then( res =>{
|
|
|
|
|
dataset_id: dataset_id.value
|
|
|
|
|
}).then(res => {
|
|
|
|
|
fileList.value = [...res.rows]
|
|
|
|
|
Object.assign(curFile, fileList.value[0])
|
|
|
|
|
Object.assign(curFile, fileList.value[0])
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const clickItem = (index, item) => {
|
|
|
|
|
activeIndex.value = index
|
|
|
|
|
Object.assign(curFile, item)
|
|
|
|
|
emitter.emit('curFile',item)
|
|
|
|
|
Object.assign(curFile, item)
|
|
|
|
|
emitter.emit('curFile', item)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const prevItem = reactive({})
|
|
|
|
|
const onPrevItem = (item) => {
|
|
|
|
|
console.log(item)
|
|
|
|
|
Object.assign(prevItem, item)
|
|
|
|
|
prevVisible.value = true
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() =>{
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
let data = sessionStore.get('subject.curNode')
|
|
|
|
|
Object.assign(curNode, data);
|
|
|
|
|
|
|
|
|
|
@ -155,7 +191,6 @@ onMounted(() =>{
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.custom-header {
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
@ -192,6 +227,8 @@ onMounted(() =>{
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
@ -203,6 +240,10 @@ onMounted(() =>{
|
|
|
|
|
&:hover {
|
|
|
|
|
background: #E0EAFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover .prev-btn {
|
|
|
|
|
transform: translate(-50%, -50%)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.li-active {
|
|
|
|
|
@ -212,9 +253,20 @@ onMounted(() =>{
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.dialog-footer{
|
|
|
|
|
|
|
|
|
|
.dialog-footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.prev-btn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%) translateY(-110px);
|
|
|
|
|
/* 按钮初始位置在容器外 */
|
|
|
|
|
transition: transform 0.3s ease-in-out;
|
|
|
|
|
/* 设置过渡效果 */
|
|
|
|
|
}
|
|
|
|
|
</style>
|
lyc