<template> 
 | 
    <view class="content"> 
 | 
        <view class="content_search"> 
 | 
            <Search @searchInput="searchInput" placeholder="搜索物料名称/编码"></Search> 
 | 
            <view class="content_search_x" v-if="tagList.length > 0"></view> 
 | 
            <LabelSelection :TagList="tagList" :isShow="true" @change="clickTag" /> 
 | 
        </view> 
 | 
        <view class="content_total" :style="{top: top}">共{{search.total}}条数据</view> 
 | 
        <view class="content_list"> 
 | 
            <scroll-view 
 | 
            :refresher-enabled="true" 
 | 
            :refresher-triggered="isLoading" 
 | 
            @refresherrefresh="onRefresh" 
 | 
            refresher-background="#fff" 
 | 
            @scrolltolower="getLists" 
 | 
            scroll-y 
 | 
            :style="{height: height}"> 
 | 
                <view class="fp_list_item" v-for="(item, i) in list" :key="item.id" @click="clickItem(i)"> 
 | 
                    <view class="fp_list_item_header"> 
 | 
                        <u-checkbox :checked="item.isActive"></u-checkbox> 
 | 
                        <text v-if="item.mmodel">{{item.mmodel.name}}</text> 
 | 
                        <view class="tags" v-if="item.urgent">优先{{item.urgent}}</view> 
 | 
                        <view class="warning" v-if="item.type === 2">返工</view> 
 | 
                        <view class="warning success" v-else-if="item.type === 0">正常</view> 
 | 
                        <view class="warning fail" v-else-if="item.type === 1">异常</view> 
 | 
                    </view> 
 | 
                    <view class="fp_list_item_nr"> 
 | 
                        <view class="item" v-if="item.pmodel"> 
 | 
                            <view class="item_label">工序名称:</view> 
 | 
                            <view class="item_nr">{{item.pmodel.name}}</view> 
 | 
                        </view> 
 | 
                        <view class="item"> 
 | 
                            <view class="item_label">计划日期:</view> 
 | 
                            <view class="item_nr">{{item.planDate}}</view> 
 | 
                        </view> 
 | 
                        <view class="item"> 
 | 
                            <view class="item_label">计划数量:</view> 
 | 
                            <view class="item_nr">{{item.num}}</view> 
 | 
                        </view> 
 | 
                        <view class="item"> 
 | 
                            <view class="item_label">生产批次:</view> 
 | 
                            <view class="item_nr">{{item.batch}}</view> 
 | 
                        </view> 
 | 
                        <view class="item"> 
 | 
                            <view class="item_label">库存:</view> 
 | 
                            <view class="item_nr">{{item.isStock === 0 ? '不满足' : '满足'}}</view> 
 | 
                        </view> 
 | 
                    </view> 
 | 
                </view> 
 | 
            </scroll-view> 
 | 
        </view> 
 | 
        <view class="fp_zw"></view> 
 | 
        <view class="fp_footer"> 
 | 
            <view class="fp_footer_button" @click="submit">分配</view> 
 | 
        </view> 
 | 
    </view> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import Search from '@/components/Search.vue' 
 | 
    import LabelSelection from '@/components/LabelSelection.vue' 
 | 
    import { getList, getSelfList } from '@/util/api/PlanningAPI' 
 | 
    export default { 
 | 
        components: { Search, LabelSelection }, 
 | 
        data() { 
 | 
            return { 
 | 
                height: '', 
 | 
                top: '', 
 | 
                isLoading: false, 
 | 
                search: { 
 | 
                    gxId: '', 
 | 
                    capacity: 10, 
 | 
                    page: 0, 
 | 
                    total: 0, 
 | 
                    mixParam: '', 
 | 
                    first: true // 用于判断是否是第一次进入页面 
 | 
                }, 
 | 
                tagList: [], 
 | 
                finished: false, 
 | 
                loading: false, 
 | 
                refreshing: false, 
 | 
                list: [] 
 | 
            }; 
 | 
        }, 
 | 
        onReady() { 
 | 
            var that = this 
 | 
            this.$nextTick(() => { 
 | 
                uni.createSelectorQuery().in(this).select('.content_search').boundingClientRect((rect) => { 
 | 
                    that.height = `calc(100vh - ${rect.height + 80}px)` 
 | 
                    that.top = `${rect.height}px` 
 | 
                }).exec() 
 | 
            }) 
 | 
        }, 
 | 
        onLoad() { 
 | 
            this.getLists() 
 | 
            uni.$on('update', (data) => { 
 | 
                this.isLoading = true 
 | 
                this.search.page = 0 
 | 
                this.list = [] 
 | 
                this.finished = false 
 | 
                this.getLists() 
 | 
            }) 
 | 
        }, 
 | 
        methods: { 
 | 
            // 下拉刷新 
 | 
            onRefresh() { 
 | 
                if (this.isLoading) return 
 | 
                this.isLoading = true 
 | 
                this.search.page = 0 
 | 
                this.list = [] 
 | 
                this.finished = false 
 | 
                this.getLists() 
 | 
            }, 
 | 
            // 点击当前项 
 | 
            clickItem(i) { 
 | 
                this.list.forEach((item, index) => { 
 | 
                    if (i === index) { 
 | 
                        item.isActive = !item.isActive 
 | 
                    } 
 | 
                }) 
 | 
            }, 
 | 
            // 搜索 
 | 
            searchInput(e) { 
 | 
                this.search.mixParam = e 
 | 
                this.search.page = 0 
 | 
                this.list = [] 
 | 
                this.finished = false 
 | 
                this.getLists() 
 | 
            }, 
 | 
            // 点击 
 | 
            clickTag(id) { 
 | 
                this.search.gxId = id 
 | 
                this.list = [] 
 | 
                this.search.page = 0 
 | 
                this.finished = false 
 | 
                this.getLists() 
 | 
            }, 
 | 
            // 分配 
 | 
            submit() { 
 | 
                let data; 
 | 
                this.list.forEach((item) => { 
 | 
                    if (item.isActive) { 
 | 
                        data = item 
 | 
                    } 
 | 
                }) 
 | 
                if (!data) { 
 | 
                    uni.showToast({ title: '至少选择一项计划!', icon: 'none', duration: 2000 }); 
 | 
                    return 
 | 
                } 
 | 
                uni.navigateTo({ 
 | 
                    url: `/pages/allocation/allocation?gxid=${data.procedureId}&jhid=${data.id}&num=${data.num - data.workorderDistributNum - data.distributNoDoneNum}` 
 | 
                }); 
 | 
            }, 
 | 
            // 获取当前用户所分配的工序 
 | 
            async getWorkingProcedures() { 
 | 
                let res = await getSelfList({}) 
 | 
                if (res.code === 200 && res.data.length > 0) { 
 | 
                    let arr = [] 
 | 
                    res.data.forEach((item) => { 
 | 
                        arr.push({ name: item.name, id: item.id }) 
 | 
                    }) 
 | 
                    this.search.gxId = arr[0].id 
 | 
                    this.tagList = arr 
 | 
                    return true 
 | 
                } 
 | 
                return false 
 | 
            }, 
 | 
            // 获取计划列表数据 
 | 
            async getLists() { 
 | 
                if (!this.finished) { 
 | 
                    this.loading = true 
 | 
                    this.search.page = this.search.page += 1 
 | 
                    if (this.search.first) {     // 如果是第一次,先请求工序 
 | 
                        await this.getWorkingProcedures() 
 | 
                        let res = await getList({ 
 | 
                            capacity: this.search.capacity, 
 | 
                            page: this.search.page, 
 | 
                            model: { 
 | 
                                mixParam: this.search.mixParam, 
 | 
                                procedureId: this.search.gxId, 
 | 
                                statusList: [1, 4] 
 | 
                            } 
 | 
                        }) 
 | 
                        this.isLoading = false 
 | 
                        this.loading = false 
 | 
                        if (this.refreshing) { 
 | 
                            this.list = [] 
 | 
                            this.refreshing = false; 
 | 
                        } 
 | 
                        if (res.code === 200 && res.data.records.length !== 0) { 
 | 
                            this.search.total = res.data.total 
 | 
                            res.data.records.forEach((item) => { 
 | 
                                item.isActive = false 
 | 
                            }) 
 | 
                            this.list.push(...res.data.records) 
 | 
                        } else { 
 | 
                            this.finished = true; 
 | 
                        } 
 | 
                        this.search.first = false 
 | 
                    } else { 
 | 
                        let res = await getList({ 
 | 
                            capacity: this.search.capacity, 
 | 
                            page: this.search.page, 
 | 
                            model: { 
 | 
                                mixParam: this.search.mixParam, 
 | 
                                procedureId: this.search.gxId, 
 | 
                                statusList: [1, 4] 
 | 
                            } 
 | 
                        }) 
 | 
                        this.isLoading = false 
 | 
                        if (this.refreshing) { 
 | 
                            this.list = [] 
 | 
                            this.refreshing = false; 
 | 
                        } 
 | 
                        this.loading = false 
 | 
                        if (res.code === 200 && res.data.records.length !== 0) { 
 | 
                            res.data.records.forEach((item) => { 
 | 
                                item.isActive = false 
 | 
                            }) 
 | 
                            this.list.push(...res.data.records) 
 | 
                            this.search.total = res.data.total 
 | 
                        } else { 
 | 
                            this.finished = true; 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
    .content { 
 | 
        .content_search { 
 | 
            width: 100%; 
 | 
            padding: 30rpx; 
 | 
            background: white; 
 | 
            position: sticky; 
 | 
            top: 0; 
 | 
            z-index: 999; 
 | 
            box-sizing: border-box; 
 | 
            .Search_item { 
 | 
                margin-bottom: 40rpx; 
 | 
                .Search_item_label { 
 | 
                    font-size: 30rpx; 
 | 
                    font-weight: 500; 
 | 
                    color: #222222; 
 | 
                } 
 | 
                .Search_item_content { 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: space-between; 
 | 
                    margin-top: 30rpx; 
 | 
                    .tag { 
 | 
                        display: flex; 
 | 
                        flex-wrap: wrap; 
 | 
                        align-items: center; 
 | 
                        .tag_active { 
 | 
                            background: $nav-color !important; 
 | 
                            color: #ffffff !important; 
 | 
                        } 
 | 
                        .tag_item { 
 | 
                            padding: 22rpx 26rpx; 
 | 
                            box-sizing: border-box; 
 | 
                            background: #F2F2F2; 
 | 
                            border-radius: 8rpx; 
 | 
                            font-size: 26rpx; 
 | 
                            font-weight: 400; 
 | 
                            color: #333333; 
 | 
                            display: flex; 
 | 
                            align-items: center; 
 | 
                            justify-content: center; 
 | 
                            margin-right: 22rpx; 
 | 
                            margin-bottom: 22rpx; 
 | 
                        } 
 | 
                    } 
 | 
                    text { 
 | 
                        font-size: 26rpx; 
 | 
                        font-weight: 400; 
 | 
                        color: #333333; 
 | 
                        margin: 0 30rpx; 
 | 
                    } 
 | 
                    .Search_item_content_a { 
 | 
                        padding: 20rpx 0; 
 | 
                        flex: 1; 
 | 
                        background: #F7F7F7; 
 | 
                        border-radius: 8rpx; 
 | 
                        border: 1rpx solid #EEEEEE; 
 | 
                        font-size: 26rpx; 
 | 
                        font-weight: 400; 
 | 
                        color: #B2B2B2; 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        justify-content: center; 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
            .content_search_x { 
 | 
                height: 24rpx; 
 | 
            } 
 | 
        } 
 | 
        .content_list { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            flex-direction: column; 
 | 
            .fp_list_item { 
 | 
                background: white; 
 | 
                display: flex; 
 | 
                flex-direction: column; 
 | 
                padding: 30rpx; 
 | 
                border-bottom: 1rpx solid #ececec; 
 | 
                .fp_list_item_header { 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    text { 
 | 
                        max-width: 64%; 
 | 
                        overflow: hidden; 
 | 
                        white-space: nowrap; 
 | 
                        text-overflow: ellipsis; 
 | 
                        -o-text-overflow: ellipsis; 
 | 
                        font-size: 32rpx; 
 | 
                        font-weight: 500; 
 | 
                        color: #333333; 
 | 
                        margin-left: 14rpx; 
 | 
                    } 
 | 
                    .tags { 
 | 
                        flex-shrink: 0; 
 | 
                        margin-left: 16rpx; 
 | 
                        padding: 5rpx 10rpx; 
 | 
                        background: $nav-stateColor4; 
 | 
                        border-radius: 8rpx; 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        justify-content: center; 
 | 
                        font-size: 22rpx; 
 | 
                        font-weight: 400; 
 | 
                        color: #FFFFFF; 
 | 
                    } 
 | 
                    .fail { 
 | 
                        background: $nav-stateColor4 !important; 
 | 
                    } 
 | 
                    .success { 
 | 
                        background: $nav-stateColor2 !important; 
 | 
                    } 
 | 
                    .warning { 
 | 
                        flex-shrink: 0; 
 | 
                        margin-left: 16rpx; 
 | 
                        padding: 5rpx 10rpx; 
 | 
                        background: $nav-stateColor5; 
 | 
                        border-radius: 8rpx; 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        justify-content: center; 
 | 
                        font-size: 22rpx; 
 | 
                        font-weight: 400; 
 | 
                        color: #FFFFFF; 
 | 
                    } 
 | 
                } 
 | 
                .fp_list_item_nr { 
 | 
                    padding: 24rpx 30rpx; 
 | 
                    background: #F7F7F7; 
 | 
                    border-radius: 16rpx; 
 | 
                    margin-top: 32rpx; 
 | 
                    display: flex; 
 | 
                    align-items: flex-start; 
 | 
                    flex-wrap: wrap; 
 | 
                    .item { 
 | 
                        display: flex; 
 | 
                        align-items: flex-start; 
 | 
                        width: 50%; 
 | 
                        margin-top: 24rpx; 
 | 
                        &:nth-child(1) { 
 | 
                            margin-top: 0!important; 
 | 
                        } 
 | 
                        &:nth-child(2) { 
 | 
                            margin-top: 0!important; 
 | 
                        } 
 | 
                        .item_label { 
 | 
                            width: 130rpx; 
 | 
                            flex-shrink: 0; 
 | 
                            font-size: 24rpx; 
 | 
                            font-weight: 400; 
 | 
                            color: #666666; 
 | 
                            text-align: right; 
 | 
                        } 
 | 
                        .item_nr { 
 | 
                            font-size: 24rpx; 
 | 
                            font-weight: 400; 
 | 
                            color: #222222; 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .content_total { 
 | 
            width: 100%; 
 | 
            height: 80rpx; 
 | 
            padding: 24rpx 30rpx; 
 | 
            background: #F7F7F7; 
 | 
            font-size: 24rpx; 
 | 
            font-weight: 400; 
 | 
            box-sizing: border-box; 
 | 
            color: #666666; 
 | 
            position: sticky; 
 | 
            z-index: 99; 
 | 
        } 
 | 
        .fp_zw { 
 | 
            height: calc(98rpx + env(safe-area-inset-bottom)); 
 | 
        } 
 | 
        .fp_footer { 
 | 
            width: 100%; 
 | 
            padding-bottom: env(safe-area-inset-bottom); 
 | 
            position: fixed; 
 | 
            bottom: 0; 
 | 
            left: 0; 
 | 
            background: #ffffff; 
 | 
            .fp_footer_button { 
 | 
                width: 272rpx; 
 | 
                height: 98rpx; 
 | 
                background: $nav-color; 
 | 
                font-size: 32rpx; 
 | 
                font-weight: 500; 
 | 
                color: #FFFFFF; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                justify-content: center; 
 | 
                float: right; 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |