From 71803eabe8bc4df726882a2474317021209209e6 Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Sun, 28 Sep 2025 10:12:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:tree-node=E5=88=A4=E6=96=AD=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7=EF=BC=9B=E4=BF=AE=E5=A4=8D=E5=88=86=E7=B1=BB=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E4=B8=8A=E4=BC=A0picUrl=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/prosperity-shop/categary-manage.vue | 18 ++++++-------
 src/sheep/components/node-tree.vue            | 26 +++++++++++++------
 src/sheep/components/shop-categary-picker.vue |  8 ++++--
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/pages/prosperity-shop/categary-manage.vue b/src/pages/prosperity-shop/categary-manage.vue
index 5c3208a..bddec77 100644
--- a/src/pages/prosperity-shop/categary-manage.vue
+++ b/src/pages/prosperity-shop/categary-manage.vue
@@ -46,12 +46,12 @@
 									{ label: '下架', value: '1' },
 								]"
 								:key="index"
-							></tm-radio>
+							/>
 						</tm-radio-group>
 					</tm-form-item>
 					<view class="prefix_title mb-2">父级分类</view>
 					<view class="my-2">
-						<node-tree v-model="selectedNode" :node-data="categoryTree" />
+						<node-tree v-model="selectedNodeId" :node-data="categoryTree" />
 					</view>
 					<view class="prefix_title mb-2">分类图</view>
 					<tm-upload-photo
@@ -89,7 +89,7 @@ const form = reactive<any>({
 	picUrl: [],
 })
 const categoryTree = ref([])
-const selectedNode = ref<any>({})
+const selectedNodeId = ref<string>("")
 
 const { categoryList, getGoodsCategory, delCategary } = useCategaryManage()
 
@@ -113,28 +113,28 @@ const addCategary = () => {
 		parentId: "",
 		picUrl: [],
 	})
-	selectedNode.value = {}
+	selectedNodeId.value = ""
 	categaryFormDrawer.value = true
 }
 
 // 编辑分类
 const editCategary = (item) => {
 	getCategaryTree()
-	const picUrl = [{ path: filePath(item.picUrl), response: JSON.stringify({ data: { url: item.picUrl } }) }]
+	const picUrl = item.picUrl ? [{ path: filePath(item.picUrl), response: JSON.stringify({ data: { url: item.picUrl } }) }] : []
 	Object.assign(form, { ...item, picUrl })
-	selectedNode.value = { id: item.parentId }
+	selectedNodeId.value = item.parentId
 	categaryFormDrawer.value = true
 }
 
 // 提交保存
 const saveCategary = async () => {
 	if (!form.name) return uni.showToast({ title: "请填写分类名称", icon: "none" })
-	if (selectedNode.value.id === form.id) return uni.showToast({ title: "父级分类不能是自己", icon: "none" })
+	if (selectedNodeId.value === form.id) return uni.showToast({ title: "父级分类不能是自己", icon: "none" })
 	try {
 		const params = {
 			...form,
-			parentId: selectedNode.value.id,
-			picUrl: JSON.parse(form.picUrl[0].response).data.url,
+			parentId: selectedNodeId.value,
+			picUrl: form.picUrl?.length ? JSON.parse(form.picUrl[0].response).data.url : "",
 		}
 		uni.showLoading({ title: "保存中..." })
 		const { code, msg } = await (form.id ? prosperityShopApi.editCategary(params) : prosperityShopApi.addCategary(params))
diff --git a/src/sheep/components/node-tree.vue b/src/sheep/components/node-tree.vue
index 4c9f844..8a698d1 100644
--- a/src/sheep/components/node-tree.vue
+++ b/src/sheep/components/node-tree.vue
@@ -3,7 +3,7 @@
 		<view v-for="item in nodeData" :key="item.id">
 			<view
 				class="tree-item"
-				:style="item.id == selectedNode.id ? { borderColor: '#1879ff' } : { color: '#000' }"
+				:style="item.id == selectedNodeId ? { borderColor: '#1879ff' } : { color: '#000' }"
 				@click.stop="toCurrentNode(item)"
 			>
 				<image class="tree-item-icon" :src="filePath(item.picUrl)" />
@@ -11,10 +11,10 @@
 			</view>
 
 			<node-tree
-				v-model="selectedNode"
+				v-model="selectedNodeId"
 				v-if="item.children && item.children.length"
 				:node-data="item.children"
-				:style="{ marginLeft: `${getLevel(item.level) * 60}rpx` }"
+				:style="{ marginLeft: `${getLevel() * 60}rpx` }"
 				@currentNode="(v) => emit('currentNode', v)"
 			/>
 		</view>
@@ -22,19 +22,29 @@
 </template>
 
 <script setup lang="ts">
+import { getCurrentInstance } from "vue"
 import { filePath } from "../utils/file"
 import NodeTree from "./node-tree.vue"
 
 withDefaults(defineProps<{ nodeData: any[] }>(), { nodeData: () => [] })
 const emit = defineEmits(["currentNode"])
-const selectedNode = defineModel<any>("modelValue")
+const selectedNodeId = defineModel<any>("modelValue")
+defineOptions({ name: "node-tree-item" })
+
+const compInstance = getCurrentInstance()
 
 const toCurrentNode = (item) => {
-	emit("currentNode", item)
-	selectedNode.value = item
+	emit("currentNode", { ...item, level: getLevel() })
+	selectedNodeId.value = item.id
 }
 
-const getLevel = (level) => {
+const getLevel = () => {
+	let level = 1
+	let $parent = compInstance?.parent
+	while ($parent && $parent.proxy?.$options.name === "node-tree-item") {
+		level++
+		$parent = $parent.parent
+	}
 	return level
 }
 </script>
@@ -44,7 +54,7 @@ const getLevel = (level) => {
 	overflow: hidden;
 }
 .tree-item {
-	border: 4rpx solid #e4e7ed77;
+	border: 4rpx solid #e4e7ed;
 	margin-bottom: 16rpx;
 	display: flex;
 	align-items: center;
diff --git a/src/sheep/components/shop-categary-picker.vue b/src/sheep/components/shop-categary-picker.vue
index 8c94128..bd271e4 100644
--- a/src/sheep/components/shop-categary-picker.vue
+++ b/src/sheep/components/shop-categary-picker.vue
@@ -1,6 +1,6 @@
 <template>
 	<view class="mb-20rpx">
-		<node-tree v-model="selectedNode" :node-data="categoryTree" />
+		<node-tree :node-data="categoryTree" @currentNode="currentNode" />
 		<view v-if="categoryTree.length === 0" class="text-center text-#888 py-40rpx">暂无数据</view>
 	</view>
 	<view class="px-20rpx py-2 flex justify-between sticky bottom-0 bg-white">
@@ -24,10 +24,14 @@ const emit = defineEmits(["confirm", "cancel"])
 
 const selectedNode = ref<any>({})
 
+const currentNode = (currentNode) => {
+	selectedNode.value = currentNode
+}
+
 function onConfirm() {
 	if (!selectedNode.value) {
 		return uni.showToast({ title: "请选择分类", icon: "none" })
 	}
-	emit("confirm", { ...selectedNode, categoryId: selectedNode.value.id, categoryName: selectedNode.value.name })
+	emit("confirm", { categoryId: selectedNode.value.id, categoryName: selectedNode.value.name })
 }
 </script>