SmartStorage/pages/exitExamDetail/exitExamDetail.vue

<template>
    <view>
        <view
            class="single-fetch"
            v-for="(fetch, index) in fetchList"
            :key="index">
            <view>
                <span>类型名称</span>
                <h4>{{ fetch.typeName }}</h4>
            </view>
            <view>
                <span>规格型号</span>
                <h4>{{ fetch.typeCode }}</h4>
            </view>
            <view>
                <span>申请数量</span>
                <h4>{{ fetch.num }}</h4>
            </view>
            <text
                v-show="fetch.manageType == 2"
                class="see-item"
                @click="openPopup(fetch.maTypeDetails)">
                查看配件
            </text>
        </view>
        <uni-popup ref="popup" type="center" :mask-click="false">
            <view class="popup">
                <view class="pop-top">
                    <h4>查看配件</h4>
                    <uni-icons
                        style="color: #aaaaaa; font-weight: bold"
                        type="closeempty"
                        size="20"
                        @click="closePopup">
                    </uni-icons>
                </view>
                <view class="item-detail">
                    <view
                        class="single-item"
                        v-for="(item, index) in maList"
                        :key="index">
                        <view>
                            <h4>序号</h4>
                            <span>{{ index + 1 }}</span>
                        </view>
                        <view>
                            <h4>类型名称</h4>
                            <span>{{ item.typeName }}</span>
                        </view>
                        <view>
                            <h4>规格型号</h4>
                            <span>{{ item.typeModelName }}</span>
                        </view>
                        <view>
                            <h4>单位</h4>
                            <span>{{ item.unitName }}</span>
                        </view>
                        <view>
                            <h4>预领数量</h4>
                            <span>{{ item.partNum }}</span>
                        </view>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                fetchList: [],
                maList: [],
                examFormData: {
                    ifPass: "",
                    noPassReason: "",
                },
                ifPassRange: [
                    { text: "是", value: "0" },
                    { text: "否", value: "1" },
                ],
                rules: {
                    ifPass: {
                        rules: [
                            {
                                required: true,
                                errorMessage: "请选择是否通过！",
                            },
                        ],
                    },
                },
            };
        },
        methods: {
            openPopup(list) {
                this.maList = list;
                this.$refs.popup.open();
            },
            closePopup() {
                this.$refs.popup.close();
            },
            formSubmit() {
                let that = this;
                that.$refs.examForm.validate().then((formData) => {
                    console.log(formData);
                    that.$refs.popup.close();
                });
            },
            ifPassChange(e) {
                let that = this;
                console.log(e);
                if (e == 1) {
                    that.rules = {
                        ifPass: {
                            rules: [
                                {
                                    required: true,
                                    errorMessage: "请选择是否通过！",
                                },
                            ],
                        },
                        noPassReason: {
                            rules: [
                                {
                                    required: true,
                                    errorMessage: "请填写不通过原因！",
                                },
                            ],
                        },
                    };
                } else {
                    that.examFormData.noPassReason = "";
                    that.rules = {
                        ifPass: {
                            rules: [
                                {
                                    required: true,
                                    errorMessage: "请选择是否通过！",
                                },
                            ],
                        },
                    };
                }
            },
        },
        onLoad(params) {
            let that = this;
            console.log(params.id);
            // 初始化获取退料审批明细
            that.$api.exitExam
                .exitExamDetail({
                    id: params.id,
                })
                .then((res) => {
                    console.log(res);
                    if (res.data.code == 200) {
                        for (let i = 0; i < res.data.data.length; i++) {
                            // res.data.data[i].num = res.data.data[i].num.split('.')[0]
                        }
                        that.fetchList = res.data.data;
                        console.log(that.fetchList);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    };
</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;
        }
        .see-item {
            width: 30%;
            box-sizing: border-box;
            padding: 5rpx 10rpx;
            border-radius: 15rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #3788ff;
            color: #fff;
            font-size: 16px;
            font-weight: normal;
        }
    }
    .btm-exam {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 20rpx 40rpx;
        display: flex;
        justify-content: flex-end;
        border-top: 2px solid #f6f8ff;
        .exam {
            box-sizing: border-box;
            padding: 10rpx 50rpx;
            border-radius: 30rpx;
            background-color: #3788ff;
            font-size: 14px;
            color: #fff;
        }
    }
    .popup {
        width: 80vw;
        height: 60vh;
        background-color: #fff;
        border-radius: 15rpx;
        overflow: hidden;
        background: linear-gradient(#d9e7fe, #fff, #fff, #fff);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .pop-top {
            width: 100%;
            height: 5vh;
            box-sizing: border-box;
            padding: 0 25rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .item-detail {
            flex: 1;
            overflow-y: auto;
            font-size: 14px;
            box-sizing: border-box;
            padding: 25rpx;
            .single-item {
                border-bottom: 1px solid #dddddd;
                box-sizing: border-box;
                padding: 25rpx 0;
                view {
                    width: 100%;
                    margin-bottom: 10rpx;
                    display: flex;
                    align-items: center;
                    h4 {
                        width: 35%;
                        color: #a7a7a7;
                        font-weight: normal;
                    }
                }
                view:last-child {
                    margin-bottom: 0;
                }
            }
            .single-item:last-child {
                border-bottom: none;
            }
        }
    }
</style>