物料分类: 添加子级,修改,删除功能

src/components/tree-nav.vue

@@ -5,16 +5,23 @@
         <template #title>
           <van-row>
             <van-col span="13">
-              <span @click.stop="clickItem(item)">{{ item.label }}</span>
+              <span>{{ item.label }}</span>
             </van-col>
             <van-col span="11">
-              <span style="cursor: pointer; color: #409eff">添加子项</span>
-              <span style="margin-left: 8px; cursor: pointer; color: #409eff">修改</span>
-              <span style="margin-left: 8px; cursor: pointer; color: #409eff">删除</span>
+              <span style="cursor: pointer; color: #409eff" @click="clickAdd(item)">添加子项</span>
+              <span style="margin-left: 8px; cursor: pointer; color: #409eff" @click="clickUpdate(item)">修改</span>
+              <span style="margin-left: 8px; cursor: pointer; color: #409eff" @click="clickDelete(item)">删除</span>
             </van-col>
           </van-row>
         </template>
-        <tree-nav v-if="item.children" :tree-data="item.children" :active-names="props.activeNames" @clickItem="emits('clickItem', $event)"></tree-nav>
+        <tree-nav
+          v-if="item.children"
+          :tree-data="item.children"
+          :active-names="props.activeNames"
+          @clickAdd="(item) => clickAdd(item)"
+          @clickUpdate="(item) => clickUpdate(item)"
+          @clickDelete="(item) => clickDelete(item)">
+        </tree-nav>
       </van-collapse-item>
     </template>
     <template v-else>
@@ -22,12 +29,12 @@
         <template #title>
           <van-row>
             <van-col span="13">
-              <span @click.stop="clickItem(item)">{{ item.label }}</span>
+              <span>{{ item.label }}</span>
             </van-col>
             <van-col span="11">
-              <span style="cursor: pointer; color: #409eff">添加子项</span>
-              <span style="margin-left: 8px; cursor: pointer; color: #409eff">修改</span>
-              <span style="margin-left: 8px; cursor: pointer; color: #409eff">删除</span>
+              <span style="cursor: pointer; color: #409eff" @click="clickAdd(item)">添加子项</span>
+              <span style="margin-left: 8px; cursor: pointer; color: #409eff" @click="clickUpdate(item)">修改</span>
+              <span style="margin-left: 8px; cursor: pointer; color: #409eff" @click="clickDelete(item)">删除</span>
             </van-col>
           </van-row>
         </template>
@@ -45,7 +52,13 @@ const props = defineProps({
 const emits = defineEmits(["clickItem"]);
 const tree = ref();
 const activeNames = ref([]);
-const clickItem = (item) => {
-  emits("clickItem", item); //事件依然采用emits向上触发事件
+const clickAdd = (item) => {
+  emits("clickAdd", item);
+};
+const clickUpdate = (item) => {
+  emits("clickUpdate", item);
+};
+const clickDelete = (item) => {
+  emits("clickDelete", item);
 };
 </script>

src/views/product-material/material-classification/add.vue

@@ -30,7 +30,7 @@ const onSubmit = () => {
   proxy
     .post("/productClassify/add", {
       name: formData.value.name,
-      parentId: "",
+      parentId: route.query.parentId,
       definition: "2",
     })
     .then(() => {

src/views/product-material/material-classification/edit.vue

@@ -24,13 +24,13 @@
   import { useRoute } from "vue-router";
   const proxy = getCurrentInstance().proxy;
   const route = useRoute();
-  const formData = ref({ name: null });
+  const formData = ref({ name: route.query.name });
   const onClickLeft = () => history.back();
   const onSubmit = () => {
     proxy
       .post("/productClassify/edit", {
         name: formData.value.name,
-        parentId: route.query.parentId,
+        id: route.query.id,
         definition: "2",
       })
       .then(() => {

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

@@ -4,10 +4,15 @@
     <van-pull-refresh v-model="loading" @refresh="onRefresh">
       <div class="list">
         <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="onLoad" style="margin-bottom: 60px">
-          <commonList :data="[]" @onClick="toDtl" :config="listConfig"> </commonList>
-          <treeNav :tree-data="listData" @clickItem="(item) => toDtl(item)"></treeNav>
+          <commonList :data="[]" :config="listConfig"> </commonList>
+          <treeNav
+            :tree-data="listData"
+            @clickAdd="(item) => clickAdd(item)"
+            @clickUpdate="(item) => clickUpdate(item)"
+            @clickDelete="(item) => clickDelete(item)">
+          </treeNav>
           <div style="margin: 16px">
-            <van-button round block type="primary" @click="clickAdd">添加一级节点</van-button>
+            <van-button round block type="primary" @click="clickAdd({ id: '' })">添加一级节点</van-button>
           </div>
         </van-list>
       </div>
@@ -19,6 +24,9 @@ import { ref, getCurrentInstance } from "vue";
 import commonList from "@/components/common-list.vue";
 import treeNav from "@/components/tree-nav.vue";
 import { useRoute } from "vue-router";
+import { showConfirmDialog } from "vant";
+import { showSuccessToast } from "vant";
+
 const loading = ref(false);
 const router = useRoute();
 const req = ref({
@@ -43,21 +51,11 @@ const onLoad = () => {
   getList();
 };
 const onClickLeft = () => proxy.$router.push("/main/working");
-const toDtl = (row) => {
-  console.log(row);
-  // proxy.$router.push({
-  //   path: "workOrderDtl",
-  //   query: {
-  //     id: row.id,
-  //   },
-  // });
-};
 const getList = (type) => {
   loading.value = true;
   proxy
     .post("/productClassify/tree", { parentId: "", name: "", definition: "2" })
     .then((res) => {
-      console.log(res);
       listData.value = res.data;
       finished.value = true;
       loading.value = false;
@@ -66,7 +64,42 @@ const getList = (type) => {
       loading.value = false;
     });
 };
-const clickAdd = () => proxy.$router.push("/main/materialClassificationAdd");
+const clickAdd = (row) => {
+  proxy.$router.push({
+    path: "/main/materialClassificationAdd",
+    query: {
+      parentId: row.id,
+    },
+  });
+};
+const clickUpdate = (row) => {
+  proxy.$router.push({
+    path: "/main/materialClassificationEdit",
+    query: {
+      id: row.id,
+      name: row.label,
+    },
+  });
+};
+const clickDelete = (row) => {
+  showConfirmDialog({
+    title: "标题",
+    message: "是否确认删除该分类",
+  })
+    .then(() => {
+      proxy
+        .post("/productClassify/delete", {
+          id: row.id,
+        })
+        .then((res) => {
+          showSuccessToast("删除成功");
+          getList();
+        });
+    })
+    .catch(() => {
+      // on cancel
+    });
+};
 getList();
 </script>