water_affairs/packageA/workOrder/detail.vue

<template>
    <view class="container">
        <cu-custom id="custom"
            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
            :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">
                工单详情
            </block>
        </cu-custom>
        <My_listbox ref="List" @getlist="getDetail">
            <view class="header">
                <view class="billno">
                    {{ detail.billno }}
                </view>
                <view class="row">
                    <view class="row-label">来源：</view>
                    <view class="row-value">{{ detail.source || ' --' }}</view>
                </view>
                <view class="row">
                    <view class="row-label">设备：</view>
                    <view class="row-value">{{ detail.devicename || ' --' }}</view>
                </view>
                <view class="row">
                    <view class="row-label">任务时间：</view>
                    <view class="row-value">
                        {{ detail.begdate && detail.enddate ? detail.begdate + ' 至 ' + detail.enddate : '--' }}
                    </view>
                </view>
                <view class="row">
                    <view class="row-label">地址：</view>
                    <view class="row-value">{{ detail.address || ' --' }}</view>
                </view>
                <view class="row">
                    <view class="row-label">备注说明：</view>
                    <view class="row-value">{{ detail.remarks || ' --' }}</view>
                </view>
                <view class="status">{{ detail.status }}</view>
            </view>

            <block v-if="detail.team.length">
                <view class="label">巡检人员</view>
                <view class="users">
                    <view class="user" :class="item.isleader ? 'leader' : ''" v-for="item in detail.team"
                        :key="item.userid">
                        {{ item.name }}
                    </view>
                </view>
            </block>
            <block v-if="detail.nodes.length">
                <view class="label">进度</view>
                <view class="step-box">
                    <view class="workorder" v-for="(item, index) in detail.nodes" :key="item.sa_workorder_nodeid">

                        <view class="workorder-title">
                            {{ index + 1 }}.{{ item.workpresetjson.workname }}
                        </view>

                        <navigator url="#" class="child" v-for="(child, childIndex) in item.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>
                                    <view class="done tag" v-if="child.status == 1">
                                        完成
                                    </view>
                                    <view class="underway tag" v-else>
                                        进行中
                                    </view>
                                </block>
                            </view>
                        </navigator>
                    </view>
                </view>
            </block>
            <view style="height: 30px;" />
        </My_listbox>
    </view>
</template>

<script>
export default {
    name: "Detail",
    data() {
        return {
            detail: {
                team: [],
                nodes: []
            },
            sa_workorderid: 0,
        }
    },
    onLoad(options) {
        this.sa_workorderid = options.id;
        this.getDetail(true)
    },
    methods: {
        getDetail(init = false) {
            if (!init) return;
            this.$Http.basic({
                "id": 20230208140103,
                "content": {
                    "sa_workorderid": this.sa_workorderid
                }
            }).then(res => {
                console.log("工单详情", res)
                if (this.cutoff(res.msg)) return;
                let detail = res.data;
                switch (detail.sourcetable) {
                    case "w_eventid":
                        detail.source = "巡检," + (detail.planno || ' --')
                        break;
                    case "w_event_log":
                        detail.source = "告警," + (detail.eventname || ' --')
                        break;
                    default:
                        detail.source = "现场"
                        break;
                }
                this.detail = res.data;
                this.$refs.List.RefreshToComplete();
                this.$refs.List.setHeight();

            })
        }
    },
}
</script>

<style lang="scss" scoped>
.header {
    position: relative;
    padding: 10px;
    width: 355px;
    margin: 10px auto;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;

    .billno {
        font-size: 16px;
        font-weight: bold;
        color: #004684;
    }

    .row {
        display: flex;
        font-size: 14px;
        margin-top: 6px;

        &-label {
            flex-shrink: 0;
            color: #666;
        }
    }

    .status {
        position: absolute;
        top: 0;
        right: 0;
        padding: 4px 8px;
        background: #FFEFEF;
        color: #F65050;
        font-size: 12px;
        border-radius: 0 0 0 4px;
    }
}

.label {
    margin: 15px 0 10px 10px;
    font-size: 13px;
    color: #fff;
}

.users {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 6px 2px 6px;
    width: 355px;
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;

    .user {
        padding: 2px 4px;
        border: 1px solid #000;
        color: #000;
        font-size: 13px;
        border-radius: 4px;
        margin-right: 6px;
        margin-bottom: 6px;
        box-sizing: border-box;
    }

    .leader {
        background: #2A6AF2;
        border: 0;
        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;
            }

            &-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>