Create the Goods_cate branch

• 1. git checkout -b goods_cat
• 2. git branch
• 3. Git push -u origin Goods_cate git push -u origin goods_cate git push -u origin goods_cate
• 4. The branch can now be viewed in the cloud

Load the commodity classification component through routing

1. Create goods/Cate. Vue under Components

<template>
  <div>
    <h1>Cate components</h1>
  </div>
</template>
<script>
export default {
  data: () = >({})}</script>
<style lang="less" scoped>
</style>

Copy the code

2. Configure routes

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '.. /components/Login.vue'
import Home from '.. /components/Home.vue'
import Welcome from '.. /components/Welcome.vue'
import Users from '.. /components/users/Users.vue'
import Rights from '.. /components/power/Rights.vue'
import Roles from '.. /components/power/Roles.vue'
import Cate from '.. /components/goods/Cate.vue'

Vue.use(VueRouter)

const routes = [
  / / redirection
  {
    path: '/'.redirect: '/login'
  },
  {
    path: '/login'.component: Login
  },
  {
    path: '/home'.component: Home,
    redirect: '/welcome'.children: [{path: '/welcome'.component: Welcome
      },
      {
        path: '/users'.component: Users
      },
      {
        path: '/rights'.component: Rights
      },
      {
        path: '/roles'.component: Roles
      },
      {
        path: '/categories'.component: Cate
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

// to Specifies the path to be accessed
// from indicates the path from which to jump
// Next is a function that permits
// next() permits next('/login') forces a jump
router.beforeEach((to, from, next) = > {
  // If the path to be accessed is login, pass
  if (to.path === '/login') return next()
  / / access token
  const token = window.sessionStorage.getItem('token')
  // If the token does not exist, the login page is forcibly redirected
  if(! token)return next('/login')
  // If the token exists, pass it
  next()
})

export default router

Copy the code

Iii. Draw the basic page layout of commodity classification components

<template>
  <div>
    <! Breadcrumb navigation area -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home page</el-breadcrumb-item>
      <el-breadcrumb-item>Commodity management</el-breadcrumb-item>
      <el-breadcrumb-item>List of goods</el-breadcrumb-item>
    </el-breadcrumb>
    <! -- Card View area -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary">Add the classification</el-button>
        </el-col>
      </el-row>
      <! -- Table region -->
      <! -- Paging area -->
    </el-card>
  </div>
</template>
<script>
export default {
  data: () = >({})}</script>
<style lang="less" scoped>
</style>

Copy the code

4. Call API to obtain commodity classification list data

1. Get the list of data when the page loads (call getCateList from created)

  created() {
    this.getCateList()
  },
Copy the code

2. Define the getCateList function in methods and get the list of data

  methods: {
    async getCateList() {
      const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
      if(res.meta.status ! = =200) {
        return this.$message.error('Failed to get item category list! ')}// Assign the data list to catelist
      this.catelist = res.data.result
      // Assign a value to the total number of data items
      this.total = res.data.total
    }
  }
Copy the code

3. Define the data to be used in data

  data: () = > ({
    // Get the query criteria for the category list
    queryInfo: {
      type: 3.pagenum: 1.pagesize: 5
    },
    // List of commodity categories
    catelist: [].// Total number of data items
    total: 0
  }),
Copy the code

5. Initially use vue-table-with-tree-grid tree table components

1. Install vue-table-with-tree-grid dependencies

2. Configure according to the official document (in main.js)

1. Import components

import treeTable from 'vue-table-with-tree-grid'
Copy the code

2. Register as globally available components

// Register as globally available component
Vue.component('tree-table', treeTable)
Copy the code

3. Use this component in Cate. Vue

<! -- Table region --><tree-table
        show-index
        index-text="#"
        :data="catelist"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        border
        :show-row-hover="false"
      ></tree-table>
Copy the code

In the data:

// Specify the column definition for table
    columns: [{label: 'Category name'.prop: 'cat_name'}]Copy the code

6. Use custom template to render table data (column 2)

<! -- Table region --><tree-table
        show-index
        index-text="#"
        :data="catelist"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        border
        :show-row-hover="false"
      >
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            v-if="scope.row.cat_deleted === false"
            style="color: lightgreen"
          ></i>
          <i class="el-icon-error" v-else style="color: red"></i> </template
      ></tree-table>
Copy the code

// Specify the column definition for table
    columns: [{label: 'Category name'.prop: 'cat_name'
      },
      {
        label: 'Valid or not'.// Defines the current column as a template column
        type: 'template'.template: 'isok'}]Copy the code

7. UI structure for rendering sort and operation

1. The sequence

• Add the template

{
        label: 'order'.// Defines the current column as a template column
        type: 'template'.// Indicates the name of the template used for the current column
        template: 'order'
      }
Copy the code

• 2. Use a template

<! Sort -- -- -- ><template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">Level 1</el-tag>
          <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">The secondary</el-tag>
          <el-tag size="mini" type="warning" v-else>Level 3</el-tag>
        </template>
Copy the code

2. The column operation

{
        label: 'operation'.// Defines the current column as a template column
        type: 'template'.// Indicates the name of the template used for the current column
        template: 'opt'
      }
Copy the code

<! -- -- -- > operation<template slot="opt">
          <el-button size="mini" type="primary" icon="el-icon-edit">The editor</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete">delete</el-button>
        </template>
      </tree-table>
Copy the code

Eight, achieve paging function

<! -- Paging area --><el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3, 5, 10, 15]." "
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
Copy the code

// Listen for pagesize changes
    handleSizeChange(newszie) {
      this.queryInfo.pagesize = newszie
      this.getCateList()
    },
    // Listen for pagenum changes
    handleCurrentChange(newnum) {
      this.queryInfo.pagenum = newnum
      this.getCateList()
    }
Copy the code

Render dialog boxes and forms for adding categories

<! Add category dialog box --><el-dialog
      title="Add category"
      :visible.sync="addcatedialogVisible"
      width="50%"
    >
      <! -- Add category form -->
      <el-form
        :model="addCateForm"
        :rules="addCateFormRules"
        ref="addCateFormRef"
        label-width="100px"
      >
        <el-form-item label="Category name" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="Parent classification">
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addcatedialogVisible = false">Take away</el-button>
        <el-button type="primary" @click="addcatedialogVisible = false"
          >Determine < / el - button ></span>
    </el-dialog>
Copy the code

• The parent category can be null, and null indicates that the category name above is set to level 1

In the data:

// Add category dialog box display hide
    addcatedialogVisible: false.// Add a categorized form data object
    addCateForm: {
      // The name of the classification to be added
      cat_name: ' '.// The id of the parent category
      cat_pid: 0.// Category level. The default category is 1
      cat_level: 0
    },
    // Add a validation rule for the categorized form
    addCateFormRules: {
      cat_name: [{required: true.message: 'Please enter category name'.trigger: 'blur'}}]Copy the code

Get the list of parent classification data

// Click the button to display the dialog box for adding categories
    showAddCateDialog() {
    // Click add category button to trigger getParentCateList function
      this.getParentCateList()
      this.addcatedialogVisible = true
    },
    // Get the list of parent categories
    async getParentCateList() {
      const { data: res } = await this.$http.get('categories', { params: { type: 2}})if(res.meta.status ! = =200) {
        return this.$message.error('Failed to get parent classification data! ')}this.parentCateList = res.data
      console.log(this.parentCateList)
    }
Copy the code

Render cascade selector

/ / clearable empty
// change-on-select You can select the level-1 data name
<el-form-item label="Parent classification"> <! -- options: Specify data source --> <! -- props: used to specify the props --><el-cascader
            expand-trigger="hover"
            v-model="selectedkeys"
            :options="parentCateList"
            :props="cascaderProp"
            @change="parentCateChange"
            clearable
            change-on-select
          ></el-cascader>
        </el-form-item>
Copy the code

data:

// Specify the configuration object for the cascade selector
    cascaderProp: {
      value: 'cat_id'.label: 'cat_name'.// The data displayed in the input box
      children: 'children' // Associate with the data at the next level
    },
    // An array of ids for the selected parent class
    selectedkeys: []
Copy the code

methods:

    // This function is triggered when the selection changes
    parentCateChange() {
      console.log(this.selectedkeys)
    }
Copy the code

12. Process the data in the form according to the changes of the parent classification

1. If the selection changes, the parentCateChange function is triggered. Click OK to trigger the addCate function

<el-button type="primary" @click="addCate"> determine < / el - button >Copy the code

2. Implement the function

// This function is triggered when the selection changes
    parentCateChange() {
      // console.log(this.selectedkeys)
      // If the length in the selectedKeys array is greater than 0, the parent class is selected
      // If not, no parent categories are selected
      if (this.selectedkeys.length > 0) {
        // The id of the parent category
        this.addCateForm.cat_pid = this.selectedkeys[this.selectedkeys.length - 1]
        // Assign a value to the current classification level
        this.addCateForm.cat_level = this.selectedkeys.length
      } else {
        // The id of the parent category
        this.addCateForm.cat_pid = 0
        // Assign a value to the current classification level
        this.addCateForm.cat_level = 0}},// Click OK to add a new category
    addCate() {
      console.log(this.addCateForm)
    }
Copy the code

Reset the form data in the close event of the dialog box

1. Add a close event to the dialog box

<! Add category dialog box --><el-dialog
      title="Add category"
      :visible.sync="addcatedialogVisible"
      width="50%"
      @close="addCateDialogClose"
    >
Copy the code

2. Listen to the close event

// Listen for the closing event of the dialog box to reset the form data
    addCateDialogClose() {
      this.$refs.addCateFormRef.resetFields()
      this.addCateForm.cat_level = 0
      this.addCateForm.cat_pid = 0
      this.selectedkeys = []
    }
Copy the code

Complete the operation of adding categories

// Click OK to add a new category
    addCate() {
      / / check
      this.$refs.addCateFormRef.validate(async valid => {
        if(! valid)return this.$message.error('Prevalidation failed')
        const { data: res } = await this.$http.post('categories'.this.addCateForm)
        if(res.meta.status ! = =201) {
          return this.$message.error('Failed to add category')}this.$message.success('Added category succeeded')
        this.getCateList()
        this.addcatedialogVisible = false})},Copy the code

15. Submit the Goods_cate branch, switch to the master branch, merge the Goods_cate branch, and submit the master branch