From e3bf06c323daff8b4420dc30554978427767c3ac Mon Sep 17 00:00:00 2001 From: luojie <125330818@qq.com> Date: Tue, 3 Mar 2026 22:09:08 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:[=E6=A8=A1=E6=9D=BF=E7=AE=A1=E7=90=86]?= =?UTF-8?q?[checkbox-tree]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Template/HandleFormItem.vue | 322 +++++++++++---------- src/components/Template/Step.vue | 2 +- src/components/Template/StepFormPackage.vue | 12 +- src/utils/index.js | 19 +- .../template/dialog/SelectMixReagentDialog.vue | 1 - 5 files changed, 200 insertions(+), 156 deletions(-) diff --git a/src/components/Template/HandleFormItem.vue b/src/components/Template/HandleFormItem.vue index d1ca91a..ca72044 100644 --- a/src/components/Template/HandleFormItem.vue +++ b/src/components/Template/HandleFormItem.vue @@ -42,8 +42,9 @@
+ :class="{ 'error-border': isOtherInputError(option.otherCode) }" + :placeholder="option.otherPlaceholder || '请输入'" + @blur="onCheckboxListOtherBlur($event, option.otherCode)" />
@@ -51,28 +52,23 @@
- {{ group.label }}
- {{ child.label }} -
- +
+
@@ -117,7 +113,8 @@
支持扩展名：.rar .zip .doc .docx .pdf .jpg，文件大小不超过2MB
-
+
+ @blur="onTagBlur(tagIndex)" @keyup.enter.native="onTagBlur(tagIndex)" placeholder="请输入" + size="mini" class="tag-input" /> {{ tag.tagValue }} @@ -140,13 +137,16 @@
- +
是
- +
是否在规定时间完成
- + @@ -227,7 +227,7 @@ import moment from "moment"; import { deepClone } from "@/utils/index"; import { getuuid } from "@/utils/index.js"; import { getToken } from "@/utils/auth" -import { isValueEmpty } from '@/utils/index.js'; +import { isValueEmpty, getDefaultValueByOptions } from '@/utils/index.js'; export default { inject: ['templateData', 'templateFillType', "getZdxgjl", "getFhyjjl", "updateZdxgjl", "replaceFhyjjl", "updateFhyjjl", "getFieldCheckObj", "updateFieldCheckObj"], @@ -286,14 +286,15 @@ export default { }, data() { let initialValue = this.value; + console.log(this.value, "check value"); let initialOtherValues = {}, checkboxTagList = []; - if(this.type === 'checkboxList' && !this.value) { + if (this.type === 'checkboxList' && !this.value) { initialValue = { checkboxValues: [], otherValues: {} }; - + } else if (this.type === 'checkboxTag' && Array.isArray(this.value)) { // checkboxTag类型，value是数组格式 checkboxTagList = this.value.map(tag => ({ @@ -301,11 +302,14 @@ export default { tagValue: tag.tagValue || '' })); } else if (this.type === 'fqyq' && !this.value) { - initialValue = {mainRadio: '', subRadio: '',inputValue:""}; + initialValue = { mainRadio: '', subRadio: '', inputValue: "" }; + } else if (this.type === 'checkboxTree' && !this.value) { + const defaultCheckedValue = getDefaultValueByOptions(this.item.options || []); + initialValue = { checkedValues: defaultCheckedValue, otherValues: {} }; } return { inputValue: initialValue, - oldValue: initialValue, // 记录上一次的值 + oldValue: typeof initialValue === 'object' ? JSON.parse(JSON.stringify(initialValue)) : initialValue, // 记录上一次的值 showModal: false, // 控制模态框显示 modificationRecords: [], // 存储修改记录 modalTimer: null, // 用于延迟隐藏模态框 @@ -318,12 +322,9 @@ export default { checkboxTagList: checkboxTagList, // checkboxTag类型的列表数据 oldCheckboxTagList: JSON.parse(JSON.stringify(checkboxTagList)), // 记录上一次的checkboxTagList fqyqValue: initialValue, // fqyq类型的值 - oldFqyqValue: {...initialValue}, // 记录上一次的fqyq值 + oldFqyqValue: { ...initialValue }, // 记录上一次的fqyq值 checkboxListValue: initialValue, // checkboxList类型的值 oldCheckboxListValue: JSON.parse(JSON.stringify(initialValue)), // 记录上一次的checkboxList值 - checkboxTreeValue: this.type === 'checkboxTree' ? (this.value || { checkedValues: [], otherValues: {} }) : {}, // checkboxTree类型的值 - oldCheckboxTreeValue: this.type === 'checkboxTree' ? JSON.parse(JSON.stringify(this.value || { checkedValues: [], otherValues: {} })) : {}, // 记录上一次的checkboxTree值 - checkboxTreeFirstCheck: this.type === 'checkboxTree' ? {} : {}, // 记录第一次勾选的状态 uuid: getuuid(), // 唯一标识符，用于EventBus事件匹配 regentType: ['sj', 'gsp', 'mix', 'xj', 'xb', 'gyzj', 'mjy', 'yq', 'jcb', 'qxbd'], //试剂/仪器/供试品等类型 selectRegentInfo: {},//选择的试剂/仪器/供试品等信息 @@ -334,14 +335,16 @@ export default { }, pendingUploadFile: null, // 用于存储待上传的文件 pendingRemoveFile: null, // 用于存储待删除的文件 - currentTagIndex:-1,//当前选中的checkboxTag索引 - currentHandleType:'',//当前操作的类型 - currentOtherCode:'',//当前操作的otherCode + currentTagIndex: -1,//当前选中的checkboxTag索引 + currentHandleType: '',//当前操作的类型 + currentOtherCode: '',//当前操作的otherCode currentCheckboxTreeValue: '',//当前操作的checkboxTree值 } }, watch: { value(newVal) { + console.log(newVal, "newVal") + if (this.type === 'checkboxList' && newVal && typeof newVal === 'object') { this.checkboxListValue = JSON.parse(JSON.stringify(newVal)); } else if (this.type === 'checkboxTag' && Array.isArray(newVal)) { @@ -357,12 +360,8 @@ export default { inputValue: newVal.inputValue || '', subRadio: newVal.subRadio || '' }; - } else if (this.type === 'checkboxTree' && newVal && typeof newVal === 'object') { - // checkboxTree类型 - this.checkboxTreeValue = JSON.parse(JSON.stringify(newVal)); - this.oldCheckboxTreeValue = JSON.parse(JSON.stringify(newVal)); } else { - this.inputValue = newVal; + this.inputValue = typeof newVal === 'object' ? JSON.parse(JSON.stringify(newVal)) : newVal; } } }, @@ -398,7 +397,7 @@ export default { }, methods: { getFlexClass() { - const noFlexArr = ["radio", "checkboxTag","fqyq"] + const noFlexArr = ["radio", "checkboxTag", "fqyq"] return noFlexArr.includes(this.type) ? '' : 'flex1' }, getDecimalDigits() { @@ -636,7 +635,7 @@ export default { }; if (type === "mix") { params.mixType = true; - }else if(item.qxbdType){ + } else if (item.qxbdType) { params.qxbdType = item.qxbdType; } } @@ -719,7 +718,7 @@ export default { }, getFillTypeStyle(type) { const { fillType } = this.item; - const filterType = ["attachment","checkboxTag","fqyq","checkboxTree"] + const filterType = ["attachment", "checkboxTag", "fqyq", "checkboxTree"] const typeObj = { actFill: "orange-border",//实际填写的边框颜色 green: "green-border", @@ -861,7 +860,7 @@ export default { }, // 检查是否显示显示checkboxList的其他输入框 isShowCheckboxListOther(option) { - const {checkboxValues } = this.checkboxListValue + const { checkboxValues } = this.checkboxListValue if (!checkboxValues) { return false; } @@ -920,80 +919,85 @@ export default { this.checkboxListValue.otherValues[otherCode] = e.target.value; this.onCommonHandleSaveRecord(e.target.value); }, - + // 检查checkboxTree的某个值是否被选中 isCheckboxTreeChecked(value) { - return this.checkboxTreeValue.checkedValues && this.checkboxTreeValue.checkedValues.includes(value); + if (!this.inputValue || !this.inputValue.checkedValues) { + return false; + } + const checkedItem = this.inputValue.checkedValues.find(item => item.label === value); + return checkedItem && checkedItem.checked; }, - + // 检查checkboxTree的其他输入框是否有错误 isCheckboxTreeOtherInputError(value) { if (!this.error) { return false; } - return isValueEmpty(this.checkboxTreeValue.otherValues[value]); + return isValueEmpty(this.inputValue.otherValues[value]); }, - + + // 获取checkboxTree的选中值 + getCheckboxTreeChecked(value) { + const { checkedValues } = this.inputValue + const o = checkedValues.find(item => item.label === value) || {}; + return !!o.checked; + }, + // checkboxTree的复选框变化处理 onCheckboxTreeChange(value, checked) { - this.currentHandleType = 'checkboxTree'; + this.currentHandleType = 'checkboxTreeCheckbox'; this.currentCheckboxTreeValue = value; - - // 初始化checkedValues数组 - if (!this.checkboxTreeValue.checkedValues) { - this.checkboxTreeValue.checkedValues = []; - } - - // 初始化otherValues对象 - if (!this.checkboxTreeValue.otherValues) { - this.checkboxTreeValue.otherValues = {}; - } - - // 处理选中状态 + // 查找或创建对应的checkedValues项 + let checkedItem = this.inputValue.checkedValues.find(item => item.label === value); + if (checked) { - if (!this.checkboxTreeValue.checkedValues.includes(value)) { - this.checkboxTreeValue.checkedValues.push(value); - } + checkedItem.checked = true; + // 如果勾选子级，默认勾选父级 + this.checkParentIfNeeded(value); } else { - const index = this.checkboxTreeValue.checkedValues.indexOf(value); - if (index > -1) { - this.checkboxTreeValue.checkedValues.splice(index, 1); - // 清除对应的otherValues - delete this.checkboxTreeValue.otherValues[value]; - } + // 如果取消勾选，移除该项或设置为false + checkedItem.checked = false; + // 清除对应的otherValues + delete this.inputValue.otherValues[value]; } - - // 检查是否是第一次勾选 - const isFirstCheck = !this.checkboxTreeFirstCheck[value]; - if (isFirstCheck) { - this.checkboxTreeFirstCheck[value] = true; - // 第一次勾选不需要验签 - this.emitCheckboxTreeValue(); - this.updateCheckboxTreeOldValue(); - } else { - // 非第一次勾选需要验签 - this.onCommonHandleSaveRecord(); + this.onCommonHandleSaveRecord(); + }, + + // 如果勾选子级，默认勾选父级 + checkParentIfNeeded(childValue) { + // 遍历所有选项组，找到子级对应的父级 + if (this.item && this.item.options) { + for (const group of this.item.options) { + if (group.children && group.children.length > 0) { + // 检查当前childValue是否在这个group的children中 + const childExists = group.children.some(child => child.value === childValue); + if (childExists) { + // 找到父级，确保父级被勾选 + let parentItem = this.inputValue.checkedValues.find(item => item.label === group.value); + if (!parentItem) { + // 父级不存在，添加父级 + parentItem = { label: group.value, checked: true }; + this.inputValue.checkedValues.push(parentItem); + } else if (!parentItem.checked) { + // 父级存在但未勾选，设置为勾选 + parentItem.checked = true; + } + break; + } + } + } } }, - + // checkboxTree的其他输入框失去焦点处理 onCheckboxTreeOtherBlur(value, e) { this.currentHandleType = "checkboxTreeOther"; this.currentCheckboxTreeValue = value; - this.checkboxTreeValue.otherValues[value] = e.target.value; + this.inputValue.otherValues[value] = e.target.value; this.onCommonHandleSaveRecord(e.target.value); }, - - // 发送checkboxTree的值 - emitCheckboxTreeValue() { - this.$emit('input', JSON.parse(JSON.stringify(this.checkboxTreeValue))); - this.$emit('change', JSON.parse(JSON.stringify(this.checkboxTreeValue))); - }, - - // 更新checkboxTree的旧值 - updateCheckboxTreeOldValue() { - this.oldCheckboxTreeValue = JSON.parse(JSON.stringify(this.checkboxTreeValue)); - }, + // 点击question图标 onClickQuestion() { const { templateFillType } = this; @@ -1022,25 +1026,37 @@ export default { this.visible = true; } }, - getCheckboxListInfo(){ - const { otherValues,checkboxValues } = this.checkboxListValue; - const { otherValues: oldOtherValues,checkboxValues: oldCheckboxValues } = this.oldCheckboxListValue; + getCheckboxListInfo() { + const { otherValues, checkboxValues } = this.checkboxListValue; + const { otherValues: oldOtherValues, checkboxValues: oldCheckboxValues } = this.oldCheckboxListValue; const o = { - "checkboxListValue":{oldValue:oldCheckboxValues,newValue:checkboxValues,des:""}, - "checkboxListOther":{oldValue:oldOtherValues[this.currentOtherCode],newValue:otherValues[this.currentOtherCode],des:"样品信息："}, + "checkboxListValue": { oldValue: oldCheckboxValues, newValue: checkboxValues, des: "" }, + "checkboxListOther": { oldValue: oldOtherValues[this.currentOtherCode], newValue: otherValues[this.currentOtherCode], des: "样品信息：" }, } return o[this.currentHandleType]; }, - getFqyqInfo(){ - const { mainRadio,inputValue,subRadio } = this.fqyqValue; - const { mainRadio: oldMainRadio,inputValue: oldInputValue,subRadio: oldSubRadio } = this.oldFqyqValue; - const o ={ - "mainRadio":{oldValue:oldMainRadio,newValue:mainRadio,des:""}, - "inputValue":{oldValue:oldInputValue,newValue:inputValue,des:""}, - "subRadio":{oldValue:oldSubRadio,newValue:subRadio,des:"是否在规定时间完成："} + getFqyqInfo() { + const { mainRadio, inputValue, subRadio } = this.fqyqValue; + const { mainRadio: oldMainRadio, inputValue: oldInputValue, subRadio: oldSubRadio } = this.oldFqyqValue; + const o = { + "mainRadio": { oldValue: oldMainRadio, newValue: mainRadio, des: "" }, + "inputValue": { oldValue: oldInputValue, newValue: inputValue, des: "" }, + "subRadio": { oldValue: oldSubRadio, newValue: subRadio, des: "是否在规定时间完成：" } } return o[this.currentHandleType]; }, + getCheckboxTreeInfo() { + const { checkedValues, otherValues } = this.inputValue; + const { checkedValues: oldCheckedValues, otherValues: oldOtherValues } = this.oldValue; + const { currentHandleType, currentCheckboxTreeValue } = this; + const newItem = checkedValues.find(item => item.label === currentCheckboxTreeValue); + const oldItem = oldCheckedValues.find(item => item.label === currentCheckboxTreeValue); + const o = { + "checkboxTreeCheckbox": { oldValue: oldItem, newValue: newItem, des: "" }, + "checkboxTreeOther": { oldValue: oldOtherValues[currentCheckboxTreeValue], newValue: otherValues[currentCheckboxTreeValue], des: "样品信息：" }, + } + return o[currentHandleType]; + }, async onCommonHandleSaveRecord(val) { const isEmpty = isValueEmpty(this.inputValue); if (this.error && !isEmpty) { @@ -1084,14 +1100,13 @@ export default { this.$emit("change", this.inputValue); return; } - // 值发生了变化，需要弹出密码输入框 let isSame = true, isOldValueEmpty = true; const { currentHandleType } = this; // 如果是checkboxList类型，需要同时比较otherValues if (this.type === 'checkboxList') { const current = this.getCheckboxListInfo(); - isSame = this.isEqual(current.oldValue,current.newValue); + isSame = this.isEqual(current.oldValue, current.newValue); isOldValueEmpty = isValueEmpty(current.oldValue); } else if (this.type === "checkboxTag") { // checkboxTag类型，只比较当前tagIndex的数据 @@ -1101,17 +1116,25 @@ export default { isOldValueEmpty = isValueEmpty(oldTag.checked); } else if (this.type === "fqyq") { const current = this.getFqyqInfo(); - isSame = this.isEqual(current.oldValue,current.newValue); + isSame = this.isEqual(current.oldValue, current.newValue); isOldValueEmpty = isValueEmpty(current.oldValue); } else if (this.type === "checkboxTree") { - // checkboxTree类型，比较checkedValues - isSame = this.isEqual(this.oldCheckboxTreeValue.checkedValues, this.checkboxTreeValue.checkedValues); - isOldValueEmpty = isValueEmpty(this.oldCheckboxTreeValue.checkedValues); + const current = this.getCheckboxTreeInfo(); + const { oldValue, newValue } = current; + if (this.currentHandleType === "checkboxTreeCheckbox") { + isSame = this.isEqual(oldValue.checked, newValue.checked); + isOldValueEmpty = isValueEmpty(oldValue.checked); + } else { + isSame = this.isEqual(current.oldValue, current.newValue); + isOldValueEmpty = isValueEmpty(current.oldValue); + } + + } else { isSame = this.isEqual(this.oldValue, this.inputValue) isOldValueEmpty = isValueEmpty(this.oldValue); } - console.log(isSame,isOldValueEmpty,this.fqyqValue,this.oldFqyqValue,"isSame") + console.log(isSame, isOldValueEmpty, this.currentCheckboxTreeValue, this.oldValue, this.inputValue, "isSame") if (isSame) { return; } @@ -1147,18 +1170,11 @@ export default { // 如果没有指定字段，回退整个对象 this.fqyqValue = JSON.parse(JSON.stringify(this.oldFqyqValue)); oldValue = { ...this.fqyqValue }; - } else if (this.type === "checkboxTree") { - // checkboxTree类型，回退整个对象 - this.checkboxTreeValue = JSON.parse(JSON.stringify(this.oldCheckboxTreeValue)); - oldValue = JSON.parse(JSON.stringify(this.oldCheckboxTreeValue)); } - this.inputValue = this.oldValue; + this.inputValue = typeof oldValue === 'object' ? JSON.parse(JSON.stringify(oldValue)) : oldValue; this.$emit('input', oldValue); // 触发 v-model 更新 // this.$emit("blur", this.oldValue); this.$emit("change", oldValue, "cancel"); - if (this.item.type === "clickable") { - this.$emit("resetRecord"); - } }, //处理更新记录 @@ -1181,22 +1197,27 @@ export default { isModify = oldTag.checked !== undefined; } else if (this.type === "fqyq") { const current = this.getFqyqInfo(); - recordOldVlaue = `${current.des+current.oldValue}`; - recordValue = `${current.des+current.newValue}`; - isModify = !!this.oldFqyqValue.mainRadio - }else if(this.type === "checkboxList"){ + recordOldVlaue = `${current.des + current.oldValue}`; + recordValue = `${current.des + current.newValue}`; + isModify = !!this.oldFqyqValue.mainRadio + } else if (this.type === "checkboxList") { const current = this.getCheckboxListInfo(); - recordOldVlaue = `${current.des+(current.oldValue || '')}`; - recordValue = `${current.des+(current.newValue || '')}`; + recordOldVlaue = `${current.des + (current.oldValue || '')}`; + recordValue = `${current.des + (current.newValue || '')}`; isModify = !!current.oldValue; } else if (this.type === "checkboxTree") { // checkboxTree类型，记录当前操作的值变化 - const value = this.currentCheckboxTreeValue; - const oldChecked = this.oldCheckboxTreeValue.checkedValues && this.oldCheckboxTreeValue.checkedValues.includes(value); - const currentChecked = this.checkboxTreeValue.checkedValues && this.checkboxTreeValue.checkedValues.includes(value); - recordOldVlaue = `${value}:${oldChecked ? '勾选' : '未勾选'}`; - recordValue = `${value}:${currentChecked ? '勾选' : '未勾选'}`; - isModify = oldChecked !== undefined; + const current = this.getCheckboxTreeInfo(); + if (this.currentHandleType === "checkboxTreeCheckbox") { + const { oldValue, newValue } = current; + recordOldVlaue = `${oldValue.label || ''}:${oldValue.checked ? '勾选' : '未勾选'}`; + recordValue = `${newValue.label || ''}:${newValue.checked ? '勾选' : '未勾选'}`; + isModify = newValue.checked !== undefined; + } else { + recordOldVlaue = current.oldValue; + recordValue = current.newValue; + isModify = !!current.oldValue; + } } const record = { ...baseInfo, @@ -1229,9 +1250,6 @@ export default { } else if (this.type === "fqyq") { // 如果没有指定字段，更新整个对象 this.oldFqyqValue = JSON.parse(JSON.stringify(this.fqyqValue)); - } else if (this.type === "checkboxTree") { - // checkboxTree类型，更新整个对象 - this.oldCheckboxTreeValue = JSON.parse(JSON.stringify(this.checkboxTreeValue)); } let value = this.inputValue; if (this.type === 'checkboxList') { @@ -1243,8 +1261,6 @@ export default { value = [...this.checkboxTagList]; } else if (this.type === "fqyq") { value = { ...this.fqyqValue }; - } else if (this.type === "checkboxTree") { - value = JSON.parse(JSON.stringify(this.checkboxTreeValue)); } if (this.type === "button") { this.$emit('clickButton', this.item, this.inputValue, data); @@ -1253,7 +1269,7 @@ export default { } } //用户输入密码并点击确定，保存修改 - this.oldValue = value; // 更新旧值 + this.oldValue = typeof value === 'object' ? JSON.parse(JSON.stringify(value)) : value; // 更新旧值 this.$emit("blur", value); this.$emit('input', value); this.$emit("change", value, data ? "save" : ""); @@ -1891,6 +1907,7 @@ export default { border-color: #f9c588; } } + .el-radio__inner { border-color: #f9c588; } @@ -1948,28 +1965,39 @@ export default { } } } -.fqyq-input{ + +.fqyq-input { width: 500px; - margin-right:10px; + margin-right: 10px; } -.mb-10{ + +.mb-10 { margin-bottom: 10px; } -.fs-14{ + +.fs-14 { font-size: 14px; } -.mr-10{ + +.mr-10 { margin-right: 10px; } -.checkbox-tree-children{ + +.checkbox-tree-children { margin-left: 30px; - padding:16px 0; + padding: 16px 0; gap: 16px; display: grid; grid-template-columns: repeat(4, 1fr); } -.checkbox-tree-item{ +.checkbox-tree-item { box-sizing: border-box; + display: flex; + align-items: center; +} +.checkbox-tree-input-container{ + margin-left: 10px; + width: 500px; } \ No newline at end of file diff --git a/src/components/Template/Step.vue b/src/components/Template/Step.vue index 8f274e4..328a47d 100644 --- a/src/components/Template/Step.vue +++ b/src/components/Template/Step.vue @@ -13,7 +13,7 @@ + @update="onFormUpdate(index, $event)" :stepIndex = "index" :ref="'stepCompRef_' + index">