135 lines
4.4 KiB
Vue
135 lines
4.4 KiB
Vue
<template>
|
|
<div class="AppLevelList">
|
|
<ai-list>
|
|
<template slot="title">
|
|
<ai-title title="等级配置" :isShowBottomBorder="false" :isShowArea="false"></ai-title>
|
|
</template>
|
|
<template #content>
|
|
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current"
|
|
:size.sync="page.size" @getList="getList" class="ai-table">
|
|
<el-table-column slot="beginIntegral" label="积分范围" align="center">
|
|
<template slot-scope="{row}">
|
|
<span>{{row.beginIntegral}}-{{row.endIntegral}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column slot="option" label="操作" align="center" width="250">
|
|
<template slot-scope="{row}">
|
|
<el-button type="text" @click="add(row)">编辑</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</template>
|
|
</ai-list>
|
|
<ai-dialog title="等级修改" :visible.sync="visible" @onCancel="visible = false; dialogInfo = {}" @onConfirm="addConfirm" width="800px">
|
|
<el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="120px">
|
|
<el-form-item label="等级名称" prop="levelTitle">
|
|
<el-input placeholder="请输入等级名称" :maxlength="20" show-word-limit v-model="dialogInfo.levelTitle"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="积分范围" prop="beginIntegral" style="display:inline-block;">
|
|
<el-input placeholder="积分" :maxlength="4" v-model="dialogInfo.beginIntegral" style="width:100px;"></el-input>
|
|
<el-form-item prop="endIntegral" style="display:inline-block;" class="endIntegral">
|
|
<span style="margin: 0 16px;">-</span>
|
|
<el-input placeholder="积分" :maxlength="4" v-model="dialogInfo.endIntegral" style="width:100px;"></el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</ai-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
|
|
export default {
|
|
label: '等级配置',
|
|
name: 'AppLevelList',
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function,
|
|
},
|
|
data() {
|
|
return {
|
|
tableData: [],
|
|
page: {
|
|
size: 10,
|
|
current: 1,
|
|
total: 0,
|
|
},
|
|
visible: false,
|
|
dialogInfo: {},
|
|
formRules: {
|
|
levelTitle: [{required: true, message: '请输入等级名称', trigger: 'blur'}],
|
|
beginIntegral: [{required: true, message: '请输入积分范围', trigger: 'blur' },
|
|
{pattern: /^([1-9]\d*|0)(\.\d{1,2})?$/, message: '请输入正数且最多只能保留两位小数'}],
|
|
endIntegral: [{required: true, message: '请输入积分范围', trigger: 'blur' },
|
|
{pattern: /^([1-9]\d*|0)(\.\d{1,2})?$/, message: '请输入正数且最多只能保留两位小数'}],
|
|
},
|
|
colConfigs: [
|
|
{prop: 'level', label: '等级', width: 120, align: 'center'},
|
|
{prop: 'levelTitle', label: '等级名称', align: 'center'},
|
|
{slot: 'beginIntegral'},
|
|
{slot: 'option'},
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
created() {
|
|
this.getList()
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
add(row) {
|
|
this.visible = true
|
|
this.dialogInfo = {...row}
|
|
},
|
|
addConfirm() {
|
|
this.$refs.ruleForm.validate((valid) => {
|
|
if (valid) {
|
|
if(Number(this.dialogInfo.beginIntegral) >= Number(this.dialogInfo.endIntegral)) {
|
|
return this.$message.error('请输入正确的积分范围')
|
|
}
|
|
this.instance.post(`api/appintegrallevel/addOrUpdate`, {...this.dialogInfo}).then(res => {
|
|
if (res?.code == 0) {
|
|
this.$message.success('等级修改成功')
|
|
this.visible = false
|
|
this.getList()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getList() {
|
|
this.instance.post(`api/appintegrallevel/list`, null, {
|
|
params: {
|
|
...this.page,
|
|
},
|
|
}).then((res) => {
|
|
if (res.code == 0) {
|
|
this.tableData = res.data.records
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
.catch(() => {
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppLevelList {
|
|
height: 100%;
|
|
:deep( .endIntegral .el-form-item__content ){
|
|
margin-left: 0!important;
|
|
}
|
|
:deep( .endIntegral .el-form-item__error){
|
|
left: 40px !important;
|
|
top: 50px !important;
|
|
}
|
|
}
|
|
</style>
|