MD_worker/pages/workOrder/modules/nodes.vue

<template>
    <view class="node" :class="prefix ? 'child' : ''"
        :hover-class="!prefix && item.child.length ? '' : 'navigator-hover'" v-for="item in nodes"
        :key="item.sa_workorder_nodeid" @click.stop="toWork(item)">
        <view class="number">
            {{ (prefix ? prefix + '-' : '') + item.rowindex }}.
        </view>
        <view style="flex: 1;">
            <view class="label">
                {{ item.workpresetjson.workname }}
            </view>
            <node v-if="!prefix && item.child.length" :nodes="item.child"
                :prefix="(prefix ? prefix + '-' : '') + item.rowindex" />
            <view v-else class="stuta">
                <view class="tag" style="background-color: #E64D55;" v-if="item.status == '0'">未完成</view>
                <view class="tag" style="background-color: #06A971;" v-if="item.status == '1'">已完成</view>
                <view class="tag" style="background-color: #70B603;" v-if="item.status == '2'">进行中</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;
import { defineProps } from 'vue';
import node from "./nodes.vue";

const props = defineProps({
    nodes: {
        type: Array
    },
    prefix: {
        type: [String, Number],
    }
});
function toWork(item) {
    try {
        if (item.child.length) return;
    } catch (error) {
        item.child = [];
    }
    if (item.child.length) return;
    item.title = (props.prefix ? props.prefix + '-' : '') + item.rowindex + '. ' + item.workpresetjson.workname;
    $Http.data = item;

    wx.navigateTo({
        url: '/pages/workOrder/work',
    })
}
</script>

<style lang="scss" scoped>
.node {
    display: flex;
    padding: 10rpx;
    margin-top: 10rpx;
    font-family: Microsoft YaHei, Microsoft YaHei;
    border-radius: 8rpx;

    .label,
    .number {
        font-size: 32rpx;
    }

    .number {
        margin-right: 10rpx;
    }

    .stuta {
        margin-top: 20rpx;
        display: flex;

        .tag {
            border-radius: 8rpx;
            padding: 8rpx 12rpx;
            font-size: 24rpx;
            color: #fff;
        }
    }
}


.child {
    margin-left: -55rpx;
    width: calc(100% + 65rpx);
    transform: scale(0.9);

    .label,
    .number {
        color: #333;
    }

}
</style>