编辑弹窗页面优化

src/views/GoodsInfoManageView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { queryGoodsInfo, adminUpdateGoodsInfo, getQrCodeInfo, uploadFile } from '@/services/api'
+import { queryGoodsInfo, adminUpdateGoodsInfo, getQrCodeInfo } from '@/services/api'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import { useDateFormat } from '@vueuse/core'
@@ -12,7 +12,6 @@ import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
-import FileUpload from 'primevue/fileupload'
 import Image from 'primevue/image'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
@@ -99,7 +98,6 @@ const resetAndRefresh = () => {
 const editDialog = ref(false)
 const editForm = ref({
   qrCodeId: null,
-  photoUrl: '',
   name: '',
   contactName: '',
   contactPhone: '',
@@ -107,7 +105,6 @@ const editForm = ref({
   remark: ''
 })
 const editFormLoading = ref(false)
-const uploadedPhotoUrl = ref('')
 
 // 表单验证
 const editFormResolver = zodResolver(
@@ -124,42 +121,15 @@ const editFormResolver = zodResolver(
 const openEditDialog = async (goods) => {
   editForm.value = {
     qrCodeId: goods.qrCodeId,
-    photoUrl: goods.photoUrl || '',
     name: goods.name,
     contactName: goods.contactName,
     contactPhone: goods.contactPhone,
     contactEmail: goods.contactEmail || '',
     remark: goods.remark || ''
   }
-  uploadedPhotoUrl.value = goods.photoUrl || ''
   editDialog.value = true
 }
 
-// 照片上传
-const handlePhotoUpload = async (event) => {
-  const file = event.files[0]
-  if (!file) return
-
-  try {
-    const response = await uploadFile(file)
-    uploadedPhotoUrl.value = response.url
-    editForm.value.photoUrl = response.url
-    toast.add({
-      severity: 'success',
-      summary: '成功',
-      detail: '照片上传成功',
-      life: 3000
-    })
-  } catch (error) {
-    toast.add({
-      severity: 'error',
-      summary: '错误',
-      detail: error.message || '照片上传失败',
-      life: 3000
-    })
-  }
-}
-
 // 保存编辑
 const saveEdit = async ({ valid, values }) => {
   if (!valid) return
@@ -168,7 +138,6 @@ const saveEdit = async ({ valid, values }) => {
   try {
     const submitData = {
       qrCodeId: editForm.value.qrCodeId,
-      photoUrl: uploadedPhotoUrl.value || editForm.value.photoUrl || '',
       name: values.name,
       contactName: values.contactName,
       contactPhone: values.contactPhone,
@@ -331,9 +300,10 @@ onMounted(() => {
           {{ formatDate(slotProps.data.updatedAt) }}
         </template>
       </Column>
-      <Column header="操作" style="min-width: 150px" frozen alignFrozen="right">
+      <Column header="操作" style="min-width: 150px" frozen alignFrozen="right"
+        :pt="{ columnHeaderContent: { class: 'justify-center' } }">
         <template #body="slotProps">
-          <div class="flex gap-1">
+          <div class="flex gap-1 justify-center">
             <Button icon="pi pi-eye" severity="info" size="small" text rounded v-tooltip.top="'查看详情'"
               @click="viewDetail(slotProps.data)" />
             <Button icon="pi pi-pencil" severity="warn" size="small" text rounded v-tooltip.top="'编辑'"
@@ -345,17 +315,8 @@ onMounted(() => {
 
     <!-- 编辑对话框 -->
     <Dialog v-model:visible="editDialog" :modal="true" header="编辑物品信息" :style="{ width: '550px' }" position="center">
-      <Form v-slot="$form" :resolver="editFormResolver" :initialValues="editForm" @submit="saveEdit" class="p-fluid">
-        <!-- 照片上传 -->
-        <div class="field mb-4">
-          <label class="block mb-2">物品照片</label>
-          <div class="flex gap-4 items-start">
-            <Image v-if="uploadedPhotoUrl" :src="uploadedPhotoUrl" alt="照片预览" width="120" preview />
-            <FileUpload mode="basic" accept="image/*" :maxFileSize="5000000" chooseLabel="上传照片"
-              @select="handlePhotoUpload" :auto="true" />
-          </div>
-        </div>
-
+      <Form v-slot="$form" :resolver="editFormResolver" :initialValues="editForm" @submit="saveEdit"
+        class="p-fluid mt-4">
         <div class="field">
           <FloatLabel variant="on">
             <InputText id="name" name="name" v-model="editForm.name" fluid />

src/views/PersonInfoManageView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { queryPersonInfo, adminUpdatePersonInfo, getQrCodeInfo, uploadFile } from '@/services/api'
+import { queryPersonInfo, adminUpdatePersonInfo, getQrCodeInfo } from '@/services/api'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import { useDateFormat } from '@vueuse/core'
@@ -13,7 +13,6 @@ import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
-import FileUpload from 'primevue/fileupload'
 import Image from 'primevue/image'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
@@ -121,18 +120,15 @@ const resetAndRefresh = () => {
 const editDialog = ref(false)
 const editForm = ref({
   qrCodeId: null,
-  photoUrl: '',
   name: '',
   gender: 'male',
   phone: '',
-  specialNote: '',
   emergencyContactName: '',
   emergencyContactPhone: '',
   emergencyContactEmail: '',
   remark: ''
 })
 const editFormLoading = ref(false)
-const uploadedPhotoUrl = ref('')
 
 // 表单验证
 const editFormResolver = zodResolver(
@@ -151,45 +147,17 @@ const editFormResolver = zodResolver(
 const openEditDialog = async (person) => {
   editForm.value = {
     qrCodeId: person.qrCodeId,
-    photoUrl: person.photoUrl || '',
     name: person.name,
     gender: person.gender,
     phone: person.phone,
-    specialNote: person.specialNote || '',
     emergencyContactName: person.emergencyContactName,
     emergencyContactPhone: person.emergencyContactPhone,
     emergencyContactEmail: person.emergencyContactEmail || '',
     remark: person.remark || ''
   }
-  uploadedPhotoUrl.value = person.photoUrl || ''
   editDialog.value = true
 }
 
-// 照片上传
-const handlePhotoUpload = async (event) => {
-  const file = event.files[0]
-  if (!file) return
-
-  try {
-    const response = await uploadFile(file)
-    uploadedPhotoUrl.value = response.url
-    editForm.value.photoUrl = response.url
-    toast.add({
-      severity: 'success',
-      summary: '成功',
-      detail: '照片上传成功',
-      life: 3000
-    })
-  } catch (error) {
-    toast.add({
-      severity: 'error',
-      summary: '错误',
-      detail: error.message || '照片上传失败',
-      life: 3000
-    })
-  }
-}
-
 // 保存编辑
 const saveEdit = async ({ valid, values }) => {
   if (!valid) return
@@ -198,11 +166,9 @@ const saveEdit = async ({ valid, values }) => {
   try {
     const submitData = {
       qrCodeId: editForm.value.qrCodeId,
-      photoUrl: uploadedPhotoUrl.value || editForm.value.photoUrl || '',
       name: values.name,
       gender: values.gender,
       phone: values.phone,
-      specialNote: values.specialNote || '',
       emergencyContactName: values.emergencyContactName,
       emergencyContactPhone: values.emergencyContactPhone,
       emergencyContactEmail: values.emergencyContactEmail || '',
@@ -358,9 +324,13 @@ onMounted(() => {
           </a>
         </template>
       </Column>
-      <Column field="specialNote" header="特别说明" style="min-width: 200px">
+      <Column field="emergencyContactEmail" header="紧急联系人邮箱" style="min-width: 200px">
         <template #body="slotProps">
-          <span class="whitespace-pre-line break-words">{{ slotProps.data.specialNote || '-' }}</span>
+          <a v-if="slotProps.data.emergencyContactEmail" :href="`mailto:${slotProps.data.emergencyContactEmail}`"
+            class="text-blue-600 hover:underline">
+            {{ slotProps.data.emergencyContactEmail }}
+          </a>
+          <span v-else class="text-gray-400">-</span>
         </template>
       </Column>
       <Column field="remark" header="备注" style="min-width: 200px">
@@ -378,9 +348,10 @@ onMounted(() => {
           {{ formatDate(slotProps.data.updatedAt) }}
         </template>
       </Column>
-      <Column header="操作" style="min-width: 150px" frozen alignFrozen="right">
+      <Column header="操作" style="min-width: 150px" frozen alignFrozen="right"
+        :pt="{ columnHeaderContent: { class: 'justify-center' } }">
         <template #body="slotProps">
-          <div class="flex gap-1">
+          <div class="flex gap-1 justify-center">
             <Button icon="pi pi-eye" severity="info" size="small" text rounded v-tooltip.top="'查看详情'"
               @click="viewDetail(slotProps.data)" />
             <Button icon="pi pi-pencil" severity="warn" size="small" text rounded v-tooltip.top="'编辑'"
@@ -392,17 +363,8 @@ onMounted(() => {
 
     <!-- 编辑对话框 -->
     <Dialog v-model:visible="editDialog" :modal="true" header="编辑人员信息" :style="{ width: '650px' }" position="center">
-      <Form v-slot="$form" :resolver="editFormResolver" :initialValues="editForm" @submit="saveEdit" class="p-fluid">
-        <!-- 照片上传 -->
-        <div class="field mb-4">
-          <label class="block mb-2">照片</label>
-          <div class="flex gap-4 items-start">
-            <Image v-if="uploadedPhotoUrl" :src="uploadedPhotoUrl" alt="照片预览" width="120" preview />
-            <FileUpload mode="basic" accept="image/*" :maxFileSize="5000000" chooseLabel="上传照片"
-              @select="handlePhotoUpload" :auto="true" />
-          </div>
-        </div>
-
+      <Form v-slot="$form" :resolver="editFormResolver" :initialValues="editForm" @submit="saveEdit"
+        class="p-fluid mt-4">
         <div class="grid grid-cols-2 gap-4">
           <div class="field">
             <FloatLabel variant="on">
@@ -439,13 +401,6 @@ onMounted(() => {
           </Message>
         </div>
 
-        <div class="field mt-4">
-          <FloatLabel variant="on">
-            <Textarea id="specialNote" name="specialNote" v-model="editForm.specialNote" rows="3" fluid />
-            <label for="specialNote">特别说明（如血型、过敏史等）</label>
-          </FloatLabel>
-        </div>
-
         <div class="field mt-4">
           <FloatLabel variant="on">
             <Textarea id="remark" name="remark" v-model="editForm.remark" rows="3" autoResize fluid />
@@ -550,10 +505,6 @@ onMounted(() => {
                 <span v-else>-</span>
               </div>
             </div>
-            <div v-if="selectedPerson.specialNote" class="col-span-2">
-              <div class="text-sm text-gray-500">特别说明</div>
-              <div class="whitespace-pre-wrap">{{ selectedPerson.specialNote }}</div>
-            </div>
             <div v-if="resolveRemark(selectedPerson)" class="col-span-2">
               <div class="text-sm text-gray-500">备注</div>
               <div class="whitespace-pre-wrap">{{ resolveRemark(selectedPerson) }}</div>

src/views/PetInfoManageView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { queryPetInfo, adminUpdatePetInfo, uploadFile, getQrCodeInfo } from '@/services/api'
+import { queryPetInfo, adminUpdatePetInfo, getQrCodeInfo } from '@/services/api'
 import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import { useDateFormat } from '@vueuse/core'
@@ -12,7 +12,6 @@ import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
 import Textarea from 'primevue/textarea'
-import FileUpload from 'primevue/fileupload'
 import Image from 'primevue/image'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
@@ -96,7 +95,6 @@ const resetAndRefresh = () => {
 const editDialog = ref(false)
 const editForm = ref({
   qrCodeId: null,
-  photoUrl: '',
   name: '',
   contactName: '',
   contactPhone: '',
@@ -104,7 +102,6 @@ const editForm = ref({
   remark: ''
 })
 const editFormLoading = ref(false)
-const uploadedPhotoUrl = ref('')
 
 // 表单验证
 const editFormResolver = zodResolver(
@@ -125,42 +122,15 @@ const editFormResolver = zodResolver(
 const openEditDialog = async (pet) => {
   editForm.value = {
     qrCodeId: pet.qrCodeId,
-    photoUrl: pet.photoUrl || '',
     name: pet.name || '',
     contactName: pet.contactName || '',
     contactPhone: pet.contactPhone || '',
     contactEmail: pet.contactEmail || '',
     remark: pet.remark || ''
   }
-  uploadedPhotoUrl.value = pet.photoUrl || ''
   editDialog.value = true
 }
 
-// 照片上传
-const handlePhotoUpload = async (event) => {
-  const file = event.files[0]
-  if (!file) return
-
-  try {
-    const response = await uploadFile(file)
-    uploadedPhotoUrl.value = response.url
-    editForm.value.photoUrl = response.url
-    toast.add({
-      severity: 'success',
-      summary: '成功',
-      detail: '照片上传成功',
-      life: 3000
-    })
-  } catch (error) {
-    toast.add({
-      severity: 'error',
-      summary: '错误',
-      detail: error.message || '照片上传失败',
-      life: 3000
-    })
-  }
-}
-
 // 保存编辑
 const saveEdit = async ({ valid, values }) => {
   if (!valid) return
@@ -169,7 +139,6 @@ const saveEdit = async ({ valid, values }) => {
   try {
     const submitData = {
       qrCodeId: editForm.value.qrCodeId,
-      photoUrl: uploadedPhotoUrl.value || editForm.value.photoUrl || '',
       name: values.name,
       contactName: values.contactName,
       contactPhone: values.contactPhone,
@@ -327,9 +296,10 @@ onMounted(() => {
           {{ formatDate(slotProps.data.updatedAt) }}
         </template>
       </Column>
-      <Column header="操作" style="min-width: 150px" frozen alignFrozen="right">
+      <Column header="操作" style="min-width: 150px" frozen alignFrozen="right"
+        :pt="{ columnHeaderContent: { class: 'justify-center' } }">
         <template #body="slotProps">
-          <div class="flex gap-1">
+          <div class="flex gap-1 justify-center">
             <Button icon="pi pi-eye" severity="info" size="small" text rounded v-tooltip.top="'查看详情'"
               @click="viewDetail(slotProps.data)" />
             <Button icon="pi pi-pencil" severity="warn" size="small" text rounded v-tooltip.top="'编辑'"
@@ -341,18 +311,9 @@ onMounted(() => {
 
     <!-- 编辑对话框 -->
     <Dialog v-model:visible="editDialog" :modal="true" header="编辑宠物/物品信息" :style="{ width: '550px' }" position="center">
-      <Form v-slot="$form" :resolver="editFormResolver" :initialValues="editForm" @submit="saveEdit" class="p-fluid">
-        <!-- 照片上传 -->
-        <div class="field mb-4">
-          <label class="block mb-2">照片</label>
-          <div class="flex gap-4 items-start">
-            <Image v-if="uploadedPhotoUrl" :src="uploadedPhotoUrl" alt="照片预览" width="120" preview />
-            <FileUpload mode="basic" accept="image/*" :maxFileSize="5000000" chooseLabel="上传照片"
-              @select="handlePhotoUpload" :auto="true" />
-          </div>
-        </div>
-
-        <div class="field">
+      <Form v-slot="$form" :resolver="editFormResolver" :initialValues="editForm" @submit="saveEdit"
+        class="p-fluid mt-4">
+        <div class="field mt-4">
           <FloatLabel variant="on">
             <InputText id="name" name="name" v-model="editForm.name" fluid />
             <label for="name">名称 *</label>