SmartStorage/pages/fixDetail/fixDetail.vue

<template>
    <view>
        <view
            class="single-fetch"
            v-for="(fetch, index) in fetchList"
            :key="index"
            @click="seeDetail(fetch)">
            <view>
                <span>类型名称</span>
                <h4>{{ fetch.typeName }}</h4>
            </view>
            <view>
                <span>规格型号</span>
                <h4>{{ fetch.type }}</h4>
            </view>
            <view>
                <span>申请数量</span>
                <h4>{{ fetch.repairNum }}</h4>
            </view>
            <view>
                <span>已维修数量</span>
                <h4>{{ fetch.repairedNum }}</h4>
            </view>
            <view>
                <span>报废数量</span>
                <h4>{{ fetch.scrapNum }}</h4>
            </view>
            <view v-show="fetch.code != ''">
                <span>设备编号</span>
                <h4>{{ fetch.code == null ? "暂无" : fetch.code }}</h4>
            </view>
            <view>
                <span>维修时间</span>
                <h4>{{ fetch.updateTime }}</h4>
            </view>
        </view>
        <view class="btm-sub">
            <button @click="finishFix" :disabled="!btnStatus">维修完成</button>
        </view>
        <uni-popup ref="popup" type="center" :mask-click="false">
            <view class="popup">
                <view class="pop-top">
                    <uni-icons
                        style="color: #aaaaaa; font-weight: bold"
                        type="closeempty"
                        @click="closePopup">
                    </uni-icons>
                </view>
                <h5
                    style="
                        width: 85%;
                        margin: 2vh auto;
                        font-weight: normal;
                        text-align: center;
                    ">
                    请选择维修类型
                </h5>
                <view class="select-area">
                    <uni-data-checkbox
                        v-model="fixType"
                        :localdata="fixRange"></uni-data-checkbox>
                </view>
                <view class="btn-area">
                    <view style="border: 1px solid #e7e7e7" @click="closePopup">
                        取消
                    </view>
                    <view
                        style="background-color: #3988ff; color: #fff"
                        @click="confirmType">
                        确认
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    import { basePath } from "../../public";
    export default {
        data() {
            return {
                fetchList: [],
                fixType: "",
                fixRange: [
                    { text: "内部维修", value: "1" },
                    { text: "返厂维修", value: "2" },
                    { text: "待报废", value: "3" },
                ],
                id: "",
                taskId: "",
                maId: "",
                typeId: "",
                ifNo: "",
                btnStatus: "",
                idList: [],
                initTaskId: "",
            };
        },
        methods: {
            seeDetail(info) {
                console.log(info);
                if (
                    Number(info.repairedNum) + Number(info.scrapNum) !=
                    Number(info.repairNum)
                ) {
                    this.$refs.popup.open();
                    this.id = info.id;
                    this.taskId = info.taskId;
                    this.maId = info.maId;
                    this.typeId = info.typeId;
                    if (info.code == "" || info.code == null) {
                        this.ifNo = 0;
                    } else {
                        this.ifNo = 1;
                    }
                }
            },
            closePopup() {
                this.$refs.popup.close();
            },
            confirmType() {
                console.log(this.fixType);
                switch (this.fixType) {
                    case "1":
                        this.jumpUrl(
                            "innerFix",
                            this.id,
                            this.taskId,
                            this.maId,
                            this.typeId,
                            this.ifNo
                        );
                        break;
                    case "2":
                        this.jumpUrl(
                            "returnFix",
                            this.id,
                            this.taskId,
                            this.maId,
                            this.typeId,
                            this.ifNo
                        );
                        break;
                    case "3":
                        this.jumpUrl(
                            "waitCrash",
                            this.id,
                            this.taskId,
                            this.maId,
                            this.typeId,
                            this.ifNo
                        );
                        break;
                }
            },
            jumpUrl(path, id, taskId, maId, typeId, ifNo) {
                uni.navigateTo({
                    url: `/pages/${path}/${path}?id=${id}&taskId=${taskId}&maId=${maId}&typeId=${typeId}&ifNo=${ifNo}`,
                });
                this.closePopup();
                this.fixType = "";
            },
            finishFix() {
                let that = this;
                that.idList = [];
                for (let i = 0; i < that.fetchList.length; i++) {
                    that.idList.push(that.fetchList[i].id);
                }
                // 维修完成
                that.$api.fix
                    .completeFix(that.idList)
                    .then((res) => {
                        console.log(res);
                        if (res.data.code == 200) {
                            uni.showToast({
                                icon: "none",
                                title: res.data.msg,
                            });

                            setTimeout(() => {
                                uni.navigateBack();
                            }, 500);
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            initFixList() {
                let that = this;
                that.$api.fix
                    .fixDetail({
                        taskId: this.initTaskId,
                    })
                    .then((res) => {
                        console.log(res);
                        if (res.data.code == 200) {
                            if (res.data.data.length == 0) {
                                that.btnStatus = false;
                                uni.showToast({
                                    icon: "none",
                                    title: "未查询到相关数据！",
                                });
                            } else {
                                that.fetchList = res.data.data;
                                // 判断按钮是否启用
                                that.btnStatus = that.fetchList.every(
                                    (item) =>
                                        item.repairNum ==
                                        item.repairedNum + item.scrapNum
                                );
                                console.log(!that.btnStatus);
                            }
                        } else {
                            that.btnStatus = false;
                            uni.showToast({
                                icon: "none",
                                title: res.data.msg,
                            });
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
        },
        onLoad(params) {
            let that = this;
            console.log(params.id);
            that.initTaskId = params.id;
            // 获取维修任务机具列表
        },
        onShow() {
            this.initFixList();
        },
    };
</script>

<style lang="scss">
    body {
        box-sizing: border-box;
        padding-bottom: 10vh;
    }
    .single-fetch {
        width: 100%;
        box-sizing: border-box;
        padding: 20rpx 35rpx;
        border-bottom: 1px solid #dddddd;
        view {
            display: flex;
            align-items: center;
            margin-bottom: 25rpx;
            span {
                color: #a7a7a7;
                padding-right: 20rpx;
            }
            h4 {
                font-size: 14px;
                font-weight: normal;
            }
        }
        view:last-child {
            margin-bottom: 0;
        }
    }
    .btm-sub {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 20rpx 40rpx;
    }
    .popup {
        width: 90vw;
        height: 30vh;
        background-color: #fff;
        border-radius: 15rpx;
        overflow: hidden;
        background: linear-gradient(#d9e7fe, #fff, #fff, #fff);
        .pop-top {
            width: 100%;
            height: 5vh;
            box-sizing: border-box;
            padding: 0 25rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .select-area {
            width: 95%;
            margin: 3vh auto;
            .uni-data-checklist .checklist-group[data-v-84d5d996] {
                justify-content: center;
            }
        }
        .btn-area {
            width: 60%;
            display: flex;
            margin: 0 auto;
            justify-content: space-around;
            align-items: center;
            view {
                box-sizing: border-box;
                padding: 10rpx 30rpx;
                border-radius: 15rpx;
                font-size: 14px;
            }
        }
    }
</style>