|
@@ -0,0 +1,425 @@
|
|
|
+<template>
|
|
|
+ <view class='container uni-column'>
|
|
|
+ <view class='nav uni-row'>
|
|
|
+ <text :class='pendingClass' @click='selectPending'>{{pendingTitle}}</text>
|
|
|
+ <text :class='turnoverClass' @click='selectTurnover'>{{turnoverTitle}}</text>
|
|
|
+ <image class='img' src="../../static/screen.png"></image>
|
|
|
+ </view>
|
|
|
+ <!-- <pending v-if='pendingShow'/>
|
|
|
+ <turnover v-if='turnoverShow'/> -->
|
|
|
+
|
|
|
+ <!-- 待周转页面 -->
|
|
|
+ <view class="padding-container" v-if='pendingShow'>
|
|
|
+ <scroll-view class="scroll-container" scroll-y>
|
|
|
+ <view v-for="(item, index) in listData" :key="index" class="list-item">
|
|
|
+ <view class="title-container uni-row">
|
|
|
+ <view class="title uni-row">
|
|
|
+ <text class="label">{{ item['door'] }}</text>
|
|
|
+ <text class="label code">{{ item['process'] }}</text>
|
|
|
+ <text class="label code" style="margin-left: 16rpx;">→</text>
|
|
|
+ <text class="label code" style="margin-left: 16rpx;">{{ item['car'] }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="right-info uni-row">
|
|
|
+ <view class="uni-row"><text class="label right">待周转</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-info uni-row"> <text class="label ">批次</text>
|
|
|
+ <text class="label right">{{ item['batch'] }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-info uni-row"> <text class="label">箱数</text>
|
|
|
+ <text class="label right ">{{ item['cases'] }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-info uni-row">
|
|
|
+ <text class="label">数量</text>
|
|
|
+ <text class="label right">{{ item['amount'] }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-info uni-row">
|
|
|
+ <text class="label">箱号</text>
|
|
|
+ <text class="label right">{{ item['caseNumber']}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-info uni-row">
|
|
|
+ <text class="label">申请时间</text>
|
|
|
+ <text class="label right">{{ item['applyTime']}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-info uni-row">
|
|
|
+ <text class="label">申请人</text>
|
|
|
+ <text class="label right">{{ item['applier']}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="bottom-btn-container uni-row">
|
|
|
+ <button class="bottom-btn">开始周转</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 周转中页面 -->
|
|
|
+ <view class='turnover-container' v-if='turnoverShow'>
|
|
|
+ <scroll-view class="scroll-container" scroll-y>
|
|
|
+ <!-- 循环周转中的数据 -->
|
|
|
+ <view class='item-container'>
|
|
|
+ <view class="turnover-title uni-row">
|
|
|
+ <view class="uni-row">
|
|
|
+ <view><text class='title-color'>{{turnoverContentTitle}}</text></view>
|
|
|
+ <view><text class="second-info">{{turnoverSecondTitle}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view><text class="label">周转中</text></view>
|
|
|
+ </view>
|
|
|
+ <view class='list-container' v-for="(item,index) in products" :key='index'>
|
|
|
+ <view class="list-container-item product-description uni-row">
|
|
|
+ <text class="label left-value">产品描述</text>
|
|
|
+ <text class="label right-value">{{item['description']}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-container-item uni-row">
|
|
|
+ <text class="label left-value">批次</text>
|
|
|
+ <text class="label right-value">{{item['batch']}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-container-item uni-row">
|
|
|
+ <text class="label left-value">箱数</text>
|
|
|
+ <text class="label right-value">{{item['cases']}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-container-item uni-row">
|
|
|
+ <text class="label left-value">箱号</text>
|
|
|
+ <text class="label right-value">{{item['boxno']}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class='item-container'>
|
|
|
+ <view class="turnover-title uni-row">
|
|
|
+ <view class="uni-row">
|
|
|
+ <view><text class='title-color'>{{turnoverContentTitle}}</text></view>
|
|
|
+ <view><text class="second-info">{{turnoverSecondTitle}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view><text class="label">周转中</text></view>
|
|
|
+ </view>
|
|
|
+ <view class='list-container' v-for="(item,index) in products" :key='index'>
|
|
|
+ <view class="list-container-item product-description uni-row">
|
|
|
+ <text class="label left-value">产品描述</text>
|
|
|
+ <text class="label right-value">{{item['description']}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-container-item uni-row">
|
|
|
+ <text class="label left-value">批次</text>
|
|
|
+ <text class="label right-value">{{item['batch']}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-container-item uni-row">
|
|
|
+ <text class="label left-value">箱数</text>
|
|
|
+ <text class="label right-value">{{item['cases']}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-container-item uni-row">
|
|
|
+ <text class="label left-value">箱号</text>
|
|
|
+ <text class="label right-value">{{item['boxno']}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class='bottom-btn-container uni-row'>
|
|
|
+ <button type='primary' class='bottom-btn'>开始周转</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import { ref } from 'vue'
|
|
|
+ import { onLoad, onReady } from '@dcloudio/uni-app'
|
|
|
+ // import pending from './pending';
|
|
|
+ // import turnover from './turnover';
|
|
|
+ const pendingTitle = ref('待周转')
|
|
|
+ const turnoverTitle = ref('周转中')
|
|
|
+ const turnoverContentTitle = ref('')
|
|
|
+ const turnoverSecondTitle = ref('')
|
|
|
+ const sum = ref(0)
|
|
|
+ const pendingClass = ref({
|
|
|
+ selecter: true
|
|
|
+ })
|
|
|
+ const turnoverClass = ref({
|
|
|
+ selecter: false
|
|
|
+ })
|
|
|
+ const pendingShow = ref(true)
|
|
|
+ const turnoverShow = ref(false)
|
|
|
+ const listData = ref([{
|
|
|
+ door: "A门",
|
|
|
+ process: "粗磨",
|
|
|
+ car: "NC车",
|
|
|
+ batch: "MBA5444002",
|
|
|
+ cases: 6,
|
|
|
+ amount: 780,
|
|
|
+ caseNumber: "X12522、X55222、X15522、J5211、J5211",
|
|
|
+ applyTime: "2023-06-15 15:52:12",
|
|
|
+ applier: "王伟"
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ door: "B门",
|
|
|
+ process: "手工校直",
|
|
|
+ car: "粗磨Ⅱ",
|
|
|
+ batch: "MBA5444002",
|
|
|
+ cases: 6,
|
|
|
+ amount: 780,
|
|
|
+ caseNumber: "X12522、X55222、X15522、J5211、J5211",
|
|
|
+ applyTime: "2023-06-15 15:52:12",
|
|
|
+ applier: "王伟"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ door: "B门",
|
|
|
+ process: "手工校直",
|
|
|
+ car: "粗磨Ⅱ",
|
|
|
+ batch: "MBA5444002",
|
|
|
+ cases: 6,
|
|
|
+ amount: 780,
|
|
|
+ caseNumber: "X12522、X55222、X15522、J5211、J5211",
|
|
|
+ applyTime: "2023-06-15 15:52:12",
|
|
|
+ applier: "王伟"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ const products = ref([{
|
|
|
+ description: '博士_0395614149_15*110.1',
|
|
|
+ batch: 'DC23727410070',
|
|
|
+ cases: 5,
|
|
|
+ boxno: 'X12522、X552222、X15522、J5211、J5112'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ description: '博士_0395614149_15*110.1',
|
|
|
+ batch: 'DC23727410070',
|
|
|
+ cases: 5,
|
|
|
+ boxno: 'X12522、X552222、X15522、J5211、J5112'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ description: '博士_0395614149_15*110.1',
|
|
|
+ batch: 'DC23727410070',
|
|
|
+ cases: 5,
|
|
|
+ boxno: 'X12522、X552222、X15522、J5211、J5112'
|
|
|
+ }
|
|
|
+ ])
|
|
|
+
|
|
|
+ onReady(() => {
|
|
|
+ init()
|
|
|
+ })
|
|
|
+
|
|
|
+ const init = () => {
|
|
|
+ for (let i = 0; i < products.value.length; i++) {
|
|
|
+ sum.value += parseInt(products.value[i]['cases'].toString());
|
|
|
+ }
|
|
|
+ // this.title = '热处理' + this.sum + '箱'
|
|
|
+ turnoverContentTitle.value = sum.value + '箱';
|
|
|
+ turnoverSecondTitle.value = listData.value[0]['process'].toString() + ' → ' + listData.value[0]['car']
|
|
|
+ .toString();
|
|
|
+ }
|
|
|
+ const selectPending = () => {
|
|
|
+ pendingClass.value['selecter'] = true;
|
|
|
+ turnoverClass.value['selecter'] = false;
|
|
|
+ pendingShow.value = true;
|
|
|
+ turnoverShow.value = false;
|
|
|
+ }
|
|
|
+ const selectTurnover = () => {
|
|
|
+ pendingClass.value['selecter'] = false;
|
|
|
+ turnoverClass.value['selecter'] = true;
|
|
|
+ pendingShow.value = false;
|
|
|
+ turnoverShow.value = true;
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ $navHeight: 48rpx;
|
|
|
+
|
|
|
+ /* 导航栏样式 */
|
|
|
+ .container {
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 100%;
|
|
|
+ height: $navHeight;
|
|
|
+ border-bottom: 3rpx solid rgba(228, 231, 237, 1);
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ position: fixed;
|
|
|
+ right: 10rpx;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .selecter {
|
|
|
+ height: 48rpx;
|
|
|
+ color: rgba(25, 137, 250, 1);
|
|
|
+ border-bottom: 3rpx solid rgba(25, 137, 250, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 待周转样式 */
|
|
|
+ .padding-container,
|
|
|
+ .turnover-container {
|
|
|
+ position: absolute;
|
|
|
+ top: 56rpx;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0rpx;
|
|
|
+ left: 0;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+
|
|
|
+ .scroll-container {
|
|
|
+ position: absolute;
|
|
|
+ top: 24rpx;
|
|
|
+ right: 0;
|
|
|
+ bottom: 136rpx;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-btn-container {
|
|
|
+ height: 10%;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 80rpx;
|
|
|
+ border-top: 1px solid #999999;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .bottom-btn {
|
|
|
+ // padding-left: 0;
|
|
|
+ // padding-top: 4rpx;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background-color: #1684fc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .padding-container {
|
|
|
+ .scroll-container {
|
|
|
+ .list-item {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ margin: 0 24rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+
|
|
|
+ .title-container {
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 48rpx;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ color: #1684fc;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &.code {
|
|
|
+ color: #000000;
|
|
|
+ margin-left: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-info {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 160rpx;
|
|
|
+ color: #808080;
|
|
|
+
|
|
|
+ &.right {
|
|
|
+ flex: 1;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-info {
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 2rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 周转中样式 */
|
|
|
+ .turnover-container {
|
|
|
+ .scroll-container {
|
|
|
+ .item-container {
|
|
|
+ padding: 8rpx 0 32rpx 0;
|
|
|
+ margin: 0 24rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 8rpx;
|
|
|
+
|
|
|
+ .turnover-title {
|
|
|
+ width: auto;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 16rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-container {
|
|
|
+ margin: 0 24rpx 16rpx 24rpx;
|
|
|
+
|
|
|
+ .list-container-item {
|
|
|
+ border-bottom: 1px solid #999999;
|
|
|
+ padding: 12rpx 8rpx;
|
|
|
+ background-color: #EEF0F5;
|
|
|
+
|
|
|
+ &.product-description {
|
|
|
+ background-color: #ECF5FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ &.left-value {
|
|
|
+ width: 152rpx;
|
|
|
+ }
|
|
|
+ &.right-value {
|
|
|
+ flex: 1;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-color {
|
|
|
+ color: rgba(22, 132, 252, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .second-info {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .turnover-info {
|
|
|
+ color: rgba(128, 128, 128, 1);
|
|
|
+ position: absolute;
|
|
|
+ top: 10rpx;
|
|
|
+ right: 40rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|