Merge branch 'develop' of https://github.com/shiguangbiyi/DataBase_Pr…

…ogram_Pet-Rescue-Station into develop
TongjiPetWelfareProject · Sep 6, 2023 · e8f439f · e8f439f
2 parents 9c20dae + d437422
commit e8f439f
Show file tree

Hide file tree

Showing 12 changed files with 167 additions and 204 deletions.
diff --git a/src/components/用户界面/first_page.vue b/src/components/用户界面/first_page.vue
@@ -413,7 +413,7 @@ const images = [
 }
 
 .image {
-  width: auto;
+  width: 200px;
   height: 200px;
   display: block;
   margin-left: auto;

diff --git a/src/components/用户界面/pet_details.vue b/src/components/用户界面/pet_details.vue
@@ -403,14 +403,11 @@ const sortedComments = computed(() => {
 }
 .pet-image {
   flex: 1;
-  display: flex;
-  justify-content: center; /* 水平居中 */
-  align-items: center; /* 垂直居中 */
   padding: 10px;
 }
 .pet-image img {
-  width: auto;
-  height: 300px;
+  width: 100%;
+  height: auto;
   border-radius: 8px;
 }
 .pet-info {

diff --git a/src/components/管理员界面/mytabledoctor.vue b/src/components/管理员界面/mytabledoctor.vue
@@ -9,7 +9,7 @@
       <el-table-column prop="name" label="医生姓名" :width="240" align="center"/>
       <el-table-column prop="phone" label="电话" :width="240" align="center"/>
       <el-table-column prop="workingHours" label="工作时间" :width="200" align="center"/>
-      <!-- <el-table-column prop="salary" label="工资"  /> -->
+      <el-table-column prop="salary" label="工资"  /> 
       <el-table-column label="操作" align="center">
         <template #default="scope">
           <el-button plain type="primary" size="small" @click.prevent="editRow(scope.$index)">
@@ -121,16 +121,6 @@ const newDoctor = ref<Doctor>({
   salary: '',
 });
 
-
-const tableData2=ref([])
-const doctorNameFilter = ref('');
-function filterHandler(value){
-    tableData.value = tableData2.value.filter(item => {
-      const doctornameMatch = item.name.toLowerCase().includes(doctorNameFilter.value.toLowerCase());
-    return doctornameMatch;
-  });
-};
-
 const handleeditPhoneInput = () => {
   // 获取输入框的值并移除所有非数字字符
   const digitsOnly = editedDoctor.value.phone.replace(/\D/g, "");

diff --git a/src/components/管理员界面/mytableemployee.vue b/src/components/管理员界面/mytableemployee.vue
@@ -10,7 +10,7 @@
             <el-table-column prop="phone" label="电话"  align="center"/>
             <el-table-column prop="responsibility" label="职责"  :width="260" align="center"/>
             <el-table-column prop="workingHours" label="工作时间" :width="100" align="center"/>
-            <!-- <el-table-column prop="salary" label="工资" width="120" /> -->
+            <el-table-column prop="salary" label="工资" width="120" />
             <el-table-column label="操作" width="360" align="center">
                 <template #default="scope">
                     <el-button plain type="primary" size="small" @click.prevent="editRow(scope.$index)">

diff --git a/src/components/管理员界面/mytableuser.vue b/src/components/管理员界面/mytableuser.vue
@@ -1,15 +1,6 @@
 <template>
-    <div style="display: flex;align-items: center;margin-bottom: 20px;">
-    <span style="font-size:14px;font-weight:bold;color: rgb(123, 123, 123);">姓名 &nbsp;&nbsp;</span><el-input v-model="userNameFilter" @input="filterHandler" placeholder="搜索用户姓名" style="display: flex;align-items: center;text-align: center;width:180px;box-shadow: 0 0px 1px rgba(66, 66, 66, 0.2);;"></el-input>
-    <span style="font-size:14px;margin-left:25px;font-weight:bold;color: rgb(123, 123, 123);">状态 &nbsp;&nbsp;</span>
-    <el-select @change="filterHandler" style="width:180px;display: flex;align-items: center;text-align: center;" v-model="userStatusFilter" clearable placeholder="选择用户状态">
-      <el-option label="良好" value="良好"></el-option>
-      <el-option label="审核中" value="审核中"></el-option>  
-      <el-option label="已封禁" value="已封禁"></el-option>  
-  </el-select>
-</div>
  <el-table :data="tableData" style="width: 100%;box-shadow: 0 0px 4px rgba(66, 66, 66, 0.2);border-radius: 10px;"
-        max-height="530"  >
+        max-height="580"  >
  <el-table-column label="用户ID" prop="id"  align="center"></el-table-column>
  <el-table-column label="用户名" prop="username" align="center"></el-table-column>
    <el-table-column label="电话" prop="phone"  align="center"></el-table-column>

diff --git a/src/components/管理员界面/petcard.vue b/src/components/管理员界面/petcard.vue
@@ -1,27 +1,7 @@
 <template>
-  <div style="display: flex;align-items: center;margin-bottom: 20px;">
-    <span style="font-size:14px;font-weight:bold;color: rgb(123, 123, 123);">姓名 &nbsp;&nbsp;</span><el-input v-model="petNameFilter" @input="filterHandler" placeholder="搜索宠物姓名" style="display: flex;align-items: center;text-align: center;width:180px;box-shadow: 0 0px 1px rgba(66, 66, 66, 0.2);;"></el-input>
-    <span style="font-size:14px;margin-left:25px;font-weight:bold;color: rgb(123, 123, 123);">品种 &nbsp;&nbsp;</span>
-    <el-select @change="filterHandler" style="width:180px;display: flex;align-items: center;text-align: center;" v-model="petKindFilter" clearable placeholder="选择宠物种类">
-      <el-option label="猫" value="猫"></el-option>
-      <el-option label="狗" value="狗"></el-option>  
-  </el-select>
-  <span style="font-size:14px;margin-left:25px;font-weight:bold;color: rgb(123, 123, 123);">健康状况 &nbsp;&nbsp;</span>
-    <el-select @change="filterHandler" style="width:180px;display: flex;align-items: center;text-align: center;" v-model="petHealthFilter" clearable placeholder="选择健康状况">
-      <el-option label="充满活力" value="充满活力"></el-option>  
-      <el-option label="健康" value="健康"></el-option>
-      <el-option label="不健康" value="不健康"></el-option>  
-  </el-select>
-  <span style="font-size:15px;margin-left:25px;font-weight:bold;color: rgb(123, 123, 123);">接种情况 &nbsp;&nbsp;</span>
-    <el-select @change="filterHandler" style="width:180px;display: flex;align-items: center;text-align: center;" v-model="petVaccineFilter" clearable placeholder="选择接种情况">
-      <el-option label="已接种" value="已接种"></el-option>  
-      <el-option label="未接种" value="未接种"></el-option>
-  </el-select>
-</div>
-    <el-table :data="tableData" style="width: 100%;box-shadow: 0 0px 4px rgba(66, 66, 66, 0.2);border-radius: 10px;" max-height="520">
+    <el-table :data="tableData" style="width: 100%;box-shadow: 0 0px 4px rgba(66, 66, 66, 0.2);border-radius: 10px;" max-height="550">
       <el-table-column label="宠物ID" prop="id"  align="center"></el-table-column>
-      <el-table-column label="宠物名" prop="petname" align="center">
-      </el-table-column>
+      <el-table-column label="宠物名" prop="petname" align="center"></el-table-column>
       <el-table-column label="种类" prop="breed"  align="center"></el-table-column>
       <el-table-column label="年龄" prop="age"  align="center"></el-table-column>
       <el-table-column label="性别" prop="sex"  align="center"></el-table-column>
@@ -149,113 +129,114 @@
 }
 </style>
 
-<script  setup>
-import { ref, onMounted, computed } from 'vue';
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { Delete, Plus } from '@element-plus/icons-vue';
-import petcard from '@/api/cw_yh_yl_jk';
+import { Delete, Plus } from '@element-plus/icons-vue'
+import petcard from '@/api/cw_yh_yl_jk'
+
+
+interface Pet {
+  id: string;
+  petname: string;
+  breed: string;
+  age: int;
+  sex: string;
+  size: string;
+  popularity: string;
+  health: string;
+  vaccine: string;
+  from: string;
+}
 
-const fileList = ref([]);
+//以下部分和传图有关
+const fileList = ref([])
 const limitNum = 1;
 const hideUpload = ref(false);
 
 function httpRequest(option) {
     fileList.value.push(option);
 }
 
-function handleEditChange(file, fileList) {
-    hideUpload.value = fileList.length >= 1;
+function handleEditChange(file,fileList){
+  hideUpload.value = fileList.length >= 1;
 }
 
-function handleRemove(file, fileList) {
-    hideUpload.value = fileList.length >= 1;
+function handleRemove(file,fileList){
+  hideUpload.value = fileList.length >= 1;
 }
 
-const tableData = ref([]);
-const tableData2= ref([]);
+const tableData = ref<Pet[]>([]);
 const editDialogVisible = ref(false);
 const addDialogVisible = ref(false);
 
-const petNameFilter = ref('');
-const petKindFilter = ref('');
-const petHealthFilter = ref('');
-const petVaccineFilter = ref('');
-function filterHandler(value){
-    tableData.value = tableData2.value.filter(item => {
-    const petnameMatch = item.petname.toLowerCase().includes(petNameFilter.value.toLowerCase());
-    const kindMatch = item.breed === petKindFilter.value || !petKindFilter.value;
-    const healthMatch=item.health===petHealthFilter.value||!petHealthFilter.value
-    const vaccineMatch=item.vaccine===petVaccineFilter.value||!petVaccineFilter.value
-    return petnameMatch && kindMatch&&healthMatch&&vaccineMatch;
-  });
-};
 
-const editDialogInvisible = async () => {
-    editDialogVisible.value = false;
-    console.log("输出图片列表1");
-    console.log(fileList.value);
-    location.reload(); 
+const editDialogInvisible = async() => {
+  editDialogVisible.value = false;//和接口的连接在dialog里
+  console.log("输出图片列表1");
+  console.log(fileList.value);
+  location.reload(); // 这里会刷新整个页面
+
 };
 
-const addDialogInvisible = async () => {
-    addDialogVisible.value = false;
-    location.reload();
+const addDialogInvisible = async() => {
+  addDialogVisible.value = false;//和接口的连接在dialog里
+  location.reload(); // 这里会刷新整个页面
 };
 
-const editedPet = ref({
-    id: '',
-    petname: '',
-    health: '',
-    vaccine: '',
-    image: '',
+const editedPet = ref<Pet>({
+  id: '',
+  petname: '',
+  health: '',
+  vaccine: '',
+  image:'',
 });
 
-const newPet = ref({
-    petname: '',
-    breed: '猫',
-    age: 0,
-    sex: '公',
-    size: '小型',
-    health: '充满活力',
-    vaccine: '未接种',
+const newPet = ref<Pet>({
+  petname: '',
+  breed: '猫',
+  age: 0,
+  sex: '公',
+  size: '小型',
+  health: '充满活力',
+  vaccine: '未接种',
 });
 
 const getPetList = async () => {
-    try {
-        const response = await petcard.getPetList();
-        console.log(response);
-        const uniquePets = {};
-        for (const adoptpet of response) {
-            if (!uniquePets[adoptpet.PET_ID]) {
-                uniquePets[adoptpet.PET_ID] = true;
-                console.log(adoptpet.PET_NAME);
-                tableData.value.push({
-                    id: adoptpet.PET_ID,
-                    petname: adoptpet.PET_NAME,
-                    breed: adoptpet.SPECIES,
-                    age: adoptpet.AGE,
-                    sex: adoptpet.SEX,
-                    size: adoptpet.PSIZE,
-                    popularity: adoptpet.POPULARITY,
-                    health: adoptpet.HEALTH_STATE,
-                    vaccine: adoptpet.VACCINE,
-                    from: adoptpet.SOURCE,
-                    avatar: adoptpet.AVATAR,
-                });
-            }
-        }
-        tableData2.value=tableData.value
-    } catch (error) {
-        console.error('获取所有宠物数据时出错：', error);
+  try {
+    const response = await petcard.getPetList();
+    console.log(response);
+    const uniquePets = {};
+    for (const adoptpet of response) {
+      if (!uniquePets[adoptpet.PET_ID]) { // 检查是否已经遍历过该 pet_id
+        uniquePets[adoptpet.PET_ID] = true;
+      console.log(adoptpet.PET_NAME)
+      tableData.value.push({
+        id: adoptpet.PET_ID,
+        petname: adoptpet.PET_NAME,
+        breed: adoptpet.SPECIES,
+        age: adoptpet.AGE,
+        sex: adoptpet.SEX,
+        size: adoptpet.PSIZE,
+        popularity: adoptpet.POPULARITY,
+        health: adoptpet.HEALTH_STATE,
+        vaccine: adoptpet.VACCINE,
+        from:adoptpet.SOURCE,
+        avatar:adoptpet.AVATAR,
+      });
     }
+  }
+  } catch (error) {
+    console.error('获取所有宠物数据时出错：', error);
+  }
 };
 
 onMounted(() => {
-    getPetList();
+  getPetList();
 });
 
 const addRow = () => {
-    addDialogVisible.value = true;
+  addDialogVisible.value = true;//和接口的连接在dialog里
 };
 
 const editRow = (index) => {
@@ -269,21 +250,21 @@ const editRow = (index) => {
   editDialogVisible.value = true;//和接口的连接在dialog里
 };
 
-const deleteRow = async (index) => {
-    try {
-        await petcard.deletePet(tableData.value[index].id);
-        location.reload();
+const deleteRow = async (index: number) => {
+  try {
+      await petcard.deletePet(tableData.value[index].id);
+      location.reload(); // 这里会刷新整个页面
     } catch (error) {
-        console.error('删除数据失败：', error);
+      console.error('删除数据失败：', error);
     }
 };
 
-const submitNewPet = async () => {
-    try {
-        await petcard.addPet(newPet.value);
-        location.reload();
+const submitNewPet = async() => {
+  try {
+      await petcard.addPet(newPet.value);//注意：需保证id不能被修改
+      location.reload(); // 这里会刷新整个页面
     } catch (error) {
-        console.error('添加数据失败：', error);
+      console.error('添加数据失败：', error);
     }
 };
 
@@ -306,8 +287,9 @@ const submitEditedPet = async () => {
         await petcard.editPet(param);
         location.reload();
     } catch (error) {
-        console.error('编辑数据失败：', error);
+      console.error('编辑数据失败：', error);
     }
   }
 };
+
 </script>
diff --git a/src/components/管理员界面/tableadopt.vue b/src/components/管理员界面/tableadopt.vue
@@ -1,18 +1,13 @@
 <template>
   <div>
-    <div style="display:flex;align-items: center;margin-bottom: 20px;">
-      <span style="font-size:14px;font-weight:bold;color: rgb(123, 123, 123);">姓名 &nbsp;&nbsp;</span><el-input v-model="petNameFilter" @input="filterHandler" placeholder="搜索宠物姓名" style="margin-right:40px;width:200px;px;box-shadow: 0 0px 1px rgba(66, 66, 66, 0.2);;"></el-input>
     <el-button-group>
       <el-button @click="filterTag('全部')">全部</el-button>
       <el-button @click="filterTag('to be censored')">未审核</el-button>
       <el-button @click="filterTag('aborted')">审核失败</el-button>
       <el-button @click="filterTag('legitimate')">审核成功</el-button>
     </el-button-group>
-
-  </div>
-
     <el-table :data="filteredData" :default-sort="{ prop: 'date', order: 'descending' }" style="width: 100%;border-radius:10px;box-shadow: 0 0px 4px rgba(66, 66, 66, 0.2);"
-    max-height="530">
+    max-height="550">
       <el-table-column prop="date" label="时间" :width="180" align="center" sortable>
       </el-table-column>
       <el-table-column prop="petName" label="宠物名" :width="100" align="center" >
@@ -115,21 +110,12 @@ const filterTag = (tag: string) => {
   selectedTag.value = tag
 }
 
-const tableData2= ref([]);
-const petNameFilter = ref('');
-function filterHandler(value){
-    petNameFilter.value = value;
-    tableData.value = tableData2.value.filter(item => {
-        return item.petName.toLowerCase().includes(petNameFilter.value.toLowerCase());
-    });
-};
 const fetchData = async () => {
   try {
     // const response = await axios.get('/api/manage-adopt');
     // tableData.value = response.data; // 假设API返回一个符合AdoptionRecord结构的对象数组
     tableData.value = await fetchAdoptionRecords();
     console.log(tableData);
-    tableData2.value=tableData.value;
   } catch (error) {
     console.error('获取数据时出错：', error);
   }