jy2024-ui/src/views/model/definition/component/addDefinition.vue

<template>
  <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="110px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
      label-suffix=":"
  >
    <el-form-item label="指标名称" prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入指标名称"/>
    </el-form-item>
    <el-form-item label="指标类型" prop="type">
      <el-select v-model="ruleForm.type" placeholder="请选择">
        <el-option :label="item" :value="item" v-for="(item,index) in locationOptions" :key="index"/>
      </el-select>
    </el-form-item>
    <el-form-item label="指标编码" prop="code">
      <el-input v-model="ruleForm.code" placeholder="请输入指标编码"/>
    </el-form-item>
    <el-form-item label="指标分类" prop="index">
      <el-radio-group v-model="ruleForm.index">
        <el-radio-button label="CPU指标" value="CPU指标"/>
        <el-radio-button label="内存指标" value="内存指标"/>
        <el-radio-button label="磁盘指标" value="磁盘指标"/>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="数据获取公式">
      <el-input v-model="ruleForm.formula" type="textarea" placeholder="请输入数据获取公式"
                :autosize="{ minRows: 4, maxRows: 8 }"/>
    </el-form-item>
    <el-form-item label="告警-低">
      <el-input v-model="ruleForm.alarmLow" placeholder="请输入告警-低"/>
    </el-form-item>
    <el-form-item label="告警-中">
      <el-input v-model="ruleForm.alarmMid" placeholder="请输入告警-中"/>
    </el-form-item>
    <el-form-item label="告警-高">
      <el-input v-model="ruleForm.alarmHigh" placeholder="请输入告警-高"/>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import {reactive, ref} from 'vue'
import type {ComponentSize, FormInstance, FormRules} from 'element-plus'

interface RuleForm {
  name: string
  type: string,
  code: string,
  index: string,
  formula: string,
  alarmLow: string,
  alarmMid: string,
  alarmHigh: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  type: '',
  code: '',
  index: '',
  formula: '',
  alarmLow: '',
  alarmMid: '',
  alarmHigh: ''
})

const locationOptions = ['pinpoint', 'node_exporter', 'mysql_exporter']
const rules = reactive<FormRules<RuleForm>>({
  name: [
    {required: true, message: '指标名称不能为空', trigger: 'blur'},
    {min: 2, max: 6, message: '长度不能小于2且大于6', trigger: 'blur'},
  ],
  type: {required: true, message: '请选择指标类型', trigger: 'change'},
  code: {required: true, message: '指标编码不能为空', trigger: 'blur'},
  index: {required: true, message: '请选择指标分类', trigger: 'change'},
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>
<style scoped lang="scss">
</style>