119 lines
2.9 KiB
Vue
119 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<navbar title="成就徽章" />
|
|
<a-card>
|
|
<div>
|
|
<div class="flex flex-center flex-justify-start">
|
|
<edit :options="categoryList" @ok="fetchList" />
|
|
<category @ok="fetchCategory" />
|
|
</div>
|
|
<div class="mt-20">
|
|
<a-table :data="list" :columns="columns" :pagination="page" @page-change="pageChange">
|
|
<template #name="{ record }">
|
|
<div class="flex flex-center flex-justify-start">
|
|
<a-image v-if="record.oss" :src="record.oss.url" width="40px"></a-image>
|
|
<div class="ml-10">{{ record.name }}</div>
|
|
</div>
|
|
</template>
|
|
<template #category="{ record }">
|
|
<a-tag color="blue">{{ record.category.name }}</a-tag>
|
|
</template>
|
|
<template #menu="{ record }">
|
|
<div class="flex flex-center flex-justify-start">
|
|
<edit type="edit" :info="record" @ok="fetchList" />
|
|
<a-popconfirm content="是否确认删除该数据?" @ok="remove(record.id)">
|
|
<a-button type="text">删除</a-button>
|
|
</a-popconfirm>
|
|
</div>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/navbar/index.vue'
|
|
import edit from './components/edit.vue'
|
|
import category from "./components/category.vue";
|
|
export default {
|
|
components: {
|
|
navbar,
|
|
edit,
|
|
category
|
|
},
|
|
data() {
|
|
return {
|
|
page: {
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
},
|
|
categoryList: [],
|
|
list: [],
|
|
columns: [
|
|
{
|
|
title: '徽章名称',
|
|
slotName: 'name'
|
|
},
|
|
{
|
|
title: '徽章描述',
|
|
dataIndex: 'desc'
|
|
},
|
|
{
|
|
title: '徽章分类',
|
|
slotName: 'category'
|
|
},
|
|
{
|
|
title: '操作',
|
|
slotName: 'menu'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchList();
|
|
this.fetchCategory()
|
|
},
|
|
methods: {
|
|
fetchList() {
|
|
this.$api.badge.list(this.page).then(res => {
|
|
if (res.code === 200) {
|
|
this.list = res.data.list
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
pageChange(page) {
|
|
console.log(page);
|
|
this.page.current = page
|
|
this.fetchList()
|
|
},
|
|
fetchCategory() {
|
|
const data = {
|
|
current: 0,
|
|
pageSize: 999,
|
|
total: 0,
|
|
}
|
|
this.$api.badge.listCategory(data).then(res => {
|
|
if (res.code === 200) {
|
|
this.categoryList = res.data.list
|
|
}
|
|
})
|
|
},
|
|
remove(id) {
|
|
this.$api.badge.delete({ ids: [id] }).then(res => {
|
|
if (res.code === 200) {
|
|
this.$message.success(res.msg)
|
|
this.fetchList()
|
|
} else {
|
|
this.$message.error(res.msg)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style> |