From 6fdd1cfcdfc95f41bbc16274775c7f4ba0c2480a Mon Sep 17 00:00:00 2001
From: j-sentinel <2724650486@qq.com>
Date: Wed, 4 Oct 2023 18:32:53 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E][=E5=85=AC=E4=BC=97?=
 =?UTF-8?q?=E5=8F=B7]=E5=85=AC=E4=BC=97=E5=8F=B7=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=90=8E=E7=AB=AF=E4=BB=A3=E7=A0=81=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mp/template/index.ts           |  53 ++++++
 src/api/mp/user/index.ts               |   8 +
 src/views/mp/template/SendMessage.vue  | 228 +++++++++++++++++++++++++
 src/views/mp/template/TemplateForm.vue | 180 +++++++++++++++++++
 src/views/mp/template/index.vue        | 187 ++++++++++++++++++++
 5 files changed, 656 insertions(+)
 create mode 100644 src/api/mp/template/index.ts
 create mode 100644 src/views/mp/template/SendMessage.vue
 create mode 100644 src/views/mp/template/TemplateForm.vue
 create mode 100644 src/views/mp/template/index.vue

diff --git a/src/api/mp/template/index.ts b/src/api/mp/template/index.ts
new file mode 100644
index 000000000..29c186dd7
--- /dev/null
+++ b/src/api/mp/template/index.ts
@@ -0,0 +1,53 @@
+import request from '@/config/axios'
+
+// 同步公众号模板
+export const syncTemplate = (accountId) => {
+  return request.post({
+    url: '/mp/template/sync?accountId=' + accountId
+  })
+}
+
+// 获得公众号模板分页
+export const getTemplatePage = (query) => {
+  return request.get({
+    url: '/mp/template/page',
+    params: query
+  })
+}
+
+// 获得公众号模板
+export const getTemplate = (id) => {
+  return request.get({
+    url: '/mp/template/get?id=' + id
+  })
+}
+
+// 根据id获取模板
+export const getTemplateContent = (id) => {
+  return request.get({
+    url: '/mp/template/contentGet?id=' + id
+  })
+}
+
+// 更新公众号模板
+export const updateTemplate = (data) => {
+  return request.put({
+    url: '/mp/template/update',
+    data: data
+  })
+}
+
+// 删除公众号模板
+export const deleteTemplate = (id) => {
+  return request.delete({
+    url: '/mp/template/delete?id=' + id
+  })
+}
+
+// 批量发送公众号模板
+export const sendMsgBatchTemplate = (data) => {
+  return request.post({
+    url: '/mp/template/sendMsgBatch',
+    data: data
+  })
+}
diff --git a/src/api/mp/user/index.ts b/src/api/mp/user/index.ts
index d954e9eb1..5f39697b8 100644
--- a/src/api/mp/user/index.ts
+++ b/src/api/mp/user/index.ts
@@ -23,6 +23,14 @@ export const getUserPage = (query) => {
   })
 }
 
