驾校关联

src/views/SchoolManagement/School/index.vue

@@ -1,7 +1,108 @@
 <template>
-  <div> 场地管理 </div>
+  <div>
+    <el-form :model="searchForm" ref="searchForm" label-width="0" inline>
+      <el-form-item>
+        <el-input
+          v-model="searchForm.name"
+          class="!w-240px"
+          placeholder="请输入驾校名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"> 搜索 </el-button>
+        <el-button @click="resetQuery"> 重置 </el-button>
+        <el-button plain type="primary" @click="openForm('create')"> 新增 </el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="tableList">
+      <el-table-column label="驾校名称" prop="name" />
+      <el-table-column label="负责人" prop="" />
+      <el-table-column label="联系方式" prop="" />
+      <el-table-column label="状态">
+        <template #default="{ row }">
+          <el-switch
+            v-model="row.status"
+            :active-value="true"
+            :inactive-value="false"
+            @change="changeStatus(row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" prop="" />
+      <el-table-column fixed="right" label="操作" width="150">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openForm(update, row)"> 修改 </el-button>
+          <el-button link type="danger" @click="handleDelete(row.id)"> 删除 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="searchForm.pageSize"
+      v-model:page="searchForm.pageNum"
+      :total="total"
+      @pagination="getList"
+    />
+    <DialogSchool ref="schoolDialog" @success="handleQuery" />
+  </div>
 </template>
 
-<script setup></script>
+<script setup name="School">
+import DialogSchool from './Comp/DialogSchool.vue'
+const message = useMessage() // 消息弹窗
+
+const searchForm = ref({
+  name: '',
+  pageNum: 1,
+  pageSize: 20
+})
+
+const loading = ref(false)
+const total = ref(0)
+
+const tableList = ref([])
+const schoolDialog = ref()
+
+function resetQuery() {
+  searchForm.value = {
+    name: '',
+    pageSize: 20,
+    pageNum: 1
+  }
+  getList()
+}
+
+function handleQuery() {
+  searchForm.value.pageNum = 1
+  getList()
+}
+
+function getList() {
+  tableList.value = [{ name: '测试' }]
+}
+
+function openForm(type, row = null) {
+  schoolDialog.value.open(type, row)
+}
+
+async function handleDelete(row) {
+  try {
+    console.log(row)
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    // await UserApi.deleteUser(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+function changeStatus(row) {
+  console.log(row)
+}
+</script>
 
 <style lang="scss" scoped></style>