feat:[模板管理][checkbox]

src/components/Template/HandleFormItem.vue

@@ -34,10 +34,10 @@
         </div>
         <!-- qc才能操作 -->
         <div class="handle-row" v-if="isShowHandle()">
-            <el-checkbox class="ml-5" @change="onCheckboxChange"></el-checkbox>
-            <div v-if="getIsShowQuestionIcon()" @mouseenter="(e) => onMouseEnter('replyRecord', e)"
-                @mouseleave="onMouseLeave">
-                <Question class="handle-icon" :class="getQuestionColor()" />
+            <el-checkbox :checked = "getChecked()" v-if = "this.templateFillType === 'qc'" class="mr-5" @change="onCheckboxChange"></el-checkbox>
+            <div class="handle-icon" v-if="getIsShowQuestionIcon()" @click="onClickQuestion"
+                @mouseenter="(e) => onMouseEnter('replyRecord', e)" @mouseleave="onMouseLeave">
+                <Question  :class="getQuestionColor()" />
             </div>
             <img v-if="getIsShowCopyIcon()" @click="onCopy" src="@/assets/images/copy-icon.svg" class="handle-icon"
                 alt="" />
@@ -81,6 +81,14 @@
                 </div>
             </div>
         </div>
+        <el-dialog append-to-body :title="templateFillType=='actFill'?'回复意见':'复核意见'" :visible.sync="visible" width="30%" >
+            <el-input v-model="replyContent" type="textarea" show-word-limit
+                resize="none"  rows="8" placeholder="输入内容" maxlength = "500" />
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="visible = false">取 消</el-button>
+                <el-button type="primary" @click="onReplyConfirm">确 定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 
@@ -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;
+}
 </style>

src/components/Template/icons/Question.vue

@@ -30,5 +30,7 @@ export default {
 <style lang="scss" scoped>
     .icon{
         display: block;
+        height: 18px;
+        width: 18px;
     }
 </style>

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};
+      },
 
     }
   },