<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 class="btmBtnDiv" v-if="!state.isView">
|
<uploadSingleFile
|
:tips="tips"
|
acceptType=".pdf,.docx,.PDF,.DOCX"
|
:fileList="fileList"
|
@update:fileList="uploadFile"
|
@removeFile="handleRemoveFile"
|
style="width: 100%"
|
></uploadSingleFile>
|
</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="handleFilePreview(scope.row)"
|
>
|
预览
|
</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="spanBox" v-if="!state.isView">
|
<div class="spanDiv">1.仅支持上传pdf、doc、docx格式文件</div>
|
<div class="spanDiv">2.单次只能上传一个文件</div>
|
<div class="spanDiv">3.文件大小不超过500M</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 文件预览 -->
|
<el-dialog
|
width="80vw"
|
height="100vh"
|
class="resetDialog"
|
v-model="showPreviewDialog"
|
title="文件预览"
|
>
|
<fileInfoPreview ref="fileInfoPreviewRef"></fileInfoPreview>
|
</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
|
})
|
const showPreviewDialog = ref<boolean>(false)
|
const fileInfoPreviewRef= ref()
|
const handleFilePreview = (file: any) => {
|
let fileItem={
|
fileId:file.fileId,
|
fileSuffix:file.suffix,
|
}
|
showPreviewDialog.value = true
|
nextTick(() => {
|
fileInfoPreviewRef.value.visibleShow(fileItem)
|
})
|
}
|
// 控制弹窗的显示
|
const visibleShowT = (data?: any) => {
|
state.title ='上传文件'
|
state.editType = data?.typeData ?? 'file'
|
state.isView=data.isView
|
state.id = localStorage.getItem('optionputid')
|
// 重置
|
state.fileTypeId = ''
|
state.radioData = ''
|
state.parentCode = 'document_type'
|
// 获取选择数据
|
categoryListUrlFun(data.fileList)
|
}
|
const showfilePreviewDiv=ref()
|
// 将子组件的事件触发暴露给父组件
|
const emit = defineEmits(['uploadUpdataFun', 'uploadCloseDialog','openFilePreview'])
|
// 关闭弹窗
|
const closeDialog = () => {
|
emit('uploadUpdataFun')
|
}
|
|
// ------上传文件
|
const tips: string = '只能上传.pdf、.doc、.docx格式文件,并且只能上传一个文件'
|
const fileList = ref<any[]>([])
|
|
// 文件上传返回值
|
const uploadFile = (optionData?: any, fileId?: any) => {
|
console.log('optionData',optionData)
|
let name=optionData.name
|
// let size=optionData.size
|
optionData.originalName = name
|
optionData.fileId = fileId
|
optionData.fileSize = (optionData.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.fileId = fileId
|
saveClick()
|
}
|
// 清除文件数据
|
const handleRemoveFile = () => {
|
state.fileId = ''
|
fileList.value = []
|
state.fileTableListData = []
|
saveClick()
|
}
|
// 获取选择数据
|
const categoryListUrlFun = (fileList?:any) => {
|
console.log('fileList',fileList)
|
const searchList = {
|
parentCode: state.parentCode,
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.classifyInfoType = [res.data[0]]
|
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
|
}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.fileId = ''
|
fileList.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)
|
state.classifyInfoType.forEach((item:any)=>{
|
if(item.id==state.radioData){
|
item.fileList = [...state.fileTableListData]
|
item.fileIdList=item.fileList.map((file: any) => file.fileId)
|
}
|
})
|
ElNotification({
|
type: 'success',
|
message: '删除成功！',
|
})
|
saveClick()
|
}
|
const clearTableList = () => {
|
state.fileTableListData = []
|
}
|
// 将方法暴露给父组件
|
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>
|
