<template>  
 | 
    <u-popup :show="show" position="bottom" :round="10" closeable @close="show=false">  
 | 
        <div class="content">  
 | 
            <div :class="{ 'content_top': status }" class="content_search">  
 | 
                <v-Search ref="V" @searchInput="searchInput" @submit="submit" :isShow="false" placeholder="搜索工装编码">  
 | 
                </v-Search>  
 | 
                <template v-if="classification">  
 | 
                    <div class="content_search_x"></div>  
 | 
                    <v-LableSelection :TagList="tagList" :isShow="false" @change="clickTag"></v-LableSelection>  
 | 
                </template>  
 | 
            </div>  
 | 
            <div class="content_total">共{{page.total}}条数据</div>  
 | 
            <div class="content_list">  
 | 
                <u-list>  
 | 
                    <u-list-item v-for="(item, i) in list" :key="i">  
 | 
                        <div class="content_list_item" @click="jump(item)">  
 | 
                            <div class="content_list_item_status success" v-if="item.smodelLabel === Attribute.HG">  
 | 
                                [{{item.smodelCode}}]</div>  
 | 
                            <div class="content_list_item_status warning" v-else-if="item.smodelLabel === Attribute.BL">  
 | 
                                [{{item.smodelCode}}]</div>  
 | 
                            <div class="content_list_item_status serious" v-else-if="item.smodelLabel === Attribute.BF">  
 | 
                                [{{item.smodelCode}}]</div>  
 | 
                            <div class="content_list_item_status black" v-else-if="item.smodelLabel === Attribute.HH">  
 | 
                                [{{item.smodelCode}}]</div>  
 | 
                            <div class="content_list_item_name">{{item.cmodel1BigName}}-{{item.code}}</div>  
 | 
                        </div>  
 | 
                    </u-list-item>  
 | 
                </u-list>  
 | 
            </div>  
 | 
        </div>  
 | 
    </u-popup>  
 | 
</template>  
 | 
  
 | 
<script>  
 | 
    import vSearch from '@/components/Search.vue'  
 | 
    import vLableSelection from '@/components/LabelSelection.vue'  
 | 
    import {  
 | 
        Attribute  
 | 
    } from '@/common/config.js'  
 | 
    export default {  
 | 
        name: "Tooling",  
 | 
        components: {  
 | 
            vSearch,  
 | 
            vLableSelection  
 | 
        },  
 | 
        data() {  
 | 
            return {  
 | 
                show: false,  
 | 
                classification: false,  
 | 
                attribute: '',  
 | 
                tagList: [],  
 | 
                statusname: '1,2,3',  
 | 
                list: [],  
 | 
                page: {  
 | 
                    total: 0,  
 | 
                    size: 10,  
 | 
                    index: 1  
 | 
                }  
 | 
            };  
 | 
        },  
 | 
        methods: {  
 | 
            open(target) {  
 | 
                this.show = true  
 | 
                this.classification = target.classification  
 | 
                this.attribute = target.attribute  
 | 
                this.statusname = target.statusname  
 | 
            },  
 | 
            searchInput(v) {},  
 | 
            submit() {},  
 | 
            clickTag() {}, 
 | 
            jump(item) {}  
 | 
        }  
 | 
    }  
 | 
</script>  
 | 
  
 | 
<style lang="scss">  
 | 
    .content {  
 | 
        .content_code {  
 | 
            position: fixed;  
 | 
            right: 30rpx;  
 | 
            bottom: 100rpx;  
 | 
  
 | 
            img {  
 | 
                width: 138rpx;  
 | 
                height: 138rpx;  
 | 
            }  
 | 
        }  
 | 
  
 | 
        .content_top {  
 | 
            top: 0 !important;  
 | 
        }  
 | 
  
 | 
        .content_search {  
 | 
            padding: 30rpx;  
 | 
            background: white;  
 | 
            position: sticky;  
 | 
            top: 88rpx;  
 | 
            z-index: 9;  
 | 
  
 | 
            .content_search_x {  
 | 
                height: 24rpx;  
 | 
            }  
 | 
        }  
 | 
  
 | 
        .content_total {  
 | 
            padding: 24rpx 30rpx;  
 | 
            background: #F7F7F7;  
 | 
            font-size: 24rpx;  
 | 
            font-weight: 400;  
 | 
            color: #666666;  
 | 
        }  
 | 
  
 | 
        .content_list {  
 | 
            width: 100%;  
 | 
            height: 100%;  
 | 
            display: flex;  
 | 
            flex-direction: column;  
 | 
  
 | 
            .content_list_item {  
 | 
                padding: 30rpx;  
 | 
                display: flex;  
 | 
                border-bottom: 1rpx solid #ececec;  
 | 
  
 | 
                // .serious {  
 | 
                //     color: $nav-stateColor4 !important;  
 | 
                // }  
 | 
                // .success {  
 | 
                //     color: $nav-stateColor2 !important;  
 | 
                // }  
 | 
                // .warning {  
 | 
                //     color: $nav-stateColor5 !important;  
 | 
                // }  
 | 
                .content_list_item_status {  
 | 
                    font-size: 28rpx;  
 | 
                    margin-right: 10rpx;  
 | 
                }  
 | 
  
 | 
                .content_list_item_name {  
 | 
                    font-size: 28rpx;  
 | 
                }  
 | 
            }  
 | 
        }  
 | 
    }  
 | 
</style> 
 |