SmartStorage/pages/newBuyDetail/newBuyDetail.vue

<template>
    <view>
        <view class="dataInfo">
            <view class="dataList" v-for="(item, index) in list" :key="index">
                <view class="info-upper">
                    <checkbox-group
                        @change="checkClick(item)"
                        style="margin-right: 15rpx"
                        v-show="item.status == '3' || item.status == '0'">
                        <checkbox :checked="item.checked" />
                    </checkbox-group>
                    <view class="details">
                        <view class="text">
                            <text
                                ><span
                                    style="padding-right: 20rpx; color: #a6a6a6"
                                    >类型名称</span
                                >{{ item.typeName }}</text
                            >
                            <text
                                ><span
                                    style="padding-right: 20rpx; color: #a6a6a6"
                                    >规格型号</span
                                >{{ item.specificationType }}</text
                            >
                            <text
                                ><span
                                    style="padding-right: 20rpx; color: #a6a6a6"
                                    >待入库数量</span
                                >{{ item.checkNum }}</text
                            >
                            <text
                                ><span
                                    style="padding-right: 20rpx; color: #a6a6a6"
                                    >机具编号</span
                                >{{
                                    item.maCode == null ? "无" : item.maCode
                                }}</text
                            >
                            <text
                                ><span
                                    style="padding-right: 20rpx; color: #a6a6a6"
                                    >机具状态</span
                                >{{ item.CNstatus }}</text
                            >
                        </view>
                    </view>
                </view>
                <view class="lower-btns">
                    <!-- <view
						style="background-color: #3888ff;"
					>
						<uni-icons style="color: #fff;" type="eye" size="36"></uni-icons>
						查看	
					</view> -->
                    <!-- <view
						style="background-color: #1bd30b;"
						@click="openPopup"
					>
						<uni-icons style="color: #fff;" type="cart" size="36"></uni-icons>
						入库
					</view> -->
                </view>
            </view>
        </view>
        <!-- <button @click="delCart">删除</button> -->
        <view class="buy">
            <view class="checked">
                <checkbox-group @tap="checkAll">
                    <checkbox :checked="allChecked" />
                </checkbox-group>
                <text>全选</text>
            </view>
            <view style="display: flex">
                <!-- <view class="total" style="margin-right: 15rpx;">
					<view class="bill" @click="bindCode">
						<text>绑定</text>
					</view>
				</view> -->
                <view class="total">
                    <view class="bill" @click="finishCart">
                        <text>审核</text>
                    </view>
                </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>
        <u-loading-page
            :loading="showLoading"
            color="#000"
            loading-text="提交中,请稍后..."></u-loading-page>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 10,
                pageTotal: 0,
                showLoading: false,
                taskId: "",
                allChecked: false,
                inputs: "",
                list: [],
                totalFine: "",
                totalGoods: [],
                scanType: "",
                scanRange: [
                    { text: "二维码", value: "1" },
                    { text: "RFID", value: "2" },
                ],
                subObj: "",
                codeList: [],
            };
        },
        methods: {
            // 单个商品的选择
            checkClick(item) {
                item.checked = !item.checked;
                if (!item.checked) {
                    this.allChecked = false;
                } else {
                    // 判断每一个商品是否是被选择的状态
                    const goods = this.list.every((item) => {
                        return item.checked === true;
                    });
                    if (goods) {
                        this.allChecked = true;
                    } else {
                        this.allChecked = false;
                    }
                }
            },
            //全选、全不选
            checkAll() {
                this.allChecked = !this.allChecked;
                console.log(this.list, "全选审核----");
                if (this.allChecked) {
                    this.list.map((item) => {
                        if (item.status == "3" || item.status == "0") {
                            item.checked = true;
                        }
                    });
                } else {
                    this.list.map((item) => {
                        if (item.status == "3" || item.status == "0") {
                            item.checked = false;
                        }
                    });
                }
            },
            modalConfirm() {
                this.subObj = {
                    taskId: this.taskId,
                    checkResult: "1",
                    inputRecordList: this.totalGoods,
                };
                console.log(this.subObj);
                this.subNewBuy(this.subObj);
            },
            modalReject() {
                this.subObj = {
                    taskId: this.taskId,
                    checkResult: "2",
                    inputRecordList: this.totalGoods,
                };
                console.log(this.subObj);
                this.subNewBuy(this.subObj);
            },
            finishCart() {
                let that = this;
                that.totalGoods = that.list
                    .filter((item) => {
                        return item.checked == true;
                    })
                    .map((subItem) => {
                        return {
                            typeId: subItem["typeId"],
                            maId: subItem["maId"],
                            maCode: subItem["maCode"],
                            inputNum: subItem["checkNum"],
                            companyId: subItem["companyId"],
                            manageType: subItem["manageType"],
                        };
                    });
                if (that.totalGoods.length == 0) {
                    uni.showToast({
                        icon: "none",
                        title: "未选中审核项！",
                    });
                } else {
                    const ifManage = that.totalGoods.every(
                        (item) => item.manageType != 0
                    );
                    console.log(ifManage);
                    if (ifManage) {
                        that.openPopup();
                    } else {
                        console.log(that.totalGoods);

                        // const ifCoded = that.totalGoods.every(
                        //     (item) => item.maCode != null
                        // );

                        let ifCoded = false;
                        that.totalGoods.forEach((e) => {
                            if (e.manageType == 0 && !e.maCode) {
                                ifCoded = true;
                            }
                        });
                        if (!ifCoded) {
                            that.openPopup();
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: "选中项中存在未编码的机具，无法审核！",
                            });
                        }
                    }
                    /* uni.showModal({
						title: '新购明细审核',
						content: '是否确定审核通过？',
						confirmText: '通过',
						// cancelText: '驳回',
						success: (res) => {
							if (res.confirm) {
								// 通过
								that.subObj = {
									taskId: that.taskId,
									checkResult: '1',
									inputRecordList: that.totalGoods
								}
								console.log(that.subObj);
								that.subNewBuy(that.subObj)
							} else if (res.cancel) {
								// 驳回
								that.subObj = {
									taskId: that.taskId,
									checkResult: '2',
									inputRecordList: that.totalGoods
								}
								console.log(that.subObj);
								// that.subNewBuy(that.subObj)
							}
						}
					}) */
                }
            },
            bindCode() {
                let that = this;
                that.codeList = that.list.filter((item) => {
                    return item.checked == true;
                });
                if (that.codeList.length > 1 || that.codeList.length == 0) {
                    uni.showToast({
                        icon: "none",
                        title: "一次只可选择一种机具进行绑定！",
                    });
                } else {
                    console.log(that.codeList);
                }
            },
            openPopup() {
                this.$refs.popup.open();
            },
            closePopup() {
                this.$refs.popup.close();
            },
            scanChange(e) {
                let that = this;
                console.log(e);
                if (e.detail.value == "1") {
                    that.closePopup();
                    that.scanType = "";
                    uni.scanCode({
                        success: (res) => {
                            console.log(res);
                            uni.navigateTo({
                                url: `/pages/newInAfterScan/newInAfterScan?result=${res.result}`,
                            });
                        },
                    });
                } else {
                    console.log("id");
                }
            },
            subNewBuy(obj) {
                let that = this;
                that.showLoading = true;
                that.$api.newInStore
                    .subNewBuy(obj)
                    .then((res) => {
                        console.log(res);
                        if (res.data.code == 200) {
                            that.showLoading = false;
                            uni.showToast({
                                icon: "none",
                                title: res.data.msg,
                                success: () => {
                                    that.closePopup();
                                    uni.navigateBack();
                                },
                            });
                        } else {
                            that.showLoading = false;
                            uni.showToast({
                                icon: "none",
                                title: res.data.msg,
                            });

                            setTimeout(() => {
                                uni.navigateBack();
                            }, 500);
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            fetchNewList() {
                let that = this;
                // 初始化请求新购入库详情
                that.$api.newInStore
                    .fetchNewBuyDetail({
                        pageNum: that.pageNum,
                        pageSize: that.pageSize,
                        taskId: that.taskId,
                    })
                    .then((res) => {
                        console.log("新购明细----", res);
                        if (res.data.code == 200) {
                            that.pageTotal = res.data.data.total;
                            res.data.data.rows.forEach((item) => {
                                if (item.status == "3" || item.status == "0")
                                    item.checked = false;
                                switch (item.status) {
                                    case "1":
                                        item.CNstatus = "已入库";
                                        break;
                                    case "2":
                                        item.CNstatus = "入库驳回";
                                        break;
                                    case "3":
                                        item.CNstatus = "待审核";
                                        break;
                                }
                            });
                            that.list = [...that.list, ...res.data.data.rows];
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: res.data.msg,
                            });
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
        },
        onLoad(params) {
            let that = this;
            console.log(params.taskId);
            that.taskId = params.taskId;
            that.list = [];
            that.fetchNewList();
        },
        onReachBottom() {
            if (this.list.length >= this.pageTotal) return;
            this.pageNum++;
            this.fetchNewList();
        },
    };
</script>

<style lang="scss">
    body {
        box-sizing: border-box;
        padding-bottom: 25%;
    }

    /deep/uni-checkbox .uni-checkbox-input {
        border-radius: 50%;
    }

    /deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
        border-color: #ddd;
        color: #fff !important;
        background-color: #2dcf8c !important;
    }

    /deep/uni-checkbox .uni-checkbox-input {
        border-color: #ddd;
    }

    /deep/uni-checkbox .uni-checkbox-input:hover {
        border-color: #ddd;
    }

    .search {
        padding-top: 20rpx;
    }

    .search .searchIput {
        background-color: #e6e6e6;
        width: 95%;
        margin: 0 auto;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 50rpx;
        padding: 0 32rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .search .searchIput input {
        font-size: 26rpx;
        width: 100%;
        color: grey;
    }

    .search .searchIput image {
        width: 34rpx;
        height: 34rpx;
    }

    .dataInfo {
        width: 95%;
        margin: 0 auto;
    }

    .dataInfo .dataList {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom: 2px solid #f1f1f1;
        padding: 10rpx 0;
    }

    .info-upper {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lower-btns {
        width: 100%;
        box-sizing: border-box;
        padding: 20rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .lower-btns > view {
        box-sizing: border-box;
        padding: 10rpx 20rpx;
        border-radius: 15rpx;
        color: #fff;
        font-size: 14px;
        margin-right: 15rpx;
    }

    .dataInfo .dataList .details {
        display: flex;
        align-items: center;
        flex: 1;
        font-size: 0;
    }

    .dataInfo .dataList .details .img image {
        width: 200rpx;
        height: 140rpx;
        padding: 0 20rpx;
    }

    .dataInfo .dataList .details .text text {
        color: #000;
        font-size: 27rpx;
        display: block;
        padding: 10rpx 0;
    }

    .dataInfo .dataList .details .text {
        color: red;
        font-size: 32rpx;
    }

    .dataInfo .dataList .action text {
        font-size: 25rpx;
        color: #000;
        border: 1px solid #c8c7cc;
        display: inline-block;
        line-height: 50rpx;
        width: 60rpx;
        text-align: center;
        box-sizing: border-box;
    }

    .dataInfo .dataList .action text:nth-child(2) {
        border-left: none;
        border-right: none;
    }

    .buy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 50%;
        bottom: 0;
        width: 95%;
        background-color: #fff;
        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>