diff --git a/src/components/Template/HandleFormItem.vue b/src/components/Template/HandleFormItem.vue index 158001e..dd70793 100644 --- a/src/components/Template/HandleFormItem.vue +++ b/src/components/Template/HandleFormItem.vue @@ -34,11 +34,41 @@
- +
+ +
+ + +
+
+

修改记录

+
+
+

时间: {{ record.timestamp }}

+

旧值: {{ record.oldValue }}

+

新值: {{ record.newValue }}

+
+
+
+ 暂无修改记录 +
+
+
+
@@ -86,6 +116,24 @@ export default { return { inputValue: this.value, oldValue: this.value, // 记录上一次的值 + showModal: false, // 控制模态框显示 + modificationRecords: [ + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + {}, + ], // 存储修改记录 + modalTimer: null, // 用于延迟隐藏模态框 + isHoveringModal: false, // 是否悬停在模态框上 + isHoveringMain: false, // 是否悬停在主元素上（这个实际上不需要，因为我们有事件处理） } }, watch: { @@ -99,6 +147,13 @@ export default { }, methods: { + // 鼠标移入事件 + onHover() { + + }, + // 鼠标移出事件 + onLeave() { + }, getFillTypeStyle(type) { const {fillType} = this.item; const typeObj = { @@ -160,8 +215,9 @@ export default { isShowHandle() { const { fillType } = this.item; const { templateStatus } = this.$store.state.template; + return true; //只有当模板状态是qc和实际填报时，才显示操作按钮 - return (templateStatus === "qc" || templateStatus === "actFill") && fillType === "actFill"; + // return (templateStatus === "qc" || templateStatus === "actFill") && fillType === "actFill"; }, //判断是否禁用 getDisabled() { @@ -256,6 +312,20 @@ export default { // console.error('记录修改失败:', error); // } + // 添加修改记录到本地存储 + const record = { + oldValue: this.oldValue, + newValue: this.inputValue, + timestamp: new Date().toLocaleString(), // 格式化时间 + password: password ? '***' : '' // 不直接存储密码 + }; + + // 限制记录数量，只保留最近的20条记录 + if (this.modificationRecords.length >= 20) { + this.modificationRecords.shift(); // 移除最早的记录 + } + this.modificationRecords.push(record); + // 发送事件告知父组件值已修改 this.$emit('modification-recorded', { field: this.item.label || '', @@ -263,6 +333,48 @@ export default { newValue: this.inputValue, password: password }); + }, + + // 鼠标进入主容器 + onMouseEnter(event) { + clearTimeout(this.modalTimer); + this.showModal = true; + + // 计算模态框位置，显示在当前DOM右边 + this.$nextTick(() => { + if (this.$refs.modalRef) { + const elementRect = event.target.getBoundingClientRect(); + const modalEl = this.$refs.modalRef; + + // 设置模态框位置在元素右侧 + modalEl.style.left = elementRect.right + 5 + 'px'; // 5px间距 + modalEl.style.top = elementRect.top + 'px'; + } + }); + }, + + // 鼠标离开主容器 + onMouseLeave() { + // 延迟隐藏模态框，让用户有机会移动到模态框上 + this.modalTimer = setTimeout(() => { + if (!this.isHoveringModal) { + this.showModal = false; + } + }, 300); + }, + + // 鼠标进入模态框 + onModalEnter() { + this.isHoveringModal = true; + clearTimeout(this.modalTimer); + }, + + // 鼠标离开模态框 + onModalLeave() { + this.isHoveringModal = false; + this.modalTimer = setTimeout(() => { + this.showModal = false; + }, 300); } }, } @@ -418,6 +530,53 @@ export default { } } +.modification-modal { + position: fixed; + z-index: 9999; + background-color: rgba(0, 0, 0, 0.7); + border-radius: 4px; + padding: 10px; + color: white; + max-height: 300px; + min-width: 250px; + overflow: hidden; + pointer-events: auto; +} + +.modification-modal .modal-content { + max-height: 280px; + overflow-y: auto; + padding-right: 5px; +} + +.modification-modal .modal-content h4 { + margin: 0 0 10px 0; + font-size: 14px; + border-bottom: 1px solid #ccc; + padding-bottom: 5px; +} + +.modification-modal .records-list { + font-size: 12px; +} + +.modification-modal .record-item p { + margin: 5px 0; + word-break: break-all; +} + +.modification-modal .record-item hr { + border: 0; + border-top: 1px solid #555; + margin: 8px 0; +} + +.modification-modal .no-records { + text-align: center; + color: #aaa; + font-style: italic; +} + .clickable{ cursor: pointer; width: auto; diff --git a/src/components/Template/icons/Question.vue b/src/components/Template/icons/Question.vue index dba1ed1..4e26dc6 100644 --- a/src/components/Template/icons/Question.vue +++ b/src/components/Template/icons/Question.vue @@ -1,7 +1,6 @@ +