Commit 0e1f79abcae3c54389947939afb589d4ceb63c65

Authored by xp.Huang
2 parents 353585c1 6000cf9a

Merge branch 'sqy_dev' into 'main'

feat : 新增消息批量删除的功能 fix:'修改首页样式部分,修改部分图表,fix:修复token过期没有权限问题' ,,,封装useBatchDelete批量删除的hook'

See merge request huang/yun-teng-iot-front!79
  1 +import { ref, computed } from 'vue';
  2 +import { useMessage } from '/@/hooks/web/useMessage';
  3 +/**
  4 + *
  5 + * @param deleteFn 要删除的API接口方法
  6 + * @param handleSuccess 刷新表格的方法
  7 + * @returns {
  8 + * hasBatchDelete: 是否可以删除
  9 + * selectionOptions 表格复选框配置项
  10 + * handleDeleteOrBatchDelete 删除方法,适用单一删除和批量删除。参数为null为批量删除
  11 + * }
  12 + *
  13 + */
  14 +export interface selectionOptions {
  15 + rowKey: string;
  16 + clickToRowSelect: boolean;
  17 + rowSelection: {
  18 + onChange: (selectedRowKeys: string[]) => void;
  19 + type: 'radio' | 'checkbox';
  20 + };
  21 +}
  22 +export const useBatchDelete = (
  23 + deleteFn: (deleteIds: string[]) => Promise<void>,
  24 + handleSuccess: () => void
  25 +) => {
  26 + const { createMessage } = useMessage();
  27 + const selectedRowIds = ref<string[]>([]);
  28 + const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0);
  29 + // 复选框事件
  30 + const onSelectRowChange = (selectedRowKeys: string[]) => {
  31 + selectedRowIds.value = selectedRowKeys;
  32 + };
  33 + const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
  34 + if (record) {
  35 + try {
  36 + await deleteFn([record.id]);
  37 + createMessage.success('删除联系人成功');
  38 + handleSuccess();
  39 + } catch (e) {
  40 + createMessage.error('删除失败');
  41 + }
  42 + } else {
  43 + try {
  44 + await deleteFn(selectedRowIds.value);
  45 + createMessage.success('批量删除联系人成功');
  46 + selectedRowIds.value = [];
  47 + handleSuccess();
  48 + } catch (e) {
  49 + createMessage.info('删除失败');
  50 + }
  51 + }
  52 + };
  53 + const selectionOptions: selectionOptions = {
  54 + rowKey: 'id',
  55 + clickToRowSelect: false,
  56 + rowSelection: {
  57 + onChange: onSelectRowChange,
  58 + type: 'checkbox',
  59 + },
  60 + };
  61 + return { hasBatchDelete, selectionOptions, handleDeleteOrBatchDelete };
  62 +};
