Ferat

src/views/stuwork/dormbuildingmanger/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <!-- 表格 -->
+      <el-table 
+        :data="state.dataList" 
+        v-loading="state.loading" 
+        border 
+        :cell-style="tableStyle.cellStyle" 
+        :header-cell-style="tableStyle.headerCellStyle"
+        @sort-change="sortChangeHandle">
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="buildingNo" label="楼号" show-overflow-tooltip align="center" />
+        <el-table-column prop="username" label="管理员工号" show-overflow-tooltip align="center" />
+        <el-table-column label="操作" width="100" align="center" fixed="right">
+          <template #default="scope">
+            <el-button  
+              icon="Delete" 
+              text 
+              type="danger" 
+              @click="handleDelete(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <pagination 
+        @size-change="sizeChangeHandle" 
+        @current-change="currentChangeHandle" 
+        v-bind="state.pagination" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="DormBuildingManger">
+import { reactive } from 'vue'
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import { fetchList, delObjs } from "/@/api/stuwork/dormbuildingmanger";
+import { useMessage, useMessageBox } from "/@/hooks/message";
+
+// 配置 useTable
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: {},
+  pageList: fetchList,
+  props: {
+    item: 'records',
+    totalCount: 'total'
+  },
+  createdIsNeed: true
+})
+
+// table hook
+const {
+  getDataList,
+  currentChangeHandle,
+  sizeChangeHandle,
+  sortChangeHandle,
+  tableStyle
+} = useTable(state)
+
+// 删除
+const handleDelete = async (row: any) => {
+  try {
+    await useMessageBox().confirm('确定要删除该宿舍管理员吗？')
+    await delObjs([row.id])
+    useMessage().success('删除成功')
+    getDataList()
+  } catch (err: any) {
+    if (err !== 'cancel') {
+      useMessage().error(err.msg || '删除失败')
+    }
+  }
+}
+</script>
+