|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<div class="flex " :class="type !=='radio' ? 'flex1' : ''"> |
|
|
|
<div class="flex" :class="type !=='radio' ? 'flex1' : ''"> |
|
|
|
<div class="flex " :class="getFlexClass()"> |
|
|
|
<div class="flex" :class="getFlexClass()"> |
|
|
|
<el-input v-if="type === 'input'" :maxlength="item.maxlength || 50" :disabled="getDisabled()" |
|
|
|
:class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" @blur="onBlur" |
|
|
|
:placeholder="getPlaceholder()" v-model="inputValue" @input="onInputChange" @change="onInputChange" /> |
|
|
|
@ -89,6 +89,30 @@ |
|
|
|
<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" @click="onTagClick"> |
|
|
|
<el-input v-if="isEditingTag" |
|
|
|
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> |
|
|
|
</div> |
|
|
|
<i class="el-icon-close delete-icon" @click="onDeleteTag" v-if="tagValue"></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="handle-row" v-if="isShowHandle()"> |
|
|
|
@ -218,7 +242,7 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
let initialValue = this.value; |
|
|
|
let initialOtherValues = {}; |
|
|
|
let initialOtherValues = {},checkboxTagChecked = false,tagValue = ''; |
|
|
|
|
|
|
|
// 如果是checkboxList类型且value是对象格式 |
|
|
|
if (this.type === 'checkboxList' && this.value && typeof this.value === 'object') { |
|
|
|
@ -226,6 +250,9 @@ 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 || false; |
|
|
|
tagValue = this.value.tagValue || ''; |
|
|
|
} |
|
|
|
return { |
|
|
|
inputValue: initialValue, |
|
|
|
@ -241,6 +268,9 @@ export default { |
|
|
|
replyContent: '', // 回复内容 |
|
|
|
visible: false,//是否显示弹窗 |
|
|
|
checkboxValue: this.getChecked(),//是否选中 |
|
|
|
checkboxTagChecked: checkboxTagChecked, // checkboxTag类型的checkbox选中状态 |
|
|
|
tagValue: tagValue, // checkboxTag类型的tag值 |
|
|
|
isEditingTag: false, // 是否正在编辑tag |
|
|
|
uuid: getuuid(), // 唯一标识符，用于EventBus事件匹配 |
|
|
|
regentType: ['sj', 'gsp', 'mix', 'xj', 'xb', 'gyzj', 'mjy', 'yq', 'jcb', 'qxbd'], //试剂/仪器/供试品等类型 |
|
|
|
selectRegentInfo: {},//选择的试剂/仪器/供试品等信息 |
|
|
|
@ -255,9 +285,13 @@ export default { |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
value(newVal) { |
|
|
|
console.log(newVal,"newVal") |
|
|
|
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 { |
|
|
|
this.inputValue = this.type === 'checkboxList' && !Array.isArray(newVal) ? [] : newVal; |
|
|
|
} |
|
|
|
@ -294,6 +328,10 @@ export default { |
|
|
|
EventBus.$off("onMixReagentSubmit", this.onMixReagentSubmit) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getFlexClass(){ |
|
|
|
const noFlexArr = ["radio","checkboxTag"] |
|
|
|
return noFlexArr.includes(this.type) ? '' : 'flex1' |
|
|
|
}, |
|
|
|
getDecimalDigits(){ |
|
|
|
const {precision} = this.item; |
|
|
|
if(!isNaN(precision)){ |
|
|
|
@ -774,6 +812,40 @@ export default { |
|
|
|
this.otherValues[code] = value; |
|
|
|
this.onInputChange(); |
|
|
|
}, |
|
|
|
// checkboxTag的checkbox变化处理 |
|
|
|
onCheckboxTagChange() { |
|
|
|
this.emitCheckboxTagValue(); |
|
|
|
}, |
|
|
|
// 点击tag区域 |
|
|
|
onTagClick() { |
|
|
|
this.isEditingTag = true; |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.tagInput && this.$refs.tagInput.focus(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
// tag输入框失去焦点 |
|
|
|
onTagBlur() { |
|
|
|
this.isEditingTag = false; |
|
|
|
this.emitCheckboxTagValue(); |
|
|
|
// 触发保存记录 |
|
|
|
if (this.tagValue) { |
|
|
|
this.onCommonHandleSaveRecord(this.tagValue); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 删除tag |
|
|
|
onDeleteTag() { |
|
|
|
this.tagValue = ''; |
|
|
|
this.emitCheckboxTagValue(); |
|
|
|
this.onCommonHandleSaveRecord(''); |
|
|
|
}, |
|
|
|
// 发送checkboxTag的值 |
|
|
|
emitCheckboxTagValue() { |
|
|
|
const value = { |
|
|
|
checked: this.checkboxTagChecked, |
|
|
|
tagValue: this.tagValue |
|
|
|
}; |
|
|
|
this.$emit('change', value); |
|
|
|
}, |
|
|
|
// 统一处理失去焦点事件 |
|
|
|
onBlur(e) { |
|
|
|
this.onCommonHandleSaveRecord(e.target.value); |
|
|
|
@ -1572,4 +1644,50 @@ export default { |
|
|
|
border-color: #f9c588; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// checkboxTag样式 |
|
|
|
.checkbox-tag-container { |
|
|
|
border-radius: 4px; |
|
|
|
// transition: all 0.3s; |
|
|
|
margin-bottom: 5px; |
|
|
|
margin-right: 5px; |
|
|
|
|
|
|
|
&.error-border { |
|
|
|
border-color: #ff5d5d !important; |
|
|
|
box-shadow: 0 0 6px #ffc3c3 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.checkbox-tag-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 8px; |
|
|
|
|
|
|
|
.tag-content { |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
.tag-input { |
|
|
|
width: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
.tag-display { |
|
|
|
cursor: pointer; |
|
|
|
user-select: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.delete-icon { |
|
|
|
cursor: pointer; |
|
|
|
color: #909399; |
|
|
|
font-size: 14px; |
|
|
|
padding: 2px; |
|
|
|
border-radius: 50%; |
|
|
|
// transition: all 0.3s; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: #ff5d5d; |
|
|
|
background-color: #f5f5f5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
luojie
1 month ago