modify: 样式调整1

ruoyi-ui/src/baseComponents/f-fileUpload/index.vue

@@ -224,6 +224,10 @@
   </script>
   
   <style scoped lang="scss">
+  .upload-file, .upload-file-uploader {
+    display: flex;
+    align-items: center;
+  }
   .upload-file-uploader {
     margin-bottom: 5px;
   }

ruoyi-ui/src/baseComponents/f-form/index.vue

@@ -1,6 +1,7 @@
 <template>
   <el-form 
     ref="fForm" 
+    v-bind="$attrs"
     :key="update" 
     :rules="rules" 
     class="flex-wrap f-form" 

ruoyi-ui/src/views/template/addTemplate/blocks/config.js

@@ -34,8 +34,10 @@ const formConfig = function(){
       prop: "backgroundPictureUrl",
       label:'背景图',
       btnText: '上传背景图',
+      span: '3',
       attrs: {
         placeholder: '上传背景图',
+        isImage: false
       }
     }
   ]
@@ -44,14 +46,6 @@ const formConfig = function(){
 const btnFormConfig = function() {
   return [
     {
-      itemType: "input",
-      prop: "name",
-      label:'按钮名称',
-      attrs: {
-          placeholder: "请输入模版名称"
-      }
-    },
-    {
       itemType: "select",
       prop: "typeNum",
       label:'按钮类型',
@@ -64,7 +58,7 @@ const btnFormConfig = function() {
       prop: "addSubMax",
       label:'最大值',
       attrs: {
-          placeholder: "开关型需输入最大值"
+          placeholder: "加减型需输入最大值"
       }
     },
     {
@@ -72,7 +66,7 @@ const btnFormConfig = function() {
       prop: "addSubMin",
       label:'最小值',
       attrs: {
-          placeholder: "开关型需输入最小值"
+          placeholder: "加减型需输入最小值"
       }
     },
     {

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

@@ -2,11 +2,11 @@
   <!-- 列表选择弹窗 -->
   <f-dialog
     ref="dialog"
-    title="遥控器设计器布局配置"
-    :initData="handleInitData"
+    title="遥控器设计器配置"
+    :initData="handleInitData" 
     :isDetermine="dialogType!=='detail'"
     :beforeClose="handleBeforeClose"
-    width="1350px"
+    width="1550px"
   >
     <template #contain>
       <h3>遥控器基础配置</h3>
@@ -18,8 +18,10 @@
         :rules="fromRules"
         label-position="left"
         :key="fromKey"
-        :column="4"
+        :inline="true"
+        :column="6"
       />
+      <h3>遥控器布局配置</h3>
       <div class="box">
         <div class="box-btns">
           <h3>组件库</h3>
@@ -79,7 +81,7 @@
         </div>
         <div class="box-set">
           <el-tabs v-if="isShowSeting" v-model="activeName" type="card">
-            <el-tab-pane label="按钮基础配置" name="first">
+            <el-tab-pane label="组件基础配置" name="first">
               <f-form
                 ref="btnForm"
                 :key="btnFromKey"
@@ -90,7 +92,7 @@
                 :column="1"
               />
             </el-tab-pane>
-            <el-tab-pane label="按钮样式配置" name="second">
+            <el-tab-pane label="组件样式配置" name="second">
               <f-form
                 ref="btnClassForm"
                 :key="btnFromKey"
@@ -160,8 +162,7 @@ export default {
       btnData: {},
       btnDataConfig: btnFormConfig(),
       btnRules: {
-        name:[{required: true, message: '请输入按钮名称'}],
-        status:[{required: true, message: '请选择按钮类型'}],
+        typeNum:[{required: true, message: '请选择按钮类型'}],
         defValue:[{required: true, message: '请输入默认值'}],
         bandValue:[{required: true, message: '请输入波段值，默认38000'}],
         bootCode:[{required: true, message: '请输入引导码'}],
@@ -327,7 +328,11 @@ export default {
       };
       const validate = await this.$refs.ruleForm.validate();
 
+      console.log(this.pageArray.map(async (item, index) => await this.$refs['btnForm'+index].validate()))
+
       if (!validate) return false;
+
+
       const params = {
         ...this.fromData,
         components: JSON.stringify(this.pageArray),
@@ -346,21 +351,35 @@ export default {
     },
     // 添加
     addCpns(item) {
-      this.pageArray.push({ w: 2, h: 2, x: 1, y: this.pageArray.map(item => item?.y).sort()[-1] || 1, i: this.pageArrayCount, ...item })
+      this.pageArray.push({ w: 2, h: 2, x: 1, y: this.pageArray.map(item => item?.y).sort()[this.pageArray.length-1] || 1, i: this.pageArrayCount, ...item })
       this.initBtnFormData(this.pageArray.length-1);
     },
     removeBtn(index) {
-      this.pageArray.splice(index, 1)
+      const tmpList = this.pageArray
+      tmpList.splice(index, 1)
+      this.pageArray = [...tmpList]
     },
     showSeting(index) {
+      this.activeName = 'second'
       this.initBtnFormData(index)
     },
+    // 校验按钮属性
+    validateBtn(obj) {
+      Object.keys(btnRules).find(item => {
+        // if (obj[item])
+      })
+    }
   },
 
 
 }
 </script>
 <style scoped lang="scss">
+h3 {
+  font-weight: 700;
+  padding-bottom: 8px;
+  border-bottom: 2px solid #ccc;
+}
 .box {
   box-sizing: border-box;
   display: flex;