添加商品分类

src/components/goods/Cate.vue

@@ -3,7 +3,7 @@
  * @Version: 1.0
  * @Autor: zhuyijun
  * @Date: 2021-11-23 20:45:35
- * @LastEditTime: 2021-11-23 23:03:36
+ * @LastEditTime: 2021-11-25 22:49:33
 -->
 <template>
   <div>
@@ -62,10 +62,12 @@
                   slot-scope="scope">
           <el-button type="primary"
                      icon="el-icon-edit"
-                     size="mini">编辑</el-button>
+                     size="mini"
+                     @click="showEditDialog(scope.row)">编辑</el-button>
           <el-button type="danger"
                      icon="el-icon-delete"
-                     size="mini">删除</el-button>
+                     size="mini"
+                     @click="removeCate(scope.$index,scope.row)">删除</el-button>
         </template>
       </tree-table>
       <!-- 分页区 -->
@@ -117,6 +119,44 @@
                    @click="addCate">确 定</el-button>
       </span>
     </el-dialog>
+
+    <el-dialog title="编辑对话框"
+               :visible.sync="editCateDialogVisible"
+               width="50%"
+               @close="editCateDialogClosed">
+      <el-form :model="editCateForm"
+               :rules="editCateFormRules"
+               ref="editCateFormRef"
+               label-width="100px">
+        <el-form-item label="编码">
+          <el-input v-model="editCateForm.cat_id"
+                    type="text"
+                    disabled></el-input>
+        </el-form-item>
+        <el-form-item label="分类名称"
+                      prop="cat_name">
+          <el-input v-model="editCateForm.cat_name"
+                    type="text"></el-input>
+        </el-form-item>
+        <el-form-item label="是否有效">
+          <el-switch v-model="editCateForm.cat_deleted"
+                     active-color="#13ce66"
+                     inactive-color="#ff4949">
+          </el-switch>
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input v-model="editCateForm.cat_level"
+                    type="text"
+                    disabled></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="editCateDialogVisible = false">取 消</el-button>
+        <el-button type="primary"
+                   @click="editCate()">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -188,7 +228,21 @@ export default {
         checkStrictly: true
       },
       //   选中的父级分类地址
-      selectedKey: []
+      selectedKey: [],
+      editCateDialogVisible: false,
+      editCateForm: {
+        cat_id: 0,
+        cat_name: '',
+        cat_pid: 0,
+        cat_level: 0,
+        cat_deleted: false
+      },
+      editCateFormRules: {
+        cat_name: [
+          { required: true, message: '请输入分类名称', trigger: 'blur' },
+          { min: 2, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+        ]
+      },
     }
   },
   created () {
@@ -270,6 +324,51 @@ export default {
       this.addCateForm.cat_name = ''
       this.addCateForm.cat_level = 0
       this.addCateForm.cat_pid = 0
+    },
+    editCateDialogClosed () {
+      this.$refs.editCateFormRef.resetFields()
+      this.editCateForm = {
+        cat_id: '',
+        cat_name: '',
+        cat_pid: 0,
+        cat_level: 0,
+        cat_deleted: false
+      }
+    },
+    showEditDialog (catInfo) {
+      this.editCateForm = catInfo
+      this.editCateDialogVisible = true
+    },
+    editCate () {
+      this.$refs.editCateFormRef.validate(async (vaild) => {
+        console.log(vaild)
+        if (!vaild) return
+        const { data: res } = await this.$http.put(`categories/${this.editCateForm.cat_id}`, {
+          cat_name: this.editCateForm.cat_name
+        })
+        if (res.meta.status !== 200) {
+          return this.$message.error(res.meta.msg)
+        }
+        this.$message.success(res.meta.msg)
+        this.editCateDialogVisible = false
+      })
+    },
+    async removeCate (index, cateInfo) {
+      const confirmResule = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).catch(err => err)
+      if (confirmResule !== 'confirm') {
+        return this.$message.info('取消删除')
+      }
+      const { data: res } = await this.$http.delete(`categories/${cateInfo.cat_id}`)
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      //   this.cateList.splice(index, 1)
+      this.getCateList()
+      this.$message.success(res.meta.msg)
     }
   }
 }