From 5d329f4b2af173950b8ee2d64e4fa62918d9bdce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=BA=A2=E4=B8=BD?= <1181930680@qq.com>
Date: Thu, 21 Nov 2024 11:27:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/message/columns.ts |  34 ++++++
 src/views/dashboard/message/edit.vue   |  92 +++++++++++++++
 src/views/dashboard/message/index.vue  | 157 +++++++++++++++++++++++++
 3 files changed, 283 insertions(+)
 create mode 100644 src/views/dashboard/message/columns.ts
 create mode 100644 src/views/dashboard/message/edit.vue
 create mode 100644 src/views/dashboard/message/index.vue

diff --git a/src/views/dashboard/message/columns.ts b/src/views/dashboard/message/columns.ts
new file mode 100644
index 0000000..9c0d462
--- /dev/null
+++ b/src/views/dashboard/message/columns.ts
@@ -0,0 +1,34 @@
+import { h } from 'vue';
+
+export const columns = [
+  {
+    type: 'selection',
+    width: 50,
+    fixed:"left"
+  },
+  {
+    title: 'ID',
+    key: 'id',
+    fixed: 'left',
+    width: 50,
+  },
+  {
+    title: '消息标题',
+    key: 'title',
+  },
+  {
+    title: '消息状态',
+    key: 'status',
+    customRender({ record }) {
+      return h('span', record.status === 1 ? '已读' : '未读')
+    },
+  },
+  {
+    title: '创建人',
+    key: 'createUser',
+  },
+  {
+    title: '创建时间',
+    key: 'createTime',
+  },
+];
diff --git a/src/views/dashboard/message/edit.vue b/src/views/dashboard/message/edit.vue
new file mode 100644
index 0000000..8329a98
--- /dev/null
+++ b/src/views/dashboard/message/edit.vue
@@ -0,0 +1,92 @@
+<template>
+  <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
+    <template #default>
+      <n-descriptions :column="2" bordered :labelStyle="{ width: '110px' }" label-placement="left">
+        <n-descriptions-item label="消息标题:">{{ formData.title }}</n-descriptions-item>
+        <n-descriptions-item label="消息类型:">{{ getTyepText(formData.type) }}</n-descriptions-item>
+        <n-descriptions-item label="业务类型:">{{ formData.bizType == 1 ? '订单' : '其他' }}</n-descriptions-item>
+        <n-descriptions-item label="消息状态:">{{ formData.status == 1 ? '已读' : '未读' }}</n-descriptions-item>
+        <n-descriptions-item label="消息内容:">{{ formData.content }}</n-descriptions-item>
+      </n-descriptions>
+    </template>
+    <template #action>
+      <span class="dialog-footer">
+        <n-button @click="dialogClose">关闭</n-button>
+      </span>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+import { getMessageDetail } from "@/api/dashboard/message";
+import { useModal } from '@/components/Modal';
+import { onMounted, reactive } from "vue";
+
+const emit = defineEmits(["success", "update:visible"]);
+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 [modalRegister, { openModal }] = useModal({
+  title: "日志详情",
+  subBtuText: '确定',
+  width: 600,
+});
+
+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 getTyepText = (type) => {
+  let typeText = ''
+  switch (type) {
+    case 1:
+      typeText = '系统通知'
+      break;
+    case 2:
+      typeText = '用户私信 '
+      break;
+    case 3:
+      typeText = '代办事项'
+      break;
+    default:
+      break;
+  }
+  return typeText
+}
+
+onMounted(() => {
+  if (props.messageId) {
+    setFormData();
+  }
+});
+//导出方法
+defineExpose({
+  openModal,
+});
+</script>
diff --git a/src/views/dashboard/message/index.vue b/src/views/dashboard/message/index.vue
new file mode 100644
index 0000000..078cbee
--- /dev/null
+++ b/src/views/dashboard/message/index.vue
@@ -0,0 +1,157 @@
+<template>
+  <PageWrapper>
+    <n-card>
+      <n-tabs v-model="activeName" @update:value="handleClick">
+        <n-tab-pane :name="item.value" :tab="item.configName" v-for="(item, index) in messageTypeList">
+          <template #tab>
+            <n-badge :value="item.number ? item.number : ''" class="item" :offset="[10,2]">
+              <span class="t1">{{ item.name }}</span>
+            </n-badge>
+          </template>
+        </n-tab-pane>
+      </n-tabs>
+      <BasicTable :columns="columns" :actionColumn="actionColumn" :request="loadDataTable" :row-key="(row) => row.id"
+        ref="tableRef" @update:checked-row-keys="onSelectionChange">
+        <template #tableTitle>
+          <n-space>
+            <n-button type="primary" @click="handleSetRead()">
+              批量确认
+            </n-button>
+            <n-button type="error" @click="handleDelete()" :disabled="!selectionData.length">
+              <template #icon>
+                <n-icon>
+                  <DeleteOutlined />
+                </n-icon>
+              </template>
+              删除
+            </n-button>
+          </n-space>
+        </template>
+      </BasicTable>
+    </n-card>
+    <editDialog v-if="editVisible" :messageId="messageId" v-model:visible="editVisible" ref="createModalRef"
+      @success="reloadTable('noRefresh')">
+    </editDialog>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, h, nextTick, defineAsyncComponent, onMounted } from 'vue';
+import { EyeOutlined, DeleteOutlined, CheckOutlined } from '@vicons/antd';
+import { TableAction } from '@/components/Table';
+import { getMessageProfile, messageDelete, messageBatchDelete, setRead } from '@/api/dashboard/message';
+import { columns } from './columns';
+import editDialog from './edit.vue';
+import { useMessage, useDialog } from 'naive-ui';
+import { renderIcon } from '@/utils';
+const messageId = ref(0)
+const message = useMessage();
+const dialog = useDialog()
+const activeName = ref(1)
+const messageTypeList = ref([
+  {
+    name: '系统通知',
+    value: 1
+  },
+  {
+    name: '用户私信',
+    value: 2
+  },
+  {
+    name: '代办事项',
+    value: 3
+  },
+])
+const editVisible = ref(false)
+const createModalRef= ref()
+const selectionData = ref([])
+const tableRef = ref();
+const formParams = reactive({
+  type: 1
+});
+
+const loadDataTable = async (res: any) => {
+  selectionData.value = []
+  const result = await getMessageProfile({ ...formParams, ...res });
+  let item = messageTypeList.value.find((item, index) => item.value == activeName.value)
+  item.number = result.number
+  return result;
+};
+const actionColumn = reactive({
+  width: 300,
+  title: '操作',
+  align: 'center',
+  key: 'action',
+  fixed: 'right',
+  render(record) {
+    return h(TableAction as any, {
+      style: 'button',
+      actions: [
+        {
+          label: '确认',
+          icon: renderIcon(CheckOutlined),
+          type: 'info',
+          onClick: handleSetRead.bind(null, record),
+        },
+        {
+          label: '详情',
+          icon: renderIcon(EyeOutlined),
+          type: 'info',
+          onClick: handleInfo.bind(null, record),
+        },
+        {
+          label: '删除',
+          icon: renderIcon(DeleteOutlined),
+          type: 'error',
+          onClick: handleDelete.bind(null, record),
+        },
+      ],
+    });
+  },
+});
+function reloadTable(noRefresh = '') {
+  tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
+}
+const handleClick = (e) => {
+  activeName.value = e
+  formParams.type = e
+  reloadTable()
+}
+
+const handleInfo = async (record) => {
+  messageId.value = record.id
+  editVisible.value = true
+  await nextTick();
+  createModalRef.value.openModal();
+};
+
+async function handleDelete(record) {
+  dialog.warning({
+    title: '提示',
+    content: '确定要删除？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      record.id ? await messageDelete(record.id) : await messageBatchDelete(selectionData.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  })
+}
+async function handleSetRead(id) {
+  dialog.warning({
+    title: '提示',
+    content: '确定标记为已读？',
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      record.id ? await setRead(record.id) : await setRead(rowKeys.value);
+      message.success('删除成功');
+      reloadTable();
+    },
+  })
+}
+function onSelectionChange(value) {
+  selectionData.value = value
+}
+</script>