uni-app vue3 常用页面组合式api方式

全局api请求封装 utils/request.js

import config from '@/utils/config';
// 统一 POST 请求方法示例
const post = (url, data, options = {}) => {url = config.url + url;console.log("uni.getStorageSync('token')==========", uni.getStorageSync('token'));const defaultOptions = {method: 'POST',header: {'Content-Type': 'application/json'// ,'token': `${uni.getStorageSync('token')}`}};const finalOptions = { ...defaultOptions, ...options };// 如果服务器需要 token，可以在这里添加 Authorization 头部if (!finalOptions.header['token'] && uni.getStorageSync('token')) {finalOptions.header['token'] = `${uni.getStorageSync('token')}`;}// if (!finalOptions.header['Authorization'] && uni.getStorageSync('token')) {//   finalOptions.header['Authorization'] = `Bearer ${uni.getStorageSync('token')}`;// }console.log('POST 请求参数=====', JSON.stringify(data));console.log('POST 请求header=====', finalOptions);console.log('POST url=====', url);return new Promise((resolve, reject) => {uni.request({...finalOptions,url: url,data: data,success: (res) => {console.log('请示结果=============', res);if (res.statusCode === 200) {resolve(res.data);} else {reject(new Error(`POST请求失败，状态码：${res.statusCode}`));uni.showToast({icon: 'none',title: `POST请求失败，状态码：${res.statusCode}`});}},fail: (err) => {reject(err);// 网络错误或其他请求失败的情况uni.showToast({icon: 'none',title: 'POST系统异常,请稍后再试'});}});});
};
// 统一 GET 请求方法示例
const get = (url, data, options = {}) => {url = config.url + url;console.log("uni.getStorageSync('token')==========", uni.getStorageSync('token'));const defaultOptions = {method: 'GET',header: {'Content-Type': 'application/json'// ,'token': `${uni.getStorageSync('token')}`}};const finalOptions = { ...defaultOptions, ...options };// 如果服务器需要 token，可以在这里添加 Authorization 头部if (!finalOptions.header['token'] && uni.getStorageSync('token')) {finalOptions.header['token'] = `${uni.getStorageSync('token')}`;}// if (!finalOptions.header['Authorization'] && uni.getStorageSync('token')) {//   finalOptions.header['Authorization'] = `Bearer ${uni.getStorageSync('token')}`;// }console.log('GET 请求header=====', finalOptions);console.log('GET url=====', url);console.log('GET 请求参数=====', data);return new Promise((resolve, reject) => {uni.request({...finalOptions,url: url,data: data,success: (res) => {console.log('GET请示结果=============', res);if (res.statusCode === 200) {resolve(res.data);} else {reject(new Error(`GET请求失败，状态码：${res.statusCode}`));uni.showToast({icon: 'none',title: `GET请求失败，状态码：${res.statusCode}`});}},fail: (err) => {reject(err);// 网络错误或其他请求失败的情况uni.showToast({icon: 'none',title: 'GET系统异常,请稍后再试'});}});});
};
export const request = {post,get
};

全局变量配置 main.js

import App from './App';
import store from './store';
import request from '@/http/request.js';// #ifndef VUE3
import Vue from 'vue';
Vue.config.productionTip = false;Vue.prototype.$store = store;
Vue.prototype.$adpid = '1111111111';
Vue.prototype.$backgroundAudioData = {playing: false,playTime: 0,formatedPlayTime: '00:00:00'
};
Vue.prototype.$request = request;// 设置全局变量和函数（Vue 2）
Vue.prototype.$globalData = null;
Vue.prototype.$setGlobalData = (data) => {Vue.prototype.$globalData = data;
};
Vue.prototype.$getGlobalData = () => {return Vue.prototype.$globalData;
};Vue.prototype.$globalData2 = null;
Vue.prototype.$setGlobalData2 = (data) => {Vue.prototype.$globalData2 = data;
};
Vue.prototype.$getGlobalData2 = () => {return Vue.prototype.$globalData2;
};Vue.prototype.$globalData3 = null;
Vue.prototype.$setGlobalData3 = (data) => {Vue.prototype.$globalData3 = data;
};
Vue.prototype.$getGlobalData3 = () => {return Vue.prototype.$globalData3;
};App.mpType = 'app';
const app = new Vue({store,...App
}); 
app.$mount();
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue';export function createApp() {const app = createSSRApp(App);app.use(store);app.config.globalProperties.$adpid = '1111111111';app.config.globalProperties.$backgroundAudioData = {playing: false,playTime: 0,formatedPlayTime: '00:00:00'};app.config.globalProperties.$request = request;// 注意：在 Vue 3 中，全局变量和函数应该直接设置在 app.config.globalProperties 上，// 而不是像 Vue 2 那样通过 Vue.prototype。但是，为了保持一致性，并且能够在组件中// 通过 this.$xxx 的方式访问，我们仍然可以在这里设置它们。// 不过，通常建议通过组合式 API 的 getCurrentInstance 来访问这些全局属性。app.config.globalProperties.$globalData = null;app.config.globalProperties.$setGlobalData = (data) => {app.config.globalProperties.$globalData = data;};app.config.globalProperties.$getGlobalData = () => {return app.config.globalProperties.$globalData;};app.config.globalProperties.$globalData2 = null;app.config.globalProperties.$setGlobalData2 = (data) => {app.config.globalProperties.$globalData2 = data;};app.config.globalProperties.$getGlobalData2 = () => {return app.config.globalProperties.$globalData2;};app.config.globalProperties.$globalData3 = null;app.config.globalProperties.$setGlobalData3 = (data) => {app.config.globalProperties.$globalData3 = data;};app.config.globalProperties.$getGlobalData3 = () => {return app.config.globalProperties.$globalData3;};return {app};
}
// #endif

页面级api封装

user.ts

import { request } from '@/utils/request.js';
//1.登录得到code
const LoginByOauth = (data) => {return request.post('/levault/usrsvr/Usr/LoginByOauth', data);
};
//2.通过code获取Token
const GetTokenFromCode = (data) => {return request.post('/levault/usrsvr/Usr/GetTokenFromCode', data);
};
export const userApi = {LoginByOauth,GetTokenFromCode
};

receiptList.ts

import { request } from '@/utils/request.js';
import config from '@/utils/config';//收货单分页查询
export const queryPage = (data) => {return request.post(config.baseUrl + '/ReceiveOrder/queryPage', data);
};
//收货单行查询
export const receiveJobTaskSeach = (data) => {return request.post(config.baseUrl + '/Tj0ReceiveJobTask/receiveJobTaskSeach', data);
};
//收货异常数量提报
export const receiveAbnormal = (data) => {return request.post(config.baseUrl + '/Tj0ReceiveJobTask/receiveAbnormal', data);
};
//收货单提交
export const receiveSubmit = (data) => {return request.post(config.baseUrl + '/Tj0ReceiveJobTask/receiveSubmit', data);
};

vue页面

登录页面vue

<template><view><view class="uni-common-mt"><view class="uni-flex uni-column"><view class="flex-item  flex-item-V"><view class="logo"><image src="/static/image/uniui-logo.png" style="height:90px;display: none;"></image></view><view class="logoHead">欢迎使用WMS</view></view><view class="flex-item flex-item-V"></view><view class="flex-item flex-item-V form"><form ref="myForm" @submit="formSubmit"><view class="uni-form-item uni-column"><uni-easyinput name="loginName" placeholder="请输入账号" prefixIcon="person" value=""></uni-easyinput></view><view class="uni-form-item uni-column"><uni-easyinput name="password" type="password" placeholder="请输入密码" prefixIcon="locked"value="" @confirm="handlePasswordConfirm "></uni-easyinput></view><view class="uni-btn-v loginBtn"><button form-type="submit" type="primary" :loading="loginLoading">登 录</button></view></form></view></view></view></view>
</template><script setup>import {nextTick,onMounted,ref} from 'vue';import {userApi} from "@/api/user";import graceChecker from "@/common/graceChecker.js";import CryptoJS from 'crypto-js';import G from '@/utils/global.js'const loginLoading = ref(false);const myForm = ref(); const handlePasswordConfirm = () => {// myForm.value.submit();};const formSubmit = (e) => {console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))//定义表单规则var rule = [{name: "loginName",checkType: "string",checkRule: "1,10",errorMsg: "请输入1-10位的账号"},{name: "password",checkType: "string",checkRule: "3,15",errorMsg: "请输入3-15密码"}];//进行表单检查var formData = e.detail.value;var checkRes = graceChecker.check(formData, rule);if (checkRes) {//登录信息formData.tenantId = "1867144130501541888";formData.lang = "zh_cn";formData.industry = null;formData.password = CryptoJS.SHA256(formData.password).toString(CryptoJS.enc.Hex);let thisObj = {"thisObj": formData};loginLoading.value = true;uni.setStorageSync('token', null);//1.登录得到codeuserApi.LoginByOauth(thisObj).then(loginRes => {console.log('loginRes========', JSON.stringify(loginRes));if (loginRes.mfail != '0' || loginRes.data == null) {loginLoading.value = false;uni.showToast({icon: 'none',duration: G.ShowPopTime,title: `登录异常，code获取异常：${loginRes.msg}`});return;} else {//2.通过code获取Tokenlet postData = {code: loginRes.data.code};//获取tokenuserApi.GetTokenFromCode(postData).then(tokenRes => {console.log('Token========', JSON.stringify(tokenRes));if (tokenRes.mfail != '0' || tokenRes.data == null) {loginLoading.value = false;uni.showToast({icon: 'none',duration: G.ShowPopTime,title: `登录异常，token获取异常：${res.msg}`});return;}//登录成功后，将token写入全局变量uni.setStorageSync('token', tokenRes.data.token);//跳转到首页nextTick(() => {uni.reLaunch({animationType: 'zoom-out',animationDuration: 200,url: "/pages/index/index"});});}).catch(error => {uni.setStorageSync('token', null);loginLoading.value = false;uni.showToast({icon: 'none',duration: G.ShowPopTime,title: `访问失败，请联系管理员！：${res.msg}`});});}}).catch(error => {uni.setStorageSync('token', null);loginLoading.value = false;uni.showToast({icon: 'none',duration: G.ShowPopTime,title: `访问失败，请联系管理员！：${res.msg}`});});} else {loginLoading.value = false;uni.showToast({title: graceChecker.error,icon: "none",duration: G.ShowPopTime});}}onMounted(() => {//uni.setStorageSync('token', null);});
</script><style scoped lang="scss">view {box-sizing: border-box;}.uni-common-mt {margin: 0;}.flex-item:nth-child(1) {display: flex;flex-flow: column;justify-content: center;align-content: center;}.flex-item:nth-child(2) {height: 120rpx;background: url("/static/login-style.png") round space;}.logo {min-height: 100rpx;padding-left: 10px;margin-top: 100rpx;}.logoHead {font-family: 'Microsoft YaHei', sans-serif;text-align: center;color: darkblue;font-size: 58rpx;font-weight: bold;text-shadow: 1px 1px rgba(0, 0, 0, .3);padding-bottom: 40rpx;}.loginBtn {padding-top: 40rpx;}.form {padding: 0px 40px;}
</style>

主页面VUE

<template><view class="container"><uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" right-icon="home" left-text="退出"title="主页面" @clickLeft="back" /><uni-section title="菜单" type="line" padding><uni-grid :column="3" :show-border="false" :square="false" :highlight="true" @change="gotoPage"><uni-grid-item v-for="(item ,index) in list" :index="index" :key="index"><view class="grid-item-box"><image :src="item.imgUrl" class="image" mode="aspectFill" /><!-- <uni-icons type="image" size="64" color="#0573f9"></uni-icons> --><text class="text">{{ item.text }}</text></view></uni-grid-item></uni-grid></uni-section></view><view><!-- 提示窗示例 --><uni-popup ref="alertDialog" type="dialog"><uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" title="提示" content="确定退出登录吗？"@confirm="dialogConfirm"></uni-popup-dialog></uni-popup></view>
</template><script setup>import {nextTick,onMounted,reactive,ref} from 'vue';const alertDialog = ref();const msgType = ref("error");const props = reactive({hasLeftWin: {type: Boolean},leftWinActive: {type: String}});const goto = (url) => {uni.navigateTo({url: url})};const dynamicList = reactive([]);// const dynamicList = reactive([]);const list = reactive([{url: '/pages/receiptConfirm/index',imgUrl: '/static/image/cart2.png',text: '收货确认',badge: '0',type: "primary"},{url: '/pages/receiptList/index',imgUrl: '/static/image/cart3.png',text: '收货任务',badge: '1',type: "success"},{url: '/pages/stocktaking/index',imgUrl: '/static/image/cart2.png',text: '盘点',badge: '99',type: "warning"},{url: '/pages/intelligentLibraryTray/index',imgUrl: '/static/image/cart3.png',text: '智能库托盘',badge: '2',type: "error"},{url: '/pages/loadingTask/index',imgUrl: '/static/image/cart2.png',text: '上架任务',badge: '2',type: "error"},{url: '/pages/inventoryQuery/index',imgUrl: '/static/image/cart3.png',text: '库存查询',badge: '2',type: "error"},{url: '/pages/pickingTask/index',imgUrl: '/static/image/cart2.png',text: '拣货任务',badge: '2',type: "error"},{url: '/pages/unpacking/index',imgUrl: '/static/image/cart3.png',text: '拆包'},{url: '/pages/reprintRawMaterial/index',imgUrl: '/static/image/cart2.png',text: '原材料补打'},{url: '/pages/moveInventory/index',imgUrl: '/static/image/cart3.png',text: '移库'},{url: '/pages/MESMaterialDistribution/index',imgUrl: '/static/image/cart2.png',text: '物料配送'}]);const gotoPage = (e) => {let {index} = e.detail;console.log(e.detail, list[index].url);if (list[index]) { //页面跳转nextTick(() => {uni.navigateTo({url: list[index].url,animationType: 'zoom-out',animationDuration: 200});});// uni.showToast({// 	title: `点击第${index + 1}个宫格`,// 	icon: 'none'// })}};//退出系统const dialogConfirm = () => {uni.reLaunch({animationType: 'zoom-out',animationDuration: 200,url: "/pages/login/index"});};//退出系统事件const back = () => {msgType.value = "error";alertDialog.value.open();};// const add = () => {// 	if (dynamicList.length < 9) {// 		dynamicList.push({// 			url: `/static/c${dynamicList.length + 1}.png`,// 			text: `Grid ${dynamicList.length + 1}`,// 			color: dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"// 		})// 	} else {// 		uni.showToast({// 			title: '最多添加9个',// 			icon: 'none'// 		});// 	}// };// const del = () => {// 	dynamicList.splice(dynamicList.length - 1, 1)// }; onMounted(() => {});
</script>
<script>export default {onNavigationBarButtonTap(e) {if (e.index === 0) {//dialogToggle("error");this.msgType = "error";this.$refs.alertDialog.open();}}}
</script>
<style scoped lang="scss">view {box-sizing: border-box;}.image {width: 48px;height: 48px;}.text {font-size: 14px;margin-top: 5px;}.example-body {/* #ifndef APP-NVUE */// display: block;/* #endif */}.grid-dynamic-box {margin-bottom: 15px;}.grid-item-box {flex: 1;// position: relative;/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: column;align-items: center;justify-content: center;padding: 15px 0;}.grid-item-box-row {flex: 1;// position: relative;/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;align-items: center;justify-content: center;padding: 15px 0;}.grid-dot {position: absolute;top: 5px;right: 15px;}.swiper {height: 420px;}/* #ifdef H5 */@media screen and (min-width: 768px) and (max-width: 1425px) {.swiper {height: 630px;}}@media screen and (min-width: 1425px) {.swiper {height: 830px;}}/* #endif */
</style>

receiptList/index.vue

<template><z-paging ref="paging" v-model="dataList" @query="queryList"><template #top><uni-group class="searchForm"><uni-easyinput v-model="orderNumber" placeholder="请输入或扫描送货单号" prefixIcon="scan" @confirm="onInput"></uni-easyinput></uni-group><view style="margin: 0 5px;"><uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"></uni-segmented-control></view></template><view class="content"><view class="itemCard" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)"><view class="item"><view class="example-body"><uni-row class="demo-uni-row"><uni-col :span="24"><view class="listItme"><view class="listTitle blueBar">送货单号</view><view class="listContent">{{item.orderNumber}}</view></view></uni-col><uni-col :span="24"><view class="listItme"><view class="listTitle">关联单号</view><view>{{item.relatedOrderNumber}}</view></view></uni-col><uni-col :span="24"><view class="listItme"><view class="listTitle">单据来源</view><view class="listContent">{{item.orderSource}}</view></view></uni-col><uni-col :span="24"><view class="listItme"><view class="listTitle">开始时间</view><view class="listContent">{{item.planStartTime}}</view></view></uni-col><uni-col :span="24"><view class="listItme"><view class="listTitle">结束时间</view><view class="listContent">{{item.planEndTime}}</view></view></uni-col><uni-col :span="24"><view class="listItme"><view class="listTitle">收货人</view><view class="listContent">{{item.responsiblePerson}}</view></view></uni-col></uni-row></view><view class="item-arrow"><uni-icons type="right" size="25" color="grey"></uni-icons></view></view></view></view></z-paging></template>
<script setup>import {onMounted,reactive,ref,getCurrentInstance} from 'vue';import {queryPage} from "@/api/receiptList";const instance = getCurrentInstance();const paging = ref(null);const focus = reactive(true);const dataList = ref([]);const items = ['收货中', '待收货', '已收货'];const current = ref(0); // 当前选中的选项卡，默认为第一个选项卡const orderNumber = ref("");//查询const onInput = (e) => {paging.value.reload();};const onClickItem = (e) => {current.value = e.currentIndex; // 获取当前选中的索引paging.value.reload();};// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可const queryList = (pageNo, pageSize) => {// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可// 模拟请求服务器获取分页数据，请替换成自己的网络请求const params = {"attrSet": [],"condition": [],"sorts": [{"name": "createAt","sort": "desc"}],"page": {"pageNo": pageNo,"pageSize": pageSize}};if (orderNumber.value != '') {params.condition.push({"compare": "LIKE","field": "orderNumber","value": orderNumber.value});}if (current.value == 0) {//收货中params.condition.push({"compare": "EQUAL","field": "orderStatus","value": 'Created'});} else if (current.value == 1) {//待收货params.condition.push({"compare": "EQUAL","field": "orderStatus","value": 'SH'});}if (current.value == 2) {//已收货params.condition.push({"compare": "EQUAL","field": "orderStatus","value": 'SHWC'});}queryPage(params).then(res => {console.log("============", JSON.stringify(res));if (res.code == 0) {// 将请求的结果数组传递给z-pagingpaging.value.complete(res.data);} else { //异常信息paging.value.complete(false);uni.showToast({title: res.msg});}}).catch(res => {// 如果请求失败写paging.value.complete(false);// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可paging.value.complete(false);});};const itemClick = (item) => {instance.appContext.config.globalProperties.$setGlobalData(item);uni.navigateTo({url: '/pages/receiptList/confirm'});// let infoData = JSON.stringify(item)// let newStr = encodeURIComponent(infoData);// uni.navigateTo({// 	url: '/pages/receiptList/confirm?data=' + newStr// });// console.log('点击了', item);};onMounted(() => {console.log("加載成功。。。");});
</script><style scoped lang="scss">view {box-sizing: border-box;color: $uni-text-color;}button {font-size: $uni-btn-font-size !important;}.searchForm {margin-top: 0 !important;}.content {margin: 0;}.itemCard {padding: 10rpx 10rpx 10rpx 15rpx;z-index: 1;border: 1px solid #ddd;border-radius: 6px;background-color: $uni-bg-color;margin: 8rpx 8rpx 0px 8rpx !important;}.item {z-index: 1;position: relative;display: flex;align-items: center;justify-content: space-between;padding: 0;}.item-line {position: absolute;bottom: 0rpx;left: 0rpx;height: 1px;}.listItme {display: flex;justify-content: row;line-height: 55rpx;}.listTitle {padding-left: 20rpx;font-weight: bold;min-width: 120rpx;padding-right: 10rpx;white-space: nowrap;/* 禁止换行 */overflow: hidden;}.listTitle::after {white-space: pre;content: " ";}.listContent {min-width: 120rpx;margin-right: 10rpx;white-space: nowrap;/* 禁止换行 */overflow: hidden;/* 隐藏溢出内容 */text-overflow: ellipsis;/* 使用省略号表示溢出 */}//蓝色条块.blueBar {margin-left: -22rpx;}.blueBar::before {white-space: pre;content: " ";background-color: $uni-border-bar-color; // $uni-color-primary ;width: 4px;/* 竖块的宽度 */height: 12px;border-radius: 10px;margin-right: 15rpx;}
</style>

receiptList/confirm.vue

<template><z-paging ref="paging" v-model="dataList" @query="queryList"><!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" --><!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 --><template #top><view class="searchForm"><view><uni-easyinput name="userName" placeholder="请扫描物料二维码" prefixIcon="scan" @confirm="onInput"></uni-easyinput></view><view class="example-body searchFormList"><uni-row class="demo-uni-row"><uni-col :span="15"><view class="listItme"><view class="listTitle">送货单号</view><view class="listContent">{{selectItem.orderNumber}}</view></view></uni-col><uni-col :span="9"><view class="listItme"><view class="listTitle">总件数</view><view class="listContent">2000</view></view></uni-col><uni-col :span="15"><view class="listItme"><view class="listTitle">已收数量</view><view class="listContent">5000</view></view></uni-col><uni-col :span="9"><view class="listItme"><view class="listTitle">待收数量</view><view class="listContent">200</view></view></uni-col></uni-row></view><view class="btnList2"><view><button type="primary" :loading="loginLoading" @click="submitOrder">提 交</button></view><view><button type="primary" plain="true">条码补打</button></view></view></view></template><!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 --><view><view class="itemCard" v-for="(item,index) in dataList" :key="index"><view class="example-body"><uni-row class="demo-uni-row"><uni-col :span="24"><view class="listItme"><view class="listTitle blueBar">物料号</view><view class="listContent">{{item.materialDepict}} {{item.materialCode}}</view></view></uni-col><uni-col :span="10"><view class="listItme"><view class="listTitle">箱号</view><view class="listContent">{{item.consumablesCode}}</view></view></uni-col><uni-col :span="14"><view class="listItme"><view class="listTitle">是否检验</view><view class="listContent">{{item.qualityInspection}}</view></view></uni-col><uni-col :span="10"><view class="listItme"><view class="listTitle">收货状态</view><view class="listContent">{{item.taskStatus}}</view></view></uni-col><uni-col :span="14"><view class="listItme"><view class="listTitle">送货数量</view><view class="listContent">{{item.taskQuantity}}</view></view></uni-col><uni-col :span="10"><view class="listItme"><view class="listTitle">清点数量</view><view class="listContent"><input class="uniInput" type="number" maxlength="10" placeholder="输入数量"v-model="item.actualOperateQuantity" /></view></view></uni-col><uni-col :span="14"><view class="listItme"><view class="listTitle">智库物料</view><view class="listContent">{{item.materialCode}}</view></view></uni-col><uni-col :span="10"><view class="listItme"><view class="listTitle">行号</view><view class="listContent">{{item.tj0receiveLineNumber}}</view></view></uni-col><uni-col :span="10"><view class="listItme"><view class="listContent2"><button type="warn" @click="toggle(item)" size="mini">收货异常</button></view></view></uni-col></uni-row></view><view><uni-collapse accordion><uni-collapse-item title="物料明细"><view class="collapseBody"><uni-row class="demo-uni-row" v-for="(citem,index) in item.serialNumberOutVOList":key="index"><uni-col :span="24"><view class="item_line"></view></uni-col><uni-col :span="24"><view class="listItme"><view class="listTitle">SN/序列号</view><view class="listContent">{{citem.serialNum}}</view></view></uni-col><uni-col :span="24"><view class="listItme"><view class="listTitle">批次号</view><view class="listContent">{{citem.batchNumber}}</view></view></uni-col><uni-col :span="12"><view class="listItme"><view class="listTitle">数 量</view><view class="listContent">{{citem.actualOperateQuantity}}</view></view></uni-col></uni-row></view></uni-collapse-item></uni-collapse></view></view></view></z-paging><view><!-- 普通弹窗 --><uni-popup ref="refPopup" background-color="#fff" @change="change"><view class="popup-content"><uni-section title="收货异常" type="line"><view class="example"><!-- 基础表单校验 --><uni-forms ref="formRef" :rules="customRules" :model="valiFormData" labelWidth="80px"><uni-forms-item label="物料编码" name="materialCode"><uni-easyinput disabled v-model="valiFormData.materialCode" placeholder="" /></uni-forms-item><uni-forms-item label=" 送货数量" name="taskQuantity"><uni-easyinput type="number" disabled v-model="valiFormData.taskQuantity"placeholder="" /></uni-forms-item><uni-forms-item label="清点数量" required name="actualOperateQuantity"><uni-easyinput type="number" v-model="valiFormData.actualOperateQuantity" maxlength="10"placeholder="输入数量" /></uni-forms-item><uni-forms-item label="损坏数量" required name="tj0damagedQuantity"><uni-easyinput type="number" v-model="valiFormData.tj0damagedQuantity" maxlength="10"placeholder="输入数量" /></uni-forms-item><uni-forms-item label="破损数量" required name="tj0wornQuantity"><uni-easyinput type="number" v-model="valiFormData.tj0wornQuantity" maxlength="10"placeholder="输入数量" /></uni-forms-item></uni-forms><button type="primary" @click="submit('valiForm')">保 存</button></view></uni-section></view></uni-popup></view>
</template>
<script setup>import {onMounted,reactive,ref,getCurrentInstance} from 'vue';import {receiveJobTaskSeach,receiveAbnormal,receiveSubmit} from "@/api/receiptList";const instance = getCurrentInstance();const loginLoading = ref(false);const formRef = ref();const baseFormData = reactive({});const selectItem = ref({});const popupType = reactive("bottom");const refPopup = ref();var itemValue = {};//提交const submitOrder = () => {let params = selectItem.value;params.taskList = dataList.value;console.log("params============", JSON.stringify(params));loginLoading.value = true;receiveSubmit(params).then(res => {loginLoading.value = false;if (res.code == 0) {refPopup.value.close();uni.showToast({title: `保存成功`,icon: 'success',duration: 3000});} else { //异常信息uni.showToast({title: res.msg});}}).catch(res => {loginLoading.value = false;paging.value.complete(false);});};const valiFormData = reactive({});// 自定义表单校验规则const customRules = reactive({actualOperateQuantity: {rules: [{required: true,errorMessage: '清点数量，不能为空'}]},tj0damagedQuantity: {rules: [{required: true,errorMessage: '损坏数量，不能为空'}]},tj0wornQuantity: {rules: [{required: true,errorMessage: '破损数量，不能为空'}]}});const paging = ref(null);const dataList = ref([]);// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可const queryList = (pageNo, pageSize) => {// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可// 模拟请求服务器获取分页数据，请替换成自己的网络请求const params = {"attrSet": [],"condition": [],"sorts": [{"name": "createAt","sort": "desc"}],"page": {"pageNo": pageNo,"pageSize": pageSize}};params.condition.push({"compare": "EQUAL","field": "mainId","value": selectItem.value.objId});receiveJobTaskSeach(params).then(res => {console.log("============", JSON.stringify(res));if (res.code == 0) {// 将请求的结果数组传递给z-pagingres.data.forEach(i => {if (i.taskQuantity != null && i.taskQuantity != "" && i.taskQuantity !=0)i.actualOperateQuantity = i.taskQuantity;});paging.value.complete(res.data);} else { //异常信息paging.value.complete(false);uni.showToast({title: res.msg});}}).catch(res => {// 如果请求失败写paging.value.complete(false);// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可paging.value.complete(false);});};const itemClick = (item) => {let infoData = JSON.stringify(item)let newStr = infoData.replace(/%/g, '%25');uni.navigateTo({url: '/pages/receiptConfirm/confirm?data=' + encodeURIComponent(newStr)})// console.log('点击了', item);};//收货异常const toggle = (item) => {itemValue = item;valiFormData.objId = item.objId;valiFormData.materialCode = item.materialCode;valiFormData.taskQuantity = item.taskQuantity;valiFormData.actualOperateQuantity = item.actualOperateQuantity;valiFormData.tj0damagedQuantity = item.tj0damagedQuantity;valiFormData.tj0wornQuantity = item.tj0wornQuantity;// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性refPopup.value.open(popupType);//console.log('item', JSON.stringify(item));};//收货异常提交const submit = async (ref) => {console.log("baseFormData====", JSON.stringify(baseFormData));await formRef?.value?.validate();// formRef.value.validate().then(res => {// 	loginLoading.value = true;// 	console.log('success', res);// 	uni.showToast({// 		title: `校验通过`// 	})// }).catch(err => {// 	console.log('err', err);// });itemValue.actualOperateQuantity = valiFormData.actualOperateQuantity;itemValue.tj0damagedQuantity = valiFormData.tj0damagedQuantity;itemValue.tj0wornQuantity = valiFormData.tj0wornQuantity;refPopup.value.close();uni.showToast({title: `保存成功`,icon: 'success',duration: 2000});/*receiveAbnormal(valiFormData).then(res => {loginLoading.value = false;console.log("============", JSON.stringify(res));if (res.code == 0) {refPopup.value.close();valiFormData.actualOperateQuantity = "";valiFormData.tj0damagedQuantity = "";valiFormData.tj0wornQuantity = "";uni.showToast({title: `保存成功`,icon: 'success',duration: 3000});} else { //异常信息uni.showToast({title: res.msg});}}).catch(res => {loginLoading.value = false;paging.value.complete(false);});*/};onMounted(() => {const pages = getCurrentPages();const currentPage = pages[pages.length - 1]; // 当前页面//取全局变量参数const globalData = instance.appContext.config.globalProperties.$getGlobalData();selectItem.value = globalData;// //父页面data参数// if (currentPage.options && currentPage.options.data) {// 	let infoData = decodeURIComponent(currentPage.options.data);// 	//	console.log("infoData----------", JSON.stringify(infoData))// 	selectItem.value = JSON.parse(infoData);// }console.log("onReady====", selectItem.value.orderNumber);});
</script><style scoped lang="scss">view {box-sizing: border-box;color: $uni-text-color;}button {font-size: 13px !important;}.uniInput {border-bottom: 1px solid $uni-border-bar-color;border-radius: 0px;width: 60px;padding: 3px 3px;font-size: 13px;}.searchForm {background-color: $uni-bg-color;padding: 15rpx 0rpx;}.searchForm>view:nth-child(1) {padding: 0 7px;}.searchFormList {font-weight: bold !important;}.btnList2 {display: flex;flex-flow: row wrap;justify-content: space-between;align-content: space-between;}.btnList2>view {flex: 1;padding: 8rpx;}.btnList {display: flex;flex-flow: row wrap;justify-content: space-between;align-content: space-between;}.btnList>view {flex: 33%;padding: 8rpx;}.example-body {margin-top: 10rpx;}.itemCard {padding-left: 15rpx;z-index: 1;border: 1px solid $uni-border-color;border-radius: 6px;background-color: white;margin: 8rpx 8rpx 0px 8rpx;}.listItme {display: flex;justify-content: row;line-height: 55rpx;}.listTitle {font-weight: bold;padding-left: 20rpx;min-width: 120rpx;padding-right: 10rpx;white-space: nowrap;/* 禁止换行 */overflow: hidden;}.listTitle::after {white-space: pre;content: "";}.listContent2 {display: flex;padding-left: 12px;}.listContent2>button {width: 140px !important;font-size: 11px !important;}.listContent {min-width: 120rpx;margin-right: 10rpx;white-space: nowrap;/* 禁止换行 */overflow: hidden;/* 隐藏溢出内容 */text-overflow: ellipsis;/* 使用省略号表示溢出 */}.item_line {height: 1rpx;width: 100%;background-color: #eeeeee;margin: 10rpx 0;}.collapseBody {padding: 0 40rpx;}.popup-content {margin: 0rpx 40rpx 40rpx 40rpx;background-color: #fff;}//蓝色条块.blueBar {margin-left: -22rpx;}.blueBar::before {white-space: pre;content: " ";background-color: $uni-border-bar-color; // $uni-color-primary ;width: 4px;/* 竖块的宽度 */height: 12px;border-radius: 10px;margin-right: 15rpx;}
</style>