8. Commodity management - commodity classification

1. Overview of commodity classification

Commodity classification is used when shopping , Quickly find what you want to buy , You can see it intuitively through the homepage of the e-commerce platform .

2. List of commodity categories

• Realize the basic layout
• Realize classification list data loading

 //  Get commodity classification data 
    async getCateList () {
      const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        return this.$message(' Failed to get product classification !')
      }

      console.log(res.data)
      //  Assign the data list to cateList
      this.cateList = res.data.result
      //  Assign a value to the total number of data pieces 
      this.total = res.data.total
    }

3. The tree form

1. Basic use of third-party tree tables

import TreeTable from 'vue-table-with-tree-grid'

Vue.component('tree-table', TreeTable)

2. Implement classification tree list

4. Paging function

1. Achieve paging component effect

 <!--  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>

2. Paging component data processing

//  monitor  pagesize  Changing events 
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getCateList()
    },
    //  monitor  pagenum Changes 
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getCateList()
    }

5. Add categories

1. Implement classification tree list

 <!--  Add classification dialog box  -->
    <el-dialog
  title=" Add categories "
  :visible.sync="addCateDialogVisible"
  width="50%">
  <!--  Add a classified 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   eliminate </el-button>
    <el-button type="primary" @click="addCateDialogVisible = false"> indeed   set </el-button>
  </span>
</el-dialog>

2. Achieve the effect of cascading menus

Achieve cascading menu effect ：

<el-cascader clearable change-on-select expand-trigger="hover" :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChange"></el-cascader>

Cascade menu data loading and filling ：

 //  Get the data list of parent classification 
    async getParentList () {
      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 !')
      }
      // console.log(res.data)
      this.parentCateList = res.data
    }

3. Control the selection of parent classification

When selecting parent classification , Get the corresponding classification id.

//  The function triggered by the change of the selection 
    parentCateChange () {
      //  The array length is greater than 0, Prove that the parent classification is selected 
      //  Otherwise, it means , No parent classification is selected 
      if (this.selectedKeys.length > 0) {
        //  Of parent classification id
        this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
        //  Assign a value to the level of the current classification 
        this.addCateForm.cat_level = this.selectedKeys.length
      } else {
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      }
    }

4. Complete category addition

//  Click button , Add a new category 
    async addCate () {
      // console.log(this.addCateForm)
      this.$refs.addCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('categories', this.addCateForm)
        if (res.meta.status !== 201) {
          return this.$message.error(' Failed to add classification !')
        }
        this.$message.success(' Category added successfully !')
        this.getCateList()
        this.addCateDialogVisible = false
      })

6. Edit classification information

 //  Show the dialog box of editing classification 
    async showEditDialog (id) {
      const { data: res } = await this.$http.get('categories/' + id)
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(' Failed to query classification information !')
      }
      // console.log(res.data)
      this.editCateForm = res.data
      this.EditDialogVisible = true
    },
    //  Listen and modify the closing event of user dialog box 
    editDialogClosed () {
      this.$refs.editCateFormRef.resetFields()
    },
    //  Modify the role information and submit 
    async editCate () {
      this.$refs.editCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put('categories/' + this.editCateForm.cat_pid,
          { cat_name: this.editCateForm.cat_name })
        if (res.meta.status !== 200) {
          return this.$message.error(' Failed to update classification information !')
        }

        //  close dialog boxes 
        this.EditDialogVisible = false
        //  Refresh the data list 
        this.getCateList()
        //  It indicates that the modification is successful 
        this.$message.success(' Update classification information successfully !')
      })
    }

7. Delete category

 //  according to id  Delete the information corresponding to the classification 
    async removeCateById (id) {
      //  The pop-up box asks the user whether to delete data 
      const confirmResult = await this.$confirm(' This action will permanently delete the user ,  Whether or not to continue ?', ' Tips ', {
        confirmButtonText: ' determine ',
        cancelButtonText: ' Cancel ',
        type: 'warning'
      }).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info(' The deletion has been cancelled ')
      }

      //  Initiate a request to delete a user action 
      const { data: res } = await this.$http.delete('categories/' + id)

      if (res.meta.status !== 200) {
        return this.$message.error(' Failed to delete classification !')
      }
      this.$message.success(' Delete classification succeeded !')
      //  Re render the data 
      this.getCateList()
    }