#
whycq
2024-03-20 cea197ee03add9a3279bc65d005f4f56fdab43e0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<template>
    <view>
        <view class="code">
            <uni-search-bar :focus="matFocus" v-model="matnr"  @input="matInput()" ma
                maxlength="500" ancel="cancel" @clear="clear" placeholder="输入 / 扫描商品">
            </uni-search-bar>
        </view>
        <view class="list" v-for="(item,i) in dataList">
            <view class="list-left">
                <view>编号:{{item.matnr}}</view>
                <view>名称:{{item.maktx}}</view>
                <view>规格:{{item.specs}}</view>
                <view>数量:{{item.anfme}}</view>
                <view class="card-id">{{i + 1}}</view>
            </view>
            <view class="list-right">
                <label @click="checkboxChange(item)">
                    <checkbox :value="item.orderNo" color="#FFCC33" style="transform:scale(0.7)" /><text></text>
                </label>
            </view>
        </view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                matFocus: true,
                matnr: '',
                checck: true,
                dataList: [
                    {
                        orderNo: 'cg0931241',
                        matnr: 'cg0931241',
                        maktx: '你好',
                        anfme: 10,
                        specs: '10-z'
                    },
                    {
                        orderNo: 'cg0931242',
                        matnr: 'cg0931242',
                        maktx: '哈哈',
                        anfme: 10,
                        specs: '10-z'
                    },
                    {
                        orderNo: 'cg0931243',
                        matnr: 'cg0931243',
                        maktx: '哈哈',
                        anfme: 10,
                        specs: '10-z'
                    },
                    {
                        orderNo: 'cg0931244',
                        matnr: 'cg0931244',
                        maktx: '辣椒',
                        anfme: 10,
                        specs: '10-z'
                    },
                    {
                        orderNo: 'cg0931245',
                        matnr: 'cg0931245',
                        maktx: '44',
                        anfme: 10,
                        specs: '10-z'
                    },
                    {
                        orderNo: 'cg0931246',
                        matnr: 'cg0931246',
                        maktx: '41',
                        anfme: 10,
                        specs: '10-z'
                    }
                ],
                oldDataList: [],
                newDataList: []
            }
        },
        onShow() {
            this.oldDataList = [...this.dataList]
        },
        methods: {
            matInput() {
                let count = 0
                let sign = 0
                this.dataList = [...this.oldDataList]
                this.newDataList = []
                this.searchEnd()
                for (let k in this.dataList) {
                    if (!this.dataList[k].matnr.includes(this.matnr)) {
                        count++;
                    } else {
                        this.newDataList.push(this.dataList[k])
                    }
                }
                if (this.matnr != '') {
                    for (let j in this.dataList) {
                        if (!this.dataList[j].maktx.includes(this.matnr)) {
                        } else {
                            for (let i in this.newDataList) {
                                if (this.newDataList[i].matnr ==  this.dataList[j].matnr) {
                                    sign++
                                }
                            }
                            if (sign == 0) {
                                this.newDataList.push(this.dataList[j])
                            }
                        }
                    }
                }
                this.dataList = this.newDataList
            },
            searchEnd() {
                
                
            },
            checkboxChange(e) {
                let items = this.dataList,
                values = e.orderNo;
                if (e.checked) {
                    this.$set(e,'checked',false)
                } else {
                    this.$set(e,'checked',true)
                }
            },
            clear() {
                this.matnr = ''
                this.dataList = [...this.oldDataList]
            }
        }
    }
</script>
 
<style>
    .code {
        background-color: #d9d9d9;
    }
    .list {
        margin: 20rpx;
        
        background-color: #fff;
        border-radius: 20rpx;
        border: 1px solid #eeeeee;
        display: flex;
        position: relative;
    }
    .card-id {
        position: absolute;
        right: 10rpx;
        top: 5rpx;
        height: 30rpx;
        line-height: 30rpx;
        width: 30rpx;
        text-align: center;
        color: #eeeeee;
        background-color: #ddd844;
        border-radius: 50%;
        font-size: 10px;
    }
    .list-left {
        flex: 1;
        padding: 20rpx;
        position: relative;
    }
    .list-right {
        width: 100rpx;
        border-left: 1px solid #eeeeee;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>