🚀 消息推送模块

2 years ago · fe879aa698
5 changed files with 90 additions and 408 deletions
--- a/src/views/common/push/pushMessage/ApplicationModal.vue
+++ b/src/views/common/push/pushMessage/ApplicationModal.vue
@ -1,78 +0,0 @@
 <template>
  <BasicModal v-bind="$attrs"
              width="720px"
              @register="registerModal"
              @ok="handleSubmit"
  >
    <BasicForm @register="registerForm"/>
  </BasicModal>
 </template>
 <script lang="ts" setup>
  /**
   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
   * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
   * author entfrm开发团队-王翔
   */
  import { ref, unref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSchema } from './application.data';
  import { addPushApplication, editPushApplication, getPushApplication } from '/@/api/platform/common/controller/pushApplication';
  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
  /** 通用变量统一声明区域 */
  const tag = ref<Nullable<string>>('');
  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
  const emit = defineEmits(['success', 'register']);
  const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
    labelWidth: 100,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: { span: 24 }
  });
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
    // 处理清除脏数据
    await resetFields();
    await clearValidate();
    // 处理设置数据
    tag.value = data._tag;
    const refId = data.record?.id;
    const props: Partial<ModalProps> = { confirmLoading: false };
    // 采用tag标签区分操作
    switch (unref(tag)) {
      case 'add':
        props.title = '新增应用';
        break;
      case 'edit':
        props.title = '编辑应用';
        await setFieldsValue(await getPushApplication(refId));
        break;
    }
    // 尾部:设置处理后的最终配置数据
    setModalProps(props);
  });
  /** 处理弹出框提交 */
  async function handleSubmit() {
    try {
      // 提取验证数据
      const formData = await validate();
      // 处理提交之前逻辑
      setModalProps({ confirmLoading: true });
      // 采用tag标签区分操作
      switch (unref(tag)) {
        case 'add':
          await addPushApplication(formData);
          break;
        case 'edit':
          await editPushApplication(formData);
          break;
      }
      // 处理提交完成之后逻辑
      closeModal();
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
 </script>
--- a/src/views/common/push/pushMessage/SendMessageModal.vue
+++ b/src/views/common/push/pushMessage/SendMessageModal.vue
@ -1,59 +0,0 @@
 <template>
  <BasicModal v-bind="$attrs"
              width="720px"
              @register="registerModal"
              @ok="handleSubmit"
  >
    <BasicForm @register="registerForm"/>
  </BasicModal>
 </template>
 <script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { sendFormSchema } from './application.data';
  import { sendMessage } from '/@/api/platform/common/controller/pushApplication';
  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
  import { ref } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const messageSecret = ref<Nullable<string>>('');
  const userStore = useUserStore();
  const userInfoStore = userStore.getUserInfo;
  const emit = defineEmits(['success', 'register']);
  const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, updateSchema }] = useForm({
    labelWidth: 150,
    schemas: sendFormSchema,
    showActionButtonGroup: false,
    baseColProps: { span: 24 }
  });
  const [registerModal, { setModalProps, closeModal, redoModalHeight }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
    // 处理清除脏数据
    await resetFields();
    await clearValidate();
    messageSecret.value = data.record?.messageSecret;
    const props: Partial<ModalProps> = { confirmLoading: false };
    props.title = '发送消息';
    // 尾部:设置处理后的最终配置数据
    setModalProps(props);
    redoModalHeight();
  });
  async function handleSubmit() {
    try {
      // 提取验证数据
      const formData = await validate();
      formData.fromUserId = userInfoStore.id;
      formData.messageSecret = messageSecret.value;
      // 处理提交之前逻辑
      setModalProps({ confirmLoading: true });
      await sendMessage(formData);
      // 处理提交完成之后逻辑
      closeModal();
      createMessage.success('发送成功!');
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
 </script>
--- a/src/views/common/push/pushMessage/application.data.ts
+++ b/src/views/common/push/pushMessage/application.data.ts
@ -1,219 +0,0 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 /** 表格列配置 */
 export const columns: BasicColumn[] = [
  {
    title: '应用名称',
    dataIndex: 'name'
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 120,
    customRender: ({record}) => {
      const status = record.status;
      const enable = ~~status === 0;
      const color = enable ? 'green' : 'red';
      const text = enable ? '开通' : '关闭';
      return h(Tag, { color: color }, () => text);
    }
  },
  {
    title: '限制ip',
    dataIndex: 'ip'
  },
  {
    title: '创建人',
    dataIndex: 'createByName'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 200
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    width: 200,
    customRender: ({record}) => {
      return  record.remarks ||  h(Tag, { color: 'red' }, () => '暂无数据');
    }
  }
 ];
 /** 搜索表单配置 */
 export const searchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '应用名称',
    component: 'Input',
    componentProps: {
      placeholder: '请输入应用名称',
    },
    colProps: { span: 6 }
  }
 ];
 /** 表单配置 */
 export const formSchema: FormSchema[] = [
  {
    field: 'id',
    label: 'ID',
    component: 'Input',
    show: false
  },
  {
    field: 'name',
    label: '应用名称',
    component: 'Input',
    required: true,
    colProps: {
      span: 24
    }
  },
  {
    field: 'ip',
    label: '限制ip',
    component: 'Input',
    colProps: {
      span: 12
    }
  },
  {
    field: 'status',
    label: '状态',
    component: 'RadioGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '开通', value: '0' },
        { label: '停止', value: '1' }
      ]
    },
    colProps: {
      span: 12
    }
  },
  {
    label: '备注',
    field: 'remarks',
    component: 'InputTextArea',
    componentProps: {
      rows: 6
    },
    colProps: {
      span: 24
    }
  }
 ];
 export const sendFormSchema: FormSchema[] = [
  {
    field: 'fromUserId',
    label: '发送方用户id',
    component: 'Input',
    show: false
  },
  {
    field: 'messageSecret',
    label: 'app发送密钥',
    component: 'Input',
    show: false
  },
  {
    field: 'title',
    label: '标题',
    component: 'Input',
    required: true,
    colProps: {
      span: 24
    }
  },
  {
    label: '通知文字描述',
    field: 'text',
    component: 'InputTextArea',
    required: true,
    componentProps: {
      rows: 6
    },
    colProps: {
      span: 24
    }
  },
  {
    label: '自定义通知声音',
    field: 'sound',
    component: 'Input',
    componentProps: {
      placeholder: '格式为R.raw.[sound]',
    },
    colProps: {
      span: 24
    }
  },
  {
    label: '自定义播放文件名称',
    field: 'customPlayFileName',
    component: 'Input',
    colProps: {
      span: 24
    }
  },
  {
    field: 'customTypeId',
    label: '自定义推送类型ID',
    component: 'Input',
    colProps: {
      span: 12
    }
  },
  {
    field: 'playVibrate',
    label: '收到通知是否震动',
    component: 'RadioGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '是', value: '0' },
        { label: '否', value: '1' }
      ]
    },
    colProps: {
      span: 12
    }
  },
  {
    field: 'playLights',
    label: '收到通知是否闪灯',
    component: 'RadioGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '是', value: '0' },
        { label: '否', value: '1' }
      ]
    },
    colProps: {
      span: 12
    }
  },
  {
    field: 'playSound',
    label: '收到通知是否发出声音',
    component: 'RadioGroup',
    defaultValue: '0',
    componentProps: {
      options: [
        { label: '是', value: '0' },
        { label: '否', value: '1' }
      ]
    },
    colProps: {
      span: 12
    }
  },
 ];
