#

whycq

2024-07-02 e7508ca6436d1707d115e931fd96cab20fdf5d7b

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
<template>
    <view>
        <view class="code">
            <uni-search-bar :focus="searchFocus" v-model="searchValue"  @input="searchInput()" 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 class="list-left-top">
                    <view>工作号4099</view>
                    <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
                        <text style="flex: 1;">工作状态</text>
                        <text>201.生成入库任务ID</text>
                    </view>
                    <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
                        <text style="flex: 1;">入出库类型</text>
                        <text>1.入库</text>
                    </view>
                    <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
                        <text style="flex: 1;">优先级</text>
                        <text>300</text>
                    </view>
                    <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
                        <text style="flex: 1;">源库位</text>
                        <text>CS-101-001-01@1</text>
                    </view>
                    <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
                        <text style="flex: 1;">目标库位</text>
                        <text>YZ-015-001-01@1</text>
                    </view>
                    <view style="display: flex;border-bottom: 1px solid #FFF;margin: 10rpx;">
                        <text style="flex: 1;">料箱码</text>
                        <text>1112223335</text>
                    </view>
                </view>
                <!-- 左下 -->
                <view class="list-left-bottom">
                    <button size="mini">明细</button>
                    <button size="mini">完成</button>
                    <button size="mini">取消</button>
                </view>
            </view>
            <!-- 右侧 -->
            <!-- <view class="list-right"></view> -->
        </view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                searchValue: '',
                searchFocus: true,
                dataList: [
                    {},
                    {},
                    {}
                ]
            }
        },
        methods: {
            // 搜索框输入
            searchInput() {
                
            },
            // 重置搜索框
            clear() {
                
            }
        }
    }
</script>
 
<style>
    .code {
        background-color: #d9d9d9;
        z-index: 99;
        position: sticky;
        top: 80rpx;
        left: 0;
    }
    .list {
        margin: 20rpx;
        background-color: #fff;
        background-color: #157ec1;
        color: #FFF;
        border-radius: 20rpx;
        border: 1px solid #eeeeee;
        display: flex;
        position: relative;
    }
    .list-left {
        flex: 1;
        position: relative;
    }
    .list-left-top {
        /* border-bottom: 1px solid #eeeeee; */
        padding: 20rpx;
    }
    .list-left-bottom {
        border-bottom: 1px solid #eeeeee;
        padding: 10rpx;
        display: flex;
        justify-content: space-around;
    }
    .list-right {
        width: 100rpx;
        border-left: 1px solid #eeeeee;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>