iot-platform-app/pages/supplyChain/classify/classify.vue

<template>
	<view class="content">
		<!-- @up-item="upNode"
		@down-item="downNode" -->
		<view style="margin: 24rpx;">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="user-box">
			<m-tree class="u-p-l-40" ref="mtree" :defaultProps="defaultProps" :data="tree" :divider="divider"
				:edit="edit" :unfold="true" @node-click="nodeClick" @add-item="addNode" @edit-item="editNode"
				@delete-item="deleteNode" @finger-action="fingerAction" @long-press="longpressNode">
			</m-tree>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* 
				tree 数据
				*/
				current:0,
				styleType: 'button',
				items: ['产品', '物料'],
				activeColor: '#007aff',
				defaultProps: {
					id: 'id', // 此项为id项的key
					children: 'children', // 此项为修改子集数据的key
					label: 'label' // 此项为修改显示数据的key
				},
				divider: false,
				edit: true,
				tree: [],
				// 1产品分类 2物料分类
				type:1,
			}
		},
		onLoad() {
			const v = this
			v.getTree()
		},
		methods: {
			onClickItem(e){
				const v = this
				if(e.currentIndex === 0){
					v.type = 1
				}else{
					v.type = 2
				}
				v.getTree()
			},
			getTree() {
				const v = this
				v.$post('/api/basics/classify/tree', {
					type: this.type
				}).then(res => {
					if (res.code === 200) {
						v.tree = res.data
					}

				})
			},
			//遍历id节点并删除
			removeNodeData(datas, id) { //遍历树  获取id数组
				for (var i in datas) {
					if (id === datas[i].id) {
						// datas.push(datas[i]);
						console.log('要删除项目：', datas[i].id);
						datas.splice(i, 1);
						break;
					} else {
						if (datas[i].children) { //存在子节点就递归
							this.removeNodeData(datas[i].children, id);
						}
					}
				}
			},
			//遍历id节点添加子项
			addNodeData(datas, id, nodedata) { //遍历树  获取id数组
				var addflag = false;
				if (id === 0) {
					datas.unshift(nodedata);
					addflag = true;
				} else {
					for (var i in datas) {
						console.log(JSON.stringify(datas[i]));
						if (id === datas[i].id) {
							// datas.push(datas[i]);
							console.log('要增加项目：', datas[i].id, nodedata);
							datas[i].children.unshift(nodedata);
							addflag = true;
							break;
						} else {
							if (datas[i].children) { //存在子节点就递归
								this.addNodeData(datas[i].children, id, nodedata);
							}
						}
					}
				}
				return addflag;
			},
			//节点点击事件
			nodeClick(e) {
				console.log('点击的项目', JSON.stringify(e));
			},
			//节点up按钮点击事件
			upNode(e) {
				const that = this;
				console.log('upNode');
				if (e.index != 0) {
					// 根据自身需求，自行修改数据处理方法；

					// up上移操作，排序并更新tree中对应元素sort属性
					var data = {
						pnode: {},
						itemA: {
							id: e.items[e.index - 1].id,
							sort: e.items[e.index].sort
						},
						itemB: {
							id: e.items[e.index].id,
							sort: e.items[e.index - 1].sort
						},
					}
					that.$refs.mtree.treeSort(that.tree, e.item.pid, data); // 调用组件方法 排序sort 从小到大排序

				}
			},
			//节点down按钮点击事件
			downNode(e) {
				const that = this;
				console.log('downNode');
				if (e.index != e.items.length - 1) {
					// 根据自身需求，自行修改数据处理方法；

					// down下移操作，排序并更新tree中对应元素sort属性
					var data = {
						pnode: {},
						itemA: {
							id: e.items[e.index + 1].id,
							sort: e.items[e.index].sort
						},
						itemB: {
							id: e.items[e.index].id,
							sort: e.items[e.index + 1].sort
						},
					}
					that.$refs.mtree.treeSort(that.tree, e.item.pid, data); // 调用组件方法 排序sort 从小到大排序
				}
			},
			//节点新增按钮点击事件
			addNode(e) {
				const v = this
				//e.pNodeData, e.addContent
				console.log('点击的项目add', JSON.stringify(e));
				// 根据自身需求，自行修改数据新增方法；
				// 可以配合异步请求 执行服务器删除操作
				let data = {};
				v.$post('/api/basics/classify/add', {
					parentId: e.pNodeData.id,
					type: v.type,
					name: e.addContent,
				}).then(res => {
					if (res.code === 200) {
						v.getTree()
					}
				})
			},
			//节点更新按钮点击事件
			editNode(e) {
				const v = this
				//e.pNodeData, e.editContent
				console.log('点击的项目add', e);
				var parentId = null

				function treeRecursion(arr, id) {
					for (var i = 0; i < arr.length; i++) {
						if (arr[i].id == id) {
							console.log(parentId)
							return
						}
						if (arr[i].children && arr[i].children.length != 0) {
							parentId = arr[i].id
							treeRecursion(arr[i].children, id)
						}
					}
				}
				treeRecursion(v.tree, e.pNodeData.id)
				v.$post('/api/basics/classify/edit', {
					id: e.pNodeData.id,
					type: v.type,
					name: e.editContent,
					parentId: parentId,
				}).then(res => {
					if (res.code === 200) {
						v.getTree()
					}
				})

			},
			//节点删除按钮点击事件
			deleteNode(e) {
				const v = this
				console.log('点击的项目delete', JSON.stringify(e));
				uni.showModal({
					title: '提示',
					content: '确认删除该条信息吗？',
					success: res => {
						if (res.confirm) {
							v.$post('/api/basics/classify/delete', {
								id: e.id,
								type: v.type,
							}).then(res => {
								if (res.code === 200) {
									if (this.removeNodeData(this.tree, e.id)) {
										// 可以配合异步请求 执行服务器删除操作
										console.log('删除ID:', e, id, '数据');
									}
								}
							})

						}
					}
				})

			},
			//节点滑动
			fingerAction(e) {
				console.log('节点滑动fingerAction', JSON.stringify(e));
			},
			//节点选线长按事件
			longpressNode(e) {
				console.log('长按的项目longpress', JSON.stringify(e));
			}
		}
	}
</script>
<style>
	.user-box .p-t-20 image:nth-child(1){
		display: none;
	}
	.user-box .p-t-20 image:nth-child(2){
		display: none;
	}
</style>
<style lang="scss">
	page {
		background-color: #ededed;
	}

	.user-box {
		background-color: #fff;
	}
	
</style>