<template>
|
<div>
|
<Card>
|
<!-- 搜索表单 -->
|
<!-- <Form-->
|
<!-- ref="searchForm"-->
|
<!-- @keydown.enter.native="handleSearch"-->
|
<!-- :model="searchForm"-->
|
<!-- inline-->
|
<!-- :label-width="80"-->
|
<!-- class="search-form"-->
|
<!-- >-->
|
<!-- <FormItem label="规则名称" prop="ruleName">-->
|
<!-- <Input-->
|
<!-- type="text"-->
|
<!-- v-model="searchForm.ruleName"-->
|
<!-- placeholder="请输入规则名称"-->
|
<!-- clearable-->
|
<!-- @on-clear="handleSearch"-->
|
<!-- @on-change="handleSearch"-->
|
<!-- style="width: 180px"-->
|
<!-- />-->
|
<!-- </FormItem>-->
|
<!-- <FormItem label="规则编码" prop="ruleCode">-->
|
<!-- <Input-->
|
<!-- type="text"-->
|
<!-- v-model="searchForm.ruleCode"-->
|
<!-- placeholder="请输入规则编码"-->
|
<!-- clearable-->
|
<!-- @on-clear="handleSearch"-->
|
<!-- @on-change="handleSearch"-->
|
<!-- style="width: 180px"-->
|
<!-- />-->
|
<!-- </FormItem>-->
|
|
<!-- <Button-->
|
<!-- @click="handleSearch"-->
|
<!-- type="primary"-->
|
<!-- icon="ios-search"-->
|
<!-- class="search-btn"-->
|
<!-- >搜索</Button>-->
|
<!-- <Button-->
|
<!-- @click="resetSearch"-->
|
<!-- icon="md-refresh"-->
|
<!-- style="margin-left: 8px"-->
|
<!-- >重置</Button>-->
|
<!-- </Form>-->
|
|
<!-- 奖品表格 -->
|
<Table
|
:loading="loading"
|
border
|
:columns="columns"
|
:data="list"
|
ref="table"
|
class="table"
|
>
|
<!-- 操作按钮插槽 -->
|
<template slot-scope="{ row }" slot="action">
|
<div class="action-btns">
|
<Button
|
type="info"
|
size="small"
|
@click="openEdit(row)"
|
>编辑</Button>
|
</div>
|
</template>
|
</Table>
|
|
<!-- 分页 -->
|
<Row type="flex" justify="end" class="page-footer">
|
<Page
|
:current="searchForm.pageNumber"
|
:total="total"
|
:page-size="searchForm.pageSize"
|
@on-change="changePage"
|
@on-page-size-change="changePageSize"
|
:page-size-opts="[10, 20, 50]"
|
size="small"
|
show-total
|
show-elevator
|
show-sizer
|
></Page>
|
</Row>
|
|
<!-- 奖品编辑/新增模态框 -->
|
<Modal
|
v-model="modelShow"
|
:title="modelTitle"
|
@on-cancel="modelClose"
|
width="1200"
|
:mask-closable="false"
|
>
|
<Form ref="form" :model="form" :label-width="100">
|
<Row :gutter="16">
|
<Col span="24" v-if="showRuleValue">
|
<FormItem label="规则值" prop="ruleValue">
|
<InputNumber
|
v-model="form.ruleValue"
|
placeholder="请输入规则值"
|
clearable
|
style="width: 180px"
|
:min="0"
|
/>
|
</FormItem>
|
</Col>
|
<Col span="24">
|
<FormItem label="增加次数" prop="addNum" :label-width="100">
|
<InputNumber
|
v-model="form.addNum"
|
placeholder="请输入增加次数"
|
clearable
|
style="width: 180px"
|
:min="0"
|
/>
|
</FormItem>
|
</Col>
|
|
</Row>
|
</Form>
|
|
<div slot="footer">
|
<Button @click="modelClose">取消</Button>
|
<Button type="primary" :loading="submitLoading" @click="update">提交</Button>
|
</div>
|
</Modal>
|
</Card>
|
</div>
|
</template>
|
|
<script>
|
import { getPage,updateById } from "@/api/prize-ruler.js";
|
export default {
|
name: "prize-euler",
|
data() {
|
return {
|
loading:false,
|
columns:[
|
{
|
title: '规则名称',
|
key: 'ruleName',
|
align: 'center',
|
minWidth: 200,
|
},
|
{
|
title: '规则编码',
|
key: 'ruleCode',
|
minWidth: 100,
|
},
|
{
|
title: '规则值',
|
key: 'ruleValue',
|
minWidth: 100,
|
},
|
{
|
title: '增加次数',
|
key: 'addNum',
|
minWidth: 100,
|
},
|
{
|
title:'操作',
|
slot: 'action',
|
width: 200,
|
align:'center',
|
fixed:'right'
|
}
|
],
|
total:0,
|
list:[],
|
submitLoading:false,
|
modelShow:false,
|
modelTitle:'',
|
showRuleValue:false,
|
form:{
|
id:'',
|
ruleName:'',
|
ruleCode:'',
|
ruleValue:0,
|
addNum:0,
|
},
|
searchForm:{
|
ruleName:'',
|
ruleCode:'',
|
pageSize:10,
|
pageNumber:1,
|
},
|
|
}
|
},
|
|
mounted() {
|
this.init();
|
},
|
methods: {
|
resetSearch(){
|
this.$refs.searchForm.resetFields()
|
this.searchForm.pageNumber = 1
|
this.getPage()
|
},
|
|
update(){
|
//调用修改
|
let state = false;
|
if ("USER_BUY_SUM_PRICE" === this.form.ruleCode || "USER_STAY_TIME" === this.form.ruleCode){
|
state = true;
|
if (this.form.ruleValue === null || this.form.ruleValue === 0){
|
this.$Message.error("请输入规则值且大于0")
|
return
|
}
|
}
|
if (this.form.addNum === 0){
|
this.$Message.error("请输入增加次数且大于0")
|
return;
|
}
|
if (!state){
|
this.form.ruleValue = null
|
}
|
console.log(this.form)
|
updateById(this.form).then(res =>{
|
if (res.code === 200){
|
this.$Message.success(res.msg)
|
}else {
|
this.$Message.error(res.msg)
|
}
|
this.getPage();
|
this.modelShow = false;
|
})
|
|
},
|
modelClose(){
|
this.modelShow = false
|
this.submitLoading = false
|
|
},
|
getPage(){
|
this.loading = true;
|
getPage(this.searchForm).then(res =>{
|
this.loading = false;
|
if (res.code === 200){
|
this.list = res.data;
|
this.total = res.total
|
}else {
|
this.$Message.error(res.msg)
|
}
|
})
|
},
|
detail(row){
|
this.infoModalShow = true;
|
this.detailData = {...row};
|
},
|
openEdit(row){
|
this.showRuleValue = false;
|
|
this.$refs.form.resetFields();
|
this.modelTitle = "修改规则值";
|
|
let form = {...row};
|
form.ruleValue =Number(form.ruleValue);
|
this.form = {...form};
|
if ("USER_BUY_SUM_PRICE" === row.ruleCode){
|
this.showRuleValue = true;
|
}else if ("USER_STAY_TIME" === row.ruleCode){
|
this.showRuleValue = true;
|
}
|
|
this.modelShow = true;
|
},
|
|
handleSearch(){
|
this.getPage()
|
},
|
// 初始化数据
|
init() {
|
this.getPage()
|
},
|
changePage(){
|
this.searchForm.pageNumber = 1
|
this.searchForm.pageSize = pageSize
|
this.getPage()
|
},
|
changePageSize(){
|
this.searchForm.pageNumber = page
|
this.getPage()
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.search-form {
|
padding: 16px;
|
background: #f8f8f9;
|
border-radius: 4px;
|
margin-bottom: 16px;
|
|
.ivu-form-item {
|
margin-bottom: 16px;
|
margin-right: 16px;
|
}
|
|
.search-btn {
|
margin-left: 8px;
|
}
|
}
|
.table {
|
.thumbnail {
|
max-width: 100%;
|
max-height: 100px;
|
object-fit: contain;
|
cursor: pointer;
|
transition: all 0.3s;
|
|
&:hover {
|
transform: scale(1.05);
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
|
}
|
}
|
|
.action-btns {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
|
.ivu-btn {
|
margin: 4px;
|
font-size: 12px;
|
padding: 2px 6px;
|
min-width: 60px;
|
}
|
}
|
}
|
</style>
|
