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

<template>
    <view class="container">
        <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.repairStartTime" />
                    <equipment-line title="维修结束时间" :content="infoData.repairEndTime" />
                    <equipment-line title="维修耗时" :content="infoData.repairMinutes + ''" />
                    <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-for="(item, index) in dispatchList" :key="index" class="mx3 my2 p3 bg-color-white"
                style="border-radius: 16rpx">
                <view>
                    <equipment-line title="转派人" :content="item.username" />
                    <equipment-line title="转派时间" :content="item.time" />
                    <equipment-line title="转派备注" :content="item.repairDispatchRemark" />
                </view>

            </view>

        </view>
        <view v-if="current == 3">
            <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 == 4">
            <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.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.repairStartTime ? 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>
            <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: '维修报告'
                // }
            ],
            current: 0,
            detailId: '',
            infoData: {},
            needStopMap: {},
            sourceMap: {},
            levelMap: {},
            statusMap: {},
            dispatchList: [],
            id: '',
            imagesList: [],
            repairImagesList: [],
            dataReason: [],
            zjList: []
        }
    },
    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)
            });
    },
    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() {
            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.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.getDataReason()
                })
        },
        getUserName(userId) {
            var name = ''
            this.zjList.forEach(item => {
                if (item.value == userId) {
                    name = item.label
                }
            })
            return name
        },
        getDataReason() {
            this.$Http.queryRepairReason({ repairId: this.infoData.id }).then(res => {
                this.dataReason = res.data
            })
        }
    }
}
</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>