食品工业互联网托管平台
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

561 lines
28 KiB

<template>
<el-form :model="stepData2" :rules="rules" ref="step2" label-width="200px">
<p class="text-right">
<el-link type="primary" @click="$emit('child-event','show')"><i class="el-icon-back"></i>返回</el-link>
</p>
<div class="step-title">
<span>企业标识注册解析系统信息</span>
</div>
<div class="title">
<span>企业注册系统信息</span>
</div>
<el-row>
<el-col :span="10">
<el-form-item label="注册系统部署方式:" prop="entInfoSyses[0].deployMode">
<el-select v-model="stepData2.entInfoSyses[0].deployMode" placeholder="请选择部署方式">
<el-option label="本地部署" :value="1"></el-option>
<el-option label="云部署" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item >
<span slot="label">
<span>注册系统IP地址及端口号:</span>
<span>
<el-tooltip class="item" effect="dark" content="请按[x.x.x.x]:xxx或[xxxx:xxxx:xxxx::: …]:xxx格式填写,多个IP之间用英文分号分隔" placement="bottom">
<i class="el-icon-s-opportunity" style="color:gold;font-size:18px"></i>
</el-tooltip>
</span>
</span>
<el-input v-model="stepData2.entInfoSyses[0].ipPort"></el-input>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<template v-if="stepData2.entInfoSyses[0].deployMode == 1">
<el-form-item label="注册系统所在地:" prop="entInfoSyses[0].deployAddrCounty">
<el-cascader v-model="regSysArea" :options="optionsArea" @change="handleChangeArea($event,0)"></el-cascader>
</el-form-item>
<el-form-item label="详细地址:" prop="entInfoSyses[0].deployAddr">
<el-input v-model="stepData2.entInfoSyses[0].deployAddr"></el-input>
</el-form-item>
</template>
<template v-else-if="stepData2.entInfoSyses[0].deployMode == 2">
<el-form-item label="云服务商名称:" prop="entInfoSyses[0].name">
<el-input v-model="stepData2.entInfoSyses[0].name"></el-input>
</el-form-item>
</template>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="注册数据部署方式:" prop="entInfoSyses[1].deployMode">
<el-select v-model="stepData2.entInfoSyses[1].deployMode" placeholder="请选择部署方式">
<el-option label="本地部署" :value="1"></el-option>
<el-option label="云部署" :value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<template v-if="stepData2.entInfoSyses[1].deployMode == 1">
<el-form-item label="注册数据所在地:" prop="entInfoSyses[1].deployAddrCounty">
<el-cascader v-model="regDataArea" :options="optionsArea" @change="handleChangeArea($event,1)"></el-cascader>
</el-form-item>
<el-form-item label="详细地址:" prop="entInfoSyses[1].deployAddr">
<el-input v-model="stepData2.entInfoSyses[1].deployAddr"></el-input>
</el-form-item>
</template>
<template v-else-if="stepData2.entInfoSyses[1].deployMode == 2">
<el-form-item label="云服务商名称:" prop="entInfoSyses[1].name" >
<el-input v-model="stepData2.entInfoSyses[1].name"></el-input>
</el-form-item>
</template>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="注册备份数据部署方式:" prop="entInfoSyses[2].deployMode">
<el-select v-model="stepData2.entInfoSyses[2].deployMode" placeholder="请选择部署方式">
<el-option label="本地部署" :value="1"></el-option>
<el-option label="云部署" :value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<template v-if="stepData2.entInfoSyses[2].deployMode == 1">
<el-form-item label="注册备份数据所在地:" prop="entInfoSyses[2].deployAddrCounty">
<el-cascader v-model="regDataBackArea" :options="optionsArea" @change="handleChangeArea($event,2)"></el-cascader>
</el-form-item>
<el-form-item label="详细地址:" prop="entInfoSyses[2].deployAddr">
<el-input v-model="stepData2.entInfoSyses[2].deployAddr"></el-input>
</el-form-item>
</template>
<template v-else-if="stepData2.entInfoSyses[2].deployMode == 2">
<el-form-item label="云服务商名称:" prop="entInfoSyses[2].name" >
<el-input v-model="stepData2.entInfoSyses[2].name"></el-input>
</el-form-item>
</template>
</el-col>
</el-row>
<el-row>
<div class="title">
<span>企业解析系统信息</span>
</div>
<el-col :span="10">
<el-form-item label="解析系统部署方式:" prop="entInfoSyses[3].deployMode">
<el-select v-model="stepData2.entInfoSyses[3].deployMode" placeholder="请选择部署方式">
<el-option label="本地部署" :value="1"></el-option>
<el-option label="云部署" :value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<template v-if="stepData2.entInfoSyses[3].deployMode == 1">
<el-form-item label="解析系统所在地:" prop="entInfoSyses[3].deployAddrCounty">
<el-cascader v-model="analysisSysArea" :options="optionsArea" @change="handleChangeArea($event,3)"></el-cascader>
</el-form-item>
<el-form-item label="详细地址:" prop="entInfoSyses[3].deployAddr">
<el-input v-model="stepData2.entInfoSyses[3].deployAddr"></el-input>
</el-form-item>
</template>
<template v-else-if="stepData2.entInfoSyses[3].deployMode == 2">
<el-form-item label="云服务商名称:" prop="entInfoSyses[3].name" >
<el-input v-model="stepData2.entInfoSyses[3].name"></el-input>
</el-form-item>
</template>
</el-col>
</el-row>
<el-row>
<div class="title">
<span>企业服务系统信息</span>
</div>
<el-col :span="10">
<el-form-item label="服务系统建设类型:" prop="servSysBuildType">
<el-select v-model="stepData2.servSysBuildType" placeholder="请选择">
<el-option label="自营" :value="1"></el-option>
<el-option label="托管" :value="2"></el-option>
</el-select>
</el-form-item>
<template v-if="stepData2.servSysBuildType == 2">
<el-form-item label="委托合同:" prop="servSysBuildContractFileRid">
<el-col :span="8">
<el-upload
ref="servSysBuildRef"
:class="{hide:hideServSysBuild}"
:action=action
:data="servSysBuild"
list-type="picture-card"
:limit=limitCount
:file-list="servSysBuildFile"
:headers="headers"
:on-change="handleChangeServSysBuild"
:on-preview="handlePictureCardPreviewServSysBuild"
:on-success="handSuccessServSysBuild"
:before-upload="handleBeforePictureUpload"
:on-remove="handleRemoveServSysBuild">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
<el-col :span="8">
<div class="upload-tip">
注意事项:<br>
合同附件支持.pdf格式
</div>
</el-col>
</el-form-item>
</template>
</el-col>
<el-col :span="10" :offset="1">
<template v-if="stepData2.servSysBuildType == 2">
<el-form-item label="委托机构名称:" prop="servSysBuildName" >
<el-input v-model="stepData2.servSysBuildName"></el-input>
</el-form-item>
</template>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="服务系统运营类型:" prop="servSysOperType">
<el-select v-model="stepData2.servSysOperType" placeholder="请选择">
<el-option label="自营" :value="1"></el-option>
<el-option label="托管" :value="2"></el-option>
</el-select>
</el-form-item>
<template v-if="stepData2.servSysOperType == 2">
<el-form-item label="委托合同:" prop="orgCrtImgRid">
<el-col :span="8">
<el-upload
ref="servSysBuildRef"
:class="{hide:hideServSysOper}"
:action=action
:data="servSysBuild"
list-type="picture-card"
:limit=limitCount
:file-list="servSysOperFile"
:headers="headers"
:on-change="handleChangeServSysOper"
:on-preview="handlePictureCardPreviewServSysOper"
:on-success="handSuccessServSysOper"
:before-upload="handleBeforePictureUpload"
:on-remove="handleRemoveServSysOper">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
<el-col :span="8">
<div class="upload-tip">
注意事项:<br>
合同附件支持.pdf格式
</div>
</el-col>
</el-form-item>
</template>
</el-col>
<el-col :span="10" :offset="1">
<template v-if="stepData2.servSysOperType == 2">
<el-form-item label="委托机构名称:" prop="servSysOperName" >
<el-input v-model="stepData2.servSysOperName"></el-input>
</el-form-item>
</template>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="备份系统服务部署方式:" prop="entInfoSyses[4].deployMode">
<el-select v-model="stepData2.entInfoSyses[4].deployMode" placeholder="请选择">
<el-option label="本地部署" :value="1"></el-option>
<el-option label="云部署" :value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="1">
<template v-if="stepData2.entInfoSyses[4].deployMode == 1">
<el-form-item label="备份系统所在地:" prop="entInfoSyses[4].deployAddrCounty">
<el-cascader v-model="sysBackArea" :options="optionsArea" @change="handleChangeArea($event,4)"></el-cascader>
</el-form-item>
<el-form-item label="详细地址:" prop="entInfoSyses[4].deployAddr">
<el-input v-model="stepData2.entInfoSyses[4].deployAddr"></el-input>
</el-form-item>
</template>
<template v-else-if="stepData2.entInfoSyses[4].deployMode == 2">
<el-form-item label="云服务商名称:" prop="entInfoSyses[4].name" >
<el-input v-model="stepData2.entInfoSyses[4].name"></el-input>
</el-form-item>
</template>
</el-col>
</el-row>
<div class="btn_group">
<el-button size="medium" type="primary" @click="submitForm(1)">保存</el-button>
<el-button size="medium" type="primary" @click="submitForm(0)">上一页</el-button>
<el-button size="medium" type="primary" @click="submitForm(2)">下一页</el-button>
</div>
</el-form>
</template>
<script>
import {enterpriseAuthNew2,registerArea,enterpriseInfoNewStep2} from "@/api/enterpriseManagement";
import {UPLOAD} from "@/api/api"
export default {
name:"step2",
data(){
return {
stepData2: {
entInfoSyses:[
{'sysType':1,'deployMode':'','deployAddrProvince':'','deployAddrCity':'','deployAddrCounty':'','deployAddr':'','name':'','ipPort':''},
{'sysType':2,'deployMode':'','deployAddrProvince':'','deployAddrCity':'','deployAddrCounty':'','deployAddr':'','name':''},
{'sysType':3,'deployMode':'','deployAddrProvince':'','deployAddrCity':'','deployAddrCounty':'','deployAddr':'','name':''},
{'sysType':4,'deployMode':'','deployAddrProvince':'','deployAddrCity':'','deployAddrCounty':'','deployAddr':'','name':''},
{'sysType':5,'deployMode':'','deployAddrProvince':'','deployAddrCity':'','deployAddrCounty':'','deployAddr':'','name':''},
],
servSysBuildType:'', //服务系统建设,建设类型[枚举值: 1自营 2委托]
servSysBuildName:'', //服务系统建设委托机构名称
servSysBuildContractFileRid:"", //服务系统建设合同
servSysBuildContractFileUrl:"", //服务系统建设合同--url
servSysOperType:'', //服务系统运营类型[枚举值: 1自营 2委托]
servSysOperName:'', //服务系统运营委托机构名称
servSysOperContractFileRid:"", //服务系统运营合同
servSysOperContractFileUrl:'', //服务系统运营合同--url
},
regSysArea:[], //注册系统所在地
regDataArea:[], //注册数据所在地
regDataBackArea:[], //注册备份数据所在地
analysisSysArea:[], //解析系统所在地
sysBackArea:[], //备份系统所在地
rules: {
"entInfoSyses[0].deployMode": [
{required: true, message: '请选择注册系统部署方式', trigger: "change"},
],
"entInfoSyses[0].deployAddr": [
{required: true, message: '请输入详细地址', trigger: 'blur'},
{min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
],
"entInfoSyses[0].name": [
{required: true, message: '请输入云服务商名称', trigger: 'blur'},
{min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
],
"entInfoSyses[0].deployAddrCounty":[
{required: true, message: '请选择所在地', trigger: "change"},
],
"entInfoSyses[1].deployMode": [
{required: true, message: '请选择注册数据部署方式', trigger: "change"},
],
"entInfoSyses[1].deployAddr": [
{required: true, message: '请输入详细地址', trigger: 'blur'},
{min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
],
"entInfoSyses[1].name": [
{required: true, message: '请输入云服务商名称', trigger: 'blur'},
{min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
],
"entInfoSyses[1].deployAddrCounty":[
{required: true, message: '请选择所在地', trigger: "change"},
],
"entInfoSyses[2].deployMode": [
{required: true, message: '请选择注册备份数据部署方式', trigger: "change"},
],
"entInfoSyses[2].deployAddr": [
{required: true, message: '请输入详细地址', trigger: 'blur'},
{min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
],
"entInfoSyses[2].name": [
{required: true, message: '请输入云服务商名称', trigger: 'blur'},
{min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
],
"entInfoSyses[2].deployAddrCounty":[
{required: true, message: '请选择所在地', trigger: "change"},
],
"entInfoSyses[3].deployMode": [
{required: true, message: '请选择解析系统部署方式', trigger: "change"},
],
"entInfoSyses[3].deployAddr": [
{required: true, message: '请输入详细地址', trigger: 'blur'},
{min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
],
"entInfoSyses[3].name": [
{required: true, message: '请输入云服务商名称', trigger: 'blur'},
{min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
],
"entInfoSyses[3].deployAddrCounty":[
{required: true, message: '请选择所在地', trigger: "change"},
],
servSysBuildType:[
{required: true, message: '服务系统建设类型', trigger: "change"},
],
servSysOperType:[
{required: true, message: '服务系统运营类型', trigger: "change"},
]
},
limitCount: 1,
dialogVisible: false,
dialogImageUrl: '',
hideServSysBuild:false,
hideServSysOper:false,
servSysOperFile:[],
servSysBuildFile:[],
action: UPLOAD,
servSysBuild: {
bizType: 'BUILD_ID',
fileName: '',
sequence: 0,
url: ''
},
optionsArea:[], //省市区联级下拉--tree格式
aAreaList:{} //省市区数据-对象格式
}
},
computed: {
headers() {
return {
token: 'Bearer ' + this.$db.get("TOKEN", ""),
tenant: this.$db.get("TENANT", "") || "",
Authorization: `Basic ${this.$Base64.encode(`${process.env.VUE_APP_CLIENT_ID}:${process.env.VUE_APP_CLIENT_SECRET}`)}`
};
},
},
mounted() {
this.getAreaAll()
this.getEnterpriseInfo()
},
methods: {
getEnterpriseInfo(){
const code = `${this.$Base64.decode(this.$db.get('TENANT'))}` || null
if(code)
{
enterpriseInfoNewStep2(code).then(res => {
if(res.data.data.entInfoSyses.length == 0)
{
return
}
this.stepData2 = res.data.data
if(this.stepData2.servSysBuildContractFileUrl)
{
this.servSysBuildFile = [{name: this.stepData2.servSysBuildContractFileUrl, url: this.stepData2.servSysBuildContractFileUrl}]
this.hideServSysBuild = true
}
if(this.stepData2.servSysOperContractFileUrl)
{
this.servSysOperFile = [{name: this.stepData2.servSysOperContractFileUrl, url: this.stepData2.servSysOperContractFileUrl}]
this.hideServSysOper = true
}
if(this.stepData2.entInfoSyses[0].deployMode == 1) {
this.regSysArea = [this.stepData2.entInfoSyses[0].deployAddrProvince,this.stepData2.entInfoSyses[0].deployAddrCity,this.stepData2.entInfoSyses[0].deployAddrCounty||null]
}
if(this.stepData2.entInfoSyses[1].deployMode == 1) {
this.regDataArea = [this.stepData2.entInfoSyses[1].deployAddrProvince,this.stepData2.entInfoSyses[1].deployAddrCity,this.stepData2.entInfoSyses[1].deployAddrCounty||null]
}
if(this.stepData2.entInfoSyses[2].deployMode == 1) {
this.regDataBackArea = [this.stepData2.entInfoSyses[2].deployAddrProvince,this.stepData2.entInfoSyses[2].deployAddrCity,this.stepData2.entInfoSyses[2].deployAddrCounty||null]
}
if(this.stepData2.entInfoSyses[3].deployMode == 1) {
this.analysisSysArea = [this.stepData2.entInfoSyses[3].deployAddrProvince,this.stepData2.entInfoSyses[3].deployAddrCity,this.stepData2.entInfoSyses[3].deployAddrCounty||null]
}
if(this.stepData2.entInfoSyses[4].deployMode == 1 && this.stepData2.entInfoSyses[4].deployAddrProvince) {
this.sysBackArea = [this.stepData2.entInfoSyses[4].deployAddrProvince,this.stepData2.entInfoSyses[4].deployAddrCity,this.stepData2.entInfoSyses[4].deployAddrCounty||null]
}
})
}
},
//获取省市区--新
getAreaAll() {
return registerArea().then((res) => {
this.aAreaList = res?.data?.data ? res.data.data:{}
for (const key in this.aAreaList[86]) {
if (Object.hasOwnProperty.call(this.aAreaList[86], key)) {
const element = this.aAreaList[86][key];
this.optionsArea.push({value:key,label:element})
}
}
for (let i = 0; i < this.optionsArea.length; i++) {
const node = this.optionsArea[i];
node.children = this.formatArea(this.aAreaList[node.value])
}
})
},
//递归深度优先处理children
formatArea(option){
let children = []
for (const key in option) {
if (Object.hasOwnProperty.call(option, key)) {
const element2 = option[key];
if(this.aAreaList[key]){
children.push({
value:key,
label:element2,
children : this.formatArea(this.aAreaList[key])
})
} else {
children.push({value:key,label:element2})
}
}
}
return children
},
handleChangeArea(area,num){
console.log(area,num);
this.stepData2.entInfoSyses[num].deployAddrProvince = area[0]
this.stepData2.entInfoSyses[num].deployAddrCity = area[1]
if(area[2])
this.stepData2.entInfoSyses[num].deployAddrCounty = area[2]
},
//点击提交检验
submitForm(type) {
this.$refs.step2.validate((valid) => {
if (valid) {
this.saveSubmit(type);
} else {
return false;
}
});
},
//保存提交并下一步
saveSubmit(type) {
this.stepData2.code = `${this.$Base64.decode(this.$db.get('TENANT'))}`;
this.stepData2.currentPage = type
enterpriseAuthNew2(this.stepData2).then(response => {
const res = response.data;
if (res.data) {
this.$message({
message: "操作成功",
type: "success"
});
// this.$refs.step1.resetFields();
this.$emit('child-event','step'+parseInt(type+1))
}
})
},
handleBeforePictureUpload(file) {
const isLt1M = file.size / 1024 / 1024 < 5;
const fileType = ['application/pdf']
const isJPG = fileType.indexOf(file.type) != -1
if (!isJPG) {
this.$message.error('上传图片只能是 PDF 格式!');
}
if (!isLt1M) {
this.$message.error("上传图片大小不能超过 5MB!");
}
return isJPG && isLt1M;
},
//建设
handleChangeServSysBuild(files, fileList) {
this.hideServSysBuild = fileList.length >= this.limitCount;
},
handleRemoveServSysBuild(file, fileList) {
this.stepData2.servSysBuildContractFileRid = ''
this.servSysBuildFile = fileList
this.$refs.step2.validateField('servSysBuildContractFileRid')
this.hideServSysBuild = fileList.length >= this.limitCount;
},
handlePictureCardPreviewServSysBuild(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handSuccessServSysBuild(file) {
this.stepData2.servSysBuildContractFileRid = file.data.idisResult
this.stepData2.servSysBuildContractFileUrl = file.data.url
this.servSysBuildFile.push({name: file.data.filename, url: file.data.url, bizType: file.data.bizType})
this.$refs.step2.validateField('servSysBuildContractFileRid')
},
//运营
handleChangeServSysOper(files, fileList) {
this.hideServSysOper = fileList.length >= this.limitCount;
},
handleRemoveServSysOper(file, fileList) {
this.stepData2.servSysOperContractFileRid = ''
this.servSysOperFile = fileList
this.$refs.step2.validateField('servSysOperContractFileRid')
this.hideServSysOper = fileList.length >= this.limitCount;
},
handlePictureCardPreviewServSysOper(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handSuccessServSysOper(file) {
this.stepData2.servSysOperContractFileRid = file.data.idisResult
this.stepData2.servSysOperContractFileUrl = file.data.url
this.servSysOperFile.push({name: file.data.filename, url: file.data.url, bizType: file.data.bizType})
this.$refs.step2.validateField('servSysOperContractFileRid')
},
}
}
</script>
<style lang="scss" scoped>
.el-select {
// display: inline-block;
// position: relative;
width: 100%;
}
.el-cascader {
width: 100%;
}
</style>