|
|
|
@ -1,9 +1,7 @@ |
|
|
|
<script lang="ts" setup> |
|
|
|
import SelectModal from 'components/common/SelectModal/index.vue' |
|
|
|
import SoftKeyboard from 'components/common/SoftKeyboard/index.vue' |
|
|
|
import { formulaNameMap } from 'libs/constant' |
|
|
|
import { cloneDeep } from 'lodash' |
|
|
|
import { onMounted, ref, watch, watchEffect } from 'vue' |
|
|
|
import { ref, watchEffect } from 'vue' |
|
|
|
|
|
|
|
import { FtMessage } from '@/libs/message' |
|
|
|
import { compareJSON, convertValuesToInt } from '@/libs/utils' |
|
|
|
@ -13,9 +11,6 @@ const props = defineProps<{ |
|
|
|
editable: boolean |
|
|
|
}>() |
|
|
|
const formulaStore = useFormulaStore() |
|
|
|
|
|
|
|
const targetInputRef = ref<HTMLInputElement | null>(null) |
|
|
|
|
|
|
|
/** |
|
|
|
* 当前表单数据 |
|
|
|
* 不同模式下有不同的初始值： |
|
|
|
@ -28,36 +23,6 @@ const formData = ref<Record<string, any>>({ |
|
|
|
}) |
|
|
|
|
|
|
|
/** |
|
|
|
* 软键盘当前输入值 |
|
|
|
*/ |
|
|
|
const inputValue = ref<string>('') |
|
|
|
|
|
|
|
/** |
|
|
|
* 软键盘是否可见 |
|
|
|
*/ |
|
|
|
const keyboardVisible = ref(false) |
|
|
|
|
|
|
|
/** |
|
|
|
* 软键盘类型：'text' 或 'number' |
|
|
|
*/ |
|
|
|
const keyboardType = ref<'text' | 'number'>('number') |
|
|
|
|
|
|
|
/** |
|
|
|
* 软键盘组件引用 |
|
|
|
*/ |
|
|
|
const softKeyboardRef = ref() |
|
|
|
|
|
|
|
/** |
|
|
|
* 当前聚焦的输入字段名称 |
|
|
|
*/ |
|
|
|
const focusedInput = ref<string | null>(null) |
|
|
|
|
|
|
|
/** |
|
|
|
* 日志级别选项列表 |
|
|
|
*/ |
|
|
|
const options = ref(formulaStore.logLevelOptions) |
|
|
|
|
|
|
|
/** |
|
|
|
* 标签单位映射表，用于显示各参数的单位 |
|
|
|
*/ |
|
|
|
const labelUnitMap: Record<string, any> = formulaStore.labelUnitMap |
|
|
|
@ -72,50 +37,8 @@ watchEffect(() => { |
|
|
|
formData.value = cloneDeep(formulaStore.defaultFormulaInfo) |
|
|
|
formData.value = convertValuesToInt(formData.value) |
|
|
|
}) |
|
|
|
/** |
|
|
|
* 模态框是否打开 |
|
|
|
*/ |
|
|
|
const isModalOpen = ref(false) |
|
|
|
|
|
|
|
/** |
|
|
|
* 打开模态框 |
|
|
|
*/ |
|
|
|
const openModal = () => { |
|
|
|
isModalOpen.value = true |
|
|
|
} |
|
|
|
const currentFormulaItem = ref() |
|
|
|
/** |
|
|
|
* 监听软键盘输入值变化，更新表单数据 |
|
|
|
* @param {string | number} newVal - 新的输入值 |
|
|
|
*/ |
|
|
|
watch(inputValue, (newVal: string | number) => { |
|
|
|
if (focusedInput.value) { |
|
|
|
newVal = Number(newVal) |
|
|
|
if (currentFormulaItem.value && newVal > currentFormulaItem.value.val_upper_limit) { |
|
|
|
newVal = currentFormulaItem.value.val_upper_limit |
|
|
|
} |
|
|
|
formData.value[focusedInput.value] = newVal |
|
|
|
} |
|
|
|
}) |
|
|
|
/** |
|
|
|
* 监听表单数据变化，同步更新软键盘输入值 |
|
|
|
* @param {Record<string, any>} newValue - 新的表单数据 |
|
|
|
*/ |
|
|
|
watch( |
|
|
|
formData, |
|
|
|
(newValue) => { |
|
|
|
if (focusedInput.value) { |
|
|
|
inputValue.value = newValue[focusedInput.value].toString() |
|
|
|
} |
|
|
|
}, |
|
|
|
{ deep: true }, |
|
|
|
) |
|
|
|
const formRef = ref(null) |
|
|
|
// 挂载 |
|
|
|
onMounted(() => { |
|
|
|
formulaStore.getFormualDefaultData() |
|
|
|
}) |
|
|
|
/** |
|
|
|
* 处理表单提交 |
|
|
|
* 根据不同的type属性值执行不同的保存逻辑 |
|
|
|
*/ |
|
|
|
@ -133,63 +56,24 @@ const handleSubmit = () => { |
|
|
|
} |
|
|
|
formulaStore.getFormualDefaultData() |
|
|
|
} |
|
|
|
/** |
|
|
|
* 打开软键盘 |
|
|
|
* @param {Event} e - 事件对象 |
|
|
|
* @param item |
|
|
|
*/ |
|
|
|
const openKeyboard = (e: any, item: Formula.FormulaItem) => { |
|
|
|
setTimeout(() => { |
|
|
|
keyboardVisible.value = true |
|
|
|
const labelName: string = e.target.name |
|
|
|
openKeyboardType(labelName) |
|
|
|
const formValue = formData.value[labelName] |
|
|
|
inputValue.value = formValue.toString() |
|
|
|
focusedInput.value = e.target.name |
|
|
|
currentFormulaItem.value = item |
|
|
|
|
|
|
|
const inputDom = e.target as HTMLInputElement |
|
|
|
targetInputRef.value = inputDom |
|
|
|
}, 100) |
|
|
|
} |
|
|
|
/** |
|
|
|
* 确认输入值 |
|
|
|
* @param {string} value - 输入值 |
|
|
|
*/ |
|
|
|
const handleConfirm = (value: string) => { |
|
|
|
console.log('确认输入:', value) |
|
|
|
} |
|
|
|
/** |
|
|
|
* 确认日志级别选择 |
|
|
|
* @param {any} value - 选择的值 |
|
|
|
*/ |
|
|
|
const handleLogConfirm = (value: any) => { |
|
|
|
isModalOpen.value = false |
|
|
|
formData.value.loglevel = value |
|
|
|
formulaStore.updateLogLevel(value) |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 取消日志级别选择 |
|
|
|
*/ |
|
|
|
const handleLogCancel = () => { |
|
|
|
isModalOpen.value = false |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 根据标签名称确定软键盘类型 |
|
|
|
* @param {string} labelName - 标签名称 |
|
|
|
*/ |
|
|
|
const openKeyboardType = (labelName: string) => { |
|
|
|
keyboardType.value = labelName === 'name' ? 'text' : 'number' |
|
|
|
} |
|
|
|
const size = 'default' |
|
|
|
const validatePass = (rule: any, value: any, callback: any, config: Formula.FormulaConfig) => { |
|
|
|
if (!value && value !== 0 && value !== '0') { |
|
|
|
callback(new Error('此为必填项')) |
|
|
|
} |
|
|
|
else if (config.val_type === 'int' || config.val_type === 'float') { |
|
|
|
const temp = Number(value) |
|
|
|
if (temp < config.val_lower_limit || temp > config.val_upper_limit) { |
|
|
|
callback(new Error(`输入范围为${config.val_lower_limit}-${config.val_upper_limit}`)) |
|
|
|
} |
|
|
|
} |
|
|
|
callback() |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="formula-form"> |
|
|
|
<el-form |
|
|
|
ref="formRef" |
|
|
|
:disabled="!props.editable" |
|
|
|
:model="formData" |
|
|
|
label-width="auto" |
|
|
|
@ -202,6 +86,14 @@ const size = 'default' |
|
|
|
:key="item.setting_id" |
|
|
|
:label="formulaNameMap[item.setting_id]" |
|
|
|
style="width: 50%" |
|
|
|
:prop="item.setting_id" |
|
|
|
:rules="[ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
validator: (rule, value, callback) => validatePass(rule, value, callback, item), |
|
|
|
trigger: 'blur', |
|
|
|
}, |
|
|
|
]" |
|
|
|
> |
|
|
|
<template v-if="item.val_type === 'int'"> |
|
|
|
<el-input |
|
|
|
@ -212,7 +104,6 @@ const size = 'default' |
|
|
|
:name="item.setting_id" |
|
|
|
:controls="false" |
|
|
|
:disabled="!props.editable" |
|
|
|
@focus="e => openKeyboard(e, item)" |
|
|
|
> |
|
|
|
<template v-if="labelUnitMap[item.setting_id]" #append> |
|
|
|
{{ labelUnitMap[item.setting_id] }} |
|
|
|
@ -228,7 +119,6 @@ const size = 'default' |
|
|
|
:name="item.setting_id" |
|
|
|
:controls="false" |
|
|
|
:disabled="!props.editable" |
|
|
|
@focus="e => openKeyboard(e, item)" |
|
|
|
> |
|
|
|
<template v-if="labelUnitMap[item.setting_id]" #append> |
|
|
|
{{ labelUnitMap[item.setting_id] }} |
|
|
|
@ -236,19 +126,15 @@ const size = 'default' |
|
|
|
</el-input> |
|
|
|
</template> |
|
|
|
<template v-else-if="item.val_type === 'enum'"> |
|
|
|
<el-input |
|
|
|
<el-select |
|
|
|
v-model="formData[item.setting_id]" |
|
|
|
v-prevent-keyboard |
|
|
|
style="width: 80%" |
|
|
|
style="width: 80%;height:40px" |
|
|
|
placeholder="请选择" |
|
|
|
readonly |
|
|
|
:disabled="!props.editable" |
|
|
|
@focus="openModal" |
|
|
|
> |
|
|
|
<template #append> |
|
|
|
{{ labelUnitMap[item.setting_id] }} |
|
|
|
</template> |
|
|
|
</el-input> |
|
|
|
<el-option v-for="log in item.enums" :key="log" :label="log" :value="log" /> |
|
|
|
</el-select> |
|
|
|
</template> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
@ -261,26 +147,6 @@ const size = 'default' |
|
|
|
</div> |
|
|
|
</slot> |
|
|
|
</div> |
|
|
|
<Teleport to="body"> |
|
|
|
<SoftKeyboard |
|
|
|
ref="softKeyboardRef" |
|
|
|
v-model="inputValue" |
|
|
|
:is-visible="keyboardVisible" |
|
|
|
:keyboard-type="keyboardType" |
|
|
|
:target-input="targetInputRef" |
|
|
|
@confirm="handleConfirm" |
|
|
|
@update-keyboard-visible="visible => (keyboardVisible = visible)" |
|
|
|
@close="keyboardVisible = false" |
|
|
|
/> |
|
|
|
</Teleport> |
|
|
|
<SelectModal |
|
|
|
v-if="isModalOpen" |
|
|
|
:options="options" |
|
|
|
:selected-value="formData.loglevel" |
|
|
|
placeholder="请选择" |
|
|
|
@confirm="handleLogConfirm" |
|
|
|
@cancel="handleLogCancel" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
