移库页面绘制

yyb

4 天以前 5359fd3a4cd761bfec6ea9f92a459a8b88b815f1

移库页面绘制

 pages/wareHouse/moveWareHouse/index.vue

@@ -3,546 +3,241 @@
        <view class="movewarehouse-index-bg" />
        <u-navbar title="移库" :background="background" :border-bottom="false" :title-bold="true" title-color="#000"
            back-icon-color="#000" />
        <view class="movewarehouse-index-search">
            <!--<u-search v-model="keywords" shape="square" bg-color="rgba(250,252,255,0.36)" :show-action="false" placeholder="请输入库位号" @clear="search" @custom="search" @search="search">
            </u-search>-->
            <view class="movewarehouse-index-search-view">
                <view class="movewarehouse-index-search-view-item">
                    <text class="item-one">至库位号</text>
                    <text class="item-one-content">{{ tolocationNo }}</text>
        <view class="packing-registration-param">
            <view class="packing-registration-param-view">
                <view class="packing-registration-param-item param-extra">
                    <view class="packing-registration-param-item-left">
                        <text class="item-one">库位</text>
                    </view>
                    <view class="packing-registration-param-item-right">
                        <text class="item-one item-two">{{registerInfo.storageLocation}}</text>
                    </view>
                </view>
                <view class="movewarehouse-index-search-view-item" @click="seachLocationNo()">
                    <text class="item-two">请选择</text>
                    <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
                <view class="packing-registration-param-item param-extra">
                    <view class="packing-registration-param-item-left">
                        <text class="item-one">{{`移库记录(${registerInfo.num}条)：`}}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="wrap">
            <scroll-view class="movewarehouse-index-scroll-list" scroll-y="true">
                <u-cell-group class="movewarehouse-index-scroll-list-group" :border="false">
                    <view class="content" v-for="(item, index) in list" :key="item.id" :index="index">
                        <view class="content-header">
                            <view class="header-item">
                                <view class="content-header-icon-one"></view>
                                <view class="content-header-title">{{ item.partNo }}</view>
        <view class="popup-container" v-if="show">
            <view class="popup-content">
                <view class="packing-registration-param">
                    <view class="packing-registration-param-view">
                        <view class="packing-registration-param-item param-extra">
                            <view class="packing-registration-param-item-left">
                                <text class="item-one">批号</text>
                            </view>
                            <view class="header-item">
                                <view class="content-header-icon-two"></view>
                                <view class="content-header-title">{{ item.partBatchNo }}</view>
                            </view>
                            <view class="header-item-toolbar" @click="deleteHandle(item)">
                                <view class="header-item-toolbar-del-icon">

                                </view>
                                <view class="header-item-toolbar-del-text">
                                    删除
                                </view>
                            <view class="packing-registration-param-item-right">
                                <text class="item-one item-two">{{ 111 }}</text>
                            </view>
                        </view>
                        <!--<view class="row-img" @click="deleteHandle(item)">
                            <u-image width="18px" height="18px" src="@/static/custom/delete.png"></u-image>
                        </view>-->
                        <view class="content-body">
                            <view class="row-list">
                                <view class="_label">
                                    零件名称：
                                </view>
                                <view class="_content">
                                    {{ item.partName }}
                                </view>
                        <view class="packing-registration-param-item param-extra">
                            <view class="packing-registration-param-item-left">
                                <text class="item-one">零件描述</text>
                            </view>
                            <view class="row-list">
                                <view class="_label">
                                    从库位号：
                                </view>
                                <view class="_content">
                                    {{ item.locationNo }}
                                </view>
                            <view class="packing-registration-param-item-right">
                                <text class="item-one item-two">{{ 111 }}</text>
                            </view>
                            <view class="row-list">
                                <view class="_label">
                                    至库位号：
                                </view>
                                <view class="_content">
                                    {{ item.arriveLocationNo }}
                                </view>
                        </view>
                        <view class="packing-registration-param-item param-extra">
                            <view class="packing-registration-param-item-left">
                                <text class="item-one">WDR</text>
                            </view>
                            <view class="row-list">
                                <view class="_label">
                                    可用库存：
                                </view>
                                <view class="_content">
                                    <text class="_content-text">{{ item.availableStockQuantity }}</text>
                                    ({{ item.unit }})
                                </view>
                            <view class="packing-registration-param-item-right">
                                <text class="item-one item-two">{{ 111 }}</text>
                            </view>
                            <view class="row-list">
                                <view class="_label">
                                    移库库存：
                                </view>
                                <view class="_content _input">
                                    <u-input placeholder="请输入移库数量" v-model="item.moveQty" type="digit"></u-input>
                                    <view class="edit_icon"></view>
                                </view>
                        </view>
                        <view class="packing-registration-param-item param-extra">
                            <view class="packing-registration-param-item-left">
                                <text class="item-one">现有数量</text>
                            </view>
                            <view class="packing-registration-param-item-right">
                                <text class="item-one item-two">{{ 111 }}</text>
                            </view>
                        </view>
                        <view class="packing-registration-param-item param-extra">
                            <view class="packing-registration-param-item-left">
                                <text class="item-one">当前库位</text>
                            </view>
                            <view class="packing-registration-param-item-right">
                                <text class="item-one item-two">{{ 111 }}</text>
                            </view>
                        </view>
                    </view>
                </u-cell-group>
            </scroll-view>
            <scan></scan>
            <view class="new-form-footer" v-if="list.length > 0">
                <u-button class="btn" type="primary" @click="submit">提交</u-button>
                    <view class="person-btn-view">
                        <u-button type="primary" shape="square" text="取消" style="height: 80rpx; line-height: 80rpx"
                            size="medium" @click="closePopup()">取消</u-button>
                        <u-button type="primary" shape="square" text="确定" style="height: 80rpx; line-height: 80rpx"
                            size="medium" @click="confirmPopup()">确定</u-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import scan from "@/components/scan/scan.vue";
