冲突处理

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

@@ -0,0 +1,36 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @Description:
+-->
+<template>
+    <el-color-picker v-model="currentValue" show-alpha v-bind="$attrs"  @change="handleChange"></el-color-picker>
+</template>
+
+<script>
+import formMixins from '../../mixins/formMixins.js'
+export default {
+  name: 'FColor',
+  inheritAttrs: false,
+  mixins: [formMixins],
+  props: {
+    // 绑定的数据
+    value: {},
+  },
+  computed:{
+    currentValue: {
+      get() {
+        return this.value || []
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+  },
+  methods:{
+    handleChange(val) {
+      this.$emit('change', val)
+    }
+  }
+};
+</script>

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

@@ -80,38 +80,32 @@
                 :key="index"
                 @dblclick.native="showSeting(item, index)"
               >
-                <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>
+                <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>
@@ -149,16 +143,17 @@ export default {
   },
   data() {
     return {
+      // tab
+      activeName: 'first',
       cpnsList,
       // 数据对象
       fromData:{},
       fromDataConfig: [],
       // 表单验证
-      fromRules:{
-        name:[{required: true, message: '请输入模版名称'}],
-        status:[{required: true, message: '请选择状态'}],
-        baseId:[{required: true, message: '请选择基础库'}],
-        :[{required: true, message: '请选择基础库'}],
+      fromRules: {
+        name: [{required: true, message: '请输入模版名称'}],
+        status: [{required: true, message: '请选择状态'}],
+        baseId: [{required: true, message: '请选择基础库'}],
       },
       // 表单key
       fromKey:0,
@@ -184,30 +179,33 @@ export default {
   },
   methods: {
     // 显示弹窗
-    show(){
+    show() {
       this.fromDataConfig = formConfig.call(this)
       this.$refs.dialog.show();
     },
     // 初始化表单数据
-    initFormData(fromData){
+    initFormData(fromData) {
       this.fromData = {
-          content:'',
-          ...fromData
+        content:'',
+        ...fromData
       }
       this.fromKey++;
     },
     // 初始化按钮表单数据
-    initBtnFormData(fromData){
+    initBtnFormData(fromData) {
       this.btnData = {
-          content:'',
-          ...fromData
+        content: '',
+        ...fromData
       }
-      if (Object.keys(this.btnData).length == 0) return this.btnFromKey = 0
-      this.btnFromKey++;
+      if (Object.keys(this.btnData).length === 0) {
+        this.btnFromKey = 0
+        return
+      } 
+      this.btnFromKey++
     },
     // 详情
-    async handleInitData(){
-      const {dialogType,rowData} = this;
+    async handleInitData() {
+      const {dialogType,rowData} = this
       if(dialogType === 'add') {
         this.pageArray = []
         this.initFormData({})
@@ -215,7 +213,7 @@ export default {
       }
       // 调接口获取详情
       const res = await addTemplateApi.configDetail({ id: rowData.id });
-      if(res.code != 200) return this.initFormData({})
+      if (res.code !== 200) return this.initFormData({})
       const from = { ...res.data, baseId: res.data.baseId.toString() }
       this.pageArray = JSON.parse(res.data.components).map((item, index) => ({
         ...item,
@@ -229,36 +227,36 @@ export default {
       this.initFormData(from);
     },
     // 关闭之前回调.
-    async handleBeforeClose(type){
-      if(type !='ok') {
+    async handleBeforeClose(type) {
+      if (type !='ok') {
         this.btnFromShow = false
         return true
       };
       const validate = await this.$refs.ruleForm.validate();
 
-      if(!validate) return false;
+      if (!validate) return false;
       const params = {
-          ...this.fromData,
-          components: JSON.stringify(this.pageArray),
-          baseId: Number(this.fromData.baseId)
+        ...this.fromData,
+        components: JSON.stringify(this.pageArray),
+        baseId: Number(this.fromData.baseId)
       }
       //  调接口更新数据
       const res = await addTemplateApi.configAddOrEdit(params);
-      if(res.code !=200){
-          this.$modal.msgError(res.msg);
-          return false;
+      if (res.code !== 200) {
+        this.$modal.msgError(res.msg)
+        return false
       }
 
       this.$emit('updateList')
       this.initFormData({})
       this.btnFromShow = false
-      return true;
+      return true
     },
     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){
+    removeBtn(index) {
       this.pageArray.splice(index, 1)
     },
     showSeting(item, index) {
@@ -273,9 +271,9 @@ export default {
       this.btnFromShow = false
     }
   },
-  computed:{
+  computed: {
     pageArrayCount() {
-      return this.pageArray.length
+      return this.pageArray.length;
     },
     cpnArray() {
       return this.allButton.map((item, index) => ({ x: 0, y: index*2, w: 2, h: 2, i: index, text: item.name, ...item }))
@@ -390,7 +388,7 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    height: 667px;
+    min-height: 667px;
     overflow-y: scroll;
     &::-webkit-scrollbar {
       display: none;