daily commit

src/api/scrm/operation/group-send.ts

@@ -0,0 +1,43 @@
+import axios from 'axios';
+
+export interface GroupSendText {
+  content: string;
+}
+
+export interface GroupSendRequest {
+  chatType: string;
+  externalUserIds: string[];
+  text: GroupSendText;
+}
+
+export interface ListGroupSendLogRequest {
+  limit: number;
+  cursor: string;
+  chatType: string;
+  startTime: string;
+  endTime: string;
+  creator: string;
+}
+
+export interface WeWorkSendList {
+  msgId: string;
+  createTime: string;
+  textContent: string;
+  createType: string;
+}
+
+export interface ListGroupSendLogReply {
+  nextCursor: string;
+  sendList: WeWorkSendList[];
+}
+
+export function groupSend(request: GroupSendRequest) {
+  return axios.post('/api/v1/admin/scrm/operation/group-send', request);
+}
+
+export function listGroupSendLog(request: ListGroupSendLogRequest) {
+  return axios.get<ListGroupSendLogReply>(
+    '/api/v1/admin/scrm/operation/group-send-log',
+    { params: request },
+  );
+}

src/views/scrm/operation/group-send/components/create-group-send-form.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <a-form ref="formRef" :model="formModel" :rules="rules" @submit="onSubmit">
+      <a-form-item label="群发类型" field="chatType">
+        <a-select v-model="formModel.chatType">
+          <a-option value="single">客户</a-option>
+          <a-option value="group" disabled>客户群</a-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item v-if="isSingle" label="客户" field="externalUserIds">
+        <a-select v-model="formModel.externalUserIds" />
+      </a-form-item>
+      <a-form-item v-if="isGroup" label="客户群" field="customerGroup">
+        <a-select v-model="formModel.customerGroup" disabled />
+      </a-form-item>
+      <a-form-item label="群发文本内容" field="text">
+        <a-textarea v-model="formModel.text.content" />
+      </a-form-item>
+      <a-form-item>
+        <a-space size="large">
+          <a-button type="primary" html-type="submit">提交</a-button>
+          <a-button @click="formRef.resetFields()">重置</a-button>
+        </a-space>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { FieldRule, Message } from '@arco-design/web-vue';
+  import { groupSend } from '@/api/scrm/operation/group-send';
+
+  const formRef = ref();
+  const formModel = ref({
+    chatType: '',
+    externalUserIds: [] as any[],
+    customerGroup: '',
+    text: {
+      content: '',
+    },
+  });
+
+  const emit = defineEmits(['submitSuccess', 'submitFailed']);
+
+  const rules = {
+    chatType: [{ required: true, message: '请输入群发类型' }],
+    externalUserIds: [{ required: true, message: '请输入外部用户ID' }],
+    text: [{ required: true, message: '请输入群发文本内容' }],
+  } as Record<string, FieldRule[]>;
+
+  const isSingle = computed(() => formModel.value.chatType === 'single');
+  const isGroup = computed(() => formModel.value.chatType === 'group');
+
+  const onSubmit = async () => {
+    const err = await formRef.value.validate();
+    if (err !== undefined) {
+      Message.warning({ content: '请检查表单输入', duration: 5000 });
+      return;
+    }
+    groupSend(formModel.value)
+      .then((res) => {
+        Message.success({ content: '提交成功', duration: 5000 });
+        emit('submitSuccess');
+      })
+      .catch((error) => {
+        Message.error({
+          content: `提交失败: ${error.message}`,
+          duration: 5000,
+        });
+        emit('submitFailed', error);
+      });
+  };
+</script>

src/views/scrm/operation/group-send/components/group-send-table.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <a-card>
+      <a-form
+        ref="form"
+        :model="formModel"
+        layout="inline"
+        @submit="onSearch()"
+      >
+        <a-form-item label="群发类型" name="chatType">
+          <a-select
+            v-model="formModel.chatType"
+            :options="option.chatTypeOptions"
+          />
+        </a-form-item>
+        <a-form-item label="开始时间" name="startTime">
+          <a-date-picker v-model="formModel.startTime" />
+        </a-form-item>
+        <a-form-item label="结束时间" name="endTime">
+          <a-date-picker v-model="formModel.endTime" />
+        </a-form-item>
+        <a-form-item>
+          <a-space size="large">
+            <a-button type="primary" html-type="submit">搜索</a-button>
+            <a-button @click="(form as any).resetFields()">重置</a-button>
+          </a-space>
+        </a-form-item>
+      </a-form>
+      <a-table :data="tableData" style="margin-top: 24px">
+        <template #columns>
+          <a-table-column title="消息ID" data-index="messageId" />
+          <a-table-column title="消息类型" data-index="messageType" />
+          <a-table-column title="消息内容" data-index="messageContent" />
+        </template>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref } from 'vue';
+  import { listGroupSendLog } from '@/api/scrm/operation/group-send';
+
+  const form = ref();
+  const formModel = reactive({
+    chatType: '',
+    startTime: undefined,
+    endTime: undefined,
+  });
+
+  const option = reactive({
+    chatTypeOptions: [
+      { label: '客户', value: 'single' },
+      { label: '客户群', value: 'group' },
+    ],
+  });
+
+  const tableData = ref([] as any);
+  const tableMetadata = reactive({
+    cursorList: [] as any,
+    currentCursor: undefined,
+    nextCursor: undefined,
+  } as any);
+
+  function fetchTableData(req: any) {
+    listGroupSendLog(req).then((res) => {
+      tableData.value = res.data.sendList;
+      if (res.data.nextCursor) {
+        tableMetadata.nextCursor = res.data.nextCursor;
+      }
+    });
+  }
+
+  function getFormParams() {
+    const params = {
+      chatType: formModel.chatType,
+    } as any;
+    if (formModel.startTime) {
+      params.startTime = formModel.startTime;
+    }
+    if (formModel.endTime) {
+      params.endTime = formModel.endTime;
+    }
+    return params;
+  }
+
+  const onSearch = () => {
+    form.value.validate().then(() => {
+      fetchTableData(getFormParams());
+    });
+  };
+
+  // 翻页方法
+  const onPaginationChange = () => {
+    const params = getFormParams();
+    params.cursor = tableMetadata.nextCursor;
+    tableMetadata.cursorList.push(tableMetadata.nextCursor);
+    fetchTableData(params);
+    tableMetadata.currentCursor = tableMetadata.nextCursor;
+  };
+</script>
+
+<style scoped>
+  a-form-item {
+    margin-bottom: 16px;
+  }
+</style>

src/views/scrm/operation/group-send/index.vue

@@ -1,7 +1,35 @@
 <template>
-  <div class="container"> TODO: 客户群发 </div>
+  <div class="container">
+    <a-card>
+      <a-space>
+        <a-button type="primary" @click="state.createGroupSendVisible = true">
+          新建群发
+        </a-button>
+      </a-space>
+    </a-card>
+    <br />
+    <group-send-table />
+    <a-modal
+      v-model:visible="state.createGroupSendVisible"
+      title="新建群发"
+      width="800px"
+      destroy-on-close
+    >
+      <create-group-send-form
+        @submit-success="state.createGroupSendVisible = false"
+      />
+    </a-modal>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import GroupSendTable from '@/views/scrm/operation/group-send/components/group-send-table.vue';
+  import { reactive } from 'vue';
+  import CreateGroupSendForm from '@/views/scrm/operation/group-send/components/create-group-send-form.vue';
+
+  const state = reactive({
+    createGroupSendVisible: false,
+  });
+</script>
 
 <style scoped></style>