+// 获得公众号粉丝分页
+export const getUserPageEnhance = (query) => {
+  return request.get({
+    url: '/mp/user/pageEnhance',
+    params: query
+  })
+}
+
 // 同步公众号粉丝
 export const syncUser = (accountId) => {
   return request.post({
diff --git a/src/views/mp/template/SendMessage.vue b/src/views/mp/template/SendMessage.vue
new file mode 100644
index 000000000..b953ddec2
--- /dev/null
+++ b/src/views/mp/template/SendMessage.vue
@@ -0,0 +1,228 @@
+<template>
+  <Dialog v-model="dialogVisible" title="发送模板消息目标用户">
+    <el-form ref="formRef" v-loading="formLoading" :model="queryParams" label-width="100px">
+      <el-row :gutter="20">
+        <el-col :span="13">
+          <el-form-item label="用户标识" prop="url">
+            <el-input
+              v-model="queryParams.openid"
+              @keyup.enter="handleQuery"
+              placeholder="公众号用户的openId"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="用户昵称" prop="appid">
+            <el-input
+              v-model="queryParams.nickname"
+              @keyup.enter="handleQuery"
+              placeholder="公众号用户昵称"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="11">
+          <el-form-item label="用户省份" prop="appid">
+            <el-input
+              v-model="queryParams.province"
+              @keyup.enter="handleQuery"
+              placeholder="公众号用户所属省份"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="用户城市" prop="appid">
+            <el-input
+              v-model="queryParams.city"
+              @keyup.enter="handleQuery"
+              placeholder="公众号用户所属城市"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="13">
+          <el-form-item label="用户标签">
+            <el-select
+              v-model="queryParams.tagId"
+              filterable
+              placeholder="选择用户分组"
+              :loading="wxUsersLoading"
+            >
+              <el-option
+                v-for="item in wxUserTags"
+                :key="item.id"
+                :label="item.name"
+                :value="item.tagId"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="2" />
+        <el-col :span="9">
+          <el-button @click="handleQuery"> <Icon icon="ep:search" />筛选 </el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" /> 重置</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div class="user-list-send">
+      <div class="user-title-message">消息预览：</div>
+      <div class="template-area">
+        <el-input
+          type="textarea"
+          disabled
+          autosize
+          v-model="templateContent"
+          placeholder="模版加载中..."
+        />
+      </div>
+      <div class="user-title-message mb5">本消息将发送给：</div>
+      <div class="user-list" v-loading="wxUsersLoading">
+        <div class="user-card" v-for="item in wxUserList" :key="item.openid">
+          <el-avatar :src="item.headimgurl" />
+          <div class="nickname">{{ item.nickname }}</div>
+        </div>
+        <span v-show="totalCount > 10">...</span>
+        等共（ <span class="text-success">{{ totalCount }}</span> ）位用户
+      </div>
+    </div>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">发 送</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as MpTemplateApi from '@/api/mp/template'
+import * as MpUserApi from '@/api/mp/user'
+import * as MpTagApi from '@/api/mp/tag'
+
+defineOptions({ name: 'MpUserForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const wxUsersLoading = ref(false) // 发送的用户
+const wxUserList = ref([]) // 发送的用户组
+const totalCount = ref() // 可发送的用户数量
+const wxUserTags = ref([]) // 用户标签
+const formRef = ref() // 表单 Ref
+const templateContent = ref() // 模板内容
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  accountId: -1,
+  openid: '',
+  nickname: '',
+  province: '',
+  city: '',
+  tagId: []
+})
+const templateId = ref()
+
+/** 打开弹窗 */
+const open = async (id: number, accountId: number) => {
+  dialogVisible.value = true
+  resetForm()
+  try {
+    wxUsersLoading.value = true
+    queryParams.accountId = accountId
+    templateId.value = id
+    const userResponse = await MpUserApi.getUserPageEnhance(queryParams)
+    wxUserTags.value = await MpTagApi.getSimpleTagList()
+    totalCount.value = userResponse.total
+    wxUserList.value = userResponse.list
+
+    templateContent.value = await MpTemplateApi.getTemplateContent(id)
+  } finally {
+    wxUsersLoading.value = false
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 查询列表 */
+const getList = async () => {
+  try {
+    wxUsersLoading.value = true
+    console.log(queryParams)
+    const userData = await MpUserApi.getUserPageEnhance(queryParams)
+    wxUserList.value = userData.list
+    totalCount.value = userData.total
+  } finally {
+    wxUsersLoading.value = false
+  }
+}
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 提交请求
+  formLoading.value = true
+  try {
+    let newQueryParams = { ...queryParams }
+    newQueryParams.id = templateId.value
+    await MpTemplateApi.sendMsgBatchTemplate(newQueryParams)
+    message.success(t('common.success'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+const resetQuery = () => {
+  resetForm()
+  getList()
+}
+/** 重置表单 */
+const resetForm = () => {
+  queryParams.pageNo = 1
+  queryParams.pageSize = 10
+  queryParams.openid = ''
+  queryParams.nickname = ''
+  queryParams.province = ''
+  queryParams.city = ''
+  queryParams.tagId = []
+}
+</script>
+<style scoped>
+.user-list-send {
+  margin-top: 20px;
+  border: 1px dotted gray;
+  padding: 10px;
+}
+.user-title-message {
+  font-size: 15px;
+  font-weight: bold;
+}
+.template-area {
+  margin: 20px 0;
+}
+.user-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.user-card {
+  overflow: hidden;
+  max-width: 60px;
+  margin: 5px;
+  text-align: center;
+}
+.nickname {
+  color: #999999;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/views/mp/template/TemplateForm.vue b/src/views/mp/template/TemplateForm.vue
new file mode 100644
index 000000000..12513ff23
--- /dev/null
+++ b/src/views/mp/template/TemplateForm.vue
@@ -0,0 +1,180 @@
+<template>
+  <Dialog v-model="dialogVisible" title="修改">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData.value"
+      :rules="formRules"
+      label-width="100px"
+    >
+      <el-row>
+        <el-col :span="16">
+          <el-form-item label="标题" prop="title">
+            <el-input v-model="formData.value.title" placeholder="标题" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="有效" prop="status">
+            <el-switch
+              v-model="formData.value.status"
+              placeholder="是否有效"
+              :active-value="0"
+              :inactive-value="1"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="链接" prop="url">
+        <el-input v-model="formData.value.url" placeholder="跳转链接" />
+      </el-form-item>
+      <el-form-item label="小程序appid" prop="appid">
+        <el-input v-model="formData.value.appId" disabled placeholder="小程序appid" />
+      </el-form-item>
+      <el-form-item label="小程序路径" prop="pagePath">
+        <el-input v-model="formData.value.appPath" placeholder="小程序pagePath" />
+      </el-form-item>
+      <el-form-item label="模版名称" prop="templateId">
+        <el-input v-model="formData.value.templateId" placeholder="模版名称" />
+      </el-form-item>
+      <div class="message-fill">
+        <el-form-item class="form-group-title">消息填充数据，请对照模板内容填写</el-form-item>
+        <el-form-item>
+          <el-input
+            type="textarea"
+            disabled
+            autosize
+            v-model="formData.value.content"
+            placeholder="模版"
+          />
+        </el-form-item>
+        <el-row v-for="(item, index) in formData.value.messageData" :key="item.templateId">
+          <el-col :span="16">
+            <el-form-item :label="item.name" :prop="'data.' + index + '.value'">
+              <el-input
+                type="textarea"
+                autosize
+                rows="1"
+                v-model="item.value"
+                placeholder="填充内容"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="颜色">
+              <el-input type="color" v-model="item.color" placeholder="颜色" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as MpTemplateApi from '@/api/mp/template'
+
+defineOptions({ name: 'MpUserForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = reactive({
+  id: undefined,
+  templateId: '',
+  title: '',
+  messageData: [],
+  url: '',
+  appId: '',
+  appPath: '',
+  content: '',
+  status: true
+})
+// 表单的校验
+const formRules = reactive({
+  title: [{ required: true, message: '模板标题不能为空', trigger: 'blur' }],
+  messageData: [{ required: true, message: '模板内容不能为空', trigger: 'blur' }],
+  templateId: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const response = await MpTemplateApi.getTemplate(id)
+      formattingTemplate(response)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+const formattingTemplate = (data) => {
+  // 字段存在
+  if (data.messageData instanceof Array) {
+    formData.value = data
+  } else {
+    // 字段不存在，需要格式化
+    data.messageData = []
+    //示例： ["{{first.DATA}}", "{{keyword1.DATA}}", "{{keyword2.DATA}}", "{{remark.DATA}}"]
+    let keysArray = data.content.match(/\{\{(\w*)\.DATA\}\}/g) || []
+    keysArray.map((item) => {
+      // 匹配出.DATA前面
+      let name = item.replace('{{', '').replace('.DATA}}', '')
+      data.messageData.push({
+        name: name,
+        value: '',
+        color: '#000000'
+      })
+      console.log(data)
+      formData.value = data
+    })
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await MpTemplateApi.updateTemplate(formData.value)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    nickname: undefined,
+    remark: undefined,
+    tagIds: []
+  }
+  formRef.value?.resetFields()
+}
+</script>
+<style scoped>
+.message-fill {
+  border: 1px dotted gray;
+  padding: 10px;
+}
+</style>
diff --git a/src/views/mp/template/index.vue b/src/views/mp/template/index.vue
new file mode 100644
index 000000000..fdb374fea
--- /dev/null
+++ b/src/views/mp/template/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="公众号" prop="accountId">
+        <WxAccountSelect @change="onAccountChanged" />
+      </el-form-item>
+      <el-form-item label="模板名称" prop="templateId">
+        <el-input
+          v-model="queryParams.templateId"
+          placeholder="请输入名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="标题" prop="nickname">
+        <el-input
+          v-model="queryParams.title"
+          placeholder="请输入标题"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"> <Icon icon="ep:search" />搜索 </el-button>
+        <el-button @click="resetQuery"> <Icon icon="ep:refresh" />重置 </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleSync"
+          v-hasPermi="['mp:template:sync']"
+          :disabled="queryParams.accountId === 0"
+        >
+          <Icon icon="ep:refresh" class="mr-5px" /> 同步公众号模板
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" width="130" />
+      <el-table-column label="模版名称" align="center" prop="templateId" />
+      <el-table-column label="标题" align="center" prop="title" />
+      <el-table-column label="模版内容" align="center" prop="content" width="350" />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            type="primary"
+            link
+            @click="sendMessage(scope.row.id, queryParams.accountId)"
+            v-hasPermi="['mp:template:update']"
+          >
+            推送消息
+          </el-button>
+          <el-button
+            type="primary"
+            link
+            @click="openForm(scope.row.id)"
+            v-hasPermi="['mp:template:update']"
+          >
+            配置
+          </el-button>
+          <el-button
+            type="danger"
+            link
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['mp:template:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：修改 -->
+  <TemplateForm ref="formRef" @success="getList" />
+  <SendMessage ref="sendRef" @success="getList" />
+</template>
+<script lang="ts" setup>
+import * as MpTemplateApi from '@/api/mp/template'
+import WxAccountSelect from '@/views/mp/components/wx-account-select'
+import type { FormInstance } from 'element-plus'
+import TemplateForm from './TemplateForm.vue'
+import SendMessage from './SendMessage.vue'
+
+defineOptions({ name: 'MpUser' })
+
+const message = useMessage() // 消息
+
+const { t } = useI18n()
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref<any[]>([]) // 列表的数据
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  accountId: -1,
+  templateId: '',
+  title: ''
+})
+const queryFormRef = ref<FormInstance | null>(null) // 搜索的表单
+
+/** 侦听公众号变化 **/
+const onAccountChanged = (id: number) => {
+  queryParams.accountId = id
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 查询列表 */
+const getList = async () => {
+  try {
+    loading.value = true
+    const data = await MpTemplateApi.getTemplatePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  const accountId = queryParams.accountId
+  queryFormRef.value?.resetFields()
+  queryParams.accountId = accountId
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref(null)
+const openForm = (id: number) => {
+  formRef.value?.open(id)
+}
+
+/** 发送消息操作 */
+const sendRef = ref(null)
+const sendMessage = (id: number, accountId: number) => {
+  sendRef.value?.open(id, accountId)
+}
+
+/** 删除 */
+const handleDelete = async (id) => {
+  // 删除的二次确认
+  await message.delConfirm()
+  // 发起删除
+  await MpTemplateApi.deleteTemplate(id)
+  message.success(t('common.delSuccess'))
+  // 刷新列表
+  await getList()
+}
+/** 同步标签 */
+const handleSync = async () => {
+  try {
+    await message.confirm('是否确认同步公众号模板？')
+    await MpTemplateApi.syncTemplate(queryParams.accountId)
+    message.success('开始从微信公众号同步模板信息，同步需要一段时间，建议稍后再查询')
+    await getList()
+  } catch {}
+}
+</script>
-- 
Gitee