<template>
|
<div class="basic-info">
|
<!-- <el-scrollbar style="width: 100%"> -->
|
<el-form
|
ref="ruleFormRef"
|
:model="state.basicInfoForm"
|
:rules="rules"
|
class="basic-info-form"
|
>
|
<el-form-item class="form-item-mb10" label="产品名称" prop="name">
|
<el-input
|
v-model="state.basicInfoForm.name"
|
:disabled="state.disabledData"
|
clearable
|
placeholder="请输入产品名称"
|
maxlength="100"
|
show-word-limit
|
/>
|
</el-form-item>
|
<el-form-item class="form-item-mb10" label="产品描述" prop="describe">
|
<el-input
|
v-model="state.basicInfoForm.describe"
|
:disabled="state.disabledData"
|
type="textarea"
|
:rows="2"
|
placeholder="请输入产品描述"
|
maxlength="2000"
|
show-word-limit
|
/>
|
</el-form-item>
|
|
<!-- <el-form-item class="form-item" label="发布范围" prop="scopeIdList">-->
|
<!-- <!– <el-tree-select–>-->
|
<!-- <!– v-model="state.basicInfoForm.scopeIdList"–>-->
|
<!-- <!– :data="companyListType"–>-->
|
<!-- <!– multiple–>-->
|
<!-- <!– ref="tree"–>-->
|
<!-- <!– show-checkbox–>-->
|
<!-- <!– :render-after-expand="false"–>-->
|
<!-- <!– style="width: 240px"–>-->
|
<!-- <!– @node-click="nodeClickFun"–>-->
|
<!-- <!– :disabled="state.disabledData"–>-->
|
<!-- <!– />–>-->
|
<!-- <el-tree-select-->
|
<!-- v-if="treeDataStatus"-->
|
<!-- v-model="state.basicInfoForm.scopeIdList"-->
|
<!-- :data="companyListType"-->
|
<!-- show-checkbox-->
|
<!-- :lazy="true"-->
|
<!-- :load="lazyLoad"-->
|
<!-- :props="propsData"-->
|
<!-- ref="tree"-->
|
<!-- multiple-->
|
<!-- :default-expand-all="state.defaultAll"-->
|
<!-- node-key="id"-->
|
<!-- value-key="id"-->
|
<!-- check-strictly-->
|
<!-- :render-after-expand="false"-->
|
<!-- style="width: 240px"-->
|
<!-- :default-expanded-keys="expandedKeys"-->
|
<!-- :default-checked-keys="state.basicInfoForm.scopeIdList"-->
|
<!-- @current-change="currentChange"-->
|
<!-- @node-click="nodeClickFun"-->
|
<!-- @check="checkChange2"-->
|
<!-- :disabled="state.disabledData"-->
|
<!-- />-->
|
<!-- </el-form-item>-->
|
|
<div class="groupDiv">
|
<el-form-item
|
class="form-item-mb10"
|
label="行业领域"
|
prop="industrialChainIdList"
|
>
|
<el-checkbox-group
|
v-model="state.basicInfoForm.industrialChainIdList"
|
@change="industrialChainChange"
|
>
|
<el-checkbox
|
v-for="item in industrialChainType"
|
:disabled="state.disabledData"
|
:label="item.name"
|
:value="item.id"
|
:key="item.id"
|
>
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<el-form-item
|
class="form-item-mb10"
|
label="单位工程"
|
prop="importantAreaIdList"
|
>
|
<el-checkbox-group
|
v-model="state.basicInfoForm.importantAreaIdList"
|
@change="importantAreaChange"
|
>
|
<el-checkbox
|
v-for="item in importantAreaType"
|
:disabled="state.disabledData"
|
:label="item.name"
|
:value="item.id"
|
:key="item.id"
|
>
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</div>
|
<div class="groupDiv" style="border-top-width: 0px">
|
<el-form-item
|
class="form-item-mb10"
|
label="产业阶段"
|
prop="businessProcessIdList"
|
>
|
<el-checkbox-group
|
v-model="state.basicInfoForm.businessProcessIdList"
|
@change="businessProcessChange"
|
>
|
<el-checkbox
|
v-for="item in importantAreaTypeywhj"
|
:disabled="state.disabledData"
|
:label="item.name"
|
:value="item.id"
|
:key="item.id"
|
>
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</div>
|
<!-- <el-form-item class="form-item" label="产业阶段" prop="businessProcessName">-->
|
<!-- <el-radio-group v-model="state.basicInfoForm.businessProcessName" @change="businessProcessChange">-->
|
<!-- <el-radio v-for="item in importantAreaTypeywhj" :disabled="state.disabledData" :label="item.name"-->
|
<!-- :value="item.id"-->
|
<!-- :key="item.id">-->
|
<!-- {{-->
|
<!-- item.name-->
|
<!-- }}-->
|
<!-- </el-radio>-->
|
<!-- </el-radio-group>-->
|
<!-- </el-form-item>-->
|
|
<div class="groupDiv" style="border-top-width: 0px">
|
<el-form-item class="form-item-mb10" label="产品类型" prop="typeId">
|
<el-radio-group
|
v-model="state.basicInfoForm.typeId"
|
@change="typeNameChange"
|
>
|
<el-radio
|
v-for="item in importantAreaTypecplxfl"
|
:disabled="state.disabledData"
|
:label="item.name"
|
:value="item.id"
|
:key="item.id"
|
>
|
{{ item.name }}
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item
|
class="form-item-mb10"
|
label="产品类型子类"
|
prop="typeChildId"
|
>
|
<el-radio-group
|
v-model="state.basicInfoForm.typeChildId"
|
@change="typeChildNameChange"
|
>
|
<el-radio
|
v-for="item in importantAreaTypecplxzl"
|
:disabled="state.disabledData"
|
:label="item.name"
|
:value="item.id"
|
:key="item.id"
|
>
|
{{ item.name }}
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
<div class="groupDiv" style="border-top-width: 0px; margin-bottom: 10px">
|
<el-form-item class="form-item-mb10" label="查看方式" prop="lookId">
|
<el-radio-group
|
v-model="state.basicInfoForm.lookId"
|
@change="lookNameChange"
|
>
|
<el-radio
|
v-for="item in importantAreaTypecpckfs"
|
:disabled="state.disabledData"
|
:label="item.name"
|
:value="item.id"
|
:key="item.id"
|
>
|
{{ item.name }}
|
</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
<el-form-item
|
class="form-item-mb10"
|
label="报价体系"
|
prop="quotationSystemId"
|
style="max-width: 600px"
|
>
|
<UploadFile
|
ref="filePdfWdRef"
|
:tips="filetips"
|
acceptType=".docx,.pdf"
|
:fileList="fileListArr"
|
@update:fileList="uploadFilePdfWd"
|
@removeFile="handleRemoveFilePdfWd"
|
style="width: 100%"
|
></UploadFile>
|
</el-form-item>
|
|
<el-form-item
|
class="form-item picDiv"
|
label="上传宣传图"
|
>
|
<singleImgUpload
|
v-model="state.basicInfoForm.homeImage"
|
ref="uploadRef"
|
:tips="tips"
|
:fileList="fileList"
|
@update:fileList="uploadFile"
|
@removeFile="handleRemoveFile"
|
/>
|
<!-- <div class="zhanweiDiv"></div> -->
|
</el-form-item>
|
|
<!-- <el-form-item class="form-item" label="软件类型" prop="probationType">-->
|
<!-- <el-radio-group v-model="state.basicInfoForm.probationType" @change="importantAreaChangerj">-->
|
<!-- <el-radio v-for="item in importantAreaTyperj" :disabled="state.disabledData" :label="item.name"-->
|
<!-- :value="item.id"-->
|
<!-- :key="item.id">-->
|
<!-- {{-->
|
<!-- item.name-->
|
<!-- }}-->
|
<!-- </el-radio>-->
|
<!-- </el-radio-group>-->
|
<!-- </el-form-item>-->
|
|
<!-- <div style="width: 800px;" v-if="state.webUrlDivShow == true">-->
|
<!-- <el-form-item class="form-item" label="url" v-if="state.basicInfoForm.probationTypeId == 10">-->
|
<!-- <el-input v-model="state.basicInfoForm.probationMedia" :disabled="state.disabledData"-->
|
<!-- placeholder="请输入url"/>-->
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item class="form-item" label="上传文件" v-if="state.basicInfoForm.probationTypeId != 10">-->
|
<!-- <UploadSingleFileT-->
|
<!-- :tips="tips"-->
|
<!-- acceptType="pdf,docx"-->
|
<!-- :fileList="fileList"-->
|
<!-- @update:fileList="uploadFile"-->
|
<!-- @removeFile="handleRemoveFile"-->
|
<!-- style="width: 100%"-->
|
<!-- ></UploadSingleFileT>-->
|
<!-- </el-form-item>-->
|
<!-- </div>-->
|
</el-form>
|
<div class="form-footer">
|
<!-- <el-button @click="goBackList">返回</el-button> -->
|
<!-- <el-button
|
@click="saveBasicInfo(ruleFormRef)"
|
v-show="!state.disabledData"
|
>存草稿</el-button
|
> -->
|
<el-button type="primary" @click="saveBasicInfoNext">
|
下一步 填写 产品信息
|
</el-button>
|
<!-- <el-button @click="cancelBasicInfoEdit(ruleFormRef)">取消</el-button> -->
|
</div>
|
<!-- </el-scrollbar> -->
|
|
<!-- <div class="fullbox" v-if="state.visible">
|
<div class="full-cont">
|
<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="请输入标题"
|
/>
|
</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
|
@click="deleteChapter(index)"
|
v-show="!state.disabledData"
|
>删除本章</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
</div>
|
<div class="form-footer">
|
<el-button @click="goBack">返回上一步</el-button>
|
<el-button @click="addChapter" v-show="!state.disabledData"
|
>添加 产品</el-button
|
>
|
<el-button @click="completeClick" v-show="!state.disabledData"
|
>存草稿</el-button
|
>
|
<el-button @click="richTextCancel">取消</el-button>
|
<el-button
|
type="primary"
|
@click="submitClick"
|
v-show="!state.disabledData"
|
>提交</el-button
|
>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import type { FormInstance, FormRules } from 'element-plus'
|
import { Ref } from 'vue'
|
import { useCommonInfo } from '@/stores/modules/common'
|
import _, { isArray } from 'lodash'
|
import terminalService from '@/api/terminal' // 接口文件
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
import richText from '@/components/richText/index.vue'
|
import { log } from 'util'
|
import productService from '@/api/zhongjian/productApi' // 接口文件
|
import { ElNotification } from 'element-plus'
|
import upload from '@/components/upload/index.vue'
|
import optionService from '@/api/zhongjian/optionApi'
|
import router from '@/router'
|
import uploadInfo from './uploadInfo.vue' // 上传文件、视频
|
|
// 树形下拉
|
const tree = ref(null)
|
// 树形下拉
|
const treeDataStatus = ref(true)
|
// 上传ref
|
const uploadIfoRef = ref()
|
const userInfoStore = useUserInfo()
|
|
// 富文本组件
|
const richTextRefData = ref()
|
|
// 注入祖先组件的状态下拉
|
interface statusType {
|
code: string
|
name: string
|
}
|
|
const dateChange = (value: any) => {}
|
|
const richTextRef = ref()
|
|
const customerStatus = inject<Ref<statusType[]>>('customerStatus', ref([]))
|
// 初始化状态管理器的内容
|
const commonInfoStore = useCommonInfo()
|
// 省市区数据列表
|
const provideList: any[] = commonInfoStore.getAreaSource
|
|
// 表单的ref
|
const ruleFormRef = ref<FormInstance>()
|
|
interface State {
|
basicInfoForm: any
|
}
|
let basicInfoForm: any = {
|
name: '', // 方案名称
|
describe: '', // 方案描述
|
scopeId: '', //
|
// scopeIdList: '', // 发布范围
|
industrialChainId: '', // 行业领域id
|
industrialChainName: '', // 行业领域
|
industrialChainIdList: [], // 行业领域idList
|
industrialChainNameList: [], // 行业领域nameList
|
importantAreaId: '', // 单位工程id
|
importantAreaName: '', // 单位工程
|
importantAreaIdList: [], // 单位工程idList
|
importantAreaNameList: [], // 单位工程nameList
|
businessProcessId: '', // 产业阶段id
|
businessProcessName: '', // 产业阶段name
|
// sceneName: '', // 场景方向
|
sceneId: '', // 场景方向Id
|
probationType: '', // 软件类型
|
probationMedia: '', // 文件ID或试用地址URL
|
probationTypeId: '', // 软件类型id
|
typeName: '', // 产品父类类型name
|
typeId: '', // 产品父类类型id
|
typeChildName: '', // 产品类型子类name
|
typeChildId: '', // 产品类型子类id
|
lookName: '', // 查看方式name
|
lookId: '', // 查看方式id
|
homeImage: '', // 宣传图id
|
quotationSystemId: '', //上传文件
|
}
|
const state = reactive<any>({
|
basicInfoForm: basicInfoForm,
|
fullscreen: false, // 全屏对话框
|
visible: false,
|
title: '',
|
richTextList: [
|
{
|
chapterHead: '',
|
chapterContent: '',
|
},
|
],
|
draftId: '', // 草稿Id
|
scopeIdListData: [], // 暂存发布范围IDs
|
disabledData: false, // 编辑权限
|
defaultAll: false, // 是否默认展开
|
webUrlDivShow: false,
|
isAddStatus: 0, // 点击下一步判断是否已经新增了数据
|
})
|
|
// 父组件props传参
|
interface Props {
|
customerInfo?: any // 可选的父组件传参
|
}
|
const goBackList = () => {
|
router.push({
|
path: '/safety/performance/meritRatingManage',
|
})
|
}
|
const props = withDefaults(defineProps<Props>(), {
|
customerInfo: () => {
|
return {
|
parentId: '',
|
name: '', // 方案名称
|
describe: '', // 方案描述
|
// scopeIdList: '', // 发布范围
|
// industrialChainName: '', // 行业领域
|
// importantAreaName: '', // 单位工程
|
industrialChainNameList: [], // 行业领域nameList
|
importantAreaNameList: [], // 单位工程nameList
|
// sceneName: '', // 场景方向
|
sceneId: '', // 场景方向Id
|
probationType: '', // 软件类型
|
probationMedia: '', // 文件ID或试用地址URL
|
// businessProcessName: '', // 产业阶段name
|
// businessProcessId: '', // 产业阶段id
|
businessProcessIdList: [], // 产业阶段idList
|
businessProcessNameList: [], // 产业阶段nameList
|
typeName: '', // 产品父类类型name
|
typeId: '', // 产品父类类型id
|
typeChildName: '', // 产品类型子类name
|
typeChildId: '', // 产品类型子类id
|
lookName: '', // 查看方式name
|
lookId: '', // 查看方式id
|
quotationSystemId: '',
|
}
|
},
|
})
|
|
// 表单验证规则
|
const rules = reactive<FormRules>({
|
name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
|
describe: [{ required: true, message: '请输入产品描述', trigger: 'blur' }],
|
// scopeIdList: [
|
// {required: true, message: '请选择发布范围', trigger: 'blur'}
|
// ],
|
industrialChainIdList: [
|
{ required: true, message: '请选择行业领域', trigger: 'blur' },
|
],
|
importantAreaIdList: [
|
{ required: true, message: '请选择单位工程', trigger: 'blur' },
|
],
|
businessProcessIdList: [
|
{ required: true, message: '请选择产业阶段', trigger: 'blur' },
|
],
|
typeId: [{ required: true, message: '请选择产品类型', trigger: 'blur' }],
|
typeChildId: [
|
{ required: true, message: '请选择产品类型子类', trigger: 'blur' },
|
],
|
lookId: [{ required: true, message: '请选择查看方式', trigger: 'blur' }],
|
// sceneName: [
|
// {required: true, message: '请选择场景方向', trigger: 'blur'}
|
// ],
|
})
|
|
// 分类字典
|
const industrialChainType = ref<any[]>() // 行业领域
|
const importantAreaType = ref<any[]>() // 单位工程
|
const importantAreaTypecj = ref<any[]>() // 场景方向
|
const importantAreaTyperj = ref<any[]>() // 软件类型
|
const importantAreaTypeywhj = ref<any[]>() // 产业阶段
|
const importantAreaTypecplxfl = ref<any[]>() // 产品类型父类
|
const importantAreaTypecplxzl = ref<any[]>() // 产品类型子类
|
const importantAreaTypecpckfs = ref<any[]>() // 产品查看方式
|
|
const emit = defineEmits(['submit', 'cancel', 'submitNext'])
|
|
// 单位工程选择
|
const importantAreaChange = (val: any) => {
|
// // 获取ID
|
// const listData = ref([])
|
// for (let item of state.basicInfoForm.importantAreaNameList) {
|
// const valueList = importantAreaType.value.find((_item) => {
|
// return _item.name == item
|
// })
|
//
|
// listData.value.push(valueList)
|
// }
|
// state.basicInfoForm.importantAreaIdList = listData.value.map((item) => {
|
// return item.id
|
// })
|
}
|
|
// 存草稿
|
const saveBasicInfo = () => {
|
return new Promise((resolve: any) => {
|
ruleFormRef.value?.validate((valid: any) => {
|
if (valid) {
|
// 登录接口调用
|
saveNames()
|
let params = _.cloneDeep(state.basicInfoForm)
|
resolve(params)
|
} else {
|
resolve(false)
|
}
|
})
|
})
|
}
|
const saveNames=()=>{
|
// 登录接口调用
|
delete state.basicInfoForm.addType
|
delete state.basicInfoForm.editType
|
|
const listData1 = ref([])
|
const listData2 = ref([])
|
const listData3 = ref([])
|
// 处理名称-行业领域
|
for (let item of state.basicInfoForm.industrialChainIdList) {
|
const valueList = industrialChainType.value.find((_item) => {
|
return _item.id == item
|
})
|
|
listData1.value.push(valueList)
|
}
|
|
state.basicInfoForm.industrialChainNameList = listData1.value.map((item) => {
|
return item.name
|
})
|
|
// 处理名称-单位工程
|
for (let item of state.basicInfoForm.importantAreaIdList) {
|
const valueList = importantAreaType.value.find((_item) => {
|
return _item.id == item
|
})
|
|
listData2.value.push(valueList)
|
}
|
|
state.basicInfoForm.importantAreaNameList = listData2.value.map((item) => {
|
return item.name
|
})
|
|
// 处理名称-产业阶段
|
for (let item of state.basicInfoForm.businessProcessIdList) {
|
const valueList = importantAreaTypeywhj.value.find((_item) => {
|
return _item.id == item
|
})
|
|
listData3.value.push(valueList)
|
}
|
|
state.basicInfoForm.businessProcessNameList = listData3.value.map((item) => {
|
return item.name
|
})
|
|
// 处理名称-产品类型
|
const chanpinleixing = importantAreaTypecplxfl.value.find((_item) => {
|
return _item.id == state.basicInfoForm.typeId
|
})
|
state.basicInfoForm.typeName = chanpinleixing.name
|
|
}
|
// 下一步
|
const saveBasicInfoNext = (formEl: FormInstance | undefined) => {
|
ruleFormRef.value?.validate((valid: any) => {
|
if (valid) {
|
saveNames()
|
let params = _.cloneDeep(state.basicInfoForm)
|
emit('submitNext',params)
|
} else {
|
emit('submitNext',false)
|
}
|
})
|
}
|
// const addEdit = localStorage.getItem('addEditType3')
|
// console.log('下一步-----', state.richTextList)
|
|
// ruleFormRef.value?.validate((valid: any) => {
|
// if (valid) {
|
// if (addEdit == 'add') {
|
// delete state.basicInfoForm.addType
|
// delete state.basicInfoForm.editType
|
// let params = _.cloneDeep(state.basicInfoForm)
|
|
// if (state.isAddStatus == 0) {
|
// // 点击下一步的时候获取到草稿ID
|
// productService
|
// .optionCreateUrl({
|
// ...params,
|
// })
|
// .then((res) => {
|
// if (res.code == 200) {
|
// // 草稿Id
|
// state.draftId = res.data
|
|
// localStorage.setItem('draftId3', state.draftId)
|
|
// // 点击下一步判断是否已经新增了数据
|
// state.isAddStatus += 1
|
|
// state.visible = true
|
// }
|
// })
|
// } else {
|
// params.id = localStorage.getItem('draftId3')
|
// // 点击下一步的时候获取到草稿ID
|
// productService
|
// .optionUpdateUrl({
|
// ...params,
|
// })
|
// .then((res) => {
|
// if (res.code == 200) {
|
// // 草稿Id
|
// state.draftId = res.data
|
|
// // 点击下一步判断是否已经新增了数据
|
// state.isAddStatus += 1
|
|
// state.visible = true
|
// }
|
// })
|
// }
|
// } else {
|
// state.richTextList = []
|
// // 富文本数据
|
// state.richTextList = state.basicInfoForm.productSubmissionDetailDOList
|
// console.log('编辑的时候获取', state.richTextList)
|
|
// if (state.richTextList.length == 0) {
|
// state.richTextList = [
|
// {
|
// sort: 1,
|
// productId: state.draftId,
|
// chapterHead: '',
|
// chapterContent: '',
|
// },
|
// ]
|
// }
|
|
// let params = _.cloneDeep(state.basicInfoForm)
|
// // 点击下一步的时候获取到草稿ID
|
// productService
|
// .optionUpdateUrl({
|
// ...params,
|
// })
|
// .then((res) => {
|
// if (res.code == 200) {
|
// // // 草稿Id
|
// state.draftId = localStorage.getItem('productIdData')
|
|
// // 整理productId
|
// state.richTextList = state.richTextList.map(
|
// (item: any, index) => {
|
// return {
|
// ...item,
|
// sort: index + 1,
|
// productId: state.draftId,
|
// chapterHead: item.chapterHead,
|
// chapterContent: item.chapterContent,
|
// }
|
// }
|
// )
|
|
// state.visible = true
|
// }
|
// })
|
|
// // 整理productId
|
// state.richTextList = state.richTextList.map((item: any, index) => {
|
// return {
|
// ...item,
|
// sort: index + 1,
|
// productId: state.draftId,
|
// chapterHead: item.chapterHead,
|
// chapterContent: item.chapterContent,
|
// }
|
// })
|
|
// console.log('state.richTextList---', state.richTextList)
|
// state.visible = true
|
// }
|
// }
|
// })
|
|
// 取消个人信息保存
|
const cancelBasicInfoEdit = (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
formEl.resetFields()
|
state.basicInfoForm = {
|
name: '',
|
describe: '',
|
// scopeIdList: '',
|
industrialChainName: '',
|
importantAreaName: '',
|
importantAreaId: '',
|
// sceneName: '', // 场景方向
|
sceneId: '', // 场景方向Id
|
probationType: '', // 软件类型
|
probationMedia: '', // 文件ID或试用地址URL
|
// businessProcessName: '',
|
businessProcessId: '',
|
typeName: '',
|
typeId: '',
|
typeChildName: '',
|
typeChildId: '',
|
lookName: '',
|
lookId: '',
|
quotationSystemId: '',
|
}
|
emit('cancel')
|
}
|
|
// 下拉数据-行业领域
|
const categoryListUrlFun = () => {
|
const searchList = {
|
parentCode: 'business_direction',
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
industrialChainType.value = [...res.data]
|
}
|
})
|
}
|
|
// 行业领域类型单选
|
const industrialChainChange = (val: any) => {
|
// // 获取ID
|
// const listData = ref([])
|
// for (let item of state.basicInfoForm.industrialChainNameList) {
|
// const valueList = industrialChainType.value.find((_item) => {
|
// return _item.name == item
|
// })
|
//
|
// listData.value.push(valueList)
|
// }
|
//
|
// state.basicInfoForm.industrialChainIdList = listData.value.map((item) => {
|
// return item.id
|
// })
|
//
|
// console.log('aaa', state.basicInfoForm.industrialChainIdList)
|
|
state.basicInfoForm.importantAreaIdList = []
|
|
if (state.basicInfoForm.industrialChainIdList.length != 0) {
|
// 单位工程
|
categoryListUrlqyFun()
|
} else {
|
importantAreaType.value = []
|
state.basicInfoForm.importantAreaIdList = []
|
state.basicInfoForm.importantAreaNameList = []
|
}
|
|
// state.basicInfoForm.importantAreaName = ''
|
// state.basicInfoForm.importantAreaId = ''
|
//
|
// console.log("radioValue---->", val)
|
//
|
// industrialChainType.value.forEach((item: any) => {
|
// if (item.name == val) {
|
// state.basicInfoForm.industrialChainId = item.id
|
// }
|
// })
|
//
|
// state.basicInfoForm.industrialChainName = val
|
//
|
// setTimeout(() => {
|
// // 单位工程
|
// categoryListUrlqyFun()
|
// }, 50)
|
}
|
|
// 下拉数据-单位工程
|
const categoryListUrlqyFun = () => {
|
console.log('请求了', state.basicInfoForm.industrialChainIdList)
|
const searchList = {
|
parentId:
|
state.basicInfoForm.industrialChainIdList[
|
state.basicInfoForm.industrialChainIdList.length - 1
|
],
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
importantAreaType.value = [...res.data]
|
}
|
})
|
}
|
|
// 下拉数据-软件类型
|
const categoryListUrlqyFunrj = () => {
|
const searchList = {
|
parentCode: 'probation_type',
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
importantAreaTyperj.value = [...res.data]
|
}
|
})
|
}
|
|
// 下拉数据-产业阶段
|
const categoryListUrlqyFunywhj = () => {
|
const searchList = {
|
parentCode: 'important_code',
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
importantAreaTypeywhj.value = [...res.data]
|
}
|
})
|
}
|
|
// 产业阶段选择
|
const businessProcessChange = (val: any) => {
|
// console.log("radioValue---->", val)
|
|
// // 获取ID
|
// const listData = ref([])
|
// for (let item of state.basicInfoForm.businessProcessNameList) {
|
// const valueList = importantAreaTypeywhj.value.find((_item) => {
|
// return _item.name == item
|
// })
|
//
|
// listData.value.push(valueList)
|
// }
|
//
|
// state.basicInfoForm.businessProcessIdList = listData.value.map((item) => {
|
// return item.id
|
// })
|
//
|
// console.log('ccc', state.basicInfoForm.businessProcessIdList)
|
|
// importantAreaTypeywhj.value.forEach((item: any) => {
|
// if (item.name == val) {
|
// state.basicInfoForm.businessProcessId = item.id
|
// }
|
// })
|
//
|
// state.basicInfoForm.businessProcessName = val
|
}
|
|
// 下拉数据-产品类型父类
|
const categoryListUrlqyFuncplxfl = () => {
|
const searchList = {
|
parentCode: 'product_type',
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
importantAreaTypecplxfl.value = [...res.data]
|
}
|
})
|
}
|
|
// 产品类型父类选择
|
const typeNameChange = (val: any) => {
|
// console.log("radioValue---->", val)
|
|
// importantAreaTypecplxfl.value.forEach((item: any) => {
|
// if (item.name == val) {
|
// state.basicInfoForm.typeId = item.id
|
// }
|
// })
|
//
|
// state.basicInfoForm.typeName = val
|
|
state.basicInfoForm.typeChildId = []
|
|
importantAreaTypecplxzl.value = []
|
setTimeout(() => {
|
// 下拉数据-产品类型子类
|
categoryListUrlqyFuncplxzl()
|
}, 50)
|
}
|
|
// 下拉数据-产品类型子类
|
const categoryListUrlqyFuncplxzl = () => {
|
const searchList = {
|
parentId: state.basicInfoForm.typeId,
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
importantAreaTypecplxzl.value = [...res.data]
|
}
|
})
|
}
|
|
// 产品类型子类选择
|
const typeChildNameChange = (val: any) => {
|
importantAreaTypecplxzl.value.forEach((item: any) => {
|
if (item.id == val) {
|
state.basicInfoForm.typeChildName = item.name
|
}
|
})
|
}
|
|
// 下拉数据-产品查看方式
|
const categoryListUrlqyFuncpckfs = () => {
|
const searchList = {
|
parentCode: 'look_mode',
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
importantAreaTypecpckfs.value = [...res.data]
|
}
|
})
|
}
|
|
// 产品查看方式选择
|
const lookNameChange = (val: any) => {
|
importantAreaTypecpckfs.value.forEach((item: any) => {
|
if (item.id == val) {
|
state.basicInfoForm.lookName = item.name
|
}
|
})
|
}
|
|
// 下拉数据-场景方向
|
const categoryListUrlqyFuncj = () => {
|
const searchList = {
|
parentCode: 'scope_code',
|
}
|
productService.categoryListUrl({ ...searchList }).then((res: any) => {
|
if (res.code == 200) {
|
importantAreaTypecj.value = [...res.data]
|
}
|
})
|
}
|
|
// 场景方向选择
|
const importantAreaChangecj = (val: any) => {
|
console.log('radioValue---->', val)
|
|
importantAreaTypecj.value.forEach((item: any) => {
|
if (item.name == val) {
|
state.basicInfoForm.sceneId = item.id
|
}
|
})
|
|
state.basicInfoForm.sceneName = val
|
}
|
|
// --------上传
|
const uploadRef = ref()
|
const tips = ref('')
|
const filetips = '只能上传.docx .pdf格式文件,并且只能上传一个文件'
|
const fileList = ref<any[]>([])
|
const fileListArr = ref<any[]>([])
|
const filePdfWdRef = ref()
|
// 文件上传返回值
|
const uploadFile = (data: any) => {
|
console.log('uploadFile', data)
|
state.basicInfoForm.homeImage = data
|
// 清除必填校验
|
ruleFormRef.value.clearValidate(['homeImage'])
|
}
|
const uploadFilePdfWd = (fileId: string) => {
|
state.basicInfoForm.quotationSystemId = fileId
|
}
|
|
const handleRemoveFile = () => {
|
state.basicInfoForm.homeImage = ''
|
fileList.value = []
|
uploadRef.value.clearUploadFile()
|
}
|
const handleRemoveFilePdfWd = () => {
|
state.basicInfoForm.quotationSystemId = ''
|
fileListArr.value = []
|
}
|
// 回显图片
|
const imagePreviewShow = () => {
|
// 获取图片URL
|
optionService
|
.getPicUrlUrl({
|
fileId: state.basicInfoForm.homeImage,
|
})
|
.then((res) => {
|
if (res.code == 200) {
|
const url = res.data.fileUrl
|
console.log('===============', url)
|
fileList.value = []
|
fileList.value = [
|
{
|
name: 'test',
|
url: url,
|
},
|
]
|
|
uploadRef.value.getPicUrlFun(url)
|
}
|
})
|
}
|
// 上传文件
|
const uploadFileRow = () => {
|
const obj = {
|
typeData: 'file',
|
id: state.draftId,
|
}
|
uploadIfoRef.value.visibleShowT(obj)
|
}
|
// 上传视频
|
const uploadVideoRow = () => {
|
const obj = {
|
typeData: 'video',
|
id: state.draftId,
|
}
|
uploadIfoRef.value.visibleShowT(obj)
|
}
|
const setData = (data: any) => {
|
if (data) {
|
state.basicInfoForm = { ...data }
|
} else {
|
state.basicInfoForm = { ...basicInfoForm }
|
}
|
fileListArr.value = []
|
state.draftId = localStorage.getItem('productputid')
|
// 下拉数据-行业领域
|
categoryListUrlFun()
|
// 场景方向
|
categoryListUrlqyFuncj()
|
// 下拉数据-产业阶段
|
categoryListUrlqyFunywhj()
|
// 下拉数据-产品类型父类
|
categoryListUrlqyFuncplxfl()
|
// 下拉数据-产品查看方式
|
categoryListUrlqyFuncpckfs()
|
// 判断新增类型add/edit
|
if (state.draftId) {
|
// setTimeout(() => {
|
if (state.basicInfoForm.industrialChainName) {
|
// 获取单位工程数据
|
categoryListUrlqyFun()
|
}
|
// 父级不为空调用
|
if (state.basicInfoForm.typeName) {
|
// 下拉数据-产品类型子类
|
categoryListUrlqyFuncplxzl()
|
}
|
// 回显图片
|
if (state.basicInfoForm.homeImage) {
|
imagePreviewShow()
|
}
|
if (
|
state.basicInfoForm.quotationSystemName &&
|
state.basicInfoForm.quotationSystemUrl
|
) {
|
fileListArr.value = [
|
{
|
name: state.basicInfoForm.quotationSystemName,
|
url: state.basicInfoForm.quotationSystemUrl,
|
},
|
]
|
}
|
// }, 1000)
|
} else {
|
importantAreaType.value = []
|
handleRemoveFile()
|
}
|
}
|
// 保存草稿给父级调用
|
defineExpose({ handleRemoveFile, saveBasicInfo, setData })
|
onActivated(() => {
|
// state.draftId = localStorage.getItem('productputId')
|
// // 下拉数据-行业领域
|
// categoryListUrlFun()
|
// // // 下拉数据-发布范围
|
// // companyListUrlFun()
|
// // 场景方向
|
// categoryListUrlqyFuncj()
|
// // // 软件类型
|
// // categoryListUrlqyFunrj()
|
// // 下拉数据-产业阶段
|
// categoryListUrlqyFunywhj()
|
// // 下拉数据-产品类型父类
|
// categoryListUrlqyFuncplxfl()
|
// // 下拉数据-产品查看方式
|
// categoryListUrlqyFuncpckfs()
|
// // 判断新增类型add/edit
|
// if (state.draftId) {
|
// setTimeout(() => {
|
// if (state.basicInfoForm.industrialChainName) {
|
// // 获取单位工程数据
|
// categoryListUrlqyFun()
|
// }
|
// // 父级不为空调用
|
// if (state.basicInfoForm.typeName) {
|
// // 下拉数据-产品类型子类
|
// categoryListUrlqyFuncplxzl()
|
// }
|
// // 回显图片
|
// if (state.basicInfoForm.homeImage) {
|
// imagePreviewShow()
|
// }
|
// }, 1000)
|
// } else {
|
// importantAreaType.value = []
|
// handleRemoveFile()
|
// }
|
})
|
|
watchEffect(() => {
|
// state.basicInfoForm = { ...props.customerInfo }
|
// console.log('watchEffect', state.basicInfoForm)
|
// fileListArr.value = []
|
// if (
|
// props.customerInfo.quotationSystemName &&
|
// props.customerInfo.quotationSystemUrl
|
// ) {
|
// fileListArr.value = [
|
// {
|
// name: props.customerInfo.quotationSystemName,
|
// url: props.customerInfo.quotationSystemUrl,
|
// },
|
// ]
|
// }
|
// if (localStorage.getItem('addEditType3') == 'edit' || localStorage.getItem('addEditType3') == 'view') {
|
// // 处理发布范围返回数据
|
// const ids = []
|
// if (state.basicInfoForm.productSubmissionReleaseScopeDOList) {
|
// nextTick(() => {
|
// state.basicInfoForm.productSubmissionReleaseScopeDOList.forEach((item) => {
|
// ids.push(item.releaseScopeId)
|
//
|
// // 默认展开的节点的 key 的数组
|
// expandedKeys.value.push('1')
|
// expandedKeys.value.push(item.parentId)
|
// })
|
// state.basicInfoForm.scopeIdList = ids
|
// })
|
//
|
// }
|
// // // 树形下拉是否展开回显数据
|
// // state.defaultAll = true
|
// } else {
|
// // // 树形下拉是否展开回显数据
|
// // state.defaultAll = false
|
// }
|
// // 禁用状态
|
// if (localStorage.getItem('addEditType3') == 'view') {
|
// state.disabledData = true
|
// } else {
|
// state.disabledData = false
|
// }
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.basic-info {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
overflow-y: auto;
|
|
.basic-info-form {
|
display: flex;
|
min-height: 500px;
|
flex-direction: column;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
margin-right: 20px;
|
margin-left: 10px;
|
margin-bottom: 20px;
|
}
|
}
|
.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: 29%;
|
}
|
.bodyDiv {
|
width: 100%;
|
height: 70vh;
|
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: 510px;
|
// display: flex;
|
// flex-direction: column;
|
// align-items: center;
|
// justify-content: space-around;
|
|
.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%;
|
height: 460px;
|
border: 1px solid #f2f2f2;
|
}
|
}
|
|
.btmBtnDiv {
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
|
.fotDiv {
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
border-top: 1px solid #f2f2f2;
|
padding-top: 10px;
|
}
|
|
.picDiv {
|
position: relative;
|
.zhanweiDiv {
|
width: 160px;
|
height: 160px;
|
background-color: #fff;
|
position: absolute;
|
left: 16%;
|
}
|
}
|
|
.groupDiv {
|
width: 100%;
|
border: 1px solid #dbe5ea;
|
padding: 13px 5px 0 5px;
|
}
|
.form-item-mb10 {
|
margin-bottom: 13px !important;
|
}
|
.fullbox {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 10px;
|
background-color: #fff;
|
z-index: 999;
|
}
|
.upload-btns {
|
width: 360px;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
margin: 10px 0px;
|
}
|
:deep(.el-upload__tip) {
|
position: absolute;
|
left: 100px;
|
top: -6px;
|
}
|
</style>
|
