<template>
|
<div class="bodyBox2">
|
<!-- <el-dialog style="width: 800px;height: 500px" v-model="state.visible" :title="state.title" @closed="closeDialog"
|
:fullscreen="state.fullscreen"
|
:close-on-click-modal="false"> -->
|
|
<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 v-if="state.fileTypeId != ''"> -->
|
<div class="btmBtnDiv" v-if="state.editType == 'file' && state.id">
|
<UploadSingleFile
|
:tips="tips"
|
acceptType="pdf,docx"
|
:fileList="fileList"
|
@update:fileList="uploadFile"
|
@removeFile="handleRemoveFile"
|
style="width: 100%"
|
></UploadSingleFile>
|
</div>
|
<div class="btmBtnDiv" v-else-if="state.editType == 'video' && state.id">
|
<UploadSingleVideo
|
:tips="tips2"
|
acceptType="mp4"
|
:fileList="fileList2"
|
@update:fileList2="uploadVideo"
|
@removeFile2="handleRemoveFile2"
|
style="width: 100%"
|
></UploadSingleVideo>
|
</div>
|
<div class="btmBtnDiv" v-else>
|
<el-button class="btnDiv" type="primary" @click="handleNoupload">
|
<el-icon class="iconClass">
|
<Upload/>
|
</el-icon>
|
选择文件
|
</el-button>
|
</div>
|
</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" type="selection" width="55"/>-->
|
<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"
|
type="danger"
|
size="small"
|
plain
|
text
|
@click="deleteRow(scope.row)"
|
>
|
<el-icon>
|
<Delete />
|
</el-icon>
|
删除
|
</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="spanBox" v-if="state.editType == 'file'">
|
<div class="spanDiv">1.仅支持上传pdf、doc、docx格式文件</div>
|
<div class="spanDiv">2.单次只能上传一个文件</div>
|
<div class="spanDiv">3.文件大小不超过500M</div>
|
</div>
|
|
<div class="spanBox" v-else>
|
<div class="spanDiv">1.仅支持上传mp4格式文件</div>
|
<div class="spanDiv">2.单次只能上传一个文件</div>
|
<div class="spanDiv">3.文件大小不超过900M</div>
|
</div>
|
</div>
|
<!-- <div>
|
<el-button
|
style="width: 90px; height: 40px"
|
type="primary"
|
v-if="state.fileTypeId"
|
@click="saveClick"
|
>保存
|
</el-button>
|
</div> -->
|
<!-- </div>
|
<div style="font-size: 14px" v-if="state.fileTypeId == ''">
|
请选择类型
|
</div> -->
|
</div>
|
</div>
|
|
<!-- </el-dialog> -->
|
</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' // 接口文件
|
import {Upload} from '@element-plus/icons-vue'
|
|
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 = localStorage.getItem('productputid')
|
|
// 重置
|
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'])
|
// 关闭弹窗
|
const closeDialog = () => {
|
emit('uploadUpdataFun')
|
}
|
|
// 是否全屏
|
const isFullscreen = ref(false)
|
|
// // 监听变化
|
// const change = () => {
|
// isFullscreen.value = screenfull.isFullscreen;
|
// };
|
//
|
// 切换全屏/窗口
|
const handleFullscreenchange = (show?: any) => {
|
// screenfull.toggle();
|
|
state.fullscreen = !state.fullscreen
|
}
|
|
// ------上传文件
|
const tips: string = '只能上传.pdf、.doc、.docx格式文件,并且只能上传一个文件'
|
const fileList = ref<any[]>([])
|
const fileDetailFile = ref('')
|
|
// fileList.value.push({
|
// name: res.data.policyDetailFile.originalName,
|
// id: res.data.policyDetailFile.id,
|
// url: res.data.policyDetailFile.url
|
// })
|
const handleNoupload=()=>{
|
ElNotification({
|
type: 'error',
|
message: '请先保存产品基本信息！',
|
})
|
}
|
// 文件上传返回值
|
const uploadFile = (optionData?: any, fileId?: any) => {
|
optionData.fileName = optionData.name
|
optionData.fileId = fileId
|
optionData.fileSize = (optionData.size / 1024 / 1024).toFixed(2) + 'MB'
|
optionData.fileSuffix =
|
'.' +
|
optionData.name.substring(
|
optionData.name.lastIndexOf('.') + 1,
|
optionData.name.length
|
)
|
optionData.schemeId = state.id
|
optionData.fileType = state.fileTypeId
|
optionData.uploadTime = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
// 用于表格展示
|
state.fileTableListData.push(optionData)
|
|
state.fileId = fileId
|
saveClick()
|
}
|
// 清除文件数据
|
const handleRemoveFile = () => {
|
// state.formData.policyDetailFile = null
|
state.fileId = ''
|
fileList.value = []
|
state.fileTableListData = []
|
saveClick()
|
}
|
|
// -----------上传视频
|
const tips2: string = '只能上传.mp4格式文件,并且只能上传一个文件'
|
const fileList2 = ref<any[]>([])
|
|
// fileList2.value.push({
|
// name: res.data.policyDetailFile.originalName,
|
// id: res.data.policyDetailFile.id,
|
// url: res.data.policyDetailFile.url
|
// })
|
|
// 视频上传返回值
|
const uploadVideo = (optionData?: any, fileId?: any) => {
|
console.log('optionData', optionData)
|
console.log('uploadFile', fileId)
|
|
optionData.fileName = optionData.name
|
optionData.fileId = fileId
|
optionData.fileSize = (optionData.size / 1024 / 1024).toFixed(2) + 'MB'
|
optionData.fileSuffix =
|
'.' +
|
optionData.name.substring(
|
optionData.name.lastIndexOf('.') + 1,
|
optionData.name.length
|
)
|
optionData.schemeId = state.id
|
optionData.fileType = state.fileTypeId
|
optionData.uploadTime = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
// 用于表格展示
|
state.fileTableListData.push(optionData)
|
|
state.videoId = fileId
|
saveClick()
|
}
|
const handleRemoveFile2 = () => {
|
state.videoId = ''
|
fileList2.value = []
|
state.fileTableListData = []
|
saveClick()
|
}
|
|
// 获取选择数据
|
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
|
if (state.id) radioChange(state.radioData)
|
}
|
})
|
}
|
|
// 单选按钮选择
|
const radioChange = (val?: any) => {
|
if (!state.id) {
|
ElNotification({
|
type: 'error',
|
message: '请先保存草稿！',
|
})
|
return
|
}
|
state.fileTypeId =val
|
// state.classifyInfoType.forEach((item) => {
|
// if (item.name == val) {
|
// state.fileTypeId = item.id
|
// }
|
// })
|
// 判断上传类型
|
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,
|
productId: state.id,
|
fileType: state.fileTypeId,
|
fileIdList,
|
}
|
|
productService.fileSaveListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
// ElNotification({
|
// type: 'success',
|
// message: '信息保存成功',
|
// })
|
state.visible = false
|
}
|
})
|
}
|
|
// 保存文件-视频
|
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,
|
productId: state.id,
|
fileType: state.fileTypeId,
|
fileIdList,
|
}
|
|
productService.videoSaveListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
// ElNotification({
|
// type: 'success',
|
// message: '信息保存成功',
|
// })
|
state.visible = false
|
}
|
})
|
}
|
|
// 保存
|
const saveClick = () => {
|
if (state.editType == 'file') {
|
// 保存文件-文档
|
fileSaveListUrlFun()
|
} else {
|
// 保存文件-视频
|
videoSaveListUrlFun()
|
}
|
}
|
|
// 查询上传文档
|
const getDocBySchemeIdUrlFun = () => {
|
if (!state.id) {
|
ElNotification({
|
type: 'error',
|
message: '请先保存产品基本信息！',
|
})
|
return
|
}
|
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
|
// state.fileId = res.data.fileId
|
// fileList.value.push({
|
// name: res.data.fileName,
|
// id: res.data.fileId,
|
// url: res.data.fileUrl
|
// })
|
} else {
|
state.fileTableListData = []
|
// state.fileId = ''
|
// fileList.value = []
|
}
|
}
|
})
|
}
|
|
// 查询上传视频
|
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 = []
|
}
|
}
|
})
|
}
|
|
// 删除列表信息
|
const deleteRow = (row: any) => {
|
ElMessageBox.confirm('确定要删除本条数据吗?', '提醒', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => {
|
state.fileTableListData.splice(
|
state.fileTableListData.findIndex((item) => item.fileId == row.fileId),1)
|
ElNotification({
|
type: 'success',
|
message: '删除成功！',
|
})
|
saveClick()
|
})
|
.catch(() => {})
|
}
|
const clearTableList = () => {
|
state.fileTableListData = []
|
}
|
onMounted(() => {
|
// visibleShowT()
|
})
|
// 将方法暴露给父组件
|
defineExpose({
|
visibleShowT,
|
clearTableList,
|
})
|
// 父组件props传参
|
interface Props {
|
id?: any // 可选的父组件传参
|
}
|
const props = withDefaults(defineProps<Props>(), {
|
id: '',
|
})
|
watchEffect(() => {
|
state.id = props.id
|
})
|
|
// // 设置侦听器
|
// onMounted(() => {
|
// screenfull.on("change", change);
|
// });
|
//
|
// // 删除侦听器
|
// onUnmounted(() => {
|
// screenfull.off("change", change);
|
// });
|
</script>
|
|
<style scoped lang="scss">
|
.bodyBox2 {
|
position: relative;
|
|
.FullScreenDiv {
|
position: absolute;
|
top: 21px;
|
right: 50px;
|
}
|
|
.bodyDiv2 {
|
width: 100%;
|
height: 340px;
|
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;
|
}
|
|
.zhanweiDiv {
|
width: 90%;
|
height: 300px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
//justify-content: center;
|
|
.btmDiv {
|
width: 100%;
|
height: 300px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.tableDiv {
|
width: 100%;
|
height: 240px;
|
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: 10px 0;
|
|
.spanDiv {
|
//width: 50%;
|
margin-right: 5px;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
