修改

src/views/system/goodsCategory/index.vue

@@ -192,12 +192,22 @@
           :required="true"
           v-if="form.parentId"
         >
-          <el-input
+          <el-cascader
+            :props="treeOption"
+            @change="change"
+            style="width: 340px"
+            :show-all-levels="false"
+            :clearable="true"
+            ref="cascader"
+            :placeholder="form.parentName ? form.parentName : ''"
+          >
+          </el-cascader>
+          <!-- <el-input
             v-model="form.parentName"
             placeholder="请输入父级分类名称"
             maxlength="10"
             disabled
-          />
+          /> -->
         </el-form-item>
         <el-form-item label="商品分类名称" prop="goodsCategoryName">
           <el-input
@@ -263,19 +273,26 @@ export default {
   components: { stationAcatar },
   data() {
     return {
-      props: {
+      treeOption: {
         lazy: true,
+        checkStrictly: true, // 是否可选择任意一级
         lazyLoad(node, resolve) {
-          console.log(node);
-          const { level } = node;
+          const id = node.level === 0 ? 0 : node.data.id;
           setTimeout(() => {
-            const nodes = Array.from({ length: level + 1 }).map((item) => ({
-              value: ++id,
-              label: `选项${id}`,
-              leaf: level >= 2,
-            }));
-            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
-            resolve(nodes);
+            getStationCategoryList(id).then((res) => {
+              // 接口请求
+              res.data.forEach((e) => {
+                e.value = e.id;
+                e.label = e.goodsCategoryName;
+              });
+              resolve(
+                res.data.map((item) => {
+                  return {
+                    ...item,
+                  };
+                })
+              );
+            });
           }, 1000);
         },
       },
@@ -349,6 +366,9 @@ export default {
     this.info();
   },
   methods: {
+    change(e) {
+      this.form.parentId = e[e.length - 1];
+    },
     // 节点单击事件
     handleNodeClick(data) {
       this.loading = true;
@@ -542,3 +562,9 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+::v-deep .el-cascader .el-input input::-webkit-input-placeholder {
+  color: black;
+}
+</style>
+