@@ -12,7 +12,7 @@ export default { @@ -12,7 +12,7 @@ export default {
12 networkExceptionMsg: 12 networkExceptionMsg:
13 'Please check if your network connection is normal! The network is abnormal', 13 'Please check if your network connection is normal! The network is abnormal',
14 14
15 - errMsg401: 'no permission', 15 + errMsg401: '',
16 errMsg403: 'not authorized', 16 errMsg403: 'not authorized',
17 errMsg404: 'the resource was not found!', 17 errMsg404: 'the resource was not found!',
18 errMsg405: 'Network request error, request method not allowed!', 18 errMsg405: 'Network request error, request method not allowed!',
@@ -10,8 +10,7 @@ export default { @@ -10,8 +10,7 @@ export default {
10 apiRequestFailed: '请求出错,请稍候重试', 10 apiRequestFailed: '请求出错,请稍候重试',
11 networkException: '网络异常', 11 networkException: '网络异常',
12 networkExceptionMsg: '网络异常,请检查您的网络连接是否正常!', 12 networkExceptionMsg: '网络异常,请检查您的网络连接是否正常!',
13 -  
14 - errMsg401: '没有权限!', 13 + errMsg401: '',
15 errMsg403: '未授权', 14 errMsg403: '未授权',
16 errMsg404: '未找到该资源!', 15 errMsg404: '未找到该资源!',
17 errMsg405: '网络请求错误,请求方法未允许!', 16 errMsg405: '网络请求错误,请求方法未允许!',
@@ -10,7 +10,6 @@ import { SessionTimeoutProcessingEnum } from '/@/enums/appEnum'; @@ -10,7 +10,6 @@ import { SessionTimeoutProcessingEnum } from '/@/enums/appEnum';
10 const { createMessage, createErrorModal } = useMessage(); 10 const { createMessage, createErrorModal } = useMessage();
11 const error = createMessage.error!; 11 const error = createMessage.error!;
12 const stp = projectSetting.sessionTimeoutProcessing; 12 const stp = projectSetting.sessionTimeoutProcessing;
13 -  
14 export function checkStatus( 13 export function checkStatus(
15 status: number, 14 status: number,
16 msg: string, 15 msg: string,
@@ -19,7 +18,6 @@ export function checkStatus( @@ -19,7 +18,6 @@ export function checkStatus(
19 const { t } = useI18n(); 18 const { t } = useI18n();
20 const userStore = useUserStoreWithOut(); 19 const userStore = useUserStoreWithOut();
21 let errMessage = ''; 20 let errMessage = '';
22 -  
23 switch (status) { 21 switch (status) {
24 case 400: 22 case 400:
25 errMessage = `${msg}`; 23 errMessage = `${msg}`;
@@ -121,7 +121,6 @@ const transform: AxiosTransform = { @@ -121,7 +121,6 @@ const transform: AxiosTransform = {
121 const msg: string = response?.data?.msg ?? ''; 121 const msg: string = response?.data?.msg ?? '';
122 const err: string = error?.toString?.() ?? ''; 122 const err: string = error?.toString?.() ?? '';
123 let errMessage = ''; 123 let errMessage = '';
124 -  
125 try { 124 try {
126 console.log(response.data); 125 console.log(response.data);
127 if (response.data.status == '401' || response.data.message == '"Authentication failed"') { 126 if (response.data.status == '401' || response.data.message == '"Authentication failed"') {
@@ -41,23 +41,25 @@ @@ -41,23 +41,25 @@
41 src="/src/assets/images/alarm-count.png" 41 src="/src/assets/images/alarm-count.png"
42 style="width: 5rem; height: 5rem" 42 style="width: 5rem; height: 5rem"
43 /> 43 />
44 - <img  
45 - v-if="isAdmin(role)"  
46 - src="/src/assets/images/zh.png"  
47 - style="width: 5rem; height: 5rem"  
48 - /> 44 + <img v-else src="/src/assets/images/zh.png" style="width: 5rem; height: 5rem" />
49 </div> 45 </div>
50 <div class="flex-auto"> 46 <div class="flex-auto">
51 <div class="flex justify-between" style="align-items: center"> 47 <div class="flex justify-between" style="align-items: center">
  48 + <div v-if="!isAdmin(role)" style="font-size: 1.625rem; color: #333">{{
  49 + growCardList?.alarmInfo?.sumCount
  50 + }}</div>
52 <div style="font-size: 1.625rem; color: #333">{{ 51 <div style="font-size: 1.625rem; color: #333">{{
53 growCardList?.tenantInfo?.sumCount 52 growCardList?.tenantInfo?.sumCount
54 }}</div> 53 }}</div>
55 <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" /> 54 <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
56 </div> 55 </div>
57 - <div> {{ !isAdmin(role) ? '11月告警数(条)' : '租户总量(个)' }}</div> 56 + <div> {{ !isAdmin(role) ? `${currentMonth}月告警数(条)` : '租户总量(个)' }}</div>
58 </div> 57 </div>
59 </div> 58 </div>
60 - <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> 59 + <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
  60 + 今日新增 {{ growCardList?.alarmInfo?.todayAdd }}</div
  61 + >
  62 + <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
61 今日新增 {{ growCardList?.tenantInfo?.todayAdd }}</div 63 今日新增 {{ growCardList?.tenantInfo?.todayAdd }}</div
62 > 64 >
63 </Card> 65 </Card>
@@ -68,30 +70,47 @@ @@ -68,30 +70,47 @@
68 v-if="!isAdmin(role)" 70 v-if="!isAdmin(role)"
69 src="/src/assets/images/msg-count.png" 71 src="/src/assets/images/msg-count.png"
70 style="width: 5rem; height: 5rem" 72 style="width: 5rem; height: 5rem"
71 - /><img  
72 - v-if="isAdmin(role)"  
73 - src="/src/assets/images/kf.png"  
74 - style="width: 5rem; height: 5rem"  
75 - /> 73 + /><img v-else src="/src/assets/images/kf.png" style="width: 5rem; height: 5rem" />
76 </div> 74 </div>
77 - <div class="flex-auto"> 75 + <div v-if="!isAdmin(role)" style="display: flex; align-items: center">
  76 + <div>
  77 + <div class="flex" style="align-items: center">
  78 + {{ `${currentMonth}月数据点(条)` }}
  79 + <span style="font-size: 1.625rem; color: #333">
  80 + {{ growCardList?.messageInfo?.dataPointsCount }}</span
  81 + >
  82 + </div>
  83 + <div class="flex" style="align-items: center">
  84 + {{ `${currentMonth}月消息量(条)` }}
  85 + <span style="font-size: 1.625rem; color: #333">
  86 + {{ growCardList?.messageInfo?.messageCount }}</span
  87 + >
  88 + </div>
  89 + </div>
  90 + </div>
  91 + <div class="flex-auto" v-else>
78 <div class="flex justify-between" style="align-items: center"> 92 <div class="flex justify-between" style="align-items: center">
79 <div style="font-size: 1.625rem; color: #333">{{ 93 <div style="font-size: 1.625rem; color: #333">{{
80 growCardList?.customerInfo?.sumCount 94 growCardList?.customerInfo?.sumCount
81 }}</div> 95 }}</div>
82 <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" /> 96 <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
83 </div> 97 </div>
84 - <div> {{ !isAdmin(role) ? '11月消息量(条)' : '客户总量(个)' }} </div> 98 + <div>客户总量(个)</div>
85 </div> 99 </div>
86 </div> 100 </div>
87 - <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5"> 101 + <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
  102 + 今日新增
  103 + <span class="ml-8">数据点 ({{ growCardList?.messageInfo?.todayDataPointsAdd }})</span>
  104 + <span class="ml-8">消息量 ({{ growCardList?.messageInfo?.todayMessageAdd }})</span>
  105 + </div>
  106 + <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
88 今日新增 {{ growCardList?.customerInfo?.todayAdd }}</div 107 今日新增 {{ growCardList?.customerInfo?.todayAdd }}</div
89 > 108 >
90 </Card> 109 </Card>
91 </div> 110 </div>
92 </template> 111 </template>
93 <script lang="ts" setup> 112 <script lang="ts" setup>
94 - import { ref, onMounted } from 'vue'; 113 + import { ref, onMounted, computed } from 'vue';
95 import { Card } from 'ant-design-vue'; 114 import { Card } from 'ant-design-vue';
96 import { getHomeData } from '/@/api/dashboard'; 115 import { getHomeData } from '/@/api/dashboard';
97 import { isAdmin } from '/@/enums/roleEnum'; 116 import { isAdmin } from '/@/enums/roleEnum';
@@ -109,12 +128,26 @@ @@ -109,12 +128,26 @@
109 inActive: number; 128 inActive: number;
110 todayAdd: number; 129 todayAdd: number;
111 }; 130 };
112 - tenantInfo: { sumCount: number; todayAdd: number };  
113 - customerInfo: { sumCount: number; todayAdd: number }; 131 + tenantInfo?: { sumCount: number; todayAdd: number };
  132 + customerInfo?: { sumCount: number; todayAdd: number };
  133 + alarmInfo?: {
  134 + sumCount: number;
  135 + todayAdd: number;
  136 + };
  137 + messageInfo?: {
  138 + dataPointsCount: number;
  139 + messageCount: number;
  140 + todayDataPointsAdd: number;
  141 + todayMessageAdd: number;
  142 + };
114 } 143 }
115 const growCardList = ref<CardList>(); 144 const growCardList = ref<CardList>();
116 onMounted(async () => { 145 onMounted(async () => {
117 const res = await getHomeData(); 146 const res = await getHomeData();
118 growCardList.value = res; 147 growCardList.value = res;
119 }); 148 });
  149 + // 获取当前月份0-11 +1
  150 + const currentMonth = computed(() => {
  151 + return new Date().getMonth() + 1;
  152 + });
120 </script> 153 </script>
@@ -19,12 +19,10 @@ @@ -19,12 +19,10 @@
19 </div> 19 </div>
20 </template> 20 </template>
21 <div v-show="activeKey === '1'"> 21 <div v-show="activeKey === '1'">
22 - <p class="center">告警数</p>  
23 <!-- 折线图 --> 22 <!-- 折线图 -->
24 <VisitAnalysis :alarmList="state.alarmList" /> 23 <VisitAnalysis :alarmList="state.alarmList" />
25 </div> 24 </div>
26 <div v-show="activeKey === '2'"> 25 <div v-show="activeKey === '2'">
27 - <p class="center">消息量</p>  
28 <!-- 柱形图 --> 26 <!-- 柱形图 -->
29 <VisitAnalysisBar :dataPointList="state.dataPointList" :messageList="state.messageList" /> 27 <VisitAnalysisBar :dataPointList="state.dataPointList" :messageList="state.messageList" />
30 </div> 28 </div>
@@ -170,7 +168,7 @@ @@ -170,7 +168,7 @@
170 for (const item of createdAlarmsCountHourly) { 168 for (const item of createdAlarmsCountHourly) {
171 newArray.push([item.ts, item.value]); 169 newArray.push([item.ts, item.value]);
172 } 170 }
173 - state.alarmList = [[...state.alarmItem], ...newArray]; 171 + state.alarmList = newArray;
174 } 172 }
175 } else { 173 } else {
176 if (data) { 174 if (data) {
@@ -200,8 +198,8 @@ @@ -200,8 +198,8 @@
200 for (const item of transportMsgCountHourly) { 198 for (const item of transportMsgCountHourly) {
201 newArray1.push([item.ts, item.value]); 199 newArray1.push([item.ts, item.value]);
202 } 200 }
203 - state.dataPointList = [[...state.dataPoint], ...newArray];  
204 - state.messageList = [[...state.MsgCount], ...newArray1]; 201 + state.dataPointList = newArray;
  202 + state.messageList = newArray1;
205 } 203 }
206 } 204 }
207 }, 205 },
@@ -316,7 +314,7 @@ @@ -316,7 +314,7 @@
316 if (activeIndex.value === index) return; 314 if (activeIndex.value === index) return;
317 activeIndex.value = index; 315 activeIndex.value = index;
318 dateValue.value = ''; 316 dateValue.value = '';
319 - let interval = 3600000; 317 + let interval = 300000;
320 if (value === 86400000) { 318 if (value === 86400000) {
321 interval = 7200000; 319 interval = 7200000;
322 } else if (value === 604800000 || value === 2592000000) { 320 } else if (value === 604800000 || value === 2592000000) {
@@ -342,11 +340,11 @@ @@ -342,11 +340,11 @@
342 }); 340 });
343 send(sendValue); 341 send(sendValue);
344 342
345 - console.log(JSON.parse(sendValue), '----interval'); 343 + console.log(JSON.parse(sendValue), '----interval', state.alarmList);
346 } 344 }
347 </script> 345 </script>
348 346
349 -<style scoped lang="less"> 347 +<style lang="less">
350 .center { 348 .center {
351 display: flex; 349 display: flex;
352 justify-content: center; 350 justify-content: center;
1 <template> 1 <template>
2 - <div ref="chartRef" :style="{ height, width }"></div> 2 + <div>
  3 + <p class="center">告警数</p>
  4 + <div ref="chartRef" :style="{ height, width }" v-show="alarmList.length"></div>
  5 + <div v-show="!alarmList.length">暂无数据</div>
  6 + </div>
3 </template> 7 </template>
4 <script lang="ts" setup> 8 <script lang="ts" setup>
5 import { onMounted, ref, Ref, withDefaults, watch } from 'vue'; 9 import { onMounted, ref, Ref, withDefaults, watch } from 'vue';
1 <template> 1 <template>
2 - <div ref="chartRef" :style="{ height, width }"></div> 2 + <div>
  3 + <p class="center">消息量</p>
  4 + <div ref="chartRef" :style="{ height, width }" v-show="dataPointList.length"></div>
  5 + <div v-show="!dataPointList.length">暂无数据</div>
  6 + </div>
3 </template> 7 </template>
4 <script lang="ts" setup> 8 <script lang="ts" setup>
5 import { ref, Ref, watch, withDefaults } from 'vue'; 9 import { ref, Ref, watch, withDefaults } from 'vue';
@@ -22,6 +26,15 @@ @@ -22,6 +26,15 @@
22 watch( 26 watch(
23 () => [props.dataPointList, props.messageList], 27 () => [props.dataPointList, props.messageList],
24 ([newValue, newValue1]) => { 28 ([newValue, newValue1]) => {
  29 + // 计算总量
  30 + let dataPointTotal = 0;
  31 + let messageTotal = 0;
  32 + for (const item of newValue) {
  33 + dataPointTotal += Number(item[1]);
  34 + }
  35 + for (const item of newValue1) {
  36 + messageTotal += Number(item[1]);
  37 + }
25 setOptions({ 38 setOptions({
26 tooltip: { 39 tooltip: {
27 trigger: 'axis', 40 trigger: 'axis',
@@ -34,8 +47,13 @@ @@ -34,8 +47,13 @@
34 }, 47 },
35 legend: { 48 legend: {
36 data: ['传输数据点', '传输消息量'], 49 data: ['传输数据点', '传输消息量'],
37 - left: '10%', 50 + left: '5%',
  51 + orient: 'vertical',
  52 + formatter: (name) => {
  53 + return name === '传输数据点' ? `${name} ${dataPointTotal}` : `${name} ${messageTotal}`;
  54 + },
38 }, 55 },
  56 +
39 yAxis: {}, 57 yAxis: {},
40 grid: { 58 grid: {
41 left: '3%', 59 left: '3%',
@@ -45,18 +63,18 @@ @@ -45,18 +63,18 @@
45 }, 63 },
46 series: [ 64 series: [
47 { 65 {
48 - name: '传输消息量', 66 + name: '传输数据点',
49 type: 'bar', 67 type: 'bar',
50 stack: 'total', 68 stack: 'total',
51 - data: newValue1,  
52 - color: '#5c7bd9', 69 + data: newValue,
  70 + color: '#9fe080',
53 }, 71 },
54 { 72 {
55 - name: '传输数据点', 73 + name: '传输消息量',
56 type: 'bar', 74 type: 'bar',
57 stack: 'total', 75 stack: 'total',
58 - data: newValue,  
59 - color: '#9fe080', 76 + data: newValue1,
  77 + color: '#5c7bd9',
60 }, 78 },
61 ], 79 ],
62 }); 80 });
src/views/message/records/data.ts renamed from src/views/message/records/data.tsx
@@ -15,37 +15,3 @@ export const achieveList: TabItem[] = [ @@ -15,37 +15,3 @@ export const achieveList: TabItem[] = [
15 component: 'EmailLog', 15 component: 'EmailLog',
16 }, 16 },
17 ]; 17 ];
18 -  
19 -export const actions: any[] = [  
20 - { icon: 'clarity:star-line', text: '156', color: '#018ffb' },  
21 - { icon: 'bx:bxs-like', text: '156', color: '#459ae8' },  
22 - { icon: 'bx:bxs-message-dots', text: '2', color: '#42d27d' },  
23 -];  
24 -  
25 -export const articleList = (() => {  
26 - const result: any[] = [];  
27 - for (let i = 0; i < 4; i++) {  
28 - result.push({  
29 - title: 'Vben Admin',  
30 - description: ['Vben', '设计语言', 'Typescript'],  
31 - content: '基于Vue Next, TypeScript, Ant Design实现的一套完整的企业级后台管理系统。',  
32 - time: '2020-11-14 11:20',  
33 - });  
34 - }  
35 - return result;  
36 -})();  
37 -  
38 -export const applicationList = (() => {  
39 - const result: any[] = [];  
40 - for (let i = 0; i < 8; i++) {  
41 - result.push({  
42 - title: 'Vben Admin',  
43 - icon: 'emojione-monotone:letter-a',  
44 - color: '#1890ff',  
45 - active: '100',  
46 - new: '1,799',  
47 - download: 'bx:bx-download',  
48 - });  
49 - }  
50 - return result;  
51 -})();  
@@ -3,6 +3,14 @@ @@ -3,6 +3,14 @@
3 <BasicTable @register="registerTable"> 3 <BasicTable @register="registerTable">
4 <template #toolbar> 4 <template #toolbar>
5 <a-button type="primary" @click="handleCreate"> 导出 </a-button> 5 <a-button type="primary" @click="handleCreate"> 导出 </a-button>
  6 + <a-button
  7 + type="primary"
  8 + color="error"
  9 + @click="handleDeleteOrBatchDelete(null)"
  10 + :disabled="hasBatchDelete"
  11 + >
  12 + 批量删除
  13 + </a-button>
6 </template> 14 </template>
7 <template #action="{ record }"> 15 <template #action="{ record }">
8 <TableAction 16 <TableAction
@@ -18,7 +26,7 @@ @@ -18,7 +26,7 @@
18 color: 'error', 26 color: 'error',
19 popConfirm: { 27 popConfirm: {
20 title: '是否确认删除', 28 title: '是否确认删除',
21 - confirm: handleDelete.bind(null, record), 29 + confirm: handleDeleteOrBatchDelete.bind(null, record),
22 }, 30 },
23 }, 31 },
24 ]" 32 ]"
@@ -33,16 +41,19 @@ @@ -33,16 +41,19 @@
33 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 41 import { BasicTable, useTable, TableAction } from '/@/components/Table';
34 import { useDrawerInner } from '/@/components/Drawer'; 42 import { useDrawerInner } from '/@/components/Drawer';
35 import { columns, searchFormSchema } from './email.data'; 43 import { columns, searchFormSchema } from './email.data';
36 - import { useMessage } from '/@/hooks/web/useMessage';  
37 import { mailLogPage, deleteMailLog } from '/@/api/message/records'; 44 import { mailLogPage, deleteMailLog } from '/@/api/message/records';
38 import { useModal } from '/@/components/Modal'; 45 import { useModal } from '/@/components/Modal';
39 import EmailDetail from '/@/views/message/records/item/EmailDetail.vue'; 46 import EmailDetail from '/@/views/message/records/item/EmailDetail.vue';
  47 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
40 export default defineComponent({ 48 export default defineComponent({
41 name: 'EmailLog', 49 name: 'EmailLog',
42 components: { EmailDetail, BasicTable, TableAction }, 50 components: { EmailDetail, BasicTable, TableAction },
43 setup() { 51 setup() {
44 const [registerModal, { openModal }] = useModal(); 52 const [registerModal, { openModal }] = useModal();
45 - const { createMessage } = useMessage(); 53 + const { hasBatchDelete, selectionOptions, handleDeleteOrBatchDelete } = useBatchDelete(
  54 + deleteMailLog,
  55 + handleSuccess
  56 + );
46 const [register] = useDrawerInner(() => {}); 57 const [register] = useDrawerInner(() => {});
47 const [registerTable, { reload }] = useTable({ 58 const [registerTable, { reload }] = useTable({
48 title: '邮件发送列表', 59 title: '邮件发送列表',
@@ -64,7 +75,7 @@ @@ -64,7 +75,7 @@
64 slots: { customRender: 'action' }, 75 slots: { customRender: 'action' },
65 fixed: 'right', 76 fixed: 'right',
66 }, 77 },
67 - immediate: true, 78 + ...selectionOptions,
68 }); 79 });
69 80
70 function handleCreate() {} 81 function handleCreate() {}
@@ -75,14 +86,6 @@ @@ -75,14 +86,6 @@
75 }); 86 });
76 } 87 }
77 88
78 - function handleDelete(record: Recordable) {  
79 - let ids = [record.id];  
80 - deleteMailLog(ids).then((result) => {  
81 - createMessage.success(result.message);  
82 - handleSuccess();  
83 - });  
84 - }  
85 -  
86 function handleSuccess() { 89 function handleSuccess() {
87 reload(); 90 reload();
88 } 91 }
@@ -92,7 +95,8 @@ @@ -92,7 +95,8 @@
92 registerTable, 95 registerTable,
93 registerModal, 96 registerModal,
94 handleCreate, 97 handleCreate,
95 - handleDelete, 98 + hasBatchDelete,
  99 + handleDeleteOrBatchDelete,
96 handleModal, 100 handleModal,
97 handleSuccess, 101 handleSuccess,
98 }; 102 };
@@ -2,7 +2,15 @@ @@ -2,7 +2,15 @@
2 <div style="background-color: #f0f2f5"> 2 <div style="background-color: #f0f2f5">
3 <BasicTable @register="registerTable"> 3 <BasicTable @register="registerTable">
4 <template #toolbar> 4 <template #toolbar>
5 - <a-button type="primary" @click="handleCreate"> 导出 </a-button> 5 + <a-button type="primary" @click="handleExport"> 导出 </a-button>
  6 + <a-button
  7 + type="primary"
  8 + color="error"
  9 + @click="handleDeleteOrBatchDelete(null)"
  10 + :disabled="hasBatchDelete"
  11 + >
  12 + 批量删除
  13 + </a-button>
