<template>
<div>
<!-- <h1 align="center">SpringBoot阶段机试,ts={{ts}}</h1> -->
<!--搜索框-->
<el-form :inline="true">
<el-form-item label="书本名称">
<el-input v-model="bookname" placeholder="书本名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="query">查询</el-button>
<el-button type="primary" @click="open">新增</el-button>
</el-form-item>
</el-form>
<!--数据表格-->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="书本编号" width="180">
</el-table-column>
<el-table-column prop="bookname" label="书本名称" width="180">
</el-table-column>
<el-table-column prop="price" label="书本价格">
</el-table-column>
<el-table-column prop="booktype" label="书本类型">
</el-table-column>
</el-table>
<!--弹出框-->
<el-dialog title="新增" :visible.sync="dialogFormVisible" @close="close">
<el-form :model="book" :rules="rules" ref="book">
<el-form-item prop="bookname" label="书本名称" label-width="90px">
<el-input v-model="book.bookname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="price" label="书本价格" label-width="90px">
<el-input v-model="book.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="booktype" label="书本类型" label-width="90px">
<el-select style="width: 100%;" v-model="book.booktype" placeholder="请选择书本类型">
<el-option label="玄幻" value="玄幻"></el-option>
<el-option label="文学" value="文学"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data: function() {
return {
ts: new Date().getTime(),
//搜索框
bookname: '',
//表格数据
tableData: [],
//弹出框是否显示
dialogFormVisible: false,
//弹出框数据
book: {
bookname: '',
price: '',
booktype: ''
},
//表单验证
rules: {
bookname: [{
required: true,
message: '请输入书本名称',
trigger: 'blur'
}, ],
price: [{
required: true,
message: '请输入书本价格',
trigger: 'blur'
}, ],
booktype: [{
required: true,
message: '请选择书本类型',
trigger: 'change',
}, ]
}
};
},
methods: {
close: function() {
//清空表单数据
this.book = {
bookname: '',
price: '',
booktype: ''
};
//清空表单验证
this.$refs['book'].resetFields();
},
//新增方法
save: function() {
this.$refs['book'].validate((valid) => {
if (valid) {
let url = this.axios.urls.ADD;
this.axios.post(url, this.book).then(resp => {
let data = resp.data;
if (data.code == 200) {
//关闭弹出框
this.dialogFormVisible = false;
//再次查询列表方法
this.query();
} else {
this.$message.error('新增失败!');
}
}).catch(err => {
})
} else {
console.log('error submit!!');
return false;
}
});
},
//查询方法
query: function() {
//1.定义查询参数
let params = {
bookname: this.bookname
};
//2.获取请求路径
let url = this.axios.urls.ALL;
//3.发起ajax请求
this.axios.post(url, params).then(resp => {
let data = resp.data;
this.tableData = data.list;
console.log(data);
}).catch(err => {
console.log(err);
})
},
//打开弹出框的方法
open: function() {
this.dialogFormVisible = true;
}
}
}
</script>
<style>
</style>
前端+elementui
最新推荐文章于 2024-07-09 21:18:14 发布