按钮显示优化

This commit is contained in:
yulixing 2019-07-03 16:06:35 +08:00
parent e7460ed438
commit a70c57a97e
4 changed files with 4 additions and 1773 deletions

View File

@ -1,750 +0,0 @@
<template>
<div class="main-content">
<!-- toolbar -->
<div class="toolbar clearfix">
<div
class="l fl"
v-if="permEdit"
>
<el-button
type="primary"
@click="addReward"
>新增</el-button>
<el-button
v-if="batch.show"
type="success"
@click="batchEnable"
>批量启用</el-button>
<el-button
v-if="batch.show"
type="warning"
@click="batchDisable"
>批量禁用</el-button>
<el-button
v-if="batch.show"
type="danger"
@click="batchDel"
>批量删除</el-button>
<el-button @click="batchOpt"> {{ batch.txt }} </el-button>
<el-button
@click="switchData"
type="warning"
>{{ switchText }}</el-button>
</div>
<div class="r fr">
<el-button
type="primary"
@click="refreshData"
>刷新</el-button>
</div>
</div>
<!-- table -->
<el-table
:data="tableData"
style="width: 100%"
class="table mgt-20 mgb-20"
@row-click="rowClick"
v-loading="isLoaded"
@selection-change="tableSelectionChange"
>
<el-table-column
v-if="batch.show"
type="selection"
width="55"
/>
<el-table-column
prop="keys"
label="关键字"
show-overflow-tooltip
:formatter="formKeys"
/>
<el-table-column
prop="items"
label="物品"
show-overflow-tooltip
:formatter="formItems"
/>
<el-table-column
prop="actived"
label="状态"
show-overflow-tooltip
:formatter="formState"
/>
<el-table-column
prop="createdAt"
label="添加时间"
show-overflow-tooltip
:formatter="formdate"
/>
<el-table-column
prop="published"
label="已发布"
show-overflow-tooltip
:formatter="formPublished"
/>
<el-table-column
prop="comment"
label="备注"
show-overflow-tooltip
/>
<el-table-column
label="操作"
fixed="right"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click.stop="editReward(scope.row)"
>详情</el-button>
<el-button
type="text"
size="small"
@click.stop="publishReward(scope.row)"
v-if="isDev"
>发布</el-button>
<el-button
type="text"
size="small"
@click.stop="enableReward(scope.row)"
v-if="!scope.row.actived && permEdit"
>启用</el-button>
<el-button
type="text"
size="small"
@click.stop="disableReward(scope.row)"
v-if="scope.row.actived && permEdit"
>禁用</el-button>
<el-button
type="text"
size="small"
@click.stop="delReward(scope.row)"
v-if="permEdit"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- pagination -->
<el-pagination
class="al-r"
layout="total, sizes, prev, pager, next, jumper"
:hide-on-single-page="true"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="total"
@size-change="sizeChange"
@current-change="pageChange"
/>
<!-- Modal1 -->
<el-dialog
title="添加奖励物品"
:visible.sync="modalVisible"
:before-close="closeModal"
width="700px"
>
<el-form
ref="modalForm"
:model="modalForm"
:rules="modalRules"
label-width="100px"
>
<el-form-item
label="关键字"
prop="keysStr"
>
<el-input v-model="modalForm.keysStr" />
<span class="ipt-tip">多个关键字使用空格分隔</span>
</el-form-item>
<el-form-item
label="物品"
prop="items"
>
<el-table
:data="modalForm.items"
style="width: 100%"
size="mini"
>
<el-table-column
prop="item_id"
label="物品"
show-overflow-tooltip
/>
<el-table-column
prop="count"
label="数量"
show-overflow-tooltip
/>
<el-table-column
label="操作"
fixed="right"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="editItem(scope.$index,scope.row)"
v-if="permEdit"
>编辑</el-button>
<el-button
type="text"
size="small"
@click="delItem(scope.$index)"
v-if="permEdit"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button
type="primary"
size="mini"
@click="addItem"
v-if="permEdit"
>添加</el-button>
</el-form-item>
<el-form-item
label="是否启用"
prop="actived"
>
<el-switch v-model="modalForm.actived" />
</el-form-item>
<el-form-item
label="备注"
prop="comment"
>
<el-input
type="textarea"
v-model="modalForm.comment"
/>
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="closeModal"> </el-button>
<el-button
type="primary"
@click="saveReward"
v-if="permEdit"
> </el-button>
</div>
</el-dialog>
<!-- Modal2 -->
<el-dialog
title="编辑奖励物品"
:visible.sync="innerModalVisible"
append-to-body
:before-close="closeInnerModal"
width="700px"
>
<el-form
ref="innerModalForm"
:model="innerModalForm"
:rules="innerModalRules"
label-width="100px"
>
<el-form-item
label="物品ID"
prop="item_id"
>
<el-input v-model="innerModalForm.item_id" />
</el-form-item>
<el-form-item
label="数量"
prop="count"
>
<el-input v-model.number="innerModalForm.count" />
</el-form-item>
</el-form>
<div slot="footer">
<el-button @click="closeInnerModal"> </el-button>
<el-button
type="primary"
@click="saveItem"
v-if="permEdit"
> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getGame } from '@/api/games'
import getPageTitle from '@/utils/get-page-title'
import {
getRewards,
saveReward,
delRewards,
switchRewardsState
} from '@/api/reward'
import moment from 'moment'
import { Promise, reject } from 'q'
export default {
name: 'GameDetailsReward',
data() {
return {
// common
uid: '',
gameInfo: {},
permEdit: false,
isNew: false,
isNewItem: false,
isDev: true,
// toolbar
batch: {
show: false,
txt: '批量操作'
},
switchText: '获取正式数据',
// table
tableData: [],
isLoaded: false,
multipleSelection: [],
// pagination
currentPage: 1,
pageSize: 10,
total: 0,
// modal1
modalVisible: false,
modalForm: {
keysStr: '',
actived: true,
items: [],
comment: ''
},
modalRules: {
keysStr: [{ required: true, message: '请输入关键字', trigger: 'blur' }],
actived: [
{ required: true, message: '请选择奖励状态', trigger: 'blur' }
],
items: [
{
type: 'array',
required: true,
min: 1,
message: '请至少添加一个奖励物品',
trigger: 'blur'
}
]
},
modalItemList: [],
// modal2
innerModalVisible: false,
innerModalForm: {
item_id: '',
count: 1
},
innerModalRules: {
item_id: [
{ required: true, message: '请输入物品 id', trigger: 'blur' }
],
count: [
{ required: true, message: '请输入物品数量', trigger: 'blur' },
{
type: 'number',
message: '物品数量只能为数字',
trigger: 'blur'
}
]
},
curItem: 0
}
},
computed: {
...mapGetters(['userInfo'])
},
mounted() {
this.uid = this.$route.params.uid
this.permEdit =
this.userInfo.permissions.includes(`${this.uid}-edit`) ||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
this.userInfo.permissions.includes(`games-writeable`)
this.getGameInfo(this.getRewards)
},
methods: {
getGameInfo(cb) {
getGame({ uid: this.uid })
.then(res => {
const { data } = res
if (data.errcode === 0) {
this.gameInfo = data.gameInfo
this.$route.meta.title = this.gameInfo.game_name
document.title = getPageTitle(this.gameInfo.game_name)
}
if (cb && cb instanceof Function) cb()
})
.catch(err => {
console.log(err)
})
},
getRewards() {
const dataType = this.isDev ? 'dev' : 'pro'
this.isLoaded = true
getRewards({
game_id: this.gameInfo.game_id,
currentPage: this.currentPage,
pageSize: this.pageSize,
data_type: dataType
})
.then(res => {
const data = res.data
if (data.errcode === 0) {
this.tableData = data.records
this.total = data.total
this.isLoaded = false
}
})
.catch(err => {
console.log(err)
})
},
validateForm(formName) {
return new Promise((resolve, reject) => {
this.$refs[formName].validate(valid => {
valid ? resolve() : reject()
})
})
},
clearValidate(formName) {
this.$refs[formName].clearValidate()
},
// toolbar
addReward() {
this.openModal()
this.isNew = true
this.modalForm = {
keysStr: '',
actived: true,
items: [],
comment: ''
}
},
batchDel() {},
batchOpt() {
this.batch.show = !this.batch.show
this.batch.txt = this.batch.show ? '关闭' : '批量操作'
},
refreshData() {
this.getRewards()
},
switchData() {
this.isDev = !this.isDev
console.log('isDev', this.isDev)
this.isDev
? (this.switchText = '获取正式数据')
: (this.switchText = '获取测试数据')
this.currentPage = 1
this.getRewards()
},
// table
editReward(row) {
this.isNew = false
row.keysStr = row.keys.join(' ')
this.modalForm = JSON.parse(JSON.stringify(row))
this.openModal()
},
publishReward(row){},
enableReward(row) {
this.$confirm('是否确认启用该奖励?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
switchRewardsState({
ids: [row._id],
type: true
})
.then(res => {
const data = res.data
if (data.errcode === 0) {
this.$message.success('已成功启用该奖励!')
this.getRewards()
}
})
.catch(err => {
console.log(err)
})
})
.catch(() => {
this.$message.info('已取消启用!')
})
},
disableReward(row) {
this.$confirm('是否确认禁用该奖励?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
switchRewardsState({
ids: [row._id],
type: false
})
.then(res => {
const data = res.data
if (data.errcode === 0) {
this.$message.success('已成功禁用该奖励!')
this.getRewards()
}
})
.catch(err => {
console.log(err)
})
})
.catch(() => {
this.$message.info('已取消禁用!')
})
},
delReward(row) {
this.$confirm('是否确认删除该奖励?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
delRewards({
ids: [row._id]
})
.then(res => {
const data = res.data
if (data.errcode === 0) {
this.$message.success('已成功删除该奖励!')
this.getRewards()
}
})
.catch(err => {
console.log(err)
})
})
.catch(() => {
this.$message.info('已取消删除!')
})
},
batchEnable() {
if (this.multipleSelection.length === 0) {
this.$message.error('无选中奖励!')
return
}
const ids = this.multipleSelection.map(item => {
return item._id
})
this.$confirm(
`是否要启用选中的${this.multipleSelection.length}条奖励`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(() => {
switchRewardsState({
ids: ids,
type: true
})
.then(res => {
const data = res.data
if (data.errcode === 0) {
this.$message.success('已成功启用选中奖励!')
this.getRewards()
}
})
.catch(err => {
console.log(err)
})
})
.catch(() => {
this.$message.info('已取消删除!')
})
},
batchDisable() {
if (this.multipleSelection.length === 0) {
this.$message.error('无选中奖励!')
return
}
const ids = this.multipleSelection.map(item => {
return item._id
})
this.$confirm(
`是否要禁用选中的${this.multipleSelection.length}条奖励`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(() => {
switchRewardsState({
ids: ids,
type: false
})
.then(res => {
const data = res.data
if (data.errcode === 0) {
this.$message.success('已成功禁用选中奖励!')
this.getRewards()
}
})
.catch(err => {
console.log(err)
})
})
.catch(() => {
this.$message.info('已取消删除!')
})
},
batchDel() {
if (this.multipleSelection.length === 0) {
this.$message.error('无选中奖励!')
return
}
const ids = this.multipleSelection.map(item => {
return item._id
})
this.$confirm(
`是否要删除选中的${this.multipleSelection.length}条奖励`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(() => {
delRewards({
ids: ids
})
.then(res => {
const data = res.data
if (data.errcode === 0) {
this.$message.success('已成功删除选中奖励!')
this.getRewards()
}
})
.catch(err => {
console.log(err)
})
})
.catch(() => {
this.$message.info('已取消删除!')
})
},
formKeys(row, column, cellValue, index) {
return cellValue.join('')
},
formItems(row, column, cellValue, index) {
const items = cellValue.map(item => {
return `${item.item_id}×${item.count}`
})
return items.join('')
},
formState(row, column, cellValue, index) {
return cellValue ? '已启用' : '已禁用'
},
formdate(row, column, cellValue, index) {
return cellValue ? moment(cellValue).format('YYYY-MM-DD HH:MM:SS') : '-'
},
formPublished(row, column, cellValue, index) {
return cellValue === true ? '是' : '否'
},
rowClick(row, column, event) {
this.editReward(row)
},
tableSelectionChange(val) {
this.multipleSelection = val
},
// pagination
sizeChange(val) {
this.pageSize = val
this.getRewards()
},
pageChange(val) {
this.currentPage = val
this.getRewards()
},
// modal
openModal() {
this.modalVisible = true
},
closeModal() {
this.clearValidate('modalForm')
this.modalVisible = false
},
addItem() {
this.isNewItem = true
this.openInnerModal()
this.innerModalForm = {
item_id: '',
count: 1
}
},
editItem(index, row) {
this.isNewItem = false
this.innerModalForm = JSON.parse(JSON.stringify(row))
this.curItem = index
this.openInnerModal()
},
delItem(index) {
this.modalForm.items.splice(index, 1)
},
saveReward() {
this.validateForm('modalForm')
.then(() => {
this.modalForm.keys = this.modalForm.keysStr.trim().split(' ')
this.modalForm.game_id = this.gameInfo.game_id
delete this.modalForm.keysStr
saveReward(this.modalForm)
.then(res => {
const data = res.data
if (data.errcode === 0) {
this.$message.success('已成功保存奖励!')
this.closeModal()
this.getRewards()
}
})
.catch(err => {
console.log(err)
})
})
.catch(() => {
this.$message.error('请按要求填写表单!')
})
},
// innerModal
openInnerModal() {
this.innerModalVisible = true
},
closeInnerModal() {
this.clearValidate('innerModalForm')
this.innerModalVisible = false
},
saveItem() {
this.validateForm('innerModalForm')
.then(() => {
if (this.isNewItem) {
this.modalForm.items.push(this.innerModalForm)
} else {
this.modalForm.items.splice(this.curItem, 1, this.innerModalForm)
}
this.$message.success('已成功保存奖励物品!')
this.closeInnerModal()
})
.catch(() => {
this.$message.error('请按要求填写表单!')
})
}
}
}
</script>
<style lang="sass" scoped>
</style>

View File

@ -15,7 +15,7 @@
type="success"
>{{ switchText }}</el-button>
<el-button
v-if="batch.show && ((isDev && permEdit) || (!isDev && permPublish))"
v-if="batch.show && ((isDev && permPublish))"
type="warning"
@click="batchPublish"
>批量发布</el-button>
@ -103,7 +103,9 @@
<el-table-column
label="操作"
fixed="right"
width="170"
>
<template slot-scope="scope">
<el-button
type="text"

File diff suppressed because it is too large Load Diff

View File

@ -70,7 +70,7 @@
type="success"
>{{ switchText }}</el-button>
<el-button
v-if="batch.show && permPublish"
v-if="batch.show && permPublish && isDev"
type="warning"
@click="batchPublish"
>批量发布</el-button>