|
@@ -0,0 +1,170 @@
|
|
|
+<template>
|
|
|
+ <div class="search-list-form">
|
|
|
+ <!-- 搜索表单 -->
|
|
|
+ <el-form :inline="true" :model="searchForm" class="demo-form-inline">
|
|
|
+ <el-form-item label="姓名">
|
|
|
+ <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-select v-model="searchForm.status" placeholder="请选择状态">
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option label="启用" value="1"></el-option>
|
|
|
+ <el-option label="禁用" value="0"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onSearch">查询</el-button>
|
|
|
+ <el-button @click="resetSearch">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 数据列表 -->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ header-row-class-name="headerBg"
|
|
|
+ empty-text="暂无用户信息"
|
|
|
+ >
|
|
|
+ <el-table-column prop="name" label="姓名"></el-table-column>
|
|
|
+ <el-table-column prop="age" label="年龄"></el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.status === "1" ? "启用" : "禁用" }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <!-- <el-button
|
|
|
+ size="mini"
|
|
|
+ :type="scope.row.status === '1' ? 'danger' : 'success'"
|
|
|
+ @click="handleToggleStatus(scope.$index, scope.row)">
|
|
|
+ {{ scope.row.status === '1' ? '禁用' : '启用' }}
|
|
|
+ </el-button> -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination-container">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="pagination.currentPage"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ :page-size="pagination.pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="pagination.total"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 编辑表单对话框 -->
|
|
|
+ <el-dialog title="编辑信息" :visible.sync="dialogFormVisible">
|
|
|
+ <el-form :model="editForm">
|
|
|
+ <el-form-item label="姓名" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="editForm.name" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="年龄" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="editForm.age" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitEdit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchForm: {
|
|
|
+ name: "",
|
|
|
+ status: "",
|
|
|
+ },
|
|
|
+ tableData: [
|
|
|
+ /* { name: '张三', age: 25, status: '1' },
|
|
|
+ { name: '李四', age: 30, status: '0' },
|
|
|
+ { name: '王五', age: 35, status: '1' } */
|
|
|
+ ],
|
|
|
+ dialogFormVisible: false,
|
|
|
+ editForm: {
|
|
|
+ name: "",
|
|
|
+ age: "",
|
|
|
+ },
|
|
|
+ formLabelWidth: "120px",
|
|
|
+ editIndex: -1,
|
|
|
+ pagination: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async fetchData() {
|
|
|
+ try {
|
|
|
+ // 假设这是一个 API 调用
|
|
|
+ const response = await this.$api.getUsers({
|
|
|
+ page: this.pagination.currentPage,
|
|
|
+ pageSize: this.pagination.pageSize,
|
|
|
+ ...this.searchForm,
|
|
|
+ });
|
|
|
+ this.tableData = response.data;
|
|
|
+ this.pagination.total = response.total;
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("获取数据失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.pagination.pageSize = val;
|
|
|
+ this.fetchData();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.pagination.currentPage = val;
|
|
|
+ this.fetchData();
|
|
|
+ },
|
|
|
+ onSearch() {
|
|
|
+ // 实现搜索逻辑
|
|
|
+ console.log("搜索条件:", this.searchForm);
|
|
|
+ // 这里应该调用API进行搜索,然后更新tableData
|
|
|
+ },
|
|
|
+ resetSearch() {
|
|
|
+ this.searchForm = {
|
|
|
+ name: "",
|
|
|
+ status: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ handleEdit(index, row) {
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ this.editForm = { ...row };
|
|
|
+ this.editIndex = index;
|
|
|
+ },
|
|
|
+ handleToggleStatus(index, row) {
|
|
|
+ // 切换状态
|
|
|
+ this.tableData[index].status = row.status === "1" ? "0" : "1";
|
|
|
+ // 这里应该调用API来更新状态
|
|
|
+ },
|
|
|
+ submitEdit() {
|
|
|
+ if (this.editIndex > -1) {
|
|
|
+ // 更新表格数据
|
|
|
+ this.tableData[this.editIndex] = {
|
|
|
+ ...this.editForm,
|
|
|
+ status: this.tableData[this.editIndex].status,
|
|
|
+ };
|
|
|
+ // 这里应该调用API来更新数据
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+ <style scoped>
|
|
|
+.search-list-form {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+</style>
|