Commit 0e1f79abcae3c54389947939afb589d4ceb63c65
Merge branch 'sqy_dev' into 'main'
feat : 新增消息批量删除的功能 fix:'修改首页样式部分,修改部分图表,fix:修复token过期没有权限问题' ,,,封装useBatchDelete批量删除的hook' See merge request huang/yun-teng-iot-front!79
Showing
12 changed files
with
192 additions
and
111 deletions
src/hooks/web/useBatchDelete.ts
0 → 100644
| 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 | }); |