修改

src/components/tradePavilion/plugin/dropdown.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">
+        <div style="display:flex;align-items:center;">
+          <div style="color:red;" v-show="searchData.CompData.IsRequire">*</div>
+          <div class="commonDisName">{{searchData.CompData.Name}}</div>
+            <div class="single_Input">
+              <span>请选择</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.CompData.Name" size="small"></el-input>
+          </el-form-item>
+          <el-form-item label="是否多选">
+            <el-switch v-model="searchData.CompData.IsMultiple">
+            </el-switch>
+          </el-form-item>
+          <el-form-item label="是否必填">
+            <el-switch v-model="searchData.CompData.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/plugin/imgupform.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;
+  }
+  .imgdiy-search>div{
+    min-height: 100px;
+    line-height: 60px;
+    padding: 24px;
+    font-size: 28px;
+  }
+</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="imgdiy-search">
+        <div style="display:flex;align-items:center;">
+          <div class="commonDisName">{{searchData.CompData.Name}}</div>
+          <div>
+            <template v-for="(item,index) in imgNum">
+               <img :key="index" src="../../../assets/img/default.png" style="width:100px;margin-right:20px;" alt=""> 
+            </template>
+          </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.CompData.Name" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="上传文件数量">
+          <el-input v-model="searchData.CompData.FileCount"
+            @keyup.native="checkInteger(searchData.CompData,'FileCount')" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="上传文件大小">
+          <el-switch v-model="searchData.CompData.FileSizeLimit"
+            @keyup.native="checkInteger(searchData.CompData,'FileSizeLimit')" size="small">
+          </el-switch>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["searchData", "index", "dataLeng"],
+    data() {
+      return {
+        imgNum:0
+      };
+    },
+    created() {},
+    watch:{
+      'searchData.CompData.FileCount'(val){
+        this.imgNum = parseInt(val);
+      }
+    },
+    methods: {
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
+      }
+    },
+    mounted() {}
+  };
+
+</script>

src/components/tradePavilion/plugin/multilinetext.vue

@@ -30,7 +30,7 @@
       <div class="diy-multiple">
         <div style="display:flex;align-items:center;">
           <div style="color:red;" v-show="searchData.CompData.IsRequire">*</div>
-          <div>{{searchData.CompData.Name}}</div>
+          <div class="commonDisName">{{searchData.CompData.Name}}</div>
           <div class="multilineText_Input">
             <span v-if="searchData.CompData.WordsLength>0">最多输入{{searchData.CompData.WordsLength}}个字</span>
           </div>

src/components/tradePavilion/plugin/singletextbox.vue

@@ -27,7 +27,7 @@
       <div class="diy-search">
         <div style="display:flex;align-items:center;">
           <div style="color:red;" v-show="searchData.CompData.IsRequire">*</div>
-          <div>{{searchData.CompData.Name}}</div>
+          <div class="commonDisName">{{searchData.CompData.Name}}</div>
           <div class="single_Input">
             <span v-if="searchData.CompData.WordsLength>0">最多输入{{searchData.CompData.WordsLength}}个字</span>
           </div>

src/components/tradePavilion/plugin/videoform.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;
+  }
+  .imgdiy-search>div{
+    min-height: 100px;
+    line-height: 60px;
+    padding: 24px;
+    font-size: 28px;
+    background: #fff;
+  }
+</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="imgdiy-search">
+        <div style="display:flex;align-items:center;">
+          <div class="commonDisName">{{searchData.CompData.Name}}</div>
+          <div style="margin-left:5px;">
+            <template v-for="(item,index) in imgNum">
+               <img :key="index" src="../../../assets/img/default.png" style="width:100px;margin-right:20px;" alt=""> 
+            </template>
+          </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.CompData.Name" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="上传文件数量">
+          <el-input v-model="searchData.CompData.FileCount"
+            @keyup.native="checkInteger(searchData.CompData,'FileCount')" size="small"></el-input>
+        </el-form-item>
+        <el-form-item label="上传文件大小">
+          <el-switch v-model="searchData.CompData.FileSizeLimit"
+            @keyup.native="checkInteger(searchData.CompData,'FileSizeLimit')" size="small">
+          </el-switch>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["searchData", "index", "dataLeng"],
+    data() {
+      return {
+        imgNum:0
+      };
+    },
+    created() {},
+    watch:{
+      'searchData.CompData.FileCount'(val){
+        this.imgNum = parseInt(val);
+      }
+    },
+    methods: {
+      //向父组件传值 并调用排序
+      resetSord(IsUp) {
+        this.$emit('getSord', this.index, IsUp);
+      },
+      //点击触发父组件删除
+      delPlugin() {
+        this.$emit('comDelPlugin', this.index);
+      }
+    },
+    mounted() {}
+  };
+
+</script>

src/components/tradePavilion/registrationAdd.vue

@@ -238,6 +238,7 @@
     line-height: 60px;
     padding: 0 24px;
     font-size: 28px;
+    background: #fff;
   }
 
   .diy-component-edit .el-color-picker {
@@ -265,7 +266,9 @@
     background-color: #e6f4ff;
     border: 2px dashed #5cb3fd;
   }
-
+  .commonDisName{
+    min-width: 80px;
+  }
 </style>
 <template>
   <div class="registrationAdd">
@@ -319,7 +322,12 @@
                   @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>
               </div>
             </div>
           </div>
@@ -334,6 +342,9 @@
 <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'
   export default {
     data() {
       return {
@@ -359,7 +370,10 @@
     },
     components: {
       singletextbox,
-      multilinetext
+      multilinetext,
+      dropdown,
+      imgupform,
+      videoform
     },
     mounted() {