fix

ruoyi-ui/src/mock/cpnsList.js

@@ -4,15 +4,18 @@ export const cpnsList = [
     classType: 'icon-m-anniu',
     type: 'button',
     text: '按钮',
+    dom: '<div style="width: 100%; height: 100%; background: pink;">按钮</div>'
   },
   {
     classType: 'icon-wenben',
     type: 'text',
     text: '文字',
+    dom: '<div style="width: 100%; height: 100%; background: #000;">文本</div>'
   },
   {
     classType: 'icon-tupian',
     type: 'image',
     text: '图片',
+    dom: '<div style="width: 100%; height: 100%; background: skyblue;">上传图片</div>'
   }
 ]

ruoyi-ui/src/views/template/addTemplate/blocks/detailDialog.vue

@@ -23,7 +23,7 @@
         <div class="box-btns">
           <h3>组件库</h3>
           <div class="box-btns-cpns">
-            <div v-for="(item, index) in cpnsList" :key="index"  class="box-btns-cpns-cpn">
+            <div v-for="(item, index) in cpnsList" :key="index"  class="box-btns-cpns-cpn" @click="addCpns(item)">
               <span class="iconfont" :class="item.classType"></span>
               <p>{{ item.text }}</p>
             </div>
@@ -78,41 +78,34 @@
                 :h="item.h" 
                 :i="item.i"
                 :key="index"
-                class="box-btns-item"
                 @dblclick.native="showSeting(item, index)"
               >
-                <span>{{item.text}} <i @click.stop="removeBtn(index)" class="el-icon-close"></i></span>
+                <span class="box-canvs-main-span">
+                  <div style="width: 100%; height: 100%;" v-html="item.dom"></div> 
+                  <i @click.stop="removeBtn(index)" class="el-icon-close"></i></span>
               </grid-item>
             </grid-layout>
           </div> 
         </div>
         <div class="box-set">
-          <div class="box-set-form">
-            <h3>遥控器基础配置</h3>
-            <f-form
-              ref="ruleForm"
-              :form="fromData"
-              :disabled="dialogType==='detail'"
-              :config="fromDataConfig"
-              :rules="fromRules"
-              label-position="left"
-              :column="1"
-              :key="fromKey"
-            />
-          </div>
-          <div class="box-set-btn" v-if="btnFromShow">
-            <h3>按钮基础配置</h3>
-            <f-form
-              ref="btnForm"
-              :form="btnData"
-              :config="btnDataConfig"
-              :rules="btnRules"
-              label-position="left"
-              :column="1"
-              :key="btnFromKey"
-            />
-            <div><button @click="changeCpns">确定</button><button @click="btnFromShow = false">取消</button></div>
-          </div>
+          <el-tabs type="card" v-model="activeName">
+            <el-tab-pane label="按钮基础配置" name="first">
+              <f-form
+                ref="btnForm"
+                :form="btnData"
+                :config="btnDataConfig"
+                :rules="btnRules"
+                label-position="left"
+                :column="1"
+                :key="btnFromKey"
+              />
+            </el-tab-pane>
+            <el-tab-pane label="按钮样式配置" name="second">
+           按钮样式配置
+            </el-tab-pane>
+          </el-tabs>
+          <div><button @click="changeCpns">确定</button><button @click="btnFromShow = false">取消</button></div>
+
         </div>
       </div>
     </template>
@@ -150,6 +143,8 @@ export default {
   },
   data() {
     return {
+      // tab
+      activeName: 'first',
       cpnsList,
       // 数据对象
       fromData:{
@@ -258,15 +253,15 @@ export default {
       this.btnFromShow = false
       return true
     },
-    addBtn(item) {
-      this.pageArray.push({ ...item, i: this.pageArrayCount })
+    addCpns(item) {
+      console.log(item)
+      this.pageArray.push({ w: 2, h: 2, x: 1, y: this.pageArray.map(item => item?.y).sort()[-1] || 1, i: this.pageArrayCount, ...item })
     },
     removeBtn(index) {
       this.pageArray.splice(index, 1)
     },
     showSeting(item, index) {
-      console.log(item, 'xxxxxxxxxxx')
-      if (Object.keys(item).length === 0) return 
+      if (Object.keys(item).length == 0) return 
       this.currentCpn = index
       const from = { ...item }
       this.initBtnFormData(from)
@@ -381,8 +376,12 @@ export default {
       border-radius: 4px;
       overflow-y: scroll;
       &::-webkit-scrollbar {
-      display: none;
-    }
+        display: none;
+      }
+      .box-canvs-main-span {
+        position: relative;
+        
+      }
     }
   }
   &-set {
@@ -390,7 +389,7 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    height: 667px;
+    min-height: 667px;
     overflow-y: scroll;
     &::-webkit-scrollbar {
       display: none;