From a005b26bd7a2cde379d59ec3a8853aeee7012eda Mon Sep 17 00:00:00 2001
From: yangheqi <2378459785@qq.com>
Date: Fri, 8 Aug 2025 09:39:51 +0800
Subject: [PATCH] =?UTF-8?q?optimize:=20=E4=BC=98=E5=8C=96=E5=AD=A6?=
 =?UTF-8?q?=E7=94=9F=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/school/student/index.vue | 381 +++++++++++++++--------------
 1 file changed, 196 insertions(+), 185 deletions(-)

diff --git a/src/views/school/student/index.vue b/src/views/school/student/index.vue
index 298ad92..0e3b465 100644
--- a/src/views/school/student/index.vue
+++ b/src/views/school/student/index.vue
@@ -1,238 +1,249 @@
 <template>
   <div>
-    <div class="card" style="margin-bottom: 5px">
-      <el-input style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
-      <el-button type="primary"  @click="load"> 查询</el-button>
-      <el-button type="warning"  @click="reset"> 重置</el-button>
-    </div>
-    <div class="card" style="margin-bottom: 5px">
-      <el-button type="primary"  @click = handleAdd> 新增</el-button>
-      <el-button type="danger"  @click = delBatch> 批量删除</el-button>
-    </div>
-    <div class="card" style="margin-bottom: 5px">
-      <el-table :data="data.tableData" stripe @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" />
-        <el-table-column label="账号" prop="username" />
-        <el-table-column label="头像">
-          <template #default="scope">
-            <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" style="display: block; width: 40px; height: 40px; border-radius: 50%" />
+    <el-row :gutter="20">
+      <el-col :lg="24" :xs="24">
+        <transition :enter-active-class="animate.searchAnimate.enter" :leave-active-class="animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card shadow="hover">
+              <el-form ref="queryFormRef" :model="data" :inline="true">
+                <el-form-item label="学生姓名">
+                  <el-input style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
+                </el-form-item>
+              </el-form>
+            </el-card>
+          </div>
+        </transition>
+
+        <el-card shadow="hover">
+          <template #header>
+            <el-row :gutter="10">
+              <el-col :span="1.5">
+                <el-button type="primary" plain @click="handleAdd"> 新增</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button type="danger" plain @click="delBatch"> 批量删除</el-button>
+              </el-col>
+              <right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true" @query-table="load"></right-toolbar>
+            </el-row>
           </template>
-        </el-table-column>
-        <el-table-column label="名称" prop="name" />
-        <el-table-column label="性别" prop="sex" />
-        <el-table-column label="班级" prop="cls" />
-        <el-table-column label="年龄" prop="age" />
-        <el-table-column label="操作" width="120">
-          <template #default="scope">
-            <el-button @click="handleUpdate(scope.row)" type="primary" :icon="Edit" circle></el-button>
-            <el-button @click="del(scope.row.id)" type="danger" :icon="Delete" circle></el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div style="margin-top: 18px">
-        <el-pagination
-          @size-change="load"
-          @current-change="load"
-          v-model:current-page="data.pageNum"
-          v-model:page-size="data.pageSize"
-          :page-sizes="[5, 10, 15, 20]"
-          background
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="data.total"
-        />
+          <el-table :data="data.tableData" stripe @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" />
+            <el-table-column v-if="columns[0].visible" label="账号" prop="username" />
+            <el-table-column v-if="columns[1].visible" label="头像" prop="avatar">
+              <template #default="scope">
+                <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" style="display: block; width: 40px; height: 40px; border-radius: 50%" />
+              </template>
+            </el-table-column>
+            <el-table-column v-if="columns[2].visible" label="名称" prop="name" />
+            <el-table-column v-if="columns[3].visible" label="性别" prop="sex" />
+            <el-table-column v-if="columns[4].visible" label="班级" prop="cls" />
+            <el-table-column v-if="columns[5].visible" label="年龄" prop="age" />
+            <el-table-column v-if="columns[6].visible" label="操作" width="120">
+              <template #default="scope">
+                <el-button @click="handleUpdate(scope.row)" type="primary" :icon="Edit" circle></el-button>
+                <el-button @click="del(scope.row.id)" type="danger" :icon="Delete" circle></el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination v-show="data.total > 0" v-model:page="data.pageNum" v-model:limit="data.pageSize" :total="data.total" @pagination="load" />
+        </el-card>
+      </el-col>
+      <el-dialog title="学生信息 " v-model="data.formVisible" width="500" destory-on-close>
+        <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80px" style="padding-right: 40px; padding-top: 20px">
+          <el-form-item label="账号" prop="username">
+            <el-input :disabled="data.form.id" v-model="data.form.username" autocomplete="off" placeholder="请输入账号" />
+          </el-form-item>
 
