<template>
<div class="fileAddStep2">
<el-form ref="dataForm" :model="dataForm" label-width="80px" :rules="formRules" :inline="true" style="height:100%;">
<div class="upperPart">
<el-form-item label="配置名称" prop="configName" >
<el-input v-model="dataForm.configName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="配置说明" prop="configDesc">
<el-input v-model="dataForm.configDesc" placeholder="请输入"></el-input>
</el-form-item>
<div class="config_input">
<a class="configPic" @click="selectFile">添加图片</a>
<input placeholder="添加图片" class="img_input" disabled="true" v-model="dataForm.configImg" />
<input style="display:none" cssclass="input-small" type="file" name="imgFile" ref="configImg2" @change="fileChanges($event)">
<div slot="tip" class="el-upload__tip">{{configPic_mes}}</div>
</div>
</div>
<div class="lowerParts">
<div class="main_cons" style="margin-right:20px;">
<div class="titles">配置详情</div>
<p class="smallTitles"><span class="blue_l"></span><span class="smallTitles_con">配置详情</span></p>
<div class="temp_cons">
<el-scrollbar>
<div v-html="configContent"></div>
</el-scrollbar>
</div>
</div>
<div class="main_cons">
<p class="smallTitles" style="padding-top:35px;"><span class="blue_l"></span><span class="smallTitles_con">配置内容</span></p>
<div class="temp_cons bc_f">
<div class="paramsTable" style="height:100%">
<!-- <el-form :rules="formRules2" ref="dataForm2" :model="dataForm2" class="paramsList" style="height:100%"> -->
<div class="paramsList" style="height:100%">
<p class="paramsListHead">
<span></span>
<span>参数类型</span>
<span>参数名称</span>
<span>参数说明</span>
</p>
<ul class="paramsListBody">
<el-scrollbar>
<li v-for="(item,index) in dataForm.parameterList" :key="index">
<span>{{item.parameterID}}</span>
<span>
<el-form-item :rules="formRules.parameterType" :prop="'parameterList.'+ index +'.parameterType'">
<el-select v-model="item.parameterType" placeholder="选择参数类型">
<el-option v-for="(items,key) in paramsTypeArr" :key="key" :label="items" :value="items"></el-option>
</el-select>
</el-form-item>
</span>
<span class="paramName" >
<el-form-item :prop="'parameterList.'+ index +'.parameterName'" :rules="formRules.parameterName">
<el-input v-model='item.parameterName'></el-input>
</el-form-item>
</span>
<span class="paramDesc" >
<el-form-item :prop="'parameterList.'+ index +'.parameterDesc'" :rules="formRules.parameterDesc">
<el-input v-model="item.parameterDesc"></el-input>
</el-form-item>
</span>
</li>
</el-scrollbar>
</ul>
<!-- </el-form> -->
</div>
</div>
</div>
</div>
</div>
</el-form>
</div>
</template>
<script>
import ValidatorEvent from '../../utils/validator'
import configService from '../../services/config.service';
let ConfigHttps = new configService()
export default {
data(){
return{
dataForm:{configName:'',configCode:'',configImg:'',parameterList:[],configContent:""},
configImgFile:"",//图片文件
formRules:{
configName:[{required: true, message: '请输入模板名称', trigger: 'blur' },
{validator:ValidatorEvent.vRemarks,message: '请输入正确的模板名称(中文英文数字下划线和.)!'}],
configDesc:[{required: true, message: '请输入模板描述', trigger: 'blur' },
{validator:ValidatorEvent.vRemarks,message: '请输入正确的模板名称(中文英文数字下划线和.)!'}],
parameterType:[{required: true, message: '请选择类型', trigger: 'change' }],
parameterName:[{required: true, message: '请输入参数名称', trigger: 'blur' },
{validator:ValidatorEvent.vRemarks,message: '请输入正确的参数名称!'}],
parameterDesc:[{validator:ValidatorEvent.vRemarks,message: '请输入正确的参数描述!'}]
},
paramsTypeArr:["String","IPV4地址","IPV6地址","Interger"],
configPic_mes:'',
fileList:[],
configContent:""
}
},
mounted(){
this.$nextTick(function () {
})
},
methods:{
selectFile(){
this.$refs['configImg2'].click()
},
fileChanges(event){
let target=event.target;
let fileSize = target.files[0].size;
let size = fileSize / 1024;
let name=target.value;
let fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="jpg" && fileName !="jpeg" && fileName !="pdf" && fileName !="png" && fileName !="dwg" && fileName !="gif" ){
this.configPic_mes='上传文件只能是 jpg、png格式!';
this.dataForm.configImg="";
return;
}else if(size>2000){
this.configPic_mes='上传图片大小不能超过 2MB!';
this.dataForm.configImg="";
return
}else{
this.configPic_mes="";
this.dataForm.configImg = target.files[0].name;//图片名字
this.configImgFile = target.files[0];//图片文件
let formData = new FormData();
formData.append("imgFile", this.configImgFile);
this.postImgupLoad(formData)
}
},
postImgupLoad(formData){
ConfigHttps.postImgupLoad(formData).then((res)=>{
if(res.code===0){
_toast(res.msg)
}else {
_toast(res.msg)
this.configImgFile = ''
}
}).catch((err=>{
console.log(err)
}))
},
parentMsg: function (dataForm) {
this.dataForm=dataForm;
//换行
let reg=new RegExp("\n","g");
this.configContent=this.dataForm.configContent.trim().replace(reg,"<br>");
//加高亮
var re = /\$\$(.*?)\$\$/g;
var text = "<span style='background:#ffee58'>$&</span>";
this.configContent = this.configContent.replace(re, text);
//将@@分隔符隐藏
var re2 = /\@\@[a-zA-Z]{1}\d+\_\d{1,2}/g;
var text2 = "<span style='display: none;'>$&</span>";
this.configContent = this.configContent.replace(re2, text2);
}
}
}
</script>
<style lang="scss" scoped>
.fileAddStep2{
height: 100%;
.upperPart{
padding:20px 20px 0 20px;
display: block !important;
.config_input{
display: inline-block;
.configPic{padding:0 15px;color:#0091ea;cursor: pointer;}
.img_input{background: #fff; width: 300px;height: 34px;border-bottom: 1px solid #ccc;}
.el-upload__tip{display: inline-block;font-size: 12px;}
}
}
.lowerParts{
margin-top:20px;height: calc(100% - 94px);display:flex;padding: 0;background: #ffffff;
padding:20px;
.main_cons{
flex:1;
.titles{font-size: 18px;font-weight: 400;
span{font-size: 16px;}
}
.smallTitles{
padding:10px 0 10px 0px;
.smallTitles_con{
vertical-align: middle;
}
.blue_l{
display: inline-block;
width: 2px;
height: 15px;
background: #2dc3e8;
vertical-align: middle;
margin-right: 5px;
}
}
.temp_cons{
width: 100%;
height: calc(100% - 67px);
background: #fbfbfb;
padding:10px;
border:1px solid #dededf;
}
.bc_f{
background: #fff;
}
}
}
.paramsList{
.paramsListHead{
padding-bottom: 10px;
}
.paramsListHead,li{
display: flex;
width:100%;
span{
display: inline-block;
padding-left:10px;
text-align:center;
&:first-child{
padding-left: 0px;
width:150px;
}
&:nth-child(2){
width:140px;
}
&:nth-child(3){
width:170px;
}
&:last-child{
width:220px;
}
}
}
}
.paramsListBody{
height: calc(100% - 20px);
overflow-y: auto;
span{
&:first-child{
text-align: left !important;
}
}
}
}
</style>