<template>
|
<div class="wrapbox">
|
<el-scrollbar style="width: 100%; height: 76vh" ref="scrollViewContainer">
|
<div class="viewbox-cont">
|
<h2>一、产品基本信息</h2>
|
<el-form :model="formData" ref="ruleFormRef" :rules="basicRules" style="width: 100%;" label-position="top">
|
<el-form-item prop="name">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.1 产品名称</div>
|
<div>
|
<el-input
|
v-model="formData.name"
|
maxlength="50"
|
show-word-limit
|
placeholder="请输入产品名称"
|
clearable
|
style="width: 100%"
|
:disabled="disabled"
|
/>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item
|
class="formitem"
|
prop="describe"
|
style="width: 100%"
|
>
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.2 产品描述</div>
|
<div>
|
<el-input
|
v-model="formData.describe"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入产品描述"
|
maxlength="1000"
|
show-word-limit
|
:disabled="disabled"
|
/>
|
</div>
|
</div>
|
</el-form-item>
|
<el-row>
|
<el-col :span="12" >
|
<el-form-item prop="technologyTypeId"><div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.3 产品技术类型</div>
|
<div>
|
<el-select
|
style="width:100%"
|
clearable
|
v-model="formData.technologyTypeId"
|
placeholder="请选择产品技术类型"
|
:disabled="disabled"
|
>
|
<el-option
|
v-for="item in state.productTechnologyCategory"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</div>
|
</div></el-form-item></el-col>
|
<el-col :span="12" style="padding-left: 20px;"> <el-form-item prop="businessTypeIdCopy"><div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.4 产品业务类型</div>
|
<div>
|
<!-- check-strictly 可选任意节点 -->
|
<el-tree-select
|
ref="businessTypeIdRef"
|
v-model="formData.businessTypeIdCopy"
|
:data="state.productBusinessCategory"
|
node-key="id"
|
placeholder="请选择产品业务类型"
|
:props="businessTypeProps"
|
clearable
|
:default-expand-all="true"
|
:render-after-expand="false"
|
style="width: 100%"
|
:disabled="disabled"
|
/>
|
<!-- <el-select
|
style="width:100%"
|
clearable
|
v-model="formData.businessTypeId"
|
placeholder="请选择产品业务类型"
|
:disabled="disabled"
|
>
|
<el-option
|
v-for="item in state.productBusinessCategory"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select> -->
|
</div>
|
</div></el-form-item></el-col>
|
</el-row>
|
<el-form-item prop="constructionUnit">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.5 建设单位</div>
|
<div>
|
<el-input
|
v-model="formData.constructionUnit"
|
placeholder="请输入建设单位"
|
:disabled="disabled"
|
clearable
|
style="width: 100%"
|
/>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item prop="submissionUnit">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.6 所属单位</div>
|
<el-input
|
v-model="formData.submissionUnit"
|
placeholder="请输入所属单位"
|
:disabled="disabled"
|
clearable
|
style="width: 100%"
|
/>
|
</div>
|
</el-form-item>
|
<el-form-item prop="industrialChainIdList">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.7 行业领域</div>
|
<el-select
|
v-model="formData.industrialChainIdList"
|
multiple
|
clearable
|
placeholder="请选择行业领域"
|
style="width: 100%"
|
:disabled="disabled"
|
@change="industrialCheckboxChange"
|
>
|
<el-option
|
v-for="item in state.classifyInfoType"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</div>
|
</el-form-item>
|
<el-form-item prop="importantAreaIdList">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.8 单位工程</div>
|
<el-tree-select
|
ref="areaIdTreeRef"
|
v-model="formData.importantAreaIdList"
|
:data="state.importantAreaType"
|
placeholder="请选择单位工程"
|
multiple
|
clearable
|
:default-expand-all="true"
|
:render-after-expand="false"
|
show-checkbox
|
style="width: 100%"
|
:disabled="disabled"
|
/>
|
</div>
|
</el-form-item>
|
<el-form-item prop="businessProcessIdList">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.9 业务环节</div>
|
<div class="">
|
<el-select
|
v-model="formData.businessProcessIdList"
|
multiple
|
clearable
|
placeholder="请选择业务环节"
|
popper-class="custom-header"
|
style="width: 100%"
|
:disabled="disabled"
|
@change="handleBusinessSelectChange"
|
>
|
<template #header>
|
<el-checkbox
|
v-model="checkAll"
|
:indeterminate="indeterminate"
|
@change="handleCheckAll"
|
>
|
全部
|
</el-checkbox>
|
</template>
|
<el-option
|
v-for="item in state.importantAreaTypeywhj"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</div>
|
</div>
|
</el-form-item>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item prop="serviceObject">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.10 服务对象</div>
|
<div>
|
<el-input
|
v-model="formData.serviceObject"
|
maxlength="100"
|
show-word-limit
|
placeholder="示例：公路客户；交通运输服务企业；上级政府主管部门；施工人员；"
|
clearable
|
:disabled="disabled"
|
style="width: 100%"
|
/>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item prop="ownershipId">
|
<div class="formitem" >
|
<div class="item-desc"><span class="xing">*</span> 1.11 产品权属</div>
|
<div>
|
<el-select
|
style="width:100%"
|
clearable
|
v-model="formData.ownershipId"
|
placeholder="请选择产品权属"
|
:disabled="state.routeData.informationEditType != 'add'"
|
>
|
<el-option
|
v-for="item in state.productOwnershipOption"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 1.12 产品联系人</div>
|
</div>
|
<el-row>
|
<el-col :span="4" >
|
<el-form-item prop="contacts">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 产品联系人姓名</div>
|
<div>
|
<el-input
|
v-model="formData.contacts"
|
placeholder="请输入姓名"
|
clearable
|
:disabled="disabled"
|
style="width: 100%"
|
/>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5" style="padding-left: 20px;">
|
<el-form-item prop="contactUnit">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 产品联系人单位</div>
|
<div>
|
<el-input
|
v-model="formData.contactUnit"
|
placeholder="请输入单位"
|
clearable
|
:disabled="disabled"
|
style="width: 100%"
|
/>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5" style="padding-left: 20px;">
|
<el-form-item prop="contactJob">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 产品联系人职务职称</div>
|
<div>
|
<el-input
|
v-model="formData.contactJob"
|
placeholder="请输入职务职称"
|
clearable
|
:disabled="disabled"
|
style="width: 100%"
|
/>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="5" style="padding-left: 20px;">
|
<el-form-item prop="contactNumber">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span> 产品联系人联系方式</div>
|
<div >
|
<el-input
|
v-model="formData.contactNumber"
|
placeholder="请输入联系方式"
|
clearable
|
:disabled="disabled"
|
style="width: 100%"
|
/>
|
</div>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item class="form-item picDiv" >
|
<div class="formitem" style="width: 100px;">
|
<div class="item-desc">1.13上传宣传图</div>
|
<template v-if="state.disabled">
|
<el-image
|
v-if="uploadImgUrl"
|
style="
|
position: relative;
|
width: 100px;
|
height: 100px;
|
cursor: pointer;
|
"
|
:src="uploadImgUrl"
|
:preview-src-list="[uploadImgUrl]"
|
>
|
</el-image>
|
<span class="" v-else>无</span>
|
</template>
|
<template v-else>
|
<singleImgUpload
|
v-model="state.formData.homeImage"
|
ref="uploadRef"
|
:tips="tips"
|
:fileList="fileList"
|
@update:fileList="uploadFile"
|
@removeFile="handleRemoveFile"
|
/>
|
</template>
|
</div>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" style="padding-left: 10px;">
|
<el-form-item class="form-item " prop="display">
|
<div class="formitem">
|
<div class="item-desc"><span class="xing">*</span>1.14 公开情况</div>
|
<el-radio-group v-model="state.formData.display">
|
<el-radio
|
v-for="item in state.displayOptions"
|
:label="item.name"
|
:value="item.code"
|
:key="item.code"
|
class="rad"
|
:disabled="state.disabled"
|
>
|
{{ item.name }}
|
</el-radio>
|
</el-radio-group>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="viewbox-cont" v-for="(oneItem,oneIndex) in state.formData.productDetailInfos" :key="oneIndex">
|
<h2>{{returnUpperNum(oneIndex)}}、{{oneItem.title}}</h2>
|
<template v-if="oneItem.children && oneItem.children.length>0">
|
<div class="formitem" v-for="(twoItem, twoIndex) in oneItem.children"
|
:key="twoIndex">
|
<div class="item-desc"><span v-if="twoItem.required=='1'" class="xing-tb">*</span><span class="titletxt">{{ oneIndex+2 }}.{{ twoIndex+1 }} {{twoItem.title}} </span></div>
|
<div class="formitem" v-for="(threeItem, threeIndex) in twoItem.children"
|
:key="threeIndex">
|
<div class="item-desc"><span v-if="threeItem.required=='1'" class="xing-tb">*</span><span class="titletxt">{{ oneIndex+2 }}.{{ twoIndex+1 }}.{{ threeIndex+1 }} {{threeItem.title}} </span></div>
|
<CommonElementBox
|
:ref="'FormEdit'+threeIndex"
|
:parentData="twoItem.children"
|
:dataItem="threeItem"
|
:dataIndex="threeIndex"
|
:dictObj="state.dictObj"
|
:disabled="disabled"
|
></CommonElementBox>
|
</div>
|
<CommonElementBox
|
:ref="'FormEdit'+twoIndex"
|
:parentData="oneItem.children"
|
:dataItem="twoItem"
|
:dataIndex="twoIndex"
|
:dictObj="state.dictObj"
|
:disabled="disabled"
|
></CommonElementBox>
|
</div>
|
</template>
|
<template v-else>
|
<CommonElementBox
|
:ref="'FormEdit'+oneIndex"
|
:parentData="state.formData.productDetailInfos"
|
:dataItem="oneItem"
|
:dataIndex="oneIndex"
|
:dictObj="state.dictObj"
|
:disabled="disabled"
|
></CommonElementBox>
|
</template>
|
</div>
|
<div
|
class="viewbox-cont"
|
>
|
<h2 class="h2-title"><span v-if="state.formData.productDetailInfos">
|
{{ numberToUpperCase(state.formData.productDetailInfos?.length + 1) }}、</span>上传视频</h2>
|
<uploadVideoInfo ref="uploadVideoRef" @uploadUpdataFun="handleVideoDataBack"/>
|
</div>
|
<div
|
class="viewbox-cont"
|
><h2 class="h2-title"><span v-if="state.formData.productDetailInfos">
|
{{ numberToUpperCase(state.formData.productDetailInfos?.length + 2) }}、</span>上传附件</h2>
|
<uploadFileInfo ref="uploadFileRef" @uploadUpdataFun="handleFileDataBack"/>
|
</div>
|
<div class="viewbox-cont" v-if="state.routeData?.informationEditType=='view'">
|
<h2>审批追踪</h2>
|
<div class="bodyBoxiframe" v-if="state.routeData.flowId">
|
<iframe
|
style="width: 100%; height: 700px; border: none"
|
:src="state.srcData"
|
></iframe>
|
</div>
|
<div v-else style="text-align: center; padding: 20px 0 10px">
|
当前状态下无追踪信息
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import productService from '@/api/zhongjian/productApi' // 接口文件
|
import uploadFileInfo from './uploadFileInfo.vue' // 上传文件、视频
|
import uploadVideoInfo from './uploadVideoInfo.vue' // 上传文件、视频
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
import router from '@/router'
|
import {numberToUpperCase} from '@/utils/common'
|
const userStore = useUserInfo() // 用户相关的状态管理器
|
const state= reactive<any>({
|
formData:{
|
display:'',
|
businessProcessIdList:[],
|
businessProcessNameList:[],
|
businessTypeIdCopy:'',//绑定值为了必填校验
|
businessTypeFirstId:'',//业务类型第一层
|
businessTypeFirstName:'',//业务类型第一层
|
businessTypeId:'',//业务类型第二层
|
businessTypeName:'',
|
businessTypeThirdId:'',//业务类型第三层
|
businessTypeThirdName:'',//业务类型第三层
|
constructionUnit:'',
|
contactJob:'',
|
contactNumber:'',
|
contactUnit:'',
|
contacts:'',
|
id:'',
|
industrialChainIdList:[],//行业领域第一层
|
industrialChainNameList:[],
|
importantDistrictIdList:[],//行业领域第二层
|
importantDistrictNameList:[],
|
importantAreaIdList:[],//行业领域第三层
|
importantAreaNameList:[],
|
name:'',
|
describe:'',
|
technologyTypeId:'',
|
technologyTypeName:'',
|
productDetailInfos:[],
|
videoList: [],
|
docList: [],
|
importantFullName:''
|
},
|
productionTecknCategory:[],//产品技术类型
|
productionBusinessCategory:[],
|
classifyInfoType:[],//行业领域
|
importantAreaType:[],//单位工程
|
importantAreaTypeywhj:[],//业务环节
|
dictObj:{
|
'ProductDifficulty':[],
|
"AwardGrade":[],
|
'ResourceCategory':[]
|
},
|
routeData:{
|
informationEditType:'',
|
id:''
|
},
|
currentRichData:'',
|
isSaveSubmit:false,
|
disabled:false,
|
displayOptions:[]
|
})
|
const {formData,disabled} = toRefs(state)
|
const uploadImgUrl = ref<string>('')
|
const ruleFormRef=ref()
|
const areaIdTreeRef=ref()
|
const businessTypeIdRef=ref()
|
const uploadFileRef = ref()
|
const uploadVideoRef = ref()
|
const basicRules=reactive<any>({
|
businessProcessIdList: [
|
{ required: true, message: '请选择', trigger: 'change' },
|
],
|
businessTypeIdCopy: [
|
{ required: true, message: '请选择', trigger: 'change' },
|
],
|
submissionUnit: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
],
|
constructionUnit: [{ required: true, message: '请输入', trigger: 'blur' }],
|
contactJob: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
],
|
contactNumber: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
],
|
contactUnit: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
],
|
contacts: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
],
|
importantAreaIdList: [
|
{ required: true,message: '请选择', trigger: 'change' },
|
],
|
industrialChainIdList: [
|
{ required: true, message: '请选择', trigger: 'change' },
|
],
|
name: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
],
|
describe: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
],
|
technologyTypeId: [
|
{ required: true, message: '请选择', trigger: 'change' },
|
],
|
serviceObject: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
],
|
ownershipId: [{ required: true, message: '请选择产品权属', trigger: 'change' }],
|
display: [{ required: true, message: '请选择公开情况', trigger: 'change' }],
|
})
|
const scrollViewContainer = ref()
|
const emit = defineEmits(['setDraftDisable', 'setSubmitDisable','returnCurrentApproStatus'])
|
const businessTypeProps = ref({
|
children: "children",
|
label: "name",
|
id: "id",
|
});
|
const handleVideoDataBack = (data: any) => {
|
state.formData.videoList = data
|
}
|
const handleFileDataBack = (data: any) => {
|
state.formData.docList = data
|
}
|
const uploadFileRow = () => {
|
const obj = {
|
typeData: 'file',
|
id: state.formData.id,
|
isView: state.disabled,
|
fileList: state.formData.docList || []
|
}
|
uploadFileRef.value?.visibleShowT(obj)
|
}
|
// 上传视频
|
const uploadVideoRow = () => {
|
const obj = {
|
typeData: 'video',
|
id: state.formData.id,
|
isView: state.disabled,
|
fileList: state.formData.videoList || []
|
}
|
uploadVideoRef.value?.visibleShowT(obj)
|
}
|
// --------上传
|
const uploadRef = ref()
|
const tips = ref('')
|
const fileList = ref<any[]>([])
|
const handleRemoveFile = () => {
|
state.formData.homeImage = ''
|
fileList.value = []
|
uploadImgUrl.value = ''
|
nextTick(() => {
|
uploadRef.value?.clearUploadFile()
|
})
|
}
|
// 回显图片
|
const imagePreviewShow = () => {
|
productService
|
.getPicUrlUrl({
|
fileId: state.formData.homeImage,
|
})
|
.then((res) => {
|
if (res.code == 200) {
|
const url = res.data.fileUrl
|
fileList.value = []
|
fileList.value = [
|
{
|
name: 'test',
|
url: url,
|
},
|
]
|
if (state.disabled) {
|
uploadImgUrl.value = res.data.fileUrl
|
} else {
|
nextTick(() => {
|
uploadRef.value.getPicUrlFun(url)
|
})
|
}
|
}
|
})
|
}
|
// 文件上传返回值
|
const uploadFile = (data: any) => {
|
state.formData.homeImage = data
|
// 清除必填校验
|
ruleFormRef.value?.clearValidate(['homeImage'])
|
}
|
// 保存草稿
|
const saveBasicDraft = () => {
|
state.isSaveSubmit = false
|
saveBasicInfos()
|
}
|
const saveBasicInfos=()=>{
|
return new Promise((resolve: any) => {
|
ruleFormRef.value?.validate((valid: any) => {
|
if (valid) {
|
// 提交或者是审批通过的，需要校验json必填及contentName的保存
|
if (state.isSaveSubmit || state.formData.approStatus=='2'|| state.formData.approStatus=='1'|| state.formData.approStatus=='0') {
|
for(let i=0;i<state.formData.productDetailInfos.length;i++){
|
let oneChildren=state.formData.productDetailInfos[i].children
|
if(oneChildren&&oneChildren.length>0){
|
for(let j=0;j<oneChildren.length;j++){
|
let msgObj1:any=dataFilter(oneChildren[j],j)
|
if(!msgObj1.isFillout){
|
ElNotification({
|
type: 'warning',
|
message: '星号*为必填项，请填写完成！',
|
})
|
emit('setDraftDisable',false)
|
emit('setSubmitDisable',false)
|
resolve(false)
|
return
|
}
|
let twoChildren=oneChildren[j]?.children
|
if(twoChildren && twoChildren.length>0){
|
for(let k=0;k<twoChildren.length;k++){
|
let msgObj2:any=dataFilter(twoChildren[k],k)
|
if(!msgObj2.isFillout){
|
ElNotification({
|
type: 'warning',
|
message: '星号*为必填项，请填写完成！',
|
})
|
emit('setDraftDisable',false)
|
emit('setSubmitDisable',false)
|
resolve(false)
|
return
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
// 行业
|
state.formData.industrialChainNameList=[]
|
for (let item of state.classifyInfoType) {
|
for(let sub of state.formData.industrialChainIdList){
|
if(item.id== sub){
|
state.formData.industrialChainNameList.push(item.name)
|
}
|
}
|
}
|
let checkedKeys = areaIdTreeRef.value!.getCheckedNodes(false, true)
|
if(checkedKeys&&checkedKeys.length>0){
|
state.formData.importantAreaNameList=[]
|
state.formData.importantDistrictIdList=[]
|
state.formData.importantDistrictNameList=[]
|
let importantFullNameArr:any=[]
|
checkedKeys.forEach((item:any)=>{
|
if(item.children&&item.children.length>0){
|
state.formData.importantDistrictIdList.push(item.value)
|
state.formData.importantDistrictNameList.push(item.label)
|
item.children.forEach((third:any)=>{
|
if(state.formData.importantAreaIdList.includes(third.value)){
|
state.formData.importantAreaNameList.push(third.label)
|
importantFullNameArr.push(`${item.parentName}-${item.label}-${third.label}`)
|
}
|
})
|
}
|
})
|
state.formData.importantFullName=importantFullNameArr.length>0?importantFullNameArr.join():''
|
}
|
// 产品业务类型
|
let businessTypeKey= businessTypeIdRef.value!.getCurrentNode()
|
if(businessTypeKey){
|
state.formData.businessTypeFirstId=businessTypeKey.firstId
|
state.formData.businessTypeFirstName=businessTypeKey.firstName
|
state.formData.businessTypeId=businessTypeKey.secondId
|
state.formData.businessTypeName=businessTypeKey.secondName
|
state.formData.businessTypeThirdId=businessTypeKey.thirdId
|
state.formData.businessTypeThirdName=businessTypeKey.thirdName
|
}
|
|
// 产品技术类型name获取
|
state.formData.technologyTypeName=''
|
for (let item of state.productTechnologyCategory) {
|
if(item.id== state.formData.technologyTypeId){
|
state.formData.technologyTypeName=item.name
|
break;
|
}
|
}
|
//业务环节name获取
|
state.formData.businessProcessNameList=[]
|
state.formData.businessProcessIdList.forEach((id:any)=>{
|
state.importantAreaTypeywhj.forEach((sub:any)=>{
|
if(id==sub.id){
|
state.formData.businessProcessNameList.push(sub.name)
|
}
|
})
|
})
|
// 产品权属
|
state.formData.ownershipName=''
|
for (let item of state.productOwnershipOption) {
|
if(item.id== state.formData.ownershipId){
|
state.formData.ownershipName=item.name
|
break;
|
}
|
}
|
|
let param:any={
|
...state.formData,
|
}
|
if(state.formData.id){
|
//修改
|
productService.updateProductInfo(param).then((res:any)=>{
|
if(res.code==200){
|
if(!state.isSaveSubmit){
|
ElNotification({
|
type: 'success',
|
message: '修改成功！',
|
})
|
} emit('setDraftDisable',false)
|
resolve(true)
|
}else{
|
emit('setDraftDisable',false)
|
}
|
}).catch(()=>{
|
emit('setDraftDisable',false)
|
})
|
}else{
|
// 新增
|
productService.createProductInfo(param).then((res:any)=>{
|
if(res.code==200){
|
state.formData.id=res.data.id
|
state.routeData.id=res.data.id
|
if(!state.isSaveSubmit){
|
ElNotification({
|
type: 'success',
|
message: '新增成功！',
|
})
|
}
|
emit('setDraftDisable',false)
|
resolve(true)
|
}else{
|
emit('setDraftDisable',false)
|
}
|
}).catch(()=>{
|
emit('setDraftDisable',false)
|
})
|
}
|
}else{
|
ElNotification({
|
type: 'warning',
|
message: '星号*为必填项，请填写完成！',
|
})
|
emit('setDraftDisable',false)
|
emit('setSubmitDisable',false)
|
resolve(false)
|
}
|
})
|
})
|
}
|
const dataFilter=(item:any,index:number)=>{
|
let isFillout=true // 必填项是否填写，true 填了 false 没填
|
if(item.required==1){
|
if(item.type=='input'){
|
if(item.content==''){
|
isFillout=false
|
}
|
}
|
|
if(item.type=='textarea'){
|
if(item.content=='' || item.content=='<p><br></p>'){
|
isFillout=false
|
}
|
}
|
}
|
if(item.type=='singleSelect'){
|
if(item.required==1&&item.content==''){
|
isFillout=false
|
}
|
else{
|
item.contentName='' //定义下拉选择的name
|
let list:any= state.dictObj[item.dictCode]
|
list.forEach((dictItem:any)=>{
|
let name=returnContentName(dictItem,item.content)
|
if(name) item.contentName=name
|
})
|
}
|
}
|
if(item.type=='multipleSelect'){
|
if(item.required==1&&(item.content=='' || item.content?.length==0)){
|
isFillout=false
|
}
|
else{
|
item.contentName=[] //定义下拉选择的name
|
let list:any= state.dictObj[item.dictCode]
|
item.content.forEach((id:any)=>{
|
list.forEach((itm:any)=>{
|
if(id==itm.id){
|
item.contentName.push(itm.name)
|
}
|
if(itm?.children&&itm.children.length>0){
|
itm.children.forEach((sub:any)=>{
|
if(id==sub.id){
|
item.contentName.push(sub.name)
|
}
|
})
|
}
|
})
|
})
|
}
|
}
|
if(item.type=='singleTree'){
|
if(item.required==1&&item.content==''){
|
isFillout=false
|
}
|
else{
|
item.contentName='' //定义下拉选择的name
|
let list:any= state.dictObj[item.dictCode]
|
let nameTxt=returnParentChilLabel(list,item.content)
|
if(nameTxt) item.contentName=nameTxt
|
}
|
}
|
if(item.type=="multipleTree"){
|
if(item.required==1&&(item.content=='' || item.content?.length==0)){
|
isFillout=false
|
}
|
else{
|
item.contentName=[] //定义下拉选择的name
|
let list:any= state.dictObj[item.dictCode]
|
item.content.forEach((id:any)=>{
|
list.forEach((itm:any)=>{
|
if(id==itm.value){
|
item.contentName.push(itm.label)
|
}
|
if(itm?.children&&itm.children.length>0){
|
itm.children.forEach((sub:any)=>{
|
if(id==sub.value){
|
item.contentName.push(sub.label)
|
}
|
})
|
}
|
})
|
})
|
}
|
}
|
|
if(item.type=='table'){
|
item.tableHead.forEach((colum:any)=>{
|
let key:string=colum.prop
|
item.tableData.forEach((tr:any)=>{
|
if(colum.required==1&&(!tr[key]||tr[key]=='')){
|
isFillout=false //没填
|
}
|
})
|
if(colum.type=='multipleSelect'){
|
item.tableData.forEach((tr:any)=>{
|
tr[colum.prop+'Name']=''
|
if(colum.required==1&&tr[key]==''){
|
isFillout=false //没填
|
}else{
|
if(tr[key]&&tr[key].length&&tr[key].length>0){ //tr[key] 是当前下拉框的值 idArr
|
let options:any= state.dictObj[colum.dictCode]//获取当前字典项下拉数据源
|
let idArr=tr[key],nameArr:any=[];
|
idArr.forEach((id:any)=>{
|
options.forEach((dictItem:any)=>{
|
let name=returnContentName(dictItem,id)
|
if(name) nameArr.push(name)
|
})
|
})
|
if(nameArr&&nameArr.length>0){
|
tr[colum.prop+'Name']=nameArr.join()
|
}
|
}
|
}
|
})
|
}
|
if(colum.type=='singleSelect'){
|
item.tableData.forEach((tr:any)=>{
|
tr[colum.prop+'Name']=''
|
if(colum.required==1&&tr[key]==''){
|
isFillout=false //没填
|
}else{
|
if(tr[key]!=''){ //tr[key] 是当前下拉框的值 id
|
let options:any= state.dictObj[colum.dictCode]//获取当前字典项下拉数据源
|
options.forEach((dictItem:any)=>{
|
let name=returnContentName(dictItem,tr[key])
|
if(name) tr[colum.prop+'Name']=name
|
})
|
}
|
}
|
})
|
}
|
if(colum.type=='multipleTree'){
|
item.tableData.forEach((tr:any)=>{
|
tr[colum.prop+'Name']=''
|
if(colum.required==1&&tr[key]==''){
|
isFillout=false //没填
|
}else{
|
if(tr[key]&&tr[key].length&&tr[key].length>0){ //tr[key] 是当前下拉框的值 idArr
|
let options:any= state.dictObj[colum.dictCode]//获取当前字典项下拉数据源
|
let idArr=tr[key],nameArr:any=[];
|
idArr.forEach((id:any)=>{
|
let nameTxt=returnParentChilLabel(options,id)
|
if(nameTxt) nameArr.push(nameTxt)
|
})
|
if(nameArr&&nameArr.length>0){
|
tr[colum.prop+'Name']=nameArr.join()
|
}
|
}
|
}
|
})
|
}
|
if(colum.type=='singleTree'){
|
item.tableData.forEach((tr:any)=>{
|
tr[colum.prop+'Name']=''
|
if(colum.required==1&&tr[key]==''){
|
isFillout=false //没填
|
}else{
|
if(tr[key]!=''){ //tr[key] 是当前下拉框的值 id
|
let options:any= state.dictObj[colum.dictCode]//获取当前字典项下拉树数据源
|
let nameTxt=returnParentChilLabel(options,tr[key])
|
if(nameTxt) tr[colum.prop+'Name']=nameTxt
|
}
|
}
|
})
|
}
|
})
|
}
|
return {
|
isFillout:isFillout
|
}
|
}
|
// dictObj当前的字典下拉数据源；id:是选择框选择的id
|
const returnContentName=(dictObj:any,selectId:any)=>{
|
if(dictObj.id==selectId){
|
return dictObj.name
|
}
|
if(dictObj.children&&dictObj.children.length>0){
|
dictObj.children.forEach((sub:any)=>{
|
returnContentName(sub,selectId)
|
})
|
}
|
}
|
// dictObj当前的字典下拉树-数据源；id:是选择框选择的id name 是【父级name+子name】
|
const returnParentChilLabel=(options:any,selectId:any)=>{
|
for(let i=0;i<options.length;i++){
|
if(options[i].value==selectId){
|
return options[i].label
|
}
|
if(options[i].children&&options[i].children.length>0){
|
for(let j=0;j<options[i].children.length;j++){
|
let sub=options[i].children[j]
|
if(sub.value==selectId){
|
return sub.parentName+'-'+sub.label;
|
}
|
}
|
}
|
}
|
}
|
const returnContentLabel=(dictObj:any,selectId:any)=>{
|
if(dictObj.value==selectId){
|
return dictObj.label
|
}
|
if(dictObj.children&&dictObj.children.length>0){
|
for(let i=0;i<dictObj.children.length;i++){
|
let name:any=returnContentLabel(dictObj.children[i],selectId)
|
if(name) return name
|
}
|
}
|
}
|
const submitForm = () => {
|
productService.submitUrl({ id: state.formData.id }).then((res: any) => {
|
if (res.code == 200) {
|
ElNotification({
|
type: 'success',
|
message: '提交成功！',
|
})
|
goBackList()
|
emit('setDraftDisable',false)
|
emit('setSubmitDisable',false)
|
}
|
}).catch(()=>{
|
emit('setDraftDisable',false)
|
emit('setSubmitDisable',false)
|
})
|
}
|
const submitClick=(val?:boolean)=>{
|
ElMessageBox.confirm('确定要提交吗?', '提醒', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => {
|
state.isSaveSubmit = true
|
// if(val){}
|
saveBasicInfos().then((res:any)=>{
|
if(res && state.isSaveSubmit){
|
submitForm()
|
emit('setDraftDisable',false)
|
}
|
})
|
})
|
.catch(() => {
|
emit('setSubmitDisable',false)
|
})
|
|
}
|
const returnUpperNum=computed(()=>{
|
return function(num:any){
|
if(num===0){
|
return '二'
|
}
|
if(num===1){
|
return '三'
|
}
|
if(num===2){
|
return '四'
|
}
|
if(num===3){
|
return '五'
|
}
|
if(num===4){
|
return '六'
|
}
|
}
|
})
|
// 下拉多选带checkbox----------------------------------------------
|
const indeterminate=ref()
|
const checkAll=ref()
|
const handleBusinessSelectChange=(val:any)=>{
|
if (val.length === 0) {
|
checkAll.value = false
|
indeterminate.value = false
|
} else if (val.length === state.importantAreaTypeywhj.length) {
|
checkAll.value = true
|
indeterminate.value = false
|
} else {
|
indeterminate.value = true
|
}
|
nextTick(()=>{
|
ruleFormRef.value.clearValidate(['businessProcessIdList'])
|
})
|
}
|
const handleCheckAll=(val: any) => {
|
indeterminate.value = false
|
if (val) {
|
state.formData.businessProcessIdList = state.importantAreaTypeywhj.map((_:any) => _.id)
|
} else {
|
state.formData.businessProcessIdList = []
|
}
|
nextTick(()=>{
|
ruleFormRef.value.clearValidate(['businessProcessIdList'])
|
})
|
}
|
// 产品技术类型
|
const getProductTechnologyType=()=>{
|
productService
|
.getProductDict({
|
parentCode: 'ProductTechnologyType',
|
})
|
.then((res: any) => {
|
state.productTechnologyCategory = res.data
|
})
|
}
|
const getProductBusinessCategory=()=>{
|
productService
|
.getResourceCategory({
|
parentCode: 'ProductBusinessType',
|
})
|
.then((res: any) => {
|
res.data.forEach((item:any)=>{
|
item.firstId=item.id
|
item.firstName=item.name
|
item.secondId=''
|
item.secondName=''
|
item.thirdId=''
|
item.thirdName=''
|
if(item.children&&item.children.length>0){
|
item.children.forEach((sub:any)=>{
|
sub.firstId=item.id
|
sub.firstName=item.name
|
sub.secondId=sub.id
|
sub.secondName=sub.name
|
sub.thirdId=''
|
sub.thirdName=''
|
if(sub.children&&sub.children.length>0){
|
sub.children.forEach((last:any)=>{
|
last.firstId=item.id
|
last.firstName=item.name
|
last.secondId=sub.id
|
last.secondName=sub.name
|
last.thirdId=last.id
|
last.thirdName=last.name
|
})
|
}
|
})
|
}
|
})
|
state.productBusinessCategory = res.data
|
console.log('产品业务类型', state.productBusinessCategory)
|
})
|
}
|
const goBackList = () => {
|
clearData()
|
scrollViewContainer.value.scrollTo({ top: 0 })
|
router.push({
|
path: state.routeData?.backPath ||"/safety/performance/meritRatingManage",
|
})
|
}
|
const clearData=()=>{
|
checkAll.value = false
|
indeterminate.value = false
|
state.formData={
|
display:'',
|
businessProcessIdList:[],
|
businessProcessNameList:[],
|
businessTypeIdCopy:'',//绑定值为了必填校验
|
businessTypeFirstId:'',//业务类型第一层
|
businessTypeFirstName:'',//业务类型第一层
|
businessTypeId:'',//业务类型第二层
|
businessTypeName:'',
|
businessTypeThirdId:'',//业务类型第三层
|
businessTypeThirdName:'',//业务类型第三层
|
constructionUnit:'',
|
contactJob:'',
|
contactNumber:'',
|
contactUnit:'',
|
contacts:'',
|
id:'',
|
industrialChainIdList:[],//行业领域第一层
|
industrialChainNameList:[],
|
importantDistrictIdList:[],//行业领域第二层
|
importantDistrictNameList:[],
|
importantAreaIdList:[],//行业领域第三层
|
importantAreaNameList:[],
|
productDetailInfos:[],
|
name:'',
|
describe:'',
|
technologyTypeId:'',
|
technologyTypeName:'',
|
importantFullName:''
|
}
|
nextTick(()=>{
|
ruleFormRef.value.clearValidate()
|
})
|
}
|
// -----------------------------------------------------------------
|
// 下拉数据-行业领域
|
const categoryListUrlFun = () => {
|
const searchList = {
|
parentCode:"business_direction"
|
}
|
productService
|
.getProductDict({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.classifyInfoType = [...res.data]
|
}
|
})
|
}
|
const industrialCheckboxChange=(val:any)=>{
|
state.formData.importantAreaIdList=[]
|
categoryListUrlqyFun(val)
|
nextTick(()=>{
|
ruleFormRef.value.clearValidate(['importantAreaIdList'])
|
})
|
}
|
const handleIndustryData=(list:any)=>{
|
if(list&& list.length>0){
|
let data=list.map((item:any)=>{
|
return {
|
label:item.name,
|
value:item.id,
|
parentId:item.parentId,
|
parentName:item.parentName,
|
children:item.children?handleIndustryChildData(item,item.children):[]
|
}
|
})
|
return data
|
}
|
}
|
const handleIndustryChildData=(parentItem:any,childList:any)=>{
|
if(childList&& childList.length>0){
|
let data=childList.map((item:any)=>{
|
return {
|
parentId:parentItem.id,
|
parentName:parentItem.name,
|
label:item.name,
|
value:item.id,
|
children:item.children?handleIndustryChildData(item,item.children):[]
|
}
|
})
|
return data
|
}
|
}
|
// 下拉数据-单位工程
|
const categoryListUrlqyFun = (idList:any) => {
|
productService
|
.getResourceCategory({
|
parentIdList:idList
|
})
|
.then((res: any) => {
|
let data=handleIndustryData(res.data)
|
state.importantAreaType = data
|
nextTick(()=>{
|
ruleFormRef.value.clearValidate(['importantAreaIdList'])
|
})
|
})
|
}
|
|
// 下拉数据-产业阶段
|
const categoryListUrlqyFunywhj = () => {
|
const searchList = {
|
parentCode: 'important_code',
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
state.importantAreaTypeywhj = [...res.data]
|
}
|
})
|
}
|
|
const getProductDifficulty=()=>{
|
productService
|
.getProductDict({
|
parentCode: 'ProductDifficulty',
|
})
|
.then((res: any) => {
|
state.dictObj['ProductDifficulty'] = res.data
|
})
|
}
|
// 根据父级编码查询字典（嵌套子级）
|
const getSingleTreeByParantCode = (code:string) => {
|
const searchList = {
|
parentCode: code,
|
}
|
productService.getResourceCategory({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
if(res.data&&res.data.length>0){
|
let data=handleIndustryData(res.data)
|
let parentCode=res.data[0].parentCode
|
state.dictObj[parentCode]=data
|
}
|
}
|
})
|
}
|
// 普通的产品字典select
|
const getProductDictByJsonInfo=(code:string)=>{
|
productService
|
.getProductDict({
|
parentCode: code,
|
})
|
.then((res: any) => {
|
if (res.code == 200) {
|
if(res.data&&res.data.length>0){
|
let parentCode=res.data[0].parentCode
|
state.dictObj[parentCode] = res.data
|
}
|
}
|
})
|
}
|
const getJsonDictByData=(json:any)=>{
|
if(json&&json.length>0){
|
json.forEach((item:any)=>{
|
if(item.type=='singleSelect'){
|
getProductDictByJsonInfo(item.dictCode)
|
}
|
if(item.type=='singleTree'){
|
getSingleTreeByParantCode(item.dictCode)
|
}
|
if(item.type=='multipleTree'){
|
getSingleTreeByParantCode(item.dictCode)
|
}
|
if(item.type=='table'){
|
if(item.tableHead&&item.tableHead.length>0){
|
getJsonDictByData(item.tableHead)
|
}
|
}
|
if(item.children&&item.children.length>0){
|
getJsonDictByData(item.children)
|
}
|
})
|
}
|
}
|
const getAwardLevelList=()=>{
|
productService
|
.getProductDict({
|
parentCode: 'AwardGrade',
|
})
|
.then((res: any) => {
|
state.dictObj['AwardGrade'] = res.data
|
})
|
}
|
|
const getDetail=()=>{
|
productService
|
.getProductDetail({
|
id:state.routeData.id
|
})
|
.then((res: any) => {
|
if(res.code==200){
|
state.formData = res.data
|
uploadFileRow()
|
uploadVideoRow()
|
if(res.data.industrialChainIdList&&res.data.industrialChainIdList.length>0){
|
categoryListUrlqyFun(res.data.industrialChainIdList)
|
}
|
// 回显图片
|
if (state.formData.homeImage) {
|
imagePreviewShow()
|
}
|
// 返回审批状态 给提交按钮判断是否显示， 3 4 显示
|
emit('returnCurrentApproStatus',state.formData.approStatus)
|
getJsonDictByData(state.formData.productDetailInfos)
|
handleBusinessSelectChange(state.formData.businessProcessIdList)
|
if(state.formData.businessTypeThirdId){
|
state.formData.businessTypeIdCopy=state.formData.businessTypeThirdId
|
return
|
}
|
if(state.formData.businessTypeId){
|
state.formData.businessTypeIdCopy=state.formData.businessTypeId
|
return
|
}
|
if(state.formData.businessTypeFirstId){
|
state.formData.businessTypeIdCopy=state.formData.businessTypeFirstId
|
return
|
}
|
}
|
})
|
}
|
// 产品权属
|
const getProductOwnershipOptions=()=>{
|
productService
|
.getProductDict({
|
parentCode: 'ProductOwnership',
|
})
|
.then((res: any) => {
|
state.productOwnershipOption = res.data
|
})
|
}
|
const getReadTemplateInfo=()=>{
|
productService
|
.getReadTemplate()
|
.then((res: any) => {
|
state.formData.productDetailInfos = res.data.productDetailInfos
|
state.formData.submissionUnit=userStore.getUserInfo.fullUnitName
|
getJsonDictByData(state.formData.productDetailInfos)
|
state.formData.docList = []
|
state.formData.videoList = []
|
nextTick(()=>{
|
ruleFormRef.value.clearValidate()
|
})
|
})
|
}
|
const getDisplayOptions=()=>{
|
const searchList = {
|
parentCode: 'PUBLIC_STATUS',
|
}
|
productService.categoryListUrl({...searchList}).then((res: any) => {
|
if (res.code == 200) {
|
state.displayOptions = res.data
|
if(state.routeData.informationEditType == 'add'){
|
state.formData.display=res.data[0].code
|
}
|
}
|
})
|
}
|
|
const setData=(data:any)=>{
|
console.log('setData',data)
|
state.routeData = data
|
clearData()
|
getProductTechnologyType()
|
getProductBusinessCategory()
|
// 行业领域
|
categoryListUrlFun()
|
//产业阶段
|
categoryListUrlqyFunywhj()
|
// 表格中的字典
|
getProductDifficulty()
|
getAwardLevelList()
|
getProductOwnershipOptions()
|
// 公开情况
|
getDisplayOptions()
|
state.disabled = false
|
if (
|
data.informationEditType == 'edit' ||
|
data.informationEditType == 'view' ||
|
data.informationEditType == "approver"
|
) {
|
getDetail()
|
if(data.informationEditType == 'view' || data.informationEditType == "approver"){
|
state.disabled = true
|
const history_url: string = import.meta.env.VITE_IFREAM_URL as string
|
if (data.flowId) {
|
state.srcData = `${history_url}/activity/history?processinstId=${data.flowId}&token=${state.routeData.token}`
|
}
|
}
|
}
|
else if(data.informationEditType == 'add'){
|
getReadTemplateInfo()
|
state.disabled=false
|
handleRemoveFile()
|
uploadFileRow()
|
uploadVideoRow()
|
}
|
nextTick(()=>{
|
ruleFormRef.value.clearValidate()
|
})
|
}
|
defineExpose({ setData,saveBasicDraft,submitClick,goBackList })
|
</script>
|
<style scoped lang="scss">
|
.wrapbox{
|
border:1px solid #dce6f4 ;
|
border-radius: 4px;
|
}
|
.viewbox-cont {
|
padding: 10px;
|
h2 {
|
padding: 6px 15px;
|
background-color: #dce6f4;
|
color: #5b6ad8;
|
font-size: 17px;
|
border: 1px solid #bbc6fc;
|
border-radius: 4px;
|
}
|
}
|
.formitem{
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
}
|
.item-desc{
|
display: flex;
|
margin-top: 12px;
|
font-weight: 600;
|
align-items: center;
|
position: relative;
|
height: 25px;
|
.xing{
|
font-size: 24px;
|
color: rgb(247, 23, 23);
|
padding-right:5px;
|
padding-top: 9px;
|
display: flex;
|
}
|
.titletxt{
|
padding-bottom: 5px;
|
}
|
.xing-tb{
|
font-size: 24px;
|
color: rgb(247, 23, 23);
|
padding-right:5px;
|
padding-top: 5px;
|
}
|
}
|
.borderbox{
|
border: 1px solid #dddddd;
|
padding: 0px 10px;
|
width: 100%;
|
border-radius: 4px;
|
.el-radio-group{
|
.el-radio--large{
|
|
}
|
}
|
|
}
|
.customTh{
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.xing-tb{
|
display: inline-block;
|
font-size: 24px;
|
color: rgb(247, 23, 23);
|
padding-right: 5px;
|
}
|
}
|
:deep(.el-tag.el-tag--info){
|
border: 1px solid #e4e4e4;
|
border-radius: 3px;
|
background-color: #f8f8f8;
|
}
|
:deep(.el-form-item){
|
margin-bottom: 0px;
|
}
|
.table{
|
width: 100%;
|
}
|
.btnicon{
|
cursor: pointer;
|
&:hover{
|
color:#5b6ad8
|
}
|
}
|
.rowBtnDiv{
|
display: flex;
|
justify-content: center;
|
}
|
.addbtn{
|
margin-top: 10px;
|
}
|
.footerbtns{
|
display: flex;
|
justify-content: center;
|
}
|
.footerbtn{
|
margin: 10px 10px;
|
}
|
:deep(.el-form-item__label){
|
margin: 2px 0;
|
font-size: 14px;
|
font-weight: 600;
|
}
|
</style>
|
|
