SmartStorage/pages/exitMaterialDetail/exitMaterialDetail.vue

<template>
    <view>
        <view class="search-bar">
            <uni-easyinput
                prefixIcon="search"
                v-model="inputs"
                placeholder="请输入名称"></uni-easyinput>
        </view>
        <view class="dataInfo">
            <view
                class="dataList"
                v-for="(item, index) in searchData"
                :key="index">
                <!-- <checkbox-group @change="checkClick(item)">
					<checkbox :checked="item.checked" />
				</checkbox-group> -->
                <view class="details">
                    <!-- <view class="img">
						<image :src="item.url"></image>
					</view> -->
                    <view class="text">
                        <text>类型名称：{{ item.typeName }}</text>
                        <text>规格编号：{{ item.typeCode }}</text>
                        <text>退料数量：{{ item.num }}</text>
                    </view>
                </view>
                <!-- <view class="action">
					<text @click="reduce(item)">-</text>
					<text>{{item.offNum}}</text>
					<text @click="add(item)">+</text>
				</view> -->
            </view>
        </view>
        <!-- <view class="buy">
			<view class="checked">
				<checkbox-group @tap="checkAll">
					<checkbox :checked="allChecked" />
				</checkbox-group>
				<text>全选</text>
			</view>
			<view class="total">
				<view class="bill" @click="finishCart">
					<text>提交</text>
				</view>
			</view>
		</view> -->
    </view>
</template>
<script>
    import { basePath } from "../../public";
    export default {
        data() {
            return {
                iptVal: "",
                allChecked: false,
                inputs: "",
                list: [],
                totalFine: "",
                cartList: [],
                typeId: "",
            };
        },
        computed: {
            totalNum() {
                //总计
                var str = 0;
                for (var i = 0; i < this.searchData.length; i++) {
                    if (this.searchData[i].checked) {
                        str += this.searchData[i].num;
                    }
                }
                this.totalFine = str;
                return str;
            },
            searchData: function () {
                //模糊查询
                if (!this.inputs) {
                    return this.list;
                }
                return this.list.filter((item) => {
                    return item.typeName.includes(this.inputs);
                });
            },
        },
        methods: {
            iconClick() {
                console.log(this.iptVal);
            },
            add(item) {
                //加加
                let num = item.offNum;
                if (num >= item.num) {
                    uni.showToast({
                        icon: "none",
                        title: "退料数量不可大于当前在用量！",
                    });
                } else {
                    item.offNum = num + 1;
                }
            },
            reduce(item) {
                //减减
                let num = item.offNum;
                if (num > 1) {
                    num -= 1;
                } else if ((num = 1)) {
                    uni.showToast({
                        icon: "none",
                        title: "该器具无法再减少",
                    });
                }
                item.offNum = num;
            },
            // 单个商品的选择
            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;
                if (this.allChecked) {
                    this.list.map((item) => {
                        item.checked = true;
                    });
                } else {
                    this.list.map((item) => {
                        item.checked = false;
                    });
                }
            },
            finishCart() {
                let that = this;
                that.cartList = that.list.filter((item) => {
                    return item.checked == true;
                });
                if (that.cartList.length == 0) {
                    uni.showToast({
                        icon: "none",
                        title: "请选择退料项！",
                    });
                } else {
                    let subList = [];
                    for (let i = 0; i < that.cartList.length; i++) {
                        subList.push(that.cartList[i].offNum);
                    }
                    subList = subList.join(",");
                    console.log(subList, that.typeId);
                    // 提交退料清单
                    that.$api.exitMaterial
                        .subExitMaterial({
                            typeId: that.typeId,
                            num: subList,
                        })
                        .then((res) => {
                            console.log(res);
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                }
            },
        },
        onLoad(params) {
            let that = this;
            console.log(params.id);
            that.typeId = params.typeId;
            // 退料详情查看
            that.$api.exitMaterial
                .exitMaterialDetail({
                    id: params.id,
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        for (let i = 0; i < res.data.data.length; i++) {
                            // res.data.data[i].num = Number(res.data.data[i].num.split('.')[0])
                            res.data.data[i].offNum = 1;
                        }
                        console.log(res);
                        that.list = res.data.data;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    };
</script>

<style>
    .search-bar {
        width: 95%;
        margin: 20rpx auto;
    }

    /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;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2px solid #f1f1f1;
        padding: 25rpx 0;
    }

    .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: 23rpx;
        display: block;
        padding: 10rpx 0;
    }

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

    .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%;
        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;
    }
</style>