6 </template> 14 </template>
7 <template #action="{ record }"> 15 <template #action="{ record }">
8 <TableAction 16 <TableAction
@@ -18,7 +26,7 @@ @@ -18,7 +26,7 @@
18 color: 'error', 26 color: 'error',
19 popConfirm: { 27 popConfirm: {
20 title: '是否确认删除', 28 title: '是否确认删除',
21 - confirm: handleDelete.bind(null, record), 29 + confirm: handleDeleteOrBatchDelete.bind(null, record),
22 }, 30 },
23 }, 31 },
24 ]" 32 ]"
@@ -29,21 +37,22 @@ @@ -29,21 +37,22 @@
29 </template> 37 </template>
30 <script lang="ts"> 38 <script lang="ts">
31 import { defineComponent, h } from 'vue'; 39 import { defineComponent, h } from 'vue';
32 -  
33 import { BasicTable, useTable, TableAction } from '/@/components/Table'; 40 import { BasicTable, useTable, TableAction } from '/@/components/Table';
34 - import { useDrawerInner } from '/@/components/Drawer';  
35 import { columns, searchFormSchema } from './sms.data'; 41 import { columns, searchFormSchema } from './sms.data';
36 import { Modal } from 'ant-design-vue'; 42 import { Modal } from 'ant-design-vue';
37 - import { useMessage } from '/@/hooks/web/useMessage';  
38 import { smsLogPage, deleteSmsLog } from '/@/api/message/records'; 43 import { smsLogPage, deleteSmsLog } from '/@/api/message/records';
39 import { JsonPreview } from '/@/components/CodeEditor'; 44 import { JsonPreview } from '/@/components/CodeEditor';
  45 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
