jy2024-ui/src/views/business/appManage/component/addAppManage.vue

<template>
  <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="100" label-suffix=":"
      class="demo-ruleForm" :size="formSize" status-icon >
    <el-form-item label="应用名称" prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入应用名称"/>
    </el-form-item>
    <el-form-item label="应用编码" prop="code">
      <el-input v-model="ruleForm.code" placeholder="请输入应用编码"/>
    </el-form-item>
    <el-form-item label="应用地址" prop="address">
      <el-input v-model="ruleForm.address" placeholder="请输入应用地址"/>
    </el-form-item>
    <el-form-item label="端口" prop="port">
      <el-input v-model="ruleForm.port" placeholder="请输入端口"/>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="ruleForm.remark" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入备注" maxlength="300" show-word-limit/>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type {ComponentSize, FormInstance, FormRules} from 'element-plus'

interface RuleForm {
  name: string
  code: string
  address: string
  port: number
  remark: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  code: '',
  address: '',
  port: null,
  remark: '',
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    {required: true, message: '应用名称不能为空', trigger: 'change'},
    {min: 2, max: 6, message: '字符长度在 2 到 6 个字符', trigger: 'change'},
  ],
  code: {required: true, message: '应用编码不能为空', trigger: 'change',},
  address: {required: true, message: '应用地址不能为空', trigger: 'change',},
  port: {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>