<template>
|
<view class="container">
|
<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="productionTask">
|
<block slot="backText">返回</block>
|
<block slot="content">检验项</block>
|
</cu-custom>
|
|
<!-- 骨架屏 -->
|
<view v-if="loading" class="skeleton-container">
|
<view class="skeleton-list">
|
<!-- 重复渲染多个个列表项骨架 -->
|
<view class="skeleton-item" v-for="n in 4" :key="n">
|
<view class="skeleton-detail-row">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-value"></view>
|
</view>
|
<view class="skeleton-detail-row">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-value"></view>
|
</view>
|
<view class="skeleton-detail-row">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-value"></view>
|
</view>
|
<view class="skeleton-detail-row">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-value"></view>
|
</view>
|
<view class="skeleton-detail-row">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-value"></view>
|
</view>
|
<view class="skeleton-detail-row">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-value"></view>
|
</view>
|
<view class="skeleton-detail-row">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-value"></view>
|
</view>
|
<view class="skeleton-detail-row">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-value"></view>
|
</view>
|
<view class="skeleton-action-row">
|
<view class="skeleton-label"></view>
|
<view class="skeleton-button"></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 实际内容 -->
|
<view v-else class="container">
|
<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="upCallback">
|
<!-- 列表信息开始 -->
|
<view class="content" style="margin: 10px;">
|
<view class="check-list-container">
|
<view class="list-item" v-for="(item, index) in checkList" :key="index">
|
<!-- 详细信息 -->
|
<view class="item-details">
|
<view class="detail-row">
|
<text class="label">检验项编码:</text>
|
<text class="value">{{ item.paramCode}}</text>
|
</view>
|
|
<view class="detail-row">
|
<text class="label">检验项名称:</text>
|
<text class="value">{{ item.paramName }}</text>
|
</view>
|
|
<view class="detail-row">
|
<text class="label">检验项工具:</text>
|
<text class="value">{{ item.availableQty }}</text>
|
</view>
|
|
<view class="detail-row">
|
<text class="label">技术要求:</text>
|
<text class="value">{{ item.paramValue}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">最大值:</text>
|
<text class="value">{{ item.judgment}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">最小值:</text>
|
<text class="value">{{ item.judgment}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">合格数量:</text>
|
<text class="value">{{ item.judgment}}</text>
|
</view>
|
<view class="detail-row">
|
<text class="label">不合格数量:</text>
|
<text class="value">{{ item.judgment}}</text>
|
</view>
|
</view>
|
|
<view class="detail-row">
|
<view class="label">操作:</view>
|
<view class="flex-sub bg-blue padding-xs margin-xs radius text-sm text-center"
|
@click.stop="handleStartWork(item)" hover-class="is-hover">检验</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</mescroll-uni>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
export default {
|
mixins: [MescrollMixin], // 使用mixin
|
data() {
|
return {
|
loading: true, // 控制骨架屏显示
|
checkList: [{
|
paramCode: '01',
|
paramName: '内径',
|
validRange: '卡尺',
|
paramValue: '-',
|
judgment: '10mm'
|
},
|
{
|
paramCode: '01',
|
paramName: '内径',
|
validRange: '卡尺',
|
paramValue: '-',
|
judgment: '10mm'
|
},
|
{
|
paramCode: '01',
|
paramName: '内径',
|
validRange: '卡尺',
|
paramValue: '-',
|
judgment: '10mm'
|
},
|
{
|
paramCode: '01',
|
paramName: '内径',
|
validRange: '卡尺',
|
paramValue: '-',
|
judgment: '10mm'
|
}
|
],
|
scrollLeft: 0,
|
formData: {
|
num: '',
|
type: ''
|
},
|
NavBarColor: this.NavBarColor,
|
activeColor: '#5277A6',
|
url: {
|
flowType: "/sys/dict/getDictItems/flow_type",
|
stallList: "/assign/flow/toTaskBySelf"
|
},
|
|
upOption: {
|
page: {
|
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
|
size: 10 // 每页数据的数量
|
},
|
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
|
empty: {
|
tip: '~ 暂无数据 ~', // 提示
|
},
|
loading: '',
|
text: '全部',
|
isShowNoMore: false,
|
textNoMore: '我是有底线的 >_<'
|
},
|
styles: {
|
color: '#2979FF',
|
borderColor: '#2979FF'
|
},
|
typeList: [],
|
msgList: [], //列表数据
|
announcement1: [],
|
msg1Count: 0,
|
msg2Count: 0,
|
msg1Title: ""
|
}
|
},
|
computed: {
|
top() {
|
return this.CustomBar * 2 + 50
|
},
|
style() {
|
var StatusBar = this.StatusBar;
|
var CustomBar = this.CustomBar;
|
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
return style
|
},
|
},
|
|
onShow() {
|
if (this.mescroll) {
|
this.mescroll.resetUpScroll()
|
}
|
},
|
|
created() {
|
// 模拟数据加载延迟，显示骨架屏
|
setTimeout(() => {
|
this.loading = false;
|
}, 1500);
|
},
|
methods: {
|
|
handleStartWork(){
|
uni.navigateTo({
|
url:'/pages/eam/quality/productionInspection/productionInspection'
|
})
|
},
|
upCallback(page) {
|
this.$http.get(this.url.stallList, {
|
params: {
|
pageNo: page.num,
|
pageSize: page.size,
|
order: 'desc',
|
column: 'createTime'
|
},
|
}).then(res => {
|
this.announcement1 = res.data.result.records
|
this.mescroll.endSuccess(this.announcement1.length);
|
console.log("url", res)
|
//设置列表数据
|
if (res.data.success) {
|
console.log("res", res.data)
|
this.msg1Count = res.data.result.total
|
this.msg1Title = "通知(" + res.data.result.total + ")";
|
for (let annItem of this.announcement1) {
|
this.msgList.push(annItem)
|
}
|
}
|
if (page.num == 1) {
|
this.msgList = []; //如果是第一页需手动制空列表
|
this.msgList = this.msgList.concat(this.announcement1); //追加新数据
|
}
|
|
}).catch(() => {
|
//联网失败, 结束加载
|
this.mescroll.endErr();
|
})
|
|
},
|
|
// 锁定操作
|
handleLock() {
|
uni.showToast({
|
title: '操作执行中...',
|
icon: 'loading'
|
});
|
|
uni.navigateBack(1);
|
|
},
|
|
// 通知领料操作
|
handleNotice() {
|
uni.navigateBack(1);
|
},
|
|
mescrollInit(mescroll) {
|
console.log('mescrollInit')
|
this.mescroll = mescroll;
|
},
|
},
|
|
}
|
</script>
|
|
<style>
|
/* 列表容器样式 */
|
.check-list-container {
|
margin-bottom: 120rpx;
|
/* 为底部操作栏留出空间 */
|
}
|
|
/* 列表项样式 */
|
.list-item {
|
background-color: #fff;
|
border-radius: 16rpx;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
}
|
|
/* 详细信息样式 */
|
.item-details {
|
margin-bottom: 20rpx;
|
}
|
|
.detail-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15rpx;
|
}
|
|
.detail-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
font-size: 28rpx;
|
color: #666;
|
flex: 1;
|
}
|
|
.value {
|
font-size: 28rpx;
|
color: #333;
|
flex: 1;
|
text-align: right;
|
}
|
|
.warning-text {
|
color: #ff6347;
|
font-weight: bold;
|
}
|
|
/* 可编辑样式 */
|
.editable {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
|
.edit-input {
|
border: 1rpx solid #007AFF;
|
border-radius: 8rpx;
|
padding: 10rpx;
|
width: 120rpx;
|
text-align: right;
|
font-size: 28rpx;
|
}
|
|
.edit-icon {
|
margin-left: 10rpx;
|
color: #007AFF;
|
font-size: 24rpx;
|
}
|
|
/* 操作按钮样式 */
|
.item-actions {
|
display: flex;
|
justify-content: flex-end;
|
gap: 20rpx;
|
}
|
|
.action-btn {
|
padding: 12rpx 24rpx;
|
font-size: 13rpx;
|
border-radius: 8rpx;
|
border: none;
|
min-width: 60rpx;
|
}
|
|
.edit-btn {
|
background-color: #007AFF;
|
color: #fff;
|
}
|
|
.delete-btn {
|
background-color: #ff6347;
|
color: #fff;
|
}
|
|
/* 底部操作栏样式 */
|
.action-bar {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background-color: #fff;
|
padding: 20rpx;
|
display: flex;
|
justify-content: space-around;
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
z-index: 999;
|
}
|
|
.operation-btn {
|
padding: 20rpx 40rpx;
|
font-size: 22rpx;
|
border-radius: 12rpx;
|
background-color: #007AFF;
|
color: #fff;
|
border: none;
|
flex: 1;
|
margin: 0 10rpx;
|
}
|
|
.is-hover {
|
color: rgba(255, 255, 255, 0.6);
|
background-color: #55aaff;
|
border-color: #55aaff;
|
}
|
|
/* 骨架屏样式 */
|
.skeleton-container {
|
padding: 20rpx;
|
}
|
|
.skeleton-list {
|
width: 100%;
|
}
|
|
.skeleton-item {
|
background-color: #ffffff;
|
border-radius: 16rpx;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.skeleton-detail-row {
|
display: flex;
|
margin-bottom: 15rpx;
|
}
|
|
.skeleton-label {
|
width: 200rpx;
|
height: 28rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 4rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
}
|
|
.skeleton-value {
|
flex: 1;
|
height: 28rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 4rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
margin-left: 20rpx;
|
}
|
|
.skeleton-action-row {
|
display: flex;
|
align-items: center;
|
margin-top: 10rpx;
|
}
|
|
.skeleton-button {
|
width: 120rpx;
|
height: 50rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 8rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
margin-left: 20rpx;
|
}
|
|
@keyframes skeleton-loading {
|
0% {
|
background-position: 100% 50%;
|
}
|
100% {
|
background-position: 0 50%;
|
}
|
}
|
</style>
|
