Skip to content

S
soss
Commit e04187db by lixiaomin
Options

新增优惠券管理的页面

parent f34ce0d4
Showing with 680 additions and 1 deletions
src/api/coupon/coupon.js 0 → 100644
import request from "@/utils/request";
// 查询列表
export function listClass(query) {
return request({
url: "/system/category/list",
method: "get",
params: query,
});
}
// 查询列表
export function getList(query) {
return request({
url: "/system/category/getList",
method: "get",
params: query,
});
}
// 查询详细
export function getClass(id) {
return request({
url: "/system/category/" + id,
method: "get",
});
}
// 新增
export function addClass(data) {
return request({
url: "/system/category",
method: "post",
data: data,
});
}
// 修改
export function updateClass(data) {
return request({
url: "/system/category",
method: "put",
data: data,
});
}
// 删除
export function delClass(id) {
return request({
url: "/system/category/" + id,
method: "delete",
});
}
// 查询排序列表
export function turnList(query) {
return request({
url: "/system/category/turnOrder",
method: "get",
params: query,
});
}
src/api/coupon/couponType.js 0 → 100644
import request from "@/utils/request";
// 查询列表
export function listClass(query) {
return request({
url: "/system/category/list",
method: "get",
params: query,
});
}
// 查询列表
export function getList(query) {
return request({
url: "/system/category/getList",
method: "get",
params: query,
});
}
// 查询详细
export function getClass(id) {
return request({
url: "/system/category/" + id,
method: "get",
});
}
// 新增
export function addClass(data) {
return request({
url: "/system/category",
method: "post",
data: data,
});
}
// 修改
export function updateClass(data) {
return request({
url: "/system/category",
method: "put",
data: data,
});
}
// 删除
export function delClass(id) {
return request({
url: "/system/category/" + id,
method: "delete",
});
}
// 查询排序列表
export function turnList(query) {
return request({
url: "/system/category/turnOrder",
method: "get",
params: query,
});
}
src/views/coupon/coupon/index.vue 0 → 100644
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="分类名称 " prop="name">
<el-input v-model="queryParams.name" placeholder="分类名称 " clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryParams.state" placeholder="请选择" clearable @keyup.enter.native="handleQuery">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['system:category:query']">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['system:category:add']">新增</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="couponTypeList">
<el-table-column label="优惠券名称" align="center" prop="name">
<template slot-scope="scope">
<a @click="handleUpdate(scope.row)" style="color: blue">{{ scope.row.name }}</a>
</template>
</el-table-column>
<el-table-column label="类别" align="center" prop="code" />
<el-table-column label="券价值" align="center" prop="remarks" />
<el-table-column label="使用范围" align="center" prop="goodsCount" />
<el-table-column label="时效" align="center" prop="goodsCount" />
<el-table-column label="状态" align="center" prop="state">
<template slot-scope="scope">
<span v-if="scope.row.state == 1">启用</span>
<span v-if="scope.row.state == 2">停用</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button v-show="scope.row.state == 2" size="mini" type="text" icon="el-icon-edit" @click="handleStatus(scope.row,'1')"
v-hasPermi="['system:category:restart']">下线</el-button>
<el-button v-show="scope.row.state == 1" size="mini" type="text" icon="el-icon-edit" @click="handleStatus(scope.row,'2')"
v-hasPermi="['system:category:stop']">上线</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:category:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="8">
<el-form-item label="优惠券名称" prop="name">
<el-input v-model="form.name" placeholder="请输入优惠券名称" minlength="1" maxlength="100"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="券类别" prop="" >
<el-select v-model="form.name" placeholder="请选择" @change="selectChange()">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="券价值">
<el-radio-group v-model="form.cost">
<el-radio :label="1">抵扣</el-radio>
<el-radio :label="2">折扣</el-radio>
<el-radio :label="3">免单</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<div>
<span>立减</span><el-input v-model="form.name"/><span>元</span>
<el-radio-group v-model="form.cost">
<el-radio :label="1">无门槛</el-radio>
<el-radio :label="6">满<el-input/>元</el-radio>
</el-radio-group>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="User可领次数">
<el-radio-group v-model="form.cost">
<el-radio :label="1">无门槛</el-radio>
<el-radio :label="6">满<el-input/>元</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="通用简述" prop="remarks">
<el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" maxlength="17"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" v-hasPermi="['system:category:edit']">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listClass,
getClass,
delClass,
addClass,
updateClass,
turnList
} from "@/api/coupon/couponType";
export default {
name: "Class",
data() {
return {
// 遮罩层
loading: true,
// 总条数
total: 0,
// 表格数据
couponTypeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
state: null
},
// 表单参数
form: {},
// 表单校验
rules: {
name: [{ required: true, message: "不能为空", trigger: "blur" }],
status: [{ required: true, message: "不能为空", trigger: "blur" }],
code: [{ required: true, message: "不能为空", trigger: "blur" }],
createTime: [{ required: true, message: "不能为空", trigger: "blur" }],
},
options: [{
value: '1',
label: '满减券'
}, {
value: '2',
label: '折扣券'
}],
};
},
created() {
this.getList();
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
listClass(this.queryParams).then((response) => {
this.couponTypeList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
status: "0",
remarks: null,
code: null,
createTime: null,
};
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.name=null;
this.queryParams.state=null;
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "新增类别";
},
/** 启用、禁用按钮操作 */
handleStatus(row,tag) {
let mess="";
let sta="";
if(tag=='1'){
mess="启用";
sta="1";
}else if(tag=='2'){
mess="停用";
sta="2";
}
this.$modal
.confirm('是否确认' + mess + '该数据项？')
.then(function () {
return updateClass({id:row.id,state:sta});
})
.then((response) => {
if(response.code="200"){
this.getList();
this.$modal.msgSuccess('' + mess + '成功');
}
})
.catch(() => { });
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getClass(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改商品分类";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
if(this.form.state == "1"){
this.$message.error("停用之后才可以修改");
return;
}
updateClass(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addClass(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
if(row.state=="1"){
this.$message.error("停用状态才能删除!");
return;
}
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除分类编码为' + row.code + '的数据项？')
.then(function () {
return delClass(ids);
})
.then((response) => {
console.log("response",response);
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => { });
},
},
};
</script>
src/views/coupon/couponType/index.vue 0 → 100644
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="分类名称 " prop="name">
<el-input v-model="queryParams.name" placeholder="分类名称 " clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="queryParams.state" placeholder="请选择" clearable @keyup.enter.native="handleQuery">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['system:category:query']">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['system:category:add']">新增</el-button>
</el-col>
</el-row>
<el-table v-loading="loading" :data="couponTypeList">
<el-table-column label="类别" align="center" prop="name">
<template slot-scope="scope">
<a @click="handleUpdate(scope.row)" style="color: blue">{{ scope.row.name }}</a>
</template>
</el-table-column>
<el-table-column label="折扣形式" align="center" prop="code" />
<el-table-column label="优惠券数量" align="center" prop="remarks" />
<el-table-column label="通用简述" align="center" prop="goodsCount" />
<el-table-column label="状态" align="center" prop="state">
<template slot-scope="scope">
<span v-if="scope.row.state == 1">启用</span>
<span v-if="scope.row.state == 2">停用</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button v-show="scope.row.state == 2" size="mini" type="text" icon="el-icon-edit" @click="handleStatus(scope.row,'1')"
v-hasPermi="['system:category:restart']">下线</el-button>
<el-button v-show="scope.row.state == 1" size="mini" type="text" icon="el-icon-edit" @click="handleStatus(scope.row,'2')"
v-hasPermi="['system:category:stop']">上线</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:category:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 添加或修改对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="类别名" prop="name">
<el-input v-model="form.name" placeholder="请输入类别名" minlength="1" maxlength="100"/>
</el-form-item>
<el-form-item label="类别" prop="name">
<el-radio-group v-model="form.name">
<el-radio :label="3">抵扣</el-radio>
<el-radio :label="6">折扣</el-radio>
<el-radio :label="9">面单</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="通用简述" prop="remarks">
<el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" maxlength="17"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" v-hasPermi="['system:category:edit']">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listClass,
getClass,
delClass,
addClass,
updateClass,
turnList
} from "@/api/coupon/couponType";
export default {
name: "Class",
data() {
return {
// 遮罩层
loading: true,
// 总条数
total: 0,
// 表格数据
couponTypeList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
state: null
},
// 表单参数
form: {},
// 表单校验
rules: {
name: [{ required: true, message: "不能为空", trigger: "blur" }],
status: [{ required: true, message: "不能为空", trigger: "blur" }],
code: [{ required: true, message: "不能为空", trigger: "blur" }],
createTime: [{ required: true, message: "不能为空", trigger: "blur" }],
},
options: [{
value: null,
label: '全部'
}, {
value: '1',
label: '启用'
}, {
value: '2',
label: '停用'
}],
};
},
created() {
this.getList();
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
listClass(this.queryParams).then((response) => {
this.couponTypeList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
status: "0",
remarks: null,
code: null,
createTime: null,
};
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.queryParams.name=null;
this.queryParams.state=null;
this.handleQuery();
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "新增类别";
},
/** 启用、禁用按钮操作 */
handleStatus(row,tag) {
let mess="";
let sta="";
if(tag=='1'){
mess="启用";
sta="1";
}else if(tag=='2'){
mess="停用";
sta="2";
}
this.$modal
.confirm('是否确认' + mess + '该数据项？')
.then(function () {
return updateClass({id:row.id,state:sta});
})
.then((response) => {
if(response.code="200"){
this.getList();
this.$modal.msgSuccess('' + mess + '成功');
}
})
.catch(() => { });
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getClass(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改商品分类";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
if(this.form.state == "1"){
this.$message.error("停用之后才可以修改");
return;
}
updateClass(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addClass(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
if(row.state=="1"){
this.$message.error("停用状态才能删除!");
return;
}
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除分类编码为' + row.code + '的数据项？')
.then(function () {
return delClass(ids);
})
.then((response) => {
console.log("response",response);
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => { });
},
},
};
</script>
\ No newline at end of file
vue.config.js
......@@ -35,7 +35,7 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `140.143.224.240:8091`,
target: `http://140.143.224.240:8091`,
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment