|
|
@ -50,7 +50,33 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div v-else-if="type === 'checkboxTree'" class="flex1 checkbox-list-container" |
|
|
<div v-else-if="type === 'checkboxTree'" class="flex1 checkbox-list-container" |
|
|
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"> |
|
|
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"> |
|
|
|
|
|
|
|
|
|
|
|
<div v-for="group in item.options" :key="group.value" class="checkbox-tree-group"> |
|
|
|
|
|
<el-checkbox |
|
|
|
|
|
:label="group.value" |
|
|
|
|
|
:disabled="getDisabled()" |
|
|
|
|
|
:checked="isCheckboxTreeChecked(group.value)" |
|
|
|
|
|
@change="onCheckboxTreeChange(group.value, $event)"> |
|
|
|
|
|
{{ group.label }} |
|
|
|
|
|
</el-checkbox> |
|
|
|
|
|
<div v-if="group.children && group.children.length > 0" class="checkbox-tree-children"> |
|
|
|
|
|
<div v-for="child in group.children" :key="child.value" class="checkbox-tree-item"> |
|
|
|
|
|
<el-checkbox |
|
|
|
|
|
:label="child.value" |
|
|
|
|
|
:disabled="getDisabled()" |
|
|
|
|
|
:checked="isCheckboxTreeChecked(child.value)" |
|
|
|
|
|
@change="onCheckboxTreeChange(child.value, $event)"> |
|
|
|
|
|
{{ child.label }} |
|
|
|
|
|
</el-checkbox> |
|
|
|
|
|
<div v-if="(child.value === '样品信息' || child.value === '其他') && isCheckboxTreeChecked(child.value)" class="checkbox-tree-input-container"> |
|
|
|
|
|
<el-input |
|
|
|
|
|
v-model="checkboxTreeValue.otherValues[child.value]" |
|
|
|
|
|
:class="{ 'error-border': isCheckboxTreeOtherInputError(child.value) }" |
|
|
|
|
|
placeholder="请输入" |
|
|
|
|
|
@blur="onCheckboxTreeOtherBlur(child.value, $event)"/> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<el-date-picker v-else-if="type === 'dateTime'" type="datetime" class="flex1" |
|
|
<el-date-picker v-else-if="type === 'dateTime'" type="datetime" class="flex1" |
|
|
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue" |
|
|
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue" |
|
|
@ -295,6 +321,9 @@ export default { |
|
|
oldFqyqValue: {...initialValue}, // 记录上一次的fqyq值 |
|
|
oldFqyqValue: {...initialValue}, // 记录上一次的fqyq值 |
|
|
checkboxListValue: initialValue, // checkboxList类型的值 |
|
|
checkboxListValue: initialValue, // checkboxList类型的值 |
|
|
oldCheckboxListValue: JSON.parse(JSON.stringify(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事件匹配 |
|
|
uuid: getuuid(), // 唯一标识符,用于EventBus事件匹配 |
|
|
regentType: ['sj', 'gsp', 'mix', 'xj', 'xb', 'gyzj', 'mjy', 'yq', 'jcb', 'qxbd'], //试剂/仪器/供试品等类型 |
|
|
regentType: ['sj', 'gsp', 'mix', 'xj', 'xb', 'gyzj', 'mjy', 'yq', 'jcb', 'qxbd'], //试剂/仪器/供试品等类型 |
|
|
selectRegentInfo: {},//选择的试剂/仪器/供试品等信息 |
|
|
selectRegentInfo: {},//选择的试剂/仪器/供试品等信息 |
|
|
@ -308,6 +337,7 @@ export default { |
|
|
currentTagIndex:-1,//当前选中的checkboxTag索引 |
|
|
currentTagIndex:-1,//当前选中的checkboxTag索引 |
|
|
currentHandleType:'',//当前操作的类型 |
|
|
currentHandleType:'',//当前操作的类型 |
|
|
currentOtherCode:'',//当前操作的otherCode |
|
|
currentOtherCode:'',//当前操作的otherCode |
|
|
|
|
|
currentCheckboxTreeValue: '',//当前操作的checkboxTree值 |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
@ -327,6 +357,10 @@ export default { |
|
|
inputValue: newVal.inputValue || '', |
|
|
inputValue: newVal.inputValue || '', |
|
|
subRadio: newVal.subRadio || '' |
|
|
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 { |
|
|
} else { |
|
|
this.inputValue = newVal; |
|
|
this.inputValue = newVal; |
|
|
} |
|
|
} |
|
|
@ -683,7 +717,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
getFillTypeStyle(type) { |
|
|
getFillTypeStyle(type) { |
|
|
const { fillType } = this.item; |
|
|
const { fillType } = this.item; |
|
|
const filterType = ["attachment","checkboxTag","fqyq"] |
|
|
|
|
|
|
|
|
const filterType = ["attachment","checkboxTag","fqyq","checkboxTree"] |
|
|
const typeObj = { |
|
|
const typeObj = { |
|
|
actFill: "orange-border",//实际填写的边框颜色 |
|
|
actFill: "orange-border",//实际填写的边框颜色 |
|
|
green: "green-border", |
|
|
green: "green-border", |
|
|
@ -884,6 +918,80 @@ export default { |
|
|
this.checkboxListValue.otherValues[otherCode] = e.target.value; |
|
|
this.checkboxListValue.otherValues[otherCode] = e.target.value; |
|
|
this.onCommonHandleSaveRecord(e.target.value); |
|
|
this.onCommonHandleSaveRecord(e.target.value); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 检查checkboxTree的某个值是否被选中 |
|
|
|
|
|
isCheckboxTreeChecked(value) { |
|
|
|
|
|
return this.checkboxTreeValue.checkedValues && this.checkboxTreeValue.checkedValues.includes(value); |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 检查checkboxTree的其他输入框是否有错误 |
|
|
|
|
|
isCheckboxTreeOtherInputError(value) { |
|
|
|
|
|
if (!this.error) { |
|
|
|
|
|
return false; |
|
|
|
|
|
} |
|
|
|
|
|
return isValueEmpty(this.checkboxTreeValue.otherValues[value]); |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// checkboxTree的复选框变化处理 |
|
|
|
|
|
onCheckboxTreeChange(value, checked) { |
|
|
|
|
|
this.currentHandleType = 'checkboxTree'; |
|
|
|
|
|
this.currentCheckboxTreeValue = value; |
|
|
|
|
|
|
|
|
|
|
|
// 初始化checkedValues数组 |
|
|
|
|
|
if (!this.checkboxTreeValue.checkedValues) { |
|
|
|
|
|
this.checkboxTreeValue.checkedValues = []; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 初始化otherValues对象 |
|
|
|
|
|
if (!this.checkboxTreeValue.otherValues) { |
|
|
|
|
|
this.checkboxTreeValue.otherValues = {}; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 处理选中状态 |
|
|
|
|
|
if (checked) { |
|
|
|
|
|
if (!this.checkboxTreeValue.checkedValues.includes(value)) { |
|
|
|
|
|
this.checkboxTreeValue.checkedValues.push(value); |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
const index = this.checkboxTreeValue.checkedValues.indexOf(value); |
|
|
|
|
|
if (index > -1) { |
|
|
|
|
|
this.checkboxTreeValue.checkedValues.splice(index, 1); |
|
|
|
|
|
// 清除对应的otherValues |
|
|
|
|
|
delete this.checkboxTreeValue.otherValues[value]; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 检查是否是第一次勾选 |
|
|
|
|
|
const isFirstCheck = !this.checkboxTreeFirstCheck[value]; |
|
|
|
|
|
if (isFirstCheck) { |
|
|
|
|
|
this.checkboxTreeFirstCheck[value] = true; |
|
|
|
|
|
// 第一次勾选不需要验签 |
|
|
|
|
|
this.emitCheckboxTreeValue(); |
|
|
|
|
|
this.updateCheckboxTreeOldValue(); |
|
|
|
|
|
} else { |
|
|
|
|
|
// 非第一次勾选需要验签 |
|
|
|
|
|
this.onCommonHandleSaveRecord(); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// checkboxTree的其他输入框失去焦点处理 |
|
|
|
|
|
onCheckboxTreeOtherBlur(value, e) { |
|
|
|
|
|
this.currentHandleType = "checkboxTreeOther"; |
|
|
|
|
|
this.currentCheckboxTreeValue = value; |
|
|
|
|
|
this.checkboxTreeValue.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图标 |
|
|
// 点击question图标 |
|
|
onClickQuestion() { |
|
|
onClickQuestion() { |
|
|
const { templateFillType } = this; |
|
|
const { templateFillType } = this; |
|
|
@ -993,6 +1101,10 @@ export default { |
|
|
const current = this.getFqyqInfo(); |
|
|
const current = this.getFqyqInfo(); |
|
|
isSame = this.isEqual(current.oldValue,current.newValue); |
|
|
isSame = this.isEqual(current.oldValue,current.newValue); |
|
|
isOldValueEmpty = isValueEmpty(current.oldValue); |
|
|
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); |
|
|
} else { |
|
|
} else { |
|
|
isSame = this.isEqual(this.oldValue, this.inputValue) |
|
|
isSame = this.isEqual(this.oldValue, this.inputValue) |
|
|
isOldValueEmpty = isValueEmpty(this.oldValue); |
|
|
isOldValueEmpty = isValueEmpty(this.oldValue); |
|
|
@ -1033,6 +1145,10 @@ export default { |
|
|
// 如果没有指定字段,回退整个对象 |
|
|
// 如果没有指定字段,回退整个对象 |
|
|
this.fqyqValue = JSON.parse(JSON.stringify(this.oldFqyqValue)); |
|
|
this.fqyqValue = JSON.parse(JSON.stringify(this.oldFqyqValue)); |
|
|
oldValue = { ...this.fqyqValue }; |
|
|
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 = this.oldValue; |
|
|
this.$emit('input', oldValue); // 触发 v-model 更新 |
|
|
this.$emit('input', oldValue); // 触发 v-model 更新 |
|
|
@ -1071,6 +1187,14 @@ export default { |
|
|
recordOldVlaue = `${current.des+(current.oldValue || '')}`; |
|
|
recordOldVlaue = `${current.des+(current.oldValue || '')}`; |
|
|
recordValue = `${current.des+(current.newValue || '')}`; |
|
|
recordValue = `${current.des+(current.newValue || '')}`; |
|
|
isModify = !!current.oldValue; |
|
|
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 record = { |
|
|
const record = { |
|
|
...baseInfo, |
|
|
...baseInfo, |
|
|
@ -1103,6 +1227,9 @@ export default { |
|
|
} else if (this.type === "fqyq") { |
|
|
} else if (this.type === "fqyq") { |
|
|
// 如果没有指定字段,更新整个对象 |
|
|
// 如果没有指定字段,更新整个对象 |
|
|
this.oldFqyqValue = JSON.parse(JSON.stringify(this.fqyqValue)); |
|
|
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; |
|
|
let value = this.inputValue; |
|
|
if (this.type === 'checkboxList') { |
|
|
if (this.type === 'checkboxList') { |
|
|
@ -1114,6 +1241,8 @@ export default { |
|
|
value = [...this.checkboxTagList]; |
|
|
value = [...this.checkboxTagList]; |
|
|
} else if (this.type === "fqyq") { |
|
|
} else if (this.type === "fqyq") { |
|
|
value = { ...this.fqyqValue }; |
|
|
value = { ...this.fqyqValue }; |
|
|
|
|
|
} else if (this.type === "checkboxTree") { |
|
|
|
|
|
value = JSON.parse(JSON.stringify(this.checkboxTreeValue)); |
|
|
} |
|
|
} |
|
|
if (this.type === "button") { |
|
|
if (this.type === "button") { |
|
|
this.$emit('clickButton', this.item, this.inputValue, data); |
|
|
this.$emit('clickButton', this.item, this.inputValue, data); |
|
|
@ -1830,4 +1959,15 @@ export default { |
|
|
.mr-10{ |
|
|
.mr-10{ |
|
|
margin-right: 10px; |
|
|
margin-right: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
.checkbox-tree-children{ |
|
|
|
|
|
margin-left: 30px; |
|
|
|
|
|
padding:16px 0; |
|
|
|
|
|
gap: 16px; |
|
|
|
|
|
display: grid; |
|
|
|
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.checkbox-tree-item{ |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |