<template>
|
<div class="basic-info">
|
<el-scrollbar style="width: 100%; height: 82vh"
|
ref="scrollViewContainer">
|
<div class="viewbox-cont">
|
<h2>产品信息</h2>
|
<el-descriptions direction="horizontal" :column="2" border size="default">
|
<el-descriptions-item
|
label="产品名称"
|
label-align="right"
|
align="left"
|
width="38vw"
|
>
|
{{ state.basicInfo.name }}
|
</el-descriptions-item>
|
|
<el-descriptions-item label="行业领域" label-align="right" align="left" width="40vw" >
|
{{ state.basicInfo.industrialChainName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="单位工程" label-align="right" align="left" >
|
{{ state.basicInfo.importantAreaName}}
|
</el-descriptions-item>
|
<el-descriptions-item label="产业阶段" label-align="right" align="left" >
|
{{ state.basicInfo.businessProcessName}}
|
</el-descriptions-item>
|
<el-descriptions-item label="产品类型" label-align="right" align="left" >
|
{{ state.basicInfo.typeName}}
|
</el-descriptions-item>
|
<el-descriptions-item label="产品类型子类" label-align="right" align="left" >
|
{{ state.basicInfo.typeChildName}}
|
</el-descriptions-item>
|
<el-descriptions-item
|
label="产品描述"
|
label-align="right"
|
align="left"
|
>
|
<p v-html="state.basicInfo.describe"></p>
|
</el-descriptions-item>
|
<!-- <el-descriptions-item label="产业阶段" label-align="right" align="left">
|
{{ state.basicInfo.businessProcessName }}
|
</el-descriptions-item>
|
<el-descriptions-item label="产品类型" label-align="right" align="left">
|
{{ state.basicInfo.typeName }}
|
</el-descriptions-item>
|
<el-descriptions-item
|
label="产品类型子类"
|
label-align="right"
|
align="left"
|
>
|
{{ state.basicInfo.typeChildName }}
|
</el-descriptions-item> -->
|
</el-descriptions>
|
</div>
|
<div class="viewbox-cont">
|
<h2>申请信息</h2>
|
<el-descriptions direction="horizontal" :column="2" border size="default">
|
<el-descriptions-item
|
label="申请人"
|
label-align="right"
|
align="left"
|
width="38vw"
|
>
|
{{ state.basicInfo.applyUserName }}
|
</el-descriptions-item>
|
<el-descriptions-item
|
label="申请日期"
|
label-align="right"
|
align="left"
|
width="40vw"
|
>
|
{{ state.basicInfo.applyDate }}
|
</el-descriptions-item>
|
<el-descriptions-item
|
label="授权开始日期"
|
label-align="right"
|
align="left"
|
>
|
{{ state.basicInfo.applyStartDate }}
|
</el-descriptions-item>
|
<el-descriptions-item
|
label="授权结束日期"
|
label-align="right"
|
align="left"
|
>
|
{{ state.basicInfo.applyEndDate }}
|
</el-descriptions-item>
|
<el-descriptions-item
|
label="申请理由"
|
label-align="right"
|
align="left"
|
>
|
{{ state.basicInfo.applyReason }}
|
</el-descriptions-item>
|
<!-- <el-descriptions-item
|
label="审批意见"
|
label-align="right"
|
align="left"
|
width="28vw"
|
>
|
{{ state.basicInfo.applyReason }}
|
</el-descriptions-item> -->
|
</el-descriptions>
|
</div>
|
<div class="viewbox-cont">
|
<h2>交易管理</h2>
|
<el-descriptions direction="horizontal" :column="2" border size="default">
|
<el-descriptions-item
|
label="相关文档"
|
label-align="right"
|
align="left"
|
>
|
<div class="fileDiv">
|
<span
|
class="filelist"
|
v-for="file in state.basicInfo.customTradeFileList"
|
:key="file.fileId"
|
@click="handleFilePreview(file)"
|
>{{ file.originalName }}</span
|
>
|
</div>
|
</el-descriptions-item>
|
<!-- <el-descriptions-item
|
label="审批意见"
|
label-align="right"
|
align="left"
|
width="28vw"
|
>
|
{{ state.basicInfo.applyReason }}
|
</el-descriptions-item> -->
|
</el-descriptions>
|
</div>
|
<!-- <div class="btnDiv">
|
<el-button size="large" @click="handleCancel">取消</el-button>
|
<el-button
|
type="primary"
|
size="large"
|
:disabled="state.btnLoading"
|
@click="subscriptionPasskt('pass')"
|
>审批通过</el-button
|
>
|
<el-button
|
type="primary"
|
size="large"
|
:disabled="state.btnLoading"
|
plain
|
@click="subscriptionPasskt('rejected')"
|
>驳回</el-button
|
>
|
<el-button type="primary" size="large" @click="traceRow"
|
>追踪</el-button
|
>
|
</div> -->
|
<div class="absolutBnt">
|
<el-button type="primary" class="backicon" @click="goBackList"
|
>返回</el-button
|
>
|
</div>
|
</el-scrollbar>
|
<!-- <filePreview
|
v-if="showfilePreviewDiv"
|
ref="filePreviewHtmlRef"
|
@closePreview="handleClosePreview"
|
></filePreview> -->
|
|
<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 subscriptionApi from '@/api/subscription'
|
import Base64 from '@/utils/base64'
|
import { useRoute } from 'vue-router'
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
import router from '@/router'
|
import {
|
ElNotification,
|
ElMessageBox,
|
FormRules,
|
FormInstance,
|
} from 'element-plus'
|
const route = useRoute()
|
const userStore = useUserInfo() // 用户相关的
|
const fileInfoPreviewRef = ref()
|
const showfilePreviewDiv = ref<boolean>(false)
|
|
const state = reactive<any>({
|
basicInfo: {
|
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, // 点击下一步判断是否已经新增了数据
|
routeData:{}
|
})
|
const ruleFormRef = ref<FormInstance>()
|
|
// 父组件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 traceRow = () => {
|
const token = userStore.getAdminToken
|
router.push({
|
path: '/approve/tracePage',
|
query: {
|
info: Base64.encode(
|
JSON.stringify({
|
name: '订阅',
|
id: state.routeData.id,
|
flowId: state.routeData.flowId,
|
token: token,
|
})
|
),
|
},
|
})
|
}
|
const emit = defineEmits(['openFilePreview'])
|
const scrollViewContainer = ref()
|
const filePreviewHtmlRef = ref()
|
const handleFilePreview = (file: any) => {
|
showfilePreviewDiv.value = true
|
if (file.suffix == '.pdf' || file.suffix == '.docx') {
|
console.log('file',file)
|
nextTick(() => {
|
file.fileSuffix=file.suffix
|
fileInfoPreviewRef.value.visibleShow(file)
|
})
|
}
|
}
|
const goBackList = () => {
|
scrollViewContainer.value.scrollTo({ top: 0 })
|
router.push({
|
path: state.routeData.backPath,
|
})
|
}
|
const getDetailInfo = () => {
|
subscriptionApi
|
.getSubscriptionDetail({
|
userUseId:state.routeData.userUseId,
|
})
|
.then((res: any) => {
|
if (res.code == 200) {
|
state.basicInfo = res.data
|
if (state.basicInfo.fileInfos && state.basicInfo.fileInfos.length > 0) {
|
state.basicInfo.customTradeFileList = []
|
state.basicInfo.customEvaluationFileList = []
|
state.basicInfo.fileInfos.forEach((item: any) => {
|
if (item.fileKind == 'trade') {
|
state.basicInfo.customTradeFileList.push(item)
|
}
|
if (item.fileKind == 'evaluation') {
|
state.basicInfo.customEvaluationFileList.push(item)
|
}
|
})
|
}
|
}
|
})
|
}
|
const handleCancel = () => {
|
scrollViewContainer.value.scrollTo({ top: 0 })
|
router.push({
|
path: state.routeData.backPath,
|
})
|
}
|
const handleClosePreview = () => {
|
showfilePreviewDiv.value = false
|
}
|
const subscriptionPasskt = (type: string) => {
|
ruleFormRef.value?.validate((valid: any) => {
|
if (valid) {
|
const data = {
|
id: state.routeData.userUseId,
|
operationType: type,
|
opinion: state.basicInfoForm.opinion,
|
taskId: state.routeData.taskId,
|
}
|
state.btnLoading = true
|
subscriptionApi
|
.setAuditingComplete({ ...data })
|
.then((res: any) => {
|
if (res.code == 200) {
|
ElNotification({
|
type: 'success',
|
message: '操作成功！',
|
})
|
state.btnLoading = false
|
handleCancel()
|
}
|
})
|
.catch(() => {
|
state.btnLoading = false
|
})
|
} else {
|
return false
|
}
|
})
|
}
|
onMounted(() => {
|
console.log('state.routeData',JSON.parse(Base64.decode(route.query.info)))
|
state.routeData = JSON.parse(Base64.decode(route.query.info))
|
state.id = state.routeData?.id ?? ''
|
if (state.id) {
|
// 编辑时根据id获取详情
|
getDetailInfo()
|
}
|
// const history_url: string = import.meta.env.VITE_IFREAM_URL as string
|
// if (state.routeData.flowId) {
|
// state.srcData = `${history_url}/activity/history?processinstId=${state.routeData.flowId}&token=${state.routeData.token}`
|
// }
|
})
|
</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;
|
}
|
.fileDiv {
|
width: 100%;
|
min-height: 60px;
|
max-height:300px ;
|
overflow: auto;
|
display: flex;
|
flex-direction: column;
|
.filelist {
|
color: #536be2;
|
font-size: 15px;
|
cursor: pointer;
|
max-width: 400px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
line-height: 40px;
|
white-space: nowrap;
|
&:hover {
|
font-weight: 600;
|
font-size: 15px;
|
}
|
}
|
}
|
.absolutBnt {
|
position: fixed;
|
width: 70px;
|
top: 123px;
|
right: 5px;
|
z-index: 999;
|
display: flex;
|
}
|
</style>
|
|
