From 166eaf3e5f939906e01c631f0ffc1b9d78d74b8b Mon Sep 17 00:00:00 2001
From: hupeng <guchengwuyue@163.com>
Date: Sat, 9 Nov 2024 14:39:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E6=96=B0=E5=A2=9E=E5=8F=91?=
 =?UTF-8?q?=E9=82=AE=E4=BB=B6=E3=80=81=E5=8F=91=E7=9F=AD=E4=BF=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/crm/crmcustomer/index.ts          |   8 +
 .../components/email/MailTemplateSendForm.vue | 145 +++++++++++++++++
 .../components/sms/SmsTemplateSendForm.vue    | 154 ++++++++++++++++++
 .../src/views/crm/crmcustomer/index.vue       |  45 ++++-
 4 files changed, 344 insertions(+), 8 deletions(-)
 create mode 100644 yshop-crm-vue/src/views/components/email/MailTemplateSendForm.vue
 create mode 100644 yshop-crm-vue/src/views/components/sms/SmsTemplateSendForm.vue

diff --git a/yshop-crm-vue/src/api/crm/crmcustomer/index.ts b/yshop-crm-vue/src/api/crm/crmcustomer/index.ts
index 101dd29..2457c7f 100644
--- a/yshop-crm-vue/src/api/crm/crmcustomer/index.ts
+++ b/yshop-crm-vue/src/api/crm/crmcustomer/index.ts
@@ -76,6 +76,14 @@ export const CustomerApi = {
     return await request.download({ url: `/crm/customer/export-excel`, params })
   },
 
+   sendSms: async (data) => {
+    return await request.post({ url: `/crm/customer/send-sms`, data })
+  },
+  sendMail: async (data) => {
+    return await request.post({ url: `/crm/customer/send-mail`, data })
+  },
+  
+
 // ==================== 子表（联系人） ====================
 
   // 获得联系人列表
