<template>
|
<FormDialog
|
v-model="dialogVisible"
|
:title="computedTitle"
|
:operation-type="operationType"
|
width="520px"
|
@close="emit('close')"
|
@cancel="handleCancel"
|
@confirm="handleConfirm"
|
>
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="100px"
|
>
|
<el-form-item label="参数项" prop="parameterItem">
|
<el-input v-model="form.parameterItem" placeholder="请输入参数项" />
|
</el-form-item>
|
<el-form-item label="单位" prop="unit">
|
<el-input v-model="form.unit" placeholder="请输入单位" />
|
</el-form-item>
|
<el-form-item label="参数类型" prop="parameterType">
|
<el-radio-group v-model="form.parameterType">
|
<el-radio :label="0">文字</el-radio>
|
<el-radio :label="1">数字</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="标准值" prop="standardValue" v-if="form.parameterType === 0">
|
<el-input v-model="form.standardValue" placeholder="请输入标准值" />
|
</el-form-item>
|
<template v-if="form.parameterType === 1">
|
<el-form-item label="最大值" prop="maxValue">
|
<el-input-number v-model="form.maxValue" :controls="false" placeholder="请输入最大值" style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="最小值" prop="minValue">
|
<el-input-number v-model="form.minValue" :controls="false" placeholder="请输入最小值" style="width: 100%" />
|
</el-form-item>
|
</template>
|
<el-form-item label="内控值" prop="controlValue">
|
<el-input v-model="form.controlValue" placeholder="请输入内控值" />
|
</el-form-item>
|
<el-form-item label="默认值" prop="defaultValue">
|
<el-input v-model="form.defaultValue" placeholder="请输入默认值" />
|
</el-form-item>
|
</el-form>
|
</FormDialog>
|
</template>
|
|
<script setup>
|
import { computed, ref } from 'vue'
|
import FormDialog from '@/components/Dialog/FormDialog.vue'
|
|
const props = defineProps({
|
modelValue: { type: Boolean, default: false },
|
operationType: { type: String, default: 'add' }, // add | edit
|
form: { type: Object, required: true }
|
})
|
|
const emit = defineEmits(['update:modelValue', 'close', 'cancel', 'confirm'])
|
|
const dialogVisible = computed({
|
get: () => props.modelValue,
|
set: (val) => emit('update:modelValue', val)
|
})
|
|
const formRef = ref(null)
|
|
const validateMaxValue = (rule, value, callback) => {
|
if (value === undefined || value === null || value === '') {
|
callback(new Error('请输入最大值'))
|
} else if (props.form.minValue !== undefined && props.form.minValue !== null && props.form.minValue !== '' && Number(value) < Number(props.form.minValue)) {
|
callback(new Error('最大值不能小于最小值'))
|
} else {
|
if (props.form.minValue !== undefined && props.form.minValue !== null && props.form.minValue !== '') {
|
formRef.value?.clearValidate('minValue')
|
}
|
callback()
|
}
|
}
|
|
const validateMinValue = (rule, value, callback) => {
|
if (value === undefined || value === null || value === '') {
|
callback(new Error('请输入最小值'))
|
} else if (props.form.maxValue !== undefined && props.form.maxValue !== null && props.form.maxValue !== '' && Number(value) > Number(props.form.maxValue)) {
|
callback(new Error('最小值不能大于最大值'))
|
} else {
|
if (props.form.maxValue !== undefined && props.form.maxValue !== null && props.form.maxValue !== '') {
|
formRef.value?.clearValidate('maxValue')
|
}
|
callback()
|
}
|
}
|
|
const rules = computed(() => {
|
const baseRules = {
|
parameterItem: [{ required: true, message: '请输入参数项', trigger: 'blur' }],
|
unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
|
parameterType: [{ required: true, message: '请选择参数类型', trigger: 'change' }]
|
};
|
if (props.form.parameterType === 1) {
|
baseRules.maxValue = [{ required: true, validator: validateMaxValue, trigger: 'blur' }];
|
baseRules.minValue = [{ required: true, validator: validateMinValue, trigger: 'blur' }];
|
}
|
return baseRules;
|
})
|
|
const computedTitle = computed(() => (props.operationType === 'edit' ? '编辑标准参数' : '新增标准参数'))
|
|
const handleConfirm = () => {
|
formRef.value?.validate?.((valid) => {
|
if (valid) emit('confirm')
|
})
|
}
|
|
const handleCancel = () => {
|
emit('cancel')
|
dialogVisible.value = false
|
}
|
|
const resetFields = () => {
|
formRef.value?.resetFields?.()
|
}
|
|
defineExpose({ resetFields })
|
</script>
|
