feat: 消息迁移

apps/web-antd/src/views/mp/message/index.vue

@@ -1,28 +1,196 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { Dayjs } from 'dayjs';
 
-import { Button } from 'ant-design-vue';
+import { reactive, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  DatePicker,
+  Form,
+  FormItem,
+  Input,
+  Modal,
+  Select,
+} from 'ant-design-vue';
+
+import { getMessagePage } from '#/api/mp/message';
+import WxAccountSelect from '#/views/mp/components/wx-account-select';
+import WxMsg from '#/views/mp/components/wx-msg';
+import { MsgType } from '#/views/mp/components/wx-msg/types';
+
+import MessageTable from './MessageTable.vue';
+
+defineOptions({ name: 'MpMessage' });
+
+const loading = ref(false);
+const total = ref(0); // 数据的总页数
+const list = ref<any[]>([]); // 当前页的列表数据
+
+// 搜索参数
+const queryParams = reactive<{
+  accountId: number;
+  createTime: [Dayjs, Dayjs] | undefined;
+  openid: string;
+  pageNo: number;
+  pageSize: number;
+  type: string;
+}>({
+  accountId: -1,
+  createTime: undefined,
+  openid: '',
+  pageNo: 1,
+  pageSize: 10,
+  type: MsgType.Text,
+});
+
+const queryFormRef = ref(); // 搜索的表单
+
+// 消息对话框
+const messageBoxVisible = ref(false);
+const messageBoxUserId = ref(0);
+
+/** 侦听accountId */
+const onAccountChanged = (id: number) => {
+  queryParams.accountId = id;
+  queryParams.pageNo = 1;
+  handleQuery();
+};
+
+/** 查询列表 */
+const handleQuery = () => {
+  queryParams.pageNo = 1;
+  getList();
+};
+
+const getList = async () => {
+  try {
+    loading.value = true;
+    const data = await getMessagePage(queryParams);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 重置按钮操作 */
+const resetQuery = async () => {
+  // 暂存 accountId，并在 reset 后恢复
+  const accountId = queryParams.accountId;
+  queryFormRef.value?.resetFields();
+  queryParams.accountId = accountId;
+  handleQuery();
+};
+
+/** 打开消息发送窗口 */
+const handleSend = async (userId: number) => {
+  messageBoxUserId.value = userId;
+  messageBoxVisible.value = true;
+};
+
+/** 分页改变事件 */
+const handlePageChange = (page: number, pageSize: number) => {
+  queryParams.pageNo = page;
+  queryParams.pageSize = pageSize;
+  getList();
+};
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+  <Page auto-content-height class="flex flex-col">
+    <!-- 搜索工作栏 -->
+    <div class="mb-4 rounded-lg bg-white p-4">
+      <Form
+        ref="queryFormRef"
+        :model="queryParams"
+        layout="inline"
+        class="search-form"
+      >
+        <FormItem label="公众号" name="accountId">
+          <WxAccountSelect @change="onAccountChanged" />
+        </FormItem>
+        <FormItem label="消息类型" name="type">
+          <Select
+            v-model:value="queryParams.type"
+            placeholder="请选择消息类型"
+            class="!w-[240px]"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </FormItem>
+        <FormItem label="用户标识" name="openid">
+          <Input
+            v-model:value="queryParams.openid"
+            placeholder="请输入用户标识"
+            allow-clear
+            class="!w-[240px]"
+          />
+        </FormItem>
+        <FormItem label="创建时间" name="createTime">
+          <DatePicker.RangePicker
+            v-model:value="queryParams.createTime"
+            :show-time="true"
+            class="!w-[240px]"
+          />
+        </FormItem>
+        <FormItem>
+          <a-button type="primary" @click="handleQuery">
+            <template #icon>
+              <IconifyIcon icon="mdi:magnify" />
+            </template>
+            搜索
+          </a-button>
+          <a-button class="ml-2" @click="resetQuery">
+            <template #icon>
+              <IconifyIcon icon="mdi:refresh" />
+            </template>
+            重置
+          </a-button>
+        </FormItem>
+      </Form>
+    </div>
+
+    <!-- 列表 -->
+    <div class="flex-1 rounded-lg bg-white p-4">
+      <MessageTable :list="list" :loading="loading" @send="handleSend" />
+      <div v-show="total > 0" class="mt-4 flex justify-end">
+        <a-pagination
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          show-size-changer
+          show-quick-jumper
+          :show-total="(total: number) => `共 ${total} 条`"
+          @change="handlePageChange"
+        />
+      </div>
+    </div>
+
+    <!-- 发送消息的弹窗 -->
+    <Modal
+      v-model:open="messageBoxVisible"
+      title="粉丝消息列表"
+      :width="800"
+      :footer="null"
+      destroy-on-close
     >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/message/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/message/index
-      代码，pull request 贡献给我们！
-    </Button>
+      <WxMsg :user-id="messageBoxUserId" />
+    </Modal>
   </Page>
 </template>
+
+<style scoped>
+.search-form :deep(.ant-form-item) {
+  margin-bottom: 16px;
+}
+</style>