-
-
- {{ tagValue }}
-
-
-
-
-
+
+
+
+
+
+
+
+ {{ tag.tagValue }}
+
+
+
+
+
@@ -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;
- // }
}
}
}