feat:[模板管理][blur事件记录输入的值]

src/components/Template/HandleFormItem.vue

@@ -84,7 +84,8 @@ export default {
     },
     data() {
         return {
-            inputValue: this.value
+            inputValue: this.value,
+            oldValue: this.value, // 记录上一次的值
         }
     },
     watch: {
@@ -198,7 +199,7 @@ export default {
         onCopy() {
             this.$emit("copy")
         },
-        onBlur(val) {
+        async onBlur(val) {
             // 根据输入值判断是否显示错误状态
             const isEmpty = this.isValueEmpty(this.inputValue);
             if (this.error && !isEmpty) {
@@ -206,8 +207,63 @@ export default {
             } else if (!this.error && isEmpty) {
                 this.$emit('update:error', true);
             }
-            this.$emit("blur", val)
+            
+            // 检查值是否发生变化
+            if (this.inputValue !== this.oldValue && this.fillType === "actFill") {
+            return;
+                // 值发生了变化，需要弹出密码输入框
+                try {
+                    const passwordResult = await this.$prompt('请输入密码以确认修改', '密码验证', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        inputType: 'password',
+                        inputPattern: /.+/,
+                        inputErrorMessage: '请输入密码'
+                    });
+                    
+                    // 用户输入密码并点击确定，保存修改
+                    this.oldValue = this.inputValue; // 更新旧值
+                    this.$emit("blur", val);
+                    
+                    // 调用后端接口记录修改记录
+                    await this.saveModificationRecord(passwordResult.value);
+                } catch {
+                    // 用户点击取消，还原数据
+                    this.inputValue = this.oldValue;
+                    this.$emit('input', this.oldValue); // 触发 v-model 更新
+                    this.$emit("blur", this.oldValue);
+                }
+            } else {
+                // 值没有变化，正常触发 blur 事件
+                this.$emit("blur", val)
+            }
         },
+        // 记录数据修改
+        async saveModificationRecord(password) {
+            // 这里可以调用后端API记录修改记录
+            // 示例：
+            // const recordData = {
+            //     field: this.item.label || '',  // 字段名
+            //     oldValue: this.oldValue,       // 旧值
+            //     newValue: this.inputValue,     // 新值
+            //     timestamp: Date.now(),         // 时间戳
+            //     password: password             // 用户输入的密码
+            // };
+            // try {
+            //     await api.recordModification(recordData);
+            // } catch (error) {
+            //     this.$message.error('记录修改失败');
+            //     console.error('记录修改失败:', error);
+            // }
+            
+            // 发送事件告知父组件值已修改
+            this.$emit('modification-recorded', {
+                field: this.item.label || '',
+                oldValue: this.oldValue,
+                newValue: this.inputValue,
+                password: password
+            });
+        }
     },
 }
 </script>

src/views/business/comps/template/TemplateTable.vue

@@ -15,6 +15,7 @@ import SWYPFXCBYPZB from "./comps/sp/SWYPFXCBYPZB.vue";
 import SWYPBQGZYZBB from "./comps/sp/SWYPBQGZYZBB.vue";
 import SWYPNBGZYZBB from "./comps/sp/SWYPNBGZYZBB.vue";
 import Demo from "./comps/sp/Demo.vue";
+import IndexDBDemo from "./comps/sp/IndexDBDemo.vue";
 //公用
 import SYWZPZJHB from "./comps/gy/SYWZPZJHB.vue";
 import MJYLQSQD from "./comps/gy/MJYLQSQD.vue";
@@ -23,7 +24,7 @@ export default {
   name: "TemplateTable",
   components: { 
     MJYLQSQD,SYWZPZJHB,
-    SP001,SWYPFXRYPZB ,Demo,SWYPFXCBYPZB,SWYPBQGZYZBB,SWYPNBGZYZBB,
+    SP001,SWYPFXRYPZB ,Demo,SWYPFXCBYPZB,SWYPBQGZYZBB,SWYPNBGZYZBB,IndexDBDemo
   },
   props: {
     sn: {
@@ -50,7 +51,7 @@ export default {
           'SP004': 'SWYPNBGZYZBB',
           'SYWZPZJHB': 'SYWZPZJHB',
           'MJYLQSQD': 'MJYLQSQD',
-          // 'SP001': 'Demo',
+          // 'SP001': 'IndexDBDemo',
         }
       }
       return this.componentMap || "Demo"

src/views/business/comps/template/comps/sp/IndexDBDemo.vue

@@ -0,0 +1,261 @@
+<template>
+  <div style="padding: 20px; max-width: 600px;">
+    <h2>用户信息表单（带修改记录）</h2>
+    <el-form ref="formRef" :model="form" label-width="120px">
+        <!-- 姓名 -->
+    <el-form-item label="姓名">
+      <el-tooltip
+        :content="currentTooltipContent"
+        placement="top"
+        effect="light"
+        :disabled="!isTooltipVisible"
+        raw-content
+        popper-class="audit-tooltip"
+      >
+        <el-input
+          v-model="form.basicInfo.name"
+          placeholder="请输入姓名"
+          @blur="onFieldChange('basicInfo.name', $event)"
+          @focus="loadTooltip('basicInfo.name')"
+          @mouseleave="hideTooltip"
+        />
+      </el-tooltip>
+    </el-form-item>
+
+    <!-- 邮箱 -->
+    <el-form-item label="邮箱">
+      <el-tooltip
+        :content="currentTooltipContent"
+        placement="top"
+        effect="light"
+        :disabled="!isTooltipVisible"
+        raw-content
+        popper-class="audit-tooltip"
+      >
+        <el-input
+          v-model="form.contact.email"
+          placeholder="请输入邮箱"
+          @blur="onFieldChange('contact.email', $event)"
+          @focus="loadTooltip('contact.email')"
+          @mouseleave="hideTooltip"
+        />
+      </el-tooltip>
+    </el-form-item>
+
+    <!-- 年龄 -->
+    <el-form-item label="年龄">
+      <el-tooltip
+        :content="currentTooltipContent"
+        placement="top"
+        effect="light"
+        :disabled="!isTooltipVisible"
+        raw-content
+        popper-class="audit-tooltip"
+      >
+        <el-input
+          v-model.number="form.basicInfo.age"
+          placeholder="请输入年龄"
+          type="number"
+          @blur="onFieldChange('basicInfo.age', $event)"
+          @focus="loadTooltip('basicInfo.age')"
+          @mouseleave="hideTooltip"
+        />
+      </el-tooltip>
+    </el-form-item>
+
+    <!-- 调试：显示所有日志（可选） -->
+    <el-button size="small" @click="showAllLogs">查看所有本地日志（控制台）</el-button>
+    </el-form>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AuditFormDemo',
+  data() {
+    return {
+      form: {
+        basicInfo: {
+          name: '',
+          age: null
+        },
+        contact: {
+          email: ''
+        }
+      },
+      commonContent: '',
+      // 缓存初始值，用于对比旧值
+      initialValues: {
+        'basicInfo.name': '',
+        'contact.email': '',
+        'basicInfo.age': null
+      },
+      // 本地缓存日志（提升 hover 性能，避免频繁读 DB）
+      cachedLogs: {},
+       cachedLogs: {},
+      currentTooltipContent: '', // 当前 tooltip 显示的内容（字符串！）
+      isTooltipVisible: false,   // 控制 tooltip 是否启用
+      db: null
+    };
+  },
+
+  async created() {
+    await this.initDB();
+    // 初始化表单值（可从 DB 恢复草稿，此处略）
+  },
+
+  methods: {
+    // ========== IndexedDB 操作 ==========
+    initDB() {
+      return new Promise((resolve, reject) => {
+        const request = indexedDB.open('AuditLogDB', 1);
+
+        request.onerror = () => reject(request.error);
+        request.onsuccess = () => {
+          this.db = request.result;
+          resolve();
+        };
+
+        request.onupgradeneeded = (event) => {
+          const db = event.target.result;
+          if (!db.objectStoreNames.contains('fieldLogs')) {
+            const store = db.createObjectStore('fieldLogs', { keyPath: 'fieldPath' });
+            store.createIndex('byField', 'fieldPath', { unique: false });
+          }
+        };
+      });
+    },
+
+    // 保存一条日志到 IndexedDB
+    async saveLog(fieldPath, oldValue, newValue) {
+      if (oldValue === newValue) return;
+
+      const logEntry = {
+        fieldPath,
+        logs: [
+          {
+            oldValue,
+            newValue,
+            timestamp: new Date().toISOString(),
+            operator: '当前用户' // 可替换为真实用户名
+          },
+          ...(this.cachedLogs[fieldPath] || [])
+        ].slice(0, 10) // 最多保留10条
+      };
+
+      const transaction = this.db.transaction(['fieldLogs'], 'readwrite');
+      const store = transaction.objectStore('fieldLogs');
+      store.put(logEntry);
+
+      // 更新缓存
+      this.$set(this.cachedLogs, fieldPath, logEntry.logs);
+    },
+
+    // 从 IndexedDB 读取某字段日志（优先用缓存）
+    async loadLogs(fieldPath) {
+      if (this.cachedLogs[fieldPath]) {
+        return this.cachedLogs[fieldPath];
+      }
+
+      return new Promise((resolve) => {
+        const transaction = this.db.transaction(['fieldLogs'], 'readonly');
+        const store = transaction.objectStore('fieldLogs');
+        const request = store.get(fieldPath);
+
+        request.onsuccess = () => {
+          const result = request.result?.logs || [];
+          this.$set(this.cachedLogs, fieldPath, result);
+          resolve(result);
+        };
+        request.onerror = () => {
+          console.error('读取日志失败:', request.error);
+          resolve([]);
+        };
+      });
+    },
+
+    // ========== 表单交互 ==========
+    onFieldChange(fieldPath, e) {
+        console.log(newValue,fieldPath)
+        const newValue = e.target.value
+      // 获取旧值：先看是否已修改过（cachedLogs 最新记录的 oldValue），否则用 initialValues
+      let oldValue;
+      if (this.cachedLogs[fieldPath]?.length > 0) {
+        oldValue = this.cachedLogs[fieldPath][0].oldValue;
+      } else {
+        oldValue = this.initialValues[fieldPath];
+      }
+
+      // 异步保存日志
+      this.saveLog(fieldPath, oldValue, newValue);
+    },
+
+    // ========== Tooltip 渲染 ==========
+    hasLogs(fieldPath) {
+      return (this.cachedLogs[fieldPath]?.length || 0) > 0;
+    },
+ async loadTooltip(fieldPath) {
+      this.isTooltipVisible = false; // 先禁用，避免闪烁
+      console.log("lofo")
+      const logs = await this.loadLogs(fieldPath);
+      if (logs.length === 0) {
+        this.currentTooltipContent = '<div class="empty">暂无修改记录</div>';
+      } else {
+        this.currentTooltipContent = logs
+          .map(
+            (log) =>
+              `<div class="log-item"><strong>${this.formatTime(
+                log.timestamp
+              )}</strong><br/>${log.operator} 将值从 "<code>${this.escapeHtml(
+                String(log.oldValue)
+              )}</code>" 改为 "<code>${this.escapeHtml(String(log.newValue))}</code>"</div>`
+          )
+          .join('');
+      }
+      this.isTooltipVisible = true; // 加载完成后再启用
+    },
+
+    hideTooltip() {
+      this.isTooltipVisible = false;
+    },
+
+    formatTime(isoString) {
+      return new Date(isoString).toLocaleString('zh-CN');
+    },
+
+    escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    },
+
+    // 调试用：打印所有日志
+    async showAllLogs() {
+      const transaction = this.db.transaction(['fieldLogs'], 'readonly');
+      const store = transaction.objectStore('fieldLogs');
+      const request = store.getAll();
+
+      request.onsuccess = () => {
+        console.log('所有字段修改记录:', request.result);
+      };
+    }
+  }
+};
+</script>
+
+<style scoped>
+.empty {
+  color: #999;
+  font-style: italic;
+}
+.log-item {
+  margin: 6px 0;
+  line-height: 1.4;
+}
+.log-item code {
+  background: #f5f5f5;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+</style>

src/views/business/comps/template/mixins/templateMixin.js

@@ -14,9 +14,11 @@ export default {
       handler(v) {
         if (v) {
           let n = { ...v };
+          this.formData =n;
           if (v.bdnr) {
             this.formData = { ...n, ...JSON.parse(v.bdnr) };
           }
+          
           this.setTemplateData(n);
         }
       }