页面基本元素（展示以及增删改查的按钮）
<template>
<div class="app-container">
<!-- 头部选项 -->
<div class="filter-container">
<el-input v-model="listQuery.uname" placeholder="用户名" style="width: 190px;" clearable/>
<el-button type="primary" icon="el-icon-search" @click="handleSelect" style="margin-left:5px;" >
查询
</el-button>
<el-button style="margin-left: 5px;" type="primary" icon="el-icon-edit" @click="handleCreate">
添加
</el-button>
</div>
<br/>
<!-- 数据展示布局 -->
<el-table
v-loading="listLoading"
:data="datalist"
border
fit
highlight-current-row
style="width: 100%;"
>
<el-table-column label="序号" type="index" width="100px" align="center" />
<el-table-column label="用户名" width="120" align="center">
<template slot-scope="{ row }">
<span>{
{ row.uname }}</span>
</template>
</el-table-column>
<el-table-column label="代金券名" width="120" align="center">
<template slot-scope="{ row }">
<span>{
{ row.vname }}</span>
</template>
</el-table-column>
<el-table-column label="状态" width="100" align="center">
<template slot-scope="{row}">
<el-tag :type="row.status | statusFilter">
<div v-if="row.status == 0">
<span>正常</span>
</div>
<div v-if="row.status == 1">
<span>锁定</span>
</div>
</el-tag>
</template>
</el-table-column>
<el-table-column label="开始时间" align="center" width="200">
<template slot-scope="{row}">
<span>{
{ row.startTime | dateFilter }}</span>
</template>
</el-table-column>
<el-table-column label="截至时间" align="center" width="200">
<template slot-scope="{row}">
<span>{
{ row.endTime | dateFilter }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
<template slot-scope="{row,$index}">
<el-button v-if="row.status == 0 || row.status==1 || row.status==2"
:disabled="row.status==1" size="mini" type="danger" @click="down(row,$index)">
锁定
</el-button>
<el-button v-if="row.status == 3" size="mini" type="success" @click="up(row,$index)">
解锁
</el-button>
<el-button type="primary" size="mini" @click="handleUpdate(row)">
编辑
</el-button>
<el-button size="mini" type="danger" @click="handleDelete(row,$index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加/编辑 -->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<el-form ref="dataForm" status-icon :rules="rules" :model="temp" label-position="left" label-width="80px" style="width: 400px; margin-left:60px;">
<el-form-item label="用户" prop="uid" v-if="dialogStatus=='create'">
<el-select v-model="temp.uid" placeholder="请选择用户" >
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="用户" prop="name" v-if="dialogStatus=='update'" >
<el-input v-model="temp.uname" disabled/>
</el-form-item>
<el-form-item label="代金券" prop="vid">
<el-select v-model="temp.vid" placeholder="请选择代金券">
<el-option v-for="item in voucherList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<div class="block">
<span class="demonstration"></span>
<el-date-picker
v-model="temp.startTime"
style="2700px;"
type="datetime"
placeholder="选择开始时间">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="截止时间" prop="endTime" >
<div class="block">
<span class="demonstration" style="270px"></span>
<el-date-picker
v-model="temp.endTime"
type="datetime"
placeholder="选择日结束时间">
</el-date-picker>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">
关闭
</el-button>
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
确认
</el-button>
</div>
</el-dialog>
<!-- 分页 -->
<el-pagination
background
:current-page="listQuery.pageNum"
:page-sizes="[10, 20, 50]"
:page-size="listQuery.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="listQuery.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>自己定义data数据和过滤
<script>
import { getVoucherBagList, addVoucherBag} from '@/api/table' //导入增删改查的方法...
function dateIfAddZero(time) { //过滤时间的方法
return time < 10 ? '0' + time : time
}
export default {
filters: {
dateFilter(date) { //定义时间过滤
var date = new Date(new Date(date).getTime()) // 中国标准时间
const year = date.getFullYear()
const month = dateIfAddZero(date.getMonth() + 1)
const day = dateIfAddZero(date.getDate())
const hours = dateIfAddZero(date.getHours())
const minutes = dateIfAddZero(date.getMinutes())
const seconds = dateIfAddZero(date.getSeconds())
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
},
statusFilter(status) { //定义样式过滤
const statusMap = {
0: 'success',
1: 'danger',
2:'info'
}
return statusMap[status]
}
},
data() {
return {
groupList: [{ type: 0,name: '正常' }, // 自定义下拉框
{type: 1, name: '锁定' }
],
datalist: null, //定义就收数据默认的list
userList:[], //自定义一个list接收后台集合，做下拉框
total: 0, //默认0条记录
listLoading: true, //默认加载
listQuery: { //定义分页查询的条件
pageNum: 1,
pageSize: 10,
total: 0,
uname: '' //条件查询的条件字段
},
dialogStatus: '', //定义添加和修改 'create' or 'update'
dialogFormVisible: false, //定义添加修改框默认不显示
pvData: [],
rules: {
uid: [{ required: true, message: '用户不能为空', trigger: 'change' }],
vid: [{ required: true, message: '代金券不能为空', trigger: 'blur' }],
startTime: [ { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }],
endTime: [ { type: 'date', required: true, message: '请选择截止日期', trigger: 'change' }]
},
textMap: { //添加和编辑的标题
update: '编辑',
create: '添加'
},
temp: {
id: '',
name: '',
type: ''
}
}
}
}
</script>
基本的增删改查方法
created() { //页面加载
this.getList()
},
methods: {
getList() {
getVoucherBagList(this.listQuery.pageNum,this.listQuery.pageSize,this.listQuery.uname).then(response => {
this.datalist = response.data.voucherBagList
this.listQuery.total = response.data.total
this.userList=response.data.userList
this.voucherList=response.data.voucherList
setTimeout(() => { // Just to simulate the time of the request
this.listLoading = false
}, 0.5 * 1000)
})
},
handleSizeChange(newSize) { //每页条数改变时触发
console.log(newSize)
this.listQuery.pageSize = newSize
this.getList()
},
handleCurrentChange(newPage) { //页码改变时触发
console.log(newPage)
this.listQuery.pageNum = newPage
this.getList()
},
resetTemp() { //清空数据，自己定义内容
this.temp = {
id: undefined,
name: '',
type: ''
}
},
handleSelect() { //点击搜索
this.getList()
this.listLoading = true
setTimeout(() => { // Just to simulate the time of the request
this.listLoading = false
}, 0.5 * 1000)
},
handleCreate() { //点击添加
this.resetTemp() //清空数据
this.dialogStatus = 'create'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
handleUpdate(row) { //点击编辑
this.temp = Object.assign({}, row) // 把数据回显给temp
this.dialogStatus = 'update'
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
},
createData() { //新增
this.listLoading = true
addVoucherBag(this.temp).then(response => {
if (response.code == '200') {
// 关闭弹窗
this.dialogFormVisible = false
this.$notify({
title: '添加成功',
type: 'success'
})
this.getList()
} else {
this.$notify.error({
title: '添加错误'
})
}
})
},
updateData() { //修改
this.$refs['dataForm'].validate((valid) => {
if (valid) {
updateVoucherBag(this.temp).then(response => {
if (response.code == '200') {
this.dialogFormVisible = false
this.$notify({
title: '修改成功',
type: 'success'
})
this.getList()
} else {
this.dialogFormVisible = false
this.$notify.error({
title: '修改错误'
})
}
})
}
})
},
handleDelete(row, index) { //点击删除触发
this.$confirm('确定删除吗', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'success',
callback: action => {
if (action === 'confirm') {
const id = row.id
delVoucherBag(id).then(response => {
this.$notify({
title: '删除成功',
message: '',
type: 'success',
duration: 2000
})
this.getList()
}).catch(() => {
console.log('error submit')
})
}
}
})
},
up(row){ //自定义解锁
this.upOrDown(row.id,0)
},
down(row){ //自定义锁定
this.upOrDown(row.id,3)
},
upOrDown(id,status) { //修改状态触发
updateVoucherBagStatus(id,status).then(() =>{
this.$notify({
title: '修改成功',
message: '',
type: 'success',
duration: 2000
})
this.getList()
}).catch(() => {
console.log('error submit')
})
}
}效果展示：
