|
|
|
@ -34,11 +34,41 @@ |
|
|
|
<!-- qc才能操作 --> |
|
|
|
<div class="handle-row" v-if="isShowHandle()"> |
|
|
|
<el-checkbox class="ml-5"></el-checkbox> |
|
|
|
<Question class="handle-icon" :class="getQuestionColor()" /> |
|
|
|
<div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave"> |
|
|
|
<Question class="handle-icon" :class="getQuestionColor()" /> |
|
|
|
</div> |
|
|
|
<img v-if="getIsShowCopyIcon()" @click="onCopy" src="@/assets/images/copy-icon.svg" class="handle-icon" |
|
|
|
alt="" /> |
|
|
|
<img src="@/assets/images/record-icon.svg" class="handle-icon" alt="" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 修改记录模态框 --> |
|
|
|
<div |
|
|
|
v-if="showModal" |
|
|
|
ref="modalRef" |
|
|
|
class="modification-modal" |
|
|
|
@mouseenter="onModalEnter" |
|
|
|
@mouseleave="onModalLeave" |
|
|
|
> |
|
|
|
<div class="modal-content"> |
|
|
|
<h4>修改记录</h4> |
|
|
|
<div class="records-list"> |
|
|
|
<div |
|
|
|
v-for="(record, index) in modificationRecords" |
|
|
|
:key="index" |
|
|
|
class="record-item" |
|
|
|
> |
|
|
|
<p><strong>时间:</strong> {{ record.timestamp }}</p> |
|
|
|
<p><strong>旧值:</strong> {{ record.oldValue }}</p> |
|
|
|
<p><strong>新值:</strong> {{ record.newValue }}</p> |
|
|
|
<hr v-if="index < modificationRecords.length - 1"> |
|
|
|
</div> |
|
|
|
<div v-if="!modificationRecords || modificationRecords.length === 0" class="no-records"> |
|
|
|
暂无修改记录 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -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; |
|
|
|
|
luojie
2 days ago