|
|
@@ -1,105 +1,44 @@
|
|
|
<template>
|
|
|
<ele-modal
|
|
|
- form
|
|
|
:width="800"
|
|
|
v-model="visible"
|
|
|
- title="推送短信"
|
|
|
+ title="短信记录"
|
|
|
@open="handleOpen"
|
|
|
>
|
|
|
- <el-form
|
|
|
- ref="formRef"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- label-width="80px"
|
|
|
- @submit.prevent=""
|
|
|
- >
|
|
|
- <el-form-item label="短信类型" prop="type">
|
|
|
- <el-radio-group v-model="form.type" @change="handleChangeType">
|
|
|
- <el-radio
|
|
|
- :value="item.type"
|
|
|
- v-for="item in smsContentList"
|
|
|
- :key="item.type"
|
|
|
- >{{ item.typeName }}</el-radio
|
|
|
- >
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="短信预览" prop="remark">
|
|
|
- <el-input
|
|
|
- :rows="4"
|
|
|
- type="textarea"
|
|
|
- v-model="form.remark"
|
|
|
- disabled
|
|
|
- placeholder="请输入短信预览"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="推送历史" prop="records">
|
|
|
- <ele-data-table
|
|
|
- row-key="id"
|
|
|
- :columns="columns"
|
|
|
- :data="smsRecords"
|
|
|
- height="200px"
|
|
|
- :show-overflow-tooltip="true"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <common-table
|
|
|
+ ref="tableRef"
|
|
|
+ row-key="id"
|
|
|
+ :columns="columns"
|
|
|
+ :page-config="pageConfig"
|
|
|
+ height="400px"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ :tools="false"
|
|
|
+ :flex-table="false"
|
|
|
+ />
|
|
|
|
|
|
<template #footer>
|
|
|
<el-button @click="handleCancel">关闭</el-button>
|
|
|
- <el-button type="primary" @click="handleSubmit">确定</el-button>
|
|
|
</template>
|
|
|
</ele-modal>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import { ref, reactive, getCurrentInstance } from 'vue';
|
|
|
+ import { ref, reactive, nextTick } from 'vue';
|
|
|
import { EleMessage } from 'ele-admin-plus/es';
|
|
|
+ import CommonTable from '@/components/CommonPage/CommonTable.vue';
|
|
|
+ import request from '@/utils/request';
|
|
|
|
|
|
- const { proxy } = getCurrentInstance();
|
|
|
const emit = defineEmits(['success']);
|
|
|
|
|
|
/** 弹窗是否打开 */
|
|
|
const visible = defineModel({ type: Boolean });
|
|
|
+ const tableRef = ref(null);
|
|
|
+ const currentOrderId = ref(null);
|
|
|
|
|
|
- /** 表单引用 */
|
|
|
- const formRef = ref();
|
|
|
-
|
|
|
- /** SMS记录数据 */
|
|
|
- const smsRecords = ref([]);
|
|
|
-
|
|
|
- /** 短信内容列表 */
|
|
|
- const smsContentList = ref([]);
|
|
|
-
|
|
|
- const form = reactive({
|
|
|
- orderId: null,
|
|
|
- type: '',
|
|
|
- remark: ''
|
|
|
- });
|
|
|
-
|
|
|
- /** 短信类型变化 */
|
|
|
- const handleChangeType = (val) => {
|
|
|
- const found = smsContentList.value.find((item) => item.type === val);
|
|
|
- if (found) {
|
|
|
- form.remark = found.smsContent;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- /** 表单验证规则 */
|
|
|
- const rules = reactive({
|
|
|
- type: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: '请选择短信类型',
|
|
|
- trigger: 'change'
|
|
|
- }
|
|
|
- ],
|
|
|
- remark: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: '请输入短信预览',
|
|
|
- type: 'string',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
+ const pageConfig = reactive({
|
|
|
+ pageUrl: '', // Will be set dynamically
|
|
|
+ cacheKey: 'sms-log-table-refund',
|
|
|
+ params: {}
|
|
|
});
|
|
|
|
|
|
// 表格列配置
|
|
|
@@ -124,95 +63,19 @@
|
|
|
/** 关闭弹窗 */
|
|
|
const handleCancel = () => {
|
|
|
visible.value = false;
|
|
|
- resetForm();
|
|
|
- };
|
|
|
-
|
|
|
- /** 重置表单 */
|
|
|
- const resetForm = () => {
|
|
|
- form.orderId = null;
|
|
|
- form.type = '';
|
|
|
- form.remark = '';
|
|
|
- formRef.value?.resetFields();
|
|
|
- smsRecords.value = [];
|
|
|
};
|
|
|
|
|
|
/** 弹窗打开事件 */
|
|
|
const handleOpen = (row) => {
|
|
|
- resetForm();
|
|
|
- // 模拟获取数据,实际开发中可以使用 row.orderId 调用接口
|
|
|
- if (row) {
|
|
|
- form.orderId = row.orderId || 123;
|
|
|
- getSmsLogInfo(form.orderId);
|
|
|
- } else {
|
|
|
- // 如果没有 row 传入,也可以默认加载 mock 数据方便预览
|
|
|
- getSmsLogInfo(123);
|
|
|
+ if (row && row.orderId) {
|
|
|
+ currentOrderId.value = row.orderId;
|
|
|
+ pageConfig.pageUrl = `/shop/shopOrderSmsLog/orderSmsLogList/${row.orderId}`;
|
|
|
}
|
|
|
visible.value = true;
|
|
|
- };
|
|
|
-
|
|
|
- /** 获取短信记录信息 (Mock) */
|
|
|
- const getSmsLogInfo = (orderId) => {
|
|
|
- // 模拟 API 请求延迟
|
|
|
- setTimeout(() => {
|
|
|
- // Mock data
|
|
|
- smsContentList.value = [
|
|
|
- {
|
|
|
- type: 'urge',
|
|
|
- typeName: '催发货提醒',
|
|
|
- smsContent: '亲,您的订单已发货,请注意查收。'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'receive',
|
|
|
- typeName: '收货提醒',
|
|
|
- smsContent: '亲,您的宝贝已送达,请确认收货。'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'good_review',
|
|
|
- typeName: '好评提醒',
|
|
|
- smsContent: '亲,如果您对宝贝满意,请给个好评哦~'
|
|
|
- }
|
|
|
- ];
|
|
|
-
|
|
|
- smsRecords.value = [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- createName: '管理员',
|
|
|
- smsContent: '亲,您的订单已发货,请注意查收。',
|
|
|
- createTime: '2023-10-27 10:00:00',
|
|
|
- status: 1
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- createName: '客服小美',
|
|
|
- smsContent: '亲,您的宝贝已送达,请确认收货。',
|
|
|
- createTime: '2023-10-28 14:30:00',
|
|
|
- status: 1
|
|
|
- }
|
|
|
- ];
|
|
|
- }, 100);
|
|
|
- };
|
|
|
-
|
|
|
- /** 提交表单 */
|
|
|
- const handleSubmit = () => {
|
|
|
- formRef.value?.validate(async (valid) => {
|
|
|
- if (!valid) return;
|
|
|
-
|
|
|
- // 模拟提交
|
|
|
- setTimeout(() => {
|
|
|
- EleMessage.success('短信发送成功');
|
|
|
- // 添加一条记录到 mock 列表,模拟实时更新
|
|
|
- smsRecords.value.unshift({
|
|
|
- id: Date.now(),
|
|
|
- createName: '当前用户',
|
|
|
- smsContent: form.remark,
|
|
|
- createTime: new Date().toLocaleString(),
|
|
|
- status: 1
|
|
|
- });
|
|
|
- // 这里的业务逻辑是发送后不一定马上关闭,或者可以关闭
|
|
|
- // 参考 send-SMS.vue 是关闭的
|
|
|
- handleCancel();
|
|
|
- emit('success');
|
|
|
- }, 500);
|
|
|
+ nextTick(() => {
|
|
|
+ if (tableRef.value) {
|
|
|
+ tableRef.value.reload({ page: 1 });
|
|
|
+ }
|
|
|
});
|
|
|
};
|
|
|
|
|
|
@@ -222,5 +85,4 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- /* 可以在这里添加样式微调 */
|
|
|
</style>
|