xiamen-sb-uniapp/pages/repair-check/repair-detail.vue

<template>
    <view>
        <u-toast ref="uToast" />
        <view class="d-flex px3 py2">
            <view class="top d-flex a-center bg-color-white flex1 one-ellipsis">
                <view class="img" style="cursor:pointer">
                    <image
                        :src="
                            imgSrc
                                ? imgSrc
                                : $BaseTool.UserUtil.getFileUrl(sbInfo.qrCode)
                        "
                        mode="widthFix"
                    ></image>
                </view>
                <view class="pl-3">
                    <view class="f-size-36 text-color-3 one-ellipsis">{{
                        sbInfo.name
                    }}</view>
                    <view
                        class="d-flex f-size-28 f-weight-6 f-wrap"
                        style="margin: 20rpx 0"
                    >
                    </view>
                    <view class="d-flex">
                        <text
                            class="f-size-26 mr-3 state-r main-color-bg text-color-white"
                        >{{ statusMap[infoData.status] }}</text
                        >
                        <!-- <text class="f-size-26 state-g">报修</text> -->
                    </view>
                </view>
            </view>
        </view>
        <view class="divider"></view>
        <!-- 基本信息 -->
        <view class="mt-3 px3">
            <view
                class="f-size-30 f-weight-bold py2 border-bottom"
            >报修信息</view
            >
            <view
                class="mx3 my2 p3 bg-color-white"
                style="border-radius: 16rpx; border: 1px solid #eee"
            >
                <equipment-line title="设备编号" :content="sbInfo.no" />
                <equipment-line title="设备型号" :content="sbInfo.model" />
                <equipment-line title="报修单编号" :content="infoData.no" />
                <equipment-line title="使用位置" :content="sbInfo.cph" />
                <equipment-line title="报修人" :content="infoData.actualUser" />
                <equipment-line title="故障描述" :content="infoData.content" />
                <equipment-line title="报修时间" :content="infoData.applyTime" />
                <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="$BaseTool.UserUtil.getFileUrl(item)" @click="handlePre(index)" mode="widthFix"><u-loading slot="loading"></u-loading></u-image>
                        </block>
                    </view>
                </view>
            </view>
        </view>

        <view class="divider"></view>
        <view class="mt-3 px3" v-show="infoData.status>3">
            <view
                class="f-size-30 f-weight-bold py2 border-bottom"
            >维修信息</view
            >
            <view
                class="mx3 my2 p3 bg-color-white"
                style="border-radius: 16rpx; border: 1px solid #eee"
            >
                <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 title="维修描述" :content="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 imagesList" :key="index">
                            <u-image width="100" class="mr-2" :src="$BaseTool.UserUtil.getFileUrl(item)" @click="handlePre(index)" mode="widthFix"><u-loading slot="loading"></u-loading></u-image>
                        </block>
                    </view>
                </view>
            </view>
        </view>
        <view class="divider"></view>
        <view class="mt-3 px3">
            <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" />
                    <!-- 转派审批状态：pending-待审批 approved-已通过 rejected-已驳回 -->
                    <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="item.approveTime" />
                    <equipment-line v-if="item.approveRemark" title="审批意见" :content="item.approveRemark" />
                </view>
            </view>
        </view>

        <view class="divider"></view>
        <view class="px3">
            <view
                class="f-size-30 f-weight-bold py2 border-bottom"
            >维修处理</view
            >
            <u-grid :col="3" :border="false">
                <u-grid-item v-if="infoData.status === 1" @tap="handleReceive()">
                    <view class="iconfont icon-baoxiu" style="color: #0f6fb9"></view>
                    <view class="grid-text">接收</view>
                </u-grid-item>
                <u-grid-item  v-if="infoData.status === 2"  @tap="handleFinish()">
                    <view class="iconfont icon-start main-color-text"></view>
                    <view class="grid-text">完成</view>
                </u-grid-item>
                <u-grid-item v-if="infoData.status === 3 || infoData.status === 5" @tap="handleExamine()">
                    <view class="iconfont icon-start main-color-text"></view>
                    <view class="grid-text">提交审核</view>
                </u-grid-item>
                <!--                <u-grid-item v-if="infoData.status != 7" @tap="handleStop()">
                    <view class="iconfont icon-stop1 main-color-text"></view>
                    <view class="grid-text">派工</view>
                </u-grid-item>-->
                <!--                <u-grid-item v-if="infoData.status != 2" @tap="handleStart()">
                    <view class="iconfont icon-start main-color-text"></view>
                    <view class="grid-text">更换备件</view>
                </u-grid-item>
                <u-grid-item v-if="infoData.status != 7" @tap="handleStop()">
                    <view class="iconfont icon-stop1 main-color-text"></view>
                    <view class="grid-text">原因分析</view>
                </u-grid-item>-->
            </u-grid>
        </view>

        <view class="divider"></view>
        <!--        <view class="px3">
            <my-card
                title="备件更换历史"
                @handleLubrication="handleModel"
            ></my-card>
            <my-card
                title="原因分析记录"
                @handleLubrication="handleUse"
            ></my-card>
        </view>
        <view class="divider"></view>-->
    </view>
