新增分类列表分页功能

src/pages/v2/categories/category.vue

@@ -10,7 +10,7 @@
     </div>
     <div>
       <el-card class="box-card">
-        <el-button size="mini" type="primary" @click="mainCategorydialogFormVisible = true">添加主分类</el-button>
+        <el-button size="mini" type="primary" @click="mainCategoryDialogFormVisible = true">添加主分类</el-button>
       </el-card>
     </div>
     <div>
@@ -59,29 +59,64 @@
             </template>
           </el-table-column>
         </el-table>
+        <div class="block">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[20, 30, 40, 50]"
+            :page-size="limit"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalPage">
+          </el-pagination>
+        </div>
       </el-card>
     </div>
     <div>
-      <el-dialog title="添加主分类" :visible.sync="mainCategorydialogFormVisible">
+      <el-dialog title="添加主分类" :visible.sync="mainCategoryDialogFormVisible">
         <el-form size="mini" :model="mainForm">
-          <el-form-item label="名称" label-width="50px">
+          <el-form-item label="名称" label-width="80px">
             <el-input v-model="mainForm.name" autocomplete="off"></el-input>
           </el-form-item>
-          <el-form-item label="标签" label-width="50px">
+          <el-form-item label="标签" label-width="80px">
             <el-select v-model="mainForm.tag" placeholder="请选标签">
               <el-option label="case" value="case"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="排序码" label-width="50px">
+          <el-form-item label="排序码" label-width="80px">
             <el-input v-model="mainForm.order" autocomplete="off"></el-input>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="mainCategorydialogFormVisible = false">取 消</el-button>
+          <el-button size="mini" @click="mainCategoryDialogFormVisible = false">取 消</el-button>
           <el-button size="mini" type="primary" @click="add">添 加</el-button>
         </div>
       </el-dialog>
     </div>
+    <div>
+      <el-dialog title="添加子分类" :visible.sync="childCategoryDialogFormVisible">
+        <el-form size="mini" :model="childForm">
+          <el-form-item label="主分类名称" label-width="80px">
+            <el-input v-model="parentName" autocomplete="off" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="名称" label-width="80px">
+            <el-input v-model="childForm.name" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="标签" label-width="80px">
+            <el-select v-model="childForm.tag" placeholder="请选标签" disabled>
+              <el-option label="case" value="case"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="排序码" label-width="80px">
+            <el-input v-model="childForm.order" autocomplete="off"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="childCategoryDialogFormVisible = false">取 消</el-button>
+          <el-button size="mini" type="primary" @click="addChild">添 加</el-button>
+        </div>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
@@ -93,23 +128,42 @@ export default {
     return {
       tableData: [],
       opera: '',
-      mainCategorydialogFormVisible: false,
+      currentPage: 1,
+      limit: 20,
+      totalPage: 0,
+      parentName: '',
+      mainCategoryDialogFormVisible: false,
       mainForm: {
         name: '',
         tag: '',
         pid: 0,
         order: 0
+      },
+      childCategoryDialogFormVisible: false,
+      childForm: {
+        name: '',
+        tag: '',
+        pid: 0,
+        order: 0
       }
     }
   },
   mounted() {
-    this.list()
+    this.list({ page: this.currentPage, limit: this.limit })
   },
   methods: {
+    handleSizeChange(val) {
+      this.list({ page: this.currentPage, limit: val })
+    },
+    handleCurrentChange(val) {
+      this.list({ page: val, limit: this.currentPage })
+    },
     list(params = {}) {
       categoryApi.categories(params).then(res => {
         if (res.code === 0) {
           this.tableData = res.data.data
+          this.currentPage = res.data.current_page
+          this.totalPage = res.data.total
         } else {
           this.$message.error(res.message)
           return false
@@ -121,7 +175,20 @@ export default {
     handleDelete(index, row) {
     },
     operation(opera) {
-      console.log(opera)
+      switch (opera.tag) {
+        case 'detail':
+          break
+        case 'edit':
+          break
+        case 'addChild':
+          this.childForm.tag = opera.row.tag
+          this.childForm.pid = opera.row.id
+          this.parentName = opera.row.name
+          this.childCategoryDialogFormVisible = true
+          break
+        case 'delete':
+          break
+      }
     },
     add() {
       categoryApi.addCategory(this.mainForm).then(res => {
@@ -130,9 +197,22 @@ export default {
           return false
         }
         this.$message.success(res.message)
-        this.mainCategorydialogFormVisible = false
+        this.mainCategoryDialogFormVisible = false
         this.list()
       })
+    },
+    addChild() {
+      categoryApi.addCategory(this.childForm).then(res => {
+        if (res.code === -1) {
+          this.$message.error(res.message)
+          return false
+        }
+        this.$message.success(res.message)
+        this.childForm.name = ''
+        this.childForm.order = 0
+        this.childCategoryDialogFormVisible = false
+        this.list({ page: this.currentPage, limit: this.limit })
+      })
     }
   }
 }