-      </div>
-    </div>
-    <el-dialog title="学生信息 " v-model="data.formVisible"  width="500"  destory-on-close>
-      <el-form  ref="formRef" :rules="data.rules"    :model="data.form"  label-width="80px"  style="padding-right: 40px ;padding-top: 20px">
-        <el-form-item label="账号"   prop="username">
-          <el-input :disabled="data.form.id" v-model="data.form.username" autocomplete="off" placeholder="请输入账号" />
-        </el-form-item>
+          <el-form-item label="班级">
+            <el-select style="width: 100%" v-model="data.form.clsId">
+              <el-option v-for="item in data.clsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
 
-        <el-form-item label="班级">
-          <el-select style="width: 100%" v-model="data.form.clsId">
-            <el-option v-for="item in data.clsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </el-form-item>
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名称" />
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-radio-group v-model="data.form.sex">
+              <el-radio value="男" label="男"></el-radio>
+              <el-radio value="女" label="女"></el-radio>
+            </el-radio-group>
+          </el-form-item>
 
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="data.form.name" autocomplete="off" placeholder="请输入名称" />
-        </el-form-item>
-        <el-form-item label="性别">
-          <el-radio-group v-model="data.form.sex">
-            <el-radio  value="男"  label="男"></el-radio>
-            <el-radio  value="女"   label="女"></el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-
-        <el-upload
-          class="avatar-uploader"
-          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-          :show-file-list="false"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-        >
-          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-        </el-upload>
-
-        <el-form-item label="头像">
           <el-upload
-            action="http://localhost:8080/vue/public/upload"
-            list-type="picture"
+            class="avatar-uploader"
+            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            :show-file-list="false"
             :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
           >
-            <el-button type="primary">上传头像</el-button>
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+            <el-icon v-else class="avatar-uploader-icon">
+              <Plus />
+            </el-icon>
           </el-upload>
-        </el-form-item>
 
+          <el-form-item label="头像">
+            <el-upload action="http://localhost:8080/vue/public/upload" list-type="picture" :on-success="handleAvatarSuccess">
+              <el-button type="primary">上传头像</el-button>
+            </el-upload>
+          </el-form-item>
 
-        <el-form-item label="年龄">
-          <el-input-number  style="width: 200px" :min="18" v-model="data.form.age" autocomplete="off" placeholder="请选择年龄" />
-        </el-form-item>
-
-
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="data.formVisible = false">取  消</el-button>
-          <el-button type="primary" @click="save">保   存</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
+          <el-form-item label="年龄">
+            <el-input-number style="width: 200px" :min="18" v-model="data.form.age" autocomplete="off" placeholder="请选择年龄" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="data.formVisible = false">取 消</el-button>
+            <el-button type="primary" @click="save">保 存</el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </el-row>
   </div>
 </template>
-<script setup>
-import {reactive,ref} from "vue";
-import {Edit, Delete, Search} from "@element-plus/icons-vue";
-import request from "@/utils/utils/request.js";
-import {ElMessage, ElMessageBox} from "element-plus";
 
-request.get('/student/selectAll').then(res =>{
-  data.clsList = res.data
-})
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { Delete, Edit } from '@element-plus/icons-vue';
+import request from '@/utils/utils/request.js';
+import { ElMessage, ElMessageBox } from 'element-plus';
 
-const data =reactive({
+const showSearch = ref(true);
+
+// 列显隐信息
+const columns = ref<FieldOption[]>([
+  { key: 0, label: `账号`, visible: true, children: [] },
+  { key: 1, label: `头像`, visible: true, children: [] },
+  { key: 2, label: `名称`, visible: true, children: [] },
+  { key: 3, label: `性别`, visible: true, children: [] },
+  { key: 4, label: `班级`, visible: true, children: [] },
+  { key: 5, label: `年龄`, visible: true, children: [] },
+  { key: 6, label: `操作`, visible: true, children: [] }
+]);
+
+const data = reactive({
   name: null,
   tableData: [],
   pageNum: 1,
   pageSize: 10,
   total: 0,
-  formVisible:false,
-  form:{},
-  clsList:[],
-  rules:{
-    username:[
-      {required:true,message:'请输入账号',trigger:'blur'}
-    ],
-    name:[
-      {required:true,message:'请输入名称',trigger:'blur'}
-    ],
+  formVisible: false,
+  form: {},
+  clsList: [],
+  rules: {
+    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
   }
-})
+});
 const handleAvatarSuccess = (res) => {
-  data.form.avatar = res.data
-}
+  data.form.avatar = res.data;
+};
 
-const formRef =ref()
-const load = () =>{
-  request.get('/student/selectAll',{
-    params:{
-      pageNum: data.pageNum,
-      pageSize: data.pageSize,
-      name:data.name,
-    }
-  }).then(res =>{
-    data.tableData = res.data;
-
-  })
-}
+const formRef = ref();
+const load = () => {
+  request
+    .get('/student/selectAll', {
+      params: {
+        pageNum: data.pageNum,
+        pageSize: data.pageSize,
+        name: data.name
+      }
+    })
+    .then((res) => {
+      data.tableData = res.data;
+    });
+};
 load();
