SmartStorage/pages/repairTestInStoreDetail/repairTestInStoreDetail.vue

<template>
    <view>
        <view
            class="single-fetch"
            v-for="(fetch, index) in fetchList"
            :key="index">
            <checkbox-group
                @change="checkClick(fetch)"
                v-show="fetch.status == '进行中'">
                <checkbox :checked="fetch.checked" />
            </checkbox-group>
            <view class="slots">
                <view>
                    <span>类型名称</span>
                    <h4>{{ fetch.typeName2 }}</h4>
                </view>
                <view>
                    <span>规格型号</span>
                    <h4>{{ fetch.typeName }}</h4>
                </view>
                <view>
                    <span>申请数量</span>
                    <h4>{{ fetch.repairNum }}</h4>
                </view>
                <view>
                    <span>设备编号</span>
                    <h4>{{ fetch.maCode }}</h4>
                </view>
                <view>
                    <span>入库时间/状态</span>
                    <h4>
                        {{
                            fetch.status == "已入库"
                                ? fetch.updateTime
                                : fetch.status
                        }}
                    </h4>
                </view>
            </view>
        </view>
        <!-- <view class="btm-exam">
			<view 
				class="exam"
				@click="exam"
			>
				审核
			</view>
		</view> -->
        <view class="buy" v-show="status == '入库进行中'">
            <view class="checked">
                <checkbox-group @tap="checkAll">
                    <checkbox :checked="allChecked" />
                </checkbox-group>
                <text>全选</text>
            </view>
            <view class="total">
                <view
                    class="bill"
                    @click="finishCart"
                    v-if="
                        store.includes('warehousing:repair:auditing') ||
                        store.includes('*:*:*')
                    ">
                    <text>审核</text>
                </view>
            </view>
        </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"
                        @click="closePopup">
                    </uni-icons>
                </view>
                <h4
                    style="
                        width: 85%;
                        margin: 2vh auto;
                        font-weight: normal;
                        text-align: center;
                    ">
                    是否通过审批？
                </h4>
                <view class="select-area">
                    <view @click="modalConfirm">通过</view>
                    <view @click="modalReject">驳回</view>
                    <!-- <uni-forms ref="examForm" :modelValue="examFormData" :rules="rules" label-position="top">
						<uni-forms-item name="ifPass" required label="是否通过" label-width="150">
							<uni-data-select
							  v-model="examFormData.ifPass"
							  :localdata="ifPassRange"
							  :clear="false"
							  @change="ifPassChange"
							></uni-data-select>
						</uni-forms-item>
						<uni-forms-item required v-show="examFormData.ifPass == '1'" name="noPassReason" label="不通过原因" label-width="150">
							<uni-easyinput type="textarea" v-model="examFormData.noPassReason" placeholder="请输入内容"></uni-easyinput>
						</uni-forms-item>
						<button class="submit-btn" @click="formSubmit">确认</button>
					</uni-forms> -->
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    import store from "../../store/user";
    export default {
        data() {
            return {
                fetchList: [],
                allChecked: false,
                inStoreList: [],
                taskId: "",
                status: "",
                store: store.state.permissions || [],
            };
        },
        methods: {
            checkClick(item) {
                item.checked = !item.checked;
                if (!item.checked) {
                    this.allChecked = false;
                } else {
                    // 判断每一个商品是否是被选择的状态
                    const goods = this.fetchList.every((item) => {
                        return item.checked === true;
                    });
                    if (goods) {
                        this.allChecked = true;
                    } else {
                        this.allChecked = false;
                    }
                }
            },
            //全选、全不选
            checkAll() {
                this.allChecked = !this.allChecked;
                if (this.allChecked) {
                    this.fetchList.map((item) => {
                        item.checked = true;
                    });
                } else {
                    this.fetchList.map((item) => {
                        item.checked = false;
                    });
                }
            },
            finishCart() {
                let that = this;
                that.inStoreList = that.fetchList
                    .filter((item) => {
                        return item.checked == true;
                    })
                    .map((subItem) => {
                        return {
                            taskId: that.taskId,
                            id: subItem["id"],
                            type: subItem["manageType"],
                            maId: subItem["maId"],
                            typeId: subItem["typeId"],
                            remark: subItem["remark"],
                            repairNum: subItem["repairNum"],
                        };
                    });
                if (that.inStoreList.length == 0) {
                    uni.showToast({
                        icon: "none",
                        title: "未选中审核项！",
                    });
                } else {
                    that.openPopup();
                    /* uni.showModal({
						title: '确认审核',
						content: '是否通过审核？',
						confirmText: '通过',
						cancelText: '驳回',
						success: (res) => {
							if (res.confirm) {
								that.inStoreList.forEach((item) => {
									item.checkType = 1
								})
								console.log(that.inStoreList);
								that.subInStore(that.inStoreList)
							} else if (res.cancel) {
								that.inStoreList.forEach((item) => {
									item.checkType = 2
								})
								console.log(that.inStoreList);
								that.subInStore(that.inStoreList)
							}
						}
					}) */
                }
            },
            subInStore(obj) {
                let that = this;
                // 通过审核或驳回
                that.$api.repairTestInStore
                    .processOrReject({
                        params: JSON.stringify(obj),
                    })
                    .then((res) => {
                        console.log(res);
                        if (res.data.code == 200) {
                            uni.showToast({
                                icon: "none",
                                title: res.data.msg,
                                success: () => {
                                    that.closePopup();
                                    /* uni.redirectTo({
									url: '/pages/repairTestInStore/repairTestInStore'
								}) */
                                    uni.navigateBack();
                                },
                            });
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: res.data.msg,
                            });
                        }
                    });
            },
            openPopup() {
                this.$refs.popup.open();
            },
            closePopup() {
                this.$refs.popup.close();
            },
            modalConfirm() {
                this.inStoreList.forEach((item) => {
                    item.checkType = 1;
                });
                console.log(this.inStoreList);
                this.subInStore(this.inStoreList);
            },
            modalReject() {
                this.inStoreList.forEach((item) => {
                    item.checkType = 2;
                });
                console.log(this.inStoreList);
                this.subInStore(this.inStoreList);
            },
        },
        onLoad(params) {
            let that = this;
            console.log(params);
            that.status = params.taskStatus;
            that.taskId = params.taskId;
            // 获取修试入库明细
            that.$api.repairTestInStore
                .repairTestInStoreDetail(
                    {
                        taskId: params.taskId,
                    },
                    null
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        for (let i = 0; i < res.data.data.length; i++) {
                            res.data.data[i].checked = false;
                            if (res.data.data[i].maCode == null) {
                                res.data.data[i].maCode = "暂无";
                            }
                        }
                        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;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #dddddd;
        .slots {
            display: flex;
            flex-direction: column;
            margin-left: 30rpx;
            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-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;
        }
    }

    .buy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 50%;
        bottom: 0;
        width: 95%;
        transform: translate(-50%, 0);
    }

    .buy .checked {
        display: flex;
        align-items: center;
    }

    .buy .checked text {
        font-size: 25rpx;
        color: #000;
        padding: 0 12rpx;
    }

    .buy .total {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .buy .total .price {
        padding-right: 20rpx;
    }

    .buy .total .price text {
        font-size: 27rpx;
        color: #c8c7cc;
        display: inline-block;
    }

    .buy .total .price text:last-child {
        color: red;
        font-weight: bold;
    }

    .buy .total .bill text {
        font-size: 25rpx;
        color: #fff;
        display: inline-block;
        background-color: red;
        line-height: 70rpx;
        width: 150rpx;
        text-align: center;
    }

    .popup {
        width: 80vw;
        height: 20vh;
        background-color: #fff;
        border-radius: 15rpx;
        overflow: hidden;
        background: linear-gradient(#d9e7fe, #fff, #fff, #fff);
    }

    .popup > .pop-top {
        width: 100%;
        height: 5vh;
        box-sizing: border-box;
        padding: 0 25rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .popup > .select-area {
        width: 85%;
        margin: 40rpx auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .popup > .select-area > view {
        box-sizing: border-box;
        font-size: 30rpx;
        padding: 12rpx 24rpx;
        background-color: #3788ff;
        color: #fff;
        border-radius: 20rpx;
    }
</style>