优化我的消息

src/views/dashboard/message/columns.ts

@@ -8,14 +8,18 @@ export const columns = [
   {
     label: 'ID',
     prop: 'id',
+    fixed: 'left',
+    width: 50,
   },
   {
     label: '消息标题',
     prop: 'title',
+    width: 250,
   },
   {
     label: '消息状态',
     prop: 'status',
+    width: 100,
     render(record) {
       return h('span', record.row.status === 1 ? '已读' : '未读');
     },
@@ -23,9 +27,11 @@ export const columns = [
   {
     label: '创建人',
     prop: 'createUser',
+    width: 100,
   },
   {
     label: '创建时间',
     prop: 'createTime',
+    width: 180,
   },
 ];

src/views/dashboard/message/edit.vue

@@ -31,6 +31,10 @@
   import { onMounted, reactive } from 'vue';
 
   const emit = defineEmits(['success', 'update:visible']);
+
+  /**
+   * 定义表单参数
+   */
   const formData = reactive({
     id: '',
     title: '',
@@ -40,6 +44,9 @@
     content: '',
   });
 
+  /**
+   * 定义接收的参数
+   */
   const props = defineProps({
     visible: {
       type: Boolean,
@@ -53,10 +60,16 @@
     },
   });
 
+  /**
+   * 关闭弹窗
+   */
   const dialogClose = () => {
     emit('update:visible', false);
   };
 
+  /**
+   * 设置表单参数
+   */
   const setFormData = async () => {
     const data = await getMessageDetail(props.messageId);
     for (const key in formData) {
@@ -66,6 +79,11 @@
       }
     }
   };
+
+  /**
+   * 获取类型文本描述
+   * @param type 类型
+   */
   const getTyepText = (type) => {
     let typeText = '';
     switch (type) {
@@ -84,6 +102,9 @@
     return typeText;
   };
 
+  /**
+   * 钩子函数
+   */
   onMounted(() => {
     if (props.messageId) {
       setFormData();

src/views/dashboard/message/index.vue

@@ -2,18 +2,14 @@
   <PageWrapper>
     <el-card shadow="never" size="small" class="proCard tabsCard">
       <el-tabs v-model="activeName" @tab-change="handleClick">
-        <el-tab-pane
-          :name="item.value"
-          v-for="(item, index) in messageTypeList"
-          :key="index"
-        >
-        <template #label>
-          <span class="custom-tabs-label">
-            <el-badge :value="item.number ? item.number : ''" :max="99" class="item">
-              <span class="t1">{{ item.name }}</span>
-            </el-badge>
-          </span>
-        </template>
+        <el-tab-pane :name="item.value" v-for="(item, index) in messageTypeList" :key="index">
+          <template #label>
+            <span class="custom-tabs-label">
+              <el-badge :value="item.number ? item.number : ''" :max="99" class="item">
+                <span class="t1">{{ item.name }}</span>
+              </el-badge>
+            </span>
+          </template>
         </el-tab-pane>
       </el-tabs>
       <BasicTable
@@ -57,10 +53,28 @@
   } from '@/api/dashboard/message';
   import { columns } from './columns';
   import { message, confirm } from '@/utils/auth';
+
+  /**
+   * 定义参数
+   */
   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: '系统通知',
@@ -75,14 +89,12 @@
       value: 3,
     },
   ]);
-  const editVisible = ref(false);
-  const selectionData = ref([]);
-  const tableRef = ref();
-  const formParams = reactive({
-    type: 1,
-  });
+
+  /**
+   * 定义操作栏
+   */
   const actionColumn = reactive({
-    width: 250,
+    width: 280,
     label: '操作',
     prop: 'action',
     fixed: 'right',
@@ -92,6 +104,7 @@
         actions: [
           {
             label: '确认',
+            icon: 'Check',
             type: 'warning',
             onClick: handleSetRead.bind(null, record),
           },
@@ -99,7 +112,7 @@
             label: '详情',
             icon: 'View',
             type: 'warning',
-            onClick: handleInfo.bind(null, record),
+            onClick: handleDetail.bind(null, record),
           },
           {
             label: '删除',
@@ -112,6 +125,10 @@
     },
   });
 
+  /**
+   * 加载数据列表
+   * @param res 参数
+   */
   const loadDataTable = async (res: any) => {
     const result = await getMessageProfile({ ...formParams, ...res });
     let item = messageTypeList.value.find((item, index) => item.value == activeName.value);
@@ -119,21 +136,38 @@
     return result;
   };
 
+  /**
+   * 刷新数据列表
+   * @param noRefresh 参数
+   */
   function reloadTable(noRefresh = '') {
     tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
   }
+
+  /**
+   * 执行点击事件
+   * @param e 参数
+   */
   const handleClick = (e) => {
-    activeName.value = e
+    activeName.value = e;
     formParams.type = activeName.value;
     reloadTable();
   };
 
-  const handleInfo = async (record: Recordable) => {
+  /**
+   * 执行查看详情
+   * @param record 参数
+   */
+  const handleDetail = async (record: Recordable) => {
     messageId.value = record.row.id;
     await nextTick();
     editVisible.value = true;
   };
 
+  /**
+   * 执行删除
+   * @param record 参数
+   */
   async function handleDelete(record: Recordable) {
     let ids = [];
     if (!record) {
@@ -144,6 +178,11 @@
     message('删除成功');
     reloadTable();
   }
+
+  /**
+   * 执行已读
+   * @param record 参数
+   */
   async function handleSetRead(record: Recordable) {
     let ids = [];
     if (!record) {
@@ -154,16 +193,25 @@
     message('标记成功');
     reloadTable();
   }
+
+  /**
+   * 数据行选中事件
+   * @param value 参数
+   */
   function onSelectionChange(value) {
     selectionData.value = value;
   }
+
+  /**
+   * 钩子函数
+   */
   onMounted(() => {
     docHeight.value = document.body.clientHeight - 145;
   });
 </script>
 
 <style lang="scss" scoped>
-:deep(.proCard.tabsCard .el-card__body) {
+  :deep(.proCard.tabsCard .el-card__body) {
     padding-bottom: 15px;
   }
   :deep(.el-badge__content.is-fixed) {