优化我的消息

src/views/dashboard/message/columns.ts

@@ -10,21 +10,25 @@ export const columns = [
   {
     title: '消息标题',
     dataIndex: 'title',
+    width: 250,
   },
   {
     title: '消息状态',
     dataIndex: 'status',
+    width: 100,
     customRender({ record }) {
-      return h('span', record.status === 1 ? '已读' : '未读')
+      return h('span', record.status === 1 ? '已读' : '未读');
     },
   },
   {
     title: '创建人',
     dataIndex: 'createUser',
+    width: 100,
   },
   {
     title: '创建时间',
     dataIndex: 'createTime',
+    width: 100,
   },
   {
     title: '操作',

src/views/dashboard/message/edit.vue

@@ -1,11 +1,20 @@
 <template>
-  <a-modal v-model:visible="props.visible" title="消息详情" width="800px"
-  style="top:20px;"  @cancel="dialogClose">
+  <a-modal
+    v-model:visible="props.visible"
+    title="消息详情"
+    width="800px"
+    style="top: 20px"
+    @cancel="dialogClose"
+  >
     <a-descriptions :column="2" bordered :labelStyle="{ width: '110px' }">
       <a-descriptions-item label="消息标题:">{{ formData.title }}</a-descriptions-item>
       <a-descriptions-item label="消息类型:">{{ getTyepText(formData.type) }}</a-descriptions-item>
-    <a-descriptions-item label="业务类型:">{{formData.bizType==1?'订单':'其他'}}</a-descriptions-item>
-    <a-descriptions-item label="消息状态:">{{formData.status==1?'已读':'未读'}}</a-descriptions-item>
+      <a-descriptions-item label="业务类型:">{{
+        formData.bizType == 1 ? '订单' : '其他'
+      }}</a-descriptions-item>
+      <a-descriptions-item label="消息状态:">{{
+        formData.status == 1 ? '已读' : '未读'
+      }}</a-descriptions-item>
       <a-descriptions-item label="消息内容:">{{ formData.content }}</a-descriptions-item>
     </a-descriptions>
     <template #footer>
@@ -16,37 +25,49 @@
   </a-modal>
 </template>
 <script lang="ts" setup>
-import {getMessageDetail} from "@/api/dashboard/message";
-import {onMounted, reactive} from "vue";
+  import { getMessageDetail } from '@/api/dashboard/message';
+  import { onMounted, reactive } from 'vue';
 
-const emit = defineEmits(["success", "update:visible"]);
+  const emit = defineEmits(['success', 'update:visible']);
+
+  /**
+   * 定义表单参数
+   */
   const formData = reactive({
-  id: "",
-  title: "",
+    id: '',
+    title: '',
     type: '',
     bizType: '',
     status: '',
-  content:''
+    content: '',
   });
 
+  /**
+   * 定义接收的参数
+   */
   const props = defineProps({
     visible: {
       type: Boolean,
       required: true,
-    default: false
+      default: false,
     },
     messageId: {
       type: Number,
       required: true,
-    default: 0
-  }
+      default: 0,
+    },
   });
 
-
+  /**
+   * 关闭弹窗
+   */
   const dialogClose = () => {
-  emit("update:visible", false);
+    emit('update:visible', false);
   };
 
+  /**
+   * 设置表单数据
+   */
   const setFormData = async () => {
     const data = await getMessageDetail(props.messageId);
     for (const key in formData) {
@@ -56,28 +77,35 @@ const setFormData = async () => {
       }
     }
   };
+
+  /**
+   * 获取类型文本描述
+   * @param type 类型
+   */
   const getTyepText = (type) => {
-  let typeText = ''
+    let typeText = '';
     switch (type) {
       case 1:
-          typeText='系统通知'
+        typeText = '系统通知';
         break;
       case 2:
-          typeText='用户私信 '
+        typeText = '用户私信 ';
         break;
       case 3:
-          typeText='代办事项'
+        typeText = '代办事项';
         break;
       default:
         break;
     }
-    return typeText 
-}
+    return typeText;
+  };
 
+  /**
+   * 钩子函数
+   */
   onMounted(() => {
     if (props.messageId) {
       setFormData();
     }
   });
-
 </script>

src/views/dashboard/message/index.vue

@@ -2,7 +2,11 @@
   <PageWrapper>
     <a-card class="proCard tabsCard">
       <a-tabs v-model:activeKey="activeName" @change="handleClick">
-        <a-tab-pane :key="item.value" :tab="item.configName" v-for="(item, index) in messageTypeList">
+        <a-tab-pane
+          :key="item.value"
+          :tab="item.configName"
+          v-for="(item, index) in messageTypeList"
+        >
           <template #tab>
             <a-badge :count="item.number ? item.number : ''" class="item">
               <span class="t1">{{ item.name }}</span>
@@ -19,9 +23,7 @@
       >
         <template #tableTitle>
           <a-space>
-            <a-button type="primary" @click="handleSetRead()">
-              批量确认
-            </a-button>
+            <a-button type="primary" @click="handleSetRead()"> 批量确认 </a-button>
             <a-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
               <template #icon>
                 <DeleteOutlined />
@@ -37,7 +39,7 @@
                 <template #icon><CheckOutlined /></template>
                 确认
               </a-button>
-          <a-button type="primary" @click="handleInfo(record.id)">
+              <a-button type="primary" @click="handleDetail(record.id)">
                 <template #icon><EyeOutlined /></template>
                 详情
               </a-button>
@@ -55,94 +57,143 @@
       :messageId="messageId"
       v-model:visible="editVisible"
       @success="reloadTable('noRefresh')"
-    >
-    </editDialog>
+    />
   </PageWrapper>
 </template>
 
 <script lang="ts" setup>
   import { reactive, ref, h, nextTick, defineAsyncComponent, onMounted } from 'vue';
   import { EyeOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons-vue';
-  import { getMessageProfile,messageDelete,messageBatchDelete,setRead } from '@/api/dashboard/message';
+  import {
+    getMessageProfile,
+    messageDelete,
+    messageBatchDelete,
+    setRead,
+  } from '@/api/dashboard/message';
   import { columns } from './columns';
   import { Modal, message } from 'ant-design-vue';
-  const editDialog = defineAsyncComponent(() =>
-    import('./edit.vue')
-)
-const messageId =ref(0)
-const docHeight = ref(500)
-const activeName = ref(1)
+
+  /**
+   * 定义参数
+   */
+  const editDialog = defineAsyncComponent(() => import('./edit.vue'));
+  const messageId = ref(0);
+  const docHeight = ref(500);
+  const activeName = ref(1);
+  const editVisible = ref(false);
+  const selectionData = ref([]);
+  const tableRef = ref();
+
+  /**
+   * 定义查询参数
+   */
+  const formParams = reactive({
+    type: 1,
+  });
+
+  /**
+   * 定义数据源
+   */
   const messageTypeList = ref([
     {
       name: '系统通知',
-    value:1
+      value: 1,
     },
     {
       name: '用户私信',
-    value:2
+      value: 2,
     },
     {
       name: '代办事项',
-    value:3
+      value: 3,
     },
-])
-const editVisible=ref(false)
-  const selectionData = ref([])
-  const tableRef = ref();
-  const formParams = reactive({
-    type:1
-  });
+  ]);
 
+  /**
+   * 加载数据列表
+   * @param res 参数
+   */
   const loadDataTable = async (res: any) => {
     const result = await getMessageProfile({ ...formParams, ...res });
-    let item = messageTypeList.value.find((item,index)=>item.value==activeName.value)
-    item.number = result.number
+    let item = messageTypeList.value.find((item, index) => item.value == activeName.value);
+    item.number = result.number;
     return result;
   };
 
+  /**
+   * 刷新数据列表
+   * @param noRefresh 参数
+   */
   function reloadTable(noRefresh = '') {
     tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
   }
-const handleClick = (e)=>{
-  activeName.value = e
-  formParams.type = e
-  reloadTable()
-}
 
-const handleInfo = async (id) => {
-  messageId.value=id
-  await nextTick();
-  editVisible.value=true
+  /**
+   * 执行点击事件
+   * @param e 参数
+   */
+  const handleClick = (e) => {
+    activeName.value = e;
+    formParams.type = e;
+    reloadTable();
   };
 
+  /**
+   * 执行查看详情
+   * @param id 参数
+   */
+  const handleDetail = async (id) => {
+    messageId.value = id;
+    await nextTick();
+    editVisible.value = true;
+  };
+
+  /**
+   * 执行删除
+   * @param id 参数
+   */
   async function handleDelete(id) {
     Modal.confirm({
       title: '提示',
-      content: "确定要删除？",
+      content: '确定要删除？',
       onOk: async () => {
         id ? await messageDelete(id) : await messageBatchDelete(selectionData.value);
-        message.success("删除成功");
-        reloadTable()
-      }
+        message.success('删除成功');
+        reloadTable();
+      },
     });
   }
+
+  /**
+   * 执行已读
+   * @param id 参数
+   */
   async function handleSetRead(id) {
     Modal.confirm({
       title: '提示',
-      content: "确定标记为已读？",
+      content: '确定标记为已读？',
       onOk: async () => {
         id ? await setRead(id) : await setRead(selectionData.value);
-        message.success("标记成功");
-        reloadTable()
-      }
+        message.success('标记成功');
+        reloadTable();
+      },
     });
   }
+
+  /**
+   * 数据行选中事件
+   * @param value 参数
+   */
   function onSelectionChange(value) {
-    selectionData.value = value
+    selectionData.value = value;
   }
+
+  /**
+   * 钩子函数
+   */
   onMounted(() => {
-  docHeight.value =document.body.clientHeight - 160
-})
+    docHeight.value = document.body.clientHeight - 160;
+  });
 </script>
 
 <style lang="less" scoped>