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" :status='status' :nodes="item.child"
                :prefix="(prefix ? prefix + '-' : '') + item.rowindex" />

            <block v-else>
                <view class="images" v-if="item.attinfos.length">
                    <view class="image" hover-class="navigator-hover" v-for="(img, index) in item.attinfos"
                        :key="img.attachmentid" @click.stop="preview(index, item.attinfos)">
                        <up-image :show-loading="true" :src="$Http.getSpecifiedImage(img)" width="80px" height="80px" />
                    </view>
                </view>
                <view 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>
            </block>
        </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],
    },
    status: {
        type: String,
    }
});
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;
    item.status1 = props.status;
    $Http.data = item;
    uni.navigateTo({
        url: '/pages/workOrder/work',
    })
}

function preview(index, imgs) {
    wx.previewImage({
        urls: imgs.filter(v => isImage(v.postfix)).map(item => item.url),
        current: imgs[index].url,

    })
}
function isImage(postfix) {
    const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
    return imageTypes.includes(postfix.toLowerCase());
}


</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;
        }
    }

    .images {
        display: flex;
        flex-wrap: wrap;

        .image {
            margin-top: 20rpx;
            margin-right: 20rpx;
        }
    }
}


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

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

}
</style>