Commit 5fc76701 authored by 黄奎's avatar 黄奎

页面修改

parent 10d741f8
...@@ -31,10 +31,10 @@ ...@@ -31,10 +31,10 @@
</el-form-item> </el-form-item>
</el-form> --> </el-form> -->
<div style="display:flex;align-items:center;"> <div style="display:flex;align-items:center;">
<div style="color:red;" v-show="searchData.data.IsRequire">*</div> <div style="color:red;" v-show="searchData.CompData.IsRequire">*</div>
<div>{{searchData.data.Name}}</div> <div>{{searchData.CompData.Name}}</div>
<div class="single_Input"> <div class="single_Input">
<span v-if="searchData.data.WordsLength>0">最多输入{{searchData.data.WordsLength}}个字</span> <span v-if="searchData.CompData.WordsLength>0">最多输入{{searchData.CompData.WordsLength}}个字</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -42,13 +42,13 @@ ...@@ -42,13 +42,13 @@
<div class="diy-component-edit" v-if="searchData.isCked"> <div class="diy-component-edit" v-if="searchData.isCked">
<el-form label-width="100px"> <el-form label-width="100px">
<el-form-item label="名称"> <el-form-item label="名称">
<el-input v-model="searchData.data.Name" size="small"></el-input> <el-input v-model="searchData.CompData.Name" size="small"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="字数"> <el-form-item label="字数">
<el-input type="text" v-model="searchData.data.WordsLength" @keyup.native="checkInteger(searchData.data,'WordsLength')" size="small"></el-input> <el-input type="text" v-model="searchData.CompData.WordsLength" @keyup.native="checkInteger(searchData.CompData,'WordsLength')" size="small"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="是否必填"> <el-form-item label="是否必填">
<el-switch v-model="searchData.data.IsRequire"> <el-switch v-model="searchData.CompData.IsRequire">
</el-switch> </el-switch>
</el-form-item> </el-form-item>
</el-form> </el-form>
......
...@@ -87,10 +87,12 @@ ...@@ -87,10 +87,12 @@
.mobile-framework { .mobile-framework {
width: 375px; width: 375px;
} }
.registraType .el-radio:last-child{
margin-left:28px; .registraType .el-radio:last-child {
margin-left: 28px;
} }
.tpEdit_header {
.tpEdit_header {
padding: 18px; padding: 18px;
background: #fff; background: #fff;
color: #606266; color: #606266;
...@@ -263,12 +265,13 @@ ...@@ -263,12 +265,13 @@
background-color: #e6f4ff; background-color: #e6f4ff;
border: 2px dashed #5cb3fd; border: 2px dashed #5cb3fd;
} }
</style> </style>
<template> <template>
<div class="registrationAdd"> <div class="registrationAdd">
<div class="reEdit_header"> <div class="reEdit_header">
<span style="color: rgb(64, 158, 255); cursor: pointer" <span style="color: rgb(64, 158, 255); cursor: pointer"
@click="CommonJump('tradePavilionIndex', {})">榜单报名表单</span><span @click="CommonJump('registrationLogin', {})">榜单报名表单</span><span
style="margin: 0 9px; color: #c0c4cc">/</span><span>新增</span> style="margin: 0 9px; color: #c0c4cc">/</span><span>新增</span>
</div> </div>
<div flex="box:first" class="reEdit_Content"> <div flex="box:first" class="reEdit_Content">
...@@ -278,7 +281,8 @@ ...@@ -278,7 +281,8 @@
<el-input type="text" size="small" v-model="addMsg.FormName" maxlength="50"></el-input> <el-input type="text" size="small" v-model="addMsg.FormName" maxlength="50"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="对应类型" style="width:300px;" class="registraType"> <el-form-item label="对应类型" style="width:300px;" class="registraType">
<el-radio v-model="addMsg.FormType" v-for="(item,index) in CustomTypeList" :label="item.Id" :key="index">{{item.Name}}</el-radio> <el-radio v-model="addMsg.FormType" v-for="(item,index) in CustomTypeList" :label="item.Id" :key="index">
{{item.Name}}</el-radio>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="component-group" v-for="(item, index) in allComponents" :key="index"> <div class="component-group" v-for="(item, index) in allComponents" :key="index">
...@@ -298,7 +302,7 @@ ...@@ -298,7 +302,7 @@
<div class="mobile-framework-header"></div> <div class="mobile-framework-header"></div>
<div class="mobile-framework-body"> <div class="mobile-framework-body">
<!-- 为空的样式开始 --> <!-- 为空的样式开始 -->
<div v-if="dataList.length==0" flex="main:center cross:center" style=" <div v-if="addMsg.FormData.length==0" flex="main:center cross:center" style="
height: 200px; height: 200px;
color: rgb(173, 177, 184); color: rgb(173, 177, 184);
text-align: center; text-align: center;
...@@ -310,9 +314,9 @@ ...@@ -310,9 +314,9 @@
</div> </div>
</div> </div>
<!-- 为空的样式结束 --> <!-- 为空的样式结束 -->
<div v-for="(item,index) in dataList" :key="index" @click="getItem(item)"> <div v-for="(item,index) in addMsg.FormData" :key="index" @click="getItem(item)">
<singletextbox v-if="item.Id=='SingleLineText'" :searchData="item" @getSord="getSord" @comDelPlugin="comDelPlugin" <singletextbox v-if="item.CompKey=='SingleLineText'" :searchData="item" @getSord="getSord"
:index="index" :dataLeng="dataList.length"></singletextbox> @comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></singletextbox>
</div> </div>
</div> </div>
</div> </div>
...@@ -333,22 +337,49 @@ ...@@ -333,22 +337,49 @@
addMsg: { addMsg: {
Id: 0, Id: 0,
FormName: '', //表单名称 FormName: '', //表单名称
FormType:1, //对应类型 FormType: 1, //对应类型
FormData:[] FormData: []
}, },
CustomTypeList:[], queryMsgId: 0, //参数
dataList: [] CustomTypeList: [],
}; };
}, },
created() {}, created() {
this.GetPlugInList();
this.getCustomType();
if (this.$route.query.Id) {
this.queryMsgId = this.$route.query.Id;
this.getCustomFormInfo()
}
},
components: { components: {
singletextbox singletextbox
}, },
mounted() { mounted() {
this.GetPlugInList();
this.getCustomType();
}, },
methods: { methods: {
//获取表单详情
getCustomFormInfo() {
this.apipost("/api/CustomForm/GetCustomForm", {
Id: this.queryMsgId
}, (res) => {
if (res.data.resultCode == 1) {
var tempData = res.data.data;
if (tempData) {
this.addMsg.Id = tempData.Id;
this.addMsg.FormName = tempData.FormName;
this.addMsg.FormType = tempData.FormType;
if (tempData.FormDataList && tempData.FormDataList.length > 0) {
this.addMsg.FormData = tempData.FormDataList;
}
}
} else {
this.Info(res.data.message);
}
});
},
//获取左侧菜单 //获取左侧菜单
GetPlugInList() { GetPlugInList() {
this.apipost("/api/Tenant/GetPlugInList", { this.apipost("/api/Tenant/GetPlugInList", {
...@@ -356,7 +387,6 @@ ...@@ -356,7 +387,6 @@
}, (res) => { }, (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.allComponents = res.data.data; this.allComponents = res.data.data;
console.log(this.allComponents, 'all');
} else { } else {
this.Info(res.data.message); this.Info(res.data.message);
} }
...@@ -368,73 +398,73 @@ ...@@ -368,73 +398,73 @@
//单行文本框 //单行文本框
case "SingleLineText": case "SingleLineText":
let singleObj = { let singleObj = {
Id: "SingleLineText", CompKey: "SingleLineText",
isCked: false, isCked: false,
data: { CompData: {
Name: "", //名字 Name: "", //名字
WordsLength: "", //字数 WordsLength: "", //字数
IsRequire: false IsRequire: false
}, },
}; };
this.dataList.push(singleObj); this.addMsg.FormData.push(singleObj);
break; break;
//多行文本框 //多行文本框
case "MultiLineText": case "MultiLineText":
let multiObj = { let multiObj = {
Id: "MultiLineText", CompKey: "MultiLineText",
isCked: false, isCked: false,
data: { CompData: {
Name: "", //名字 Name: "", //名字
WordsLength: "", //字数 WordsLength: "", //字数
IsRequire: false IsRequire: false
}, },
}; };
this.dataList.push(multiObj); this.addMsg.FormData.push(multiObj);
break; break;
//下拉框组件 //下拉框组件
case "DorpDownList": case "DorpDownList":
let dorpObj = { let dorpObj = {
Id: "DorpDownList", CompKey: "DorpDownList",
isCked: false, isCked: false,
data: { CompData: {
Name: "", //名字 Name: "", //名字
IsMultiple: false, //是否多选 IsMultiple: false, //是否多选
OptionValue: '', //选项值 OptionValue: '', //选项值
IsRequire: false //是否必填 IsRequire: false //是否必填
}, },
}; };
this.dataList.push(dorpObj); this.addMsg.FormData.push(dorpObj);
break; break;
//图片上传组件 //图片上传组件
case "ImageUploadComp": case "ImageUploadComp":
let imgObj = { let imgObj = {
Id: "ImageUploadComp", CompKey: "ImageUploadComp",
isCked: false, isCked: false,
data: { CompData: {
Name: "", //名字 Name: "", //名字
FileCount: '', //上传文件数量 FileCount: '', //上传文件数量
FileSizeLimit: '' //上传文件大小 FileSizeLimit: '' //上传文件大小
}, },
}; };
this.dataList.push(imgObj); this.addMsg.FormData.push(imgObj);
break; break;
//视频上传组件 //视频上传组件
case "VideoUploadComp": case "VideoUploadComp":
let videoObj = { let videoObj = {
Id: "VideoUploadComp", CompKey: "VideoUploadComp",
isCked: false, isCked: false,
data: { CompData: {
Name: "", //名字 Name: "", //名字
FileCount: '', //上传文件数量 FileCount: '', //上传文件数量
FileSizeLimit: '' //上传文件大小 FileSizeLimit: '' //上传文件大小
}, },
}; };
this.dataList.push(videoObj); this.addMsg.FormData.push(videoObj);
break; break;
} }
}, },
//获取对应类型 //获取对应类型
getCustomType(){ getCustomType() {
this.apipost("/api/CustomForm/GetCustomType", {}, (res) => { this.apipost("/api/CustomForm/GetCustomType", {}, (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.CustomTypeList = res.data.data; this.CustomTypeList = res.data.data;
...@@ -443,37 +473,35 @@ ...@@ -443,37 +473,35 @@
} }
}); });
}, },
getItem(item){ getItem(item) {
this.dataList.forEach((x) => { this.addMsg.FormData.forEach((x) => {
x.isCked = false; x.isCked = false;
}); });
item.isCked = true; item.isCked = true;
}, },
//给子组件调用 重新排序上移下移 //给子组件调用 重新排序上移下移
getSord(index, IsUp) { getSord(index, IsUp) {
var currentItem = this.dataList[index]; var currentItem = this.addMsg.FormData[index];
if (IsUp == 0) { if (IsUp == 0) {
if (index > 0) { if (index > 0) {
var upItem = this.dataList[index - 1]; var upItem = this.addMsg.FormData[index - 1];
this.$set(this.dataList, index - 1, currentItem); this.$set(this.addMsg.FormData, index - 1, currentItem);
this.$set(this.dataList, index, upItem); this.$set(this.addMsg.FormData, index, upItem);
} }
} else { } else {
if (index != this.dataList.length - 1) { if (index != this.addMsg.FormData.length - 1) {
var downItem = this.dataList[index + 1]; var downItem = this.addMsg.FormData[index + 1];
this.$set(this.dataList, index + 1, currentItem); this.$set(this.addMsg.FormData, index + 1, currentItem);
this.$set(this.dataList, index, downItem); this.$set(this.addMsg.FormData, index, downItem);
} }
} }
}, },
//删除组件事件 //删除组件事件
comDelPlugin(index) { comDelPlugin(index) {
this.dataList.splice(index, 1); this.addMsg.FormData.splice(index, 1);
}, },
SaveData() { SaveData() {
this.addMsg.FormData = this.dataList; this.apipost("/api/CustomForm/SetCustomForm", this.addMsg, (res) => {
this.apipost("/api//CustomForm/SetCustomForm", this.addMsg, (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.Success(res.data.message); this.Success(res.data.message);
} else { } else {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment