m3p26xgcn
/
softwareEngineeringPractice
forked from pjhmizn49/softwareEngineeringPractice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD file via upload

Browse Source
main
pjhmizn49 1 year ago
parent 35f02b2e7d
commit 48031c4675
1 changed files with 545 additions and 0 deletions
Show Stats Download Patch File Download Diff File

545
flower_admin_front/src/views/discountView.vue
Unescape View File

@ -0,0 +1,545 @@
<template>
<div>
<div class="tableTop">
<div>
<el-input @input="handleSearch" suffix-icon="el-icon-search" style="width: 300px" placeholder="请输入搜索关键字" v-model="input" clearable></el-input>
</div>
<div>
<el-button @click="handleAdd" type="primary">添加套餐</el-button>
<el-button @click="handleDeleteMul" type="danger">批量删除</el-button>
</div>
<!-- 表单 -->
<el-dialog title="套餐信息" :visible.sync="dialogVisible" :before-close="handleClose">
<el-form align="left" ref="dialogForm" :rules="rules" :model="dialogForm" label-width="130px" style="margin-right: 150px">
<el-form-item label="优惠套餐名" prop="discount_name">
<el-input v-model="dialogForm.discount_name" placeholder="请输入优惠套餐名"></el-input>
</el-form-item>
<el-form-item label="优惠折扣(%)" prop="discount_num">
<el-input-number v-model="dialogForm.discount_num" :step="5" :min="10"></el-input-number>
</el-form-item>
<el-form-item label="优惠商品" required>
<el-cascader
v-model="cascadeBackResult"
placeholder="试试搜索：玫瑰"
:options="options"
@change="handleCascade"
filterable>
</el-cascader>
</el-form-item>
<el-form-item label="套餐起止日期" required>
<el-date-picker
v-model="dialogForm.dateRange"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
</div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="60"></el-table-column>
<el-table-column prop="discount_id" label="id" width="100"></el-table-column>
<el-table-column prop="discount_name" label="优惠套餐名" width="300"></el-table-column>
<el-table-column prop="discount_num" label="优惠折扣(%)" width="120"></el-table-column>
<el-table-column label="优惠商品" width="180"
:filters="[{ text: '全部商品', value: 0 },{text: '按商品', value: -1 },{text: '按种类', value: -2 }]"
:filter-method="filterClass">
<template slot-scope="scope">
<el-tag
class="tag"
:type="scope.row.discount_f_id===0 && scope.row.discount_c_id===0 ? 'success' : 'primary'"
disable-transitions
style="height: auto;white-space: normal;">
<span v-show="scope.row.discount_f_id===0 && scope.row.discount_c_id===0">全部商品</span>
<span v-show="scope.row.discount_f_id!==0">{{ scope.row.discount_f_id }}</span>
<span v-show="scope.row.discount_c_id!==0">{{ scope.row.discount_c_id }}</span>
</el-tag>
</template>
</el-table-column>
<el-table-column prop="discount_start_time" sortable label="优惠开始时间" width="160"></el-table-column>
<el-table-column prop="discount_end_time" sortable label="优惠结束时间" width="160"></el-table-column>
<el-table-column label="操作" >
<template slot-scope="scope">
<el-button @click="handleModify(scope.row)" type="primary" size="small" plain>修改</el-button>
<el-button @click="handleDelete(scope.row)" type="danger" size="small" plain>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
:current-page="currentPage"
:page-size="pageSize"
layout="total, prev, pager, next, jumper"
:total="total"
:page-count="page_number"
style="margin-top: 30px"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</template>
<script>
import Cookie from "js-cookie";
export default {
data() {
return {
//页面数据
tableData: [{
discount_id: 1,
discount_name: '',
discount_num: 1,
discount_f_id: '',
discount_c_id:'',
discount_start_time:'',
discount_end_time:''
}],
dialogForm:[{
discount_id: 1,
discount_name: '',
discount_num: 1,
discount_f_id: '',
discount_c_id:'',
// discount_start_time:'',
// discount_end_time:''
dateRange:['']// 日期选择
}],
//表单级联选择框数据
options:[],
//级联菜单回显
cascadeBackResult:[],
//表单校验
rules:{
discount_name:[
{ required:true, trigger:'blur', message:'请输入套餐名'}
],
discount_num:[
{ required:true, trigger:'blur', message:'请输入折扣'}
],
dateRange:[
{ required:true, trigger:'blur', message:'请选择日期'}
]
},
//数据处理
multipleSelection: [],
input: '',//搜索框
dialogVisible:false,//增加与修改表单
modelType:0, //0表示新增弹窗，1表示修改弹窗
//分页相关
currentPage:1,
pageSize:10,
page_number:1,//总页数
total:10,//总条数
}
},
created() {
this.currentPage=1;
this.fetchData();
},
methods: {
fetchData(){
//获取所有信息
const _this=this;
try {
axios({
method: 'post',
url: 'http://localhost:8181/discount/list',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
page:_this.currentPage,
page_size:_this.pageSize
}
}).then(function (response){
if (response.data.code===200){
//查询所有信息成功
_this.tableData=response.data.data.discounts;
_this.page_number=response.data.data.page_number;
_this.total=response.data.data.total;
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}catch (error){
this.$message.warning('页面加载出错,请重试!')
}
},
//搜索
handleSearch(){
const _this = this
try {
axios({
method: 'post',
url: 'http://localhost:8181/discount/query',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
page:_this.currentPage,
page_size:_this.pageSize,
discount_name:_this.input
}
}).then(function (response){
if (response.data.code===200){
//查询所有信息成功
_this.tableData=response.data.data.discounts;
_this.page_number=response.data.data.page_number;
_this.total=response.data.data.total;
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}catch (error){
this.$message.warning('页面加载出错,请重试!')
}
},
//分页
handleCurrentChange(page) {
this.currentPage = page;
this.fetchData();
},
//多选
handleSelectionChange(val) {
this.multipleSelection = val;
},
//表格筛选相关
filterClass(value, row) {
if(value===0) //全部商品
return row.discount_c_id===0 && row.discount_f_id===0;
if(value===-1) //按商品
return row.discount_c_id===0 && row.discount_f_id!==0;
if(value===-2) //按种类
return row.discount_c_id!==0 && row.discount_f_id===0;
},
//表单相关
//获取级联菜单
getCascade(){
const _this=this;
axios({
method: 'post',
url: 'http://localhost:8181/discount/cascade',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
}
}).then(function (response){
if (response.data.code===200){
//查询级联菜单信息成功
_this.options=response.data.cascade;
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
},
//级联选择后为表单项赋值
handleCascade(value){
if(value[0]===0){ //全部商品
this.dialogForm.discount_f_id=0;
this.dialogForm.discount_c_id=0;
}
else if(value[0]===-1){ //按商品
this.dialogForm.discount_f_id=value[1];
this.dialogForm.discount_c_id=0;
}
else if(value[0]===-2){ //按种类
this.dialogForm.discount_f_id=0;
this.dialogForm.discount_c_id=value[1];
}
},
//级联菜单回显
cascadeBack(value1,value2){
if(value1===0) //全部商品
this.cascadeBackResult=[0]
else if (value1===-1 || value1===-2)
this.cascadeBackResult=[value1,value2]
},
//添加
handleAdd(){
this.modelType = 0
this.dialogVisible = true
this.getCascade()
},
//修改
handleModify(row){
const _this = this
this.modelType = 1
this.getCascade()
axios({
method: 'post',
url: 'http://localhost:8181/discount/info',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
discount_id: row.discount_id
}
}).then(function (response){
if (response.data.code===200) {
//获取信息成功
_this.dialogForm = response.data.data
//级联菜单回显
if(response.data.data.discount_f_id===0 && response.data.data.discount_c_id===0)
_this.cascadeBack(0,0)
else if(response.data.data.discount_f_id!==0)
_this.cascadeBack(-1,response.data.data.discount_f_id) //按商品
else if(response.data.data.discount_c_id!==0)
_this.cascadeBack(-2,response.data.data.discount_c_id) //按种类
//elementUI的DatePicker选择日期范围在编辑时需要用到Vue的$set方法赋值
_this.$set(_this.dialogForm,'dateRange',[response.data.data.discount_start_time,response.data.data.discount_end_time])
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
_this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.dialogVisible = true
},
//提交添加或修改的表单
submitForm(){ //提交表单
const _this=this;
this.$refs.dialogForm.validate((valid) =>{
if(valid){
//表单校验
if(_this.dialogForm.discount_f_id===undefined || _this.dialogForm.discount_f_id===''){
_this.$message.warning('请选择优惠商品')
return
}
if(_this.dialogForm.dateRange===undefined || _this.dialogForm.dateRange.length===0){
_this.$message.warning('请选择日期')
return
}
if(_this.modelType===0){
//提交添加表单
axios({
method: 'post',
url: 'http://localhost:8181/discount/add',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
discount_name:_this.dialogForm.discount_name,
discount_num:_this.dialogForm.discount_num,
discount_f_id:_this.dialogForm.discount_f_id,
discount_c_id:_this.dialogForm.discount_c_id,
discount_start_time:_this.dialogForm.dateRange[0],
discount_end_time:_this.dialogForm.dateRange[1]
}
}).then(function (response){
if (response.data.code===200) {
//添加信息成功
_this.$message.success('添加成功!')
//再次获取数据以更新页面
_this.fetchData()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}
else if(_this.modelType===1){
//提交修改表单
axios({
method: 'post',
url: 'http://localhost:8181/discount/modify',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
discount_id:_this.dialogForm.discount_id,
discount_name:_this.dialogForm.discount_name,
discount_num:_this.dialogForm.discount_num,
discount_f_id:_this.dialogForm.discount_f_id,
discount_c_id:_this.dialogForm.discount_c_id,
discount_start_time:_this.dialogForm.dateRange[0],
discount_end_time:_this.dialogForm.dateRange[1]
}
}).then(function (response){
if (response.data.code===200) {
//修改信息成功
_this.$message.success('修改成功!')
//再次获取数据以更新页面
_this.handleSearch()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
}
//清空表单数据
this.handleClose();
}
})
},
//删除
handleDelete(row){
const _this = this;
this.$confirm('此操作将永久删除该套餐, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除
axios({
method: 'post',
url: 'http://localhost:8181/discount/deletePer',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
discount_id:row.discount_id
}
}).then(function (response){
if (response.data.code===200) {
//删除成功
_this.handleSearch()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("页面加载出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.$message({type: 'success', message: '删除成功!'});
}).catch(() => {
this.$message({type: 'info', message: '已取消删除'});
});
},
handleDeleteMul(){
const _this = this
if(_this.multipleSelection.length===0)
this.$message({type: 'warning', message: '请选择套餐'});
else{
let ids = []
for (let i=0; i<_this.multipleSelection.length; i++){
ids[i] = _this.multipleSelection[i].discount_id
}
this.$confirm('此操作将永久删除套餐信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确认删除
axios({
method: 'post',
url: 'http://localhost:8181/discount/deleteMul',
headers: {
Authorization: Cookie.get('token'),
'Content-Type': 'application/json'
},
data:{
discount_ids:ids
}
}).then(function (response){
if (response.data.code===200) {
//删除成功
_this.handleSearch()
}
if (response.data.code===401){
_this.$message.warning('身份验证失败,请重新登录!')
}
if (response.data.code===403){
const message = response.data.msg;
this.$alert("任务出错,具体原因如下:\n"+message, '页面加载失败', {
confirmButtonText: '确定'
})
}
});
this.$message({type: 'success', message: '批量删除成功!'});
}).catch(() => {
this.$message({type: 'info', message: '已取消删除'});
});
}
},
//dialog弹窗关闭时触发该方法
handleClose(){
this.$refs.dialogForm.resetFields()
//重置表单
this.dialogForm.discount_id = 1;
this.dialogForm.discount_name='';
this.dialogForm.discount_num=1;
this.dialogForm.discount_f_id='';
this.dialogForm.discount_c_id='';
this.cascadeBackResult=[];
this.dialogForm.discount_start_time='';
this.dialogForm.discount_end_time='';
this.dialogForm.dateRange=[];
this.dialogVisible = false;
}
}
}
</script>
<style>
.tableTop{
width: 1200px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0 20px 50px;
}
</style>
Write Preview
Loading…
Cancel
Save