1、修复病历数据显示问题 2、实现登录页面美化

src/api/medical.js

@@ -4,32 +4,62 @@ const BASE_URL = '/api/medical-records';
 
 export const medicalApi = {
   // 创建病历
-  createRecord(record) {
-    return axiosInstance.post(BASE_URL, record)
+  async createRecord(record) {
+    try {
+      const response = await axiosInstance.post(BASE_URL, record);
+      return response.data; // 返回响应数据
+    } catch (error) {
+      console.error('创建病历失败:', error);
+      throw new Error(error.response?.data?.message || '创建病历失败'); // 抛出错误
+    }
   },
 
   // 获取所有病历
-  getAllRecords(patientName = '') {
-
-    return axiosInstance.get(BASE_URL, {
-      params: {
-        patientName
-      }
-    })
+  async getAllRecords(patientName = '') {
+    try {
+      const response = await axiosInstance.get(BASE_URL, {
+        params: {
+          patientName
+        }
+      });
+      console.log('111获取所有病历的响应:', response); // 打印响应
+      console.log('222获取所有病历的响应:', response.data); // 打印响应
+      return response ; // 返回响应数据
+    } catch (error) {
+      console.error('获取病历失败:', error);
+      throw new Error(error.response?.data?.message || '获取病历失败'); // 抛出错误
+    }
   },
 
   // 获取单个病历
-  getRecord(id) {
-    return axiosInstance.get(`${BASE_URL}/${id}`)
+  async getRecord(id) {
+    try {
+      const response = await axiosInstance.get(`${BASE_URL}/${id}`);
+      return response.data; // 返回响应数据
+    } catch (error) {
+      console.error('获取病历失败:', error);
+      throw new Error(error.response?.data?.message || '获取病历失败'); // 抛出错误
+    }
   },
 
   // 更新病历
-  updateRecord(id, record) {
-    return axiosInstance.put(`${BASE_URL}/${id}`, record)
+  async updateRecord(id, record) {
+    try {
+      const response = await axiosInstance.put(`${BASE_URL}/${id}`, record);
+      return response.data; // 返回响应数据
+    } catch (error) {
+      console.error('更新病历失败:', error);
+      throw new Error(error.response?.data?.message || '更新病历失败'); // 抛出错误
+    }
   },
 
   // 删除病历
-  deleteRecord(id) {
-    return axiosInstance.delete(`${BASE_URL}/${id}`)
+  async deleteRecord(id) {
+    try {
+      await axiosInstance.delete(`${BASE_URL}/${id}`);
+    } catch (error) {
+      console.error('删除病历失败:', error);
+      throw new Error(error.response?.data?.message || '删除病历失败'); // 抛出错误
+    }
   }
 }

src/views/login/Index.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="login-container">
     <div class="login-panel">
-      <h1>用户登录</h1>
-      <div>
-        <input v-model="user.username" type="text" placeholder="用户账号" />
-      </div>
-      <div>
-        <input v-model="user.pwd" type="password" placeholder="用户密码" />
+      <h1>医院管理系统</h1>
+      <div class="login-box">
+        <div class="login-field">
+          <input v-model="user.username" type="text" required />
+          <label>用户账号</label>
+        </div>
+        <div class="login-field">
+          <input v-model="user.pwd" type="password" required />
+          <label>用户密码</label>
+        </div>
       </div>
       <div>
         <span @click="login" class="login-btn">立即登录</span>
       </div>
       <div style="margin-top: 15px;">
-        没有账号？<span @click="register" class="to-register">去注册</span>
       </div>
     </div>
   </div>
@@ -29,10 +32,8 @@ export default {
   setup() {
     // 定义用户信息的响应式引用
     const user = ref({
-      data: '',
-      code: 0,
-      message: '',
-      permission: ''
+      username: '',
+      pwd: ''
     });
     const router = useRouter();
 
@@ -46,15 +47,12 @@ export default {
     const login = async () => {
       try {
         const response = await axios.post('http://localhost:8080/user/login', user.value);
-        console.log(response);
-        const {data} = response;
+        const { data } = response;
         if (data.code === 200) {
           alert('用户登录成功');
-          console.log(data.data);
           const token = data.data;
           const username = data.username;
           const permission = data.permission;
-          console.log(token, username);
           sessionStorage.setItem('token', token);
           sessionStorage.setItem('username', username);
           sessionStorage.setItem('permission', permission);
@@ -64,28 +62,86 @@ export default {
         }
       } catch (error) {
         console.error('登录请求出错了:', error);
-        alert('登录请求失败，请稍后再试');
+        alert('登录请失败，请稍后再试');
       }
     };
 
     return {
       user,
-      login
+      login,
+      register
     };
   }
 };
 </script>
 
 <style scoped lang="scss">
+*{
+  margin: 0;
+  padding: 0;
+}
 .login-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: calc(100vh - 17px);
+  background-image: url('@/assets/R-C.png');
+  background-size: cover;
+  background-position: center;
 
   .login-panel {
-    width: 300px;
-    height: 300px;
+    width: 400px;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    text-align: center;
+
+    h1 {
+      margin-bottom: 20px;
+      color: #333;
+    }
+
+    .login-box {
+      .login-field {
+        position: relative;
+        margin-bottom: 30px;
+
+        input {
+          width: 100%;
+          padding: 10px 0;
+          font-size: 16px;
+          color: #333;
+          border: none;
+          border-bottom: 1px solid #333;
+          outline: none;
+          background: transparent;
+
+          &:focus {
+            border-bottom: 1px solid aqua;
+          }
+
+          &:valid ~ label {
+            top: -23px;
+            left: 0;
+            color: aqua;
+            font-size: 12px;
+          }
+        }
+
+        label {
+          position: absolute;
+          top: 0;
+          left: 0;
+          letter-spacing: 1px;
+          padding: 10px 0;
+          font-size: 16px;
+          color: #333;
+          pointer-events: none;
+          transition: 0.5s;
+        }
+      }
+    }
 
     .login-btn {
       margin-top: 20px;
@@ -97,34 +153,23 @@ export default {
       border-radius: 5px;
       text-align: center;
       cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: #6a5bcf;
+      }
     }
 
     .to-register {
       text-decoration: underline;
       cursor: pointer;
+      color: #7f72d1;
+      margin-top: 10px;
+      display: block;
     }
 
     .to-register:hover {
-      color: #7f72d1;
-    }
-
-    input {
-      outline: none;
-      line-height: 50px;
-      padding: 0 10px;
-      font-size: 16px;
-      border-radius: 5px;
-      box-sizing: border-box;
-      margin-bottom: 10px;
-      width: 100%;
-      border: none;
-      border: 2px solid #f1f1f1;
-      background-color: #f1f1f1;
-      transition: all 0.3s ease;
-    }
-
-    input:focus {
-      border: 2px solid #7f72d1;
+      color: #6a5bcf;
     }
   }
 }

src/views/medical/Query.vue

@@ -75,15 +75,15 @@ const dialogVisible = ref(false)
 const currentRecord = ref({})
 
 const fetchRecords = async (patientName = '') => {
-  loading.value = true
+  loading.value = true;
   try {
-    const response = await medicalApi.getAllRecords(patientName)
-    tableData.value = response.data
+    const response = await medicalApi.getAllRecords(patientName);
+    tableData.value = response;
   } catch (error) {
-    console.error('获取病历失败:', error)
-    ElMessage.error('获取病历记录失败')
+    console.error('获取病历失败:', error);
+    ElMessage.error(error.message || '获取病历记录失败');
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }