<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"
|
:disabled="state.disabled"
|
>
|
{{ item.name }}
|
</el-radio>
|
</el-radio-group>
|
<div class="btmBtnDiv" v-if="!state.isView">
|
<UploadSingleVideo
|
:tips="tips2"
|
acceptType="mp4"
|
:fileList="fileList2"
|
@update:fileList2="uploadVideo"
|
@removeFile2="handleRemoveFile2"
|
@progress="handleProgress"
|
@error="handleUploadError"
|
style="width: 100%"
|
></UploadSingleVideo>
|
</div>
|
</div>
|
<div class="zhanweiDiv">
|
<div class="btmDiv">
|
<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="originalName"
|
label="文件名称"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="fileSize"
|
label="文件大小"
|
width="100"
|
>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="suffix"
|
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" v-if="!state.isView">
|
<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-column align="center" label="操作" width="100" v-else>
|
<template #default="scope">
|
<div class="rowBtnDiv">
|
<el-button
|
class="normal-btn"
|
size="small"
|
type="primary"
|
plain
|
text
|
@click="handleShowVideoPreview(scope.row)"
|
>
|
预览
|
</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="spanBox" v-if="!state.isView">
|
<div class="spanDiv">1.仅支持上传mp4格式文件</div>
|
<div class="spanDiv">2.单次只能上传一个文件</div>
|
<div class="spanDiv">3.文件大小不超过900M</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 视频预览 -->
|
<el-dialog
|
class="videoResetDialog resetDialog"
|
v-model="showVideoPreviewDiv"
|
title="视频预览"
|
>
|
<Video
|
v-if="showVideoPreviewDiv"
|
ref="videoPreviewRef"
|
:src="gkjsUrl"
|
width="78vw"
|
height="81vh"
|
></Video>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Delete } from '@element-plus/icons-vue'
|
import { ElNotification } from 'element-plus'
|
import _ from 'lodash'
|
import productService from '@/api/zhongjian/productApi'
|
import {Upload} from '@element-plus/icons-vue'
|
import moment from 'moment' // 接口文件
|
|
const state = reactive<any>({
|
title: '',
|
editType: 'add',
|
id: '',
|
//--------------
|
fullscreen: false, // 全屏对话框
|
radioData: '',
|
parentCode: '', // 调取类型
|
classifyInfoType: [],
|
fileId: '', // 文件ID
|
videoId: '', // 文件ID
|
fileTypeId: '', // 传参文件类型
|
fileTableListData: [], // 文件table
|
disabled:false// 视频上传时间过长，字典项切换需要限制不动
|
})
|
const showVideoPreviewDiv = ref<boolean>(false)
|
|
const videoPreviewRef = ref()
|
const gkjsUrl=ref()
|
const handleShowVideoPreview = (file: any) => {
|
showVideoPreviewDiv.value = true
|
nextTick(() => {
|
gkjsUrl.value = file.url
|
})
|
}
|
// 控制弹窗的显示
|
const visibleShowT = (data?: any) => {
|
state.title = '上传视频'
|
state.editType ='file'
|
state.isView=data.isView
|
state.id = localStorage.getItem('optionputid')
|
// 重置
|
state.fileTypeId = ''
|
state.radioData = ''
|
state.parentCode = 'video_type'
|
// 获取选择数据
|
categoryListUrlFun(data.fileList)
|
}
|
|
// 将子组件的事件触发暴露给父组件
|
const emit = defineEmits(['uploadUpdataFun', 'uploadCloseDialog'])
|
|
// ------上传文件
|
const fileList = ref<any[]>([])
|
|
// -----------上传视频
|
const tips2: string = '只能上传.mp4格式文件,并且只能上传一个文件'
|
const fileList2 = ref<any[]>([])
|
|
// 视频上传返回值
|
const uploadVideo = (optionData?: any, fileId?: any) => {
|
let name=optionData.name
|
let size=optionData.size
|
optionData.originalName = name
|
optionData.fileId = fileId
|
optionData.fileSize = (size / 1024 / 1024).toFixed(2) + 'MB'
|
optionData.suffix =
|
'.' +
|
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.classifyInfoType.forEach((item:any)=>{
|
if(item.id==state.radioData){
|
item.fileList= [...state.fileTableListData]
|
}
|
})
|
state.videoId = fileId
|
saveClick()
|
state.disabled=false
|
}
|
const handleRemoveFile2 = () => {
|
state.videoId = ''
|
fileList2.value = []
|
state.fileTableListData = []
|
saveClick()
|
}
|
const handleProgress=()=>{
|
state.disabled=true
|
}
|
const handleUploadError=()=>{
|
state.disabled=false
|
}
|
// 获取选择数据
|
const categoryListUrlFun = (fileList?:any) => {
|
const searchList = {
|
parentCode: state.parentCode,
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.classifyInfoType = [...res.data]
|
state.fileTypeId = state.classifyInfoType[0].id
|
state.radioData = state.classifyInfoType[0].id
|
if(fileList && fileList.length>0){
|
state.classifyInfoType.forEach((dict:any)=>{
|
dict.fileList=[]
|
dict.fileIdList=[]
|
dict.fileTypeId=dict.id
|
fileList.forEach((file:any)=>{
|
if(dict.id==file.fileTypeId){
|
dict.fileList.push(file)
|
dict.fileIdList.push(file.fileId)
|
}
|
})
|
})
|
state.fileTableListData=state.classifyInfoType[0].fileList
|
console.log('state.fileTableListData', state.fileTableListData)
|
}else{
|
state.classifyInfoType.forEach((item:any)=>{
|
item.fileTypeId=item.id
|
item.fileList=[]
|
item.fileIdList=[]
|
})
|
state.fileTableListData=[]
|
}
|
emit('uploadUpdataFun',state.classifyInfoType)
|
}
|
})
|
}
|
// 单选按钮选择
|
const radioChange = (val?: any) => {
|
state.fileTypeId =val
|
state.classifyInfoType.forEach((item:any)=>{
|
if(item.id==val){
|
state.videoId = ''
|
fileList2.value = []
|
state.fileTableListData = [...item.fileList]
|
}
|
})
|
}
|
// 保存
|
const saveClick = () => {
|
state.classifyInfoType.forEach((item:any)=>{
|
if(item.fileList &&item.fileList.length>0){
|
item.fileIdList=item.fileList.map((file: any) => file.fileId)
|
}
|
})
|
emit('uploadUpdataFun',state.classifyInfoType)
|
}
|
// 删除列表信息
|
const deleteRow = (row: any) => {
|
state.fileTableListData.splice(
|
state.fileTableListData.findIndex((item:any) => item.fileId == row.fileId),1)
|
ElNotification({
|
type: 'success',
|
message: '删除成功！',
|
})
|
state.classifyInfoType.forEach((item:any)=>{
|
if(item.id==state.radioData){
|
item.fileList = [...state.fileTableListData]
|
item.fileIdList=item.fileList.map((file: any) => file.fileId)
|
}
|
})
|
saveClick()
|
}
|
const clearTableList = () => {
|
state.fileTableListData = []
|
}
|
onMounted(() => {
|
})
|
// 将方法暴露给父组件
|
defineExpose({
|
visibleShowT,
|
clearTableList,
|
})
|
</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>
|
