Skip to content

E
ElectricitySheep
Commit 74013aab authored by 黄奎's avatar 黄奎
Browse files
Options

新增自定义表单

parent 89ba1aab
Show whitespace changes
Inline Side-by-side
Showing with 718 additions and 9 deletions
src/components/Ftemplate.vue
View file @ 74013aab
...@@ -190,9 +190,7 @@ ...@@ -190,9 +190,7 @@
<li class="menu_item" :class="{'Fchecked':isChecked=='/startupPage'}" @click="isChecked='/startupPage',CommonJump('startupPage')"> <li class="menu_item" :class="{'Fchecked':isChecked=='/startupPage'}" @click="isChecked='/startupPage',CommonJump('startupPage')">
<i class="el-icon-menu"></i><span>启动页</span> <i class="el-icon-menu"></i><span>启动页</span>
</li> </li>
<li style="display:none;" class="menu_item" :class="{'Fchecked':isChecked==5}" @click="isChecked=5">
<i class="el-icon-menu"></i><span>表单提交信息</span>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
src/components/sallCenter/CustomerForms.vue 0 → 100644
View file @ 74013aab
<template>
<div class="brandClassification">
<div class="head-title">
自定义表单
<el-button style="float:right;margin-top: -5px;" size="small" type="primary" @click="goRegistrationAdd(null)">
新增</el-button>
</div>
<div class="content">
<div>
<div class="searchInput" style="width:250px">
<el-input @keyup.enter.native="msg.pageIndex=1,getList()" @clear="msg.pageIndex=1,getList()"
style="display:inline-block;width:225px;height:30px" placeholder="表单名称" v-model="msg.FormName" size="small"
clearable>
</el-input>
<span @click="msg.pageIndex=1,getList()" class="el-icon-search"
style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
</div>
</div>
<el-table :data="tableData" v-loading="loading" border style="width: 100%;margin:20px 0">
<el-table-column prop="Id" label="编号" width="100">
</el-table-column>
<el-table-column prop="FormName" label="表单名称">
</el-table-column>
<el-table-column prop="CreateDate" width="200" label="创建时间">
</el-table-column>
<el-table-column prop="address" width="200" label="操作">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
<img style="width:32px;height:32px" src="../../assets/img/userman/edit.png"
@click="goRegistrationAdd(scope.row)" alt="">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
>
<img style="width:32px;height:32px;margin:0 10px" src="../../assets/img/userman/del.png"
@click="delCustomForm(scope.row)" alt="">
</el-tooltip>
</template>
</el-table-column>
</el-table>
<el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
:current-page.sync="msg.pageIndex" layout="total,prev, pager, next" :total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
msg: {
pageIndex: 1,
pageSize: 10,
FormName: '',
},
total: 0,
tableData: [], //数据列表
loading: false
};
},
created() {
this.getList();
},
methods: {
getList() {
this.loading = true;
this.apipost("/api/CustomForm/GetCustomFormPage", this.msg, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
let pageData = res.data.data.pageData;
this.tableData = pageData;
}
})
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
//删除自定义表单
delCustomForm(item) {
let that = this;
that.Confirm("是否删除?", function () {
that.apipost(
"/api/CustomForm/RemoveCustomeForm", {
Id: item.Id,
},
res => {
if (res.data.resultCode == 1) {
that.Success(res.data.message);
that.getList();
} else {
that.Error(res.data.message);
}
},
);
});
},
//新增组件
goRegistrationAdd(item) {
var obj = {
blank: "y",
};
if (item) {
obj = {
blank: "y",
Id: item.Id,
};
}
this.$router.push({
name: "customerFormsAdd",
query: obj,
});
}
},
mounted() {}
};
</script>
<style>
.brandClassification .content {
background: #fff;
margin-top: 10px;
padding: 20px;
box-sizing: border-box;
}
</style>
src/components/sallCenter/CustomerFormsAdd.vue 0 → 100644
View file @ 74013aab
<style>
.registrationAdd {}
.reEdit_header {
padding: 18px;
background: #fff;
color: #606266;
margin-bottom: 10px;
}
.Myall-components {
max-height: 725px;
overflow-y: auto;
background: #fff;
padding: 20px;
}
.reEdit_Content {
margin-bottom: 10px;
min-width: 1280px;
height: 725px;
}
.Myall-components .component-group {
border: 1px solid #eeeeee;
width: 300px;
margin-bottom: 20px;
}
.Myall-components .component-group-name {
height: 35px;
line-height: 35px;
background: #f7f7f7;
padding: 0 20px;
border-bottom: 1px solid #eeeeee;
}
.Myall-components .Mycomponent-list {
margin-right: -2px;
margin-top: -2px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.Myall-components .Mycomponent-list .Mycomponent-item {
width: 100px;
height: 100px;
border: 0 solid #eeeeee;
border-width: 0 1px 1px 0;
text-align: center;
padding: 15px 0 0;
cursor: pointer;
}
.template_right {
padding-left: 2px;
position: relative;
overflow-y: auto;
}
.template_Mobile {
overflow-y: auto;
padding: 0px 25px;
width: 435px;
height: 705px;
margin-left: 6px;
}
.mobile-framework-header {
height: 60px;
line-height: 60px;
background: #333;
color: #fff;
text-align: center;
background: url("../../assets/img/sallCenter/head.png") no-repeat;
}
.mobile-framework-body {
background-color: rgb(245, 247, 249);
min-height: 645px;
border: 1px solid #e2e2e2;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left center;
}
.mobile-framework {
width: 375px;
}
.tpEdit_header {
padding: 18px;
background: #fff;
color: #606266;
margin-bottom: 10px;
}
.tpEdit_Content {
margin-bottom: 10px;
min-width: 1280px;
height: 725px;
}
.Myall-components {
max-height: 725px;
overflow-y: auto;
background: #fff;
padding: 20px;
}
.Myall-components .component-group {
border: 1px solid #eeeeee;
width: 300px;
margin-bottom: 20px;
}
.Myall-components .component-group-name {
height: 35px;
line-height: 35px;
background: #f7f7f7;
padding: 0 20px;
border-bottom: 1px solid #eeeeee;
}
.Myall-components .Mycomponent-list {
margin-right: -2px;
margin-top: -2px;
flex-wrap: wrap;
}
.Myall-components .Mycomponent-list .Mycomponent-item {
width: 100px;
height: 100px;
border: 0 solid #eeeeee;
border-width: 0 1px 1px 0;
text-align: center;
padding: 15px 0 0;
cursor: pointer;
}
.Mycomponent-item:nth-child(3n) {
border-right: 0 !important;
}
.template_right {
padding-left: 2px;
position: relative;
overflow-y: auto;
}
.template_Mobile {
overflow-y: auto;
padding: 0px 25px;
width: 435px;
height: 705px;
margin-left: 6px;
}
.mobile-framework {
width: 375px;
}
.mobile-framework-header {
height: 60px;
line-height: 60px;
background: #333;
color: #fff;
text-align: center;
background: url("../../assets/img/sallCenter/head.png") no-repeat;
}
.mobile-framework-body {
background-color: rgb(245, 247, 249);
min-height: 645px;
border: 1px solid #e2e2e2;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: left center;
}
.registrationAdd .diy-component-preview {
cursor: pointer;
position: relative;
zoom: 0.8;
-moz-transform: scale(0.8);
-moz-transform-origin: top left;
font-size: 28px;
}
.diy-component-edit {
position: absolute;
top: 0;
bottom: 0;
left: 465px;
right: 0;
background: #fff;
padding: 20px;
overflow: auto;
min-width: 650px;
padding-right: 20%;
}
.diy-component-options {
position: relative;
}
.active .diy-component-preview {
border: 2px dashed #409eff;
left: -2px;
right: -2px;
width: calc(100% + 4px);
}
.diy-search {
padding: 24px;
cursor: pointer;
background: rgb(242, 242, 242);
}
.diy-component-options .el-button {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0 !important;
}
.diy-search>div {
height: 60px;
line-height: 60px;
padding: 24px;
font-size: 28px;
}
.diy-component-edit .el-color-picker {
vertical-align: middle;
}
.tpEdit_btmMenu {
height: 54px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.bgMsg_Div div {
height: 50px;
width: 50px;
margin-bottom: 10px;
cursor: pointer;
background-color: #f5f7f9;
}
.bgMsg_Div .active {
background-color: #e6f4ff;
border: 2px dashed #5cb3fd;
}
.commonDisName {
min-width: 80px;
}
.tradeRemark {
color: #c0c4cc;
line-height: 1.5;
margin-top: 5px;
}
</style>
<template>
<div class="registrationAdd">
<div class="reEdit_header">
<span style="color: rgb(64, 158, 255); cursor: pointer"
@click="CommonJump('CustomerForms', {})">自定义表单</span><span
style="margin: 0 9px; color: #c0c4cc">/</span><span>新增</span>
</div>
<div flex="box:first" class="reEdit_Content">
<div class="Myall-components">
<el-form label-width="80px">
<el-form-item label="表单名称">
<el-input type="text" size="small" v-model="addMsg.FormName" maxlength="50"></el-input>
</el-form-item>
</el-form>
<div class="component-group" v-for="(item, index) in allComponents" :key="index">
<div class="component-group-name">{{ item.GroupName }}</div>
<div flex class="Mycomponent-list">
<div class="Mycomponent-item" v-for="(subItem, subIndex) in item.SubList" @click="addPlugin(subItem.Id)"
:key="subIndex">
<img :src="subItem.Icon" alt="" />
<div>{{ subItem.Name }}</div>
</div>
</div>
</div>
</div>
<div class="template_right">
<div class="template_Mobile">
<div class="mobile-framework" style="height: 705px">
<div class="mobile-framework-header"></div>
<div class="mobile-framework-body">
<!-- 为空的样式开始 -->
<div v-if="addMsg.FormData.length==0" flex="main:center cross:center" style="
height: 200px;
color: rgb(173, 177, 184);
text-align: center;
">
<div>
<i class="el-icon-folder-opened" style="font-size: 32px; margin-bottom: 10px"></i>
<div>空空如也</div>
<div>请从左侧组件库添加组件</div>
</div>
</div>
<!-- 为空的样式结束 -->
<div v-for="(item,index) in addMsg.FormData" :key="index" @click="getItem(item)">
<singletextbox v-if="item.CompKey=='SingleLineText'" :searchData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></singletextbox>
<multilinetext v-if="item.CompKey=='MultiLineText'" :searchData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></multilinetext>
<dropdown v-if="item.CompKey=='DorpDownList'" :searchData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></dropdown>
<imgupform v-if="item.CompKey=='ImageUploadComp'" :searchData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></imgupform>
<videoform v-if="item.CompKey=='VideoUploadComp'" :searchData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></videoform>
<uploadform v-if="item.CompKey=='CommonUploadComp'" :searchData="item" @getSord="getSord"
@comDelPlugin="comDelPlugin" :index="index" :dataLeng="addMsg.FormData.length"></uploadform>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tpEdit_btmMenu">
<el-button type="primary" size="small" @click="SaveData()">保存</el-button>
</div>
</div>
</template>
<script>
import singletextbox from '../tradePavilion/plugin/singletextbox'
import multilinetext from '../tradePavilion/plugin/multilinetext'
import dropdown from '../tradePavilion/plugin/dropdown'
import imgupform from '../tradePavilion/plugin/imgupform'
import videoform from '../tradePavilion/plugin/videoform'
import uploadform from '../tradePavilion/plugin/uploadform'
export default {
data() {
return {
allComponents: [],
addMsg: {
Id: 0,
FormName: '', //表单名称
FormType: 1, //对应类型
FormData: []
},
queryMsgId: 0, //参数
CustomTypeList: [],
};
},
created() {
this.GetPlugInList();
this.getCustomType();
if (this.$route.query.Id) {
this.queryMsgId = this.$route.query.Id;
this.getCustomFormInfo(this.queryMsgId)
}
},
components: {
singletextbox,
multilinetext,
dropdown,
imgupform,
videoform,
uploadform
},
mounted() {
},
methods: {
//获取表单详情
getCustomFormInfo(Id) {
this.apipost("/api/CustomForm/GetCustomForm", {
Id: Id
}, (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() {
this.apipost("/api/Tenant/GetPlugInList", {
QPlugTypeStr: "4"
}, (res) => {
if (res.data.resultCode == 1) {
this.allComponents = res.data.data;
} else {
this.Info(res.data.message);
}
});
},
//点击组件
addPlugin(Id) {
switch (Id.toString()) {
//单行文本框
case "SingleLineText":
let singleObj = {
CompKey: "SingleLineText",
isCked: false,
CompData: {
Name: "", //名字
WordsLength: "", //字数
TextValue: '', //绑定值
IsRequire: false, //是否必填
Remark: '', //提示信息
},
};
this.addMsg.FormData.push(singleObj);
break;
//多行文本框
case "MultiLineText":
let multiObj = {
CompKey: "MultiLineText",
isCked: false,
CompData: {
Name: "", //名字
WordsLength: "", //字数
TextValue: '', //绑定值
IsRequire: false, //是否必填
Remark: '', //提示信息
},
};
this.addMsg.FormData.push(multiObj);
break;
//下拉框组件
case "DorpDownList":
let dorpObj = {
CompKey: "DorpDownList",
isCked: false,
CompData: {
Name: "", //名字
IsMultiple: false, //是否多选
OptionValue: '', //选项值
IsRequire: false, //是否必填
OptionList: [],
Remark: '', //提示信息
},
};
this.addMsg.FormData.push(dorpObj);
break;
//图片上传组件
case "ImageUploadComp":
let imgObj = {
CompKey: "ImageUploadComp",
isCked: false,
CompData: {
Name: "", //名字
FileCount: '', //上传文件数量
FileType: '',
FileSizeLimit: '', //上传文件大小
Remark: '', //提示信息
FileList: [], //文件列表
},
};
this.addMsg.FormData.push(imgObj);
break;
//视频上传组件
case "VideoUploadComp":
let videoObj = {
CompKey: "VideoUploadComp",
isCked: false,
CompData: {
Name: "", //名字
FileCount: '', //上传文件数量
FileType: '',
FileSizeLimit: '', //上传文件大小
Remark: '', //提示信息
FileList: [], //文件列表
},
};
this.addMsg.FormData.push(videoObj);
break;
//文件上传组件
case "CommonUploadComp":
let uploadObj = {
CompKey: "CommonUploadComp",
isCked: false,
CompData: {
Name: "", //名字
FileType: '', //文件类型
FileCount: '', //上传文件数量
FileSizeLimit: '', //上传文件大小
Remark: '', //提示信息
FileList: [], //文件列表
},
};
this.addMsg.FormData.push(uploadObj);
break;
}
},
//获取对应类型
getCustomType() {
this.apipost("/api/CustomForm/GetCustomType", {}, (res) => {
if (res.data.resultCode == 1) {
this.CustomTypeList = res.data.data;
} else {
this.Info(res.data.message);
}
});
},
getItem(item) {
this.addMsg.FormData.forEach((x) => {
x.isCked = false;
});
item.isCked = true;
},
//给子组件调用 重新排序上移下移
getSord(index, IsUp) {
var currentItem = this.addMsg.FormData[index];
if (IsUp == 0) {
if (index > 0) {
var upItem = this.addMsg.FormData[index - 1];
this.$set(this.addMsg.FormData, index - 1, currentItem);
this.$set(this.addMsg.FormData, index, upItem);
}
} else {
if (index != this.addMsg.FormData.length - 1) {
var downItem = this.addMsg.FormData[index + 1];
this.$set(this.addMsg.FormData, index + 1, currentItem);
this.$set(this.addMsg.FormData, index, downItem);
}
}
},
//删除组件事件
comDelPlugin(index) {
this.addMsg.FormData.splice(index, 1);
},
SaveData() {
for (let i = 0; i < this.addMsg.FormData.length; i++) {
if (this.addMsg.FormData[i].CompData.Name == '') {
this.Error(`请输入第${i+1}个组件的名称`);
return
}
}
this.apipost("/api/CustomForm/SetCustomForm", this.addMsg, (res) => {
if (res.data.resultCode == 1) {
var tempData = res.data.data;
if (tempData) {
this.queryMsgId = tempData.Id;
this.getCustomFormInfo(this.queryMsgId);
}
this.Success(res.data.message);
} else {
this.Info(res.data.message);
}
});
}
},
};
</script>
src/components/tradePavilion/registrationAdd.vue
View file @ 74013aab
...@@ -283,10 +283,10 @@ ...@@ -283,10 +283,10 @@
<el-form-item label="表单名称"> <el-form-item label="表单名称">
<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"> <el-radio v-model="addMsg.FormType" v-for="(item,index) in CustomTypeList" :label="item.Id" :key="index">
{{item.Name}}</el-radio> {{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">
<div class="component-group-name">{{ item.GroupName }}</div> <div class="component-group-name">{{ item.GroupName }}</div>
......
src/router/index.js
View file @ 74013aab
...@@ -132,7 +132,6 @@ export default new Router({ ...@@ -132,7 +132,6 @@ export default new Router({
name: 'ALiPayAppMsg', name: 'ALiPayAppMsg',
component: resolve => require(['@/components/StoreDesign/ALiPayAppMsg'], resolve), component: resolve => require(['@/components/StoreDesign/ALiPayAppMsg'], resolve),
}, },
] ]
}, },
{ {
...@@ -146,7 +145,6 @@ export default new Router({ ...@@ -146,7 +145,6 @@ export default new Router({
name: 'adminList', name: 'adminList',
component: resolve => require(['@/components/phoneManage/adminList'], resolve), component: resolve => require(['@/components/phoneManage/adminList'], resolve),
}, },
] ]
}, },
{ {
...@@ -1706,7 +1704,16 @@ export default new Router({ ...@@ -1706,7 +1704,16 @@ export default new Router({
name: 'addAutoreleaseCoupon', name: 'addAutoreleaseCoupon',
component: resolve => require(['@/components/sallCenter/addAutoreleaseCoupon'], resolve), component: resolve => require(['@/components/sallCenter/addAutoreleaseCoupon'], resolve),
}, },
{ //自定义表单
path: '/customerForms',
name: 'customerForms',
component: resolve => require(['@/components/sallCenter/customerForms'], resolve),
},
{ //新增修改自定义表单
path: '/customerFormsAdd',
name: 'customerFormsAdd',
component: resolve => require(['@/components/sallCenter/customerFormsAdd'], resolve),
}
] ]
}, },
{ {
......
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