--- a/src/views/common/push/pushMessage/index.vue
+++ b/src/views/common/push/pushMessage/index.vue
@ -4,30 +4,13 @@
                @selection-change="handleSelectionChange"
    >
      <template #toolbar>
        <a-button type="primary"
                  @click="handleAdd()"
        >新增应用</a-button>
        <a-button type="primary"
                  :disabled="state.single"
                  @click="handleEdit()"
        >修改应用</a-button>
        <a-button type="primary"
                  :disabled="state.multiple"
                  @click="handleDel()"
-        >删除应用</a-button>
+        >删除消息</a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="[
          {
            label: '发送消息',
            icon: 'fa6-regular:message',
            onClick: handleSend.bind(null, record)
          },
          {
            label: '编辑',
            icon: 'fa6-regular:pen-to-square',
            onClick: handleEdit.bind(null, record)
          },
          {
            label: '删除',
            icon: 'ant-design:delete-outlined',
@ -37,26 +20,14 @@
        />
      </template>
    </BasicTable>
    <!--弹出窗体区域-->
    <ApplicationModal @register="registerModal" @success="handleRefreshTable"/>
    <SendMessageModal @register="registerSendModal"/>
  </div>
 </template>
 <script lang="ts" setup>
  /**
   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
   * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
   * author entfrm开发团队-王翔
   */
  import { reactive, toRaw } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { listPushApplication, delPushApplication } from '/@/api/platform/common/controller/pushApplication';
+  import { listPushMessage, delPushMessage } from '/@/api/platform/common/controller/pushMessage';
-  import { useModal } from '/@/components/Modal';
+  import { columns, searchFormSchema } from './message.data';
  import ApplicationModal from './ApplicationModal.vue';
  import SendMessageModal from './SendMessageModal.vue';
  import { columns, searchFormSchema } from './application.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  /** 类型规范统一声明定义区域 */
@ -73,11 +44,9 @@
    multiple: true
  });
  const { createConfirm, createMessage } = useMessage();
  const [registerModal, { openModal }] = useModal();
  const [registerSendModal, { openModal: openSendModal }] = useModal();
  const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