</template>

<script>

export default {
    data() {
        return {
            detailId: '',
            infoData: {},
            sbInfo: {},
            statusMap: {},
            imgSrc: '',
            dispatchList: [],
            id: '',
            imagesList: []
        };
    },
    onLoad(options) {
        this.detailId = options.detailId;
        this.$Http
            .fetchRepairApplicationForm({
                id: this.detailId
            })
            .then((res) => {
                console.log(res);
                this.infoData = res.data;
                this.imagesList = res.data.applicationFileList.map(item => {
                    return this.$BaseTool.UserUtil.getFileUrl(item.url);
                })
                console.log(this.imagesList);
                this.dispatchList = JSON.parse(res.data.repairDispatchList)
                this.$Http
                    .fetchSbInfo({
                        id: res.data.sbId
                    })
                    .then((res) => {
                        this.sbInfo = res.data;
                        if (this.infoData.sbFileList != null) {
                            this.imgSrc = this.$BaseTool.UserUtil.getFileUrl(this.infoData.sbFileList[0].url)
                        } else {
                            this.imgSrc = this.$BaseTool.UserUtil.getFileUrl(this.infoData.qrCode)
                        }
                        uni.setNavigationBarTitle({
                            title: this.infoData.name
                        });
                    });
            });

        this.statusMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_STATUS
        );
    },
    methods: {
        // 转派记录审批状态文字：老数据无 status 字段时按已通过展示（早期转派无审批流程）
        getTransferStatusText(status) {
            if (status === 'pending') return '待审批'
            if (status === 'rejected') return '已驳回'
            return '已通过'
        },
        handlePre(index) {
            uni.previewImage({
                urls: this.imagesList,
                current: this.imagesList[index],
                success() {

                }
            });
        },
        // 接收
        handleReceive() {
            var that = this;
            uni.showModal({
                title: '提示',
                content: '确认接收该维修单？',
                success: function (res) {
                    if (res.confirm) {
                        that.$Http
                            .repairFormDeal({
                                id: that.detailId
                            })
                            .then((res) => {
                                that.infoData.status = $DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.PROCESSING
                                that.$refs.uToast.show({
                                    title: '已接收，请及时完成维修',
                                    type: 'default',
                                    icon: false
                                });
                            });
                    }
                }
            });
        },
        // 提交审批验收
        handleExamine() {
            var that = this;
            uni.showModal({
                title: '提示',
                content: '确认提交审核？',
                success: function (res) {
                    if (res.confirm) {
                        that.$Http
                            .examine({
                                id: that.detailId
                            })
                            .then((res) => {
                                that.infoData.status = $DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.PROCESSING
                                that.$refs.uToast.show({
                                    title: '已提交，请等待审核',
                                    type: 'default',
                                    icon: false
                                });
                            });
                    }
                }
            });
        },
        // 完成维修任务
        handleFinish() {
            uni.navigateTo({
                url: '/pages/service-add/service-add?id=' + this.detailId
            })
        },
        handleStart() {
            this.infoData.status = 2;
            var that = this;
            this.$Http.updateSbInfo(this.infoData).then((res) => {
                that.$refs.uToast.show({
                    title: '已启用',
                    type: 'default',
                    icon: false
                });
            });
        },
        handleStop() {
            this.infoData.status = 7;
            var that = this;
            this.$Http.updateSbInfo(this.infoData).then((res) => {
                that.$refs.uToast.show({
                    title: '已停用',
                    type: 'default',
                    icon: false
                });
            });
        }
    }
};
</script>

<style lang="less">
.iconfont {
    font-size: 50rpx;
}

.col2 view:first-child {
    // width: 130rpx;
}

.col2 view:last-child {
    flex: 1;
}

.top {
    .img {
        width: 168rpx;
        height: 168rpx;
        border-radius: 50%;

        image {
            width: 168rpx;
            height: 168rpx;
            border-radius: 50%;
            background-color: #eee;
        }
    }
}

.d-flex.mb-2 {
    align-items: center;
}
.state-r {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
}
.state-g {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    background-color: #e7e8f2;
    color: #949dad;
}
</style>