fix

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

@@ -1,7 +1,6 @@
 <template>
   <el-form 
     ref="fForm" 
-    v-bind="$attrs"
     :key="update" 
     :rules="rules" 
     class="flex-wrap f-form" 
@@ -94,6 +93,11 @@ export default {
       type: Boolean,
       default: false
     },
+    // 是否同行
+    online:{
+      type:Boolean,
+      default:false
+    }
   },
   data() {
     return {
@@ -198,6 +202,10 @@ export default {
       if (item.itemClass) {
         classStr += item.itemClass;
       }
+
+      if(this.online){
+        classStr += 'online_from_item'
+      }
       return classStr;
     },
     // 通过labelWidth获取对应index里面的值
@@ -258,6 +266,8 @@ export default {
 <style lang="scss" scoped>
 .f-form .el-form-item {
   margin-bottom: 25px;
+  display: inline-block;
+    padding-right: 8px;
   // display: flex;
   // align-items: center;
   .el-change-icon {

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

@@ -3,38 +3,38 @@ const btnType = [
   { name: '加减型', value: '0' }
 ]
 
-const formConfig = function(){
+const formConfig = function() {
   return [
     {
-      itemType: "input",
-      prop: "name",
-      label:'模版名称',
+      itemType: 'input',
+      prop: 'name',
+      label: '模版名称',
       attrs: {
-          placeholder: "请输入模版名称"
+        placeholder: '请输入模版名称'
       }
     },
     {
-      itemType: "select",
-      prop: "status",
-      label:'状态',
+      itemType: 'select',
+      prop: 'status',
+      label: '状态',
       attrs: {
-          list: this.useStatus    
+        list: this.useStatus
       }
     },
     {
-      itemType: "select",
-      prop: "baseId",
-      label:'基础库',
+      itemType: 'select',
+      prop: 'baseId',
+      label: '基础库',
       attrs: {
         list: this.allBase
       }
     },
     {
-      itemType: "fileUpload",
-      prop: "backgroundPictureUrl",
+      itemType: 'fileUpload',
+      prop: 'backgroundPictureUrl',
       label:'背景图',
       btnText: '上传背景图',
-      span: '3',
+      span: '2',
       attrs: {
         placeholder: '上传背景图',
         isImage: false
@@ -43,80 +43,87 @@ const formConfig = function(){
   ]
 }
 
-const btnFormConfig = function() {
-  return [
-    {
-      itemType: "select",
-      prop: "typeNum",
-      label:'按钮类型',
-      attrs: {
-          list: btnType    
-      }
-    },
-    {
-      itemType: "input",
-      prop: "addSubMax",
-      label:'最大值',
-      attrs: {
-          placeholder: "加减型需输入最大值"
+const btnFormConfig = function(type) {
+  let orderList = []
+
+  if (type === '0') {
+    orderList = [
+      {
+        itemType: 'input',
+        prop: 'addSubMax',
+        label: '最大值',
+        attrs: {
+          placeholder: '加减型需输入最大值'
+        }
+      },
+      {
+        itemType: 'input',
+        prop: 'addSubMin',
+        label: '最小值',
+        attrs: {
+          placeholder: '加减型需输入最小值'
+        }
       }
-    },
+    ]
+  }
+  return [
     {
-      itemType: "input",
-      prop: "addSubMin",
-      label:'最小值',
+      itemType: 'select',
+      prop: 'typeNum',
+      label: '按钮类型',
       attrs: {
-          placeholder: "加减型需输入最小值"
+        list: btnType
       }
     },
+    ...orderList,
     {
-      itemType: "input",
-      prop: "defValue",
+      itemType: 'input',
+      prop: 'defValue',
       label:'默认值',
       attrs: {
-          placeholder: "请输入默认值"
+          placeholder: '请输入默认值'
       }
     },
     {
-      itemType: "input",
-      prop: "bandValue",
+      itemType: 'input',
+      prop: 'bandValue',
       label:'波段值',
       attrs: {
-          placeholder: "请输入波段值，默认38000"
+          placeholder: '请输入波段值，默认38000'
       }
     },
     {
-      itemType: "input",
-      prop: "bootCode",
+      itemType: 'input',
+      prop: 'bootCode',
       label:'引导码',
       attrs: {
-          placeholder: "请输入引导码"
+          placeholder: '请输入引导码'
       }
     },
     {
-      itemType: "input",
-      prop: "bootCodeSend",
+      itemType: 'input',
+      prop: 'bootCodeSend',
       label:'引导码发送次数',
       attrs: {
-          placeholder: "请输入引导码发送次数"
+          placeholder: '请输入引导码发送次数'
       }
     },
     {
-      itemType: "input",
-      prop: "dateCode",
+      itemType: 'input',
+      prop: 'dateCode',
       label:'数据码',
       attrs: {
-          placeholder: "请输入数据码",
+          placeholder: '请输入数据码',
           span: 2,
           type: 'textarea'
       }
     },
     {
-      itemType: "input",
-      prop: "overCode",
+      itemType: 'input',
+      prop: 'overCode',
       label:'结束码',
       attrs: {
-          placeholder: "请输入结束码"
+          placeholder: '请输入结束码'
       }
     }
   ]

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

@@ -9,106 +9,115 @@
     width="1550px"
   >
     <template #contain>
-      <h3>遥控器基础配置</h3>
-      <f-form
-        ref="ruleForm"
-        :form="fromData"
-        :disabled="dialogType==='detail'"
-        :config="fromDataConfig"
-        :rules="fromRules"
-        label-position="left"
-        :key="fromKey"
-        :inline="true"
-        :column="6"
-      />
-      <h3>遥控器布局配置</h3>
-      <div class="box">
-        <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" @click="addCpns(item)">
-              <span class="iconfont" :class="item.classType"></span>
-              <p>{{ item.text }}</p>
+      <el-card>
+        <h3 slot="header">遥控器基础配置</h3>
+        <f-form
+          ref="ruleForm"
+          :form="fromData"
+          :disabled="dialogType==='detail'"
+          :config="fromDataConfig"
+          :rules="fromRules"
+          label-position="left"
+          :key="fromKey"
+          :online="true"
+          :column="4"
+          required
+          @change="handleRuleFormChange"
+        />
+      </el-card>
+      <br><br>
+      <el-card >
+        <h3>遥控器布局配置</h3>
+        <div class="box">
+          <el-card class="box-btns">
+            <div slot="header" class="clearfix">组件库</div>
+
+            <div class="box-btns-cpns">
+              <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>
             </div>
-          </div>
-        </div>
-        <div class="box-canvs">
-          <div class="box-canvs-main" :style="{ backgroundImage: `url(${fromData.backgroundPictureUrl?baseUrl+fromData.backgroundPictureUrl:''})` }">
-            <grid-layout 
-              :key="pageArray.length+'_'+layoutKey"
-              :layout.sync="pageArray"
-              :col-num="6"
-              :row-height="30"
-              :is-draggable="true"
-              :is-resizable="false"
-              :is-mirrored="false"
-              :vertical-compact="false"
-              :prevent-collision="true"
-              :margin="[10, 10]"
-              :use-css-transforms="false"
-              :auto-size="false"
-              class="box-canvs-main-screen"
-            >
-              <grid-item 
-                v-for="(item, index) in pageArray"
-                :key="index+'_'+item.h+'_'+item.w"
-                :is-bounded="false"
-                :x="Number(item.x)"
-                :y="Number(item.y)"
-                :w="Number(item.w)"
-                :h="Number(item.h)"
-                :i="item.i"
-                @dblclick.native="showSeting(index)"
+          </el-card>
+          <div class="box-canvs">
+            <div class="box-canvs-main" :style="{ backgroundImage: `url(${fromData.backgroundPictureUrl?baseUrl+fromData.backgroundPictureUrl:''})` }">
+              <grid-layout 
+                :key="pageArray.length+'_'+layoutKey"
+                :layout.sync="pageArray"
+                :col-num="6"
+                :row-height="30"
+                :is-draggable="true"
+                :is-resizable="false"
+                :is-mirrored="false"
+                :vertical-compact="false"
+                :prevent-collision="true"
+                :margin="[10, 10]"
+                :use-css-transforms="false"
+                :auto-size="false"
+                class="box-canvs-main-screen"
               >
-                <div class="box-canvs-main-span">
-                  <div
-                    style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center; background-size: contain; background-repeat: no-repeat;"
-                    :style="{
-                      borderColor:item.borderColor,
-                      borderWidth:item.border,
-                      borderStyle:'solid',
-                      borderRadius:item.borderRadius,
-                      fontSize:item.fontSize,
-                      backgroundColor:item.background,
-                      color:item.color,
-                      backgroundImage:item.backgroundImage?`url(${baseUrl}${item.backgroundImage})`:'',
-                    }"
-                  >
-                    {{item.content}}
+                <grid-item 
+                  v-for="(item, index) in pageArray"
+                  :key="index+'_'+item.h+'_'+item.w"
+                  :is-bounded="false"
+                  :x="Number(item.x)"
+                  :y="Number(item.y)"
+                  :w="Number(item.w)"
+                  :h="Number(item.h)"
+                  :i="item.i"
+                  @dblclick.native="showSeting(index)"
+                >
+                  <div class="box-canvs-main-span">
+                    <div
+                      style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center; background-size: contain; background-repeat: no-repeat;"
+                      :style="{
+                        borderColor:item.borderColor,
+                        borderWidth:item.border,
+                        borderStyle:'solid',
+                        borderRadius:item.borderRadius,
+                        fontSize:item.fontSize,
+                        backgroundColor:item.background,
+                        color:item.color,
+                        backgroundImage:item.backgroundImage?`url(${baseUrl}${item.backgroundImage})`:'',
+                      }"
+                    >
+                      {{item.content}}
+                    </div>
+                    <i class="el-icon-close" @click.stop="removeBtn(index)" />
                   </div>
-                  <i class="el-icon-close" @click.stop="removeBtn(index)" />
-                </div>
-              </grid-item>
-            </grid-layout>
+                </grid-item>
+              </grid-layout>
+            </div>
+          </div>
+          <div class="box-set">
+            <el-tabs v-if="isShowSeting" v-model="activeName" type="border-card">
+              <el-tab-pane v-if="pageArray[currentCpn]&&pageArray[currentCpn].type === 'button'" label="组件基础配置" name="first">
+                <f-form
+                  ref="btnForm"
+                  :key="btnFromKey"
+                  :form="pageArray[currentCpn]"
+                  :config="btnDataConfig"
+                  :rules="btnRules"
+                  label-position="left"
+                  :column="1"
+                  @change="handleBtnFormChange"
+                />
+              </el-tab-pane>
+              <el-tab-pane label="组件样式配置" name="second">
+                <f-form
+                  ref="btnClassForm"
+                  :key="btnFromKey"
+                  :form="pageArray[currentCpn]"
+                  :config="btnClassConfig"
+                  label-position="left"
+                  :column="1"
+                  @blur="handleBlur"
+                />
+              </el-tab-pane>
+            </el-tabs>
           </div>
         </div>
-        <div class="box-set">
-          <el-tabs v-if="isShowSeting" v-model="activeName" type="card">
-            <el-tab-pane label="组件基础配置" name="first">
-              <f-form
-                ref="btnForm"
-                :key="btnFromKey"
-                :form="pageArray[currentCpn]"
-                :config="btnDataConfig"
-                :rules="btnRules"
-                label-position="left"
-                :column="1"
-              />
-            </el-tab-pane>
-            <el-tab-pane label="组件样式配置" name="second">
-              <f-form
-                ref="btnClassForm"
-                :key="btnFromKey"
-                :form="pageArray[currentCpn]"
-                :config="btnClassConfig"
-                label-position="left"
-                :column="1"
-                @blur="handleBlur"
-              />
-            </el-tab-pane>
-          </el-tabs>
-        </div>
-      </div>
+      </el-card>
     </template>
   </f-dialog>
 </template>
@@ -164,26 +173,32 @@ export default {
 
       // 按钮配置相关
       btnFromShow: false,
-      btnData: {},
-      btnDataConfig: btnFormConfig(),
+      btnData: {
+        typeNum: ''
+      },
       btnRules: {
-        typeNum:[{required: true, message: '请选择按钮类型'}],
-        defValue:[{required: true, message: '请输入默认值'}],
-        bandValue:[{required: true, message: '请输入波段值，默认38000'}],
-        bootCode:[{required: true, message: '请输入引导码'}],
-        bootCodeSend:[{required: true, message: '请输入引导码发送次数'}],
-        dateCode:[{required: true, message: '请输入数据码'}],
-        overCode:[{required: true, message: '请输入结束码'}],
+        typeNum: [{required: true, message: '请选择按钮类型'}],
+        defValue: [{required: true, message: '请输入默认值'}],
+        bandValue: [{required: true, message: '请输入波段值，默认38000'}],
+        bootCode: [{required: true, message: '请输入引导码'}],
+        bootCodeSend: [{required: true, message: '请输入引导码发送次数'}],
+        dateCode: [{required: true, message: '请输入数据码'}]
+        // overCode:[{required: true, message: '请输入结束码'}],
       },
       btnFromKey: 0,
-      currentCpn: '', //已选择的组件下标
-      isShowSeting:false,
-      baseUrl:process.env.VUE_APP_FILE_STATIC,
-    };
+      currentCpn: '', // 已选择的组件下标
+      isShowSeting: false,
+      baseUrl: process.env.VUE_APP_FILE_STATIC,
+      baseItem: {}, // 选择的基础库信息
+    }
   },
   computed: {
+    btnDataConfig() {
+      const {typeNum} = this.btnData
+      return btnFormConfig(typeNum)
+    },
     pageArrayCount() {
-      return this.pageArray.length;
+      return this.pageArray.length
     },
     btnClassConfig() {
       let config = [
@@ -283,9 +298,46 @@ export default {
     }
   },
   methods: {
+    // 遥控器基础配置change事件
+    handleRuleFormChange(item, form) {
+      const { prop } = item
+      if (prop === 'baseId') {
+        const { allBase } = this
+        const baseItem = allBase.filter(item => item.value === form.baseId)[0]
+        this.baseItem = baseItem
+        // let pageArray = this.pageArray
+        // const {bandValue, bootCode, bootCodeSend, dateCode, overCode} = baseItem
+        // pageArray = pageArray.map(item => {
+        //   if (item.type === 'button') {
+        //     item.bandValue = bandValue
+        //     item.bootCode = bootCode
+        //     item.bootCodeSend = bootCodeSend
+        //     item.dateCode = dateCode
+        //     item.overCode = overCode
+        //   }
+        //   return item
+        // })
+        // this.pageArray = pageArray
+        // this.isShowSeting = false
+        // this.$nextTick(() => {
+        //   if (this.currentCpn !== '') {
+        //     this.isShowSeting = true
+        //   }
+        //   this.btnFromKey++
+        // })
+      }
+    },
+    // 组件基础配置change事件
+    handleBtnFormChange(item, form) {
+      const { prop } = item
+      this.btnData[prop] = form[prop]
+      if (form.typeNum !== '0') {
+        form.addSubMax = ''
+        form.addSubMin = ''
+      }
+    },
     // focus事件
     handleBlur(item,form) {
-      console.log(form)
       const { prop } = item
       if (['h', 'w'].includes(prop)) {
         form[prop] = Number(form[prop])
@@ -303,15 +355,22 @@ export default {
     // 初始化表单数据
     initFormData(fromData) {
       this.fromData = {
-        content:'',
+        content: '',
         ...fromData
       }
-      this.fromKey++;
+      this.fromKey++
     },
     // 初始化按钮表单数据
     initBtnFormData(index) {
       this.isShowSeting = false
       this.currentCpn = index
+      this.btnData = {
+        typeNum: ''
+      }
+      this.activeName = 'second'
+      if (this.pageArray[index].type === 'button') {
+        this.activeName = 'first'
+      }
       this.$nextTick(() => {
         this.isShowSeting = true
         this.btnFromKey++
@@ -342,15 +401,16 @@ export default {
     },
     // 关闭之前回调.
     async handleBeforeClose(type) {
-      if (type !='ok') {
+      if (type !== 'ok') {
         return true
-      };
+      }
       const validate = await this.$refs.ruleForm.validate();
+      if (!validate) return false
 
-      console.log(this.pageArray.map(async (item, index) => await this.$refs['btnForm'+index].validate()))
-
-      if (!validate) return false;
-
+      // 数据验证
+      if (!this.validateList()) {
+        return false
+      }
 
       const params = {
         ...this.fromData,
@@ -368,18 +428,40 @@ export default {
       this.initFormData({})
       return true
     },
+    // 数据验证
+    validateList() {
+      let pageArray = this.pageArray
+      for (let i = 0; i < pageArray.length - 1; i++) {
+        let item = pageArray[i]
+        // const { typeNum, defValue, bandValue, bootCode  }
+      }
+    },
     // 添加
     addCpns(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);
+      if (!this.baseItem.id) {
+        this.$message.error('请先选择基础库')
+        return
+      }
+      const newItem = { w: 2, h: 2, x: 1, y: this.pageArray.map(item => item?.y).sort()[this.pageArray.length-1] || 1, i: this.pageArrayCount, ...item }
+      if (this.baseItem.id !== undefined) {
+        const { bandValue, bootCode, bootCodeSend, dateCode, overCode } = this.baseItem
+        if (item.type === 'button') {
+          newItem.bandValue = bandValue
+          newItem.bootCode = bootCode
+          newItem.bootCodeSend = bootCodeSend
+          newItem.dateCode = dateCode
+          newItem.overCode = overCode
+        }
+      }
+      this.pageArray.push(newItem)
+      this.initBtnFormData(this.pageArray.length - 1)
     },
     removeBtn(index) {
       const tmpList = this.pageArray.concat();
       tmpList.splice(index, 1)
       this.isShowSeting = false
-      this.currentCpn = '';
+      this.currentCpn = ''
       this.pageArray = tmpList
-
     },
     showSeting(index) {
       this.activeName = 'second'
@@ -399,8 +481,11 @@ export default {
 <style scoped lang="scss">
 h3 {
   font-weight: 700;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #ccc;
+  border-left: 4px solid #1890ff;
+  color: #000;
+  padding-left: 5px;
+  line-height: 25px;
+  margin-bottom: 12px;
 }
 .box {
   box-sizing: border-box;
@@ -410,13 +495,16 @@ h3 {
   width: 100%;
   height: 100%;
   &-btns, &-canvs {
-    width: 375px;
     height: 770px;
+  }
+  &-canvs{
+    width: 375px;
     border: 1px solid #000;
   }
   &-btns {
     display: flex;
     flex-direction: column;
+    width: 200px;
     >h4, >h3 {
       text-align: center;
     }
@@ -434,6 +522,9 @@ h3 {
         height: 80px;
         background: #f5f5f5;
         margin-bottom: 15px;
+        border: 1px solid #cdcdcd;
+        border-radius: 4px;
+        cursor: pointer;
         span {
           font-size: 28px;
         }
@@ -482,7 +573,7 @@ h3 {
     background: url(../../../../assets/images/mobile-bg.jpg) no-repeat;
     background-size: 100%;
     border: none;
-    margin: 0 20px;
+    margin: 0 40px;
     &-main {
       position: absolute;
       top: 90px;
@@ -505,8 +596,14 @@ h3 {
         width: 100%;
         i{
           position: absolute;
-          right: 0px;
-          top: 0px;
+          right: -4px;
+          top: -4px;
+          color: #fff;
+          font-size: 14px;
+          background: #5c5c5c;
+          border-radius: 50%;
+          padding: 3px;
+          cursor: pointer;
         }
       }
     }

ruoyi-ui/src/views/template/addTemplate/index.vue

@@ -118,7 +118,7 @@ export default {
   async created() {
     const res = await addBaseApi.getAllList();
     if(res.code!= 200 ) return { current:1, records:[], total:0 }
-    this.allBase = res.data.map(item => ({ name: item.name, value: item.id.toString() }))
+    this.allBase = res.data.map(item => ({ ...item,name: item.name, value: item.id.toString() }))
     this.tableConfig = [
       { 'name': "模版名称" },
       { "status": "状态", formatter: row => this.selectDictLabel(useStatus, row.status)},