把点击过的每一项筛选出去

16 篇文章 0 订阅
3 篇文章 0 订阅

<template>
    <view class="brand">
        <view v-for="(item,index) in subList" :key="index" class="brand_item">
            <view class="brandList_left">
                <u-form labelPosition="top" :model="item" >
                    <u-form-item label="*品牌" prop="brand" :borderBottom="false">
                        <u-input v-model="item.brand" disabledColor="#ffffff" placeholder="请选择" disabled
                            @click="showBrandList(index)"></u-input>
                        <u-icon slot="right" name="arrow-down"></u-icon>
                    </u-form-item>
                    <view class="num">
                        组件可用库存(块):{{item.usableStocks}}
                    </view>
                    <u-form-item label="*数量(块)" prop="brandNum" :borderBottom="false">
                        <u-input v-model="item.useCount" :border="false" placeholder="请输入" @input='change' @blur='blur'  type="number"></u-input>
                    </u-form-item>
                </u-form>
            </view>
            <view class="brand_icon">
                <u-icon v-if="index>=1" name="minus-circle-fill" color="red"  size="48" @click="handleMinus(index,'minus')"></u-icon>
                <u-icon v-else name="plus-circle-fill" color="#2979ff" size="48" @click="handlePlus(index,'plus')"></u-icon>
            </view>
        </view>
        <u-action-sheet :list="curBrandList" v-model="showBrand" @close="showBrand = false"
            @click="brandSelect($event)">
        </u-action-sheet>
    </view>
</template>

<script>
    export default {
        props: {
            brand: {
                type: Array,
                default:()=>{
                    return []
                },
            },
            subList: {
                type: Array,
                default:()=>{
                    return []
                },
            }
        },
        data() {
            return {
                brandModel: {
                    brand: '',
                    brandNum: ''
                },
                showBrand: false,
                brandIndex:-1,
                brandList:[],
                brandListOld:[],    
                type:'',
                rules: {
                    brand: [{
                        required: true,
                        message: '请选择职业',
                        trigger: ['change', 'blur']
                    }],
                    brandNum: [{
                        required: true,
                        message: '请输入',
                        trigger: ['change', 'blur']
                    }]
                }
            }
        },
        computed: {
            //把每一项点击过的筛选出去
            curBrandList() {
                return this.brand.filter(item=>{
                    return this.subList.map((v,i)=>{
                        if (i == this.brandIndex){
                            return ''
                        }else{
                            return v.brand
                        }
                    }).indexOf(item.text) == -1
                })
            }
        },
        methods: {
            brandSelect(index) {
                let list = this.curBrandList
                this.subList[this.brandIndex].brand =  list[index].text
                this.subList[this.brandIndex].usableStocks =  list[index].usableStocks
            },
            handlePlus(index,type){
                console.log(index,type)
                this.type=type     
                // console.log(this.brand)
                this.subList.push({
                    brand: '',
                    useCount: ''
                })
            
            },
            handleMinus(index,type){
                console.log(index,type)
                this.type=type
                this.subList.splice(index,1)
                
            },
            showBrandList(index){
                this.brandIndex = index
                this.showBrand = true
            },
            change(e){    
                console.log(e)
            },
            blur(e){
                this.$emit('handleInput',e)
            }
        
        },
        mounted() {
        
        }
    }
</script>

<style scoped lang="scss">
    .brand {
        box-sizing: border-box;
        width: 100%;
        // display: flex;
        // align-items: center;


        .brand_item {
            margin-bottom: 32rpx;
            position: relative;
        }

        .brandList_left {
            width: 90%;
            border: 2rpx solid #EDEDF2;
            padding: 0 32rpx;
            border-radius: 16rpx;
            
        }

        /deep/ .u-form-item--right__content {
            border: 2rpx solid rgba(0, 0, 0, 0.15);
            border-radius: 32rpx;
            padding: 0 24rpx;
        }

        .num {
            color: #1993D0;
            font-size: 24rpx;
        }

        .brand_icon {
            position: absolute;
            right: 0;
            top: 50%;
        }
    }
</style>
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值