<template>
|
<div class="bodyBox2">
|
<div class="bodyDiv2">
|
<div class="topDiv">
|
<el-radio-group v-model="state.radioData" @change="radioChange">
|
<el-radio
|
v-for="item in state.classifyInfoType"
|
:label="item.name"
|
:value="item.id"
|
:key="item.id"
|
size="large"
|
>
|
{{ item.name }}
|
</el-radio>
|
</el-radio-group>
|
</div>
|
<div class="zhanweiDiv">
|
<!-- <div class="btmDiv" v-if="state.fileTypeId != ''"> -->
|
<div class="tableDiv">
|
<el-table
|
:data="state.fileTableListData"
|
style="width: 100%"
|
height="100%"
|
border
|
stripe
|
size="large"
|
:header-cell-style="{
|
textAlign: 'center',
|
backgroundColor: '#fff',
|
color: '#333',
|
}"
|
>
|
<el-table-column
|
align="center"
|
prop="fileName"
|
label="文件名称"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="fileSize"
|
label="文件大小"
|
width="100"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="fileSuffix"
|
label="文件类型"
|
width="100"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="uploadTime"
|
label="上传时间"
|
></el-table-column>
|
<el-table-column align="center" label="操作" width="100">
|
<template #default="scope">
|
<div class="rowBtnDiv">
|
<el-button
|
class="normal-btn"
|
size="small"
|
type="primary"
|
plain
|
text
|
@click="handleFilePreview(scope.row)"
|
>
|
预览
|
</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- </div> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Delete } from '@element-plus/icons-vue'
|
import type { TabsPaneContext, UploadProps, UploadUserFile } from 'element-plus'
|
import {
|
ElNotification,
|
ElMessageBox,
|
UploadInstance,
|
UploadRawFile,
|
genFileId,
|
UploadRequestOptions,
|
} from 'element-plus'
|
import informationBasicInfo from './informationBasicInfo.vue'
|
import versionClassifyService from '@/api/versionClassify' // 能耗费用接口
|
import _ from 'lodash'
|
import screenfull from 'screenfull'
|
import commonApi from '@/api/commonApi'
|
import productService from '@/api/zhongjian/productApi' // 接口文件
|
|
import moment from 'moment' // 接口文件
|
|
const gkjsUrl = ref()
|
const state = reactive<any>({
|
visible: false,
|
title: '',
|
editType: 'add',
|
id: '',
|
//--------------
|
fullscreen: false, // 全屏对话框
|
radioData: '',
|
parentCode: '', // 调取类型
|
classifyInfoType: [],
|
fileId: '', // 文件ID
|
videoId: '', // 文件ID
|
fileTypeId: '', // 传参文件类型
|
fileTableListData: [], // 文件table
|
})
|
|
// 控制弹窗的显示
|
const visibleShowT = (data?: any) => {
|
state.title = data?.typeData == 'file' ? '上传文件' : '上传视频'
|
state.editType = data?.typeData ?? 'file'
|
state.id = data?.id ?? ''
|
|
// 重置
|
state.fileTypeId = ''
|
state.radioData = ''
|
|
if (state.editType == 'file') {
|
// 获取选择数据
|
state.parentCode = 'document_type'
|
} else {
|
// 获取选择数据
|
state.parentCode = 'video_type'
|
}
|
|
// 获取选择数据
|
categoryListUrlFun()
|
|
state.visible = true
|
}
|
|
|
|
// 将子组件的事件触发暴露给父组件
|
const emit = defineEmits([
|
'uploadUpdataFun',
|
'uploadCloseDialog',
|
'openVideoPreview',
|
'openFilePreview',
|
])
|
// 关闭弹窗
|
const closeDialog = () => {
|
emit('uploadUpdataFun')
|
}
|
const handleFilePreview = (file: any) => {
|
if (state.editType == 'file') {
|
emit('openFilePreview', file)
|
} else {
|
emit('openVideoPreview', file)
|
}
|
}
|
// 是否全屏
|
const isFullscreen = ref(false)
|
|
// // 监听变化
|
// const change = () => {
|
// isFullscreen.value = screenfull.isFullscreen;
|
// };
|
//
|
// 切换全屏/窗口
|
const handleFullscreenchange = (show?: any) => {
|
// screenfull.toggle();
|
|
state.fullscreen = !state.fullscreen
|
}
|
|
// ------上传文件
|
const fileList = ref<any[]>([])
|
|
const fileList2 = ref<any[]>([])
|
|
|
|
|
// 获取选择数据
|
const categoryListUrlFun = () => {
|
const searchList = {
|
parentCode: state.parentCode,
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
if(state.editType == 'file'){
|
state.classifyInfoType = [res.data[0]]
|
}else{
|
state.classifyInfoType = [...res.data]
|
}
|
state.fileTypeId = state.classifyInfoType[0].id
|
state.radioData = state.classifyInfoType[0].id
|
radioChange(state.radioData)
|
}
|
})
|
}
|
|
// 单选按钮选择
|
const radioChange = (val?: any) => {
|
// state.classifyInfoType.forEach((item) => {
|
// if (item.name == val) {
|
// state.fileTypeId = val
|
// }
|
// })
|
state.fileTypeId = val
|
// 判断上传类型
|
if (state.editType == 'file') {
|
state.fileId = ''
|
fileList.value = []
|
state.fileTableListData = []
|
// 查询上传文档
|
getDocBySchemeIdUrlFun()
|
} else {
|
state.videoId = ''
|
fileList2.value = []
|
state.fileTableListData = []
|
// 查询上传视频
|
getVideoBySchemeIdFun()
|
}
|
}
|
|
// 保存文件-文档
|
const fileSaveListUrlFun = () => {
|
// if (!state.fileId) {
|
// ElNotification({
|
// type: 'warning',
|
// message: '请上传文件！'
|
// })
|
// return
|
// }
|
// 处理保存时数据
|
const fileIdList = [] as any
|
state.fileTableListData.forEach((item) => fileIdList.push(item.fileId))
|
|
const searchList = {
|
fileId: state.fileId,
|
schemeId: state.id,
|
fileType: state.fileTypeId,
|
fileIdList,
|
}
|
|
productService.fileSaveListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
ElNotification({
|
type: 'success',
|
message: '信息保存成功',
|
})
|
|
}
|
})
|
}
|
|
// 保存文件-视频
|
const videoSaveListUrlFun = () => {
|
// if (!state.videoId) {
|
// ElNotification({
|
// type: 'warning',
|
// message: '请上传视频！'
|
// })
|
// return
|
// }
|
// 处理保存时数据
|
const fileIdList = [] as any
|
state.fileTableListData.forEach((item) => fileIdList.push(item.fileId))
|
|
const searchList = {
|
fileId: state.videoId,
|
schemeId: state.id,
|
fileType: state.fileTypeId,
|
fileIdList,
|
}
|
|
productService.videoSaveListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
ElNotification({
|
type: 'success',
|
message: '信息保存成功',
|
})
|
|
}
|
})
|
}
|
|
|
|
// 查询上传文档
|
const getDocBySchemeIdUrlFun = () => {
|
const searchList = {
|
id: state.id,
|
fileTypeId: state.fileTypeId,
|
}
|
productService.getDocBySchemeIdUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
if (res.data) {
|
state.fileTableListData = res.data
|
} else {
|
state.fileTableListData = []
|
}
|
}
|
})
|
}
|
|
// 查询上传视频
|
const getVideoBySchemeIdFun = () => {
|
const searchList = {
|
id: state.id,
|
fileTypeId: state.fileTypeId,
|
}
|
productService.getVideoBySchemeIdUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
if (res.data) {
|
state.fileTableListData = res.data
|
// state.videoId = res.data.fileId
|
// fileList2.value.push({
|
// name: res.data.fileName,
|
// id: res.data.fileId,
|
// url: res.data.fileUrl
|
// })
|
} else {
|
state.fileTableListData = []
|
// state.videoId = ''
|
// fileList2.value = []
|
}
|
}
|
})
|
}
|
// 将方法暴露给父组件
|
defineExpose({
|
visibleShowT,
|
})
|
|
</script>
|
|
<style scoped lang="scss">
|
.bodyBox2 {
|
position: relative;
|
|
.FullScreenDiv {
|
position: absolute;
|
top: 21px;
|
right: 50px;
|
}
|
|
.bodyDiv2 {
|
width: 100%;
|
// height: 420px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
//justify-content: space-between;
|
|
.topDiv {
|
width: 90%;
|
//height: 20%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 10px;
|
}
|
|
.zhanweiDiv {
|
width: 90%;
|
min-height: 115px;
|
display: flex;
|
flex-direction: column;
|
// align-items: center;
|
|
.btmDiv {
|
width: 100%;
|
// min-height: 160px;
|
display: flex;
|
flex-direction: column;
|
// align-items: center;
|
|
.tableDiv {
|
width: 100%;
|
margin: auto 0 auto auto;
|
// background-color: pink;
|
|
.rowBtnDiv {
|
width: 100%;
|
//height: 50px;
|
|
.normal-btn {
|
//width: 30px;
|
font-size: 14px;
|
}
|
}
|
}
|
|
.btmBtnDiv {
|
width: 50%;
|
//height: 100px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.elBtnClass {
|
width: 380px;
|
height: 60px;
|
font-size: 18px;
|
}
|
}
|
|
.spanBox {
|
width: 100%;
|
height: 30px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: flex-start;
|
background-color: #fef7f0;
|
font-size: 12px;
|
color: #ff6c00;
|
margin: 20px 0;
|
|
.spanDiv {
|
//width: 50%;
|
margin-right: 5px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.fixedBox {
|
position: fixed;
|
top: 100px;
|
left: 100px;
|
right: 50px;
|
background-color: #fff;
|
z-index: 999;
|
}
|
</style>
|
<style lang="scss">
|
.el-table .warning-row {
|
background: #fff5f5;
|
}
|
|
.el-table .success-row {
|
background: #f0f9eb;
|
}
|
|
.el-table .warning-row td {
|
color: #f56c6c;
|
}
|
|
.el-table .success-row td {
|
color: #67c23a;
|
}
|
</style>
|
