范围删除

src/api/ConfigApi.ts

@@ -27,6 +27,12 @@ export async function getDeviceAreaList({
     throw Error(resp.statusText);
   }
 }
+
+export async function deleteDeviceArea(id: number) {
+  const resp = await api.delete(`/api/config/device/area/${id}`);
+  return resp;
+}
+
 export interface IAreaConfigItem {
   id?: number;
   lineId: number;

src/components/RangeList.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import { IAreaConfigListItem, getDeviceAreaList } from 'src/api/ConfigApi';
+import {
+  IAreaConfigListItem,
+  getDeviceAreaList,
+  deleteDeviceArea,
+} from 'src/api/ConfigApi';
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import DraggableDialog from './common/DraggableDialog.vue';
 import { QTable } from 'quasar';
+import { errorNotify } from 'src/utils/CommonNotify';
 
 const lineId = useRoute().params.id as string;
 const tableRef = ref<QTable>();
@@ -57,6 +62,14 @@ const props = defineProps<{
 function onEdit(row: IAreaConfigListItem) {
   props.onEditClick(row);
 }
+function deleteData(row: IAreaConfigListItem) {
+  console.log(row);
+  try {
+    deleteDeviceArea(row.id);
+  } catch (err) {
+    errorNotify('删除失败:', err);
+  }
+}
 </script>
 
 <template>
@@ -80,11 +93,7 @@ function onEdit(row: IAreaConfigListItem) {
         <q-td :props="props">
           <div class="q-gutter-sm row justify-center">
             <q-btn color="primary" label="编辑" @click="onEdit(props.row)" />
-            <!-- <q-btn
+            <q-btn color="red" label="删除" @click="deleteData(props.row)" />
-              color="red"
-              label="删除"
-              @click="deleteData(props.row)"
-            /> -->
           </div>
         </q-td>
       </template>