xiamen-sb-uniapp/pages/service-detail/service-detail.vue

<template>
    <view class="container">
        <u-toast ref="uToast" />
        <u-tabs :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
        <view v-if="current == 0">
            <view class="mx3 my2 p3 bg-color-white" style="border-radius: 16rpx">
                <equipment-line title="报修单号" :content="infoData.no" />
                <equipment-line title="设备名称" :content="infoData.sbName" />
                <equipment-line title="是否停机" :content="$BaseTool.Object.getField(needStopMap, infoData.needStop)" />
                <equipment-line title="报修人" :content="infoData.userName" />
                <equipment-line title="报修来源" :content="$BaseTool.Object.getField(sourceMap, infoData.source)" />
                <equipment-line title="紧急等级" :content="$BaseTool.Object.getField(levelMap, infoData.level)" />
                <equipment-line title="报修时间" :content="infoData.applyTime" />
                <equipment-line title="状态" :content="$BaseTool.Object.getField(levelMap, infoData.status)" />
                <view class="d-flex py3 border-bottom">
                    <view class="f-size-26 text-color-9 w200">图片</view>
                    <view class="f-size-26 text-color-3 d-flex">
                        <block v-for="(item, index) in imagesList" :key="index">
                            <u-image width="100" class="mr-2" :src="item" @click="handlePre(index)"
                                mode="widthFix"><u-loading slot="loading"></u-loading></u-image>
                        </block>
                    </view>
                </view>
            </view>

        </view>
        <view v-if="current == 1">
            <view class="mx3 my2 p3 bg-color-white" style="border-radius: 16rpx">

                <template v-if="infoData">
                    <equipment-line title="故障类别" :content="infoData.repairErrorTypeName" />
                    <equipment-line title="派工时间" :content="infoData.dispatchTime || infoData.applyTime" />
                    <equipment-line title="维修开始" :content="infoData.repairActualStartTime || infoData.repairStartTime" />
                    <equipment-line title="维修结束" :content="infoData.repairEndTime" />
                    <equipment-line title="维修耗时" :content="repairDurationDisplay" />
                    <equipment-line title="维修人员" :content="infoData.repairUserName" />
                    <equipment-line v-if="infoData.secondRepairUser" title="维修人员2"
                        :content="getUserName(infoData.secondRepairUser)" />
                    <equipment-line v-if="infoData.threeRepairUser" title="维修人员3"
                        :content="getUserName(infoData.threeRepairUser)" />
                    <equipment-line v-if="infoData.fourRepairUser" title="维修人员4"
                        :content="getUserName(infoData.fourRepairUser)" />
                    <!--<equipment-line title="维修次数" :content="infoData.repairTimes + ''" />-->
                    <equipment-line title="维修描述" :content="descripitionMap[infoData.repairContent]" />
                    <equipment-line title="备注" :content="infoData.repairRemark" />
                    <view class="d-flex py3 border-bottom">
                        <view class="f-size-26 text-color-9 w200">图片</view>
                        <view class="f-size-26 text-color-3 d-flex">
                            <block v-for="(item, index) in repairImagesList" :key="index">
                                <u-image width="100" class="mr-2" :src="item" @click="handlePreRepair(index)"
                                    mode="widthFix"><u-loading slot="loading"></u-loading></u-image>
                            </block>
                        </view>
                    </view>
                </template>
            </view>

        </view>
        <!-- 派工详情 -->
        <view v-if="current == 2">
            <view v-if="dispatchList && dispatchList.length > 0">
                <view v-for="(item, index) in dispatchList" :key="index" class="mx3 my2 p3 bg-color-white"
                    style="border-radius: 16rpx">
                    <equipment-line title="派工人" :content="item.operatorName" />
                    <equipment-line title="派工时间" :content="formatTime(item.time)" />
                    <equipment-line title="派工备注" :content="item.remark" />
                    <equipment-line v-if="item.approverName" title="派工对象" :content="item.username" />
                </view>
            </view>
            <view v-else class="mx3 my2 p3 bg-color-white" style="border-radius: 16rpx; text-align: center; color: #999">
                暂无派工记录
            </view>
        </view>
        <!-- 转派详情 -->
        <view v-if="current == 3">
            <view v-if="transferList && transferList.length > 0">
                <view v-for="(item, index) in transferList" :key="index" class="mx3 my2 p3 bg-color-white"
                    style="border-radius: 16rpx">
                    <equipment-line title="转派人" :content="item.operatorName" />
                    <equipment-line title="转派时间" :content="formatTime(item.time)" />
                    <equipment-line title="转派备注" :content="item.remark" />
                    <equipment-line title="转派对象" :content="item.username" />
                    <equipment-line v-if="item.type === 'transfer'" title="审批状态"
                        :content="getTransferStatusText(item.status)" />
                    <equipment-line v-if="item.approverName" title="审批人" :content="item.approverName" />
                    <equipment-line v-if="item.approveTime" title="审批时间" :content="formatTime(item.approveTime)" />
                    <equipment-line v-if="item.approveRemark" title="审批意见" :content="item.approveRemark" />
                </view>
            </view>
            <view v-else class="mx3 my2 p3 bg-color-white" style="border-radius: 16rpx; text-align: center; color: #999">
                暂无转派记录
            </view>
        </view>
        <view v-if="current == 4">
            <view class="mx3 my2 p3 bg-color-white" style="border-radius: 16rpx">

                <template v-if="infoData">
                    <equipment-line title="验收开始时间" :content="infoData.checkStartTime" />
                    <equipment-line title="验收结束时间" :content="infoData.checkEndTime" />
                    <equipment-line title="维修人员" :content="infoData.checkUserName" />
                    <equipment-line title="验收描述" :content="infoData.checkContent" />
                </template>
            </view>

        </view>
        <view v-if="current == 5">
            <view class="mx3 my2 p3 bg-color-white" style="border-radius: 16rpx">
                <u-time-line>
                    <u-time-line-item>
                        <template v-slot:content>
                            <view>
                                <view class="u-order-desc">报修时间</view>
                                <view class="u-order-time">{{ infoData.applyTime }}</view>
                            </view>
                        </template>
                    </u-time-line-item>
                    <u-time-line-item>
                        <template v-slot:content>
                            <view>
                                <view class="u-order-desc">派工时间</view>
                                <view class="u-order-time">{{ (infoData.dispatchTime || infoData.applyTime) }}</view>
                            </view>
                        </template>
                    </u-time-line-item>
                    <u-time-line-item>
                        <template v-slot:content>
                            <view>
                                <view class="u-order-desc">维修开始时间</view>
                                <view class="u-order-time">{{ (infoData.repairActualStartTime || infoData.repairStartTime) ? (infoData.repairActualStartTime || infoData.repairStartTime) : '' }}
                                </view>
                            </view>
                        </template>
                    </u-time-line-item>
                    <u-time-line-item>
                        <template v-slot:content>
                            <view>
                                <view class="u-order-desc">维修结束时间</view>
                                <view class="u-order-time">{{ infoData.repairEndTime ? infoData.repairEndTime : '' }}
                                </view>
                            </view>
                        </template>
                    </u-time-line-item>
                    <u-time-line-item>
                        <template v-slot:content>
                            <view>
                                <view class="u-order-desc">验收开始时间</view>
                                <view class="u-order-time">{{ infoData.checkStartTime ? infoData.checkStartTime : '' }}
                                </view>
                            </view>
                        </template>
                    </u-time-line-item>
                    <u-time-line-item>
                        <template v-slot:content>
                            <view>
                                <view class="u-order-desc">验收结束时间</view>
                                <view class="u-order-time">{{ infoData.checkEndTime ? infoData.checkEndTime : '' }}
                                </view>
                            </view>
                        </template>
                    </u-time-line-item>

                </u-time-line>
            </view>
        </view>
        <!-- <view v-if="current == 5">
            <view v-for="(item, index) in dataReason" :key="index" class="mx3 my2 p3 bg-color-white"
                style="border-radius: 16rpx" @tap="handleEditReport(item)">
                <view>
                    <equipment-line title="分析时间" :content="item.analyzeTime" />
                    <equipment-line title="故障部位" :content="item.sbPartName" />
                    <equipment-line title="故障现象" :content="item.problemDesc" />
                    <equipment-line title="检查处理过程" :content="item.checkProcess" />
                    <equipment-line title="原因分析" :content="item.reasonAnalysis" />
                </view>

            </view>
        </view> -->
        <view class="p-fixed d-flex j-around a-center footer">
            <view class="common btn-primary" @tap="handleAdd" v-show="infoData.status ===
                2 ||
                infoData.status ===
                5">完成</view>
            <view class="common btn-primary" v-show="infoData.status === 1" @tap="handleDealEdit">接收
            </view>
            <view class="common btn-plain" v-show="!infoData.fourRepairUser && infoData.repairUserId"
                @tap="handleDetail">转派
            </view>
            <!-- 开始维修：与 PC 端一致，assistantStatus === init -->
            <view class="common btn-primary"
                v-if="infoData.status === 2 && $DictCache.VALUE.REPAIR_ASSISTANT_STATUS.init === infoData.assistantStatus"
                @tap="handleStartRepair">开始维修</view>
            <!-- 暂停维修：与 PC 端一致，assistantStatus === repair -->
            <view class="common btn-plain"
                v-if="infoData.status === 2 && $DictCache.VALUE.REPAIR_ASSISTANT_STATUS.repair === infoData.assistantStatus"
                @tap="handlePauseRepair">暂停</view>
            <!-- 继续维修：与 PC 端一致，assistantStatus === pause -->
            <view class="common btn-primary"
                v-if="infoData.status === 2 && $DictCache.VALUE.REPAIR_ASSISTANT_STATUS.pause === infoData.assistantStatus"
                @tap="handleContinueRepair">继续</view>
            <!-- 结束维修：与 PC 端一致，assistantStatus === repair -->
            <view class="common btn-plain"
                v-if="infoData.status === 2 && $DictCache.VALUE.REPAIR_ASSISTANT_STATUS.repair === infoData.assistantStatus"
                @tap="handleEndRepair">结束维修</view>
            <view class="common btn-primary" v-show="infoData.status === 3 ||
                infoData.status === 5" @tap="handleExamine">提交审核</view>
            <!-- <view class="common btn-plain" v-show="(dataReason === null) || (dataReason.length === 0)"
                @tap="handleEditReport()">填写维修报告</view> -->
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    name: '报修'
                },
                {
                    name: '维修'
                },
                {
                    name: '派工'
                },
                {
                    name: '转派'
                },
                {
                    name: '验收'
                },
                {
                    name: '时间轴'
                },
                // {
                //     name: '维修报告'
                // }
            ],
            current: 0,
            detailId: '',
            infoData: {},
            needStopMap: {},
            sourceMap: {},
            levelMap: {},
            statusMap: {},
            dispatchList: [],
            transferList: [],
            id: '',
            imagesList: [],
            repairImagesList: [],
            dataReason: [],
            zjList: [],
            now: Date.now(),
            timerInterval: null
        }
    },
    computed: {
        // 维修是否处于活跃计时状态（与 PC 端一致：assistantStatus === repair）
        isRepairTiming() {
            return this.infoData.status === 2
                && this.$DictCache.VALUE.REPAIR_ASSISTANT_STATUS.repair === this.infoData.assistantStatus
        },
        // 累计维修耗时展示
        repairDurationDisplay() {
            const AS = this.$DictCache.VALUE.REPAIR_ASSISTANT_STATUS
            if (!this.infoData.assistantStatus || AS.init === this.infoData.assistantStatus) {
                return this.infoData.repairMinutes || ''
            }
            if (this.infoData.status !== 2 || AS.end === this.infoData.assistantStatus) {
                return this.infoData.repairMinutes || ''
            }
            const accumulated = this.infoData.accumulatedRepairDuration || 0
            let totalMs = accumulated
            if (this.isRepairTiming) {
                const lastStart = new Date(this.infoData.repairStartTime).getTime()
                totalMs += (this.now - lastStart)
            }
            return this.formatDuration(totalMs)
        }
    },
    onShow() {
        if (this.infoData.id) {
            this.getDataReason()
        }
    },
    onLoad(options) {
        this.id = options.id
        this.initData()
        this.needStopMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.YES_NO)
        this.sourceMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_SOURCE)
        this.levelMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_LEVEL)
        this.statusMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_STATUS)
        this.descripitionMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.REPAIRE_ACTION)
        this.$Http
            .queryUserDept({
                deptCode: this.$DictCache.VALUE.SYS_DEPT_CODE.SYS_DEPT_CODE_XIAN_CHANG_WEI_XIU_ZU,
                userStatus: 1
            })
            .then((res) => {
                console.log(res.data);
                const temp = []
                res.data.forEach((item, index) => {
                    temp.push({
                        label: item.realName,
                        value: item.userId
                    })
                })
                this.zjList.push(...temp)
            });
        this.$Http
            .queryUserDept({
                deptCode: this.$DictCache.VALUE.SYS_DEPT_CODE.SYS_DEPT_CODE_CHANG_NEI_WEI_XIU_ZU,
                userStatus: 1
            })
            .then((res) => {
                console.log(res.data);
                const temp = []
                res.data.forEach((item, index) => {
                    temp.push({
                        label: item.realName,
                        value: item.userId
                    })
                })
                this.zjList.push(...temp)
            });
    },
    onUnload() {
        this.clearRepairTimer()
    },
    methods: {
        handlePre(index) {
            uni.previewImage({
                urls: this.imagesList,
                current: this.imagesList[index],
                success() { }
            })
        },
        handlePreRepair(index) {
            uni.previewImage({
                urls: this.repairImagesList,
                current: this.repairImagesList[index],
                success() { }
            })
        },
        handleDealEdit() {
            this.$Http
                .repairFormDeal({
                    id: this.infoData.id
                })
                .then(res => {
                    console.log(res)
                })
        },
        change(index) {
            this.current = index
        },
        handleDetail() {
            uni.navigateTo({
                url: '/pages/repair-detail/transfer?id=' + this.id
            })
        },
        // 提交审批验收
        handleExamine() {
            const that = this
            uni.showModal({
                title: '提示',
                content: '确认提交审核？',
                success: function (res) {
                    if (res.confirm) {
                        that.$Http
                            .examine({
                                id: that.id
                            })
                            .then(res => {
                                that.infoData.status = that.$DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.WAIT_SUBMIT
                                that.initData()
                                that.toastSuccess('已提交，请等待审核')
                            })
                    }
                }
            })
        },
        handleAdd() {
            uni.navigateTo({
                url: '/pages/service-add/service-add?id=' + this.id
            })
        },
        handleEditReport(item) {
            if (item) {
                uni.navigateTo({
                    url: `/pages/repair-reason/repair-reason-form?id=${item.id}`
                })
            } else {
                uni.navigateTo({
                    url: `/pages/repair-reason/repair-reason-form?sbId=${this.infoData.sbId}&repairId=${this.infoData.id}&no=${this.infoData.no}`
                })
            }
        },
        initData() {
            this.$Http
                .fetchRepairApplicationForm({
                    id: this.id
                })
                .then(res => {
                    console.log(res)
                    this.infoData = res.data
                    this.imagesList = res.data.applicationFileList.map(item => {
                        return this.$BaseTool.UserUtil.getFileUrl(item.url)
                    })
                    this.repairImagesList = res.data.repairFileList.map(item => {
                        return this.$BaseTool.UserUtil.getFileUrl(item.url)
                    })
                    this.dispatchList = JSON.parse(res.data.repairDispatchList || '[]')
                    this.transferList = JSON.parse(res.data.repairTransferList || '[]')
                    this.setupRepairTimer()
                    this.getDataReason()
                })
        },
        getUserName(userId) {
            var name = ''
            this.zjList.forEach(item => {
                if (item.value == userId) {
                    name = item.label
                }
            })
            return name
        },
        // 转派审批状态文字
        getTransferStatusText(status) {
            if (status === 'pending') return '待审批'
            if (status === 'rejected') return '已驳回'
            return '已通过'
        },
        // 格式化时间（ISO → YYYY-MM-DD HH:mm:ss）
        formatTime(time) {
            if (!time) return ''
            return this.$BaseTool.Date.formatter(time, 'YYYY-MM-DD HH:mm:ss')
        },
        getDataReason() {
            this.$Http.queryRepairReason({ repairId: this.infoData.id }).then(res => {
                this.dataReason = res.data
            })
        },
        // ========== 维修计时操作（与 PC 端限制条件保持同步） ==========
        handleStartRepair() {
            const that = this
            uni.showModal({
                title: '提示',
                content: '确认开始维修？',
                success: function (res) {
                    if (res.confirm) {
                        that.$Http.startRepair({ id: that.id }).then(() => {
                            that.infoData.assistantStatus = that.$DictCache.VALUE.REPAIR_ASSISTANT_STATUS.repair
                            that.$refs.uToast.show({ title: '已开始维修', type: 'success', icon: true })
                            that.initData()
                        })
                    }
                }
            })
        },
        handlePauseRepair() {
            const that = this
            uni.showModal({
                title: '提示',
                content: '确认暂停维修？',
                success: function (res) {
                    if (res.confirm) {
                        that.$Http.pauseRepair({ id: that.id }).then(() => {
                            that.infoData.assistantStatus = that.$DictCache.VALUE.REPAIR_ASSISTANT_STATUS.pause
                            that.$refs.uToast.show({ title: '已暂停维修', type: 'warning', icon: false })
                            that.initData()
                        })
                    }
                }
            })
        },
        handleContinueRepair() {
            const that = this
            uni.showModal({
                title: '提示',
                content: '确认继续维修？',
                success: function (res) {
                    if (res.confirm) {
                        that.$Http.continueRepair({ id: that.id }).then(() => {
                            that.infoData.assistantStatus = that.$DictCache.VALUE.REPAIR_ASSISTANT_STATUS.repair
                            that.$refs.uToast.show({ title: '已继续维修', type: 'success', icon: true })
                            that.initData()
                        })
                    }
                }
            })
        },
        handleEndRepair() {
            const that = this
            uni.showModal({
                title: '提示',
                content: '确认结束维修？',
                success: function (res) {
                    if (res.confirm) {
                        that.$Http.endRepair({ id: that.id }).then(() => {
                            that.infoData.assistantStatus = that.$DictCache.VALUE.REPAIR_ASSISTANT_STATUS.end
                            that.$refs.uToast.show({ title: '已结束维修', type: 'success', icon: true })
                            that.clearRepairTimer()
                            that.initData()
                        })
                    }
                }
            })
        },
        setupRepairTimer() {
            this.clearRepairTimer()
            if (this.isRepairTiming) {
                this.timerInterval = setInterval(() => {
                    this.now = Date.now()
                }, 1000)
            }
        },
        clearRepairTimer() {
            if (this.timerInterval) {
                clearInterval(this.timerInterval)
                this.timerInterval = null
            }
        },
        formatDuration(ms) {
            if (!ms || ms <= 0) return '0小时0分钟'
            const totalSeconds = Math.floor(ms / 1000)
            const hours = Math.floor(totalSeconds / 3600)
            const minutes = Math.floor((totalSeconds % 3600) / 60)
            const seconds = totalSeconds % 60
            if (hours > 0) {
                return hours + '小时' + minutes + '分钟' + seconds + '秒'
            }
            if (minutes > 0) {
                return minutes + '分钟' + seconds + '秒'
            }
            return seconds + '秒'
        }
    }
}
</script>

<style scoped lang="less">
page {
    background-color: #f4f4f4;
}

.container {
    padding-bottom: 160rpx;

    .footer {
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 10000;
        border-top: 1rpx solid #f4f4f4;
        padding: 16rpx 24rpx;
        // 兼容 iPhone 底部安全区
        padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(16rpx + env(safe-area-inset-bottom));

        .common {
            flex: 1;
            margin: 0 10rpx;
            height: 80rpx;
            line-height: 78rpx;
            text-align: center;
            font-size: 28rpx;
            border-radius: 40rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        // 主操作：实心
        .btn-primary {
            background-color: #0082ff;
            color: #fff;
        }

        // 辅助操作：描边
        .btn-plain {
            background-color: #fff;
            color: #0082ff;
            border: 1rpx solid #0082ff;
        }
    }

    .title {
        border-bottom: 1rpx solid #f4f4f4;
        color: #0082ff;
    }

    .img {
        width: 100rpx;
        height: 100rpx;
    }
}
</style>