index.vue

<template>
    <div>
        <!-- 查询区域 -->
        <el-form :inline="true" ref="queryForm" :model="queryForm" label-width="80px">
            <el-form-item label="项目名称" prop="name">
                <el-input v-model="queryForm.name" placeholder="请输入项目名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 工具 -->
        <div>
            <project-add @reload="query">
                <el-button type="primary">新增</el-button>
            </project-add>
        </div>

        <!-- 表格 -->
        <el-table :data="table.data">
            <el-table-column prop="name" label="项目名称"></el-table-column>
            <el-table-column prop="description" label="项目描述"></el-table-column>
            <el-table-column label="操作" width="500">
                <template slot-scope="scope">
                    <project-edit :id="scope.row.id" @reload="loadTableData">
                        <el-button>
                            编辑
                        </el-button>
                    </project-edit>
                    <project-delete :id="scope.row.id" @reload="loadTableData" style="margin-left: 10px;">
                        <el-button>删除</el-button>
                    </project-delete>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="text-align: right;margin-top: 20px;"
            :total="table.paging.total"
            :current-page.sync="table.paging.pageNum"
            :page-size.sync="table.paging.pageSize"
            @size-change="loadTableData"
            @current-change="loadTableData"
        ></el-pagination>

    </div>
</template>
<script>
import {page} from '../api'
import ProjectAdd from "@/views/project/components/add.vue";
import ProjectEdit from "@/views/project/components/edit.vue";
import ProjectDelete from "@/views/project/components/delete.vue";
export default {
    name: 'project-list',
    components: {ProjectDelete, ProjectEdit, ProjectAdd},
    data(){
        return {
            // 查询表单
            queryForm: {
                name: '',
                description: ''
            },
            // 表格
            table: {
                // 分页
                paging: {
                    pageNum: 1,
                    pageSize: 10,
                    total: 0
                },
                // 数据
                data: []
            }
        }
    },
    created() {
        // 查询
        this.query()
    },
    methods: {
        // 查询
        query(){
            this.table.paging.pageNum = 1
            this.loadTableData()
        },
        // 重置
        reset(){
            this.table.paging.pageNum = 1
            this.$refs.queryForm.resetFields()
            this.loadTableData()
        },
        // 加载表格数据
        loadTableData(){
            page({
                name: this.queryForm.name,
                description: this.queryForm.description,
                pageNum: this.table.paging.pageNum,
                pageSize: this.table.paging.pageSize
            }).then(res => {
                if (res.status === 200){
                    this.table.data = res.data.records
                    this.table.paging.total = res.data.total
                }
            })
        }
    }
}
</script>
<style scoped lang="less">

</style>
Last modified: 15 十一月 2023