新增分类

.gitignore

@@ -2,3 +2,4 @@
 node_modules
 client-dist
 .idea
+.package-lock.json

src/api/categories.js

+import httpRequest from '@/utils/axios'
+
+// 分类列表
+export function categories(params) {
+  return httpRequest.get('/api/opera/v2/tranning/categories', { params })
+}
+
+// 添加分类
+export function addCategory(data) {
+  var headers = {
+    'Content-Type': 'application/json'
+  }
+  return httpRequest.post('/api/opera/v2/tranning/category', data, { headers })
+}

src/components/layout/aside.vue

@@ -25,6 +25,11 @@ export default {
   data() {
     return {
       defaultMenus: [
+        {
+          title: '分类管理',
+          icon: 'el-icon-s-management',
+          path: '/tranning/categories'
+        },
         {
           title: '案例背景编辑',
           icon: '',

src/pages/v2/categories/category.vue

+<template>
+  <div>
+    <div>
+      <el-card class="box-card">
+        <el-breadcrumb separator-class="el-icon-arrow-right">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item>分类管理</el-breadcrumb-item>
+        </el-breadcrumb>
+      </el-card>
+    </div>
+    <div>
+      <el-card class="box-card">
+        <el-button size="mini" type="primary" @click="mainCategorydialogFormVisible = true">添加主分类</el-button>
+      </el-card>
+    </div>
+    <div>
+      <el-card class="box-card">
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          size="mini"
+          row-key="id"
+          border
+          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+          <el-table-column
+            label="分类名称">
+            <template slot-scope="scope">
+              <span>{{ scope.row.name }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="分类标签">
+            <template slot-scope="scope">
+              <div slot="reference" class="name-wrapper">
+                <el-tag size="medium">{{ scope.row.tag }}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="order"
+            label="分类排序码"
+            width="90px"
+          >
+          </el-table-column>
+          <el-table-column label="创建时间">
+            <template slot-scope="scope">
+              <i class="el-icon-time"></i>
+              <span style="margin-left: 10px">{{ scope.row.created_at }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-select size="mini" :value="opera" @change="operation" placeholder="请选择">
+                <el-option :value="{ tag: 'detail', row: scope.row }" label="详情"></el-option>
+                <el-option :value="{ tag: 'edit', row: scope.row }" label="编辑"></el-option>
+                <el-option :value="{ tag: 'addChild', row: scope.row }" label="添加子分类"></el-option>
+                <el-option :value="{ tag: 'delete', row: scope.row }" label="删除"></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+    <div>
+      <el-dialog title="添加主分类" :visible.sync="mainCategorydialogFormVisible">
+        <el-form size="mini" :model="mainForm">
+          <el-form-item label="名称" label-width="50px">
+            <el-input v-model="mainForm.name" autocomplete="off"></el-input>
+          </el-form-item>
+          <el-form-item label="标签" label-width="50px">
+            <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-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" type="primary" @click="add">添 加</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as categoryApi from '@/api/categories'
+export default {
+  name: 'category',
+  data() {
+    return {
+      tableData: [],
+      opera: '',
+      mainCategorydialogFormVisible: false,
+      mainForm: {
+        name: '',
+        tag: '',
+        pid: 0,
+        order: 0
+      }
+    }
+  },
+  mounted() {
+    this.list()
+  },
+  methods: {
+    list(params = {}) {
+      categoryApi.categories(params).then(res => {
+        if (res.code === 0) {
+          this.tableData = res.data.data
+        } else {
+          this.$message.error(res.message)
+          return false
+        }
+      })
+    },
+    handleEdit(index, row) {
+    },
+    handleDelete(index, row) {
+    },
+    operation(opera) {
+      console.log(opera)
+    },
+    add() {
+      categoryApi.addCategory(this.mainForm).then(res => {
+        if (res.code === -1) {
+          this.$message.error(res.message)
+          return false
+        }
+        this.$message.success(res.message)
+        this.mainCategorydialogFormVisible = false
+        this.list()
+      })
+    }
+  }
+}
+</script>
+
+<style lang='stylus' rel='stylesheet/stylus'>
+</style>

src/router/routes.js

@@ -13,12 +13,15 @@ const userGroup = [
   { path: '/yhfq/reach', name: 'reach-list', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/reach/index') },
   { path: '/albj', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/albj') },
   { path: '/yhfq/alfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/alfx') },
-  { path: '/yhfq/yhqfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/yhqfx') }
+  { path: '/yhfq/yhqfx', component: () => import(/* webpackChunkName: "usergroup" */ '@/pages/yhfq/yhqfx') },
+  /* 版本2：首页 */
+  { path: '/tranning', redirect: '/tranning/categories' },
+  { path: '/tranning/categories', name: 'category', component: () => import('@/pages/v2/categories/category') }
 ]
 
 export default [
-  { path: '*', redirect: '/yhfq/albj' },
-  { path: '/', redirect: '/yhfq/albj' },
+  { path: '*', redirect: '/tranning/categories' },
+  { path: '/', redirect: '/tranning/categories' },
   {
     path: '/',
     component: Layout,