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>
            <nodes :nodes="detail.nodes" @nodeClick="nodeClick" />
            <view style="height: 22vw;" />
        </My_listbox>
        <but ref="but" :sa_workorderid="sa_workorderid" :status="detail.status" @onUpdate="getDetail" />
    </view>
</template>

<script>
import but from "./modules/but"
import nodes from "./modules/nodes"
export default {
    name: "Detail",
    components: { but, nodes },
    data() {
        return {
            detail: {
                team: [],
                nodes: [],
                status: "",
                node: null,
            },
            sa_workorderid: 0,
        }
    },
    onLoad(options) {
        this.sa_workorderid = options.id;
        this.getDetail(true)
    },
    methods: {
        getDetail(init = false) {
            if (!init) return;
            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();
                if (this.node) this.nodeClick(this.node)
            })
        },
        nodeClick(node) {
            if (this.detail.status != '进行中') {
                if (this.detail.status == '待开始') this.node = node;
                this.$refs.but.onClick(true)
                return
            } else {
                
                console.log("跳转", node)


            }
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
    position: relative;

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

}
</style>