PetServiceManagementSystemUI/src/view/pet/PetEditView.vue

<template>
  <div class="pet-edit">
    <el-button text @click="router.back()">← 返回</el-button>
    <h1>编辑宠物</h1>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="form">
      <el-form-item label="宠物名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="品种" prop="breed">
        <el-input v-model="form.breed" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number v-model="form.age" :min="0" />
      </el-form-item>
      <el-form-item label="体重(kg)" prop="weight">
        <el-input-number v-model="form.weight" :min="0" :precision="1" :step="0.5" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio value="MALE">公</el-radio>
          <el-radio value="FEMALE">母</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.notes" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button @click="router.back()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getPetController } from '@/api/pet-controller'
import type { PetDto } from '@/api/models'

const router = useRouter()
const route = useRoute()

const formRef = ref<FormInstance>()

const form = reactive({
  name: '',
  breed: '',
  age: 0,
  weight: 0,
  gender: 'MALE' as 'MALE' | 'FEMALE',
  notes: ''
})

const rules: FormRules = {
  name: [{ required: true, message: '请输入宠物名', trigger: 'blur' }],
  breed: [{ required: true, message: '请输入品种', trigger: 'blur' }],
  weight: [{ type: 'number', min: 0, message: '体重必须大于 0', trigger: 'blur' }]
}

const fetchPet = async () => {
  try {
    const api = getPetController()
    const res = await api.getById(Number(route.params.id))
    if (res.code === 200 && res.data) {
      const p = res.data
      form.name = p.name ?? ''
      form.breed = p.breed ?? ''
      form.weight = p.weight ?? 0
      form.gender = (p.gender as 'MALE' | 'FEMALE') ?? 'MALE'
      form.notes = p.remark ?? ''
    }
  } catch (err: any) {
    ElMessage.error(err.message || '加载失败')
  }
}

const handleSubmit = async () => {
  const valid = await formRef.value?.validate().catch(() => false)
  if (!valid) return
  try {
    const api = getPetController()
    const dto: PetDto = {
      name: form.name,
      species: form.breed,
      breed: form.breed,
      gender: form.gender,
      weight: form.weight,
      remark: form.notes
    }
    const res = await api.update(Number(route.params.id), dto)
    if (res.code === 200) {
      ElMessage.success('保存成功')
      router.push('/pets')
    } else {
      ElMessage.error(res.message || '保存失败')
    }
  } catch (err: any) {
    ElMessage.error(err.message || '保存失败')
  }
}

onMounted(fetchPet)
</script>

<style scoped>
.pet-edit {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form {
  margin-top: 20px;
}
</style>