修改

src/components/tradePavilion/plugin/singletextbox.vue

+<style>
+  .single_Input {
+    width: 500px;
+    height: 60px;
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    margin-left:20px;
+    background: #fff;
+    font-size:25px;
+    color:#c0c4d6;
+    line-height: 60px;
+    padding-left:20px;
+  }
+
+</style>
+<template>
+  <div :class="{'active':searchData.isCked}">
+    <div class="diy-component-options" v-if="searchData.isCked">
+      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
+      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
+        style="right: -25px; top: 0;"></el-button>
+      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
+        style="right: -25px; top: 30px;"></el-button>
+    </div>
+    <div class="diy-component-preview">
+      <div class="diy-search">
+        <!-- <el-form>
+            <el-form-item :label="searchData.data.Name">
+                <el-input :placeholder="`最多输入${searchData.data.WordsLength}个字`" size="small"></el-input>
+            </el-form-item>
+        </el-form> -->
+        <div style="display:flex;align-items:center;">
+          <div style="color:red;" v-show="searchData.data.IsRequire">*</div>
+          <div>{{searchData.data.Name}}</div>
+          <div class="single_Input">
+            <span v-if="searchData.data.WordsLength>0">最多输入{{searchData.data.WordsLength}}个字</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="diy-component-edit" v-if="searchData.isCked">
+      <el-form label-width="100px">
+        <el-form-item label="名字">
+          <el-input v-model="searchData.data.Name" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="字数">
+          <el-input type="text" v-model="searchData.data.WordsLength" @keyup.native="checkInteger(searchData.data,'WordsLength')" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="是否必填">
+          <el-switch v-model="searchData.data.IsRequire">
+          </el-switch>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["searchData", "index", "dataLeng"],
+    data() {
+      return {
+
+      };
+    },
+    created() {},
+    methods: {
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
+      }
+    },
+    mounted() {}
+  };
+
+</script>

src/components/tradePavilion/registrationAdd.vue

 <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;
+  }
+  .registraType .el-radio:last-child{
+    margin-left:28px;
+  }
+.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;
+  }
+
+  .diy-component-preview {
+    cursor: pointer;
+    position: relative;
+    zoom: 0.5;
+    -moz-transform: scale(0.5);
+    -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: 0 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;
+  }
 </style>
 <template>
+  <div class="registrationAdd">
+    <div class="reEdit_header">
+      <span style="color: rgb(64, 158, 255); cursor: pointer"
+        @click="CommonJump('tradePavilionIndex', {})">榜单报名表单</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-item label="对应类型" style="width:300px;" class="registraType">
+            <el-radio v-model="addMsg.Type" v-for="(item,index) in CustomTypeList" :label="item.Id" :key="index">{{item.Name}}</el-radio>
+          </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="dataList.length==0" flex="main:center cross:center" style="
+                  height: 200px;
+                  color: rgb(173, 177, 184);
+                  text-align: center;
+                ">
                 <div>
-        123
+                  <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 dataList" :key="index" @click="getItem(item)">
+                <singletextbox v-if="item.Id=='SingleLineText'" :searchData="item" @getSord="getSord" @comDelPlugin="comDelPlugin"
+                  :index="index" :dataLeng="dataList.length"></singletextbox>
+              </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'
+  export default {
+    data() {
+      return {
+        allComponents: [],
+        addMsg: {
+          formName: '', //表单名称
+          Type: 1, //对应类型
+        },
+        CustomTypeList:[],
+        dataList: []
+      };
+    },
+    created() {},
+    components: {
+      singletextbox
+    },
+    mounted() {
+      this.GetPlugInList();
+      this.getCustomType();
+    },
+    methods: {
+      //获取左侧菜单
+      GetPlugInList() {
+        this.apipost("/api/Tenant/GetPlugInList", {
+          QPlugTypeStr: "4"
+        }, (res) => {
+          if (res.data.resultCode == 1) {
+            this.allComponents = res.data.data;
+            console.log(this.allComponents, 'all');
+          } else {
+            this.Info(res.data.message);
+          }
+        });
+      },
+      //点击组件
+      addPlugin(Id) {
+        switch (Id.toString()) {
+          //单行文本框
+          case "SingleLineText":
+            let singleObj = {
+              Id: "SingleLineText",
+              isCked: false,
+              data: {
+                Name: "", //名字
+                WordsLength: "", //字数
+                IsRequire: false
+              },
+            };
+            this.dataList.push(singleObj);
+            break;
+            //多行文本框
+          case "MultiLineText":
+            let multiObj = {
+              Id: "MultiLineText",
+              isCked: false,
+              data: {
+                Name: "", //名字
+                WordsLength: "", //字数
+                IsRequire: false
+              },
+            };
+            this.dataList.push(multiObj);
+            break;
+            //下拉框组件
+          case "DorpDownList":
+            let dorpObj = {
+              Id: "DorpDownList",
+              isCked: false,
+              data: {
+                Name: "", //名字
+                IsMultiple: false, //是否多选
+                OptionValue: '', //选项值
+                IsRequire: false //是否必填
+              },
+            };
+            this.dataList.push(dorpObj);
+            break;
+            //图片上传组件
+          case "ImageUploadComp":
+            let imgObj = {
+              Id: "ImageUploadComp",
+              isCked: false,
+              data: {
+                Name: "", //名字
+                FileCount: '', //上传文件数量
+                FileSizeLimit: '' //上传文件大小
+              },
+            };
+            this.dataList.push(imgObj);
+            break;
+            //视频上传组件
+          case "VideoUploadComp":
+            let videoObj = {
+              Id: "VideoUploadComp",
+              isCked: false,
+              data: {
+                Name: "", //名字
+                FileCount: '', //上传文件数量
+                FileSizeLimit: '' //上传文件大小
+              },
+            };
+            this.dataList.push(videoObj);
+            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.dataList.forEach((x) => {
+          x.isCked = false;
+        });
+        item.isCked = true;
+      },
+    //给子组件调用 重新排序上移下移
+      getSord(index, IsUp) {
+        var currentItem = this.dataList[index];
+        if (IsUp == 0) {
+          if (index > 0) {
+            var upItem = this.dataList[index - 1];
+            this.$set(this.dataList, index - 1, currentItem);
+            this.$set(this.dataList, index, upItem);
+          }
+        } else {
+          if (index != this.dataList.length - 1) {
+            var downItem = this.dataList[index + 1];
+            this.$set(this.dataList, index + 1, currentItem);
+            this.$set(this.dataList, index, downItem);
+          }
+        }
+      },
+      //删除组件事件
+      comDelPlugin(index) {
+        this.dataList.splice(index, 1);
+      },
+
+      SaveData() {
+
+      }
+    },
+  };
+
+</script>