<template>
|
<div class="bodyBox">
|
<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="bodyDiv">
|
<div class="topDiv">
|
<el-radio-group v-model="state.radioData" @change="radioChange">
|
<el-radio v-for="item in state.classifyInfoType" :label="item.code" :value="item.id" size="large">
|
{{
|
item.name
|
}}
|
</el-radio>
|
</el-radio-group>
|
</div>
|
<div class="btmDiv">
|
<div class="btmBtnDiv" v-if="state.editType == 'file'">
|
<!-- <el-upload ref="upload" class="upload-demo" accept=".jpg,.jpeg,.png,.gif,.pdf" :limit="1"-->
|
<!-- :file-list="fileList" :on-exceed="handleExceed" :before-upload="handleBeforeUpload"-->
|
<!-- :http-request="uploadRequest" :on-preview="handlePreview" :on-remove="handleRemoveFile">-->
|
<!-- <template #trigger>-->
|
<!-- <el-button class="elBtnClass" type="primary">上传文件</el-button>-->
|
<!-- </template>-->
|
<!-- </el-upload>-->
|
<UploadSingleFile
|
:tips="tips"
|
acceptType="pdf,docx"
|
:fileList="fileList"
|
@update:fileList="uploadFile"
|
@removeFile="handleRemoveFile"
|
style="width: 100%"
|
></UploadSingleFile>
|
</div>
|
<div class="btmBtnDiv" v-if="state.editType == 'video'">
|
<!-- <el-button class="elBtnClass" type="primary">上传视频</el-button>-->
|
<UploadSingleVideo
|
:tips="tips2"
|
acceptType="mp4"
|
:fileList="fileList2"
|
@update:fileList2="uploadVideo"
|
@removeFile2="handleRemoveFile2"
|
style="width: 100%"
|
></UploadSingleVideo>
|
</div>
|
<template v-if="state.editType == 'file'">
|
<div class="spanDiv">1.仅支持上传PDF格式文件</div>
|
<div class="spanDiv">2.文件大小不超过50M</div>
|
</template>
|
|
<template v-else>
|
<div class="spanDiv">1.仅支持上传mp4格式文件</div>
|
<div class="spanDiv">2.文件大小不超过1G</div>
|
</template>
|
|
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
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 optionService from "@/api/zhongjian/optionApi";
|
|
|
const state = reactive<any>({
|
visible: false,
|
title: '',
|
editType: 'add',
|
id: '',
|
//--------------
|
fullscreen: false, // 全屏对话框
|
radioData: '',
|
classifyInfoType: [],
|
pageTypeData: '', // 调用的类型
|
fileId: '', // 文件ID
|
videoId: '', // 文件ID
|
|
})
|
|
// 控制弹窗的显示
|
const visibleShowT = (data?: any) => {
|
state.title = data?.typeData == 'file' ? '上传文件' : '上传视频'
|
state.editType = data?.typeData ?? 'file'
|
state.id = data?.id ?? ''
|
state.pageTypeData = data?.pageTypeData ?? ''
|
if (state.editType == 'file') {
|
// 获取选择数据
|
categoryListUrlFun('document_type')
|
} else {
|
// 获取选择数据
|
categoryListUrlFun('video_type')
|
}
|
|
|
// if (data?.informationEditType == 'edit') {
|
// // 编辑时根据id获取详情
|
// // queryEnergyDetailById()
|
// } else {
|
//
|
// }
|
|
state.visible = true
|
}
|
|
// 将方法暴露给父组件
|
defineExpose({
|
visibleShowT
|
})
|
|
// 将子组件的事件触发暴露给父组件
|
const emit = defineEmits(['uploadUpdataFun', 'uploadCloseDialog'])
|
// 关闭弹窗
|
const closeDialog = () => {
|
emit('uploadUpdataFun')
|
}
|
|
// 保存基本信息
|
const saveCustomerBasicInfo = (data: any) => {
|
const params = _.cloneDeep(data)
|
if (params.id) {
|
// 编辑- 更新
|
updateCustomerInfo(params)
|
} else {
|
// 新增
|
delete params.id
|
// delete params.addType
|
addNewInformation(params)
|
}
|
|
|
}
|
|
// 新增版本分类基本信息
|
const addNewInformation = (data: any) => {
|
versionClassifyService.addNewpClassifyInformation({
|
...data
|
}).then(res => {
|
if (res.code == 200) {
|
ElNotification({
|
type: 'success',
|
message: '信息保存成功'
|
})
|
state.visible = false
|
|
// 更新数据
|
emit('uploadUpdataFun')
|
}
|
})
|
}
|
|
// 编辑修改档案盒信息
|
const updateCustomerInfo = (data: any) => {
|
versionClassifyService.updataClassifyInformation({
|
...data
|
}).then(res => {
|
if (res.code == 200) {
|
ElNotification({
|
type: 'success',
|
message: '信息保存成功'
|
})
|
state.visible = false
|
// 更新数据
|
emit('updataFun')
|
}
|
})
|
}
|
|
// 取消档案盒信息保存
|
const cancelCustomerBasicInfoEdit = () => {
|
state.visible = false
|
}
|
|
// 根据id查看详情
|
const queryEnergyDetailById = (listData: any) => {
|
const param: object = {
|
id: state.id
|
}
|
versionClassifyService.queryClassifyDetailURL({
|
...param
|
}).then(res => {
|
if (res.code == 200) {
|
state.basicInfo = {...res.data}
|
// 控制显示
|
state.basicInfo.addType = 'showTrue'
|
// 再次赋值
|
state.basicInfo.parentName = state.parentName
|
|
state.visible = true
|
}
|
})
|
}
|
|
// 是否全屏
|
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 uploadFile = (data: any) => {
|
}
|
const handleRemoveFile = () => {
|
// state.formData.policyDetailFile = null
|
}
|
|
// -----------上传视频
|
const tips2: string = '只能上传.mp4格式文件,并且只能上传一个文件'
|
const fileList2 = ref<any[]>([])
|
const fileDetailFile2 = ref('')
|
|
// fileList2.value.push({
|
// name: res.data.policyDetailFile.originalName,
|
// id: res.data.policyDetailFile.id,
|
// url: res.data.policyDetailFile.url
|
// })
|
|
// 文件上传返回值
|
const uploadVideo = (data: any) => {
|
// state.formData.policyDetailFile = data.uploadFileInfo.data
|
}
|
const handleRemoveFile2 = () => {
|
// state.formData.policyDetailFile = null
|
}
|
|
|
// 获取选择数据
|
// 下拉数据-产业链方向
|
const categoryListUrlFun = (data?: any) => {
|
const searchList = {
|
parentCode: data
|
}
|
optionService.categoryListUrl({...searchList}).then((res: any) => {
|
if (res.code == 200) {
|
state.classifyInfoType = [...res.data]
|
}
|
})
|
}
|
|
|
// 单选按钮选择
|
const radioChange = (val?: any) => {
|
console.log(val)
|
}
|
|
onMounted(() => {
|
})
|
|
watchEffect(() => {
|
})
|
|
// // 设置侦听器
|
// onMounted(() => {
|
// screenfull.on("change", change);
|
// });
|
//
|
// // 删除侦听器
|
// onUnmounted(() => {
|
// screenfull.off("change", change);
|
// });
|
</script>
|
|
<style scoped lang="scss">
|
.bodyBox {
|
position: relative;
|
|
.FullScreenDiv {
|
position: absolute;
|
top: 21px;
|
right: 50px;
|
}
|
|
.bodyDiv {
|
width: 100%;
|
height: 420px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
|
.topDiv {
|
width: 100%;
|
height: 20%;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
margin-top: 10px;
|
}
|
|
.btmDiv {
|
width: 100%;
|
height: 50%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.btmBtnDiv {
|
width: 50%;
|
height: 100px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
//background-color: pink;
|
|
.elBtnClass {
|
width: 380px;
|
height: 60px;
|
font-size: 18px;
|
}
|
}
|
|
.spanDiv {
|
width: 50%;
|
font-size: 16px;
|
margin-top: 5px;
|
}
|
}
|
}
|
|
}
|
</style>
|
