-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
74116c4
commit 6148b81
Showing
4 changed files
with
254 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 }, | ||
); | ||
} |
74 changes: 74 additions & 0 deletions
74
src/views/scrm/operation/group-send/components/create-group-send-form.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
107 changes: 107 additions & 0 deletions
107
src/views/scrm/operation/group-send/components/group-send-table.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |