uniapp，vue3 分页，下拉刷新，上拉加载的标准代码
·
pages打开配置：
{
// 曝光进站
"path": "productExposureTrackIn",
"style": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "",
"enablePullDownRefresh": true, //下拉刷新，必须配置该参数
"onReachBottomDistance": 100 //距离底部100像素时，触发加载更多功能
}
},代码：
<template>
<view>
<back backShow titleColor="#000" backType="b" :title="'我的'+srcFn('title')"></back>
<view class="heade">
<image :src="srcFn('src')" mode="widthFix"></image>
<text>{{$base.unitPrice(price ||0)}}</text>
<view class="shiftTo"
@click="navToFn('/pages/mine/shiftTo?info=' +JSON.stringify({ type : typeIn , price : price}))"
v-if="typeIn == 0 || typeIn==2">
{{ typeIn==0?'转入元宝':typeIn==2?'转入晶石':'' }}
</view>
</view>
<view class="cat_row">
<view class="cat_title">明细</view>
<view class="cat_right">
<view class="cat_item" @click="changeMenu(1)" :class=" type == 1 ?'active' :''">收入</view>
<view class="cat_item" @click="changeMenu(0)" :class=" type == 0 ?'active' : ''">支出</view>
</view>
</view>
<scroll-view scroll-y="true" class="scroll" @scrolltolower="scrolltolower">
<view class="list">
<view class="item" v-for="(v,i) in pageInfo.list" :key="i">
<view class="left">
<text class="title">
<!--3:晶石,2:元宝,1:金币.-->
<text v-if="typeIn == 3">
<!-- 有备注使用备注,否则使用默认描述 -->
{{(type==1?(v.remark || sparFn(v.type)):sparFn2(v.type))}}
</text>
<text v-else-if="typeIn == 2">{{v.remark || shoeFn(v.type)}}</text>
<text v-else>{{goldFn(v.type)}}</text>
</text>
<!-- <text class="title">{{ v.source}}</text> -->
<text class="time">{{v.createdAt}}</text>
</view>
<view class="right" :class="type == 1?'green':'red'">
{{ type == 1 ? '+' : '-' }}{{v.num}}{{ srcFn('title') }}
</view>
</view>
<view v-if="pageInfo.list.length==0 && !pageInfo.loading" class="center cloc mt20"><text
class="no_more">暂无数据</text></view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import back from '@/components/back/back.vue'
import {
ref,
reactive,
computed
} from 'vue'
import api from '../../api';
import {
onLoad,
onShow
} from '@dcloudio/uni-app'
const type = ref(1)
const price = ref(0)
const typeIn = ref(0) // 0 金币 1 能源 2 元宝 3 晶石
//分页
const pageInfo = reactive({
pageIndex: 1,
pageSize: 20,
list: [],
loading: false, //加载中
finished: false, //是否完成
})
//晶石收入
const sparFn = computed(() => {
return function(type) {
switch (type) {
case 0:
return '宝箱分红'
break
case 1:
return '段位分红'
break
case 2:
return '元宝转晶石'
break
case 3:
return '下级开宝箱'; //直推宝箱
break
case 4:
return '下下级开宝箱'; //间推宝箱
break
case 5:
return '转赠'
break
case 6:
return '区县分红'
break
case 7:
return '市级分红'
break
case 8:
return '联创分红'
break
case 10:
return '出售物品'
break
case 11:
return '取消求购'
break
case 12:
return '月卡赠送'
break
case 13:
return '平台增加'
break;
}
}
})
//晶石支出
const sparFn2 = computed(() => {
return function(type) {
switch (type) {
case 1:
return '购买物品'; //交易所
break
case 2:
return '开宝箱'
break
case 3:
return '转赠'
break
case 4:
return '套装分红'
break
case 5:
return '段位分红'
break
case 6:
return '平台减少'
break
}
}
})
//元宝.收入支出
const shoeFn = computed(() => {
return function(type) {
switch (type) {
case 1:
return '订单收益'
break
case 2:
return '直推收益'
break
case 3:
return '间推收益'
break
case 4:
return '元宝升级'
break
case 5:
return '团队收益'
break
case 6:
return '提现'
break
case 7:
return '元宝转晶石'
break
case 8:
return '能源转换'
break
case 9:
return '金币转元宝'
break
case 10:
return '提现拒绝'
break
case 11:
return '购买月卡'
break
case 12:
return '平台增加'
break
case 13:
return '平台减少'
break
}
}
})
//金币
const goldFn = computed(() => {
return function(type) {
switch (type) {
case 1:
return '广告收益'
break;
case 2:
return '转盘收益'
break
case 3:
return '下级分润'
break
case 9:
return '金币转元宝'
break
default:
break;
}
}
})
const srcFn = computed(() => {
return function(type) {
switch (typeIn.value) {
case '0':
if (type == 'title') {
return '金币'
} else {
return "../../static/user/wallet/icon4.png"
}
break
case '1':
if (type == 'title') {
return '绿色能源'
} else {
return "../../static/user/wallet/icon3.png"
}
break
case '2':
if (type == 'title') {
return '元宝'
} else {
return "../../static/user/wallet/icon2.png"
}
break
case '3':
if (type == 'title') {
return '晶石'
} else {
return "../../static/user/wallet/icon1.png"
}
break
}
}
})
onLoad((option) => {
typeIn.value = option.type
// price.value = option.price
})
onShow(() => {
getMyWalletFn()
search();
})
const search = () => {
pageInfo.pageIndex = 1
pageInfo.list = []
getListFn()
}
// 获取我的钱包
const getMyWalletFn = async () => {
let res = await api.home.myWallet()
let {
gold,
billions,
spar
} = res.data;
if (typeIn.value == 0) {
price.value = gold
} else if (typeIn.value == 2) {
price.value = billions
} else if (typeIn.value == 3) {
price.value = spar
}
}
const getListFn = async () => {
if (pageInfo.loading) return;
let d = {
pageIndex: pageInfo.pageIndex,
pageSize: pageInfo.pageSize,
type: type.value
}
if (typeIn.value != 3) {
d.typeIn = typeIn.value
}
pageInfo.finished = false;
pageInfo.loading = true;
uni.showLoading({
title: '加载中'
});
let url = typeIn.value == 3 ? api.user.sparLog : api.user.userInfoLogPage
url(d).then(res => {
let list = res.data.list || [];
if (list.length >= d.pageSize) {
pageInfo.finished = false;
} else {
pageInfo.finished = true;
}
if (d.pageIndex == 1) {
pageInfo.list = list;
} else {
pageInfo.list = pageInfo.list.concat(list);
}
}).finally((_) => {
uni.hideLoading();
pageInfo.loading = false;
});
}
//滚动到底部
function scrolltolower() {
if (!pageInfo.finished) {
pageInfo.pageIndex++;
getListFn();
}
}
//切换标签
function changeMenu(i) {
type.value = i
search()
}
function navToFn(path) {
uni.navigateTo({
url: path
})
}
</script>
<style lang="scss" scoped>
.scroll {
height: calc(100vh - var(--status-bar-height) - 88rpx - 300rpx - 110rpx);
}
.list {
padding: 0 28rpx;
box-sizing: border-box;
.item {
width: 692rpx;
background: #FFFFFF;
border-radius: 19rpx;
padding: 13rpx 17rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 19rpx;
.left {
display: flex;
flex-direction: column;
.title {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 27rpx;
color: #000000;
margin-bottom: 4rpx;
}
.time {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 21rpx;
color: #808080;
}
}
.right {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 29rpx;
// color: #DD2C40;
}
}
}
.active {
background-color: #0693F5 !important;
color: white !important;
}
.heade {
height: 300rpx;
width: 100%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: PingFang SC, PingFang SC;
font-weight: 800;
font-size: 58rpx;
color: #000000;
position: relative;
image {
width: 153rpx;
margin-bottom: 10rpx;
}
.shiftTo {
position: absolute;
width: 154rpx;
height: 58rpx;
background: #0693F5;
border-radius: 29rpx 0rpx 0rpx 29rpx;
right: 0;
bottom: 57rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 27rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
}
.cat_row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 59rpx;
padding: 0 20rpx;
box-sizing: border-box;
.cat_title {
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 31rpx;
color: #000000;
}
.cat_right {
display: flex;
align-items: center;
.cat_item {
width: 100rpx;
height: 38rpx;
background: #D9D9D9;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 26rpx;
margin-left: 10rpx;
color: #808080;
}
}
}
.red {
color: #DD2C40;
}
.green {
color: #008000;
}
</style>第二个:
<template>
<div class='pageBg'>
<u-navbar leftIconColor='#fff' :leftIconSize="28" :title="this.titleName" :bgColor="bgColor" :placeholder='true'
@leftClick='$navigateBack'>
<view slot="right" class="navbar-username">
<view class="right-section">
<text :class="$base.getEnvColor()" class="username">{{$get_userName()}}</text>
</view>
</view>
</u-navbar>
<view class="h10"></view>
<u--form :model="formData" ref="formDataRef" :borderBottom='false' labelAlign='center' class='bgf p10'
:rules="rules">
<u-form-item label="设备ID" :labelWidth='100' prop="machine" class="required">
<FuzzySearchPicker v-model="formData.machine" ref="machinex" :options="machineShowList" valueName="name"
:onSelect="getMachine" title="请选择设备" />
</u-form-item>
<u-form-item label="工站" :labelWidth='100' prop="oper" class="required">
<template v-if="operOnlyOne">
<u-input v-model="operName" disabled />
</template>
<template v-else>
<FuzzySearchPicker v-model="formData.oper" ref="operx" :options="operShowList" valueName="name"
:onSelect="getOper" title="请选择工站" />
</template>
</u-form-item>
<u-form-item label="班次" :labelWidth='100' prop="className" class="required">
<FuzzySearchPicker v-model="formData.className" ref="classx" :options="classesShowList" valueName="name"
:onSelect="getClasses" title="请选择班次" />
</u-form-item>
<view v-show="isShowForm">
<!-- <u-form-item v-show="formData.oper=='CM3100'" label="任务号" :labelWidth='100' prop="REQUESTTASKNAME"
class="required">
<u--input v-model="formData.REQUESTTASKNAME" border="surround" disabled />
<u-button type="primary" style="width: 60px;margin-left: 10px;" text="选择" :color="bgColor"
@click="search();isShowForm=false"></u-button>
</u-form-item> -->
<!-- <view class="mt10 mb10">
<u-button type="primary" class="" text="重新选择" :color="bgColor" @click="search();isShowForm=false"></u-button>
</view> -->
<u-form-item v-show="formData.oper=='CM3100'" label="任务" :labelWidth='100'>
<view>
<u-button type="primary" style="width: 100px;" text="重新选择" :color="bgColor"
@click="search();isShowForm=false"></u-button>
</view>
</u-form-item>
<u-form-item label="SheetID" :labelWidth='100' prop="panelId" class="required">
<FuzzySearchPicker v-model="formData.panelId" ref="productx" :options="productShowList"
valueName="name" :onSelect="getProduct" @searchNoData="onQuery" title="请选择SheetId" />
</u-form-item>
<view v-if="formData.panelId && formData.rework_state=='Y'" class="red tright">此产品为重工产品！</view>
<u-form-item label="MaskID" :labelWidth='100' prop="maskId" class="required">
<!-- <u--input v-model="formData.maskId" border="surround"
@blur="changeMaskID" clearable /> -->
<u--input v-model="formData.maskId" border="surround" @blur="changeMaskID" clearable />
</u-form-item>
<!-- <u-form-item label="工单ID" :labelWidth='100' prop="productRequestName" class="required">
<FuzzySearchPicker v-model="formData.productRequestName" ref="orderx"
:options="orderShowList | filterList(formData.generational_line,formData.job_product_request_type,formData.product_spec_name)"
valueName="name" :onSelect="getOrder" title="请选择工单" />
</u-form-item> -->
<u-form-item label="工单ID" :labelWidth='100'>
<u--input v-model="formData.productRequestName" border="surround" disabled />
</u-form-item>
<u-form-item label="工艺流程" :labelWidth='100' prop="processflow_name">
<u--input :value="getProcessflowDesc(formData.processflow_name)" border="surround" disabled />
</u-form-item>
<u-form-item label="膜层" :labelWidth='100' prop="coatingLayer">
<u--input :value="formData.coatingLayer" border="surround" disabled />
</u-form-item>
<!-- 新增：物料条码显示 -->
<u-form-item label="物料条码" :labelWidth='100'>
<u--input v-model="materialBarcode" border="surround" disabled placeholder="自动带出物料条码" />
</u-form-item>
<u-form-item label="项目号" :labelWidth='100' prop="project_name">
<u--input v-model="formData.project_name" border="surround" disabled placeholder="" />
</u-form-item>
<u-form-item label="膜层" :labelWidth='100' prop="coating_layer">
<u--input v-model="formData.coating_layer" border="surround" disabled placeholder="" />
</u-form-item>
<u-form-item label="图纸信息" :labelWidth='100' prop="drawing_name">
<u--input v-model="formData.drawing_name" border="surround" disabled placeholder="" />
</u-form-item>
<u-form-item label="设备图纸信息" :labelWidth='100' prop="machine_drawing_name">
<u--input v-model="formData.machine_drawing_name" border="surround" disabled placeholder="" />
</u-form-item>
<u-form-item label="记录不良" :labelWidth='100'>
<select-with-level v-model="selectDefects" ref="selectWithLevel_RecordNG" :formData="formData"
badType="RecordNG" style="width: 100%;" :options="defectShowList" :levelOptions="[
{ label: 'NG', value: 'NG' },
{ label: 'OK', value: 'OK' },
]" mode="multiple" placeholder="可正常流转" :maxVisibleTags="2" @blur="defectSelected" />
</u-form-item>
<u-form-item v-show="true || (formData.panelId && formData.rework_state!='Y') || isBaofei" label="不良NG"
:labelWidth='100'>
<select-with-level v-model="selectDefectsNG" ref="selectWithLevel_NG" :formData="formData"
badType="NG" style="width: 100%;" :options="defectShowList" :levelOptions="[
{ label: 'NG', value: 'NG' },
{ label: 'OK', value: 'OK' },
]" mode="multiple" placeholder="转至FA站点" :maxVisibleTags="2" @blur="defectSelectedNG" />
</u-form-item>
<u-form-item label="生产类型" :labelWidth='100' prop="ProductionType">
<!-- <u-radio-group placement="row" v-model="formData.ProductionType">
<view class="chooseMaterialPlan">
<u-radio label="量产" name="PP"></u-radio>
<u-radio label="测试" name="Dummy"></u-radio>
<u-radio label="送样" name="Sample"></u-radio>
<u-radio label="退货" name="RT"></u-radio>
</view>
</u-radio-group> -->
<u-tag v-if="formData.ProductionType" :text="formData.ProductionType" plain shape="circle"> </u-tag>
<text v-else class="cloc f14">暂无</text>
<!-- <u--input v-model="formData.drawingName" border="surround" clearable/> -->
</u-form-item>
<u-form-item label="订单类型" :labelWidth='100'>
<u-tag v-if="formData.order_name" :text="formData.order_name" plain shape="circle"> </u-tag>
<text v-else class="cloc f14">暂无</text>
</u-form-item>
<u-form-item label="备注" :labelWidth='100' :class="{'required':selectDefectsNG.length>0}">
<u--input v-model="formData.comment" border="surround" clearable>
</u--input>
</u-form-item>
</view>
</u--form>
<view v-if="!isShowForm">
<view v-for="(v,o) in task_queued_list" :key="o" @click="selectCard(v,o)"
class="list_card bgf m10 border_bottom_ed br12" style="overflow: hidden;word-break: break-all;">
<view class="formBox f16 p10 border_bottom_ed clo8">
<view class="flexBetween">
<view class="nowrap">工单号</view>
<view class="blue flex1 ml10 f18 fb ">
<text>{{v.product_request_name || '-'}}</text>
</view>
</view>
<view class="flexBetween">
<view class="nowrap">SheetID</view>
<view class="clo3 flex1 ml10 alignCenter">
<text>{{v.sheet_id || '-'}}</text>
<u-tag v-if="v.sheet_id&& v.rework_state=='Y'" text="重工" type="error" shape="circle"
class="ml10"></u-tag>
</view>
</view>
<view class="flexBetween">
<view class="nowrap">MaskID</view>
<view class="clo3 flex1 ml10 ">{{v.mask_id || '-'}}</view>
</view>
<!-- <view class="flexBetween">
<view class="nowrap">任务号</view>
<view class="blue flex1 ml10 f18 fb">{{v.name || '-'}}</view>
</view> -->
<view class="flexBox" style="gap: 10px;">
<view class="flexBetween w50p">
<view class="nowrap">优先级</view>
<!-- <view class="clo3 flex1 ml10">{{v.priority || '-'}}</view> -->
<view class="clo3 flex1 ml10 fb">
<u-tag v-if="v.priority" :text="v.priority" shape="circle"></u-tag>
<text v-else>-</text>
</view>
</view>
<view class="flexBetween w50p">
<view class="nowrap">膜层</view>
<view class="clo3 flex1 ml10">{{v.coating_layer || '-'}}</view>
</view>
</view>
<view class="flexBox" style="gap: 10px;">
<view class="flexBetween w50p">
<view class="nowrap">客户</view>
<view class="clo3 flex1 ml10">{{v.customer_code || '-'}}</view>
</view>
<view class="flexBetween w50p">
<view class="nowrap">项目</view>
<view class="clo3 flex1 ml10">{{v.project_code || '-'}}</view>
</view>
</view>
</view>
</view>
<u-empty v-if="task_queued_list.length==0" mode="list"></u-empty>
<u-loadmore :status="pageData.status" />
</view>
<view v-show="isShowForm" class="blockTitle mt10">产品不良代码列表</view>
<view v-show="isShowForm" class="buliang bgf">
<uni-table border emptyText="暂无更多数据">
<uni-tr>
<uni-th align="center">工站</uni-th>
<uni-th align="center">不良代码</uni-th>
<uni-th align="center">不良说明</uni-th>
<uni-th align="center">判级</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in productDefectList" :key="index">
<uni-td align="center">
<view class="operation-code">{{ item.operation_name || '-' }}</view>
<view v-if="getOperDesc(item.operation_name)" class="operation-desc">
{{ getOperDesc(item.operation_name) }}
</view>
</uni-td>
<uni-td align="center">
<view class="blue active_t" @click="$base.copy(item.defect_name)">{{ item.defect_name || '-' }}
</view>
</uni-td>
<uni-td align="center">{{ item.defect_description || '-' }}</uni-td>
<uni-td align="center">{{ item.judge || '-' }}</uni-td>
</uni-tr>
</uni-table>
</view>
<!-- 锁定 -->
<!-- <u-button type="primary" class="lockoutClass" text="进站" :color="bgColor" @click="trackIn"></u-button> -->
<view class="h100"></view>
<view class="float-button p10 bgf">
<u-button type="primary" class="" text="进站" :color="bgColor" @click="trackIn"></u-button>
</view>
<Login ref="loginRef" :visible.sync="showLogin" :curuiright="curuiright" :onFunction="trackInOut" />
<u-modal :show="showSuccessModal" title="操作成功" :content="successModalContent"
@confirm="showSuccessModal = false"></u-modal>
<u-modal :show="showErrorModal" title="提示" :content="errorModalContent"
@confirm="showErrorModal = false"></u-modal>
</div>
</template>
<script>
import {
operListByMachine,
TrapMachine,
InspectionMachine,
GetAllShiftList,
defect_name_list_01_defect,
product_request_info_01_all,
product_info_01_8,
product_info_01_,
product_request_info_01_1,
CLT_PRODUCT_TRACKINOUT,
TrackinProduct,
TrackinProducts,
product_request_OpenMaskFlow,
TrackinProductzw,
product_material_list,
user_name
} from '../../common/api.js'
import FuzzySearchPicker from '../../components/FuzzySearchPicker';
import SelectWithLevel from '@/components/judgeSelect.vue';
import Login from '../../components/login.vue';
import {
debounce
} from 'lodash';
export default {
components: {
FuzzySearchPicker,
Login,
SelectWithLevel
},
data() {
return {
autoFocus: false,
showList: [],
titleName: "",
showLogin: false,
showSuccessModal: false,
successModalContent: '',
showErrorModal: false,
errorModalContent: '',
curuiright: "",
operShowList: [], //设备下拉框
machineShowList: [],
selectDefects: [],
selectDefectsNG: [],
defectShowList: [],
classesShowList: [],
panels: [],
lastValidValue: '',
productRequestName: "",
orderShowList: [],
customName: "",
bgColor: this.$config.themeStyle.bgColor,
// 拖动相关数据
scrollLeft: 0,
translateX: 0,
touchStartX: 0,
touchStartY: 0,
isDragging: false,
lastTouchX: 0,
// 表单数据
formData: {
username: uni.getStorageSync("userName"),
// oper: "CM3100", //站点
oper: "", //站点
machine: '', //设备
panelId: '', //原产品ID
className: "", //班次
judge: "", //判级
maskId: "", //maskId
comment: "", //备注
ProductionType: "PP",
},
showLoadingTitle: "正在加载中",
rules: {
oper: [{
required: true,
message: '请选择工站',
trigger: ['input', 'change'],
}],
machine: [{
required: true,
message: '请选择设备ID',
trigger: ['input', 'change'],
}],
productRequestName: [{
required: true,
message: '请选择工单ID',
trigger: ['input', 'change'],
}],
panelId: [{
required: true,
message: '请输入产品ID',
trigger: ['input', 'change'],
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('请输入产品ID'));
} else {
callback();
}
}
}],
maskId: [{
required: true,
message: '请输入MaskID',
trigger: ['input', 'change'],
}],
className: [{
required: true,
message: '请选择班次',
trigger: ['input', 'change'],
}],
ProductionType: [{
required: true,
message: '请选择生产类型',
trigger: ['input', 'change'],
}],
},
productShowList: [], // 产品下拉框数据
machinePickerAutoShow: false, // 控制设备下拉自动弹出
productPickerAutoShow: false, // 控制产品ID下拉自动弹出
operOnlyOne: false,
operName: '',
productDefectList: [], // 产品不良代码列表
materialBarcode: '', // 新增：物料条码
operDescMap: {}, // 工站编号-描述映射
userDisplayName: '', // 用户显示姓名
task_queued_list: [],
isShowForm: true, //1s曝光先显示任务号列表，2s展示表单。
//分页加载
pageData: {
pageIndex: 1,
pageSize: 15,
loading: false, //加载中
finished: false, //是否完成
status:''
}
}
},
watch: {
'formData.oper': {
handler(newVal) {
if (newVal && newVal.trim() !== '' && this.$refs.formDataRef) {
this.$refs.formDataRef.clearValidate('oper');
}
if (newVal == 'CM3100') {
this.isShowForm = false;
} else {
this.isShowForm = true;
}
},
immediate: true
},
'formData.machine': {
handler(newVal) {
if (newVal && newVal.trim() !== '' && this.$refs.formDataRef) {
this.$refs.formDataRef.clearValidate('machine');
}
},
immediate: true
},
'formData.productRequestName': {
handler(newVal) {
if (newVal && newVal.trim() !== '' && this.$refs.formDataRef) {
this.$refs.formDataRef.clearValidate('productRequestName');
}
},
immediate: true
},
'formData.panelId': {
handler(newVal) {
if (newVal && newVal.trim() !== '' && this.$refs.formDataRef) {
this.$refs.formDataRef.clearValidate('panelId');
}
},
immediate: true
},
'formData.maskId': {
handler(newVal) {
if (newVal && newVal.trim() !== '' && this.$refs.formDataRef) {
this.$refs.formDataRef.clearValidate('maskId');
}
},
immediate: true
},
'formData.className': {
handler(newVal) {
if (newVal && newVal.trim() !== '' && this.$refs.formDataRef) {
this.$refs.formDataRef.clearValidate('className');
}
},
immediate: true
}
},
created() {
this.getMahcineShowList(); // 只加载设备
this.getAllShiftItemList();
this.getOrderShowList();
this.fetchAllOperationDesc(); // 获取全工厂工站描述
// this.request_task_queued_list();
this.search();
},
onShow() {
},
onLoad(options) {
if (options.title) {
this.titleName = options.title
}
if (options.right) {
this.curuiright = options.right
}
// 页面加载完成后触发所有必填项的验证，显示红色边框和错误提示
this.$nextTick(() => {
this.$refs.formDataRef.validate();
});
},
onUnload() {
uni.hideLoading();
},
onHide() {
uni.hideLoading();
},
// onReady() {
// // 页面加载完成后，自动展开设备ID下拉框
// this.$nextTick(() => {
// if (this.$refs.machinex) {
// this.$refs.machinex.showPicker = true;
// }
// });
// },
computed: {
isBaofei() {
return this.formData.panelId && this.formData.rework_state == 'Y' && ["CM1600", "CM2600"].indexOf(this
.formData.oper) != -1;
}
},
filters: {
filterList(val, line, type, product_spec_name = '') {
// console.log('过滤器：', val, line, type)
if (!val || !val[0] || val[0].length == 0) {
return val;
}
let arr = val[0];
//首字母相同过滤
let char = product_spec_name && product_spec_name.substr(0, 1);
let char2 = product_spec_name && product_spec_name.substr(0, 2);
// 'SM'不进行过滤
if (char && char2 != 'SM') {
arr = arr.filter(v => {
return v.product_spec_name.substr(0, 1) == char;
})
}
console.log('过滤器：', val, line, type, product_spec_name)
//G86判断过滤
return [arr.filter(v => {
if (line == "G86") {
if (type == "G86") {
return v.generational_line == "G86" && v.job_product_request_type == "G86";
} else {
return v.generational_line == "G86" && v.job_product_request_type != "G86";
}
} else {
return v.generational_line != "G86";
}
})]
},
},
async onPullDownRefresh() {
console.log("下拉刷新")
setTimeout(()=>{
this.search();
uni.stopPullDownRefresh();
},1500)
},
onReachBottom() {
console.log("上拉加载更多",this.isShowForm)
if(this.isShowForm){
return;
}
if (!this.pageData.finished) {
this.pageData.pageIndex++;
this.getList();
}
},
methods: {
search() {
this.pageData.pageIndex = 1
this.task_queued_list = [];
this.getList();
},
getList() {
if (this.pageData.loading) return;
let d = {
pageIndex: this.pageData.pageIndex,
pageSize: this.pageData.pageSize,
// carriername: this.formData.CARRIERNAME,
}
this.pageData.finished = false;
this.pageData.loading = true;
this.pageData.status = 'loading'
uni.showLoading({
title: '加载中'
});
console.log(d)
this.$api.mask_task_queued_list(d).then(res => {
if (res.code === 0) {
let rows = res.data.row || []
// rows=rows.concat(rows).concat(rows).concat(rows);
let task_queued_list = rows.sort((a, b) => b.priority - a.priority); //排序
// let list = res.data.list || [];
let list = task_queued_list.slice((d.pageIndex - 1) * d.pageSize, d.pageIndex * d.pageSize);//分页获取
if (list.length >= d.pageSize) {
this.pageData.finished = false;
} else {
this.pageData.finished = true;
this.pageData.status = 'nomore'
}
if (d.pageIndex == 1) {
this.task_queued_list = list;
} else {
this.task_queued_list = this.task_queued_list.concat(list);
}
}
}).finally((_) => {
uni.hideLoading();
this.pageData.loading = false;
});
},
selectCard(v, o) {
this.isShowForm = true;
this.$set(this.formData, 'REQUESTTASKNAME', v.name);
this.$set(this.formData, 'priority', v.priority);
this.$set(this.formData, 'productRequestName', v.product_request_name);
this.$set(this.formData, 'project_name', v.project_code);
this.$set(this.formData, 'drawingName', v.project_code);
// this.$set(this.formData, 'customName', v.customer_code);
this.customName = v.customer_code
this.$set(this.formData, 'coatingLayer', v.coating_layer);
this.$set(this.formData, 'ProductionType', v.product_request_type)
this.$set(this.formData, 'order_name', v.order_name)
//
this.$set(this.formData, 'sheet_id', v.sheet_id)
this.$set(this.formData, 'mask_id', v.mask_id)
//清空sheetID和maskID输入框
this.$set(this.formData, 'panelId', '');
this.$set(this.formData, 'maskId', '');
},
async request_task_queued_list() {
// let res = await this.$api.request_task_queued_list({
let res = await this.$api.mask_task_queued_list({
carriername: this.formData.CARRIERNAME
})
if (res.code === 0) {
const rows = res.data.row || []
this.task_queued_list = rows.sort((a, b) => b.priority - a.priority);
// if (rows.length > 0) {
// }else{
// }
}
},
async changeMaskID() {
console.log('blur')
if (!this.formData.maskId) return;
if (this.formData.mask_id && this.formData.mask_id != this.formData.maskId) {
this.showError(
`MaskID与当前任务的MaskID不一致！\nMaskID：${this.formData.maskId}\n当前任务MaskID：${this.formData.mask_id}`
);
this.$set(this.formData, 'maskId', '');
return;
}
if (this.formData.maskId.trim() == '') {
this.showError(`Mask ID不可为空！\n`)
this.$set(this.formData, 'maskId', '')
return;
}
if (this.formData.maskId == this.formData.panelId) {
this.showError(`Mask ID不能跟Sheet ID相同！\n`)
this.$set(this.formData, 'maskId', '')
return;
}
if (this.formData.customer_product_id && this.formData.customer_product_id != this.formData.maskId) {
this.showError(
`此SheetID：${this.formData.panelId}已经绑定MaskID：${this.formData.customer_product_id}！\n`)
this.$set(this.formData, 'maskId', '')
return;
}
let res = await this.$api.frame_mask_list({
productName: this.formData.maskId
})
if (res.code === 0 && res.data.row && res.data.row.length > 0) {
let val = res.data.row[0];
if (!val.pqc_result) {
// this.showError('IQC外观检测未做！')
this.$findProduct(this.formData.maskId, 'IQC外观检测未做！\n')
} else if (val.pqc_result == 'NG') {
// this.showError('IQC外观检测未通过！')
this.$findProduct(this.formData.maskId, 'IQC外观检测未通过！\n')
}
// else if(!val.pqc_size_result){
// this.showError('IQC尺寸检测未做！')
// this.$findProduct(this.formData.maskId,'IQC尺寸检测未做！\n')
// }else if(val.pqc_size_result =='NG'){
// this.showError('IQC尺寸检测未通过！')
// this.$findProduct(this.formData.maskId,'IQC尺寸检测未通过！\n')
// }
if (val.original_lot_name && val.original_lot_name != this.formData.panelId) {
// this.showError(
// `此MaskID：${this.formData.maskId}已绑定其他SheetID：${val.original_lot_name}，若要继续操作，请先解绑此MaskID！`
// )
this.$findProduct(this.formData.maskId,
`此MaskID：${this.formData.maskId}已绑定其他SheetID：${val.original_lot_name}，若要继续操作，请先解绑此MaskID！\n`
)
this.$set(this.formData, 'maskId', '')
return;
}
} else {
// this.showError('IQC外观检测未做！')
this.$findProduct(this.formData.maskId, 'IQC外观检测未做！\n')
}
},
clearAll() {
this.$refs['selectWithLevel_RecordNG']?.clearAll();
this.$refs['selectWithLevel_NG']?.clearAll();
},
//图片集合上传
uploadImgList() {
let urlList = [];
this.selectDefects?.forEach(v => {
v?.urlList?.forEach(item => {
urlList.push({
url: item.link,
})
})
})
this.selectDefectsNG?.forEach(v => {
v?.urlList?.forEach(item => {
urlList.push({
url: item.link,
})
})
})
if (urlList.length == 0) {
return;
}
this.$api.CLT_PRODUCT_EVENT({
COMMANDTYPE: 'CheckPic',
PRODUCTID: this.formData.panelId, //产品ID
urlList, //结构：[{url:''}]
})
},
showError(message) {
this.errorModalContent = message;
this.showErrorModal = true;
},
showSuccess(message) {
this.successModalContent = message;
this.showSuccessModal = true;
},
leftClick() {
uni.switchTab({
url: '/pages/productAction/index'
});
},
quickBack() {
uni.navigateBack();
},
async getOrderShowList() {
let productRequestNameList = []
product_request_OpenMaskFlow()
.then(res => {
this.$refs.orderx.searchText = ''
if (res.code === 0) {
const rows = res.data.row
if (rows.length > 0) {
rows.forEach(data => {
data.label = data.name + "(" + data.product_spec_name + ")"
data.name = data.name
})
this.orderShowList.push(rows)
}
}
}).catch(res => {
uni.hideLoading();
res.msg && this.showError(res.msg)
})
},
getProcessflowDesc(name) {
if (!name) return '-';
if (name === 'SheetFont') return 'SheetFont（前段）';
if (name === 'SheetFlow') return 'SheetFlow（中段）';
if (name.includes('Mask')) return name + '（后段）';
return name;
},
async getOrder(e) {
if (!!e.value[0]) {
this.productRequestName = e.value[0].name
this.formData.productRequestName = e.value[0].name
// 立即清除验证状态
this.$nextTick(() => {
this.$refs.formDataRef.clearValidate('productRequestName');
});
await product_request_info_01_1({
name: this.productRequestName,
factoryname: uni.getStorageSync('factory')
}).then(res => {
this.requestCheck = false
if (res.code === 0) {
const rows = res.data.row
console.log(rows, 'rows')
if (rows.length > 0) {
this.customName = rows[0].customer
console.log(rows[0], 'rows[0]')
this.formData.processflow_name = rows[0].processflow_name
//this.formData.drawingName = rows[0].drawingName //工单/产品中的图纸信息
this.formData.coatingLayer = rows[0].coatingLayer // 工单/产品中的膜层
} else {
this.showError('工单有误')
}
} else {
this.showError(res.msg)
}
uni.hideLoading();
}).catch(res => {
uni.hideLoading();
this.showError(res.msg)
})
} else {
this.showError('数据有误')
}
// 选择工单后，如果已经选择了工站，则获取产品列表
if (this.formData.oper) {
await this.getProductShowList();
}
},
// 设备选完后查工站
async getOperShowListByMachine(machineName) {
this.showToast();
await operListByMachine({
machinename: machineName,
factoryname: uni.getStorageSync("factory")
}).then(res => {
this.operShowList = [];
this.$set(this.formData, 'oper', '')
if (res.code === 0) {
const rows = res.data.row.map(data => ({
label: (data.operation_name || data.name || '') + (data.description ?
`(${data.description})` : ''),
name: data.operation_name || data.name || ''
}));
this.operShowList.push(rows);
if (rows.length === 1) {
this.operOnlyOne = true;
this.operName = rows[0].label;
this.$set(this.formData, 'oper', rows[0].name)
this.$nextTick(() => {
this.$refs.formDataRef.clearValidate('oper');
});
// 工站只有一个时，自动获取产品列表
this.getDefectShowList(this.formData.oper);
this.getProductShowList(); // 只获取，不弹出SheetID
} else {
this.operOnlyOne = false;
this.operName = '';
if (rows.length >= 2) {
this.$nextTick(() => {
if (this.$refs.operx) {
this.$refs.operx.showPicker = true;
}
});
}
}
} else {
this.showError(res.msg);
}
uni.hideLoading();
}).catch(res => {
uni.hideLoading();
this.showError(res.msg);
});
},
async getOper(e) {
if (!!e.value[0]) {
this.$set(this.formData, 'oper', e.value[0].name);
// 立即清除验证状态
this.$nextTick(() => {
this.$refs.formDataRef.clearValidate('oper');
});
this.productPickerAutoShow = true; // 工站切换后允许自动弹出产品ID下拉
// 选择工站后不弹设备ID下拉，不清空设备ID
await this.getDefectShowList(e.value[0].name)
// 选择工站后获取并显示产品列表
this.getProductShowList(); // 只获取，不弹出SheetID
} else {
this.showError('数据有误')
}
},
async getMahcineShowList() {
this.showToast();
await TrapMachine({
factoryname: uni.getStorageSync("factory")
}).then(res => {
this.machineShowList = [];
this.$refs.machinex.searchText = '';
if (res.code === 0) {
const rows = res.data.row;
rows.forEach(data => {
data.label = data.name + "(" + data.description + ")";
data.name = data.name;
});
this.machineShowList.push(rows);
// 自动弹出设备下拉
this.$nextTick(() => {
setTimeout(() => {
const picker = this.$refs.machinex;
if (picker) {
picker.showPicker = true;
}
}, 100);
});
} else {
this.showError(res.msg);
}
uni.hideLoading();
}).catch(res => {
uni.hideLoading();
this.showError(res.msg);
});
},
getMachine(e) {
if (!!e.value[0]) {
this.$set(this.formData, 'machine', e.value[0].name);
// 重新选择设备时清空工站信息
this.$set(this.formData, 'oper', '')
this.operOnlyOne = false;
this.operName = '';
this.getOperShowListByMachine(this.formData.machine);
this.$nextTick(() => {
this.$refs.formDataRef.clearValidate('machine');
});
this.autoFocus = true;
} else {
this.showError('数据有误');
}
},
async getDefectShowList(oper) {
this.showToast()
await defect_name_list_01_defect({
factoryname: uni.getStorageSync("factory"),
operationname: oper
}).then(res => {
this.defectShowList = []
this.selectDefects = []
this.selectDefectsNG = []
if (res.code === 0) {
const rows = res.data.row
let arr = rows.map(data => {
return {
label: data.defect_description + "[" + data.defect_name +
"]",
value: data.defect_name,
};
})
this.defectShowList = arr
} else {
this.showError(res.msg)
}
uni.hideLoading();
}).catch(res => {
uni.hideLoading();
this.showError(res.msg)
})
},
defectSelected(val) {
this.selectDefects = val
},
defectSelectedNG(val) {
this.selectDefectsNG = val
},
getAllShiftItemList() {
// this.showToast()
GetAllShiftList({}).then(res => {
this.classesShowList = []
this.formData.className = ''
if (res.code === 0) {
const rows = res.data.row
const curRows = []
rows.forEach(data => {
// data.label = data.name + "(" + data.description + ")"
data.label = data.name
data.name = data.name
curRows.push(data)
})
this.classesShowList.push(curRows)
} else {
this.showError(res.msg)
}
uni.hideLoading()
}).catch(res => {
uni.hideLoading()
this.showError(res.msg)
})
},
getClasses(e) {
if (!!e.value[0]) {
this.$set(this.formData, 'className', e.value[0].name);
// 立即清除验证状态
this.$nextTick(() => {
this.$refs.formDataRef.clearValidate('className');
});
} else {
this.showError('数据有误')
}
},
// loding
showToast() {
uni.showLoading({
title: this.showLoadingTitle,
mask: true
});
},
// 获取产品列表数据
async getProductShowList(autoShow = true) {
this.showToast();
await TrackinProductzw({}).then(res => {
this.productShowList = [];
// this.$set(this.formData, 'panelId', '');
// if (this.$refs.productx) {
// this.$refs.productx.searchText = '';
// }
if (res.code === 0) {
const rows = res.data.row;
rows.forEach(data => {
data.label = data.name + (data.description ? `(${data.description})` : '');
// if (data.name == '25080002') {
// data.fa_pending = 'Y'
// }
if (data.fa_pending == 'Y' && data.pass_operation_state && data
.pass_operation_state != 'Y') {
data.label += '（测试工程师待处理）'
}
data.name = data.name;
});
this.productShowList = [rows];
} else {
this.showError(res.msg);
}
uni.hideLoading();
this.$nextTick(() => {
if (!autoShow) return;
// 如需自动弹出可在此补充
});
}).catch(res => {
uni.hideLoading();
this.showError(res.msg);
});
},
resetFormAfterProductIdChange() {
this.selectDefects = [];
this.selectDefectsNG = [];
this.productDefectList = [];
this.panels = [];
// 如有stationList等也可重置
// this.stationList = [...默认值];
},
// 选择产品
getProduct(e) {
if (!!e.value[0]) {
console.log('产品ID：', e)
if (this.formData.sheet_id && this.formData.sheet_id != this.formData.panelId) {
this.showError(
`SheetID与当前任务的SheetID不一致！\nSheetID：${this.formData.panelId}\n当前任务SheetID：${this.formData.sheet_id}`
);
this.$set(this.formData, 'panelId', '');
if (this.$refs.productx) {
this.$refs.productx.searchText = '';
this.$refs.productx.searchTextAll = '';
}
return;
}
this.$set(this.formData, 'generational_line', e.value[0].generational_line);
this.$set(this.formData, 'job_product_request_type', e.value[0].job_product_request_type);
this.$set(this.formData, 'product_spec_name', e.value[0].product_spec_name);
this.$set(this.formData, 'panelId', e.value[0].name);
this.$set(this.formData, 'rework_state', e.value[0].rework_state);
this.formData.customer_product_id = e.value[0].customer_product_id;
this.$set(this.formData, 'project_name', e.value[0].project_name); //膜层
this.resetFormAfterProductIdChange();
// 新增SheetID和MaskID重复校验
if (this.formData.panelId && this.formData.maskId && this.formData.panelId === this.formData.maskId) {
this.showError('SheetID和MaskID不能相同！');
this.formData.maskId = '';
return;
}
this.$nextTick(() => {
this.$refs.formDataRef.clearValidate('panelId');
});
this.checkPanelInfo(); // 验证产品信息
this.getProductDefects(); // 获取产品不良代码
// 新增：获取物料条码和膜层
this.materialBarcode = '';
this.formData.coatingLayer = '';
// 新增：获取物料条码
console.log(this.formData.oper, 'name', e.value[0])
// let val = e.value[0]
// if (val.product_request_name) {
// let name = val.product_request_name + (val.product_spec_name ? `(${val.product_spec_name})` : '')
// this.$refs.orderx.searchText = val.product_request_name
// this.$refs.orderx.searchTextAll = name
// this.$set(this.formData, 'productRequestName', val.product_request_name)
// }else{
// this.$set(this.formData, 'productRequestName', '')
// }
product_material_list({
name: this.formData.panelId
}).then(res => {
if (res.code === 0 && res.data.row && res.data.row.length > 0) {
// this.materialBarcode = res.data.row[0].source_material_id || '';
this.formData.coatingLayer = res.data.row[0].coating_layer || '';
let obj = res.data.row[0]
this.materialBarcode = obj.source_material_id || '';
this.$set(this.formData, 'coating_layer', obj.coating_layer);
this.$set(this.formData, 'drawing_name', obj.drawing_name);
this.$set(this.formData, 'machine_drawing_name', obj.machine_drawing_name);
// this.formData.source_material_id = obj.source_material_id
} else {
this.materialBarcode = '';
this.formData.coatingLayer = '';
this.$set(this.formData, 'coating_layer', '');
this.formData.drawing_name = '';
this.formData.machine_drawing_name = '';
// this.formData.source_material_id = '';
}
}).catch(() => {
this.materialBarcode = '';
this.formData.coatingLayer = '';
});
} else {
this.showError('数据有误');
}
},
async onQuery(val) {
this.$findProduct(val)
},
// 获取产品对应的不良代码
async getProductDefects() {
if (!this.formData.panelId) {
return;
}
const params = {
productname: this.formData.panelId,
factoryname: uni.getStorageSync("factory")
};
try {
const res = await bs_product_defect(params);
// 打印API参数和返回数据
console.log('bs_product_defect 查询参数:', params);
console.log('bs_product_defect 返回数据:', res);
// 新增：打印数据库查到的数据
console.log('bs_product_defect 数据库查到的数据:', res.data.row);
if (res.code === 0) {
const rows = res.data.row;
this.productDefectList = rows && rows.length > 0 ? rows : [];
// 新增：只在获取数据后打印一次，便于调试
console.log('productDefectList:', this.productDefectList);
console.log('当前 operDescMap:', this.operDescMap);
// 检查每个不良代码的工站编号
this.productDefectList.forEach((item, index) => {
console.log(`不良代码 ${index}:`, {
operation_name: item.operation_name,
hasDescription: !!this.operDescMap[item.operation_name],
description: this.operDescMap[item.operation_name]
});
});
} else {
this.productDefectList = [];
}
} catch (error) {
this.productDefectList = [];
}
},
checkPanelInfo: debounce(async function() {
this.showToast()
await product_info_01_({
name: String(this.formData.panelId.trim())
}).then(res => {
if (res.code === 0) {
const rows = res.data.row
if (rows.length > 0) {
rows.forEach(a => {
if (a.process_operation_name !== this.formData.oper && a
.fa_pending != 'Y') {
uni.hideLoading();
// uni.$u.toast(`产品所在工站${a.process_operation_name}与当前站点不一致`);
// 重置验证状态，确保后续输入能再次触发验证
this.$nextTick(() => {
this.$refs.formDataRef.clearValidate(
'panelId');
});
return;
}
})
this.panels = res.data.row.map(item => ({
productname: item.name,
maskid: this.formData.maskId
}))
uni.hideLoading()
} else {
uni.hideLoading()
this.showError('未找到产品')
// 重置验证状态，确保后续输入能再次触发验证
this.$nextTick(() => {
this.$refs.formDataRef.clearValidate('panelId');
});
}
} else {
uni.hideLoading()
this.showError('未找到产品' + res.msg)
// 重置验证状态，确保后续输入能再次触发验证
this.$nextTick(() => {
this.$refs.formDataRef.clearValidate('panelId');
});
}
}).catch(err => {
uni.hideLoading()
this.showError("产品查询异常：" + err.msg)
// 重置验证状态，确保后续输入能再次触发验证
this.$nextTick(() => {
this.$refs.formDataRef.clearValidate('panelId');
});
})
this.autoFocus = false
}, 500),
trackIn() {
this.$refs.formDataRef.validate().then(valid => {
if (valid) {
this.showLogin = true
}
})
},
async prodcut_iqc_result() {
let result = false;
let res = await this.$api.prodcut_iqc_result({
name: this.formData.panelId
})
if (res.code === 0) {
const rows = res.data.row || []
if (rows.length > 0) {
if (rows[0].pqc_result == 'NG') {
this.showError('此产品IQC 检测未通过，无法张网！')
} else {
result = true;
}
} else {
this.showError('没找到IQC 检测')
}
} else {
this.showError('此产品未过IQC 检测！')
}
return result;
// console.log(res, 'res,prodcut_iqc_result')
},
async trackInOut() {
// let result = await this.prodcut_iqc_result()
// // console.log(result,'result')
// if (!result) return;
uni.showLoading({
title: '正在入站请稍等...',
mask: true
});
if (this.formData.oper && this.formData.machine) {
const VSDefectList = this.selectDefects.map(item => ({
defectName: item.value || item.defectName,
// judge: item.level || item.grade || "NG", // 将grade改为judge，默认为NG
judge: "OK", // 将grade改为judge，默认为NG
defectCount: "1",
}));
const defectList = this.selectDefectsNG.map(item => ({
defectName: item.value || item.defectName,
judge: item.level || item.grade || "NG", // 将grade改为judge，默认为NG
defectCount: "1",
}));
let param = {
USERNAME: uni.getStorageSync('userName'),
FACTORYNAME: uni.getStorageSync('factory'),
Password: this.$refs.loginRef.form.password,
CommandType: "JudgeTrackIn",
MachineName: this.formData.machine,
OperationName: this.formData.oper,
ProductList: this.panels,
ClassName: this.formData.className,
// DefectList: defectList,
ProductRequestName: this.productRequestName || this.formData.productRequestName,
maskId: this.formData.maskId,
Comment: this.formData.comment,
ProductionType: this.formData.ProductionType,
VSDefectList: VSDefectList, //记录不良
DefectList: defectList, //不良ng
REQUESTTASKNAME: this.formData.REQUESTTASKNAME,
}
uni.hideLoading()
if (this.selectDefectsNG.length > 0 && this.formData.comment == '') {
this.showError('选择了不良NG必须填备注！')
return;
}
uni.showLoading({
title: '进站中...',
mask: true
});
this.uploadImgList(); //批量上传图片
await CLT_PRODUCT_TRACKINOUT(param).then(res => {
if (res.code === 0) {
this.showLogin = false;
uni.hideLoading();
this.showSuccess('进站成功!'); // 保持原有提示语
// 清空产品ID和不良代码
this.$set(this.formData, 'panelId', '');
this.selectDefects = [];
this.selectDefectsNG = [];
this.clearAll(); //清除不良的图片
this.selectDefects = [];
this.productDefectList = [];
this.getProductShowList(false); // 只刷新不弹出
this.isShowForm = false;
this.$nextTick(() => {
const picker = this.$refs.productx;
if (picker) {
picker.filterOptions = this.productShowList[0] || [];
if (typeof picker.handleInputChange === 'function') {
picker.handleInputChange();
}
}
});
} else {
uni.hideLoading();
this.showError(res.msg);
this.getProductShowList(); // 失败时也刷新
}
}).catch(res => {
uni.hideLoading()
this.showError(res.msg)
})
this.$set(this.formData, 'panelId', '');
this.selectDefects = [];
this.selectDefectsNG = [];
this.clearAll(); //清除不良的图片
this.$refs.refDefect.clear()
this.panels = []
} else {
uni.hideLoading()
this.showError('请输入相关数据再提交')
}
},
validateNumber() {
const reg = /^-?\d*\.?\d+$/;
if (this.formData.coatingLayer === '' || reg.test(this.formData.coatingLayer)) {
this.lastValidValue = this.formData.coatingLayer
} else {
this.$nextTick(() => {
this.formData.coatingLayer = this.lastValidValue
this.$forceUpdate()
this.showError('请输入有效数字')
});
}
},
onPanelIdInput() {
this.$refs.formDataRef.clearValidate('panelId');
},
onMaskIdInput() {
// 新增SheetID和MaskID重复校验
if (this.formData.panelId && this.formData.maskId && this.formData.panelId === this.formData.maskId) {
this.showError('SheetID和MaskID不能相同！');
this.formData.maskId = '';
return;
}
this.$refs.formDataRef.clearValidate('maskId');
},
// 拖动相关方法
onTouchStart(e) {
const touch = e.touches[0];
this.touchStartX = touch.clientX;
this.touchStartY = touch.clientY;
this.lastTouchX = touch.clientX;
this.isDragging = false;
},
onTouchMove(e) {
const touch = e.touches[0];
const deltaX = touch.clientX - this.touchStartX;
const deltaY = touch.clientY - this.touchStartY;
// 判断是否为水平拖动
if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
this.isDragging = true;
e.preventDefault();
const moveX = touch.clientX - this.lastTouchX;
this.translateX += moveX;
this.lastTouchX = touch.clientX;
// 限制拖动范围
const minTranslateX = -400; // 根据内容宽度调整
const maxTranslateX = 0;
this.translateX = Math.max(minTranslateX, Math.min(maxTranslateX, this.translateX));
}
},
onTouchEnd(e) {
if (this.isDragging) {
this.isDragging = false;
// 可以在这里添加惯性滚动效果
}
},
async fetchAllOperationDesc() {
const res = await this.$api.operation_list_1();
if (res.code === 0) {
const rows = res.data.row || [];
rows.forEach(data => {
this.operDescMap[data.name] = data.description || '';
});
}
},
getOperDesc(name) {
if (!name) return '';
const key = String(name).trim();
const result = this.operDescMap[key] || '';
return result;
},
}
}
</script>
<style lang="scss" scoped>
.multi-select-container {
width: 100%;
}
.pageBg {
// background-color: white;
height: 100%;
min-height: 100vh;
.urowClass {
.u-button {
width: 70% !important;
margin: 8px auto;
}
}
.formCheckClass {
padding-right: 34rpx;
}
.formTableClass {
// padding: 12rpx;
// width: 100%;
}
.lockoutClass {
margin-top: 40rpx;
width: 97% !important;
margin-bottom: 40rpx;
}
.uni-table-th {
width: 46px;
flex-flow: wrap;
color: #606266;
}
.uni-table-td {
width: 46px;
word-break: break-all;
position: relative;
}
.uni-group {
display: flex;
position: absolute;
top: 50%;
display: flex;
transform: translate(0%, -50%);
}
// NG模态框
.ngDefault {
width: 100%;
}
}
::v-deep {
.uni-table {
// width: 310px !important;
// min-width: 310px !important;
}
.u-form-item__body__left__content__required {
left: 12rpx !important;
}
.reqClass {
.u-form-item__body__left__content__label {
margin-left: 20rpx;
}
}
.u-form-item__body__left {
height: 37px;
}
.u-form-item__body {
padding: 10rpx 0 !important;
}
// 必填项验证样式
.u-form-item--error {
.u--input__input {
border-color: #fa3534 !important;
}
}
.u-form-item--error .u-form-item__body__left__content__label {
color: #fa3534 !important;
}
.u-form-item--error .u--input {
border-color: #fa3534 !important;
}
.u-form-item--error .u--input__input {
border: 1px solid #fa3534 !important;
}
// 不良代码列表样式
.defect-list-container {
width: 100%;
border: 1px solid #dcdfe6;
border-radius: 4px;
background-color: #fff;
}
.defect-list-header {
display: flex;
background-color: #f5f7fa;
border-bottom: 1px solid #dcdfe6;
padding: 8px 12px;
font-weight: bold;
font-size: 14px;
}
.header-item {
flex: 1;
text-align: center;
color: #606266;
}
.defect-list-content {
max-height: 200px;
overflow-x: auto;
}
.defect-list-item {
display: flex;
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
font-size: 12px;
min-width: 600px;
}
.defect-list-item:last-child {
border-bottom: none;
}
.list-item {
flex: 1;
text-align: center;
color: #303133;
padding: 0 4px;
word-break: break-all;
}
}
.defect-list-content-horizontal {
white-space: nowrap;
width: 100%;
min-width: 500px;
overflow: hidden;
user-select: none;
touch-action: pan-x;
}
.defect-list-table {
display: inline-block;
min-width: 500px;
/* 4列布局 */
transition: transform 0.1s ease-out;
will-change: transform;
}
.defect-list-header,
.defect-list-item {
display: flex;
flex-direction: row;
min-width: 500px;
}
.header-item,
.list-item {
flex: 1;
text-align: center;
padding: 0 4px;
box-sizing: border-box;
font-size: 12px;
}
/* 工站列宽度较小 */
.defect-list-item .list-item:first-child {
flex: 0 0 80px;
min-width: 80px;
}
/* 不良代码列宽度较小 */
.defect-list-item .list-item:nth-child(2) {
flex: 0 0 60px;
min-width: 60px;
}
/* 不良说明列 */
.defect-list-item .list-item:nth-child(3) {
flex: 0 0 150px;
min-width: 150px;
}
/* 判级列 */
.defect-list-item .list-item:nth-child(4) {
flex: 0 0 40px;
min-width: 40px;
}
/* 表头宽度与数据列保持一致 */
.defect-list-header .header-item:first-child {
flex: 0 0 80px;
min-width: 80px;
}
.defect-list-header .header-item:nth-child(2) {
flex: 0 0 60px;
min-width: 60px;
}
.defect-list-header .header-item:nth-child(3) {
flex: 0 0 150px;
min-width: 150px;
}
.defect-list-header .header-item:nth-child(4) {
flex: 0 0 40px;
min-width: 40px;
}
/* 工站列的特殊样式 */
.operation-info {
display: flex;
flex-direction: column;
align-items: center;
}
.operation-code {
font-weight: bold;
color: #303133;
font-size: 11px;
}
.operation-desc {
color: #666;
font-size: 10px;
line-height: 1.2;
margin-top: 1px;
}
/* 不良代码列的特殊样式 */
.defect-code-item {
background-color: #f0f0f0;
padding: 2px 4px;
border-radius: 3px;
font-size: 11px;
color: #606266;
font-weight: bold;
margin: 0 2px;
}
.defect-desc {
font-size: 11px;
line-height: 1.3;
word-break: break-word;
}
.quick-back-area {
display: none;
position: fixed;
left: 0;
top: 0;
width: 80px;
height: 80px;
z-index: 9999;
opacity: 0;
}
.chooseMaterialPlan {
width: 100%;
display: flex;
justify-content: space-between;
}
.formBox>view {
margin-bottom: 12px;
}
.formBox>view:last-child {
margin-bottom: 0;
}
</style>
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
6
0- 0
已为社区贡献6条内容
所有评论(0)