完成新增项目的富文本加密+修改项目的富文本加密及解密+新增项目通知的加密+编辑项目通知的加密与解密+修改项目富文本+修改编辑项目样式

src/view/project/projectNotice.vue

@@ -4,6 +4,19 @@ import {useRoute, useRouter} from "vue-router";
 import myAxios from "../../api/myAxios";
 import {message} from "ant-design-vue";
 
+function decode64(text: string): string {
+  try {
+    return decodeURIComponent(
+        Array.from(atob(text), char =>
+            '%' + ('00' + char.charCodeAt(0).toString(16)).slice(-2)
+        ).join('')
+    );
+  } catch (error) {
+    console.error('Base64解码失败:', error);
+    return text; // 解码失败时返回原始文本
+  }
+}
+
 const columns = [
   {
     title: '项目通知ID',
@@ -112,6 +125,7 @@ onMounted(() => {
     getNotifications(projectId.value);
   }
 });
+
 const getNotifications = async (id: string | number) => {
   const storedToken = localStorage.getItem('token');
   try {
@@ -126,10 +140,13 @@ const getNotifications = async (id: string | number) => {
           }
         }
     );
-    console.log(response)
     if (response.code === 1) {
-      originalTableData.value = response.data;
-      displayData.value = response.data; // 初始显示所有数据
+      // 对通知内容进行Base64解码
+      originalTableData.value = response.data.map((item:any) => ({
+        ...item,
+        notificationContent: decode64(item.notificationContent)
+      }));
+      displayData.value = originalTableData.value;
     } else {
       error.value = "获取通知列表失败";
       originalTableData.value = [];
@@ -144,6 +161,7 @@ const getNotifications = async (id: string | number) => {
   }
 };
 
+
 onMounted(() => {
   if (projectId.value) {
     getNotifications(projectId.value);
@@ -232,6 +250,7 @@ const goBack = () => {
         </a-form-item>
         <a-button class="custom-button" @click="goAddProjectNotice">新增项目通知</a-button>
         <a-button class="custom-button" @click="reset">重置搜索</a-button>
+        <a-button @click="goBack" class="custom-button">返回</a-button>
       </a-space>
     </a-form>
   </div>
@@ -256,11 +275,6 @@ const goBack = () => {
         </a-space>
       </template>
     </template>
-    <template #footer>
-      <div class="table-footer">
-        <a-button @click="goBack" class="back-button">返回</a-button>
-      </div>
-    </template>
   </a-table>
 
 </template>
@@ -274,29 +288,6 @@ const goBack = () => {
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 
-.error-alert {
-  padding: 1rem;
-  background: #ffe3e3;
-  color: #ff4444;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  margin-top: 1rem;
-}
-
-.error-icon {
-  display: inline-block;
-  width: 1.2rem;
-  height: 1.2rem;
-  border-radius: 50%;
-  background: #ff4444;
-  color: white;
-  text-align: center;
-  line-height: 1.2rem;
-  font-weight: bold;
-}
-
 :deep(.ant-table-thead) {
   background-color: #fafafa !important;
   font-weight: 600;
@@ -362,17 +353,6 @@ const goBack = () => {
   border-right-color: #ffa940;
 }
 
-/* 新增表格页脚样式 */
-.table-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-}
-
-.back-button {
-  margin-right: 16px;
-}
 
 /* 调整分页器位置 */
 :deep(.ant-table-pagination.ant-pagination) {