修改

src/components/sallCenter/plugin/search.vue

+<style>
+    .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;
+    }
+    .diy-search > div {
+        height: 60px;
+        line-height: 60px;
+        padding: 0 24px;
+        font-size: 28px;
+    }
+    .diy-component-edit .el-color-picker {
+        vertical-align: middle;
+    }
+</style>
+<template>
+  <div :class="{'avctive':searchData.isCked}">
+    <div class="diy-component-options" v-if="searchData.isCked">
+        <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;"></el-button>
+        <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
+    </div>
+    <div class="diy-component-preview">
+    <div class="diy-search">
+        <div style="background: rgb(255, 255, 255); border-radius: 4px; color: rgb(85, 85, 85); text-align: left;">搜索
+        </div>
+    </div>
+    </div>
+    <div class="diy-component-edit" v-if="searchData.isCked">
+        <el-form label-width="100px">
+            <el-form-item label="搜索框颜色">
+                <el-color-picker v-model="searchData.data.color" size="small"></el-color-picker>
+                <el-input type="text" v-model="searchData.data.color" size="small" style="width: 80px; margin-right: 25px;"></el-input>
+            </el-form-item>
+            <el-form-item label="背景颜色">
+                <el-color-picker v-model="searchData.data.background" size="small"></el-color-picker>
+                <el-input type="text" v-model="searchData.data.background" size="small" style="width: 80px; margin-right: 25px;"></el-input>
+            </el-form-item>
+            <el-form-item label="圆角">
+                <el-input type="number" size="small" v-model="searchData.data.radius">
+                    <template slot="append">px</template>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="提示文字">
+                <el-input type="text" size="small" v-model="searchData.data.placeholder"></el-input>
+            </el-form-item>
+            <el-form-item label="文字颜色">
+                <el-color-picker v-model="searchData.data.textColor" size="small"></el-color-picker>
+            </el-form-item>
+            <el-form-item label="文字位置">
+                <el-radio v-model="searchData.data.textPosition" label="left">居左</el-radio>
+                <el-radio v-model="searchData.data.textPosition" label="right">居右</el-radio>
+            </el-form-item>
+        </el-form>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["searchData"],
+    data() {
+      return {
+
+      };
+    },
+    created() {
+    },
+    methods: {
+    },
+    mounted() {
+        console.log(this.searchData,'data');
+    }
+  };
+
+</script>
+

src/components/sallCenter/templateEdit.vue

@@ -107,7 +107,7 @@
         <div class="component-group" v-for="(item,index) in allComponents" :key="index">
           <div class="component-group-name">{{item.GroupName}}</div>
           <div flex class="component-list">
-            <div class="component-item" v-for="(subItem,subIndex) in item.SubList" :key="subIndex">
+            <div class="component-item" v-for="(subItem,subIndex) in item.SubList" @click="addPlugin(subItem.Id)" :key="subIndex">
               <img :src="subItem.Icon" alt="" />
               <div>{{subItem.Name}}</div>
             </div>
@@ -119,7 +119,8 @@
           <div class="mobile-framework" style="height:705px;">
             <div class="mobile-framework-header"></div>
             <div class="mobile-framework-body">
-              <div flex="main:center cross:center"
+              <!-- 为空的样式开始 -->
+              <div v-if="isEmpty" 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>
@@ -127,6 +128,10 @@
                   <div>请从左侧组件库添加组件</div>
                 </div>
               </div>
+              <!-- 为空的样式结束 -->
+              <div v-for="(item,index) in dataList" :key="index" @click="getItem(item)">
+                <search v-if="item.Id=='search'" :searchData="item"></search>
+              </div>
             </div>
           </div>
         </div>
@@ -135,26 +140,64 @@
   </div>
 </template>
 <script>
+  import search from "../sallCenter/plugin/search.vue"
   export default {
     data() {
       return {
         allComponents:[],
+        dataList:[],
+        //是否为空
+        isEmpty:true,
       };
     },
     created() {
 
+    },
+    components: {
+      search
     },
     methods: {
+      //获取左侧菜单
       GetPlugInList(){
         this.apipost("/api/Tenant/GetPlugInList", {}, res => {
           if (res.data.resultCode == 1) {
-            console.log(res,'ressss');
             this.allComponents=res.data.data;
           } else {
             this.Info(res.data.message);
           }
         })
-
+      },
+      //点击基础组件
+      addPlugin(Id){
+        this.isEmpty=false;
+        switch(Id.toString()) {
+          //搜索
+          case 'search':
+              let obj = {
+                Id:'search',
+                isCked:false,
+                data:{
+                  color:'#FFFFFF',
+                  background:'#f2f2f2',
+                  radius:4,
+                  placeholder:'搜索',
+                  textColor:'#555555',
+                  textPosition:"left"
+                }
+              }
+              this.dataList.push(obj);
+              break;
+          case n:
+              
+              break;
+        } 
+      },
+      //点击选中
+      getItem(item){
+        this.dataList.forEach(x=>{
+          x.isCked=false;
+        })
+        item.isCked=true;
       }
     },
     mounted() {