-    title: '推送应用列表',
+    title: '推送消息列表',
-    api: listPushApplication,
+    api: listPushMessage,
    rowKey: 'id',
    columns,
    formConfig: {
@ -108,21 +77,6 @@
    state.multiple = !rowSelection.length;
  }
  /** 新增按钮操作,行内新增与工具栏局域新增通用 */
  function handleAdd() {
    openModal(true,{ _tag: 'add' });
  }
  /** 编辑按钮操作,行内编辑 */
  function handleEdit(record?: Recordable) {
    record = record || { id: getSelectRowKeys() };
    openModal(true, { _tag: 'edit', record });
  }
  function handleSend(record?: Recordable) {
    openSendModal(true, { record });
  }
  /** 删除按钮操作,行内删除 */
  async function handleDel(record?: Recordable) {
    const ids = record?.id || getSelectRowKeys();
@ -131,7 +85,7 @@
      title: '警告',
      content: `是否确认删除编号为${ids}的数据?`,
      onOk: async () => {
-        await delPushApplication(ids);
+        await delPushMessage(ids);
        createMessage.success('删除成功!');
        handleRefreshTable();
      }
--- a/src/views/common/push/pushMessage/message.data.ts
+++ b/src/views/common/push/pushMessage/message.data.ts
@ -0,0 +1,84 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 /** 表格列配置 */
 export const columns: BasicColumn[] = [
  {
    title: '发送方用户id',
    dataIndex: 'fromUserId'
  },
  {
    title: '消息类型',
    dataIndex: 'type'
  },
  {
    title: '别名类型',
    dataIndex: 'aliasType'
  },
  {
    title: '别名',
    dataIndex: 'alias'
  },
  {
    title: '消息显示类型',
    dataIndex: 'displayType'
  },
  {
    title: '通知标题',
    dataIndex: 'title'
  },
  {
    title: '通知文字描述',
    dataIndex: 'text'
  },
  {
    title: '别名类型',
    dataIndex: 'aliasType'
  },
  {
    title: '别名类型',
    dataIndex: 'aliasType'
  },
  {
    title: '是否播放声音',
    dataIndex: 'playSound',
    customRender: ({record}) => {
      return  ~~record?.playSound === 0 ? '是' : '否';
    }
  },
  {
    title: '是否震动',
    dataIndex: 'playVibrate',
    customRender: ({record}) => {
      return  ~~record?.playVibrate === 0 ? '是' : '否';
    }
  },
  {
    title: '是否闪光',
    dataIndex: 'playLights',
    customRender: ({record}) => {
      return  ~~record?.playLights === 0 ? '是' : '否';
    }
  },
  {
    title: '自定义播放文件名称',
    dataIndex: 'customPlayFileName'
  },
  {
    title: '自定义活动点击跳转内容',
    dataIndex: 'custom'
  },
 ];
 /** 搜索表单配置 */
 export const searchFormSchema: FormSchema[] = [
  {
    field: 'fromUserId',
    label: '发送方用户id',
    component: 'Input',
    componentProps: {
      placeholder: '请输入发送方用户id',
    },
    colProps: { span: 6 }
  }
 ];