You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1578 lines
36 KiB

1 week ago
<template>
<view class="container">
<!-- 进度 -->
<view class="stepcon">
<u-steps :list="step" :current="current" mode="number" active-color="#3690ff"></u-steps>
</view>
<!-- 车牌号输入区域 -->
<view class="section">
<view class="input-group">
<text class="label">车牌号</text>
<view class="input-container">
<input
v-model="itemList.deliveryCar"
class="input-field"
placeholder="请输入车牌号"
maxlength="8"
@input="onLicenseInput"
/>
<view class="scan-btn" @click="scanLicense">
<uni-icons type="scan" size="20" color="#007AFF"></uni-icons>
</view>
</view>
<!-- <text class="hint">例如京A12345</text> -->
</view>
</view>
<!-- 配送单扫描区域 -->
<view class="section">
<!-- 转运存放区域 -->
<view class="order-details">
<u-form :model="itemList" :rules="rules" ref="uForm" :errorType="errorType">
<view class="detail-header">
<text class="detail-title">转运信息</text>
</view>
<view class="order">
<u-form-item required label="单位" label-width="100rpx" label-position="left" prop="departCode">
<view class="selarr" @click="showaddress()">
<text class="txt" v-if="itemList.departCode">{{ retType(itemList.departCode,2) }}</text>
<text class="txt" v-else style="color:#999">请选择</text>
<uni-icons type="right" size="20" color="#999"></uni-icons>
</view>
</u-form-item>
<u-form-item label="工场" required label-width="100rpx" label-position="left" prop="workshop">
<view class="selarr" @click="showaddress()">
<text class="txt" v-if="itemList.workshop">{{itemList.workshop}}</text>
<text class="txt" v-else style="color:#999">请选择</text>
<uni-icons type="right" size="20" color="#999"></uni-icons>
</view>
</u-form-item>
<u-form-item label="区域" required label-width="100rpx" label-position="left" prop="location">
<view class="selarr" @click="showaddress()">
<text class="txt" v-if="itemList.location">{{itemList.location}}</text>
<text class="txt" v-else style="color:#999">请选择</text>
<uni-icons type="right" size="20" color="#999"></uni-icons>
</view>
</u-form-item>
<u-form-item label="地址" required label-width="100rpx" label-position="left" prop="address">
<view class="selarr" @click="showaddress()">
<text class="txt" v-if="itemList.address">{{itemList.address}}</text>
<text class="txt" v-else style="color:#999">请选择</text>
<uni-icons type="right" size="20" color="#999"></uni-icons>
</view>
</u-form-item>
<u-form-item label="接收人" label-width="100rpx" label-position="left" prop="receiveName">
<view class="selarr" @click="showry()">
<text class="txt" v-if="itemList.receiveName">{{itemList.receiveName}}</text>
<text class="txt" v-else style="color:#999">请选择</text>
<uni-icons type="right" size="20" color="#999"></uni-icons>
</view>
</u-form-item>
<u-form-item label="接收电话" label-width="140rpx" label-position="left" prop="receivePhone">
<u-input :border="true" :height="60" placeholder="请输入" input-align="left" v-model="itemList.receivePhone" type="number" maxlength="12"></u-input>
</u-form-item>
<view class="detail-header" style="margin-top: 20rpx;">
<text class="detail-title">装盘信息</text>
</view>
<u-form-item label="工程编号" label-width="140rpx" label-position="left" prop="loadProject">
<view class="selarr" @click="showgc()">
<text class="txt" v-if="itemList.projectname">{{itemList.projectname}}</text>
<text class="txt" v-else style="color:#999">请选择</text>
<uni-icons type="right" size="20" color="#999"></uni-icons>
</view>
</u-form-item>
<u-form-item label="托盘表号" label-width="140rpx" label-position="left" prop="loadInst">
<u-input :border="true" :height="60" placeholder="请输入" input-align="left" v-model="itemList.loadInst" type="text" maxlength="200"></u-input>
</u-form-item>
<u-form-item label="装盘数量" label-width="140rpx" label-position="left" prop="loadQty">
<u-input :border="true" :height="60" placeholder="请输入" input-align="left" v-model="itemList.loadQty" type="number" maxlength="200"></u-input>
</u-form-item>
<u-form-item label="装盘描述" label-width="140rpx" label-position="left" prop="assemcode">
<u-input :border="true" :height="60" placeholder="请输入" input-align="left" v-model="itemList.assemcode" type="textarea" maxlength="200"></u-input>
</u-form-item>
<u-form-item label="备注" label-width="140rpx" label-position="left" prop="loadDesc">
<u-input :border="true" :height="60" placeholder="请输入" input-align="left" v-model="itemList.loadDesc" type="textarea" maxlength="500"></u-input>
</u-form-item>
</view>
</u-form>
</view>
</view>
<!-- 托盘管理区域 -->
<view class="section">
<view class="section-header">
<text class="section-title">已添加工装托盘</text>
<text class="section-count">({{ palletData.length }})</text>
</view>
<uni-collapse v-if="palletData.length > 0" class="pallet-list" :border="true">
<uni-collapse-item titleBorder="none" v-for="(pallet, index) in palletData" :key="index" :open="pallet.isOpen" class="pallet-card">
<template v-slot:title>
<view class="pallet-info">
<text class="pallet-number" @click="openPalletDetail(pallet)">{{ pallet.palletNo }}</text>
<text v-if="!pallet.ifadd" class="pallet-status" :class="getStatusClass(pallet.status)">
{{ retType(pallet.status,1) }}
</text>
<view v-else class="sright">
<uni-data-select v-model="pallet.status" placeholder="请选择配送类型" :localdata="status" @change="schange($event,index)"></uni-data-select>
</view>
<uni-icons @click="del(index)" type="closeempty" size="16" color="#ff0000"></uni-icons>
</view>
</template>
<u-upload ref="uUpload" :auto-upload="false" upload-text='' :max-size="10 * 1024 * 1024" :max-count="3" :width="100" :height="100"
:deletable="true" :source-type="sourceType" style="background-color: #ecf5ff;"
@on-remove="onRemove($event,index)" @on-choose-complete="onChooseComplete($event,index)" :file-list="pallet.files">
</u-upload>
</uni-collapse-item>
</uni-collapse>
<view class="tpcon">
<view class="input-group">
<text class="label">编号</text>
<view class="input-container">
<input
v-model="palletNo"
class="input-field"
placeholder="请输入"
maxlength="50"
/>
<view class="scan-btn" @click="scanPallet">
<uni-icons type="scan" size="20" color="#007AFF"></uni-icons>
</view>
</view>
</view>
<view class="add-pallet-btn" @click="addPallet">
<uni-icons type="plusempty" size="15" color="#fff"></uni-icons>
<text class="btn-text">添加</text>
</view>
</view>
</view>
<!-- 底部操作栏 -->
<view class="bottom-actions">
<button class="action-btn complete-btn" @click="finishLoading"></button>
</view>
<!-- 提示窗示例 -->
<uni-popup ref="alertDialog" type="dialog">
<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" title="消息" :content="messageText"></uni-popup-dialog>
</uni-popup>
<!-- 选择转运 -->
<selCl ref="clsel" :clist="address" :value="itemList.id" @change="selClDO" @cancel="cancelClDO"></selCl>
<!-- 选择人员 -->
<selRY ref="rysel" :clist="users" :value="itemList.toName" @change="selRYDO" @cancel="cancelRYDO"></selRY>
<!-- 工程 -->
<tki-tree ref="gctree" :value="itemList.loadProject" :range="gcs" rangeKey="bm" idKey="bm" @confirm="gctreeConfirm" @hide="gctreeConfirm" ></tki-tree>
<!-- 托盘详情 -->
<u-popup v-model="showpl" @close="closepl" mode="center" :mask="true" :closeable="true" :border-radius="20" close-icon-pos="top-right">
<view class="ppcon">
<psDetail :palletAll="palletAll"></psDetail>
</view>
</u-popup>
1 week ago
<!-- 扫码组件 jsQR -->
<!-- <scanQR ref="scan" @scanSuccess="scanSuccess"></scanQR> -->
<!-- 扫码组件 html5-qrcode -->
<scan-code ref="scan"></scan-code>
1 week ago
<u-toast ref="uToast" />
</view>
</template>
<script>
import selCl from "@/components/selCl.vue";
import selRY from "@/components/selRY.vue";
import tkiTree from "@/components/areaTree/Linktree.vue";
import psDetail from "@/components/psDetail.vue";
1 week ago
// 扫二维码 jsQR
// import scanQR from "@/components/scanQR.vue";
// 扫二维码 html5-qrcode
import scanCode from '@/components/easy-scancode/easy-scancode.vue'
1 week ago
// 图片处理
import EXIF from 'exif-js';
import Compressor from 'compressorjs';
export default {
components: {
psDetail,
selCl,
selRY,
tkiTree,
1 week ago
// scanQR,
scanCode
1 week ago
},
data() {
return {
current:1,
step:[
{
name:"待转运",
key:"dzy",
},
{
name:"转运",
key:"zy",
},
{
name:"接收",
key:"js",
},
// {
// name:"卸盘",
// key:"xp",
// }
],
sourceType:['album', 'camera'], // 选择图片的来源album-从相册选图camera-使用相机,默认二者都有(默认['album', 'camera']
messageText:"",
msgType:"info",//success error warn info
palletNo:"",
palletData:[], // 接收托盘列表信息
pallet:{}, // 托盘信息
showpl: false,
palletAll:"", // 托盘信息
// 闲置/装盘/配送/周转/接收/卸盘
status:[],
errorType: ["message"],
itemList:{
deliveryCar:'',// 车牌号
id:"",
departCode:"",
workshop:"",
location:"",
address:"",
receiveName:"",
toName:"", // 接收人编码
receivePhone:"",
loadProject:"", // 工程编号
loadInst:"", // 托盘表号
loadQty:"", // 装盘数量
assemcode:"", // 部件代号
loadDesc:""
},
address:[],
users:[],
depts:[],
gcs:[],
dicts:[],
rules: {
departCode: [{
required: true,
message: '请选择存放单位',
trigger: ['change'],
}],
workshop: [{
required: true,
message: '请选择存放工场',
trigger: ["change"],// blur
}],
location: [{
required: true,
message: '请选择存放区域',
trigger: ["change"],
}],
location: [{
required: true,
message: '请选择存放地址',
trigger: ["change"],
}],
},
};
},
onLoad(options) {
// 获取操作数据
this.getTypes();
},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
methods: {
/**
* h5扫码返回
*/
scanSuccess(qrcode){
console.log("qrcode",qrcode);
this.palletNo=qrcode;
this.$forceUpdate();
this.getPalletDetail();
},
closepl() {
this.showpl = false;
},
openpl() {
this.showpl = true;
},
// 显示托盘详情
async openPalletDetail(pallet) {
if(pallet.palletNo){
uni.showLoading({
title: '数据加载中...'
});
const {data: res} = await uni.$http.get('/getPalletAll',{
code: pallet.palletNo,
type: '20'
});
if(res.success){
if(res.data)
{
this.palletAll=res.data;
this.$forceUpdate();
// 打开托盘详情弹框
this.openpl();
}
}
else{
this.$refs.uToast.show({
title: "暂无托盘详情信息!",
type: "warning",
duration: 3000,
});
}
}
},
onChooseComplete(files,ii){
console.log("onChooseComplete")
console.log(files)
files.forEach((item,index)=>{
//区分APP与H5不同端调用不同的方法
// #ifdef APP-PLUS
/**
* APP端图片压缩
* 参数说明
* img 图片url
* scale缩放比例 1-100
* callback 回调设置返回值
*/
var that = this;
this.translateapp(item.url, 60, imgUrl => {
// 打印压缩后返回的图片url
console.log("imgUrl",imgUrl);
that.ploadFilePromiseSync(imgUrl,index,ii);
});
// #endif
// #ifdef H5
if(item.file){
this.uploadAndCompressImage(item.file,index,ii);
}
// #endif
});
},
translateapp(img, scale, callback) {
plus.io.resolveLocalFileSystemURL(img, (entry) => { //通过URL参数获取目录对象或文件对象
entry.file((file) => { // 可通过entry对象操作图片
console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息
if (file.size > 504800) { // 如果大于500Kb进行压缩
plus.zip.compressImage({ // 5+ plus.zip.compressImage 了解一下,有详细的示例
src: img, //src: 压缩原始图片的路径
dst: img.replace('.png', 'yasuo.png').replace('.PNG',
'yasuo.PNG').replace('.jpg', 'yasuo.jpg')
.replace('.JPG', 'yasuo.JPG'),
width: '40%', //dst: (String 类型 )压缩转换目标图片的路径这里先在后面原始名后面加一个yasuo区分一下
height: '40%', //width,height: (String 类型 )缩放图片的宽度,高度
quality: scale, //quality: (Number 类型 )压缩图片的质量
overwrite: true, //overwrite: (Boolean 类型 )覆盖生成新文件
// format:'jpg' //format: (String 类型 )压缩转换后的图片格式
}, (event) => {
console.log('压缩后图片信息:' + JSON.stringify(event));
//返回压缩后的图片路径
callback(event.target);
}, function(err) {
console.log('Resolve file URL failed: ' + err.message);
});
} else { //else小于500kb跳过压缩直接返回现有的src
callback(img);
}
});
}, (e) => { // 返回错误信息
console.log('Resolve file URL failed: ' + e.message);
});
},
ploadFilePromiseSync(url,index,ii){
var that = this;
return new Promise((resolve, reject) => {
// #ifdef APP-PLUS
plus.io.resolveLocalFileSystemURL(url, (entry) => {
entry.file((file) => {
let fileReader = new plus.io.FileReader();
fileReader.onloadend = (evt) => {
const base64 = evt.target.result.substr(22)
console.log("base64",base64)
resolve(base64)
that.palletData[ii].files[index]="data:image/png;base64"+base64;
that.$forceUpdate();
};
fileReader.readAsDataURL(file)
});
}, (e) => {
reject("Resolve file URL failed: " + e.message)
});
// #endif
});
},
uploadAndCompressImage(file,index,ii) {
var that = this;
return new Promise((resolve, reject) => {
new Compressor(file, {
quality: 0.6, // 压缩质量范围是0-1
success: (compressedFile) => {
// 读取压缩后的图片文件为base64
const reader = new FileReader();
reader.onload = (e) => {
const base64 = e.target.result;
resolve(base64);
that.palletData[ii].files[index]={
url:base64
};
that.$forceUpdate();
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsDataURL(compressedFile);
},
error(err) {
reject(err);
},
});
});
},
onRemove(index,ii) {
console.log("onRemove",index,ii);
delete this.palletData[ii].files[index];
this.$forceUpdate();
},
// 扫描车牌
scanLicense(){
uni.showModal({
title: '提示',
content: '暂支持手动输入车牌号',
success: (res) => {
if (res.confirm) {
}
},
});
},
schange(val,index){
console.log(val,index);
},
// 选择工程
showgc() {
this.$refs.gctree._show();
},
gctreeConfirm(val) {
// 选择工程
if (val && val.length > 0) {
this.itemList.loadProject = val[val.length - 1].bm;
this.itemList.projectname = val[val.length - 1].bm;
}
else{
this.itemList.loadProject = "";
this.itemList.projectname = "";
}
this.$forceUpdate();
this.$refs.uForm.validate();
},
// 选择人员
showry(e) {
this.$refs.rysel._show(this.itemList.toName);
},
selRYDO(e){
// 选择人员
console.log(e);
if(e){
this.itemList.receiveName=e.yhms?e.yhms:'';
this.itemList.toName=e.yhdm?e.yhdm:'';
this.itemList.receivePhone=e.lxdh?e.lxdh:'';
}
else{
this.itemList.receiveName='';
this.itemList.toName='';
this.itemList.receivePhone='';
}
this.$forceUpdate();
this.$refs.uForm.validate();
},
cancelRYDO(e){
// 取消选择人员
console.log(e);
this.$forceUpdate();
},
// 选择接收
showaddress(e) {
this.$refs.clsel._show(this.itemList.id);
},
selClDO(e){
// 选择接收
console.log(e);
if(e){
this.itemList.id=e.id?e.id:'';
this.itemList.departCode=e.departCode?e.departCode:'';
this.itemList.workshop=e.workshop?e.workshop:'';
this.itemList.location=e.location?e.location:'';
this.itemList.address=e.address?e.address:'';
// 接收人重置
this.itemList.receiveName='';
this.itemList.toName='';
this.itemList.receivePhone='';
// 绑定地址下接收人
this.getusers();
}
else{
this.itemList.id='';
this.itemList.departCode='';
this.itemList.workshop='';
this.itemList.location='';
this.itemList.address='';
// 接收人重置
this.itemList.receiveName='';
this.itemList.toName='';
this.itemList.receivePhone='';
}
this.$forceUpdate();
this.$refs.uForm.validate();
},
cancelClDO(e){
// 取消选择接收
console.log(e);
this.$forceUpdate();
},
dialogToggle(type) {
this.msgType = type
this.$refs.alertDialog.open()
},
// 折叠
change(e) {
console.log(e);
},
// 处理完成
handleComplete(){
console.log('完成装车');
},
// 车牌号输入处理
onLicenseInput(e){
// 实时校验车牌格式
const value = e.detail.value;
if (value && !/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-Z0-9]{4,5}[A-Z0-9挂学警港澳]$/.test(value)) {
console.log('车牌格式不正确');
}
},
// 扫描托盘
scanPallet(){
var that = this;
const _that = this;
// #ifdef H5
// 扫码识别托盘
// _that.palletNo="XZG0005"; // XZG0004 XZG0005
// _that.getPalletDetail();
1 week ago
// this.$refs.scan.showScan();
this.$refs.scan.start({
success: (val, res)=> {
console.log('扫描成功',val,res);
_that.palletNo=val;
_that.$forceUpdate();
_that.getPalletDetail();
},
fail: (rej)=>{
console.log('扫描失败',rej);
uni.showToast({
title: '请在HTTPS环境下点击开启',
icon: 'none',
duration: 3000
});
}
})
1 week ago
// #endif
// #ifdef APP-PLUS
// 允许从相机和相册扫码
//qrCode,barCode
// uni.scanCode({
// scanType: ['qrCode', 'barCode'],
// success: function(res) {
// _that.palletNo=res.result;
// _that.getPalletDetail();
// }
// });
var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
mpaasScanModule.mpaasScan({
// 扫码识别类型参数可多选qrCode、barCode不设置默认识别所有
'scanType': ['qrCode','barCode'],
// 是否隐藏相册默认false不隐藏
'hideAlbum': false,
//ios需要设置这个参数只支持中英文 zh-Hans、en默认中文
'language' : 'en',
//相册选择照片识别错误提示(ios)
'failedMsg': '未识别到二维码,请重试',
//Android支持全屏需要设置此参数
'screenType': 'full' ,
'timeoutInterval':'10', //设置超时时间
'timeoutText':'未识别到二维码?' //超时提醒文本
},(ret) => {
if(ret.resp_code==1000){
// 扫码成功
_that.palletNo=ret.resp_result;
_that.getPalletDetail();
}
})
// #endif
},
// 添加托盘
addPallet(){
if(!this.palletNo){
this.$refs.uToast.show({
title: "托盘编码已存在!不可重复添加!请扫码重试!",
type: "warning",
duration: 3000,
});
}
else {
this.getPalletDetail();
}
},
async getPalletDetail(){
if(!this.palletNo){
this.$refs.uToast.show({
title: "托盘编码为空!请扫码添加托盘信息!",
type: "warning",
duration: 3000,
});
return false
}
var ifexit=0;
this.palletData.forEach((item,index)=>{
if(this.palletNo==item.palletNo){
ifexit++;
}
});
if(ifexit>0){
this.$refs.uToast.show({
title: "托盘编码已存在!不可重复添加!",
type: "warning",
duration: 3000,
});
this.palletNo='';
this.$forceUpdate();
return false;
}
// 托盘详情
uni.showLoading({
title: '数据加载中...'
});
const {data: res} = await uni.$http.get('/getPallet',{palletNo:this.palletNo});
if(res.success){
if(res.data&&res.data.palletNo){
var data =res.data;
if(!data.files){
data["files"]=[];
}
else{
var files=[]
data.files.forEach(item=>{
files.push({
url:item
})
});
data.files=files;
}
if(!data.status){
data["ifadd"]='';
}
var ifexit=0;
this.palletData.forEach((item,index)=>{
if(data.palletNo==item.palletNo){
ifexit++;
}
});
if(ifexit>0){
this.$refs.uToast.show({
title: "托盘编码已存在!不可重复添加!请扫码重试!",
type: "warning",
duration: 3000,
});
}
else{
var palletadd={
...data, isOpen: true
};
this.palletData.push(palletadd);
this.$forceUpdate();
}
this.palletNo='';
this.$forceUpdate();
}
else{
this.$refs.uToast.show({
title: "托盘获取失败!请重试!",
type: "warning",
duration: 3000,
});
this.palletNo='';
this.$forceUpdate();
}
}
else{
this.$refs.uToast.show({
title: "托盘获取失败!请重试!",
type: "warning",
duration: 3000,
});
this.palletNo='';
this.$forceUpdate();
}
},
// 转运操作
finishLoading(){
console.log(this.itemList);
this.$refs.uForm.validate((valid) => {
if (valid) {
var data=[];
this.palletData.forEach((item,index)=>{
// 图片重新设置
var files=[];
item.files.forEach(item=>{
files.push(item.url);
});
data.push({
status:item.status,
palletNo:item.palletNo,
files: files
})
});
if(data.length<1){
this.$refs.uToast.show({
title: "请添加工装托盘进行转运!",
type: "warning",
duration: 3000,
});
return false
}
this.itemList.data=data;
console.log(this.itemList)
// 操作
this.yzdo();
}
else {
this.$refs.uToast.show({
title: "请填写完数据后再提交!",
type: "warning",
duration: 2000,
});
}
});
},
async yzdo(){
uni.showLoading({
title: '转运提交中...'
});
var para={
deliveryCar:this.itemList.deliveryCar,
departCode:this.itemList.departCode,
workshop:this.itemList.workshop,
location:this.itemList.location,
address:this.itemList.address,
toName:this.itemList.toName,
receivePhone:this.itemList.receivePhone,
loadProject:this.itemList.loadProject,
loadInst:this.itemList.loadInst,
loadQty:this.itemList.loadQty,
assemcode:this.itemList.assemcode,
loadDesc:this.itemList.loadDesc,
data:this.itemList.data,
}
const {data: res} = await uni.$http.post('/sendPalletCustom',para);
if(res.success){
this.$refs.uToast.show({
title: "转运提交成功!",
type: "success",
duration: 2000,
});
setTimeout(() => {
uni.navigateBack({
//返回
delta: 1,
});
}, 3000);
}
else{
this.$refs.uToast.show({
title: res.message? res.message:"转运提交失败!",
type: "warning",
duration: 3000,
});
}
},
// 删除
del(index){
console.log(this.palletData[index])
var _this = this;
uni.showModal({
title: '提示',
content: '确定要删除此托盘吗?',
cancelText: '取消',
confirmText: '确定',
success: ress => {
if (ress.confirm) {
// delete _this.palletData[index];
_this.palletData.splice(index,1);
_this.$forceUpdate();
}
else{
return false
}
}
});
},
getusers(){
var commondata = uni.getStorageSync("commondata");
if(commondata){
var data = JSON.parse(commondata);
if(data){
this.users=[];
data.users.forEach(cell=>{
if(cell.addr==this.itemList.address&&cell.dept==this.itemList.departCode&&cell.location==this.itemList.location&&cell.workshop==this.itemList.workshop){
this.users.push(cell);
this.$forceUpdate();
}
});
}
}
},
getTypes() {
//获取数据字典
this.gcs=[];
this.status=[];
var commondata = uni.getStorageSync("commondata");
if(commondata){
var data = JSON.parse(commondata);
if(data){
this.users=data.users;
this.dicts=data.dicts;
this.depts=data.depts;
// 地址
this.address=data.address;
this.dicts.forEach(cell=>{
if("PJCD"==cell.bmlb){
// 工程
this.gcs.push(cell);
}
if("TPZT"==cell.bmlb){
// 托盘转运状态
this.status.push({
value:cell.bm,
text:cell.bmsm
});
}
});
this.$forceUpdate();
}
console.log("this.users",this.users);
console.log("this.gcs",this.gcs);
// console.log("this.status",this.status);
}
else{
this.users=[];
this.dicts=[];
this.depts=[];
this.address=[];
}
},
retType(type,str) {
var rets = '';
if(str==1){
// 状态
this.status.forEach((cell,idx)=>{
if(type==cell.value){
rets=cell.text;
return;
}
});
if(!rets){
rets="其他"
}
}
else if(str==2){
// 部门
this.depts.forEach((cell,idx)=>{
if(type==cell.departCode){
rets=cell.departName;
return;
}
});
}
if(!rets){
rets=type
}
return rets;
},
getStatusClass(status) {
switch (status) {
case '02':
return 'status-waiting';
case '01':
return 'status-delivered';
case '04':
return 'status-outbound';
case '03':
return 'status-complete';
// case '表面接收':
// return 'status-waiting';
// case '建立任务':
// return 'status-delivered';
// case '内表面接收':
// return 'status-receivedf';
// case '配盘完工':
// return 'status-received';
// case '配送出库':
// return 'status-outbound';
// case '完工转运':
// return 'status-complete';
default:
return 'status-default';
}
},
}
};
</script>
<style lang="scss" scoped>
page {
height: 100%;
background-color: #f5f5f5;
}
.ppcon{
width: calc(100vw - 60rpx);
height: calc(100vh - 100rpx) !important;
/* #ifdef H5 */
height: calc(100vh - var(--window-top) - 100rpx) !important;
/* #endif */
overflow-y: auto;
}
::v-deep .uni-collapse-item__wrap{
background-color: #f9f9f9 !important;
}
::v-deep .uni-collapse-item__wrap-content.uni-collapse-item--border{
border-bottom-width:0 !important;
}
::v-deep .uni-collapse-item__title-arrow{
margin-right: 0 !important;
}
::v-deep .u-list-item{
background-color: #ffffff !important;
}
::v-deep .u-form-item {
color: #000;
font-size: 28rpx !important;
padding: 6rpx 0;
}
::v-deep .u-form-item--left {
margin: 0 0 0 18rpx !important;
width: 150rpx;
}
::v-deep .uni-select{
height: 60rpx !important;
}
.sright{
width: 220rpx;
margin-right: 10rpx;
}
.selarr {
width: 100%;
height: 100%;
line-height: 1;
text-align: right;
display: flex;
flex-direction: row;
align-items: center;
.txt{
display: flex;
justify-content: flex-end;
flex: 1;
}
}
.order {
position: relative;
overflow: hidden;
display: block;
background-color: #ffffff;
margin: 0 0;
border-radius: 10rpx;
box-sizing: border-box;
padding: 0;
font-size: 28rpx;
.title {
width: 100%;
padding: 12rpx 0;
margin-bottom: 16rpx;
border-bottom: 0.5rpx solid #eee;
color: #000;
font-weight: 600;
}
.cells {
content: "";
display: block;
overflow: hidden;
font-size: 24rpx;
color: #828e99;
.img3 {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: left;
justify-content: flex-start;
.imgwarp {
box-sizing: border-box;
display: inline-block;
width: 32%;
height: 120rpx;
margin-bottom: 20rpx;
margin-right: 1.33%;
.img {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
}
}
.row {
position: relative;
width: 50%;
display: inline-block;
overflow: hidden;
margin-top: 0;
.title {
width: 120rpx;
color: #828e99;
font-size: 24rpx;
position: absolute;
left: 0;
top: 0;
}
.rleft {
float: left;
color: #33383c;
font-size: 22rpx;
height: 39rpx;
line-height: 39rpx;
.tip {
color: #828e99;
margin-right: 20rpx;
}
}
.rright {
float: right;
}
}
.top {
display: flex;
justify-content: space-between;
.left {
display: flex;
align-items: center;
padding: 10rpx 0 0;
.store {
margin: 0;
padding-left: 50rpx;
background: url("../../static/images/radius.png") no-repeat 0 5rpx;
background-size: auto 88%;
font-size: 30rpx;
color: #33383c;
}
.storehs {
margin: 0;
padding-left: 50rpx;
background: url("../../static/images/radiushs.png") no-repeat 0 5rpx;
background-size: auto 88%;
font-size: 30rpx;
color: #33383c;
}
}
.right {
color: $u-type-warning-dark;
}
}
.item {
position: relative;
display: block;
margin: 12rpx 0 0 0;
.left {
position: absolute;
top: 0;
left: 0;
image {
width: 80rpx;
height: 55rpx;
padding: 0;
display: inline-block;
}
}
.lefttip {
position: absolute;
top: -8rpx;
left: 72rpx;
}
.content {
position: relative;
overflow: hidden;
margin-left: 160rpx;
.title {
color: #33383c;
font-size: 24rpx;
line-height: 50rpx;
.tip {
margin-right: 12rpx;
}
}
}
.right {
position: absolute;
bottom: 10rpx;
right: 0;
image {
width: 64rpx;
height: 64rpx;
}
}
}
.total {
margin-top: 20rpx;
text-align: right;
font-size: 24rpx;
.total-price {
font-size: 32rpx;
}
}
.bottom {
display: flex;
margin-top: 40rpx;
padding: 0 10rpx;
justify-content: space-between;
align-items: center;
.btn {
line-height: 52rpx;
width: 160rpx;
border-radius: 26rpx;
border: 2rpx solid $u-border-color;
font-size: 26rpx;
text-align: center;
color: $u-type-info-dark;
}
.evaluate {
color: $u-type-warning-dark;
border-color: $u-type-warning-dark;
}
}
}
.new-data-box {
width: 600rpx;
height: 800rpx;
margin: 70rpx 30rpx;
}
.container {
min-height: 100%;
box-sizing: border-box;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
height: 88rpx;
padding: 0 30rpx;
background-color: #fff;
position: relative;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.nav-left {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.nav-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.nav-right .complete-btn {
font-size: 30rpx;
color: #007aff;
}
.stepcon{
margin: 20rpx;
}
.section {
margin: 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.tpcon{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding:30rpx 20rpx;
border: 4rpx dashed #ddd;
border-radius: 16rpx;
cursor: pointer;
margin-bottom: 100rpx;
}
.input-group {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.label {
display: block;
font-size: 30rpx;
color: #333;
margin-right: 10rpx;
}
.input-container {
display: flex;
flex:1;
align-items: center;
border: 2rpx solid #ddd;
border-radius: 12rpx;
padding: 10rpx 16rpx;
}
.input-field {
flex: 1;
font-size: 30rpx;
color: #333;
}
.qd-btn{
color:#007AFF;
}
.scan-btn {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
.hint {
display: block;
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
.scan-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding:30rpx;
border: 4rpx dashed #ddd;
border-radius: 16rpx;
cursor: pointer;
margin-bottom: 100rpx;
margin-top: 10rpx;
}
.scan-icon {
margin-bottom: 20rpx;
}
.scan-title {
font-size: 32rpx;
color: #333;
margin-bottom: 10rpx;
}
.scan-desc {
font-size: 26rpx;
color: #999;
}
.order-details {
margin-top: 1rpx;
}
.detail-header {
padding-bottom: 20rpx;
border-bottom: 2rpx solid #eee;
}
.detail-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.detail-item {
display: flex;
margin-bottom: 15rpx;
}
.item-label {
font-size: 28rpx;
color: #666;
width: 180rpx;
}
.item-value {
font-size: 28rpx;
color: #333;
flex: 1;
}
.list-section {
margin-top: 25rpx;
}
.list-title {
font-size: 30rpx;
font-weight: bold;
color: #333;
margin-bottom: 15rpx;
}
.list-item {
padding: 15rpx 0;
border-bottom: 1rpx solid #f0f0f0;
}
.item-text {
font-size: 28rpx;
color: #555;
}
.section-header {
display: flex;
align-items: center;
margin-bottom: 25rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.section-count {
font-size: 28rpx;
color: #999;
margin-left: 10rpx;
}
.pallet-list {
margin-bottom: 30rpx;
}
.pallet-card {
background-color: #f9f9f9;
border-radius: 12rpx;
padding: 20rpx;
margin-bottom: 20rpx;
}
.pallet-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.pallet-number {
font-size: 30rpx;
font-weight: bold;
color: #333;
display: flex;
flex: 1;
}
.pallet-status {
font-size: 24rpx;
color: #999;
padding: 5rpx 15rpx;
border-radius: 20rpx;
background-color: #f0f0f0;
margin-right: 10rpx;
}
.status-waiting {
color: #e6a23c;
background-color: #faecd8;
}
.status-delivered {
color: #1890ff;
background-color: #ecf5ff;
}
.status-receivedf {
color: #52c41a;
background-color: #f0faf4;
}
.status-received {
color: #18b566;
background-color: #f0faf4;
}
.status-outbound {
color: #EC4899;
background-color: #fef0f0;
}
.status-complete {
color: #6366F1;
background-color: #E0E7FF;
}
.status-default {
background-color: #f5f5f5;
color: #666666;
}
.pallet-materials {
margin-bottom: 10rpx;
}
.material-text {
display: block;
font-size: 26rpx;
color: #666;
margin-bottom: 5rpx;
}
.pallet-time {
text-align: right;
}
.time-text {
font-size: 24rpx;
color: #999;
}
.add-pallet-btn {
display: flex;
align-items: center;
justify-content: center;
height: 80rpx;
background-color: #007aff;
border-radius: 12rpx;
color: #fff;
font-size: 28rpx;
cursor: pointer;
width: 140rpx;
margin-left: 10rpx;
}
.btn-text {
margin-left: 2rpx;
}
.bottom-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
padding: 20rpx 30rpx;
background-color: #fff;
border-top: 2rpx solid #eee;
box-sizing: border-box;
}
.action-btn {
flex: 1;
height: 80rpx;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.continue-btn {
background-color: #007aff;
color: #fff;
margin-right: 20rpx;
}
.complete-btn {
background-color: #4cd964;
color: #fff;
}
</style>