From 042a21494758bef477ea758fd72f44ebd1aaf847 Mon Sep 17 00:00:00 2001 From: luojie <125330818@qq.com> Date: Tue, 13 Jan 2026 22:53:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:[=E6=A8=A1=E6=9D=BF=E7=AE=A1=E7=90=86][che?= =?UTF-8?q?ckbox]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Template/HandleFormItem.vue | 164 +++++++++++++++++---- src/components/Template/icons/Question.vue | 2 + .../business/comps/template/TemplateTable.vue | 14 +- 3 files changed, 151 insertions(+), 29 deletions(-) diff --git a/src/components/Template/HandleFormItem.vue b/src/components/Template/HandleFormItem.vue index e8ead69..d46a5e0 100644 --- a/src/components/Template/HandleFormItem.vue +++ b/src/components/Template/HandleFormItem.vue @@ -34,10 +34,10 @@
- -
- + +
+
@@ -81,6 +81,14 @@
+ + + + 取 消 + 确 定 + + @@ -89,8 +97,9 @@ import Question from "./icons/Question.vue"; import DecimalInput from "./DecimalInput.vue"; import { EventBus } from "@/utils/eventBus"; import moment from "moment"; +import {deepClone} from "@/utils/index"; export default { - inject: ['templateFillType', "zdxgjl", "fhyjjl", "updateZdxgjl", "updateFhyjjl"], + inject: ['templateFillType', "zdxgjl", "fhyjjl", "updateZdxgjl", "replaceFhyjjl", "updateFhyjjl","fieldCheckObj", "updateFieldCheckObj"], components: { Question, DecimalInput @@ -145,6 +154,9 @@ export default { isHoveringModal: false, // 是否悬停在模态框上 isHoveringMain: false, // 是否悬停在主元素上（这个实际上不需要，因为我们有事件处理） currentRecordType: '', // 当前悬停的记录类型（replyRecord 或 modifyRecord） + replyContent: '', // 回复内容 + visible:false,//是否显示弹窗 + checked:false,//是否选中 } }, watch: { @@ -161,6 +173,9 @@ export default { }, methods: { + getChecked(){ + return !!this.fieldCheckObj[this.fieldKey]?.checked; + }, getFillTypeStyle(type) { const { fillType } = this.item; const typeObj = { @@ -174,32 +189,74 @@ export default { } return typeObj[fillType] || "" }, + //确认回复 + onReplyConfirm(){ + if (!this.replyContent) { + this.$message({ + message: '请输入内容', + type: 'error' + }); + return; + } + const baseInfo = this.getCommonRecordInfo(); + const record = { + ...baseInfo, + title: this.templateFillType == 'actFill' ? "回复意见" : "复核意见", + } + if(this.templateFillType == 'actFill'){ + record.replay = this.replyContent; + const deepList = deepClone(this.fhyjjl);//实际填报应该是修改指定的字段 + const item = deepList.find(o => o.key == record.key); + if(item){ + item.replay = this.replyContent; + } + this.replaceFhyjjl(deepList);//实际填报应该是修改指定的字段 + }else{ + record.content = this.replyContent; + this.updateFhyjjl(record);//qc直接插入数据源 + } + + + const params = { + type: "reply", + newRecord: record, + list: deepClone(this.fhyjjl), + } + // 触发回复记录事件 + EventBus.$emit('onModifyRecord', params); + // 清空回复内容 + this.replyContent = ''; + // 隐藏弹窗 + this.visible = false; + + }, //获取question图标颜色 getQuestionColor() { const records = this.getReplyRecords(); if (records.length > 0) { const o = records[0]; - if(o.replay && o.content){//有回复意见和复核意见 - return "green" - }else if(o.content && !o.replay){//只有复核意见 + if (o.replay && o.content) {//有回复意见和复核意见 return "green" - }else{ + } else if (o.content && !o.replay) {//只有复核意见 + return "orange" + } else { return "gray" } - }else{//没有回复记录 + } else {//没有回复记录 return "gray" } - + }, // 复选框变化处理 onCheckboxChange(val) { - console.log(this.zdxgjl, "zdxgjl") // 触发修改记录事件 EventBus.$emit('onModifyRecord', { - timestamp: new Date().toLocaleString(), - oldValue: this.oldValue, - newValue: val, + type: "checkbox", + key: this.fieldKey, + checked: val, }); + console.log(val,"fff") + this.updateFieldCheckObj({[this.fieldKey]:{checked:val}}); // this.$emit('input', val); // this.$emit('change', val); }, @@ -227,7 +284,21 @@ export default { onBlur(e) { this.onCommonHandleSaveRecord(e.target.value); }, - + // 点击question图标 + onClickQuestion() { + if(this.templateFillType == 'actFill' || this.templateFillType){ + const field = this.fieldCheckObj[this.fieldKey]; + console.log(field,this.fieldCheckObj,"click") + if(field && field.checked){ + this.$message({ + message: '该字段已勾选复核框，请先取消勾选后再进行提交疑问', + type: 'error' + }); + return; + } + this.visible = true; + } + }, async onCommonHandleSaveRecord(val) { const isEmpty = this.isValueEmpty(this.inputValue); if (this.error && !isEmpty) { @@ -257,15 +328,16 @@ export default { value: this.inputValue, title: this.oldValue ? "修改记录" : "填写", } - this.updateZdxgjl(record); const params = { type: "modifyRecord", newRecord: record, password: passwordResult, - recordList: this.zdxgjl, + list: deepClone(this.zdxgjl), } - console.log(params, "params") this.$emit("onModifyRecord", params,) + this.updateZdxgjl(record); + + console.log(params, "params") } //用户输入密码并点击确定，保存修改 this.oldValue = this.inputValue; // 更新旧值 @@ -337,9 +409,8 @@ export default { }, //判断是否显示操作按钮 isShowHandle() { - const { fillType } = this.item; - //只有当模板状态是qc和实际填报时，才显示操作按钮 - return (this.templateFillType === "qc" || this.templateFillType === "actFill") && fillType === "actFill"; + //只有当模板状态不是预填时，才显示操作按钮 + return this.templateFillType !== "preFill" }, //判断是否禁用 getDisabled() { @@ -381,6 +452,7 @@ export default { if (this.templateFillType === "qc") {//qc可以直接查看 return true; } + return this.getReplyRecords().length > 0; }, //判断是否显示修改记录图标 @@ -417,9 +489,39 @@ export default { const elementRect = event.target.getBoundingClientRect(); const modalEl = this.$refs.modalRef; - // 设置模态框位置在元素右侧 - modalEl.style.left = elementRect.right + 5 + 'px'; // 5px间距 - modalEl.style.top = elementRect.top + 'px'; + // 获取模态框的宽度和高度 + const modalWidth = modalEl.offsetWidth || 250; // 默认宽度 + const modalHeight = modalEl.offsetHeight || 300; // 默认高度 + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + + // 计算模态框位置 + let leftPos, topPos; + + // 检查右侧空间是否足够 + if (elementRect.right + modalWidth + 5 <= viewportWidth) { + // 右侧空间充足，显示在右侧 + leftPos = elementRect.right + 5 + 'px'; + } else if (elementRect.left - modalWidth - 5 >= 0) { + // 左侧空间充足，显示在左侧 + leftPos = elementRect.left - modalWidth - 5 + 'px'; + } else { + // 两侧空间都不足，选择空间更大的一边 + if (elementRect.left > viewportWidth - elementRect.right) { + // 左侧空间更大，显示在左侧 + leftPos = Math.max(5, elementRect.left - modalWidth - 5) + 'px'; + } else { + // 右侧空间更大，显示在右侧（可能会超出屏幕，但尽量靠近边缘） + leftPos = Math.min(elementRect.right + 5, viewportWidth - 5) + 'px'; + } + } + + // 计算顶部位置，确保不超出屏幕上下边界 + topPos = Math.max(5, Math.min(elementRect.top, viewportHeight - modalHeight - 5)) + 'px'; + + // 设置模态框位置 + modalEl.style.left = leftPos; + modalEl.style.top = topPos; } }); }, @@ -479,11 +581,13 @@ export default { .handle-icon { width: 18px; height: 18px; - margin-left: 5px; + &:not(:last-child) { + margin-right: 5px; + } } -.ml-5 { - margin-left: 5px; +.mr-5{ + margin-right: 5px !important; } .orange { @@ -694,4 +798,8 @@ export default { border-color: #f56c6c !important; } } +.dialog-footer{ + display: flex; + justify-content: flex-end; +} \ No newline at end of file diff --git a/src/components/Template/icons/Question.vue b/src/components/Template/icons/Question.vue index 5c68544..52ec036 100644 --- a/src/components/Template/icons/Question.vue +++ b/src/components/Template/icons/Question.vue @@ -30,5 +30,7 @@ export default { \ No newline at end of file diff --git a/src/views/business/comps/template/TemplateTable.vue b/src/views/business/comps/template/TemplateTable.vue index 1887d66..3bd4d34 100644 --- a/src/views/business/comps/template/TemplateTable.vue +++ b/src/views/business/comps/template/TemplateTable.vue @@ -79,8 +79,12 @@ export default { {key:"startSolutionCode_0",title:'修改记录',filed:'试验基本信息-其他信息',value:'ss',oldValue:'old1',reason:'修改原因1',userName:'签名人',time:'2026-01-01 14:22:22'}, ], fhyjjl: this.templateData?.fhyjjl || [ - {key:"versionNum",title:'复核意见',field:'试验基本信息-其他信息',content:'复核意见内容',replay:'意见回复内容',userName:'签名人',time:'2026-01-01 14:22:22',sfhf:'1'} + {key:"versionNum",title:'复核意见',field:'试验基本信息-其他信息',content:'复核意见内容',replay:'',userName:'签名人',time:'2026-01-01 14:22:22',sfhf:'1'} ], + fieldCheckObj:{ + versionNum:{checked:true}, + act:{checked:true}, + }, //更新提交记录 updateZdxgjl(data){ this.zdxgjl.unshift(data); @@ -89,6 +93,14 @@ export default { updateFhyjjl(data){ this.fhyjjl.unshift(data); }, + //替换复核意见记录 + replaceFhyjjl(data){ + this.fhyjjl = data; + }, + //更新字段检查对象 + updateFieldCheckObj(data){ + this.fieldCheckObj = {...this.fieldCheckObj, ...data}; + }, } },