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" :style="[statusStyle(detail.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: isShowBut ? '22vw' : '30px' }" />
        </My_listbox>
        <but ref="but" :sa_workorderid="sa_workorderid" :status="detail.status" @onUpdate="getDetail"
            @unShowBut="onUnShowBut" />
    </view>
</template>

<script>
import but from "./modules/but"
import nodes from "./modules/nodes"
export default {
    name: "Detail",
    components: { but, nodes },
    computed: {
        statusStyle() {
            return function (status) {
                let obj = {};
                switch (status) {
                    case '待接单':
                        obj = { color: '#EB4B5C', background: 'rgba(235, 75, 92, .2)' }
                        break;
                    case '待开始':
                        obj = { color: '#3874F6', background: 'rgba(56, 116, 246, .2)' }
                        break;
                    case '进行中':
                        obj = { color: '#5AB73F', background: 'rgba(90, 183, 63, .2)' };
                        break;
                    case '已完成':
                        obj = { color: '#F27F37', background: 'rgba(242, 127, 55, .2)' };
                        break;
                    default:
                        obj = { color: '#999999', background: 'rgba(153, 153, 153, .2)' }
                        break;
                }
                return obj
            }
        }
    },
    data() {
        return {
            detail: {
                team: [],
                nodes: [],
                status: "",
                child: null,
            },
            isShowBut: true,
            sa_workorderid: 0,
        }
    },
    onLoad(options) {
        this.sa_workorderid = options.id;
        this.getDetail(true)
        this.$Http.updateNodes = this.getDetail.bind(this);
    },
    onUnload() {
        delete this.$Http.updateNodes;
    },
    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 "sa_patrolplan":
                        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.child) this.nodeClick(this.child)
            })
        },
        nodeClick(child) {
            if (['待接单', '待开始'].includes(this.detail.status)) {
                if (this.detail.status == '待开始') this.child = child;
                this.$refs.but.onClick(true)
            } else if (['暂停', '作废', '已完成'].includes(this.detail.status)) {
                // 3、暂停/作废/已完成的工单，点击工序详情可查询，不可编辑；
                uni.navigateTo({
                    url: `/packageA/workOrder/setNode?isReadOnly=true&sa_workorderid=${this.detail.sa_workorderid}&sa_workorder_nodeid=${child.sa_workorder_nodeid}&w_deviceid=${this.detail.w_deviceid}`
                });
            } else if (this.detail.status == '进行中') {
                // 2、已开始的工单（工单状态为进行中），点击工序进入工序详情，若工序未完成，可查询可编辑；已完成工序仅查询不可编辑
                uni.navigateTo({
                    url: `/packageA/workOrder/setNode?sa_workorderid=${this.detail.sa_workorderid}&sa_workorder_nodeid=${child.sa_workorder_nodeid}&w_deviceid=${this.detail.w_deviceid}`
                });
                this.child = null;
            }
        },
        onUnShowBut(e) {
            this.isShowBut = e;
        }
    },
    onUnload() {
    }
}
</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;
            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>