商品分类管理 - 删除分类功能实现

<p>&quot;<template>\n  <div>\n    &quot;<!-- 搜索栏 -->&quot;\n    &lt;search-bar @search=&quot;onSearch&quot; /&gt;\n    &quot;<!-- /搜索栏 -->&quot;\n    &lt;el-button type=&quot;warning&quot; @click=&quot;cateAddShow = true&quot;&gt;新增商品分类</el-button>\n    &lt;el-table row-key=&quot;id&quot; :tree-props=&quot;{ children: 'children' }&quot; :data=&quot;cates&quot; style=&quot;width: 100%&quot;&gt;\n      &lt;el-table-column prop=&quot;cateName&quot; label=&quot;分类名&quot; /&gt;\n      &lt;el-table-column prop=&quot;cateIcon&quot; label=&quot;分类图标&quot;&gt;\n        &lt;template #default=&quot;{ row }&quot;&gt;\n          &lt;img :src=&quot;row.cateIcon&quot; width=&quot;50&quot; alt=&quot;&quot; /&gt;\n        </template>\n      </el-table-column>\n      &lt;el-table-column prop=&quot;sort&quot; label=&quot;排序&quot;&gt;\n        &lt;template #default=&quot;{ row }&quot;&gt;\n          <el-tag>{{ row.sort }}</el-tag>\n        </template>\n      </el-table-column>\n      &lt;el-table-column prop=&quot;onoff&quot; label=&quot;是否启用&quot;&gt;\n        &lt;template #default=&quot;{ row }&quot;&gt;\n          &lt;el-switch v-model=&quot;row.onoff&quot; :active-value=&quot;1&quot; inline-prompt :inactive-value=&quot;0&quot; active-text=&quot;启用&quot;\n            inactive-text=&quot;弃用&quot; @change=&quot;changeCateOff(row.id, row.onoff)&quot; /&gt;\n        </template>\n      </el-table-column>\n      &lt;el-table-column label=&quot;排序&quot;&gt;\n        &lt;template #default=&quot;{ row }&quot;&gt;\n          &lt;el-button type=&quot;primary&quot; @click=&quot;showUpdateDrawer(row.id)&quot;&gt;编辑</el-button>\n          &lt;el-button type=&quot;danger&quot; @click=&quot;delCate(row.id)&quot;&gt;删除</el-button>\n        </template>\n      </el-table-column>\n    </el-table>\n    &quot;<!-- 新增商品分类弹窗 -->&quot;\n\n    &lt;el-drawer v-model=&quot;cateAddShow&quot; title=&quot;新增商品分类&quot; direction=&quot;rtl&quot;&gt;\n      &lt;cate-add :cates=&quot;cates&quot; /&gt;\n    </el-drawer>\n    &quot;<!-- /新增商品分类弹窗 -->&quot;\n     &quot;<!-- 修改商品分类弹窗 -->&quot;\n\n     &lt;el-drawer v-model=&quot;cateUpdateShow&quot; title=&quot;修改商品分类&quot; direction=&quot;rtl&quot;&gt;\n      &lt;cate-update :cates=&quot;cates&quot; :cateId=&quot;updateCateId&quot; /&gt;\n    </el-drawer>\n    &quot;<!-- /修改商品分类弹窗 -->&quot;\n  </div>\n</template>\n\n<script>\nimport { fetchCateLists, delCate, updateCate } from '@/api/cate'\nimport SearchBar from '@/components/SearchBar.vue'\nimport CateAdd from './components/CateAdd.vue'\nimport CateUpdate from './components/CateUpdate.vue'\nexport default {\n  name: 'CateLists',\n  data () {\n    return {\n      cates: [],\n      searchParams: {\n        keyWords: '',\n        time: []\n      },\n      &quot;// 商品分类弹窗&quot;\n      cateAddShow: false,\n      &quot;// 修改商品分类弹窗&quot;\n      cateUpdateShow: false,\n      updateCateId: -1\n    }\n  },\n  methods: {\n    delCate (id) {\n      &quot;// 删除商品&quot;\n      this.$confirm('此操作会彻底删除该分类,继续吗?', '删除分类').then(() =&gt; {\n        delCate(id).then(res =&gt; {\n          if (res.data.code === 200) {\n            this.$message({\n              type: 'success',\n              message: res.data.msg,\n              duration: 1500,\n              onClose: () =&gt; {\n                this.fetchCateLists()\n              }\n            })\n          } else {\n            this.$message({\n              type: 'error',\n              message: res.data.msg\n            })\n          }\n        })\n      })\n    },\n    showUpdateDrawer (id) {\n      &quot;// 点击编辑显示修改商品分类弹窗&quot;\n      this.cateUpdateShow = true\n      this.updateCateId = id\n    },\n    onSearch (searchParams) {\n      &quot;// 搜索&quot;\n      this.searchParams = searchParams\n      this.fetchCateLists()\n    },\n    &quot;// 分类列表&quot;\n    fetchCateLists () {\n      fetchCateLists({\n        keyWords: this.searchParams.keyWords,\n        start: this.searchParams.time[0],\n        end: this.searchParams.time[1]\n      }).then((res) =&gt; {\n        if (res.data.code === 200) {\n          this.cates = res.data.data\n        }\n      })\n    },\n    changeCateOff (id, onoff) {\n      &quot;// 行内修改 分类显示隐藏状态&quot;\n      updateCate({\n        id,\n        onoff\n      }).then(res =&gt; {\n        if (res.data.code === 200) {\n          this.$message({\n            type: 'success',\n            message: res.data.msg,\n            duration: 1500,\n            onClose: () =&gt; {\n              this.fetchCateLists()\n            }\n          })\n        }\n      })\n    }\n  },\n  created () {\n    this.fetchCateLists()\n  },\n  components: {\n    SearchBar,\n    CateAdd,\n    CateUpdate\n  }\n}\n</script>\n\n&lt;style lang=&quot;scss&quot; scoped&gt;</style>\n</p>