feat: (notification) 对接3

src/api/notification/list.ts

@@ -13,6 +13,7 @@ enum Api {
   addNotice = '/zfb-api/zfb/platform/notice/save',
   delNotice = '/zfb-api/zfb/platform/notice/delete',
   unreadNoticesList = '/zfb-api/zfb/platform/notice/unreadNoticesList',
+  readAll = '/zfb-api/zfb/platform/notice/readAll',
 }
 
 /**
@@ -67,3 +68,11 @@ export const unreadNoticeApi = () =>
       ignoreCancelToken: true,
     },
   });
+export const readAllApi = () =>
+  defHttp.post<Result>({
+    url: Api.readAll,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/layouts/default/header/components/notify/index.vue

@@ -32,6 +32,7 @@
   // import { useMessage } from '/@/hooks/web/useMessage';
   import { unreadNoticeApi } from '/@/api/notification/list';
   import { useGo } from '/@/hooks/web/usePage';
+  import { useMessage } from '/@/hooks/web/useMessage';
   // Tabs, TabPane: Tabs.TabPane, Badge, NoticeList
   export default defineComponent({
     components: { Popover, BellOutlined, Badge },
@@ -40,20 +41,38 @@
       // const { createMessage } = useMessage();
       const listData = ref(tabListData);
       const go = useGo();
-
+      const { createWarningModal } = useMessage();
       const count = ref(0);
 
-      onMounted(async () => {
+      async function fetchNotice() {
         const unread = await unreadNoticeApi();
         console.log('unread', unread.totalCount);
         count.value = unread.totalCount;
+        interface Unread {
+          title: string;
+          type: number;
+          content: string;
+        }
+        if (unread.list?.length) {
+          const list = unread.list[0] as unknown as Unread;
+          if (list.type === 0) {
+            createWarningModal({ title: list.title, content: list.content });
+          }
+          if (list.type === 1) {
+            createWarningModal({
+              title: list.title,
+              content: `<img style="margin:0 auto" src="${list.content}"/>`,
+            });
+          }
+        }
+      }
+      onMounted(async () => {
+        fetchNotice();
       });
 
       function onNoticeClick() {
-        if (count.value > 0) {
-          go('/notification/list');
-        }
-        // createMessage.success('你点击了通知，ID=' + record.id);
+        go('/notification');
+        count.value = 0;
       }
 
       return {

src/views/notification/addModal.vue

@@ -36,6 +36,7 @@
     emits: ['register', 'ok', 'cancel'],
     setup(_, { emit }) {
       const modelRef = ref({});
+      const isView = ref(false);
       // const userStore = useUserStore();
       // const { getCheckRole } = userStore;
       // const userinfo = computed(() => userStore.getUserInfo);
@@ -54,6 +55,7 @@
           component: 'Input',
           label: '标题',
           required: true,
+          componentProps: {},
           colProps: {
             span: 22,
           },
@@ -64,6 +66,7 @@
           component: 'RangePicker',
           componentProps: {
             format: 'YYYY-MM-DD HH:mm:ss',
+            showTime: true,
           },
           label: '时间段',
           required: true,
@@ -135,7 +138,7 @@
       ];
       const title = ref('新 增');
       const { createMessage } = useMessage();
-      const [registerForm, { validate, resetFields }] = useForm({
+      const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
         labelWidth: 120,
         schemas,
         showActionButtonGroup: false,
@@ -147,52 +150,44 @@
       const [register, { closeModal }] = useModalInner((data) => {
         data && onDataReceive(data);
       });
-      function onDataReceive(data) {
+      async function onDataReceive(data) {
+        console.log('onDataReceive', data);
         // 方式1;
-        console.log('useModalInner', data);
-        //   setFieldsValue({
-        //     ...data,
-        //     roleId: data.roleId != 2 ? data.roleId : '',
-        //   });
-        //   let setSchema = [
-        //     {
-        //       field: 'roleId',
-        //       component: 'ApiSelect',
-        //       componentProps: {
-        //         disabled: data.roleId == 2 ? false : data.id ? true : false,
-        //         api: getRoleListByParam,
-        //         labelField: 'roleName',
-        //         valueField: 'roleId',
-        //         params: {
-        //           type: data.roleId ? 1 : 0,
-        //           roleId: data.roleId,
-        //         },
-        //       },
-        //     },
-        //     {
-        //       field: 'phone',
-        //       componentProps: {
-        //         disabled: getCheckRole('plat_admin') ? false : data.id ? true : false,
-        //       },
-        //     },
-        //     {
-        //       field: 'companyId',
-        //       componentProps: {
-        //         disabled: data.id ? (data.roleId != 2 ? true : false) : false,
-        //       },
-        //     },
-        //     {
-        //       field: 'permList',
-        //       componentProps: {
-        //         disabled: data.roleId == 2 ? false : data.id ? true : false,
-        //         params: {
-        //           companyId: data.companyId || companyId,
-        //         },
-        //       },
-        //     },
-        //   ];
-        //   title.value = data.id ? '编辑' : '新增';
-        //   updateSchema(setSchema);
+        resetFields();
+        isView.value = false;
+        let updateSchemas = schemas.map((item: FormSchema) => {
+          item.componentProps = {
+            ...item.componentProps,
+            disabled: false,
+          };
+          return item;
+        });
+        if (data.isView) {
+          isView.value = true;
+          title.value = '查看';
+          setFieldsValue({
+            ...data,
+            effectiveTime: [data.startTime, data.endTime],
+          });
+          if (data.type === 0) {
+            setFieldsValue({
+              content1: data.content,
+            });
+          }
+          if (data.type === 1) {
+            setFieldsValue({
+              content2: [data.content],
+            });
+          }
+          updateSchemas = schemas.map((item: FormSchema) => {
+            item.componentProps = {
+              ...item.componentProps,
+              disabled: true,
+            };
+            return item;
+          });
+        }
+        await updateSchema(updateSchemas);
       }
 
       async function handleOk() {
@@ -222,6 +217,7 @@
         modelRef,
         handleOk,
         resetFields,
+        isView,
       };
     },
   });

src/views/notification/center.vue

@@ -27,43 +27,17 @@
       <template #createTime="{ record }">
         <Time :value="record.createTime" mode="datetime" />
       </template>
-
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '查看',
-              onClick: () => {},
-            },
-            {
-              color: 'error',
-              label: '删除',
-              popConfirm: {
-                title: '是否确认删除',
-                confirm: handleDelete.bind(null, record),
-              },
-            },
-          ]"
-        />
-      </template>
     </BasicTable>
     <AddModal @register="registerAddModal" @ok="reload" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import {
-    BasicTable,
-    useTable,
-    BasicColumn,
-    FormProps,
-    TableAction,
-    TableImg,
-  } from '/@/components/Table';
+  import { defineComponent, onMounted } from 'vue';
+  import { BasicTable, useTable, BasicColumn, FormProps, TableImg } from '/@/components/Table';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { uploadApi } from '/@/api/sys/upload';
   import { useModal } from '/@/components/Modal';
-  import { listApi, deleteNoticeApi } from '/@/api/notification/list';
+  import { listApi, deleteNoticeApi, readAllApi } from '/@/api/notification/list';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useGo } from '/@/hooks/web/usePage';
   import { Avatar } from 'ant-design-vue';
@@ -71,7 +45,7 @@
   import AddModal from './addModal.vue';
 
   export default defineComponent({
-    components: { BasicTable, TableAction, Avatar, Time, AddModal, TableImg },
+    components: { BasicTable, Avatar, Time, AddModal, TableImg },
     setup() {
       const { createMessage } = useMessage();
       const go = useGo();
@@ -162,6 +136,10 @@
         // openAddModal();
         openAddModal(true, {});
       }
+
+      onMounted(async () => {
+        await readAllApi();
+      });
       async function handleDelete(record: Recordable) {
         const data = await deleteNoticeApi({
           id: record.id,

src/views/notification/list.vue

@@ -33,7 +33,9 @@
           :actions="[
             {
               label: '查看',
-              onClick: () => {},
+              onClick: () => {
+                handleView(record);
+              },
             },
             {
               color: 'error',
@@ -160,7 +162,10 @@
 
       function handleCreate(): void {
         // openAddModal();
-        openAddModal(true, {});
+        openAddModal(true, { isView: false });
+      }
+      function handleView(record: Recordable): void {
+        openAddModal(true, { ...record, isView: true });
       }
       async function handleDelete(record: Recordable) {
         const data = await deleteNoticeApi({
@@ -182,6 +187,7 @@
         registerAddModal,
         openAddModal,
         handleDelete,
+        handleView,
       };
     },
   });