Showing
1 changed file
with
38 additions
and
30 deletions
| @@ -19,14 +19,14 @@ | @@ -19,14 +19,14 @@ | ||
| 19 | </a-button> | 19 | </a-button> |
| 20 | </template> | 20 | </template> |
| 21 | <template #toolbar> | 21 | <template #toolbar> |
| 22 | - <Button @click="handleBatchAck" type="primary">批量处理</Button> | 22 | + <Button @click="handleBatchAck" type="primary" :disabled="getCanBatchAck">批量处理</Button> |
| 23 | </template> | 23 | </template> |
| 24 | </BasicTable> | 24 | </BasicTable> |
| 25 | <AlarmDetailDrawer @register="registerDetailDrawer" @success="handleSuccess" /> | 25 | <AlarmDetailDrawer @register="registerDetailDrawer" @success="handleSuccess" /> |
| 26 | </div> | 26 | </div> |
| 27 | </template> | 27 | </template> |
| 28 | <script lang="ts"> | 28 | <script lang="ts"> |
| 29 | - import { defineComponent, nextTick, h } from 'vue'; | 29 | + import { defineComponent, nextTick, h, computed } from 'vue'; |
| 30 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; | 30 | import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
| 31 | import { alarmColumns, alarmSearchSchemas } from './config/detail.config'; | 31 | import { alarmColumns, alarmSearchSchemas } from './config/detail.config'; |
| 32 | import { doBatchAckAlarm, getDeviceAlarm } from '/@/api/device/deviceManager'; | 32 | import { doBatchAckAlarm, getDeviceAlarm } from '/@/api/device/deviceManager'; |
| @@ -55,34 +55,36 @@ | @@ -55,34 +55,36 @@ | ||
| 55 | }, | 55 | }, |
| 56 | 56 | ||
| 57 | setup() { | 57 | setup() { |
| 58 | - const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({ | ||
| 59 | - title: '告警记录列表', | ||
| 60 | - api: getDeviceAlarm, | ||
| 61 | - columns: alarmColumns, | ||
| 62 | - useSearchForm: true, | ||
| 63 | - formConfig: { | ||
| 64 | - labelWidth: 120, | ||
| 65 | - schemas: alarmSearchSchemas, | ||
| 66 | - fieldMapToTime: [['alarmTime', ['startTime', 'endTime'], 'x']], | ||
| 67 | - }, | ||
| 68 | - bordered: true, | ||
| 69 | - showIndexColumn: false, | ||
| 70 | - showTableSetting: true, | ||
| 71 | - rowSelection: { | ||
| 72 | - type: 'checkbox', | ||
| 73 | - getCheckboxProps: (record: AlarmLogItem) => { | ||
| 74 | - return { | ||
| 75 | - disabled: record.status === AlarmStatus.CLEARED_ACK, | ||
| 76 | - }; | 58 | + const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, getRowSelection }] = |
| 59 | + useTable({ | ||
| 60 | + title: '告警记录列表', | ||
| 61 | + api: getDeviceAlarm, | ||
| 62 | + columns: alarmColumns, | ||
| 63 | + useSearchForm: true, | ||
| 64 | + formConfig: { | ||
| 65 | + labelWidth: 120, | ||
| 66 | + schemas: alarmSearchSchemas, | ||
| 67 | + fieldMapToTime: [['alarmTime', ['startTime', 'endTime'], 'x']], | ||
| 77 | }, | 68 | }, |
| 78 | - }, | ||
| 79 | - actionColumn: { | ||
| 80 | - width: 200, | ||
| 81 | - title: '操作', | ||
| 82 | - slots: { customRender: 'action' }, | ||
| 83 | - fixed: 'right', | ||
| 84 | - }, | ||
| 85 | - }); | 69 | + bordered: true, |
| 70 | + showIndexColumn: false, | ||
| 71 | + showTableSetting: true, | ||
| 72 | + clickToRowSelect: false, | ||
| 73 | + rowSelection: { | ||
| 74 | + type: 'checkbox', | ||
| 75 | + getCheckboxProps: (record: AlarmLogItem) => { | ||
| 76 | + return { | ||
| 77 | + disabled: record.status === AlarmStatus.CLEARED_ACK, | ||
| 78 | + }; | ||
| 79 | + }, | ||
| 80 | + }, | ||
| 81 | + actionColumn: { | ||
| 82 | + width: 200, | ||
| 83 | + title: '操作', | ||
| 84 | + slots: { customRender: 'action' }, | ||
| 85 | + fixed: 'right', | ||
| 86 | + }, | ||
| 87 | + }); | ||
| 86 | const [registerDetailDrawer, { openDrawer }] = useDrawer(); | 88 | const [registerDetailDrawer, { openDrawer }] = useDrawer(); |
| 87 | const handleDetail = (record: Recordable) => { | 89 | const handleDetail = (record: Recordable) => { |
| 88 | openDrawer(true, record); | 90 | openDrawer(true, record); |
| @@ -164,10 +166,15 @@ | @@ -164,10 +166,15 @@ | ||
| 164 | }; | 166 | }; |
| 165 | }; | 167 | }; |
| 166 | 168 | ||
| 169 | + const getCanBatchAck = computed(() => { | ||
| 170 | + const rowSelection = getRowSelection(); | ||
| 171 | + return !rowSelection.selectedRowKeys?.length; | ||
| 172 | + }); | ||
| 173 | + | ||
| 167 | const { createMessage } = useMessage(); | 174 | const { createMessage } = useMessage(); |
| 168 | const handleBatchAck = async () => { | 175 | const handleBatchAck = async () => { |
| 169 | const ids = getSelectRows<AlarmLogItem>().map((item) => item.id); | 176 | const ids = getSelectRows<AlarmLogItem>().map((item) => item.id); |
| 170 | - | 177 | + if (!ids.length) return; |
| 171 | await doBatchAckAlarm(ids); | 178 | await doBatchAckAlarm(ids); |
| 172 | createMessage.success('操作成功'); | 179 | createMessage.success('操作成功'); |
| 173 | clearSelectedRowKeys(); | 180 | clearSelectedRowKeys(); |
| @@ -181,6 +188,7 @@ | @@ -181,6 +188,7 @@ | ||
| 181 | handleSuccess, | 188 | handleSuccess, |
| 182 | handleViewAlarmDetails, | 189 | handleViewAlarmDetails, |
| 183 | handleBatchAck, | 190 | handleBatchAck, |
| 191 | + getCanBatchAck, | ||
| 184 | }; | 192 | }; |
| 185 | }, | 193 | }, |
| 186 | }); | 194 | }); |