In the original video, the teacher skipped this function. I think I can exercise myself by implementing it, so I added the editing function

1. The editing functions of the previous modules are different from those of user management and permission management. Because commodities have many editable options, you can choose to edit them separately in one component like adding commodities vue .
2. However, compared with adding a product, you need to pass the id value of the product.
3. The layout is consistent with the added goods (the layout is omitted below), but you need to send a request to render the data returned from the background to the component

1. Preliminary setting

• Set routing rules
• Pass the item id to edit vue

router/index.js:

 { path: '/goods/edit/:id', component: Edit }

Edit. In Vue:

 data () {
    return {
      // Passed product id
      id: this.$route.params.id
    }
  }

List. In Vue:

 // Click the Edit button to jump to the edit page
    editById (id) {
      this.$router.push('/goods/edit/' + id)
    }

2. Obtain data

1. Query commodity information

async getGoodsInfo () {
      const { data: res } = await this.$http.get('goods/' + this.id)

      if (res.meta.status !== 200) {
        return this.$message.error('Failed to get product information!')
      }
      this.editForm = res.data
      this.$message.success('Successfully obtained product information!')
    }

2. Obtain commodity classification data

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

3. Get commodity parameter list and static attributes

// Function triggered when switching tab
    async tabClicked () {
      // console.log(this.activeIndex)
      if (this.activeIndex === '1') {
        // The dynamic parameters panel is accessed
        const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,
          {
            params: {
              sel: 'many'
            }
          })

        if (res.meta.status !== 200) {
          return this.$message.error('Failed to get dynamic parameter list!')
        }

        console.log(res.data)

        res.data.forEach(item => {
          item.attr_vals =
          item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ')
        })
        this.manyTableData = res.data
      } else if (this.activeIndex === '2') {
        // You are accessing the static properties panel
        const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,
          {
            params: {
              sel: 'only'
            }
          })
        if (res.meta.status !== 200) {
          return this.$message.error('Failed to get static attribute list!')
        }

        console.log(res.data)

        this.onlyTableData = res.data
      }
    }

3. Echo of data and pictures

1. Cascade selector data echo

Add the following code to the function getGoodsInfo():

// Set cascade selector binding value
      const tempList = res.data.goods_cat.split(',') // This step just translates into ['1', '3', '6']
      //Each array member is a character, not a number
      // Here, you must re assign the value to an empty array and then assign the value again, otherwise v-model cannot realize the echo of the default value
      this.editForm.goods_cat = []
      tempList.forEach(item => {
      // item - 0 is to convert the data type into a number to be consistent with the cateList data type, otherwise the default value cannot be echoed correctly
        this.editForm.goods_cat.push(item - 0)
      })

Function realization:

2. Click Edit and the picture will be echoed

Query the document and know that there is a property file list:

Bind:

 <el-tab-pane label="Product picture" name="3">
      <!-- action Indicates the background to which the picture is to be uploaded api address -->
      <el-upload
      :action="uploadURL"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      list-type="picture"
      :headers="headerObj"
      :file-list="uploadedList"
      :on-success="handleSuccess">
      <el-button size="small" type="primary">Click upload</el-button>
      </el-upload>
    </el-tab-pane>

Finally, in the function getGoodsInfo (), loop editform For each item in pics, push the object with name and url attributes to picList under the data node:

// Put the uploaded pictures into the list
this.editForm.pics.forEach(item => {
        const obj =
      {
        name: item.pics_id + '.jpg',
        url: item.pics_sma_url
      }
        this.uploadedList.push(obj)
      })

After consulting the official documents, it is found that only with the name attribute can you click on the picture name, which has a preview effect

4. Click the submit button after editing

There is no need to pass the classification id in the document, but through the requested information "the commodity has no classification set", it is speculated that the classification id of the commodity needs to be passed, and the type is a string including each level of classification and separated by comma "," and "

// Click the modify item button
    edit () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) {
          return this.$message.error('Please fill in the necessary form items!')
        }
        const form = _.cloneDeep(this.editForm)
        form.goods_cat = form.goods_cat.join(',')
      //  console.log(form)

        const { data: res } = await this.$http.put('goods/' + form.goods_id, form)
        if (res.meta.status !== 200) {
          return this.$message.error('Failed to modify commodity!')
        }
        this.$message.success('Product modified successfully!')
        this.$router.push('/goods')
      })
    }

In fact, the editing function is still poor, and the commodity parameters and static attributes have not been completely completed. After a long attempt, I guess there are some imperfections in the background

1. If the query parameter is a space, then I can add a space based on the product id
2. If it is a commodity that already exists in the database, I click the Edit button, and the parameters / attributes of the information obtained through id query are strings separated by commas "," and "

In addition, I'm not proficient in using elementui. At present, I can't fully realize this function. I'll improve it when I have time in the future. The current progress is to successfully modify the basic information, picture and description of the goods.