diff --git a/yshop-crm-vue/src/views/components/email/MailTemplateSendForm.vue b/yshop-crm-vue/src/views/components/email/MailTemplateSendForm.vue
new file mode 100644
index 0000000..bb4bfe5
--- /dev/null
+++ b/yshop-crm-vue/src/views/components/email/MailTemplateSendForm.vue
@@ -0,0 +1,145 @@
+<template>
+  <Dialog v-model="dialogVisible" title="发送邮件">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+    >
+      <el-form-item label="发送客户" prop="customerNames">
+          <el-input v-model="formData.customerNames" disabled placeholder="请输入客户名称" />
+      </el-form-item>
+      <el-form-item label="选择模板" prop="mailTemplate">
+        <el-select v-model="formData.mailTemplate" value-key="id" @change="changeTemplate" placeholder="选择模板" >
+          <el-option
+            v-for="item in templateList"
+            :key="item.id"
+            :label="item.name"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="模板内容" prop="content">
+        <Editor :model-value="formData.content" height="150px" readonly />
+      </el-form-item>
+      <el-form-item
+        v-for="param in formData.params"
+        :key="param"
+        :label="'参数 {' + param + '}'"
+        :prop="'templateParams.' + param"
+      >
+        <el-input
+          v-model="formData.templateParams[param]"
+          :placeholder="'请输入 ' + param + ' 参数'"
+        />
+      </el-form-item>
+    </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 MailTemplateApi from '@/api/system/mail/template'
+import { CustomerApi, CustomerVO } from '@/api/crm/crmcustomer'
+
+defineOptions({ name: 'SystemMailTemplateSendForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  customerNames: undefined,
+  customerIds: undefined,
+  content: '',
+  params: {},
+  mail: '',
+  templateCode: '',
+  templateParams: new Map(),
+  isCustomer: true
+})
+const formRules = reactive({
+  mailTemplate: [{ required: true, message: '清选择模板', trigger: 'blur' }],
+  templateCode: [{ required: true, message: '模版编号不能为空', trigger: 'blur' }],
+  templateParams: {}
+})
+const formRef = ref() // 表单 Ref
+const templateList = ref([])
+
+/** 打开弹窗 */
+const open = async (customers,type) => {
+  dialogVisible.value = true
+  resetForm()
+  formData.value.isCustomer = type
+  // 设置数据
+  formLoading.value = true
+  let namesArr = []
+  let idsArr = []
+  customers.forEach(value =>  {
+    namesArr.push(value.name)
+    idsArr.push(value.id)
+  })
+  formData.value.customerNames = namesArr.toString()
+  formData.value.customerIds = idsArr
+  try {
+    const data2 = await MailTemplateApi.getMailTemplatePage({status:0})
+    templateList.value = data2.list
+  } finally {
+    formLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    await CustomerApi.sendMail(data)
+   
+    message.success('提交发送成功！发送结果，见发送日志')
+  
+    dialogVisible.value = false
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const changeTemplate = (data) => {
+     // 设置动态表单
+    formData.value.content = data.content
+    formData.value.params = data.params
+    formData.value.templateCode = data.code
+    formData.value.templateParams = data.params.reduce((obj, item) => {
+      obj[item] = '' // 给每个动态属性赋值，避免无法读取
+      return obj
+    }, {})
+    formRules.templateParams = data.params.reduce((obj, item) => {
+      obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'blur' }
+      return obj
+    }, {})
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    customerNames: undefined,
+    customerIds: undefined,
+    content: '',
+    params: {},
+    mail: '',
+    templateCode: '',
+    templateParams: new Map()
+  }
+  formRules.templateParams = {}
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/yshop-crm-vue/src/views/components/sms/SmsTemplateSendForm.vue b/yshop-crm-vue/src/views/components/sms/SmsTemplateSendForm.vue
new file mode 100644
index 0000000..8b2a666
--- /dev/null
+++ b/yshop-crm-vue/src/views/components/sms/SmsTemplateSendForm.vue
@@ -0,0 +1,154 @@
+<template>
+  <Dialog v-model="dialogVisible" title="发送短信">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="140px"
+    >
+    <el-form-item label="发送客户" prop="customerNames">
+        <el-input v-model="formData.customerNames" disabled placeholder="请输入客户名称" />
+    </el-form-item>
+     <el-form-item label="选择模板" prop="smsTemplate">
+        <el-select v-model="formData.smsTemplate" value-key="id" @change="changeTemplate" placeholder="选择模板" >
+          <el-option
+            v-for="item in templateList"
+            :key="item.id"
+            :label="item.name"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="模板内容" prop="content">
+        <el-input
+          v-model="formData.content"
+          placeholder="请输入模板内容"
+          readonly
+          type="textarea"
+        />
+      </el-form-item>
+      <el-form-item
+        v-for="param in formData.params"
+        :key="param"
+        :label="'参数 {' + param + '}'"
+        :prop="'templateParams.' + param"
+      >
+        <el-input
+          v-model="formData.templateParams[param]"
+          :placeholder="'请输入 ' + param + ' 参数'"
+        />
+      </el-form-item>
+    </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 SmsTemplateApi from '@/api/system/sms/smsTemplate'
+import { CustomerApi, CustomerVO } from '@/api/crm/crmcustomer'
+
+defineOptions({ name: 'SystemSmsTemplateSendForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const templateList = ref([])
+
+// 发送短信表单相关
+const formData = ref({
+  customerNames: undefined,
+  customerIds: undefined,
+  content: '',
+  params: {},
+  smsTemplate: '',
+  templateCode: '',
+  templateParams: new Map(),
+  isCustomer: true
+})
+const formRules = reactive({
+  smsTemplate: [{ required: true, message: '清选择模板', trigger: 'blur' }],
+  templateCode: [{ required: true, message: '模版编码不能为空', trigger: 'blur' }],
+  templateParams: {}
+})
+const formRef = ref() // 表单 Ref
+
+const open = async (customers,type) => {
+  dialogVisible.value = true
+  resetForm()
+  // 设置数据
+  formLoading.value = true
+  formData.value.isCustomer = type
+
+  let namesArr = []
+  let idsArr = []
+  customers.forEach(value =>  {
+    namesArr.push(value.name)
+    idsArr.push(value.id)
+  })
+  formData.value.customerNames = namesArr.toString()
+  formData.value.customerIds = idsArr
+  try {
+    const data2 = await SmsTemplateApi.getSmsTemplatePage({status:0})
+    templateList.value = data2.list
+
+  
+  } finally {
+    formLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    await CustomerApi.sendSms(data)
+    
+    message.success('提交发送成功！发送结果，见发送日志')
+ 
+    dialogVisible.value = false
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const changeTemplate = (data) => {
+  console.log('val:',data)
+     // 设置动态表单
+    formData.value.content = data.content
+    formData.value.params = data.params
+    formData.value.templateCode = data.code
+    formData.value.templateParams = data.params.reduce((obj, item) => {
+      obj[item] = '' // 给每个动态属性赋值，避免无法读取
+      return obj
+    }, {})
+    formRules.templateParams = data.params.reduce((obj, item) => {
+      obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'blur' }
+      return obj
+    }, {})
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    customerNames: undefined,
+    customerIds: undefined,
+    content: '',
+    params: {},
+    mobile: '',
+    templateCode: '',
+    templateParams: new Map()
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/yshop-crm-vue/src/views/crm/crmcustomer/index.vue b/yshop-crm-vue/src/views/crm/crmcustomer/index.vue
index e9818cc..d3d0c9c 100644
--- a/yshop-crm-vue/src/views/crm/crmcustomer/index.vue
+++ b/yshop-crm-vue/src/views/crm/crmcustomer/index.vue
@@ -124,22 +124,28 @@
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
-        <!-- <el-button
-          type="success"
+        <el-button
           plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['crm:customer:export']"
+          @click="openSms"
+          :disabled = "isDisabled"
         >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button> -->
+          <Icon icon="ep:notification" class="mr-5px" /> 发短信
+        </el-button>
+        <el-button
+          plain
+          @click="openMail"
+          :disabled = "isDisabled"
+        >
+          <Icon icon="ep:message" class="mr-5px" /> 发邮件
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="40" />
       <el-table-column label="ID" align="center" prop="id" />
       <el-table-column label="客户名称" align="center" prop="name" width="200">
         <template #default="scope">
@@ -251,6 +257,8 @@
   <!-- 表单弹窗：添加/修改 -->
   <CustomerForm ref="formRef" @success="getList" />
   <RecordForm ref="recordFormRef"  />
+  <SmsTemplateSendForm ref="smsTemplateSendFormRef"  />
+  <MailTemplateSendForm ref="mailTemplateSendFormRef"  />
 </template>
 
 <script setup lang="ts">
@@ -260,6 +268,8 @@ import { CustomerApi, CustomerVO } from '@/api/crm/crmcustomer'
 import CustomerForm from './CustomerForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import RecordForm from '@/views/crm/crmrecord/RecordForm.vue'
+import SmsTemplateSendForm from '@/views/components/sms/SmsTemplateSendForm.vue'
+import MailTemplateSendForm from '@/views/components/email/MailTemplateSendForm.vue'
 
 /** 客户 列表 */
 defineOptions({ name: 'CrmCustomer' })
@@ -293,6 +303,8 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const activeIndex = ref('my')
+const selectCustomers = ref([])
+const isDisabled = ref(true)
 
 /** 查询列表 */
 const getList = async () => {
@@ -311,6 +323,13 @@ const getList = async () => {
   }
 }
 
+const handleSelectionChange = (val) => {
+  if(val.length > 0) {
+    isDisabled.value = false
+  }
+  selectCustomers.value = val
+}
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -379,6 +398,16 @@ const handleExport = async () => {
   }
 }
 
+const smsTemplateSendFormRef = ref()
+const openSms = () => {
+  smsTemplateSendFormRef.value.open(selectCustomers.value,true)
+}
+
+const mailTemplateSendFormRef = ref()
+const openMail = () => {
+  mailTemplateSendFormRef.value.open(selectCustomers.value,true)
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()