add categoty

src/views/flower/badge/index.vue

@@ -1,26 +1,26 @@
 <template>
   <div>
-    <navbar title="成就徽章"/>
+    <navbar title="成就徽章" />
     <a-card>
-      <div >
+      <div>
         <div class="flex flex-center flex-justify-start">
-          <edit :options="categoryList" @ok="fetchList"/>
-          <category @ok="fetchCategory"/>
+          <edit :options="categoryList" @ok="fetchList" />
+          <category @ok="fetchCategory" />
         </div>
         <div class="mt-20">
-          <a-table :data="list" :columns="columns" :pagination="page">
-            <template #name="{record}">
+          <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 class="ml-10">{{ record.name }}</div>
               </div>
             </template>
-            <template #category="{record}">
-              <a-tag color="blue">{{record.category.name}}</a-tag>
+            <template #category="{ record }">
+              <a-tag color="blue">{{ record.category.name }}</a-tag>
             </template>
-            <template #menu="{record}">
+            <template #menu="{ record }">
               <div class="flex flex-center flex-justify-start">
-               <edit  type="edit" :info="record" @ok="fetchList"/>
+                <edit type="edit" :info="record" @ok="fetchList" />
                 <a-popconfirm content="是否确认删除该数据?" @ok="remove(record.id)">
                   <a-button type="text">删除</a-button>
                 </a-popconfirm>
@@ -45,29 +45,29 @@ export default {
   },
   data() {
     return {
-      page:{
-        current:0,
-        pageSize:10,
-        total:0,
+      page: {
+        current: 0,
+        pageSize: 10,
+        total: 0,
       },
-      categoryList:[],
+      categoryList: [],
       list: [],
       columns: [
         {
-          title:'徽章名称',
-          slotName:'name'
+          title: '徽章名称',
+          slotName: 'name'
         },
         {
-          title:'徽章描述',
-          dataIndex:'desc'
+          title: '徽章描述',
+          dataIndex: 'desc'
         },
         {
-          title:'徽章分类',
-          slotName:'category'
+          title: '徽章分类',
+          slotName: 'category'
         },
         {
-          title:'操作',
-          slotName:'menu'
+          title: '操作',
+          slotName: 'menu'
         }
       ]
     }
@@ -78,27 +78,33 @@ export default {
   },
   methods: {
     fetchList() {
-      this.$api.badge.list(this.page).then(res=>{
-        if (res.code === 200){
+      this.$api.badge.list(this.page).then(res => {
+        if (res.code === 200) {
           this.list = res.data.list
+          this.page.total = res.dta.total
         }
       })
     },
-    fetchCategory(){
+    pageChange(page) {
+      console.log(page);
+      this.page.page = page
+      this.fetchList()
+    },
+    fetchCategory() {
       const data = {
-        current:0,
-            pageSize:999,
-            total:0,
+        current: 0,
+        pageSize: 999,
+        total: 0,
       }
-      this.$api.badge.listCategory(data).then(res=>{
-        if (res.code === 200){
+      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){
+    remove(id) {
+      this.$api.badge.delete({ ids: [id] }).then(res => {
+        if (res.code === 200) {
           this.$message.success(res.msg)
           this.fetchList()
         } else {
@@ -110,6 +116,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>