fixed bug

report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue

@@ -1,60 +1,61 @@
 <template>
   <div>
-    <el-button type="primary"
+    <el-button type="primary" icon="el-icon-plus" plain @click="handleAddClick"
-               icon="el-icon-plus"
+      >新增</el-button
-               plain
+    >
-               @click="handleAddClick">新增</el-button>
+    <el-table :data="formData" style="width: 100%">
-    <el-table :data="formData"
+      <el-table-column prop="color" label="颜色" align="center">
-              style="width: 100%">
-      <el-table-column prop="color"
-                       label="颜色"
-                       align="center">
         <template slot-scope="scope">
-          <span class="color-box"
+          <span class="color-box" :style="{ background: scope.row.color }" />
-                :style="{ background: scope.row.color }" />
         </template>
       </el-table-column>
-      <el-table-column label="位置"
+      <el-table-column label="位置" align="center">
-                       align="center">
         <template slot-scope="scope">
-          <span class="editor"
+          <span
-                @click="handleEditorClick(scope.$index, scope.row)">
+            class="editor"
+            @click="handleEditorClick(scope.$index, scope.row)"
+          >
             <i class="el-icon-edit" /> 编辑
           </span>
         </template>
       </el-table-column>
-      <el-table-column label="操作"
+      <el-table-column label="操作" align="center">
-                       align="center">
         <template slot-scope="scope">
-          <span class="editor"
+          <span
-                @click="handleDeleteClick(scope.$index, scope.row)">
+            class="editor"
+            @click="handleDeleteClick(scope.$index, scope.row)"
+          >
             <i class="el-icon-delete" /> 删除
           </span>
         </template>
       </el-table-column>
     </el-table>
 
-    <el-dialog title="新增"
+    <el-dialog
-               :visible.sync="dialogVisible"
+      title="新增"
-               width="30%"
+      :visible.sync="dialogVisible"
-               :before-close="handleClose">
+      width="30%"
+      :before-close="handleClose"
+    >
       <el-form>
         <el-form-item label="颜色">
-          <el-input v-model="colorValue"
+          <el-input
-                    style="width: 200px"
+            v-model="colorValue"
-                    placeholder="请输入颜色">
+            style="width: 200px"
+            placeholder="请输入颜色"
+          >
             <template slot="append">
-              <el-color-picker v-model="colorValue"
+              <el-color-picker
-                               :predefine="predefineColors" />
+                v-model="colorValue"
+                :predefine="predefineColors"
+              />
             </template>
           </el-input>
         </el-form-item>
       </el-form>
-      <span slot="footer"
+      <span slot="footer" class="dialog-footer">
-            class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary"
+        <el-button type="primary" @click="handleSaveClick">确 定</el-button>
-                   @click="handleSaveClick">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -69,7 +70,7 @@ export default {
   props: {
     formData: Array
   },
-  data () {
+  data() {
     return {
       predefineColors: [
         "#ff4500",
@@ -86,21 +87,21 @@ export default {
       indexEditor: -1 // 编辑第几个数据
     };
   },
-  mounted () { },
+  mounted() {},
   methods: {
     // 弹出框关闭
-    handleClose () {
+    handleClose() {
       this.dialogVisible = false;
       this.colorValue = "";
     },
     // 新增
-    handleAddClick () {
+    handleAddClick() {
       this.colorValue = "";
       this.flag = true;
       this.dialogVisible = true;
     },
     // 确定
-    handleSaveClick () {
+    handleSaveClick() {
       if (this.flag) {
         // 新增
         const obj = {
@@ -114,17 +115,20 @@ export default {
         this.dialogVisible = false;
       }
       this.$emit("input", this.formData);
+      this.$emit("change", this.formData);
     },
     // 编辑
-    handleEditorClick (index, row) {
+    handleEditorClick(index, row) {
       this.flag = false;
       this.colorValue = row.color;
       this.dialogVisible = true;
       this.indexEditor = index;
     },
     // 删除
-    handleDeleteClick (index) {
+    handleDeleteClick(index) {
       this.formData.splice(index, 1);
+      this.$emit("input", this.formData);
+      this.$emit("change", this.formData);
     }
   }
 };

report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue

@@ -1,4 +1,3 @@
-/* eslint-disable vue/valid-v-for */
 <!--
  * @Author: lide1202@hotmail.com
  * @Date: 2021-4-6 11:04:24
@@ -242,6 +241,7 @@
                   v-if="itemChildList.type == 'customColor'"
                   :key="'b-' + idx"
                   v-model="formData[itemChildList.name]"
+                  @change="changed($event, itemChildList.name)"
                 />
               </template>
             </el-collapse-item>

report-ui/src/views/report/bigscreen/designer/widget/widget.vue

@@ -101,11 +101,9 @@ export default {
   },
   mounted() {},
   methods: {
-    //获取焦点
     handleFocus({ index, left, top, width, height }) {
       // console.log(index, left, top, width, height);
     },
-    //失去焦点
     handleBlur({ index, left, top, width, height }) {
       this.$emit("onActivated", { index, left, top, width, height });
       this.$refs.draggable.setActive(true);