|
|
@@ -3,189 +3,256 @@
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>Vue Demo</title>
|
|
|
- <link rel="stylesheet" href="css/bootstrap.min.css">
|
|
|
- <link rel="stylesheet" href="css/main.css">
|
|
|
- <script src="js/jquery.min.js"></script>
|
|
|
- <script src="js/bootstrap.min.js"></script>
|
|
|
<script src="js/axios.min.js"></script>
|
|
|
- <script src="js/pages.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>
|
|
|
|
|
|
-<div class="container" id="app">
|
|
|
-
|
|
|
- <div class="col-md-12 col-md-offset-3">
|
|
|
- <h1>Vue demo</h1>
|
|
|
- <div>
|
|
|
- <div class="row">
|
|
|
- <div class="col-md-2" style="text-align: left;font-size: 16px;line-height: 30px;">
|
|
|
- 查询：
|
|
|
- </div>
|
|
|
- <div class="col-md-5" style="text-align: left;">
|
|
|
- <label>
|
|
|
- <input type="text" class="form-control" v-model="search"></input>
|
|
|
- </label>
|
|
|
+ <!--编辑层-->
|
|
|
+ <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>
|
|
|
- <button type="button" class="btn btn-success" @click="editBook(book)">新增</button>
|
|
|
- </div>
|
|
|
- <table class="table table-hover ">
|
|
|
- <br/>
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>序号</th>
|
|
|
- <th>书名</th>
|
|
|
- <th>作者</th>
|
|
|
- <th>价格</th>
|
|
|
- <th>操作</th>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for='book in books'>
|
|
|
- <td>{{book.id}}</td>
|
|
|
- <td>{{book.author}}</td>
|
|
|
- <td>{{book.name}}</td>
|
|
|
- <td>{{book.price}}</td>
|
|
|
- <td class="text-left">
|
|
|
- <button type="button" class="btn btn-success" @click="delBook(book)">删除</button>
|
|
|
- <button type="button" class="btn btn-success" @click="editBook(book)">修改</button>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- <div id="pageDiv"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-dialog>
|
|
|
|
|
|
- <!-- Modal -->
|
|
|
- <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
|
|
|
- aria-labelledby="exampleModalCenterTitle"
|
|
|
- aria-hidden="true">
|
|
|
- <div class="modal-dialog modal-dialog-centered" role="document">
|
|
|
- <div class="modal-content">
|
|
|
- <div class="modal-header">
|
|
|
- <h5 class="modal-title" v-if="isUpdate">修改</h5>
|
|
|
- <h5 class="modal-title" v-else>新增</h5>
|
|
|
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
- <span aria-hidden="true">×</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div class="modal-body">
|
|
|
- <form>
|
|
|
- <div class="form-group row">
|
|
|
- <label class="col-sm-2 col-form-label">书名</label>
|
|
|
- <div class="col-sm-10"><input type="text" class="form-control" v-model="book.name"></div>
|
|
|
- </div>
|
|
|
- <div class="form-group row">
|
|
|
- <label class="col-sm-2 col-form-label">作者</label>
|
|
|
- <div class="col-sm-10"><input type="text" class="form-control" v-model="book.author"></div>
|
|
|
- </div>
|
|
|
- <div class="form-group row">
|
|
|
- <label class="col-sm-2 col-form-label">价格</label>
|
|
|
- <div class="col-sm-10"><input type="text" class="form-control" v-model="book.price"></div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- <div class="modal-footer ">
|
|
|
- <div class="col-sm-3 offset-9">
|
|
|
- <button class="btn btn-primary btn-block" v-on:click="updatedBook()" v-if="isUpdate">修改</button>
|
|
|
- <button class="btn btn-primary btn-block" v-on:click="addBook()" v-else>添加</button>
|
|
|
- </div>
|
|
|
+ <!--删除提示-->
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
-</div>
|
|
|
-
|
|
|
-
|
|
|
+</template>
|
|
|
<script>
|
|
|
- let initBook = {
|
|
|
- id: 0,
|
|
|
- author: '1',
|
|
|
- name: '1',
|
|
|
- price: '1'
|
|
|
+ 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: {
|
|
|
- book: deepClone(initBook),
|
|
|
- books: [deepClone(initBook)],
|
|
|
- search: "",
|
|
|
- page: 1,
|
|
|
- pageSize: 10,
|
|
|
- totalPage: 1
|
|
|
+ tableData: [],
|
|
|
+ // 删除层隐藏
|
|
|
+ dialogVisible: false,
|
|
|
+ // 弹出层隐藏
|
|
|
+ dialogFormVisible: false,
|
|
|
+ // 弹出层内容
|
|
|
+ editNews: {
|
|
|
+ name: '',
|
|
|
+ email: ''
|
|
|
+ },
|
|
|
+ // 弹出层大小
|
|
|
+ formLabelWidth: '120px',
|
|
|
+ // 删除使用的id
|
|
|
+ id: '',
|
|
|
+ // 查询参数
|
|
|
+ param: {
|
|
|
+ name: '',
|
|
|
+ date: '',
|
|
|
+ page: 1,
|
|
|
+ size: 10
|
|
|
+ },
|
|
|
+ // 查询返回总条数
|
|
|
+ total: 0
|
|
|
},
|
|
|
watch: {},
|
|
|
// 计算属性（过滤） 查询功能
|
|
|
- computed: {
|
|
|
- isUpdate() {
|
|
|
- return this.book.id !== undefined && this.book.id !== 0;
|
|
|
- }
|
|
|
- },
|
|
|
+ computed: {},
|
|
|
mounted: function () {
|
|
|
this.queryList();
|
|
|
},
|
|
|
methods: {
|
|
|
- modelShow() {
|
|
|
- $('#exampleModalCenter').modal('show');
|
|
|
+ // 修改页面展示数据大小
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.param.size = val
|
|
|
+ this.queryList()
|
|
|
},
|
|
|
- modelHide() {
|
|
|
- $('#exampleModalCenter').modal('hide');
|
|
|
+ // 修改页码
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.param.page = val
|
|
|
+ this.queryList()
|
|
|
},
|
|
|
- refresh_pagination: function () {
|
|
|
- $('#pageDiv').pagination({
|
|
|
- pages: this.totalPage, // 页数
|
|
|
- edges: 2, // 边缘页数，不用修改
|
|
|
- cssStyle: 'pagination',
|
|
|
- displayedPages: 5, // 展示相连页数，不用修改
|
|
|
- onPageClick: function () {
|
|
|
- //点击时调用
|
|
|
- this.queryList();
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- queryList: function () {
|
|
|
- // 获取数据，刷新页数
|
|
|
- axios.post("/api/list", this.book).then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.totalPage = 10;
|
|
|
- this.books = res.data;
|
|
|
- this.refresh_pagination();
|
|
|
+ // 点击编辑，从后台获取数据
|
|
|
+ editOne(row) {
|
|
|
+ console.log(row)
|
|
|
+ _app.fetchOne(row.id).then(res => {
|
|
|
+ if (res.flag) {
|
|
|
+ this.editNews = res.data
|
|
|
}
|
|
|
})
|
|
|
+ this.dialogFormVisible = true
|
|
|
},
|
|
|
- addBook: function () {
|
|
|
- axios.post("/api/add", this.book).then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.queryList();
|
|
|
- }
|
|
|
- })
|
|
|
+ // 获取删除行的id
|
|
|
+ deleteAlert(id) {
|
|
|
+ this.id = id
|
|
|
+ this.dialogVisible = true
|
|
|
},
|
|
|
- delBook: function (book) {
|
|
|
- axios.post("/api/delete", book).then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.queryList();
|
|
|
+ // 删除
|
|
|
+ deleteOne() {
|
|
|
+ _app.deleteOne(this.id).then(res => {
|
|
|
+ if (res.flag) {
|
|
|
+ this.dialogFormVisible = false
|
|
|
+ this.queryList()
|
|
|
+ } else {
|
|
|
+ alert('删除失败')
|
|
|
}
|
|
|
})
|
|
|
+ this.dialogVisible = false
|
|
|
},
|
|
|
- // 修改按钮
|
|
|
- editBook: function (book) {
|
|
|
- console.log(this.book)
|
|
|
- this.book = deepClone(book);
|
|
|
- console.log(this.book)
|
|
|
- $('#exampleModalCenter').modal('show');
|
|
|
- console.log(this.book)
|
|
|
+ // 关闭提示框时，提示是否要关闭
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm('确认关闭？')
|
|
|
+ .then(() => {
|
|
|
+ done()
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ })
|
|
|
},
|
|
|
- // 修改完成后的 确认按钮点击事件
|
|
|
- updatedBook: function () {
|
|
|
- // 异步请求
|
|
|
- axios.post("/api/update", this.book).then(res => {
|
|
|
- if (res.success) {
|
|
|
- this.queryList();
|
|
|
+ // 点击添加按钮清空
|
|
|
+ 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;
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
|
