update:报告模板编辑优化

src/components/common/report/reportEdit/img.vue

@@ -18,7 +18,12 @@
             <img :src="item.src" />
           </div>
           <div class="tip">
-            <el-input v-model="item.title" placeholder="请输入图例名称" clearable />
+            <el-input
+              v-model="item.title"
+              placeholder="请输入图例名称"
+              clearable
+              @input="inputFun"
+            />
           </div>
           <div class="del-btn" @click.stop="delFun(index)">
             <el-icon :size="22"><DeleteFilled /></el-icon>
@@ -50,6 +55,7 @@
 import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { Picture, DeleteFilled } from '@element-plus/icons-vue';
 import Dialog from '@/components/common/dialog/index.vue';
+import { cloneDeep } from 'lodash-es';
 
 const emit = defineEmits(['update:keyValue', 'update:value']);
 
@@ -83,11 +89,11 @@ watch(
 );
 
 watch(
-  () => fileList.value,
+  () => props.value,
   (val: any) => {
-    emit('update:value', val);
+    fileList.value = cloneDeep(val);
   },
-  { deep: true }
+  { deep: true, immediate: true }
 );
 
 onMounted(() => {
@@ -121,17 +127,10 @@ const delFun = (index: any) => {
     PasteContentRef.value.focus();
     fileList.value.splice(index, 1);
     contenteditable.value = false;
+    emit('update:value', fileList.value);
   });
 };
 
-watch(
-  () => fileList.value,
-  (val: any) => {
-    emit('update:value', val);
-  },
-  { deep: true }
-);
-
 const pasteFun = (event: any) => {
   if (props.disabled) {
     return;
@@ -151,6 +150,7 @@ const pasteFun = (event: any) => {
         fileList.value.push({
           src: base64,
         });
+        emit('update:value', fileList.value);
       };
       reader.readAsDataURL(file);
       break;
@@ -158,6 +158,10 @@ const pasteFun = (event: any) => {
   }
 };
 
+const inputFun = () => {
+  emit('update:value', fileList.value);
+};
+
 const closeFun = () => {
   diaShow.value = false;
 };

src/components/common/report/reportEdit/table.vue

@@ -8,7 +8,7 @@
         :label="item.title"
       >
         <template #default="scope">
-          <el-input v-model="scope.row[item.key]" clearable />
+          <el-input v-model="scope.row[item.key]" clearable @input="inputFun" />
         </template>
       </el-table-column>
       <el-table-column v-if="mode === 'input'" prop="actions" label="操作" width="60">
@@ -96,14 +96,6 @@ watch(
   { deep: true }
 );
 
-watch(
-  () => tableData.value,
-  (val: any) => {
-    emit('update:value', val);
-  },
-  { deep: true }
-);
-
 watch(
   () => props.head,
   (val: any) => {
@@ -112,6 +104,18 @@ watch(
   { deep: true, immediate: true }
 );
 
+watch(
+  () => props.value,
+  (val: any) => {
+    tableData.value = cloneDeep(val);
+  },
+  { deep: true, immediate: true }
+);
+
+const inputFun = () => {
+  emit('update:value', tableData.value);
+};
+
 const addFun = () => {
   headData.value.push({
     title: '',
@@ -121,10 +125,12 @@ const addFun = () => {
 
 const addDataFun = () => {
   tableData.value.push({});
+  emit('update:value', tableData.value);
 };
 
 const delDataFun = (index: any) => {
   tableData.value.splice(index, 1);
+  emit('update:value', tableData.value);
 };
 
 const delHeadFun = (index: any) => {