feat:皮肤管理新增产品编辑和删除

base-manager-ui/admin/src/pages/basicset/surface/components/LeftMenu.vue

@@ -13,23 +13,42 @@
         :class="{ active: i === isActive }"
         v-for="(v, i) in productList"
         :key="v.id"
-        @click="changeMenu(i, v)"
+        @click.self="changeMenu(i, v)"
         style="width: 50%; text-align: center"
       >
+        <div class="control" v-permission="[1]">
+          <a-space>
+            <a-icon type="edit" @click="handleEdit(v)" />
+            <a-icon type="delete" @click="handleDel(v.id)" />
+          </a-space>
+        </div>
         {{ v.productName }}
       </a-card-grid>
     </div>
+    <!-- 编辑产品 -->
+    <AddDev
+      ref="AddDev"
+      :visible.sync="visible"
+      :title="title"
+      @addDev="getProductList"
+    ></AddDev>
   </div>
 </template>
 
 <script>
-import { getProductList } from "@/services/surface";
+import { getProductList, deleteProduct } from "@/services/surface";
 import { mapMutations } from "vuex";
+import AddDev from "../modal/AddDev.vue";
 export default {
+  components: {
+    AddDev,
+  },
   data() {
     return {
       productList: [], //产品列表
       isActive: "",
+      visible: false,
+      title: "编辑产品",
     };
   },
   created() {
@@ -62,6 +81,38 @@ export default {
       };
       this.SET_curProduct(obj);
     },
+    // 编辑产品
+    handleEdit(row) {
+      this.title = "编辑产品";
+      this.$refs.AddDev.onEdit(row);
+      this.visible = true;
+    },
+    // 删除产品
+    handleDel(id) {
+      let _this = this;
+      _this.$confirm({
+        title: "系统提示",
+        content: "删除不可恢复，确定要删除吗？",
+        okText: "确定",
+        okType: "danger",
+        cancelText: "取消",
+        centered: true,
+        icon: "exclamation-circle",
+        maskClosable: true,
+        async onOk() {
+          let res = await deleteProduct({ id });
+          let { code, msg } = res.data;
+          if (code === 1) {
+            _this.$message.success(msg);
+            _this.getProductList();
+          }
+        },
+        onCancel() {
+          console.log("Cancel");
+        },
+      });
+      console.log(id);
+    },
   },
   beforeDestroy() {
     this.SET_curProduct({});
@@ -74,6 +125,7 @@ export default {
   height: 100%;
   background-color: #fff;
 }
+
 .search-box {
   padding: 15px 15px 0px;
 }
@@ -85,6 +137,9 @@ export default {
   .active {
     background-color: #1890ff;
     color: #fff;
+    .anticon {
+      color: inherit;
+    }
   }
 }
 /deep/.ant-card-grid {
@@ -93,5 +148,23 @@ export default {
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  position: relative;
+  &:hover {
+    .control {
+      display: block;
+    }
+  }
+}
+.control {
+  position: absolute;
+  right: 10px;
+  top: 0px;
+  display: none;
+  .anticon-edit {
+    color: #03d76f;
+  }
+  .anticon-delete {
+    color: #fa4d4c;
+  }
 }
 </style>
\ No newline at end of file

base-manager-ui/admin/src/pages/basicset/surface/modal/AddDev.vue

@@ -2,7 +2,7 @@
   <div>
     <a-modal
       v-model="Visible"
-      title="新增设备"
+      :title="title"
       @ok="handleOk"
       @cancel="handleClose"
     >
@@ -17,11 +17,7 @@
           <a-input placeholder="请输入设备名称" v-model="form.productName" />
         </a-form-model-item>
         <a-form-model-item label="设备编号" prop="productCode">
-          <a-input
-            type="password"
-            placeholder="请输入设备编号"
-            v-model="form.productCode"
-          />
+          <a-input placeholder="请输入设备编号" v-model="form.productCode" />
         </a-form-model-item>
         <a-form-model-item label="备注" prop="productRemark">
           <a-textarea
@@ -44,6 +40,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    title: {
+      required: true,
+      type: String,
+      default: "新增设备",
+    },
   },
   data() {
     return {
@@ -88,9 +89,18 @@ export default {
     },
     // 关闭对话框
     handleClose() {
-      this.$refs.form.resetFields();
+      this.$refs.form.clearValidate();
       this.Visible = false;
     },
+    // 新增
+    onAdd() {
+      Object.assign(this.form, this.$options.data().form);
+      this.form.id && this.$delete(this.form, "id");
+    },
+    // 编辑
+    onEdit(row) {
+      this.form = { ...row };
+    },
   },
 };
 </script>

base-manager-ui/admin/src/pages/basicset/surface/surface.vue

@@ -3,7 +3,7 @@
     <TabHeader label="皮肤管理">
       <a-space>
         <a-button v-permission="[1]" icon="plus" @click="addDev"
-          >新增设备</a-button
+          >新增产品</a-button
         >
         <a-button
           type="primary"
@@ -48,7 +48,12 @@
       @addSkinSuccess="addSkinSuccess"
     ></AddSurface>
     <!-- 新增设备 -->
-    <AddDev :visible.sync="addDevVisible" @addDev="addDevSuccess"></AddDev>
+    <AddDev
+      ref="AddDev"
+      :visible.sync="addDevVisible"
+      @addDev="addDevSuccess"
+      :title="title"
+    ></AddDev>
   </div>
 </template>
 
@@ -77,6 +82,7 @@ export default {
       visible: false,
       addDevVisible: false,
       classifyList: [], //皮肤分类数据
+      title: "新增产品",
     };
   },
   created() {
@@ -113,8 +119,8 @@ export default {
     },
     // 编辑皮肤
     editSkin(row) {
-      this.isShow = true;
       this.$refs.AddSurface.onEdit(row);
+      this.isShow = true;
     },
     // 新增分类成功刷新数据
     addCategorySuccess() {
@@ -126,6 +132,8 @@ export default {
     },
     // 新增设备
     addDev() {
+      this.title = "新增产品";
+      this.$refs.AddDev.onAdd();
       this.addDevVisible = true;
     },
     // 新增设备成功