sfms3.0-uniapp3/src/pages/mes/workScheduling/workScheduling.vue

<template>
  <view class="container">
    <view class="list">
     <view>
        <u-search :show-action="true" v-model="searchValue" action-text="搜索" input-align="left" height="65"
                  border-color=#5599FF @search="searchTable()">
		</u-search>
		<u-tabs :list="list1" :is-scroll="true" active-color="#5599FF" v-model="current" @change="tabsChange"></u-tabs>
        <!-- <u-subsection :animation="true" active-color="#5599FF"  :list="list1" :current="current"
                      @change="tabsChange" :is-scroll="false">
        </u-subsection> -->
      </view>
      <view class="item" v-for="(item, index) in list" :key="index" @click="openDetail(item)">
        <view class="title">
        	<view class="title-txt">
        		{{item.planMaserCode}}
        	</view>
        	<view class="time">
        		{{`${$time.formatDate(item.createTime)}`}}
        	</view>
        </view>
		<view class="dec">
          <view>日计划单号：</view><view>{{ item.planMaserCode }}</view>
        </view>
        <view class="dec">
          <view>任务工单号：</view><view>{{ item.schedulingCode }}</view>
        </view>
		<view class="dec">
		  <view>产品编号：</view><view>{{ item.productCode }}</view>
		</view>
		<view class="dec">
		  <view>产品名称：</view><view>{{ item.productName }}</view>
		</view>
        <view class="dec">
          <view>状态：</view>
          <view>
			<u-tag text="异常" v-if="item.status==-3" bg-color='rgba(255,255,255,0)' color='#fe8463'
					border-color='#fe8463' type="primary" shape='circle'/>
		    <u-tag text="已终止" v-if="item.status==-2" bg-color='rgba(255,255,255,0)' color='#fe8463'
					border-color='#fe8463' type="primary" shape='circle'/>
			<u-tag text="待齐套" v-if="item.status==-1" bg-color='rgba(255,255,255,0)' color='#fe8463'
			        border-color='#fe8463' type="primary" shape='circle'/>
            <u-tag text="待开工" v-if="item.status==0" bg-color='rgba(255,255,255,0)' color='#fe8463'
					border-color='#fe8463' type="primary" shape='circle'/>
            <u-tag text="生产中" v-if="item.status==1" bg-color='rgba(255,255,255,0)' color='#fe8463'
					border-color='#fe8463' type="primary" shape='circle'/>
            <u-tag text="待配料" v-if="item.status==2" bg-color='rgba(255,255,255,0)' color='#fe8463'
					border-color='#fe8463' type="primary" shape='circle'/>
            <u-tag text="已暂停" v-if="item.status==3" bg-color='rgba(255,255,255,0)' color='#fe8463'
					border-color='#fe8463' type="primary" shape='circle'/>
			<u-tag text="待报工" v-if="item.status==4" bg-color='rgba(255,255,255,0)' color='#fe8463'
					border-color='#fe8463' type="primary" shape='circle'/>
			<u-tag text="待质检" v-if="item.status==5" bg-color='rgba(255,255,255,0)' color='#fe8463'
					border-color='#fe8463' type="primary" shape='circle'/>
			<u-tag text="已完成" v-if="item.status==9" bg-color='rgba(255,255,255,0)' color='#fe8463'
					border-color='#fe8463' type="primary" shape='circle'/>		
          </view>
        </view>
		<view v-if="item.status==-1" >
			<u-button type="primary" @click="openInspectItem(item)">齐套检查</u-button>
		</view>
		<view v-if="item.status==0" >
			<u-button type="primary" @click="开工(item)">开工</u-button>
		</view>
      </view>
      <view style="height: 94rpx;padding-top: 30rpx;">
      		<u-loadmore :status="status" v-if="status != 'loadmore'" />
      </view>
    </view>
    <view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
  </view>
</template>

<script setup lang="ts">

import {
  onLoad,
  onShow,
  onReachBottom
} from '@dcloudio/uni-app'
import {
  ref,
  getCurrentInstance
} from 'vue'

import * as workSchedulingListApi from '@/api/mes/workScheduling/index.ts'