-const reset =()=>{
+const reset = () => {
   data.name = null;
   load();
-}
-const handleAdd = ()=> {
-  data.formVisible = true
-  data.form = {}
-}
+};
+const handleAdd = () => {
+  data.formVisible = true;
+  data.form = {};
+};
 const save = () => {
   formRef.value.validate((valid) => {
     if (valid) {
-      data.form.id ? update() : add()
+      data.form.id ? update() : add();
     }
-  })
-}
+  });
+};
 
 const add = () => {
-  request.post('/student/add', data.form).then(res => {
+  request.post('/student/add', data.form).then((res) => {
     if (res.code === '200') {
-      data.formVisible = false
-      ElMessage.success('操作成功')
-      load()  //新增后要重新加载新增的数据
+      data.formVisible = false;
+      ElMessage.success('操作成功');
+      load(); //新增后要重新加载新增的数据
     } else {
-      ElMessage.error(res.msg)
+      ElMessage.error(res.msg);
     }
-  })
-}
+  });
+};
 
 const update = () => {
-  request.put('/student/update', data.form).then(res => {
+  request.put('/student/update', data.form).then((res) => {
     if (res.code === '200') {
-      data.formVisible = false
-      ElMessage.success('操作成功')
-      load()  //更新后要重新加载新增的数据
+      data.formVisible = false;
+      ElMessage.success('操作成功');
+      load(); //更新后要重新加载新增的数据
     } else {
-      ElMessage.error(res.msg)
+      ElMessage.error(res.msg);
     }
-  })
-}
+  });
+};
 const handleUpdate = (row) => {
-  data.form = JSON.parse(JSON.stringify(row))  //深拷贝一个新对象  用于编辑
-  data.formVisible = true
-}
+  data.form = JSON.parse(JSON.stringify(row)); //深拷贝一个新对象  用于编辑
+  data.formVisible = true;
+};
 
 const del = (id) => {
-  ElMessageBox.confirm("删除数据之后无法恢复，您确定要删除这个数据吗？", '删除确认', { type: 'warning' }).then(() => {
-    request.delete('/student/deleteById/' + id).then(res => {
-      if (res.code === '200') {
-        ElMessage.success('操作成功')
-        load()  //删除 后要重新加载新增的数据
-      } else {
-        ElMessage.error(res.msg)
-      }
+  ElMessageBox.confirm('删除数据之后无法恢复，您确定要删除这个数据吗？', '删除确认', { type: 'warning' })
+    .then(() => {
+      request.delete('/student/deleteById/' + id).then((res) => {
+        if (res.code === '200') {
+          ElMessage.success('操作成功');
+          load(); //删除 后要重新加载新增的数据
+        } else {
+          ElMessage.error(res.msg);
+        }
+      });
     })
-  }).catch(() => {
-    // 用户点击取消时可以添加提示（可选）
-    ElMessage.info('已取消删除');
-  })
-}
+    .catch(() => {
+      // 用户点击取消时可以添加提示（可选）
+      ElMessage.info('已取消删除');
+    });
+};
 
-const handleSelectionChange = (rows) => {  // 返回所有选中的行对象数组
+const handleSelectionChange = (rows) => {
+  // 返回所有选中的行对象数组
   // 从选中的行数组里面取出所有行的id组成一个新的数组
-  data.ids = rows.map(row => row.id)
-  console.log(data.ids)
-}
+  data.ids = rows.map((row) => row.id);
+  console.log(data.ids);
+};
 
 const delBatch = () => {
   if (data.ids.length === 0) {
-    ElMessage.warning("请选择数据")
-    return
+    ElMessage.warning('请选择数据');
+    return;
   }
-  ElMessageBox.confirm("删除数据之后无法恢复，您确定要删除这个数据吗？", '删除确认', { type: 'warning' }).then(() => {
-    request.delete('/student/deleteBatch', { data: data.ids }).then(res => {
-      if (res.code === '200') {
-        ElMessage.success('操作成功')
-        load()  //删除 后要重新加载新增的数据
-      } else {
-        ElMessage.error(res.msg)
-      }
+  ElMessageBox.confirm('删除数据之后无法恢复，您确定要删除这个数据吗？', '删除确认', { type: 'warning' })
+    .then(() => {
+      request.delete('/student/deleteBatch', { data: data.ids }).then((res) => {
+        if (res.code === '200') {
+          ElMessage.success('操作成功');
+          load(); //删除 后要重新加载新增的数据
+        } else {
+          ElMessage.error(res.msg);
+        }
+      });
     })
-  }).catch(() => {
-    // 用户点击取消时可以添加提示（可选）
-    ElMessage.info('已取消删除');
-  })
-}
+    .catch(() => {
+      // 用户点击取消时可以添加提示（可选）
+      ElMessage.info('已取消删除');
+    });
+};
 </script>