feat:[模板管理][yp003]

src/components/Template/CustomTable.vue

@@ -110,17 +110,18 @@
 									</div>
 								</template>
 								<template v-else-if="col.bodyType === 'checkboxTag'">
-									<div class="flex flex-wrap"
-										:class="{ 'row-error-border': hasError(rowIndex, colIndex, col.prop) }">
-										<HandleFormItem v-for="(tag, tagIndex) in row[col.prop]" :key="tagIndex"
-											:fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex + '_' + tagIndex"
-											:fieldItemLabel="fieldItemLabel" type="checkboxTag" :value="tag"
-											:item="getBodyItem(col, rowIndex)"
-											@change="onCheckboxTagChange(rowIndex, colIndex,col, tagIndex, $event)"
-											@deleteTag="onDeleteCheckboxTag(rowIndex, col, tagIndex)" />
-									</div>
-
-								</template>
+								<div class="flex flex-wrap" :class="{ 'row-error-border': hasError(rowIndex, colIndex, col.prop) }">
+									<HandleFormItem
+										:fieldKey="prefixKey + '_' + col.prop + '_' + rowIndex"
+										:fieldItemLabel="fieldItemLabel" type="checkboxTag" 
+										:value="row[col.prop]"
+										:item="getBodyItem(col, rowIndex)"
+										@change="onCheckboxTagChange(rowIndex, colIndex, col, $event)"
+										@deleteTag="onDeleteCheckboxTag(rowIndex, col, $event)"
+										:error="hasError(rowIndex, colIndex, col.prop)"
+										@update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)" />
+								</div>
+							</template>
 
 							</div>
 							<div v-show="isShowOther(row[col.prop], col)" class="flex flex1">
@@ -324,11 +325,21 @@ export default {
 			this.$emit("onDeleteTag", rowIndex, col, tagIndex);
 			this.justUpdateFilledFormData();
 		},
