water_affairs/packageA/workOrder/modules/nodes.vue

<template>
    <view v-if="nodes.length">
        <view class="label">进度</view>
        <view class="step-box">
            <view class="workorder" v-for="(item, index) in nodes" :key="item.sa_workorder_nodeid">

                <view class="workorder-title" :hover-class="item.child.length == 0 ? 'navigator-hover' : ''"
                    @click="item.child.length == 0 ? onClick(item) : ''">
                    {{ index + 1 }}.{{ item.workpresetjson.workname }}
                </view>

                <view class="child-result" v-if="item.child.length == 0">
                    <view class="have-not-begun tag" v-if="item.status == 0">
                        未开始
                    </view>
                    <block v-else>
                        <view class="time">{{ item.changedate }}</view>
                        <block v-if="item.status == 1">
                            <view class="done tag">
                                完成
                            </view>
                            <view class="underway tag">
                                {{ item.finishby }}
                            </view>
                        </block>
                        <view class="underway tag" v-else>
                            进行中
                        </view>
                    </block>
                </view>

                <navigator url="#" class="child" v-for="(child, childIndex) in item.child" @click="onClick(child)"
                    :key="child.sa_workorder_nodeid">
                    <view class="child-title">
                        {{ index + 1 }}-{{ childIndex + 1 }}.{{ child.workpresetjson.workname }}
                    </view>
                    <view class="child-result">
                        <view class="have-not-begun tag" v-if="child.status == 0">
                            未开始
                        </view>
                        <block v-else>
                            <view class="time">{{ child.changedate }}</view>
                            <block v-if="child.status == 1">
                                <view class="done tag">
                                    完成
                                </view>
                                <view class="underway tag">
                                    {{ child.finishby }}
                                </view>
                            </block>

                            <view class="underway tag" v-else>
                                进行中
                            </view>
                        </block>
                    </view>
                </navigator>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "nodes",
    props: {
        nodes: {
            type: Array,
            default: []
        },
        nodeClick: {
            type: Function
        }
    },
    data() {
        return {
            onClick(e) {
                this.$emit("nodeClick", e)
            },
        }
    },
}
</script>

<style lang="scss" scoped>
.label {
    margin: 15px 0 10px 10px;
    font-size: 13px;
    color: #fff;
}

.step-box {
    width: 355px;
    margin: 0 auto;
    background: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px;
    padding-top: 0;

    .workorder {
        width: 100%;
        padding-bottom: 4px;
        border-bottom: 1px dashed #ddd;

        &-title {
            font-size: 16px;
            padding-top: 10px;
            margin-bottom: 4px;
        }

        .child {
            padding: 6px;
            border-radius: 4px;
            overflow: hidden;

            &-title {
                font-size: 14px;
            }
        }

        .child-result {
            margin-top: 4px;
            display: flex;
            align-items: center;

            .have-not-begun {
                background: #E34D59;
            }

            .done {
                background: #4BA574;
            }

            .underway {
                background: #2151D1;
            }

            .tag {
                font-size: 10px;
                padding: 4px;
                border-radius: 4px;
                color: #fff;
                margin-left: 6px;
            }

            .time {
                font-size: 14px;
                color: #999;
            }
        }
    }

    .workorder:last-child {
        padding-bottom: 0px;
        border: 0;
    }
}
</style>