feat: (noitifcation) 对接api 2

src/api/notification/list.ts

@@ -1,5 +1,11 @@
 import { defHttp } from '/@/utils/http/axios';
-import { PageParams, ListGetResultModel, NoticeParams, UnreadModel } from './model';
+import {
+  PageParams,
+  ListGetResultModel,
+  NoticeParams,
+  UnreadModel,
+  DelNoticeParams,
+} from './model';
 import { Result } from '/#/axios';
 
 enum Api {
@@ -13,7 +19,7 @@ enum Api {
  * @description: Get sample list value
  */
 
-export const ListApi = (params: PageParams) =>
+export const listApi = (params: PageParams) =>
   defHttp.post<ListGetResultModel>({
     url: Api.pageList,
     params,
@@ -43,7 +49,7 @@ export const editNoticeApi = (params: NoticeParams) =>
     },
   });
 
-export const DeleteNoticeApi = (params: NoticeParams) =>
+export const deleteNoticeApi = (params: DelNoticeParams) =>
   defHttp.post<Result>({
     url: Api.delNotice,
     params,

src/api/notification/model.ts

@@ -19,6 +19,9 @@ export interface NoticeParams {
   type: string;
   effectiveTime: string[];
 }
+export interface DelNoticeParams {
+  id: string;
+}
 
 export interface UnreadModel {
   list: any[];

src/views/notification/addModal.vue

@@ -15,7 +15,7 @@
 </template>
 <script lang="ts">
   // computed
-  import { defineComponent, ref, h } from 'vue';
+  import { defineComponent, ref } from 'vue';
 
   import { addNoticeApi, editNoticeApi } from '/@/api/notification/list';
   import { BasicModal, useModalInner } from '/@/components/Modal';
@@ -24,7 +24,8 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useMessage } from '/@/hooks/web/useMessage';
   // import { useUserStore } from '/@/store/modules/user';
-  import { Tinymce } from '/@/components/Tinymce';
+  // import { Tinymce } from '/@/components/Tinymce';
+  import { uploadApi } from '/@/api/advertisement/list';
   import { formatToDateTime } from '/@/utils/dateUtil';
   const { t } = useI18n();
   export default defineComponent({
@@ -87,18 +88,48 @@
           },
         },
         {
-          field: 'content',
-          label: '内容',
-          component: 'Input',
-          render: ({ model, field }) => {
-            return h(Tinymce, {
-              value: model[field],
-              maxlength: 200,
-              onChange: (value: string) => {
-                model[field] = value;
-              },
-              showImageUpload: false,
-            });
+          field: 'content1',
+          label: '内容1',
+          component: 'InputTextArea',
+          ifShow: ({ model }) => {
+            return model['type'] === 0;
+          },
+          colProps: {
+            span: 22,
+          },
+          componentProps: {
+            showCount: true,
+            maxlength: 200,
+            autoSize: {
+              minRows: 6,
+            },
+          },
+        },
+        {
+          field: 'content2',
+          label: '内容2',
+          component: 'Upload',
+          required: true,
+          itemProps: {
+            validateTrigger: 'blur',
+          },
+          ifShow: ({ model }) => {
+            return model['type'] === 1;
+          },
+          componentProps: {
+            api: uploadApi,
+            maxSize: 5,
+            emptyHidePreview: true,
+            maxNumber: 1,
+            accept: ['jpg', 'jpeg', 'gif', 'png'],
+            afterFetch: function (data) {
+              Reflect.set(data, 'url', data.message.url);
+              return data;
+            },
+          },
+
+          colProps: {
+            span: 22,
           },
         },
       ];
@@ -171,7 +202,7 @@
         const requestApi = data.id ? editNoticeApi : addNoticeApi;
         let res = await requestApi({
           title: data.title,
-          content: data.content,
+          content: data.type === 0 ? data.content1 : data.content2[0],
           type: String(data.type),
           effectiveTime: data.effectiveTime.map((i) => formatToDateTime(i)),
           id: data.id,

src/views/notification/center.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="p-4">
+    <BasicTable @register="registerTable">
+      <!-- <template #toolbar>
+        <a-button type="primary" @click="handleCreate">新增</a-button>
+      </template> -->
+      <template #avatar="{ record }">
+        <Avatar :size="80" :src="record.avatar" />
+      </template>
+
+      <template #content="{ record }">
+        <div v-if="record.type === 0" v-html="record.content"></div>
+        <!-- <img v-if="record.type === 1" :src="record.content" /> -->
+        <TableImg
+          v-if="record.type === 1"
+          :size="200"
+          :simpleShow="true"
+          :imgList="[record.content]"
+        />
+      </template>
+
+      <template #periodTime="{ record }">
+        <Time :value="record.startTime" mode="datetime" /> 到
+        <Time :value="record.endTime" mode="datetime" />
+      </template>
+
+      <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 { useMessage } from '/@/hooks/web/useMessage';
+  import { uploadApi } from '/@/api/sys/upload';
+  import { useModal } from '/@/components/Modal';
+  import { listApi, deleteNoticeApi } from '/@/api/notification/list';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { Avatar } from 'ant-design-vue';
+  import { Time } from '/@/components/Time';
+  import AddModal from './addModal.vue';
+
+  export default defineComponent({
+    components: { BasicTable, TableAction, Avatar, Time, AddModal, TableImg },
+    setup() {
+      const { createMessage } = useMessage();
+      const go = useGo();
+      const { t } = useI18n();
+      const [registerAddModal, { openModal: openAddModal }] = useModal();
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          fixed: 'left',
+          width: 60,
+        },
+        {
+          title: '名称',
+          dataIndex: 'title',
+          // sorter: true,
+          width: 160,
+        },
+        {
+          title: '内容',
+          dataIndex: 'content',
+          slots: { customRender: 'content' },
+          // sorter: true,
+          width: 160,
+        },
+        {
+          title: '持续时间',
+          dataIndex: 'periodTime',
+          slots: { customRender: 'periodTime' },
+          // sorter: true,
+          width: 120,
+        },
+        {
+          title: '发布时间',
+          dataIndex: 'createTime',
+          slots: { customRender: 'createTime' },
+          // sorter: true,
+          width: 120,
+        },
+        // {
+        //   title: '操作',
+        //   dataIndex: '',
+        //   slots: { customRender: 'action' },
+        //   fixed: 'right',
+        //   width: 80,
+        // },
+      ];
+
+      const searchForm: Partial<FormProps> = {
+        labelWidth: 100,
+        schemas: [
+          {
+            field: 'title',
+            label: '名称',
+            component: 'Input',
+            componentProps: {
+              maxLength: 100,
+            },
+            colProps: {
+              xl: 5,
+              xxl: 5,
+            },
+          },
+        ],
+      };
+
+      const [registerTable, { reload }] = useTable({
+        title: '消息列表',
+        api: listApi,
+        columns: columns,
+        useSearchForm: true,
+        formConfig: searchForm,
+        showTableSetting: true,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+        pagination: { pageSize: 20 },
+        bordered: true,
+        fetchSetting: {
+          pageField: 'page',
+          sizeField: 'limit',
+          listField: 'list',
+          totalField: 'totalCount',
+        },
+      });
+
+      function handleCreate(): void {
+        // openAddModal();
+        openAddModal(true, {});
+      }
+      async function handleDelete(record: Recordable) {
+        const data = await deleteNoticeApi({
+          id: record.id,
+        });
+        createMessage.success(t('common.optSuccess'));
+        reload();
+        console.log('data', data);
+      }
+
+      return {
+        registerTable,
+        createMessage,
+        t,
+        go,
+        uploadApi: uploadApi as any,
+        handleCreate,
+        reload,
+        registerAddModal,
+        openAddModal,
+        handleDelete,
+      };
+    },
+  });
+</script>

src/views/notification/list.vue

@@ -8,32 +8,39 @@
         <Avatar :size="80" :src="record.avatar" />
       </template>
 
-      <template #gender="{ record }">
-        {{ renderGenderLabel(record.gender) }}
+      <template #content="{ record }">
+        <div v-if="record.type === 0" v-html="record.content"></div>
+        <!-- <img v-if="record.type === 1" :src="record.content" /> -->
+        <TableImg
+          v-if="record.type === 1"
+          :size="200"
+          :simpleShow="true"
+          :imgList="[record.content]"
+        />
       </template>
 
-      <template #birthday="{ record }">
-        <Time v-if="record.birthday" :value="record.birthday" mode="datetime" />
+      <template #periodTime="{ record }">
+        <Time :value="record.startTime" mode="datetime" /> 到
+        <Time :value="record.endTime" mode="datetime" />
       </template>
 
-      <template #lastLoginTime="{ record }">
-        <Time :value="record.lastLoginTime" mode="datetime" />
+      <template #createTime="{ record }">
+        <Time :value="record.createTime" mode="datetime" />
       </template>
 
       <template #action="{ record }">
         <TableAction
           :actions="[
             {
-              label: '详情',
-              onClick: () => {
-                go(`/order/list/detail/${record.orderNo}`);
-              },
+              label: '查看',
+              onClick: () => {},
             },
             {
-              label: '打印',
               color: 'error',
-              onClick: () => {
-                createMessage.info(`暂未接入`);
+              label: '删除',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
               },
             },
           ]"
@@ -45,11 +52,18 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
+  import {
+    BasicTable,
+    useTable,
+    BasicColumn,
+    FormProps,
+    TableAction,
+    TableImg,
+  } from '/@/components/Table';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { uploadApi } from '/@/api/sys/upload';
   import { useModal } from '/@/components/Modal';
-  import { ListApi } from '/@/api/notification/list';
+  import { listApi, deleteNoticeApi } from '/@/api/notification/list';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useGo } from '/@/hooks/web/usePage';
   import { Avatar } from 'ant-design-vue';
@@ -57,7 +71,7 @@
   import AddModal from './addModal.vue';
 
   export default defineComponent({
-    components: { BasicTable, TableAction, Avatar, Time, AddModal },
+    components: { BasicTable, TableAction, Avatar, Time, AddModal, TableImg },
     setup() {
       const { createMessage } = useMessage();
       const go = useGo();
@@ -79,30 +93,38 @@
         {
           title: '内容',
           dataIndex: 'content',
+          slots: { customRender: 'content' },
           // sorter: true,
           width: 160,
         },
         {
           title: '持续时间',
-          dataIndex: 'lastLoginTime',
-          slots: { customRender: 'lastLoginTime' },
+          dataIndex: 'periodTime',
+          slots: { customRender: 'periodTime' },
           // sorter: true,
           width: 120,
         },
         {
           title: '发布时间',
-          dataIndex: 'lastLoginTime',
-          slots: { customRender: 'lastLoginTime' },
+          dataIndex: 'createTime',
+          slots: { customRender: 'createTime' },
           // sorter: true,
           width: 120,
         },
+        {
+          title: '操作',
+          dataIndex: '',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+          width: 80,
+        },
       ];
 
       const searchForm: Partial<FormProps> = {
         labelWidth: 100,
         schemas: [
           {
-            field: 'username',
+            field: 'title',
             label: '名称',
             component: 'Input',
             componentProps: {
@@ -118,7 +140,7 @@
 
       const [registerTable, { reload }] = useTable({
         title: '消息列表',
-        api: ListApi,
+        api: listApi,
         columns: columns,
         useSearchForm: true,
         formConfig: searchForm,
@@ -136,33 +158,30 @@
         },
       });
 
-      function renderGenderLabel(gender: number): string {
-        switch (gender) {
-          case 0:
-            return '女';
-          case 1:
-            return '男';
-          default:
-            return '未知';
-        }
-      }
-
       function handleCreate(): void {
         // openAddModal();
         openAddModal(true, {});
       }
+      async function handleDelete(record: Recordable) {
+        const data = await deleteNoticeApi({
+          id: record.id,
+        });
+        createMessage.success(t('common.optSuccess'));
+        reload();
+        console.log('data', data);
+      }
 
       return {
         registerTable,
         createMessage,
         t,
         go,
-        renderGenderLabel,
         uploadApi: uploadApi as any,
         handleCreate,
         reload,
         registerAddModal,
         openAddModal,
+        handleDelete,
       };
     },
   });