提交

src/views/govern/alarm/alarmConfig/form.vue

@@ -0,0 +1,129 @@
+<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 v-model.trim="form.name" maxlength="64" show-word-limit 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>