<template>
|
<div class="basic-info">
|
<div class="viewbox-cont">
|
<h2>基本信息</h2>
|
<el-descriptions direction="horizontal" :column="2" border size="default">
|
<el-descriptions-item
|
label="产品名称"
|
label-align="right"
|
align="left"
|
min-width="100px"
|
width="38vw"
|
>
|
{{ state.basicInfoForm.name }}
|
</el-descriptions-item>
|
<el-descriptions-item
|
label="产品描述"
|
width="40vw"
|
label-align="right"
|
align="left"
|
min-width="100px"
|
>
|
{{ state.basicInfoForm.describe }}
|
</el-descriptions-item>
|
<el-descriptions-item label="行业领域" label-align="right" align="left">
|
{{ state.basicInfoForm.industrialChainName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="单位工程" label-align="right" align="left">
|
{{ state.basicInfoForm.importantAreaName}}
|
</el-descriptions-item>
|
<el-descriptions-item label="产业阶段" label-align="right" align="left">
|
{{ state.basicInfoForm.businessProcessName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="产品类型" label-align="right" align="left">
|
{{ state.basicInfoForm.typeName }}
|
</el-descriptions-item>
|
<el-descriptions-item
|
label="产品类型子类"
|
label-align="right"
|
align="left"
|
>
|
{{ state.basicInfoForm.typeChildName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="查看方式" label-align="right" align="left">
|
{{ state.basicInfoForm.lookName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="报价体系" label-align="right" align="left">
|
<span
|
title="点击预览"
|
@click="previewQuotationSystem"
|
style="cursor: pointer; color: #646c9a"
|
>{{ state.basicInfoForm.quotationSystemName }}</span
|
>
|
</el-descriptions-item>
|
<el-descriptions-item label="宣传图" label-align="right" align="left">
|
<el-image
|
style="
|
position: relative;
|
width: 100px;
|
height: 100px;
|
cursor: pointer;
|
"
|
:src="uploadImgUrl"
|
:preview-src-list="[uploadImgUrl]"
|
>
|
</el-image>
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
<div class="viewbox-cont">
|
<h2>产品信息</h2>
|
<el-descriptions
|
direction="horizontal"
|
:column="1"
|
border
|
size="default"
|
v-for="(item, index) in state.basicInfoForm
|
.productSubmissionDetailDOList"
|
:key="item.sign"
|
style="margin-top: 10px"
|
>
|
<el-descriptions-item
|
label=" 产品标题"
|
label-align="right"
|
align="left"
|
>
|
{{ item.chapterHead }}
|
</el-descriptions-item>
|
<el-descriptions-item label="内容" label-align="right" align="left">
|
<span v-html="item.chapterContent"></span>
|
</el-descriptions-item>
|
</el-descriptions>
|
<!-- <div
|
class="childDiv"
|
v-for="(item, index) in state.basicInfoForm.productSubmissionDetailDOList"
|
:key="item.sign"
|
>
|
<div class="titDiv">
|
<span> 产品标题 </span>
|
<div class="iptDiv">
|
{{ item.chapterHead }}
|
</div>
|
<div class="ctnDiv">
|
<div class="topDiv">
|
<span> 产品内容 </span>
|
<div class="richTextDiv">
|
<div
|
style="padding: 10px"
|
v-html="
|
state.productSubmissionDetailDOList[index].chapterContent
|
"
|
></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div> -->
|
</div>
|
<div class="viewbox-cont">
|
<h2>附件管理</h2>
|
<uploadInfoView
|
ref="uploadInfoViewRef"
|
@openVideoPreview="handleShowVideoPreview"
|
/>
|
<uploadInfoView
|
ref="uploadInfoFileviewRef"
|
@openFilePreview="handleShowFilePreview"
|
/>
|
</div>
|
<!-- 视频预览 -->
|
<el-dialog
|
class="videoResetDialog resetDialog"
|
v-model="showVideoPreviewDiv"
|
title="视频预览"
|
@close="videoClose"
|
>
|
<Video
|
v-if="showVideoPreviewDiv"
|
ref="videoPreviewRef"
|
:src="gkjsUrl"
|
width="78vw"
|
height="81vh"
|
></Video>
|
</el-dialog>
|
<!-- 文件预览 -->
|
<el-dialog
|
width="80vw"
|
height="100vh"
|
class="resetDialog"
|
v-model="showfilePreviewDiv"
|
title="文件预览"
|
>
|
<fileInfoPreview ref="fileInfoPreviewRef"></fileInfoPreview>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import type { FormInstance, FormRules } from 'element-plus'
|
import { Ref } from 'vue'
|
import optionService from '@/api/zhongjian/optionApi'
|
import uploadInfoView from './uploadInfoView.vue' // 上传文件、视频
|
import router from '@/router'
|
|
interface State {
|
basicInfoForm: any
|
}
|
|
const state = reactive<any>({
|
basicInfoForm: {
|
name: '', // 方案名称
|
describe: '', // 方案描述
|
scopeId: '', //
|
industrialChainId: '', // 行业领域id
|
industrialChainName: '', // 行业领域
|
industrialChainIdList: [], // 行业领域idList
|
industrialChainNameList: [], // 行业领域nameList
|
importantAreaId: '', // 单位工程id
|
importantAreaName: '', // 单位工程
|
importantAreaIdList: [], // 单位工程idList
|
importantAreaNameList: [], // 单位工程nameList
|
businessProcessId: '', // 产业阶段id
|
businessProcessName: '', // 产业阶段name
|
sceneId: '', // 场景方向Id
|
probationType: '', // 软件类型
|
probationMedia: '', // 文件ID或试用地址URL
|
probationTypeId: '', // 软件类型id
|
typeName: '', // 产品父类类型name
|
typeId: '', // 产品父类类型id
|
typeChildName: '', // 产品类型子类name
|
typeChildId: '', // 产品类型子类id
|
lookName: '', // 查看方式name
|
lookId: '', // 查看方式id
|
homeImage: '', // 宣传图id
|
quotationSystemId: '', //上传文件
|
},
|
fullscreen: false, // 全屏对话框
|
visible: false,
|
title: '',
|
draftId: '', // 草稿Id
|
scopeIdListData: [], // 暂存发布范围IDs
|
disabledData: false, // 编辑权限
|
defaultAll: false, // 是否默认展开
|
webUrlDivShow: false,
|
isAddStatus: 0, // 点击下一步判断是否已经新增了数据
|
})
|
|
// 父组件props传参
|
interface Props {
|
customerInfo?: any // 可选的父组件传参
|
}
|
const props = withDefaults(defineProps<Props>(), {
|
customerInfo: () => {
|
return {
|
parentId: '',
|
name: '', // 方案名称
|
describe: '', // 方案描述
|
industrialChainNameList: [], // 行业领域nameList
|
importantAreaNameList: [], // 单位工程nameList
|
sceneId: '', // 场景方向Id
|
probationType: '', // 软件类型
|
probationMedia: '', // 文件ID或试用地址URL
|
businessProcessIdList: [], // 产业阶段idList
|
businessProcessNameList: [], // 产业阶段nameList
|
typeName: '', // 产品父类类型name
|
typeId: '', // 产品父类类型id
|
typeChildName: '', // 产品类型子类name
|
typeChildId: '', // 产品类型子类id
|
lookName: '', // 查看方式name
|
lookId: '', // 查看方式id
|
quotationSystemId: '',
|
}
|
},
|
})
|
const emit = defineEmits(['openFilePreview'])
|
const uploadImgUrl = ref<string>('')
|
const uploadInfoViewRef = ref()
|
const uploadInfoFileviewRef = ref()
|
const fileInfoPreviewRef = ref()
|
const videoPreviewRef = ref()
|
const showVideoPreviewDiv = ref<boolean>(false)
|
const showfilePreviewDiv = ref<boolean>(false)
|
const gkjsUrl = ref()
|
// 回显图片
|
const imagePreviewShow = () => {
|
// 获取图片URL
|
optionService
|
.getPicUrlUrl({
|
fileId: state.basicInfoForm.homeImage,
|
})
|
.then((res) => {
|
if (res.code == 200) {
|
uploadImgUrl.value = res.data.fileUrl
|
}
|
})
|
}
|
const previewQuotationSystem = () => {
|
showfilePreviewDiv.value = true
|
nextTick(() => {
|
fileInfoPreviewRef.value.visibleShow({
|
fileId: state.basicInfoForm.quotationSystemId,
|
fileSuffix: state.basicInfoForm.quotationSystemSuffix,
|
})
|
})
|
}
|
const uploadFileRow = () => {
|
const obj = {
|
typeData: 'file',
|
id: state.basicInfoForm.id,
|
}
|
uploadInfoFileviewRef.value.visibleShowT(obj)
|
}
|
// 上传视频
|
const uploadVideoRow = () => {
|
const obj = {
|
typeData: 'video',
|
id: state.basicInfoForm.id,
|
}
|
uploadInfoViewRef.value.visibleShowT(obj)
|
}
|
const handleShowVideoPreview = (file: any) => {
|
showVideoPreviewDiv.value = true
|
nextTick(() => {
|
gkjsUrl.value = file.fileUrl
|
})
|
}
|
const handleShowFilePreview = (file: any) => {
|
showfilePreviewDiv.value = true
|
nextTick(() => {
|
fileInfoPreviewRef.value.visibleShow(file)
|
})
|
}
|
const videoClose=()=>{
|
console.log('关闭弹窗')
|
videoPreviewRef.value.onPause()
|
}
|
watchEffect(() => {
|
state.basicInfoForm = { ...props.customerInfo }
|
if (state.basicInfoForm.homeImage) {
|
imagePreviewShow()
|
}
|
if (state.basicInfoForm.id) {
|
nextTick(()=>{
|
uploadVideoRow()
|
uploadFileRow()
|
})
|
}
|
})
|
</script>
|
<style scoped lang="scss">
|
.viewbox-cont {
|
margin-bottom: 10px;
|
margin-top: 10px;
|
h2 {
|
padding: 8px 15px;
|
background-color: #dce6f4;
|
color: #656d9a;
|
font-size: 17px;
|
}
|
}
|
:deep(.is-bordered-label) {
|
background-color: #f9f9f9 !important;
|
border: 1px solid #ededed !important;
|
width: 120px !important;
|
}
|
</style>
|
