优化我的消息

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,13 +1,22 @@
 <template>
-  <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.content}}</a-descriptions-item>
-</a-descriptions>
+  <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.content }}</a-descriptions-item>
+    </a-descriptions>
     <template #footer>
       <span class="dialog-footer">
         <a-button @click="dialogClose">关闭</a-button>
@@ -16,68 +25,87 @@
   </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 formData = reactive({
-  id: "",
-  title: "",
-  type:'',
-  bizType:'',
-  status:'',
-  content:''
-});
+  const emit = defineEmits(['success', 'update:visible']);
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    required: true,
-    default: false
-  },
-  messageId: {
-    type: Number,
-    required: true,
-    default: 0
-  }
-});
+  /**
+   * 定义表单参数
+   */
+  const formData = reactive({
+    id: '',
+    title: '',
+    type: '',
+    bizType: '',
+    status: '',
+    content: '',
+  });
 
+  /**
+   * 定义接收的参数
+   */
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    messageId: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+  });
 
-const dialogClose = () => {
-  emit("update:visible", false);
-};
+  /**
+   * 关闭弹窗
+   */
+  const dialogClose = () => {
+    emit('update:visible', false);
+  };
 
-const setFormData = async () => {
-  const data = await getMessageDetail(props.messageId);
-  for (const key in formData) {
-    if (data[key] != null && data[key] != undefined) {
-      //@ts-ignore
-      formData[key] = data[key];
+  /**
+   * 设置表单数据
+   */
+  const setFormData = async () => {
+    const data = await getMessageDetail(props.messageId);
+    for (const key in formData) {
+      if (data[key] != null && data[key] != undefined) {
+        //@ts-ignore
+        formData[key] = data[key];
+      }
     }
-  }
-};
-const getTyepText =(type)=>{
-  let typeText = ''
+  };
+
+  /**
+   * 获取类型文本描述
+   * @param type 类型
+   */
+  const getTyepText = (type) => {
+    let typeText = '';
     switch (type) {
       case 1:
-          typeText='系统通知'
-          break;
-        case 2:
-          typeText='用户私信 '
-          break;
-        case 3:
-          typeText='代办事项'
-          break;
-        default:
-          break;
+        typeText = '系统通知';
+        break;
+      case 2:
+        typeText = '用户私信 ';
+        break;
+      case 3:
+        typeText = '代办事项';
+        break;
+      default:
+        break;
     }
-    return typeText 
-}
-
-onMounted(() => {
-  if (props.messageId) {
-    setFormData();
-  }
-});
+    return typeText;
+  };
 
+  /**
+   * 钩子函数
+   */
+  onMounted(() => {
+    if (props.messageId) {
+      setFormData();
+    }
+  });
 </script>

src/views/dashboard/message/index.vue

@@ -2,10 +2,14 @@
   <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>
+            <a-badge :count="item.number ? item.number : ''" class="item">
+              <span class="t1">{{ item.name }}</span>
             </a-badge>
           </template>
         </a-tab-pane>
@@ -15,138 +19,185 @@
         :request="loadDataTable"
         :row-key="(row) => row.id"
         ref="tableRef"
-        :row-selection="{onChange: onSelectionChange}"
+        :row-selection="{ onChange: onSelectionChange }"
       >
         <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 />
-            </template>
-                删除
-              </a-button>
+                <DeleteOutlined />
+              </template>
+              删除
+            </a-button>
           </a-space>
         </template>
         <template #bodyCell="{ column, record }">
-      <template v-if="column.key === 'action'">
-        <a-space>
-          <a-button type="primary" @click="handleSetRead(record.id)">
-            <template #icon><CheckOutlined /></template>
-            确认
-          </a-button>
-          <a-button type="primary" @click="handleInfo(record.id)">
-            <template #icon><EyeOutlined /></template>
-            详情
-          </a-button>
-          <a-button type="primary" danger @click="handleDelete(record.id)">
-            <template #icon><DeleteOutlined /></template>
-            删除
-          </a-button>
-        </a-space>
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a-button type="primary" @click="handleSetRead(record.id)">
+                <template #icon><CheckOutlined /></template>
+                确认
+              </a-button>
+              <a-button type="primary" @click="handleDetail(record.id)">
+                <template #icon><EyeOutlined /></template>
+                详情
+              </a-button>
+              <a-button type="primary" danger @click="handleDelete(record.id)">
+                <template #icon><DeleteOutlined /></template>
+                删除
+              </a-button>
+            </a-space>
+          </template>
         </template>
-      </template>
       </BasicTable>
     </a-card>
     <editDialog
-        v-if="editVisible"
-        :messageId="messageId"
-        v-model:visible="editVisible"
-        @success="reloadTable('noRefresh')"
-    >
-    </editDialog>
+      v-if="editVisible"
+      :messageId="messageId"
+      v-model:visible="editVisible"
+      @success="reloadTable('noRefresh')"
+    />
   </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 { 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 { 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 messageTypeList = ref([
-  {
-    name:'系统通知',
-    value:1
-  },
-  {
-    name:'用户私信',
-    value:2
-  },
-  {
-    name:'代办事项',
-    value:3
-  },
-])
-const editVisible=ref(false)
-  const selectionData = ref([])
+  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 editVisible = ref(false);
+  const selectionData = ref([]);
   const tableRef = ref();
+
+  /**
+   * 定义查询参数
+   */
   const formParams = reactive({
-    type:1
+    type: 1,
   });
 
+  /**
+   * 定义数据源
+   */
+  const messageTypeList = ref([
+    {
+      name: '系统通知',
+      value: 1,
+    },
+    {
+      name: '用户私信',
+      value: 2,
+    },
+    {
+      name: '代办事项',
+      value: 3,
+    },
+  ]);
+
+  /**
+   * 加载数据列表
+   * @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;
   };
 
-  function reloadTable(noRefresh='') {
-    tableRef.value.reload(noRefresh?{}:{pageNo:1});
+  /**
+   * 刷新数据列表
+   * @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();
+  };
 
-async function handleDelete(id) {
+  /**
+   * 执行查看详情
+   * @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()
-      }
+        id ? await messageDelete(id) : await messageBatchDelete(selectionData.value);
+        message.success('删除成功');
+        reloadTable();
+      },
     });
-}
-async function handleSetRead(id) {
+  }
+
+  /**
+   * 执行已读
+   * @param id 参数
+   */
+  async function handleSetRead(id) {
     Modal.confirm({
       title: '提示',
-      content: "确定标记为已读？",
+      content: '确定标记为已读？',
       onOk: async () => {
-        id? await setRead(id):await setRead(selectionData.value);
-        message.success("标记成功");
-        reloadTable()
-      }
+        id ? await setRead(id) : await setRead(selectionData.value);
+        message.success('标记成功');
+        reloadTable();
+      },
     });
-}
-function onSelectionChange(value){
-    selectionData.value = value
   }
+
+  /**
+   * 数据行选中事件
+   * @param value 参数
+   */
+  function onSelectionChange(value) {
+    selectionData.value = value;
+  }
+
+  /**
+   * 钩子函数
+   */
   onMounted(() => {
-  docHeight.value =document.body.clientHeight - 160
-})
+    docHeight.value = document.body.clientHeight - 160;
+  });
 </script>
 
 <style lang="less" scoped>
-:deep(.ant-badge-count){
+  :deep(.ant-badge-count) {
     right: -13px;
   }
 </style>