<template>
|
<div>
|
<el-tabs v-model="currentTab">
|
<el-tab-pane key="1" label="基本信息" name="1">
|
<!-- 新增和编辑弹窗 -->
|
<informationBasicInfo
|
ref="informationBasicInfoRef"
|
:customerInfo="state.basicInfo"
|
@submitNext="handleShowNextTab"
|
/>
|
</el-tab-pane>
|
<el-tab-pane key="2" label="产品信息" name="2">
|
<div class="bodyDiv">
|
<el-scrollbar style="width: 100%">
|
<div
|
class="childDiv"
|
v-for="(item, index) in state.richTextList"
|
:key="item.sign"
|
>
|
<div class="titDiv">
|
<span>产品标题 </span>
|
<div class="iptDiv">
|
<el-input
|
v-model="item.chapterHead"
|
:disabled="state.disabledData"
|
clearable
|
placeholder="请输入标题"
|
maxlength="100"
|
show-word-limit
|
/>
|
</div>
|
</div>
|
<div class="ctnDiv">
|
<div class="topDiv">
|
<span>产品内容 </span>
|
<div class="richTextDiv" v-if="!state.disabledData">
|
<richText
|
:ref="'richTextRefData' + index"
|
:indexData="index"
|
:modelData="state.richTextList[index].chapterContent"
|
@updateDataFun="updateDataFun"
|
></richText>
|
</div>
|
<div class="richTextDiv" v-else>
|
<div
|
style="padding: 10px"
|
v-html="state.richTextList[index].chapterContent"
|
></div>
|
</div>
|
</div>
|
<div class="btmBtnDiv">
|
<el-button type="danger" plain @click="deleteChapter(index)"
|
>删除本章</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</el-scrollbar>
|
<div class="form-footer">
|
<el-button type="primary" @click="addChapter">添加章节</el-button>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane key="3" label="附件管理" name="3">
|
<uploadInfo ref="uploadVideoRef" :id="state.id" />
|
<uploadInfo ref="uploadFileRef" :id="state.id" />
|
</el-tab-pane>
|
</el-tabs>
|
<el-dialog
|
style="width: 1300px; height: 88vh"
|
v-model="state.visible"
|
title="流程查看"
|
:destroy-on-close="true"
|
:close-on-click-modal="false"
|
>
|
<div class="bodyBox" v-if="state.routeData.flowId">
|
<iframe
|
style="width: 100%; height: 100%; border: none"
|
:src="state.srcData"
|
></iframe>
|
</div>
|
<div v-else style="line-height: 300px; text-align: center">
|
当前提报未提交，暂无流程查看信息
|
</div>
|
</el-dialog>
|
<div class="absolutBnt">
|
<el-button class="backicon" @click="goBackList">返回</el-button>
|
<el-button type="primary" plain @click="saveBasicDraft">存草稿</el-button>
|
<el-button
|
type="primary"
|
@click="submitClick"
|
:disabled="state.submitDisabled"
|
>提交</el-button
|
>
|
<el-button type="primary" @click="zuizClick">流程查看</el-button>
|
</div>
|
</div>
|
</template>
|
<script lang="ts">
|
export default {
|
name: 'meritRatingDetail',
|
}
|
</script>
|
<script setup lang="ts">
|
import informationBasicInfo from './components/informationBasicInfo.vue'
|
import Base64 from '@/utils/base64'
|
import { useRoute } from 'vue-router'
|
import { useNavTabs } from '@/stores/modules/navTabs' // 标签导航
|
import productService from '@/api/zhongjian/productApi' // 接口文件
|
import _ from 'lodash'
|
import router from '@/router'
|
import uploadInfo from './components/uploadInfo.vue' // 上传文件、视频
|
const currentTab = ref<string>('1')
|
const route = useRoute()
|
interface BasicInfoType {
|
id?: string // 客户id
|
parentId: string
|
editType: ''
|
parentName: string
|
terminalCategoryName: string
|
terminalCategoryCode: string
|
superior: string
|
remark: string
|
addType: string // 添加按钮类型
|
}
|
|
const state = reactive<any>({
|
visible: false,
|
title: '',
|
editType: 'add',
|
id: '',
|
parentName: '',
|
basicInfo: {
|
editType: '',
|
addType: '', // 添加按钮类型
|
},
|
fullscreen: false, // 全屏对话框
|
routeData: {}, // 路由传参
|
srcData: '',
|
submitDisabled: false,
|
isSaveChapter: false,
|
richTextList: [],
|
isSaveSubmit: false,
|
})
|
const richTextListCopy = [
|
{
|
chapterHead: '',
|
chapterContent: '',
|
},
|
]
|
const uploadVideoRef = ref()
|
const uploadFileRef = ref()
|
const informationBasicInfoRef = ref()
|
const goBackList = () => {
|
currentTab.value = '1'
|
router.push({
|
path: '/safety/performance/meritRatingManage',
|
})
|
}
|
// 产品章节------------------------开始
|
//添加 产品章节
|
const addChapter = () => {
|
state.richTextList.push({
|
chapterHead: '',
|
chapterContent: '',
|
})
|
}
|
// 删除产品章节
|
const deleteChapter = (index?: any) => {
|
if (state.richTextList.length <= 1) {
|
return
|
}
|
state.richTextList.splice(index, 1)
|
}
|
|
// 子级调用
|
const updateDataFun = (val?: any, indexData?: any) => {
|
state.richTextList[indexData].chapterContent = val
|
}
|
// 产品章节------------------------结束
|
// ---------------------------------------------------------------
|
const saveBasicInfos = () => {
|
informationBasicInfoRef.value.saveBasicInfo().then((res: any) => {
|
console.log('resresresres', res)
|
if (res) {
|
const params = _.cloneDeep(res)
|
let richText: any = state.richTextList.map((item: any, index) => {
|
return {
|
...item,
|
id: '',
|
sort: index + 1,
|
productId: state.id,
|
}
|
})
|
params.list = richText
|
saveCustomerBasicInfo(params).then((res: any) => {
|
if (res && state.isSaveSubmit) {
|
submitForm()
|
}
|
})
|
} else {
|
ElNotification({
|
type: 'error',
|
message: '请将基本信息的必填项填写完整！',
|
})
|
currentTab.value = '1'
|
return
|
}
|
})
|
}
|
// 保存草稿
|
const saveBasicDraft = () => {
|
state.isSaveSubmit = false
|
saveBasicInfos()
|
}
|
// 提交
|
const submitClick = () => {
|
ElMessageBox.confirm('确定要提交吗?', '提醒', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => {
|
state.isSaveSubmit = true
|
saveBasicInfos()
|
})
|
.catch(() => {})
|
}
|
const submitForm = () => {
|
productService.submitUrl({ id: state.id }).then((res: any) => {
|
if (res.code == 200) {
|
goBackList()
|
}
|
})
|
}
|
const handleShowNextTab = (data: any) => {
|
if(data){
|
saveBasic(data)
|
currentTab.value = '2'
|
}else{
|
ElNotification({
|
type: 'error',
|
message: '请将基本信息的必填项填写完整！',
|
})
|
currentTab.value = '1'
|
return
|
}
|
}
|
// 保存基本信息
|
const saveBasic = (params: any) => {
|
if (state.id) {
|
params.id = state.id
|
// 编辑- 更新
|
updateCustomerInfo(params)
|
} else {
|
// 新增
|
addNewInformation(params)
|
}
|
}
|
// 保存基本信息
|
const saveCustomerBasicInfo = (params: any) => {
|
return new Promise((resolve: any) => {
|
if (state.id) {
|
params.id = state.id
|
// 编辑- 更新
|
updateCustomerInfo(params).then((res: any) => {
|
if (res) {
|
ElNotification({
|
type: 'success',
|
message: state.isSaveSubmit?'产品信息提交成功！':'产品基本信息及章节信息保存成功！',
|
})
|
resolve(true)
|
} else {
|
resolve(false)
|
}
|
})
|
} else {
|
// 新增
|
addNewInformation(params).then((res: any) => {
|
if (res) {
|
ElNotification({
|
type: 'success',
|
message: state.isSaveSubmit?'产品信息提交成功！':'产品基本信息及章节信息保存成功！',
|
})
|
resolve(true)
|
} else {
|
resolve(false)
|
}
|
})
|
}
|
})
|
}
|
const uploadFileRow = () => {
|
const obj = {
|
typeData: 'file',
|
id: state.id,
|
}
|
uploadFileRef.value.visibleShowT(obj)
|
}
|
// 上传视频
|
const uploadVideoRow = () => {
|
const obj = {
|
typeData: 'video',
|
id: state.id,
|
}
|
uploadVideoRef.value.visibleShowT(obj)
|
}
|
// 新增基本信息-存草稿
|
const addNewInformation = (data: any) => {
|
return new Promise((resolve: any) => {
|
productService
|
.optionCreateUrl({
|
...data,
|
})
|
.then((res) => {
|
if (res.code == 200) {
|
state.id = res.data
|
localStorage.setItem('productputid', res.data)
|
resolve(true)
|
} else {
|
resolve(false)
|
}
|
})
|
})
|
}
|
|
// 编辑修改基本信息-存草稿
|
const updateCustomerInfo = (data: any) => {
|
return new Promise((resolve: any) => {
|
productService
|
.optionUpdateUrl({
|
...data,
|
})
|
.then((res: any) => {
|
if (res.code == 200) {
|
resolve(true)
|
} else {
|
resolve(false)
|
}
|
})
|
})
|
}
|
|
// 根据id查看详情
|
const queryDetailById = () => {
|
const param: object = {
|
id: state.id,
|
}
|
productService
|
.getIdListUrl({
|
...param,
|
})
|
.then((res) => {
|
if (res.code == 200) {
|
state.basicInfo = { ...res.data }
|
informationBasicInfoRef.value.setData(res.data)
|
let rich:any= res.data.productSubmissionDetailDOList
|
let richList:any =rich.length>0?rich: richTextListCopy
|
state.richTextList = richList
|
}
|
})
|
}
|
|
const zuizClick = () => {
|
state.visible = true
|
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}`
|
}
|
}
|
onActivated(() => {
|
currentTab.value = '1'
|
state.routeData = JSON.parse(Base64.decode(route.query.info))
|
state.id = localStorage.getItem('productputid')
|
state.basicInfo = {
|
quotationSystemName: '',
|
}
|
nextTick(() => {
|
informationBasicInfoRef.value.handleRemoveFile()
|
})
|
if (!state.id) {
|
state.title = '新增产品基本信息'
|
state.isSaveChapter = false
|
state.richTextList =[
|
{
|
chapterHead: '',
|
chapterContent: '',
|
},
|
]
|
informationBasicInfoRef.value.setData(false)
|
uploadFileRef.value.clearTableList()
|
uploadVideoRef.value.clearTableList()
|
uploadVideoRow()
|
uploadFileRow()
|
}
|
if (state.id) {
|
state.title = '编辑产品基本信息'
|
// 编辑时根据id获取详情
|
queryDetailById()
|
uploadVideoRow()
|
uploadFileRow()
|
}
|
})
|
</script>
|
<style scoped lang="scss">
|
.bodyBox {
|
width: 100%;
|
height: 79vh;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
.absolutBnt {
|
position: absolute;
|
width: 315px;
|
top: 8px;
|
right: 15px;
|
z-index: 999;
|
display: flex;
|
justify-content: space-around;
|
}
|
.bodyDiv {
|
width: 100%;
|
height: 74vh;
|
overflow-y: auto;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-around;
|
padding-top: 10px;
|
padding-bottom: 20px;
|
|
.childDiv {
|
width: 98%;
|
|
.titDiv {
|
width: 100%;
|
height: 40px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
|
span {
|
display: inline-block;
|
font-size: 14px;
|
display: inline-block;
|
width: 70px;
|
margin-left: 20px;
|
}
|
|
.iptDiv {
|
width: 94%;
|
}
|
}
|
|
.ctnDiv {
|
width: 100%;
|
height: 443px;
|
|
.topDiv {
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
|
span {
|
font-size: 14px;
|
display: inline-block;
|
width: 70px;
|
margin-left: 20px;
|
}
|
|
.richTextDiv {
|
width: 94%;
|
}
|
}
|
|
.btmBtnDiv {
|
width: 100%;
|
display: flex;
|
margin-top: 10px;
|
padding-left: 98px;
|
}
|
}
|
}
|
}
|
.form-footer {
|
position: fixed;
|
height: 55px;
|
bottom: 32px;
|
width: 500px;
|
z-index: 99;
|
align-items: center;
|
display: flex;
|
justify-content: center;
|
background-color: #fff;
|
// margin-left: 20%;
|
}
|
</style>
|