const list1 = ref([
  {
    name: '全部',
  },
  {
    name: '待齐套',
  },
  {
    name: '待开工',
  },
  {
    name: '生产中',
  },
  {
    name: '待配料',
  },
  {
    name: '已暂停',
  },
  {
    name: '待报工',
  },
  {
    name: '待质检',
  },
  {
    name: '已完成',
  },
  {
    name: '异常',
  },
  {
    name: '已终止',
  }
])
//公用
const {proxy} = getCurrentInstance()
const current = ref(0)
const status = ref('loadmore') //是否显示没有更多了
const falg = ref('')
const list = ref([])
const searchValue = ref('')
const ss = ref()


const params = ref({
  pageNo: 1,
  pageSize: 10,
  status: '',
  flag: null
})

async function getViewList() {
  if (status.value == 'nomore') return
  status.value = 'loading'
  proxy.$modal.loading('加载中')
  await workSchedulingListApi.getWorkSchedulingPage(params.value).then((res) => {
    proxy.$modal.closeLoading()
    if (res.data.list.length > 0) {
      list.value = list.value.concat(res.data.list)
      params.value.pageNo++
      status.value = 'loadmore'
    } else {
      status.value = 'nomore'
    }
  }).catch(() => {
    proxy.$modal.closeLoading()
  })
  falg.value = 'view'
}

const tabParams = ref({
  pageNo: 1,
  pageSize: 10,
  status: '',
  flag: null
})

async function getTabsList() {
  if (status.value == 'nomore') return
  status.value = 'loading'
  proxy.$modal.loading('加载中')
  await workSchedulingListApi.getWorkSchedulingPage(tabParams.value).then((res) => {
    proxy.$modal.closeLoading()
    if (res.data.list.length > 0) {
      list.value = list.value.concat(res.data.list)
      tabParams.value.pageNo++
      status.value = 'loadmore'
    } else {
      status.value = 'nomore'
    }
  }).catch(() => {
    proxy.$modal.closeLoading()
  })
  falg.value = 'tab'
}


//首次进页面触发
onShow(() => {
  tabParams.value.pageNo = 1
  tabParams.value.status = ''
  list.value = []
  getTabsList()

})
//滑动到底部展示
onReachBottom(() => {
  if (falg.value == 'tab') {
    status.value = 'loading'
    getTabsList()
  }

  if (falg.value == 'view') {
    status.value = 'loading'
    getViewList()
  }
})

//打开明细
function openDetail(item, index) {
  proxy.$tab.navigateTo(`/pages/mes/workScheduling/detail?id=${item.id}`)
}

//打开Bom检查
function openBomInspect(item, index) {
  proxy.$tab.navigateTo(`/pages/mes/workScheduling/bomInspect?planNoDay=${item.planNoDay}`)
}

function openInspectItem(item, index) {
  const objString = JSON.stringify(item);
  proxy.$tab.navigateTo(`/pages/mes/workScheduling/inspectionItems?obj=${objString}`)
}

//切换标签页
function tabsChange(index) {
  current.value = index
  tabParams.value.pageNo = 1
  if (index == '0') {
    tabParams.value.status = ''
  } else {
    tabParams.value.status = index
  }
  list.value = []
  status.value = 'loading'
  getTabsList()
}

const searchTableParams = ref({
  planNoDay: '',
  flag: null
})

async function searchTable() {
  list.value = []
  searchTableParams.value.planNoDay = this.searchValue
  await workSchedulingListApi.getWorkSchedulingPage(searchTableParams.value).then((res) => {
    if (res.data.list.length > 0) {
      list.value = list.value.concat(res.data.list)
    }
  })
}

</script>

<style lang="scss" scoped>
	.container{
		background: #f5f5f5;
		min-height: 100vh;
	}
	.list {
		background: #f5f5f5;
		margin-top: 20rpx;
		.item {
			padding: 30rpx 30rpx 0px 30rpx;
			margin-top: 20rpx;
			background: white;
			position: relative;
			.title {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;
				.title-txt {
					color: #409eff;
					font-weight: bold;
					font-size: 36rpx;
					width: 0px;
					flex: 1;
					word-wrap: break-word;
				}
				.time {
					color: #919191;
				}
			}
			.dec {
				padding-bottom: 20rpx;
				display: flex;
				align-items: center;
				view {
					&:nth-child(1){
						width: 200rpx;;
					}
					&:nth-child(2){
					color: #999999;
						flex: 1;
						width: 0px;
						word-wrap: break-word;
					}
				}
			}
			.last {
				padding-bottom: 30rpx;
			}
			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid #E4E4E4;
				padding: 20rpx 0px;
				height: 90rpx;
			}
		}
	}
</style>