129 lines
4.3 KiB
Vue
129 lines
4.3 KiB
Vue
<template>
|
|
<el-dialog class="cn-operate-dialog" draggable v-model="dialogVisible" :title="title" width="500px"
|
|
@closed="handleClosed">
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto" class="form-one">
|
|
<el-form-item label="方案名称" prop="name">
|
|
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入方案名称" clearable />
|
|
</el-form-item>
|
|
<el-form-item label="在线率阈值" prop="onlineRateLimit">
|
|
<el-input-number v-model="form.onlineRateLimit" :min="0" :max="100" :precision="0" style="width: 100%"
|
|
placeholder="0-100" />
|
|
</el-form-item>
|
|
<el-form-item label="完整性阈值" prop="integrityLimit">
|
|
<el-input-number v-model="form.integrityLimit" :min="0" :max="100" :precision="0" style="width: 100%"
|
|
placeholder="0-100" />
|
|
</el-form-item>
|
|
<!-- <el-form-item label="是否启用" prop="active">
|
|
<el-select v-model="form.active" placeholder="请选择" style="width: 100%">
|
|
<el-option label="启用" value="1" />
|
|
<el-option label="停用" value="0" />
|
|
</el-select>
|
|
</el-form-item> -->
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
<el-button type="primary" @click="onSubmit">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { inject } from 'vue'
|
|
import { add, update } from '@/api/cs-system-boot/appinfo'
|
|
|
|
const emit = defineEmits(['Cancels'])
|
|
|
|
const dialogVisible = ref(false)
|
|
const title = ref('')
|
|
const formRef = ref()
|
|
|
|
const defaultForm = () => ({
|
|
id: '',
|
|
name: '',
|
|
onlineRateLimit: undefined as number | undefined,
|
|
integrityLimit: undefined as number | undefined,
|
|
active: '0' as string
|
|
})
|
|
|
|
const form = reactive(defaultForm())
|
|
|
|
const percentRule = (label: string) => [
|
|
{ required: true, message: `请输入${label}`, trigger: 'blur' },
|
|
{
|
|
type: 'number',
|
|
min: 0,
|
|
max: 100,
|
|
message: `${label}范围为 0-100`,
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
|
|
const rules: any = {
|
|
name: [
|
|
{ required: true, message: '请输入方案名称', trigger: 'blur' },
|
|
{ min: 1, max: 64, message: '长度 1-64 个字符', trigger: 'blur' }
|
|
],
|
|
onlineRateLimit: percentRule('在线率阈值'),
|
|
integrityLimit: percentRule('完整性阈值'),
|
|
active: [{ required: true, message: '请选择是否启用', trigger: 'change' }]
|
|
}
|
|
|
|
const isEdit = () => title.value.includes('修改')
|
|
|
|
const resetForm = () => {
|
|
Object.assign(form, defaultForm())
|
|
}
|
|
|
|
const open = (e: { text: string; row?: any }) => {
|
|
formRef.value?.resetFields()
|
|
title.value = e.text
|
|
dialogVisible.value = true
|
|
resetForm()
|
|
if (e.row) {
|
|
form.id = e.row.id ?? ''
|
|
form.name = e.row.name ?? ''
|
|
form.onlineRateLimit = e.row.onlineRateLimit != null ? Number(e.row.onlineRateLimit) : undefined
|
|
form.integrityLimit = e.row.integrityLimit != null ? Number(e.row.integrityLimit) : undefined
|
|
form.active = String(e.row.active ?? '0')
|
|
}
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
dialogVisible.value = false
|
|
emit('Cancels')
|
|
}
|
|
|
|
const handleClosed = () => {
|
|
resetForm()
|
|
}
|
|
|
|
const onSubmit = () => {
|
|
formRef.value?.validate(async (valid: boolean) => {
|
|
if (!valid) return
|
|
const payload = {
|
|
id: form.id,
|
|
name: form.name,
|
|
onlineRateLimit: form.onlineRateLimit,
|
|
integrityLimit: form.integrityLimit,
|
|
active: form.active
|
|
}
|
|
try {
|
|
if (isEdit()) {
|
|
await update(payload)
|
|
ElMessage.success('修改成功')
|
|
} else {
|
|
await add(payload)
|
|
ElMessage.success('新增成功')
|
|
}
|
|
dialogVisible.value = false
|
|
emit('Cancels')
|
|
} catch {
|
|
/* 请求层一般会统一提示 */
|
|
}
|
|
})
|
|
}
|
|
|
|
defineExpose({ open })
|
|
</script> |