接口对接完成，细节处还未修改

src/components/by-table/index.js

@@ -56,7 +56,7 @@ export default {
             return <el-table-column
                 label={actions.label || '操作'}
                 width={actions.width || 200}
-                align="right"
+                align={actions.align || 'right'}
                 {...{
                     scopedSlots: {
                         default: row => {
@@ -153,6 +153,7 @@ export default {
                                     () => {
                                         v.req[item.prop] = i.value
                                         item.label = i.label
+
                                     }
                                 }>{i.label}</li>
                         })
@@ -175,7 +176,7 @@ export default {
                 </div>
                 <div style='display: flex;'>
                     <el-input
-                        placeholder="请选择日期"
+                        placeholder="请输入关键字"
                         suffix-icon="el-icon-search"
                         size="mini"
                         value={this.req.keyword} onInput={$event => this.req.keyword = $event}>

src/components/by-table/index.vue

@@ -1,72 +1,69 @@
 <template>
-	<el-table :data="data" v-bind="attrs">
-		<el-table-column
-			v-for="(item, index) in columnOptions"
-			:key="index"
-			:label="item.label"
-			:prop="item.prop"
-		>
-			<template slot-scope="scope">
-				<slot
-					:name="item.slotName ? item.slotName : ''"
-					:row="scope.row"
-				>
-					{{ scope.row[item.prop] }}
-				</slot>
-			</template>
-		</el-table-column>
-		<el-table-column label="操作">
-			<template slot-scope="scope">
-				<slot name="operation" :row="scope.row">
-					<el-button
-						icon="el-icon-search"
-						@click="search(scope.row)"
-					></el-button>
-					<el-button
-						type="primary"
-						icon="el-icon-edit"
-						@click="edit(scope.row)"
-					></el-button>
-					<el-button
-						type="danger"
-						icon="el-icon-delete"
-						@click="deleteButton(scope.row)"
-					></el-button>
-				</slot>
-			</template>
-		</el-table-column>
-	</el-table>
+  <el-table :data="data" v-bind="attrs">
+    <el-table-column
+      v-for="(item, index) in columnOptions"
+      :key="index"
+      :label="item.label"
+      :prop="item.prop"
+    >
+      <template slot-scope="scope">
+        <slot :name="item.slotName ? item.slotName : ''" :row="scope.row">
+          {{ scope.row[item.prop] }}
+        </slot>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作">
+      <template slot-scope="scope">
+        <slot name="operation" :row="scope.row">
+          <el-button
+            icon="el-icon-search"
+            @click="search(scope.row)"
+          ></el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            @click="edit(scope.row)"
+          ></el-button>
+          <el-button
+            type="danger"
+            icon="el-icon-delete"
+            @click="deleteButton(scope.row)"
+          ></el-button>
+        </slot>
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
    
   <script>
 export default {
-	props: {
-		// 数据
-		data: {
-			type: Array,
-			require: true,
-		},
-		// 列的属性数组
-		columnOptions: {
-			type: Array,
-			require: true,
-		},
-		// element table 的属性
-		attrs: Object,
-	},
-	methods: {
-		// 删除按钮
-		deleteButton(row) {
-			this.$emit('deleteBtn', row)
-		},
-		search(row) {
-			this.$emit('searchBtn', row)
-		},
-		edit(row) {
-			this.$emit('editBtn', row)
-		},
-	},
-}
+  props: {
+    // 数据
+    data: {
+      type: Array,
+      require: true,
+    },
+    // 列的属性数组
+    columnOptions: {
+      type: Array,
+      require: true,
+    },
+    // element table 的属性
+    attrs: Object,
+  },
+  methods: {
+    // 删除按钮
+    deleteButton(row) {
+      this.$emit("deleteBtn", row);
+    },
+    search(row) {
+      this.$emit("searchBtn", row);
+    },
+    edit(row) {
+      this.$emit("editBtn", row);
+    },
+  },
+};
 </script>
    
   <style>

src/lang/zh.js

@@ -221,11 +221,14 @@ export default {
       productName: '产品名称',
       productUnit: "单位",
       productDescription: "产品说明",
+      description: "说明",
       productClassifyRules: "请选择产品分类",
       productTypeRules: '请选择产品类型',
       productCodeRules: "请输入产品编码",
       productNameRules: '请输入产品名称',
       productUnitRules: "请选择单位",
+      finishedProduct: "成品",
+      partiallyPreparedProducts: "半成品"
     },
     material: {
       treeModalAdd: '添加分类',
@@ -240,11 +243,18 @@ export default {
       materialName: '物料名称',
       materialUnit: "单位",
       materialDescription: "物料说明",
+      description: "说明",
       materialClassifyRules: "请选择物料分类",
       materialTypeRules: '请选择物料类型',
       materialCodeRules: "请输入物料编码",
       materialNameRules: '请输入物料名称',
       materialUnitRules: "请选择单位",
+      rawMaterial: "原料",
+      subsidiaryMaterial: '辅料',
+      parts: '配件',
+      packagingMaterials: '包材',
+      other: '其他',
+
     },
   },
 }

src/views/product-material/material/index.vue

@@ -6,7 +6,7 @@
       </el-col>
       <el-col :span="18" class="right">
         <el-card class="top">
-          <el-button type="primary" size="small" @click="productAdd">{{
+          <el-button type="primary" size="small" @click="materialAdd">{{
             $t("product_material.material.materialAdd")
           }}</el-button>
         </el-card>
@@ -39,8 +39,8 @@
               :insideRules="dialogRules"
             ></test>
           </el-dialog>
-          <el-dialog title="预览" :visible.sync="viewModal" width="500px">
-          </el-dialog>
+          <!-- <el-dialog title="预览" :visible.sync="viewModal" width="500px">
+          </el-dialog> -->
         </el-card>
       </el-col>
     </el-row>
@@ -88,24 +88,57 @@ export default {
       ],
       columns: [
         {
-          label: "物料类型",
-          prop: "title",
+          label: this.$t("product_material.material.materialType"),
+          prop: "type",
+          render: (h, params) => {
+            const item = this.dialogForm.type.data.find(
+              (item) => item.keyName === params.type
+            );
+            return <div>{item.labelName}</div>;
+          },
         },
         {
-          label: "物料编码",
-          prop: "title",
+          label: this.$t("product_material.material.materialCode"),
+          prop: "code",
         },
         {
-          label: "物料名称",
-          prop: "title",
+          label: this.$t("product_material.material.materialName"),
+          prop: "name",
         },
         {
-          label: "单位",
-          prop: "title",
+          label: this.$t("product_material.material.materialUnit"),
+          prop: "unit",
         },
         {
-          label: "说明",
-          prop: "title",
+          label: this.$t("product_material.material.description"),
+          prop: "introduce",
+        },
+        {
+          label: this.$t("operation"),
+          align: "center",
+          actions: [
+            {
+              text: this.$t("edit"),
+              type: "text",
+              style: {
+                color: "red",
+              },
+              fn: ({ row }) => {
+                this.handleEdit(row);
+              },
+            },
+            {
+              text: this.$t("delete"),
+              type: "text",
+              // disabled: true,
+              style: {
+                color: "red",
+              },
+              fn: ({ row }) => {
+                this.handleDelete(row);
+              },
+            },
+          ],
         },
       ],
       dialogParams: {
@@ -122,7 +155,7 @@ export default {
           label: this.$t("product_material.material.materialClassify"),
           type: "cascader",
           props: {
-            label: "name",
+            label: "label",
             value: "id",
           },
           width: "100%",
@@ -135,11 +168,30 @@ export default {
           labelName: "labelName",
           keyName: "keyName",
           data: [
-            { labelName: "原料", keyName: 1 },
-            { labelName: "辅料", keyName: 2 },
-            { labelName: "配件", keyName: 3 },
-            { labelName: "包材", keyName: 4 },
-            { labelName: "其他", keyName: 5 },
+            {
+              labelName: this.$t("product_material.material.rawMaterial"),
+              keyName: 1,
+            },
+            {
+              labelName: this.$t(
+                "product_material.material.subsidiaryMaterial"
+              ),
+              keyName: 2,
+            },
+            {
+              labelName: this.$t("product_material.material.parts"),
+              keyName: 3,
+            },
+            {
+              labelName: this.$t(
+                "product_material.material.packagingMaterials"
+              ),
+              keyName: 4,
+            },
+            {
+              labelName: this.$t("product_material.material.other"),
+              keyName: 5,
+            },
           ],
         },
         code: {
@@ -151,17 +203,17 @@ export default {
           label: this.$t("product_material.material.materialName"),
           type: "input",
         },
-        unit: {
-          label: this.$t("product_material.material.materialUnit"),
-          type: "select",
-          span: 3,
-          labelName: "labelName",
-          keyName: "keyName",
-          data: [
-            { labelName: "半成品", keyName: 0 },
-            { labelName: "成品", keyName: 1 },
-          ],
-        },
+        // unit: {
+        //   label: this.$t("product_material.material.materialUnit"),
+        //   type: "select",
+        //   span: 3,
+        //   labelName: "labelName",
+        //   keyName: "keyName",
+        //   data: [
+        //     { labelName: "半成品", keyName: 0 },
+        //     { labelName: "成品", keyName: 1 },
+        //   ],
+        // },
         introduce: {
           label: this.$t("product_material.material.materialDescription"),
           type: "input",
@@ -252,18 +304,31 @@ export default {
     };
   },
   created() {
-    // this.getList();
+    API.materialTree({
+      type: "2",
+      name: "",
+    }).then(
+      (res) => {
+        this.dialogForm.classifyId.data = res.data.data;
+        this.loading = false;
+      },
+      (err) => {
+        console.log("materialTree: " + err);
+        this.loading = false;
+      }
+    );
+    this.getList();
   },
   methods: {
     getList() {
       this.loading = true;
       API.materialList(this.req).then(
         (res) => {
-          this.tableList = res.data.data.list;
+          this.tableList = res.data.data;
           this.loading = false;
         },
         (err) => {
-          console.log("productList: " + err);
+          console.log("materialList: " + err);
           this.loading = false;
         }
       );
@@ -272,20 +337,76 @@ export default {
           this.total = res.data.data.count;
         },
         (err) => {
-          console.log("productCount: " + err);
+          console.log("materialCount: " + err);
         }
       );
     },
-    productAdd() {
+    materialAdd() {
       this.titleText = "add";
       this.open = true;
     },
+    handleEdit(row) {
+      this.titleText = "edit";
+      this.dialogParams = row;
+      this.open = true;
+    },
+    handleDelete(row) {
+      this.$confirm(this.$t("askDeleteData"), {
+        confirmButtonText: this.$t("submitText"),
+        cancelButtonText: this.$t("cancelText"),
+        type: "warning",
+      })
+        .then(() => {
+          API.materialDel({ id: row.id, type: "1" }).then(() => {
+            this.msgSuccess(this.$t("deleteSuccess"));
+            this.getList();
+          });
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
     reload(row) {
-      console.log(row);
       this.req.pageNum = 1;
       this.req.classifyId = row.id;
       this.getList();
     },
+    handleSubmit() {
+      this.$refs.form.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.dialogForm.loadingStatus = true;
+          if (!this.dialogParams.id) {
+            API.materialAdd(this.dialogParams).then(
+              () => {
+                this.msgSuccess(this.$t("addSuccess"));
+                this.$refs.form.reset();
+                this.open = false;
+                this.dialogForm.loadingStatus = false;
+                this.getList();
+              },
+              (err) => {
+                console.log("materialAdd: " + err);
+                this.dialogForm.loadingStatus = false;
+              }
+            );
+          } else {
+            API.materialEdit(this.dialogParams).then(
+              () => {
+                this.msgSuccess(this.$t("editSuccess"));
+                this.$refs.form.reset();
+                this.open = false;
+                this.dialogForm.loadingStatus = false;
+                this.getList();
+              },
+              (err) => {
+                console.log("materialEdit: " + err);
+                this.dialogForm.loadingStatus = false;
+              }
+            );
+          }
+        }
+      });
+    },
   },
 };
 </script>

src/views/product-material/material/tree.vue

@@ -9,16 +9,21 @@
       </el-input>
     </div>
     <el-tree
+      ref="tree"
       :data="treeData"
       :props="defaultProps"
       default-expand-all
       @node-click="handleNodeClick"
       :filter-node-method="filterNode"
     >
-      <span class="custom-tree-node" slot-scope="{ node, data }">
+      <span
+        class="custom-tree-node"
+        slot-scope="{ node, data }"
+        @mouseenter="handleMouseenter(data)"
+      >
         <span>{{ node.label }}</span>
-        <span>
-          <i class="el-icon-edit" @click="() => edit(data)"></i>
+        <span v-show="data.id === currentNode.id">
+          <i class="el-icon-edit" @click="() => edit(node, data)"></i>
           <i
             class="el-icon-circle-plus-outline"
             style="margin-left: 10px"
@@ -29,20 +34,14 @@
             style="margin-left: 10px"
             @click="() => del(data)"
           ></i>
-          <!-- <el-button type="text" size="mini" @click="() => add(data)">
-            {{ $t("add") }}
-          </el-button>
-          <el-button type="text" size="mini" @click="() => treeDelete(data)">
-            {{ $t("delete") }}
-          </el-button> -->
         </span>
       </span>
     </el-tree>
     <el-dialog
       :title="
-        treeModalType == 'add'
-          ? $t('material_material.material.treeModalAdd')
-          : $t('material_material.material.treeModalEdit')
+        treeModalType === 'add'
+          ? $t('product_material.material.treeModalAdd')
+          : $t('product_material.material.treeModalEdit')
       "
       v-if="treeModal"
       :visible.sync="treeModal"
@@ -77,10 +76,11 @@ export default {
         parentId: null,
         name: null,
       },
+      currentNode: {},
       treeForm: {
         loadingStatus: false,
         name: {
-          label: this.$t("material_material.material.treeName"),
+          label: this.$t("product_material.material.treeName"),
           type: "input",
         },
         otherButton: {
@@ -108,7 +108,7 @@ export default {
         name: [
           {
             required: true,
-            message: this.$t("material_material.material.nameRules"),
+            message: this.$t("product_material.material.nameRules"),
             trigger: "blur",
           },
         ],
@@ -127,9 +127,12 @@ export default {
     },
   },
   created() {
-    // this.getTree();
+    this.getTree();
   },
   methods: {
+    handleMouseenter(data) {
+      this.currentNode = data;
+    },
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
@@ -139,18 +142,33 @@ export default {
       this.$refs.form.$refs["form"].validate((valid) => {
         if (valid) {
           this.treeForm.loadingStatus = true;
-          API.materialClassifyAdd(this.treeParams).then(
-            () => {
-              this.msgSuccess(this.$t("addSuccess"));
-              this.treeModal = false;
-              this.treeForm.loadingStatus = false;
-              this.getTree();
-            },
-            (err) => {
-              console.log("tdaDeviceAdd: " + err);
-              this.treeForm.loadingStatus = false;
-            }
-          );
+          if (!this.treeParams.id) {
+            API.materialClassifyAdd(this.treeParams).then(
+              () => {
+                this.msgSuccess(this.$t("addSuccess"));
+                this.treeModal = false;
+                this.treeForm.loadingStatus = false;
+                this.getTree();
+              },
+              (err) => {
+                console.log("materialClassifyAdd: " + err);
+                this.treeForm.loadingStatus = false;
+              }
+            );
+          } else {
+            API.materialClassifyEdit(this.treeParams).then(
+              () => {
+                this.msgSuccess(this.$t("editSuccess"));
+                this.treeModal = false;
+                this.treeForm.loadingStatus = false;
+                this.getTree();
+              },
+              (err) => {
+                console.log("materialClassifyEdit: " + err);
+                this.treeForm.loadingStatus = false;
+              }
+            );
+          }
         }
       });
     },
@@ -161,56 +179,50 @@ export default {
       this.loading = true;
       API.materialTree(this.treeQuery).then(
         (res) => {
-          console.log(res, "ss");
           this.treeData = res.data.data;
           this.loading = false;
         },
         (err) => {
-          console.log("tdaDevicePage: " + err);
+          console.log("materialTree: " + err);
           this.loading = false;
         }
       );
     },
     add(row) {
-      console.log(this.$refs.form);
       this.treeParams = {
         type: "2",
-        parentId: null,
-        name: null,
+        parentId: "",
+        name: "",
       };
       this.treeParams.parentId = row.id;
       this.treeModal = true;
     },
-    edit(row) {
-      console.log(row, "edit");
-      // materialClassifyEdit
+    edit(node, row) {
+      this.treeModalType = "edit";
+      this.treeParams = {
+        type: "2",
+        parentId: node.parent.data.id,
+        name: row.label,
+        id: row.id,
+      };
+      this.treeModal = true;
     },
     del(row) {
-      console.log(row, "del");
       this.$confirm(this.$t("askDeleteData"), {
         confirmButtonText: this.$t("submitText"),
         cancelButtonText: this.$t("cancelText"),
         type: "warning",
-      }).then(() => {
-        API.materialClassifyDel({ id: row.id }).then(() => {
-          this.msgSuccess(this.$t("deleteSuccess"));
-          this.getTree();
+      })
+        .then(() => {
+          API.materialClassifyDel({ id: row.id, type: "2" }).then(() => {
+            this.msgSuccess(this.$t("deleteSuccess"));
+            this.getTree();
+          });
+        })
+        .catch((err) => {
+          console.log(err);
         });
-      });
     },
-    // treeDelete(row) {
-    //   console.log(row);
-    //   this.$confirm(this.$t("askDeleteData"), {
-    //     confirmButtonText: this.$t("submitText"),
-    //     cancelButtonText: this.$t("cancelText"),
-    //     type: "warning",
-    //   }).then(() => {
-    //     API.videoClassifyDetele({ id: row.id }).then(() => {
-    //       this.msgSuccess(this.$t("deleteSuccess"));
-    //       this.getTree();
-    //     });
-    //   });
-    // },
   },
 };
 </script>

src/views/product-material/product/index.vue

@@ -39,8 +39,8 @@
               :insideRules="dialogRules"
             ></test>
           </el-dialog>
-          <el-dialog title="预览" :visible.sync="viewModal" width="500px">
-          </el-dialog>
+          <!-- <el-dialog title="预览" :visible.sync="viewModal" width="500px">
+          </el-dialog> -->
         </el-card>
       </el-col>
     </el-row>
@@ -85,28 +85,57 @@ export default {
       ],
       columns: [
         {
-          label: "产品类型",
-          prop: "title",
+          label: this.$t("product_material.product.productType"),
+          prop: "type",
+          render: (h, params) => {
+            const item = this.dialogForm.type.data.find(
+              (item) => item.keyName === params.type
+            );
+            return <div>{item.labelName}</div>;
+          },
         },
         {
-          label: "产品编码",
-          prop: "title",
-          textType: "blue",
+          label: this.$t("product_material.product.productCode"),
+          prop: "code",
         },
         {
-          label: "产品名称",
-          prop: "title",
-          textType: "blueOrLine",
+          label: this.$t("product_material.product.productName"),
+          prop: "name",
         },
         {
-          label: "单位",
-          prop: "title",
-          textType: "blueOrLine",
+          label: this.$t("product_material.product.productUnit"),
+          prop: "unit",
+        },
+        {
+          label: this.$t("product_material.product.description"),
+          prop: "introduce",
         },
         {
-          label: "说明",
-          prop: "title",
-          textType: "blueOrLine",
+          align: "center",
+          label: this.$t("operation"),
+          actions: [
+            {
+              text: this.$t("edit"),
+              type: "text",
+              style: {
+                color: "red",
+              },
+              fn: ({ row }) => {
+                this.handleEdit(row);
+              },
+            },
+            {
+              text: this.$t("delete"),
+              type: "text",
+              // disabled: true,
+              style: {
+                color: "red",
+              },
+              fn: ({ row }) => {
+                this.handleDelete(row);
+              },
+            },
+          ],
         },
       ],
       dialogParams: {
@@ -123,7 +152,7 @@ export default {
           label: this.$t("product_material.product.productClassify"),
           type: "cascader",
           props: {
-            label: "name",
+            label: "label",
             value: "id",
           },
           width: "100%",
@@ -136,8 +165,16 @@ export default {
           labelName: "labelName",
           keyName: "keyName",
           data: [
-            { labelName: "半成品", keyName: 0 },
-            { labelName: "成品", keyName: 1 },
+            {
+              labelName: this.$t("product_material.product.finishedProduct"),
+              keyName: 0,
+            },
+            {
+              labelName: this.$t(
+                "product_material.product.partiallyPreparedProducts"
+              ),
+              keyName: 1,
+            },
           ],
         },
         code: {
@@ -149,17 +186,25 @@ export default {
           label: this.$t("product_material.product.productName"),
           type: "input",
         },
-        unit: {
-          label: this.$t("product_material.product.productUnit"),
-          type: "select",
-          span: 3,
-          labelName: "labelName",
-          keyName: "keyName",
-          data: [
-            { labelName: "半成品", keyName: 0 },
-            { labelName: "成品", keyName: 1 },
-          ],
-        },
+        // unit: {
+        //   label: this.$t("product_material.product.productUnit"),
+        //   type: "select",
+        //   span: 3,
+        //   labelName: "labelName",
+        //   keyName: "keyName",
+        //   data: [
+        //     {
+        //       labelName: this.$t("product_material.product.finishedProduct"),
+        //       keyName: 0,
+        //     },
+        //     {
+        //       labelName: this.$t(
+        //         "product_material.product.partiallyPreparedProducts"
+        //       ),
+        //       keyName: 1,
+        //     },
+        //   ],
+        // },
         introduce: {
           label: this.$t("product_material.product.productDescription"),
           type: "input",
@@ -203,7 +248,6 @@ export default {
               methodsText: "submit",
               type: "primary",
               submit: () => {
-                console.log(this.dialogParams);
                 this.handleSubmit();
               },
             },
@@ -250,14 +294,27 @@ export default {
     };
   },
   created() {
-    // this.getList();
+    API.productTree({
+      type: "1",
+      name: "",
+    }).then(
+      (res) => {
+        this.dialogForm.classifyId.data = res.data.data;
+        this.loading = false;
+      },
+      (err) => {
+        console.log("productTree: " + err);
+        this.loading = false;
+      }
+    );
+    this.getList();
   },
   methods: {
     getList() {
       this.loading = true;
       API.productList(this.req).then(
         (res) => {
-          this.tableList = res.data.data.list;
+          this.tableList = res.data.data;
           this.loading = false;
         },
         (err) => {
@@ -278,12 +335,68 @@ export default {
       this.titleText = "add";
       this.open = true;
     },
+    handleEdit(row) {
+      this.titleText = "edit";
+      this.dialogParams = row;
+      this.open = true;
+    },
+    handleDelete(row) {
+      this.$confirm(this.$t("askDeleteData"), {
+        confirmButtonText: this.$t("submitText"),
+        cancelButtonText: this.$t("cancelText"),
+        type: "warning",
+      })
+        .then(() => {
+          API.productDel({ id: row.id, type: "1" }).then(() => {
+            this.msgSuccess(this.$t("deleteSuccess"));
+            this.getList();
+          });
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
     reload(row) {
-      console.log(row);
       this.req.pageNum = 1;
       this.req.classifyId = row.id;
       this.getList();
     },
+    handleSubmit() {
+      this.$refs.form.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.dialogForm.loadingStatus = true;
+          if (!this.dialogParams.id) {
+            API.productAdd(this.dialogParams).then(
+              () => {
+                this.msgSuccess(this.$t("addSuccess"));
+                this.$refs.form.reset();
+                this.open = false;
+                this.dialogForm.loadingStatus = false;
+                this.getList();
+              },
+              (err) => {
+                console.log("productAdd: " + err);
+                this.dialogForm.loadingStatus = false;
+              }
+            );
+          } else {
+            API.productEdit(this.dialogParams).then(
+              () => {
+                this.msgSuccess(this.$t("editSuccess"));
+                this.$refs.form.reset();
+                this.open = false;
+                this.dialogForm.loadingStatus = false;
+                this.getList();
+              },
+              (err) => {
+                console.log("productEdit: " + err);
+                this.dialogForm.loadingStatus = false;
+              }
+            );
+          }
+        }
+      });
+    },
   },
 };
 </script>

src/views/product-material/product/tree.vue

@@ -9,16 +9,21 @@
       </el-input>
     </div>
     <el-tree
+      ref="tree"
       :data="treeData"
       :props="defaultProps"
       default-expand-all
       @node-click="handleNodeClick"
       :filter-node-method="filterNode"
     >
-      <span class="custom-tree-node" slot-scope="{ node, data }">
+      <span
+        class="custom-tree-node"
+        slot-scope="{ node, data }"
+        @mouseenter="handleMouseenter(data)"
+      >
         <span>{{ node.label }}</span>
-        <span>
-          <i class="el-icon-edit" @click="() => edit(data)"></i>
+        <span v-show="data.id === currentNode.id">
+          <i class="el-icon-edit" @click="() => edit(node, data)"></i>
           <i
             class="el-icon-circle-plus-outline"
             style="margin-left: 10px"
@@ -29,12 +34,6 @@
             style="margin-left: 10px"
             @click="() => del(data)"
           ></i>
-          <!-- <el-button type="text" size="mini" @click="() => add(data)">
-            {{ $t("add") }}
-          </el-button>
-          <el-button type="text" size="mini" @click="() => treeDelete(data)">
-            {{ $t("delete") }}
-          </el-button> -->
         </span>
       </span>
     </el-tree>
@@ -73,10 +72,12 @@ export default {
       },
       treeData: [],
       treeParams: {
+        id: null,
         type: null,
         parentId: null,
         name: null,
       },
+      currentNode: {},
       treeForm: {
         loadingStatus: false,
         name: {
@@ -127,9 +128,12 @@ export default {
     },
   },
   created() {
-    // this.getTree();
+    this.getTree();
   },
   methods: {
+    handleMouseenter(data) {
+      this.currentNode = data;
+    },
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
@@ -139,18 +143,33 @@ export default {
       this.$refs.form.$refs["form"].validate((valid) => {
         if (valid) {
           this.treeForm.loadingStatus = true;
-          API.productClassifyAdd(this.treeParams).then(
-            () => {
-              this.msgSuccess(this.$t("addSuccess"));
-              this.treeModal = false;
-              this.treeForm.loadingStatus = false;
-              this.getTree();
-            },
-            (err) => {
-              console.log("tdaDeviceAdd: " + err);
-              this.treeForm.loadingStatus = false;
-            }
-          );
+          if (!this.treeParams.id) {
+            API.productClassifyAdd(this.treeParams).then(
+              () => {
+                this.msgSuccess(this.$t("addSuccess"));
+                this.treeModal = false;
+                this.treeForm.loadingStatus = false;
+                this.getTree();
+              },
+              (err) => {
+                console.log("productClassifyAdd: " + err);
+                this.treeForm.loadingStatus = false;
+              }
+            );
+          } else {
+            API.productClassifyEdit(this.treeParams).then(
+              () => {
+                this.msgSuccess(this.$t("editSuccess"));
+                this.treeModal = false;
+                this.treeForm.loadingStatus = false;
+                this.getTree();
+              },
+              (err) => {
+                console.log("productClassifyEdit: " + err);
+                this.treeForm.loadingStatus = false;
+              }
+            );
+          }
         }
       });
     },
@@ -161,56 +180,50 @@ export default {
       this.loading = true;
       API.productTree(this.treeQuery).then(
         (res) => {
-          console.log(res, "ss");
           this.treeData = res.data.data;
           this.loading = false;
         },
         (err) => {
-          console.log("tdaDevicePage: " + err);
+          console.log("productTree: " + err);
           this.loading = false;
         }
       );
     },
     add(row) {
-      console.log(this.$refs.form);
       this.treeParams = {
         type: "1",
-        parentId: null,
-        name: null,
+        parentId: "",
+        name: "",
       };
       this.treeParams.parentId = row.id;
       this.treeModal = true;
     },
-    edit(row) {
-      console.log(row, "edit");
-      // productClassifyEdit
+    edit(node, row) {
+      this.treeModalType = "edit";
+      this.treeParams = {
+        type: "1",
+        parentId: node.parent.data.id,
+        name: row.label,
+        id: row.id,
+      };
+      this.treeModal = true;
     },
     del(row) {
-      console.log(row, "del");
       this.$confirm(this.$t("askDeleteData"), {
         confirmButtonText: this.$t("submitText"),
         cancelButtonText: this.$t("cancelText"),
         type: "warning",
-      }).then(() => {
-        API.productClassifyDel({ id: row.id }).then(() => {
-          this.msgSuccess(this.$t("deleteSuccess"));
-          this.getTree();
+      })
+        .then(() => {
+          API.productClassifyDel({ id: row.id, type: "1" }).then(() => {
+            this.msgSuccess(this.$t("deleteSuccess"));
+            this.getTree();
+          });
+        })
+        .catch((err) => {
+          console.log(err);
         });
-      });
     },
-    // treeDelete(row) {
-    //   console.log(row);
-    //   this.$confirm(this.$t("askDeleteData"), {
-    //     confirmButtonText: this.$t("submitText"),
-    //     cancelButtonText: this.$t("cancelText"),
-    //     type: "warning",
-    //   }).then(() => {
-    //     API.videoClassifyDetele({ id: row.id }).then(() => {
-    //       this.msgSuccess(this.$t("deleteSuccess"));
-    //       this.getTree();
-    //     });
-    //   });
-    // },
   },
 };
 </script>