import content_bg from '@/static/custom/moveWareHouse/locNoBg.png'
export default {
    components: {
        scan
    },
    data() {
        return {
            background: {
                backgroundImage: `url(${content_bg})`,
                backgroundAttachment: 'fixed',
                backgroundSize: '100% auto',
                backgroundRepeat: 'no-repeat',
    import scan from "@/components/scan/scan.vue";
    import content_bg from "@/static/custom/moveWareHouse/locNoBg.png";
    export default {
        components: {
            scan,
        },

        data() {
            return {
                background: {
                    backgroundImage: `url(${content_bg})`,
                    backgroundAttachment: "fixed",
                    backgroundSize: "100% auto",
                    backgroundRepeat: "no-repeat",
                },
                registerInfo: {
                    storageLocation: "LG001",
                    num: 0,
                },
                show: true, // 控制弹窗显示隐藏的变量
            };
        },
        onLoad() {},
        onShow() {
            let that = this;

            uni.$off("scan"); // 每次进来先 移除全局自定义事件监听器
            uni.$on("scan", function(data) {
                console.log("onscan");
                //扫码成功后的回调，你可以写自己的逻辑代码在这里
                console.log("扫码结果：", data.code);
            });
        },
        onNavigationBarButtonTap(e) {
            uni.scanCode({
                success: (res) => {
                    try {
                        const result = JSON.parse(res.result);
                    } catch (e) {}
                },
            });
        },
        methods: {
            confirmPopup() {
                // 处理确认逻辑
                this.show = false;
            },
            list: [],
            tolocationNo: "",
            keywords: ''
        };
    },
    onLoad() {
        // this.loadList("221206000739N");
        // let data = '{"part_no":"88.118.1/A0047954","lot_batch_no":"221112000082N","qty_arrived":0.5,"wdr":"221112000082N"}'
        // let data = '221206000739N'
        // let sn = ''
        // if (data.indexOf('{') >= 0) {
        //     //大标签二位码
        //     sn = JSON.parse(data).lot_batch_no
        // } else {
        //     //小标签条码
        //     sn = data
        // }
        // console.log(sn);
    },
    onShow() {

        let that = this

        uni.$off('scan') // 每次进来先 移除全局自定义事件监听器
        uni.$on('scan', function (data) {
            console.log('onscan');
            //扫码成功后的回调，你可以写自己的逻辑代码在这里
            console.log('扫码结果：', data.code);

            if (data.code != "" && (that.tolocationNo == "")) {
                uni.showToast({
                    title: '请选择至库位号',
                    icon: 'none'
                })
                return
            }

            let sn = ''
            if (data.code.indexOf('{') >= 0) {
                //大标签二位码
                let snNoIndex = data.code.indexOf('sn_no')
                if (snNoIndex > -1) {
                    sn = JSON.parse(data.code).sn_no
                } else {
                    sn = JSON.parse(data.code).lot_batch_no
                }
            } else {
                //小标签条码
                sn = data.code
            }

            //判断数组中是否存在  SN 是否已经存在
            let initList = that.list.filter(item => item
                .partBatchNo == sn)
            if (initList.length > 0) {
                uni.showToast({
                    title: "SN:" + sn + ",已存在,请选择另一个SN号",
                    icon: "none"
                });
                return
            }

            that.loadList(sn);
        })
    },
    onNavigationBarButtonTap(e) {
        uni.scanCode({
            success: res => {
                try {
                    const result = JSON.parse(res.result)

                } catch (e) { }
            }
        });
    },
    methods: {
        //至库位
        seachLocationNo() {
            uni.navigateTo({
                url: '/pages/wareHouse/moveWareHouse/locNoList'
            })
            closePopup() {
                this.show = false; // 关闭弹窗
            },
        },
        loadList(sanCode) {
            uni.showLoading({
                mask: true,
                title: "加载中",
            });
            let that = this

            if (sanCode != "") {
                let data = {
                    sn: sanCode
                }

                //判断数组中是否存在 至库位号 SN 
                let initList = that.list.filter(item => item.arriveLocationNo == that.tolocationNo).filter(item => item
                    .partBatchNo == sanCode)
                if (initList.length > 0) {
                    uni.showToast({
                        title: "库位号:" + that.tolocationNo + ",SN:" + sanCode + ",已经扫过码",
                        icon: "none"
                    });
                    return
                }

                // 查询移库信息
                that.$u.api.pigxWareHouse.list(data).then(res => {
                    let reList = []
                    reList = res.data

                    if (reList.length == 0) {
                        uni.showToast({
                            title: "库位号:" + that.tolocationNo + ",SN:" + sanCode + ",未扫到移库信息",
                            icon: "none"
                        });
                    } else {
                        for (let i = 0; i < reList.length; i++) {
                            if (reList[i].locationNo !== that.tolocationNo) {
                                let item = {
                                    id: reList[i].id,
                                    partNo: reList[i].partNo,
                                    partName: reList[i].partName,
                                    partBatchNo: reList[i].partBatchNo,
                                    ifsBatchNo: reList[i].ifsBatchNo,
                                    unit: reList[i].unit,
                                    locationNo: reList[i].locationNo,
                                    availableStockQuantity: reList[i].availableStockQuantity,
                                    arriveLocationNo: that.tolocationNo,
                                    moveQty: 0
                                }
                                that.list.push(item)
                            }
                        }
                    }

                    uni.hideLoading();
                })
            }
        },
        //至库位号设置
        setNo(no) {
            this.tolocationNo = no
        },
        deleteHandle(obj) {
            let that = this
            uni.showModal({
                title: '提示',
                content: '此操作将删除该移库信息, 是否继续?',
                success: function (res) {
                    if (res.confirm) {
                        that.list.map((item, index) => {
                            if (obj.id == item.id) {
                                that.list.splice(index, 1)
                            }
                        });
                    }
                }
            });
        },
        submit() {
            let that = this

            that.list.map((item) => {


                if (item.moveQty <= 0) {
                    uni.showToast({
                        title: '请移库数量必须大于0',
                        icon: "none"
                    });
                    return
                }

                if (item.moveQty > item.availableStockQuantity) {
                    uni.showToast({
                        title: '移库数量不能大于可用库存数量',
                        icon: "none"
                    });
                    return
                }
            });


            let subList = []
            that.list.map((item) => {

                let sub = {
                    stockId: item.id,
                    arriveLocationNo: item.arriveLocationNo,
                    moveQty: item.moveQty
                }

                subList.push(sub)

            });

            that.$u.api.pigxWareHouse.addList(subList).then(res => {

                if (res.code == 0) {
                    uni.showModal({
                        title: '提示',
                        content: '提交成功',
                        showCancel: false,
                        success: function () {
                            that.list = []
                            that.tolocationNo = ""
                        }
                    })
                } else {
                    uni.showModal({
                        title: '提示',
                        content: '提交失败',
                        showCancel: false,
                        success: function () {

                        }
                    })
                }

            })


        },
    }
};
    };
</script>
<style lang="scss" scoped>
.movewarehouse-index-bg {
    background-color: #F6F9FF;
    background-image: url('~@/static/custom/moveWareHouse/locNoBg.png');
    // background: linear-gradient(180deg,rgba(206,227,254,1),rgba(206,227,254,1) 20%,rgba(206,227,254,0.5) 40%,rgba(206,227,254,0.25) 60%,rgba(206,227,254,0.08) 80%,rgba(206,227,254,0));
    padding: 0 20rpx;
    background-attachment: fixed;
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

.movewarehouse-index-search {
    padding: 40rpx 30rpx 20rpx 30rpx;
}

.movewarehouse-index-search-view {
    height: 66rpx;
    border: 1px solid #ADC8E4;
    border-radius: 8rpx;
    background: rgba(250, 252, 255, 0.36);
    line-height: 66rpx;
    padding-left: 33rpx;
    padding-right: 10rpx;
    display: flex;
    justify-content: space-between;

    .movewarehouse-index-search-view-item {
        .item-one {
            font-size: 30rpx;
            color: #283E65;
        }

        .item-one-content {
            margin-left: 10rpx;
            color: #909399;
            font-size: 26rpx;
        }

        .item-two {
            font-size: 30rpx;
            color: #A6B4CC;
        }
    }
}

.wrap .movewarehouse-index-scroll-list {
    height: calc(100vh - var(--window-top) - var(--window-bottom) - 378rpx);
    width: 100%;
}

.movewarehouse-index-scroll-list-group {
    ::v-deep .u-cell-item-box {
        background-color: rgba(250, 252, 255, 0.36) !important;
        padding: 0rpx 30rpx;
    .person-btn-view {
        display: flex;
        justify-content: space-between;
        margin-top: 300rpx;
    }

    .content {
        font-size: 12px;
        background-color: #FFFFFF;
        box-sizing: border-box;
        border-radius: 10rpx;
        margin: 0rpx 0rpx 16rpx;
        height: 432rpx;
        padding: 10rpx 20rpx;
        box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(127, 127, 127, 0.1) !important;
        position: relative;
    .popup-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .content-header {
            .header-item {
                height: 50rpx;
                display: flex;
                align-items: center;
    .popup-content {
        width: 600rpx;
        height: 600rpx;
        background-color: #fff;
        border-radius: 8px;
        z-index: 10;
        /* 确保内容在蒙版之上 */
    }

                .content-header-icon-one {
                    background-image: url('~@/static/custom/moveWareHouse/label-icon-1.png');
                    background-size: 100% auto;
                    background-repeat: no-repeat;
                    height: 28rpx;
                    width: 28rpx;
                }
    .movewarehouse-index-bg {
        background-color: #f6f9ff;
        background-image: url("~@/static/custom/moveWareHouse/locNoBg.png");
        // background: linear-gradient(180deg,rgba(206,227,254,1),rgba(206,227,254,1) 20%,rgba(206,227,254,0.5) 40%,rgba(206,227,254,0.25) 60%,rgba(206,227,254,0.08) 80%,rgba(206,227,254,0));
        padding: 0 20rpx;
        background-attachment: fixed;
        background-size: 100% auto;
        background-repeat: no-repeat;
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        z-index: -1;
    }

                .content-header-icon-two {
                    background-image: url('~@/static/custom/moveWareHouse/header_icon.png');
                    background-size: 100% auto;
                    background-repeat: no-repeat;
                    height: 28rpx;
                    width: 28rpx;
                }
    .packing-registration-param {
        padding: 40rpx 30rpx 10rpx 30rpx;

                .content-header-title {
                    margin-left: 11rpx;
                    font-size: 26rpx;
                    font-weight: bold;
                    color: #333333;
                }
            }
        .packing-registration-param-title {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 30rpx;

            .header-item-toolbar {
                position: absolute;
                background-image: url('~@/static/custom/moveWareHouse/del-icon.png');
                background-size: 100% auto;
                background-repeat: no-repeat;
                height: 60rpx;
                width: 140rpx;
                right: 0;
                top: 0;
                display: flex;
                justify-content: flex-end;
                padding-top: 10rpx;
                padding-right: 18rpx;

                .header-item-toolbar-del-icon {
                    background-image: url('~@/static/custom/moveWareHouse/icon_dele.png');
                    background-size: 100% auto;
                    background-repeat: no-repeat;
                    height: 25rpx;
                    width: 22rpx;
                    margin-top: 5rpx;
                }

                .header-item-toolbar-del-text {
                    margin-left: 7rpx;
                    height: 23rpx;
                    font-size: 24rpx;
                    color: #FFFFFF;
                }
            .title-label {
                margin-left: 14rpx;
                font-size: 34rpx;
                font-weight: bold;
                color: #283e65;
            }
        }

        .content-body {
            height: 300rpx;
            background: #F5F9FF;
        .packing-registration-param-view {
            height: 177rpx;
            background-color: #fff;
            border-radius: 10rpx;
            padding: 25rpx 23rpx;
            padding: 0rpx 23rpx;
            margin-bottom: 30rpx;

            .row-list {
                height: 50rpx;
                display: flex;
                flex-direction: row;
                padding: 0px;
                align-items: center;
                justify-content: space-between;
            }

            .row-list ._label {
                display: flex;
                color: #666666;
                font-size: 26rpx;
                align-items: center;
                width: 170rpx;
            }

            .row-list ._content {
                text-align: right;
                color: #909399;
                font-size: 24rpx;

                ._content-text {
                    color: #214ded;
                }
            }

            .row-list ._input {
            .packing-registration-param-item {
                height: 90rpx;
                border: 1px solid #adc8e4;
                line-height: 90rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #4FA0FF;
                height: 56rpx;
                border: none;

                .edit_icon {
                    background-image: url('~@/static/custom/finishProductIn/icon_edit.png');
                    background-size: 100% auto;
                    background-repeat: no-repeat;
                    height: 26rpx;
                    width: 26rpx;
                .packing-registration-param-item-left {
                    .item-one {
                        font-size: 30rpx;
                        color: #666666;
                    }
                }

                ::v-deep .uni-input-input {
                    color: #D35651;
                .packing-registration-param-item-right {
                    display: flex;
                    justify-content: space-between;

                    .item-one {
                        font-size: 30rpx;
                        color: #333333;
                        margin-right: 6rpx;
                    }

                    .item-two {
                        font-size: 30rpx;
                        color: #a6b4cc;
                        margin-right: 6rpx;
                    }

                    .item-three {
                        font-size: 30rpx;
                        color: #214ded;
                        margin-right: 6rpx;
                    }
                }
            }

            .param-extra {
                border-bottom: 1px solid #ededed;
            }
        }
    }
}

.new-form-footer {
    display: flex;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding-bottom: 14rpx;

    .btn {
        flex: 1;
        margin: 10rpx;
        background: #214DED;
        box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(4, 49, 212, 0.3);
        font-weight: bold;
        color: #FEFEFE;
        font-family: PingFang SC;
    }
}
</style>
</style>