|
|
|
@ -31,6 +31,12 @@ |
|
|
|
<el-checkbox :label="option.value" :disabled="getDisabled()"> |
|
|
|
{{ option.label }} |
|
|
|
</el-checkbox> |
|
|
|
<div v-if="option.otherCode && inputValue.includes(option.value)"> |
|
|
|
<el-input v-model="otherValues[option.otherCode]" |
|
|
|
:placeholder="option.otherPlaceholder || '请输入'" |
|
|
|
@blur="onBlur" |
|
|
|
@input="onOtherInputChange(option.otherCode, $event)" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-checkbox-group> |
|
|
|
</div> |
|
|
|
@ -168,7 +174,7 @@ export default { |
|
|
|
}, |
|
|
|
// v-model 值 |
|
|
|
value: { |
|
|
|
type: [String, Number, Array, Boolean], |
|
|
|
type: [String, Number, Array, Boolean, Object], |
|
|
|
default: '' |
|
|
|
}, |
|
|
|
// 错误状态 |
|
|
|
@ -200,9 +206,21 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
let initialValue = this.value; |
|
|
|
let initialOtherValues = {}; |
|
|
|
|
|
|
|
// 如果是checkboxList类型且value是对象格式 |
|
|
|
if (this.type === 'checkboxList' && this.value && typeof this.value === 'object') { |
|
|
|
initialValue = this.value.checkboxValues || []; |
|
|
|
initialOtherValues = this.value.otherValues || {}; |
|
|
|
} else if (this.type === 'checkboxList' && !Array.isArray(this.value)) { |
|
|
|
initialValue = []; |
|
|
|
} |
|
|
|
return { |
|
|
|
inputValue: this.type === 'checkboxList' && !Array.isArray(this.value) ? [] : this.value, |
|
|
|
oldValue: this.type === 'checkboxList' && !Array.isArray(this.value) ? [] : this.value, // 记录上一次的值 |
|
|
|
inputValue: initialValue, |
|
|
|
oldValue: initialValue, // 记录上一次的值 |
|
|
|
otherValues: initialOtherValues, // 存储checkboxList中otherCode对应的输入值 |
|
|
|
oldOtherValues: {...initialOtherValues}, // 记录上一次的otherValues |
|
|
|
showModal: false, // 控制模态框显示 |
|
|
|
modificationRecords: [], // 存储修改记录 |
|
|
|
modalTimer: null, // 用于延迟隐藏模态框 |
|
|
|
@ -226,7 +244,12 @@ export default { |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
value(newVal) { |
|
|
|
this.inputValue = this.type === 'checkboxList' && !Array.isArray(newVal) ? [] : newVal; |
|
|
|
if (this.type === 'checkboxList' && newVal && typeof newVal === 'object') { |
|
|
|
this.inputValue = newVal.checkboxValues || []; |
|
|
|
this.otherValues = newVal.otherValues || {}; |
|
|
|
} else { |
|
|
|
this.inputValue = this.type === 'checkboxList' && !Array.isArray(newVal) ? [] : newVal; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
@ -270,7 +293,6 @@ export default { |
|
|
|
onInstrumentSubmit(data) { |
|
|
|
if (data.uuid !== this.uuid) return; |
|
|
|
this.selectRegentInfo = data; |
|
|
|
console.log(data, "yq") |
|
|
|
}, |
|
|
|
|
|
|
|
// 文件状态改变时的钩子,添加文件、上传成功、上传失败时都会被调用 |
|
|
|
@ -500,7 +522,6 @@ export default { |
|
|
|
}, |
|
|
|
onDateChange(val, format) { |
|
|
|
this.inputValue = moment(val).format(format); |
|
|
|
console.log(this.inputValue, "inputValue") |
|
|
|
this.onCommonHandleSaveRecord(this.inputValue); |
|
|
|
}, |
|
|
|
getUserName(record) { |
|
|
|
@ -690,10 +711,35 @@ export default { |
|
|
|
}, |
|
|
|
// 统一处理输入变化 |
|
|
|
onInputChange(val) { |
|
|
|
const value = val !== undefined ? val : this.inputValue; |
|
|
|
let value = val !== undefined ? val : this.inputValue; |
|
|
|
// 如果是checkboxList类型,需要同时发送checkboxValues和otherValues |
|
|
|
if (this.type === 'checkboxList') { |
|
|
|
// 检查是否有被取消选中的checkbox |
|
|
|
if (this.oldValue && Array.isArray(this.oldValue)) { |
|
|
|
const uncheckedValues = this.oldValue.filter(oldVal => !this.inputValue.includes(oldVal)); |
|
|
|
|
|
|
|
// 清除被取消选中的checkbox对应的otherValues |
|
|
|
if (uncheckedValues.length > 0) { |
|
|
|
this.item.options.forEach(option => { |
|
|
|
if (uncheckedValues.includes(option.value) && option.otherCode) { |
|
|
|
this.$delete(this.otherValues, option.otherCode); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
value = { |
|
|
|
checkboxValues: this.inputValue, |
|
|
|
otherValues: this.otherValues |
|
|
|
}; |
|
|
|
this.onCommonHandleSaveRecord(); |
|
|
|
} |
|
|
|
|
|
|
|
this.$emit('input', value); |
|
|
|
this.$emit('change', value); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 根据输入值判断是否显示错误状态 |
|
|
|
const isEmpty = this.isValueEmpty(value); |
|
|
|
if (this.error && !isEmpty) { |
|
|
|
@ -702,6 +748,11 @@ export default { |
|
|
|
this.$emit('update:error', true); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 处理checkboxList中otherCode对应的输入框变化 |
|
|
|
onOtherInputChange(code, value) { |
|
|
|
this.otherValues[code] = value; |
|
|
|
this.onInputChange(); |
|
|
|
}, |
|
|
|
// 统一处理失去焦点事件 |
|
|
|
onBlur(e) { |
|
|
|
this.onCommonHandleSaveRecord(e.target.value); |
|
|
|
@ -735,7 +786,6 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
async onCommonHandleSaveRecord(val) { |
|
|
|
|
|
|
|
const isEmpty = this.isValueEmpty(this.inputValue); |
|
|
|
if (this.error && !isEmpty) { |
|
|
|
this.$emit('update:error', false); |
|
|
|
@ -780,7 +830,12 @@ export default { |
|
|
|
} |
|
|
|
// 值发生了变化,需要弹出密码输入框 |
|
|
|
const isSame = this.isEqual(this.oldValue, this.inputValue); |
|
|
|
if (isSame) { |
|
|
|
let isOtherValuesSame = true; |
|
|
|
// 如果是checkboxList类型,需要同时比较otherValues |
|
|
|
if (this.type === 'checkboxList' && this.otherValues) { |
|
|
|
isOtherValuesSame = this.isEqual(this.oldOtherValues, this.otherValues); |
|
|
|
} |
|
|
|
if (isSame && isOtherValuesSame) { |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!this.isValueEmpty(this.oldValue) && !isSame && this.templateFillType === "actFill") { |
|
|
|
@ -825,6 +880,11 @@ export default { |
|
|
|
} |
|
|
|
//用户输入密码并点击确定,保存修改 |
|
|
|
this.oldValue = this.inputValue; // 更新旧值 |
|
|
|
// 更新oldValue和oldOtherValues |
|
|
|
if (this.type === 'checkboxList') { |
|
|
|
this.oldValue = [...this.inputValue]; |
|
|
|
this.oldOtherValues = { ...this.otherValues }; |
|
|
|
} |
|
|
|
this.$emit("blur", this.inputValue); |
|
|
|
this.$emit('input', this.inputValue); |
|
|
|
this.$emit("change", this.inputValue, data ? "save" : ""); |
|
|
|
@ -1391,10 +1451,17 @@ export default { |
|
|
|
|
|
|
|
.checkbox-item { |
|
|
|
margin-right: 16px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
&:not(:last-child) { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
// display: inline-block; |
|
|
|
|
|
|
|
.el-input { |
|
|
|
width: 200px; |
|
|
|
margin-left: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-checkbox { |
|
|
|
|