tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
							<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="elementUI/index.css">
    <script src="js/vue.min.js"></script>
    <script src="elementUI/index.js"></script>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/util.js"></script>
</head>
<body>
<template>
    <div class="app-container" id="app">
        <el-form :inline="true" :model="param" class="demo-form-inline">
            <el-form-item label="名字">
                <el-input v-model="param.name" placeholder="名字"/>
            </el-form-item>
            <el-form-item label="日期">
                <el-input v-model="param.date"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryList">查询</el-button>
            </el-form-item>
        </el-form>
        <template>
            <!--添加-->
            <el-row>
                <el-button @click="createOne()">添加</el-button>
            </el-row>
            <!--数据-->
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
            >
                <el-table-column
                        fixed
                        prop="date"
                        label="日期"
                        width="150"
                />
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="150"
                />
                <el-table-column
                        prop="email"
                        label="email地址"
                        width="300"
                />
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100"
                >
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                size="small"
                                @click="editOne(scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                                size="small"
                                type="text"
                                @click="deleteAlert(scope.row.id)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--编辑层-->
            <el-dialog title="编辑" :visible.sync="dialogFormVisible">
                <el-form :model="editNews">
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="editNews.name" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="Email" :label-width="formLabelWidth">
                        <el-input v-model="editNews.email" placeholder=""/>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveOne">确 定</el-button>
                </div>
            </el-dialog>

            <!--删除提示-->
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"
            >
                <span>真的要删吗？</span>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteOne">确 定</el-button>
                </div>
            </el-dialog>

            <!--分页-->
            <div class="block">
                <el-pagination
                        :current-page="param.page"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="param.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
            </div>
        </template>
    </div>
</template>
<script>
    let _app = {
        fetchList: function (query) {
            return axios({
                url: 'https://yapi.tianyunperfect.cn/mock/11/article/list',
                method: 'get',
                params: query
            })
        },
        fetchOne: function (id) {
            return axios({
                url: '/article/detail',
                method: 'get',
                params: {id}
            })
        },
        saveOne: function (data) {
            return axios({
                url: '/article/save',
                method: 'post',
                data
            })
        },
        deleteOne: function (id) {
            return axios({
                url: '/article/delete',
                method: 'post',
                params: {id}
            })
        }
    }

    const vm = new Vue({
        el: "#app",
        // 计算函数 动态变化的数据
        data: {
            tableData: [],
            // 删除层隐藏
            dialogVisible: false,
            // 弹出层隐藏
            dialogFormVisible: false,
            // 弹出层内容
            editNews: {
                name: '',
                email: ''
            },
            // 弹出层大小
            formLabelWidth: '120px',
            // 删除使用的id
            id: '',
            // 查询参数
            param: {
                name: '',
                date: '',
                page: 1,
                size: 10
            },
            // 查询返回总条数
            total: 0
        },
        watch: {},
        // 计算属性（过滤） 查询功能
        computed: {},
        mounted: function () {
            this.queryList();
        },
        methods: {
            // 修改页面展示数据大小
            handleSizeChange(val) {
                this.param.size = val
                this.queryList()
            },
            // 修改页码
            handleCurrentChange(val) {
                this.param.page = val
                this.queryList()
            },
            // 点击编辑，从后台获取数据
            editOne(row) {
                console.log(row)
                _app.fetchOne(row.id).then(res => {
                    if (res.flag) {
                        this.editNews = res.data
                    }
                })
                this.dialogFormVisible = true
            },
            // 获取删除行的id
            deleteAlert(id) {
                this.id = id
                this.dialogVisible = true
            },
            // 删除
            deleteOne() {
                _app.deleteOne(this.id).then(res => {
                    if (res.flag) {
                        this.dialogFormVisible = false
                        this.queryList()
                    } else {
                        alert('删除失败')
                    }
                })
                this.dialogVisible = false
            },
            // 关闭提示框时，提示是否要关闭
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(() => {
                        done()
                    })
                    .catch(() => {
                    })
            },
            // 点击添加按钮清空
            createOne() {
                this.editNews = {}
                this.dialogFormVisible = true
            },
            // 点击确定后发送请求
            saveOne() {
                _app.saveOne(this.editNews).then(res => {
                    if (res.flag) {
                        this.dialogFormVisible = false
                        this.queryList()
                    } else {
                        this.$message('添加失败')
                    }
                })
            },
            // 获取数据
            queryList() {
                _app.fetchList(this.param).then(res => {
                    this.tableData = res.list;
                    this.total = res.total;
                })
            }
        },


    });
</script>

</body>
</html>