每周总结第七周
本周开始了团队作业：
本阶段任务完成页面即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="lib/logo.ico" type="images/x-ico" />
<title>智能政策信息检索系统</title>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<style type="text/css">
body{
background: url("./lib/background.png") no-repeat center center fixed;
/*兼容浏览器版本*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<!--<html>
<head>
<meta content="text/html" charset="UTF-8">
<title>HTML设置图片为页面背景</title>
</head>
<body background="夕阳余晖.jpg"
style="background-repeat:no-repeat
background-attachment:fixed;
background-size:100% 100%; ">
</body>
</html>
-->
<body>
<div id="app">
<!--搜索表单-->
<el-form :inline="true" :model="brand" class="demo-form-inline">
<el-form-item label="政策名称">
<el-input v-model="brand.name" placeholder="政策名称"></el-input>
</el-form-item>
<el-form-item label="发文字号">
<el-input v-model="brand.document" placeholder="发文字号"></el-input>
</el-form-item>
<el-form-item label="发文机构">
<el-input v-model="brand.organ" placeholder="政策编号"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!--按钮-->
<el-row>
<el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
<el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
</el-row>
<!--添加数据对话框表单-->
<el-dialog
title="编辑政策"
:visible.sync="dialogVisible"
width="30%"
>
<el-form ref="form" :model="brand" label-width="80px">
<el-form-item label="政策名称">
<el-input v-model="brand.name"></el-input>
</el-form-item>
<el-form-item label="发文机构">
<el-input v-model="brand.organ"></el-input>
</el-form-item>
<el-form-item label="政策分类">
<el-input v-model="brand.type"></el-input>
</el-form-item>
<el-form-item label="政策种类">
<el-input v-model="brand.category"></el-input>
</el-form-item>
<el-form-item label="政策范围">
<el-select v-model="brand.ranged" placeholder="请选择政策范围">
<el-option label="全国（000000 QG）" value="全国（000000 QG）"></el-option>
<el-option label="河北省（130000 HE）" value="河北省（130000 HE）"></el-option>
<el-option label="重庆市（500000 CQ）" value="重庆市（500000 CQ）"></el-option>
<el-option label="北京市（110000 BJ）" value="北京市（110000 BJ）"></el-option>
<el-option label="浙江省（330000 ZJ）" value="浙江省（330000 ZJ）"></el-option>
<el-option label="上海市（310000 SH）" value="上海市（310000 SH）"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发文字报">
<el-input v-model="brand.document"></el-input>
</el-form-item>
<el-form-item label="颁布形式">
<el-input v-model="brand.formd"></el-input>
</el-form-item>
<el-form-item label="政策内容">
<el-input type="textarea" v-model="brand.text"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addBrand">提交</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--修改数据对话框表单-->
<el-dialog
title="修改政策"
:visible.sync="updateDialogVisible"
width="30%"
>
<el-form ref="form" :model="brand" label-width="80px">
<el-form-item label="政策名称">
<el-input v-model="brand.name"></el-input>
</el-form-item>
<el-form-item label="发文机构">
<el-input v-model="brand.organ"></el-input>
</el-form-item>
<el-form-item label="政策分类">
<el-input v-model="brand.type"></el-input>
</el-form-item>
<el-form-item label="政策种类">
<el-input v-model="brand.category"></el-input>
</el-form-item>
<el-form-item label="政策范围">
<el-select v-model="brand.ranged" placeholder="请选择政策范围">
<el-option label="全国（000000 QG）" value="全国（000000 QG）"></el-option>
<el-option label="河北省（130000 HE）" value="河北省（130000 HE）"></el-option>
<el-option label="重庆市（500000 CQ）" value="重庆市（500000 CQ）"></el-option>
<el-option label="北京市（110000 BJ）" value="北京市（110000 BJ）"></el-option>
<el-option label="浙江省（330000 ZJ）" value="浙江省（330000 ZJ）"></el-option>
<el-option label="上海市（310000 SH）" value="上海市（310000 SH）"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发文字报">
<el-input v-model="brand.document"></el-input>
</el-form-item>
<el-form-item label="颁布形式">
<el-input v-model="brand.formd"></el-input>
</el-form-item>
<el-form-item label="政策内容">
<el-input type="textarea" v-model="brand.text"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="update">提交</el-button>
<el-button @click="updateDialogVisible = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!--表格-->
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="name"
label="政策名称"
align="center"
>
</el-table-column>
<el-table-column
prop="organ"
label="发文机构"
align="center"
>
</el-table-column>
<el-table-column
prop="viadata"
align="center"
label="颁布日期">
</el-table-column>
<el-table-column
prop="type"
align="center"
label="政策分类">
</el-table-column>
<el-table-column
align="center"
label="操作">
<template slot-scope="scope">
<el-row>
<el-button type="primary" @click="brandShow(scope.row)">修改</el-button>
<el-button type="danger">删除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
</template>
<!--分页工具条-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 15, 20]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
new Vue({
el: "#app",
mounted(){
this.selectAll();
},
methods: {
//查询分页数据
selectAll(){
/*//当页面加载完成后，发送异步请求来获取数据\
var _this = this;
axios({
method:"get",
url:"http://localhost:8080/brand-case/selectAllServlet"
}).then(function (resp){
_this.tableData = resp.data;
})*/
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/brand-case/selectByPageAndConditionServlet?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
data:this.brand
}).then(function (resp){
//设置表格数据
_this.tableData = resp.data.rows; //{rows:[],totalCount:100}
//设置总记录数
_this.totalCount = resp.data.totalCount;
})
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
// 复选框选中后执行的方法
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(this.multipleSelection)
},
// 查询方法
onSubmit() {
//console.log(this.brand);
this.selectAll();
},
// 添加数据
addBrand(){
//console.log(this.brand);
var _this = this;
//发送ajax请求,添加数据
axios({
method: "post",
url:"http://localhost:8080/brand-case/addServlet",
data:_this.brand
}).then(function (resp){
if(resp.data == "success"){
//添加成功
//关闭窗口
_this.dialogVisible = false;
//重新查询
_this.selectAll();
_this.$message({
showClose: true,
message: '恭喜你，添加成功',
type: 'success'
});
};
})
},
//分页
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
//设置每页显示的条数
this.pageSize = val;
this.selectAll();
},
handleCurrentChange(val) {
//console.log(`当前页: ${val}`);
//重新设置当前页码
this.currentPage = val;
this.selectAll();
},
//批量删除
deleteByIds(){
//弹出一个确认提示框
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//用户点击确认按钮
//1.创建一个id数组[1,2,3]
//console.log(this.multipleSelection);
for (let i = 0; i < this.multipleSelection.length; i++) {
let selectionElement = this.multipleSelection[i];
this.selectedIds[i] = selectionElement.id;
}
//2.发送AJAX请求
var _this = this;
axios({
method: "post",
url:"http://localhost:8080/brand-case/deleteByIdsServlet",
data:_this.selectedIds
}).then(function (resp){
if(resp.data == "success"){
//删除成功
//重新查询
_this.selectAll();
_this.$message({
showClose: true,
message: '恭喜你，删除成功',
type: 'success'
});
};
})
}).catch(() => {
this.$message({
//用户点击取消按钮
type: 'info',
message: '已取消删除'
});
});
},
brandShow(row) {
// 获取数据
this.brand = row;
console.log(this.brand);
// 弹出窗口
this.updateDialogVisible = true;
},
update(){
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/brand-case/updateByIdServlet",
data:_this.brand //这是提交的表单数据
}).then(function (resp){
//这里是success数据
if(resp.data == "success"){
//添加成功
console.log("修改成功！");
//关闭窗口
_this.updateDialogVisible = false;
//重新查询数据进行显示
_this.selectAll();
_this.$message({
message: '恭喜你，修改成功',
type: 'success'
});
}
if(resp.data == "fail"){
_this.$message.error('修改失败');
}
})
},
},
data() {
return {
//每页显示的条数
pageSize:10,
//总记录数
totalCount:100,
// 当前页码
currentPage: 1,
// 添加数据对话框是否展示的标记
dialogVisible: false,
// 修改数据对话框是否展示标记
updateDialogVisible:false,
// 品牌模型数据
brand: {
id:'',
name: '',
document: '',
organ: '',
viadata:"",
type:"",
text:"",
category:"",
ranged:"",
formd:"",
},
//被选中的id数组
selectedIds:[],
// 复选框选中数据集合
multipleSelection: [],
// 表格数据
tableData: [{
name: '政策',
organ: '最高人民检察院',
viadata: '2023.4.24',
type: "1"
}, {
name: '政策',
organ: '最高人民检察院',
viadata: '2023.4.24',
type: "1"
}, {
name: '政策',
organ: '最高人民检察院',
viadata: '2023.4.24',
type: "1"
}, {
name: '政策',
organ: '最高人民检察院',
viadata: '2023.4.24',
type: "1"
}]
}
}
})
</script>
</body>
</html>
同时还进行了jdbc的基础知识学习。