等级配置
This commit is contained in:
liuye
260
project/tianfuxing/AppLevelList/AppLevelList.vue
Normal file
260
project/tianfuxing/AppLevelList/AppLevelList.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div class="AppLevelList">
|
||||
<ai-list>
|
||||
<template slot="title">
|
||||
<ai-title title="等级配置" :isShowBottomBorder="false" :isShowArea="false"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<ai-search-bar>
|
||||
<template slot="left">
|
||||
<el-button type="primary" icon="iconfont iconAdd" size="small" @click="add({}, '添加')">添加</el-button>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<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 label="操作" align="center" width="250" slot="option">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="top(row)" v-if="row.showIndex > 1">上移</el-button>
|
||||
<el-button type="text" @click="next(row)" v-if="row.showIndex < tableData.length">下移</el-button>
|
||||
<el-button type="text" @click="addMiniApp(row, false, row.$index)">编辑</el-button>
|
||||
<el-button type="text" @click="removeMiniApp(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<ai-dialog :title="dialog.title" :visible.sync="visible" @onCancel="visible = false" @onConfirm="addConfirm" width="800px">
|
||||
<el-form ref="ruleForm" :model="dialogInfo" :rules="formRules" size="small" label-width="120px">
|
||||
<el-form-item label="等级名称" prop="title">
|
||||
<el-input placeholder="请输入等级名称" :maxlength="10" show-word-limit v-model="dialogInfo.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="积分范围" prop="title">
|
||||
<el-input placeholder="积分" :maxlength="10" v-model="dialogInfo.title" style="width:100px;"></el-input>
|
||||
<span style="margin:0 16px;">-</span>
|
||||
<el-input placeholder="积分" :maxlength="10" v-model="dialogInfo.title" style="width:100px;"></el-input>
|
||||
</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 {
|
||||
search: {
|
||||
title: '',
|
||||
},
|
||||
tableData: [],
|
||||
page: {
|
||||
size: 10,
|
||||
current: 1,
|
||||
total: 0,
|
||||
},
|
||||
visible: false,
|
||||
dialog: {
|
||||
title: '',
|
||||
},
|
||||
dialogInfo: {},
|
||||
formRules: {
|
||||
banner: [{required: true, message: '请添加banner封面', trigger: 'blur'}],
|
||||
title: [{required: true, message: '请输入主页名称', trigger: 'blur'}],
|
||||
},
|
||||
colConfigs: [
|
||||
{prop: 'showIndex', label: '等级', width: 120, align: 'center'},
|
||||
{prop: 'title', label: '等级名称', width: 150, align: 'center'},
|
||||
{prop: 'title', label: '积分范围', align: 'center'},
|
||||
{slot: 'option', label: '操作', width: 200, align: 'center'},
|
||||
],
|
||||
miniAppColConfigs: [
|
||||
{prop: 'showIndex', label: '序号', width: 80, align: 'center'},
|
||||
{prop: 'icon', label: 'icon图片', slot: 'icon', align: 'center'},
|
||||
{prop: 'title', label: '积分范围',},
|
||||
{slot: 'option', label: '操作', align: 'center'},
|
||||
],
|
||||
miniAppFormRules: {
|
||||
icon: [{required: true, message: '请添加icon图片', trigger: 'blur'}],
|
||||
title: [{required: true, message: '请输入应用名称', trigger: 'blur'}],
|
||||
accessPath: [{ required: true, message: '请输入页面路径', trigger: 'blur' }]
|
||||
},
|
||||
miniAppDialog: false,
|
||||
miniAppInfo: {},
|
||||
isAddMiniApp: false,
|
||||
editMiniIndex: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
add(row, title) {
|
||||
this.dialog.title = title
|
||||
this.visible = true
|
||||
if(row && row.id) {
|
||||
this.instance.post(`/app/appwxapplication/queryDetailById?id=${row.id}`).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.dialogInfo = res.data
|
||||
this.dialogInfo.bannerList = [{url: this.dialogInfo.banner}]
|
||||
this.dialogInfo.wxApplicationList = this.dialogInfo.wxApplicationList || []
|
||||
}
|
||||
})
|
||||
}else {
|
||||
this.dialogInfo = {}
|
||||
this.dialogInfo.wxApplicationList = []
|
||||
}
|
||||
},
|
||||
addConfirm() {
|
||||
this.$refs.ruleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.instance.post(`/app/appwxapplication/addOrUpdate`, {...this.dialogInfo}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success('新增成功')
|
||||
this.visible = false
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
remove(id) {
|
||||
this.$confirm('删除后不可恢复，是否要删除该配置？', {
|
||||
type: 'error',
|
||||
}).then(() => {
|
||||
this.instance.post(`/app/appwxapplication/delete?ids=${id}`).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
addMiniApp(row, isAddMiniApp, index) {
|
||||
this.miniAppInfo = row || {}
|
||||
if(this.miniAppInfo.icon) {
|
||||
this.miniAppInfo.iconList = [{url: this.miniAppInfo.icon}]
|
||||
this.editMiniIndex = index
|
||||
}
|
||||
this.miniAppDialog = true
|
||||
this.isAddMiniApp = isAddMiniApp
|
||||
},
|
||||
removeMiniApp(row) {
|
||||
this.$confirm('删除后不可恢复，是否要删除该应用？', {
|
||||
type: 'error',
|
||||
}).then(() => {
|
||||
var showIndex = row.showIndex
|
||||
this.dialogInfo.wxApplicationList.map((item) => {
|
||||
if(item.showIndex > showIndex) {
|
||||
item.showIndex = item.showIndex - 1
|
||||
}
|
||||
})
|
||||
this.dialogInfo.wxApplicationList.splice(row.showIndex-1, 1)
|
||||
})
|
||||
},
|
||||
addMiniAppConfirm() {
|
||||
this.$refs.miniApppRuleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if(this.isAddMiniApp) { //新增
|
||||
this.miniAppInfo.showIndex = this.dialogInfo.wxApplicationList.length + 1
|
||||
this.dialogInfo.wxApplicationList.push(this.miniAppInfo)
|
||||
}else {
|
||||
this.dialogInfo.wxApplicationList[this.editMiniIndex] = this.miniAppInfo
|
||||
}
|
||||
this.miniAppDialog = false
|
||||
}
|
||||
})
|
||||
},
|
||||
top(row) {
|
||||
var list = JSON.parse(JSON.stringify(this.dialogInfo.wxApplicationList))
|
||||
var oldRow = list[row.showIndex - 2]
|
||||
oldRow.showIndex ++
|
||||
row.showIndex --
|
||||
list[row.showIndex - 1] = row
|
||||
list[row.showIndex] = oldRow
|
||||
this.$set(this.dialogInfo, 'wxApplicationList', list)
|
||||
},
|
||||
next(row) {
|
||||
var list = JSON.parse(JSON.stringify(this.dialogInfo.wxApplicationList))
|
||||
var oldRow = list[row.showIndex]
|
||||
oldRow.showIndex --
|
||||
row.showIndex ++
|
||||
list[row.showIndex-1] = row
|
||||
list[oldRow.showIndex-1] = oldRow
|
||||
this.$set(this.dialogInfo, 'wxApplicationList', list)
|
||||
},
|
||||
changeBanner(e) {
|
||||
this.dialogInfo.bannerList = e
|
||||
this.dialogInfo.banner = e[0].url
|
||||
},
|
||||
changeIcon(e) {
|
||||
this.miniAppInfo.iconList = e
|
||||
this.miniAppInfo.icon = e[0].url
|
||||
},
|
||||
getList() {
|
||||
this.instance.post(`/app/appwxapplication/list`, null, {
|
||||
params: {
|
||||
...this.search,
|
||||
...this.page,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
res.data.records.map((item) => {
|
||||
item.appNames = ''
|
||||
item.wxApplicationList.map((app, index) => {
|
||||
if(index == 0) {
|
||||
item.appNames = app.title
|
||||
}
|
||||
if(index > 0) {
|
||||
item.appNames = item.appNames + `,${app.title}`
|
||||
}
|
||||
})
|
||||
})
|
||||
this.tableData = res.data.records
|
||||
|
||||
this.page.total = res.data.total
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppLevelList {
|
||||
height: 100%;
|
||||
// padding: 15px 10px;
|
||||
.banner-img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.dialog-title-flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
h3{
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
span{
|
||||
color: #26f;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -15,10 +15,26 @@
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" label="操作" fixed="right" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click.native="toAdd(row.id)">调整积分</el-button>
|
||||
<el-button type="text" @click.native="changeIntegral(row)">调整积分</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<ai-dialog
|
||||
title="调整积分"
|
||||
:visible.sync="dialog"
|
||||
:destroyOnClose="true"
|
||||
width="720px"
|
||||
@onConfirm="onConfirm"
|
||||
@closed="form={}">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="类型" prop="integralCalcType">
|
||||
<ai-select v-model="form.integralCalcType" :selectList="dict.getDict('integralCalcType')"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="积分" prop="integral">
|
||||
<el-input v-model.trim="form.integral" placeholder="请输入正数" size="small"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-list>
|
||||
</section>
|
||||
@@ -43,10 +59,15 @@ export default {
|
||||
total: 0,
|
||||
},
|
||||
tableData: [],
|
||||
dialog: false,
|
||||
form: {
|
||||
integralCalcType: "",
|
||||
integral: '',
|
||||
},
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$dict.load('electionStatus', 'electionMethod').then(()=> {
|
||||
this.$dict.load('integralCalcType', 'electionMethod').then(()=> {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
@@ -59,10 +80,18 @@ export default {
|
||||
{prop: "chooseNumber", label: "积分数量", align: "center", sortable: "custom"},
|
||||
{slot: "options", },
|
||||
]
|
||||
}
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
integralCalcType: [{required: true, message: '请选择类型', trigger: 'change'}],
|
||||
integral: [{required: true, message: '请输入积分', trigger: 'blur' },
|
||||
{pattern: /^([1-9]\d*|0)(\.\d{1,2})?$/, message: '请输入正数且最多只能保留两位小数'}],
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
sortChange(col) {
|
||||
console.log(col.order)
|
||||
if(col.prop === 'chooseNumber') { // 剩余积分
|
||||
// this.search.sortFiled = 0
|
||||
// if(col.order === 'ascending') {
|
||||
@@ -74,6 +103,35 @@ export default {
|
||||
// }
|
||||
}
|
||||
},
|
||||
changeIntegral(row) {
|
||||
this.dialog = true
|
||||
},
|
||||
onConfirm() {
|
||||
this.$refs.form.validate((valid)=> {
|
||||
if(valid) {
|
||||
this.flag = true
|
||||
this.instance.post(`/app/appintegraluser/changeIntegral`,{
|
||||
ids: this.form.ids,
|
||||
eventDesc: this.form.eventDesc,
|
||||
enclosure: this.form.enclosure, // 附件
|
||||
integralCalcType: this.form.integralCalcType,
|
||||
integral: this.form.integral,
|
||||
}).then(res => {
|
||||
if(res?.code == 0) {
|
||||
this.$message.success('调整积分成功')
|
||||
setTimeout(() =>{
|
||||
this.dialog = false
|
||||
this.getTableData()
|
||||
this.flag = false
|
||||
}, 600)
|
||||
} else {
|
||||
this.flag = false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
getList() {
|
||||
this.instance.post(`/app/appgeneralelectioninfo/list`,null,{
|
||||
params: {
|
||||
|
||||
Reference in New Issue
Block a user