-		onCheckboxTagChange(rowIndex, colIndex, col, tagIndex, value) {
+		onCheckboxTagChange(rowIndex, colIndex, col, value) {
 			console.log(value,"vvv")
-			this.localDataSource[rowIndex][col.prop][tagIndex] = value;
-			this.onErrorUpdate(rowIndex, colIndex, col.prop, value?false:true);
-			this.$emit("onCheckboxTagChange", rowIndex, col, this.localDataSource[rowIndex][col.prop])
+			// value 现在是整个数组
+			this.localDataSource[rowIndex][col.prop] = value;
+			// 根据校验规则判断是否清除错误状态
+			let isValid = false;
+			if (this.templateFillType === "actFill") {
+				// actFill时，检查是否有checked为true的项
+				isValid = value && value.some(tag => tag.checked === true);
+			} else if (this.templateFillType === "preFill") {
+				// preFill时，检查所有tagValue是否不为空
+				isValid = value && value.every(tag => tag.tagValue && tag.tagValue.trim() !== '');
+			}
+			this.onErrorUpdate(rowIndex, colIndex, col.prop, !isValid);
+			this.$emit("onCheckboxTagChange", rowIndex, col, value)
 		},
 		handleClickButton(e, data, key, rowIndex, colIndex) {
 			this.$emit("clickButton", key, rowIndex, colIndex, e, data,)
@@ -766,6 +777,7 @@ export default {
 			this.localDataSource[rowIndex] = { ...this.localDataSource[rowIndex], ...data };
 			this.localDataSource = [...this.localDataSource];
 			this.checkCompareToOnDataLoad();
+			this.justUpdateFilledFormData();
 		},
 		// 比较newData和oldData的值是否相等，只要有一对不相等就返回false
 		compareOldAndCurrentFormFields(newData, oldData) {

src/components/Template/HandleFormItem.vue

@@ -87,24 +87,25 @@
                     <div slot="tip" class="el-upload__tip">支持扩展名：.rar .zip .doc .docx .pdf .jpg，文件大小不超过2MB</div>
                 </el-upload>
             </template>
-            <div v-else-if="type === 'checkboxTag'" class="flex1 checkbox-tag-container"
-                :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')">
-                <div class="checkbox-tag-item">
-                    <el-checkbox v-model="checkboxTagChecked" :disabled="getDisabled()"
-                        @change="onCheckboxTagChange"></el-checkbox>
-                    <div class="tag-content blue-border">
-                        <el-input v-if="templateFillType === 'preFill'" v-model="tagValue" ref="tagInput"
-                            :maxlength="item.maxlength || 20" @blur="onTagBlur" @keyup.enter.native="onTagBlur"
-                            placeholder="请输入" size="mini" class="tag-input" />
-                        <el-tag v-else :type="'info'" class="tag-display" :closable="false">
-                            {{ tagValue }}
-                        </el-tag>
-                        <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info"
-                            icon-color="red" title="确认删除当前编号？" @confirm="onDeleteTag">
-                            <i slot="reference" v-if="templateFillType === 'preFill'"
-                                class="el-icon-close delete-icon"></i>
-                        </el-popconfirm>
-
+            <div v-else-if="type === 'checkboxTag'" class="flex1 checkbox-tag-wrapper" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')">
+                <div v-for="(tag, tagIndex) in checkboxTagList" :key="tagIndex" class="checkbox-tag-container">
+                    <div class="checkbox-tag-item">
+                        <el-checkbox v-model="tag.checked" :disabled="getDisabled()"
+                            @change="onCheckboxTagChange(tagIndex, $event)"></el-checkbox>
+                        <div class="tag-content blue-border">
+                            <el-input v-if="templateFillType === 'preFill'" v-model="tag.tagValue"
+                                :ref="'tagInput_' + tagIndex" :maxlength="item.maxlength || 20"
+                                @blur="onTagBlur(tagIndex)" @keyup.enter.native="onTagBlur(tagIndex)"
+                                placeholder="请输入" size="mini" class="tag-input" />
+                            <el-tag v-else :type="'info'" class="tag-display" :closable="false">
+                                {{ tag.tagValue }}
+                            </el-tag>
+                            <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info"
+                                icon-color="red" title="确认删除当前编号？" @confirm="onDeleteTag(tagIndex)">
+                                <i slot="reference" v-if="templateFillType === 'preFill'"
+                                    class="el-icon-close delete-icon"></i>
+                            </el-popconfirm>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -237,7 +238,7 @@ export default {
     },
     data() {
         let initialValue = this.value;
-        let initialOtherValues = {}, checkboxTagChecked = false, tagValue = '';
+        let initialOtherValues = {}, checkboxTagList = [];
 
         // 如果是checkboxList类型且value是对象格式
         if (this.type === 'checkboxList' && this.value && typeof this.value === 'object') {
@@ -245,10 +246,13 @@ export default {
             initialOtherValues = this.value.otherValues || {};
         } else if (this.type === 'checkboxList' && !Array.isArray(this.value)) {
             initialValue = [];
-        } else if (this.type === 'checkboxTag' && this.value && typeof this.value === 'object') {
-            checkboxTagChecked = this.value.checked;
-            tagValue = this.value.tagValue || '';
-        }
+        } else if (this.type === 'checkboxTag' && Array.isArray(this.value)) {
+            // checkboxTag类型，value是数组格式
+            checkboxTagList = this.value.map(tag => ({
+                checked: tag.checked,
+                tagValue: tag.tagValue || ''
+            }));
+        } 
         return {
             inputValue: initialValue,
             oldValue: initialValue, // 记录上一次的值
@@ -263,9 +267,8 @@ export default {
             replyContent: '', // 回复内容
             visible: false,//是否显示弹窗
             checkboxValue: this.getChecked(),//是否选中
-            checkboxTagChecked: checkboxTagChecked, // checkboxTag类型的checkbox选中状态
-            oldCheckboxTagChecked: checkboxTagChecked, // checkboxTag类型的checkbox选中状态
-            tagValue: tagValue, // checkboxTag类型的tag值
+            checkboxTagList: checkboxTagList, // checkboxTag类型的列表数据
+            oldCheckboxTagList: JSON.parse(JSON.stringify(checkboxTagList)), // 记录上一次的checkboxTagList
             uuid: getuuid(), // 唯一标识符，用于EventBus事件匹配
             regentType: ['sj', 'gsp', 'mix', 'xj', 'xb', 'gyzj', 'mjy', 'yq', 'jcb', 'qxbd'],  //试剂/仪器/供试品等类型
             selectRegentInfo: {},//选择的试剂/仪器/供试品等信息
@@ -276,6 +279,7 @@ export default {
             },
             pendingUploadFile: null, // 用于存储待上传的文件
             pendingRemoveFile: null, // 用于存储待删除的文件
+            currentTagIndex:-1,//当前选中的checkboxTag索引
         }
     },
     watch: {
@@ -284,10 +288,13 @@ export default {
             if (this.type === 'checkboxList' && newVal && typeof newVal === 'object') {
                 this.inputValue = newVal.checkboxValues || [];
                 this.otherValues = newVal.otherValues || {};
-            } else if (this.type === 'checkboxTag' && newVal && typeof newVal === 'object') {
-                this.checkboxTagChecked = newVal.checked || false;
-                this.tagValue = newVal.tagValue || '';
-            } else {
+            } else if (this.type === 'checkboxTag' && Array.isArray(newVal)) {
+                // checkboxTag类型，value是数组格式
+                this.checkboxTagList = newVal.map(tag => ({
+                    checked: tag.checked,
+                    tagValue: tag.tagValue || ''
+                }));
+            }  else {
                 this.inputValue = this.type === 'checkboxList' && !Array.isArray(newVal) ? [] : newVal;
             }
         }
@@ -808,30 +815,33 @@ export default {
             this.onInputChange();
         },
         // checkboxTag的checkbox变化处理
-        onCheckboxTagChange(e) {
-            this.checkboxTagChecked = e;
+        onCheckboxTagChange(tagIndex, e) {
+            this.currentTagIndex = tagIndex;
+            this.checkboxTagList[tagIndex].checked = e;
             this.emitCheckboxTagValue();
             this.onCommonHandleSaveRecord();
         },
 
         // tag输入框失去焦点
-        onTagBlur(e) {
-            const value = e.target.value;
-            this.tagValue = value;
+        onTagBlur(tagIndex) {
+            this.currentTagIndex = tagIndex;
+            const value = this.checkboxTagList[tagIndex].tagValue;
             this.emitCheckboxTagValue();
-            this.onCommonHandleSaveRecord(this.tagValue);
+            this.onCommonHandleSaveRecord(value);
         },
         // 删除tag
-        onDeleteTag() {
-            this.$emit("deleteTag");
+        onDeleteTag(tagIndex) {
+            this.currentTagIndex = tagIndex;
+            // 从列表中删除指定索引的tag
+            this.checkboxTagList.splice(tagIndex, 1);
+            this.emitCheckboxTagValue();
+            this.$emit("deleteTag", tagIndex);
         },
         // 发送checkboxTag的值
         emitCheckboxTagValue() {
-            const value = {
-                checked: this.checkboxTagChecked,
-                tagValue: this.tagValue
-            };
-            this.inputValue = value;
+            // 发送整个数组
+            this.$emit('input', [...this.checkboxTagList]);
+            this.$emit('change', [...this.checkboxTagList]);
         },
         // 统一处理失去焦点事件
         onBlur(e) {
@@ -916,8 +926,12 @@ export default {
                 isSame = this.isEqual(this.oldOtherValues, this.otherValues);
                 isOldValueEmpty = this.isValueEmpty(this.oldOtherValues);
             } else if (this.type === "checkboxTag") {
-                isSame = this.isEqual(this.oldCheckboxTagChecked, this.checkboxTagChecked);
-                 isOldValueEmpty = this.isValueEmpty(this.oldCheckboxTagChecked);
+                // checkboxTag类型，只比较当前tagIndex的数据
+                const currentTag = this.checkboxTagList[this.currentTagIndex];
+                const oldTag = this.oldCheckboxTagList[this.currentTagIndex] || {};
+                isSame = this.isEqual(oldTag.checked, currentTag.checked);
+                isOldValueEmpty = this.isValueEmpty(oldTag.checked);
+             
             }else{
                 isSame = this.isEqual(this.oldValue, this.inputValue)
                 isOldValueEmpty = this.isValueEmpty(this.oldValue);
@@ -942,11 +956,17 @@ export default {
                     checkboxValues: oldValue.checkboxValues || oldValue,
                     otherValues: this.oldOtherValues
                 };
-            }else if(this.type === "checkboxTag"){
-                oldValue = {
-                    checked: this.oldCheckboxTagChecked,
-                    tagValue: this.tagValue,
-                };
+            } else if (this.type === "checkboxTag") {
+                // checkboxTag类型，只回退当前tagIndex的数据
+                if (this.currentTagIndex >= 0 && this.currentTagIndex < this.oldCheckboxTagList.length) {
+                    const oldTag = this.oldCheckboxTagList[this.currentTagIndex];
+                    this.checkboxTagList[this.currentTagIndex] = { ...oldTag };
+                    oldValue = [...this.checkboxTagList];
+                } else {
+                    // 如果没有指定tagIndex，回退整个数组
+                    this.checkboxTagList = JSON.parse(JSON.stringify(this.oldCheckboxTagList));
+                    oldValue = [...this.checkboxTagList];
+                }
             }
             this.inputValue = this.oldValue;
             this.$emit('input', oldValue); // 触发 v-model 更新
@@ -967,11 +987,15 @@ export default {
                 this.oldValue = recordData.oldValue;
                 this.inputValue = recordData.inputValue;
             }
-            let recordOldVlaue = this.oldValue,recordValue = this.inputValue,isModify = !!this.oldValue;
-            if(this.type === "checkboxTag"){
-                recordOldVlaue =this.oldValue? `${this.oldValue.tagValue}:${this.oldValue.checked?'勾选':'未勾选'}`:'';
-                recordValue = `${this.inputValue?.tagValue}:${this.inputValue?.checked?'勾选':'未勾选'}`;
-                isModify = this.oldValue.checked !== undefined;
+            let recordOldVlaue = this.oldValue, recordValue = this.inputValue, isModify = !!this.oldValue;
+            if (this.type === "checkboxTag") {
+                // checkboxTag类型，只记录当前tagIndex的数据变化
+                const oldTag = this.oldCheckboxTagList[this.currentTagIndex] || {};
+                const currentTag = this.checkboxTagList[this.currentTagIndex] || {};
+                recordOldVlaue = `${oldTag.tagValue || ''}:${oldTag.checked ? '勾选' : '未勾选'}`;
+                recordValue = `${currentTag.tagValue || ''}:${currentTag.checked ? '勾选' : '未勾选'}`;
+                isModify = oldTag.checked !== undefined 
+              
             }
             const record = {
                 ...baseInfo,
@@ -994,8 +1018,14 @@ export default {
             if (this.type === 'checkboxList') {
                 this.oldValue = [...this.inputValue];
                 this.oldOtherValues = { ...this.otherValues };
-            }else if(this.type === "checkboxTag"){
-                this.oldCheckboxTagChecked = this.checkboxTagChecked;
+            } else if (this.type === "checkboxTag") {
+                // checkboxTag类型，只更新当前tagIndex的数据
+                if (this.currentTagIndex >= 0 && this.currentTagIndex < this.checkboxTagList.length) {
+                    this.oldCheckboxTagList[this.currentTagIndex] = { ...this.checkboxTagList[this.currentTagIndex] };
+                } else {
+                    // 如果没有指定tagIndex，更新整个数组
+                    this.oldCheckboxTagList = JSON.parse(JSON.stringify(this.checkboxTagList));
+                }
             }
             let value = this.inputValue;
             if (this.type === 'checkboxList') {
@@ -1003,11 +1033,8 @@ export default {
                     checkboxValues: this.inputValue,
                     otherValues: this.otherValues
                 };
-            }else if(this.type === "checkboxTag"){
-                value = {
-                    checked: this.checkboxTagChecked,
-                    tagValue: this.tagValue,
-                };
+            } else if (this.type === "checkboxTag") {
+                value = [...this.checkboxTagList];
             }
             if (this.type === "button") {
                 this.$emit('clickButton', this.item, this.inputValue, data);
@@ -1662,16 +1689,15 @@ export default {
 }
 
 // checkboxTag样式
+.checkbox-tag-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 8px;
+}
+
 .checkbox-tag-container {
     border-radius: 4px;
-    // transition: all 0.3s;
-    // margin-bottom: 10px;
-    // margin-right: 10px;
-
-    &.error-border {
-        border-color: #ff5d5d !important;
-        box-shadow: 0 0 6px #ffc3c3 !important;
-    }
 
     .checkbox-tag-item {
         display: flex;
@@ -1701,12 +1727,8 @@ export default {
             position: absolute;
             top: 6px;
             right: 5px;
-            // transition: all 0.3s;
-
-            // &:hover {
             color: red;
             background-color: #f5f5f5;
-            // }
         }
     }
 }