40 46
41 export default defineComponent({ 47 export default defineComponent({
42 name: 'SmsLog', 48 name: 'SmsLog',
43 components: { BasicTable, TableAction }, 49 components: { BasicTable, TableAction },
44 setup() { 50 setup() {
45 - const { createMessage } = useMessage();  
46 - const [register] = useDrawerInner(() => {}); 51 + // 批量删除的hooks
  52 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
  53 + deleteSmsLog,
  54 + handleSuccess
  55 + );
47 const [registerTable, { reload }] = useTable({ 56 const [registerTable, { reload }] = useTable({
48 title: '短信发送列表', 57 title: '短信发送列表',
49 api: smsLogPage, 58 api: smsLogPage,
@@ -64,10 +73,8 @@ @@ -64,10 +73,8 @@
64 slots: { customRender: 'action' }, 73 slots: { customRender: 'action' },
65 fixed: 'right', 74 fixed: 'right',
66 }, 75 },
  76 + ...selectionOptions,
67 }); 77 });
68 -  
69 - function handleCreate() {}  
70 -  
71 function handleQuery(record: Recordable) { 78 function handleQuery(record: Recordable) {
72 Modal.info({ 79 Modal.info({
73 title: '当前配置', 80 title: '当前配置',
@@ -75,26 +82,19 @@ @@ -75,26 +82,19 @@
75 content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.templateParam)) }), 82 content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.templateParam)) }),
76 }); 83 });
77 } 84 }
78 -  
79 - function handleDelete(record: Recordable) {  
80 - let ids = [record.id];  
81 - deleteSmsLog(ids).then((result) => {  
82 - createMessage.success(result.message);  
83 - handleSuccess();  
84 - });  
85 - }  
86 - 85 + // 导出 TODO:待做
  86 + const handleExport = () => {};
  87 + // 刷新表格
87 function handleSuccess() { 88 function handleSuccess() {
88 reload(); 89 reload();
89 } 90 }
90 91
91 return { 92 return {
92 - register, 93 + hasBatchDelete,
93 registerTable, 94 registerTable,
94 - handleCreate,  
95 - handleDelete,  
96 - handleSuccess, 95 + handleExport,
97 handleQuery, 96 handleQuery,
  97 + handleDeleteOrBatchDelete,
98 }; 98 };
99 }, 99 },
100 }); 100 });