1091 lines
33 KiB
Vue
1091 lines
33 KiB
Vue
<template>
|
||
<view class="container">
|
||
<uv-search v-model="searchValue" placeholder="请输入" searchIcon="scan" :showAction="true" actionText="搜索"
|
||
@search="searchList" @custom="searchList" @clickIcon="getScanCode()" style="margin-bottom: 20rpx;"></uv-search>
|
||
<!-- <view class="section">
|
||
<view class="form-row">
|
||
<view style="flex: 1;">
|
||
<view class="form-row">
|
||
<uv-input placeholder="请输入订单号码" class="form-control" border="surround" clearable v-model="value" @change="change"></uv-input>
|
||
<button class="scan-btn" @tap="scanOrder">
|
||
<uv-icon name="scan" size="32"></uv-icon>
|
||
</button>
|
||
<button class="btn" @tap="queryOrder">查询</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="section stockModalForm">
|
||
<view class="section-title" style="margin-bottom: 0;">入库信息：</view>
|
||
<uv-form labelPosition="left" labelWidth="80" :model="formModel" :rules="stockRules" ref="stockFormRef">
|
||
<uv-form-item label="入库类型" prop="operationType" borderBottom>
|
||
<uni-data-select v-model="formModel.operationType" :localdata="storageTypeData"
|
||
placeholder="请选择入库类型"></uni-data-select>
|
||
</uv-form-item>
|
||
<uv-form-item label="物资类型" prop="wlType" borderBottom>
|
||
<uni-data-select v-model="formModel.wlType" :localdata="materialTypeData"
|
||
placeholder="请选择物资类型"></uni-data-select>
|
||
</uv-form-item>
|
||
<uv-form-item label="理货员" prop="operator" borderBottom>
|
||
<uni-data-select v-model="formModel.operator" :localdata="userData" placeholder="请选择理货员"></uni-data-select>
|
||
</uv-form-item>
|
||
<uv-form-item label="预入库" prop="execStatus" borderBottom>
|
||
<uni-data-select v-model="formModel.execStatus" :localdata="execStatusList" placeholder="请选择是否预入库"></uni-data-select>
|
||
</uv-form-item>
|
||
<uv-form-item label="所属大库" prop="parentWarehouseName" borderBottom>
|
||
<uni-data-select v-model="formModel.parentWarehouseName" @change="changeWarehouse" :localdata="warehouseBigData" placeholder="请选择所属大库"></uni-data-select>
|
||
</uv-form-item>
|
||
<uv-form-item label="所属小库" prop="cangku" borderBottom>
|
||
<uni-data-select v-model="formModel.cangku" @change="getPlaceList" :localdata="warehouseSmallData" placeholder="请选择所属小库"></uni-data-select>
|
||
</uv-form-item>
|
||
<uv-form-item label="入库时间" prop="operationTime" borderBottom>
|
||
<uni-datetime-picker type="datetime" v-model="formModel.operationTime" :class="formModel.operationTime ? 'operationTime' : ''" placeholder="请选择入库时间" class="formDatatime" :border="false" />
|
||
</uv-form-item>
|
||
</uv-form>
|
||
</view>
|
||
<view class="section" v-if="list.length">
|
||
<view class="section-title">货物信息：共{{ list.length }}条</view>
|
||
<view class="info-box" v-for="(item, index) in list" :key="index">
|
||
<view
|
||
style="display: flex;align-items: center;justify-content: space-between;width: 100%;margin-bottom: 16rpx;">
|
||
<view style="font-weight: bold;">总数量: {{ item.jhQty }}</view>
|
||
<uv-button type="error" style="height: 50rpx" @tap="removeOrder(index)" text="删 除"></uv-button>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">物料号：</text>
|
||
<text class="info-value">{{ item.wlNo }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">物料描述：</text>
|
||
<text class="info-value">{{ item.wlMs }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">项目编号：</text>
|
||
<text class="info-value">{{ item.xmNo }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">项目描述：</text>
|
||
<text class="info-value">{{ item.xmMs }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">供应商：</text>
|
||
<text class="info-value">{{ item.gysMc }}</text>
|
||
</view>
|
||
<view class="info-row" style="align-items: center;">
|
||
<text class="info-label">单价：</text>
|
||
<uv-input placeholder="单价" class="form-control" border="surround" clearable v-model="item.htDj"></uv-input>
|
||
</view>
|
||
<view style="max-height: 1000rpx;overflow-y: auto;">
|
||
<view style="background-color: #FFFFFF;padding: 20rpx;margin-bottom: 20rpx;"
|
||
v-for="(items, indexs) in item.scanList" :key="indexs">
|
||
<view>
|
||
<text class="info-label">存放位置：</text>
|
||
<view class="info-row" style="margin-top: 10rpx;">
|
||
<view class="form-control form-box">
|
||
<view style="flex: 1;height: 100%;" @tap="openSearchPicker(index, indexs, 'pcode')">
|
||
{{ items.pcode }}
|
||
</view>
|
||
<uv-icon name="close-circle-fill" v-if="items.pcode" @tap="clearSearchPicker(index, indexs, 'pcode')"
|
||
color="#C6C7CB" size="36rpx"></uv-icon>
|
||
<!-- <picker style="flex: 1;margin-right: 20rpx;" :range="warehouses" @change="onWarehouseChange1(items, $event)">
|
||
<view style="height: 64rpx;">{{ items.pcode }}</view>
|
||
</picker> -->
|
||
</view>
|
||
<button class="scan-btn" style="margin-left: 10rpx;" @tap="scanPlace(items, 'pcode')">
|
||
<uv-icon name="scan" size="32"></uv-icon>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<text class="info-label">容器码：</text>
|
||
<view class="info-row" style="margin-top: 10rpx;">
|
||
<view class="form-control form-box">
|
||
<picker style="flex: 1;margin-right: 20rpx;" :range="warehouses"
|
||
@change="onWarehouseChange(items, $event)">
|
||
<view style="height: 64rpx;">{{ items.trayCode }}</view>
|
||
</picker>
|
||
</view>
|
||
<button class="scan-btn" style="margin-left: 10rpx;" @tap="scanPlace(items, 'trayCode')">
|
||
<uv-icon name="scan" size="32"></uv-icon>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<text class="info-label">入库数量({{ item.dw }})：</text>
|
||
<view class="info-row" style="margin-top: 10rpx;">
|
||
<uv-input placeholder="入库数量" class="form-control" type="number" border="surround" clearable
|
||
v-model="items.realQty"></uv-input>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<text class="info-label">身份码：</text>
|
||
<view class="info-row" style="margin-top: 10rpx;">
|
||
<uv-input placeholder="身份码" class="form-control" border="surround" clearable
|
||
v-model="items.entityId"></uv-input>
|
||
<button class="scan-btn" style="margin-left: 10rpx;" @tap="scanPlace(items, 'entityId')">
|
||
<uv-icon name="scan" size="32"></uv-icon>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<text class="info-label">现场照片：</text>
|
||
<!-- name="3" multiple -->
|
||
<uv-upload style="margin-top: 10rpx;" :fileList="items.fileList" :maxCount="1" @afterRead="afterRead($event, items)" :previewFullImage="true" @delete="deletePic($event, items)"></uv-upload>
|
||
</view>
|
||
<view>
|
||
<text class="info-label">备注：</text>
|
||
<uv-textarea v-model="items.remark" placeholder="备注" style="margin-top: 10rpx;"></uv-textarea>
|
||
</view>
|
||
<view style="display: flex;width: 100%;align-items: center;justify-content: flex-end;margin-top: 20rpx;">
|
||
<uv-button type="error" style="height: 50rpx" text="删 除" @tap="removePlace(index, indexs)"></uv-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;width: 100%;align-items: center;justify-content: flex-end;margin-top: 20rpx;">
|
||
<uv-button type="primary" style="height: 50rpx" text="新 增" @tap="addPlace(index)"></uv-button>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<searchPicker ref="searchPickerRef" @confirm="searchPickerConfirm" :options="placeData" nodeKey="pcode" />
|
||
<uv-datetime-picker ref="datetimePicker" v-model="datetimeRk" mode="datetime" />
|
||
<!-- <uv-modal ref="stockModalRef" :rules="stockRules" title="入库信息" class="stockModalForm" :showCancelButton="true"
|
||
:closeOnClickOverlay="false" @confirm="stockSubmit" asyncClose>
|
||
<view class="slot-content" style="width: 100%;">
|
||
<uv-form labelPosition="left" labelWidth="80" :model="formModel" :rules="stockRules" ref="stockFormRef">
|
||
<uv-form-item label="入库类型" prop="operationType" borderBottom>
|
||
<uni-data-select v-model="formModel.operationType" :localdata="storageTypeData"
|
||
placeholder="请选择入库类型"></uni-data-select>
|
||
</uv-form-item>
|
||
<uv-form-item label="物资类型" prop="wlType" borderBottom>
|
||
<uni-data-select v-model="formModel.wlType" :localdata="materialTypeData"
|
||
placeholder="请选择物资类型"></uni-data-select>
|
||
</uv-form-item>
|
||
<uv-form-item label="理货员" prop="operator" borderBottom>
|
||
<uni-data-select v-model="formModel.operator" :localdata="userData" placeholder="请选择理货员"></uni-data-select>
|
||
</uv-form-item>
|
||
<uv-form-item label="所属仓库" prop="cangku" borderBottom>
|
||
<uni-data-select v-model="formModel.cangku" :localdata="warehouseData"
|
||
placeholder="请选择所属仓库"></uni-data-select>
|
||
</uv-form-item>
|
||
<uv-form-item label="审核员" prop="approverId" borderBottom >
|
||
<uni-data-select v-model="formModel.approverId" :localdata="userData" placeholder="请选择审核员"></uni-data-select>
|
||
</uv-form-item>
|
||
</uv-form>
|
||
</view>
|
||
</uv-modal> -->
|
||
|
||
<uv-button type="primary" text="确定" size="large" class="btn mainBtn" v-if="list.length" @tap="openInfo">确 定 入
|
||
库</uv-button>
|
||
|
||
<canvas canvas-id="myCanvas" style="position: fixed;left: -1000px;width: 340px;height: 260px;"></canvas>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed } from 'vue';
|
||
import { inAddStorageList, placeList, materialTypeList, storageTypeList, userList, warehouseInfoList, AddStock } from "@/api/storage"
|
||
import { onLoad, onReady } from "@dcloudio/uni-app";
|
||
import searchPicker from "@/components/searchPicker/index.vue"
|
||
import { uploadImg } from "@/api/upload"
|
||
|
||
|
||
const execStatusList = ref([
|
||
{ value: "0", text: "预出库" },
|
||
{ value: "1", text: "已出库" },
|
||
]);
|
||
|
||
const searchValue = ref("")
|
||
const getScanCode = () => {
|
||
uni.scanCode({
|
||
success: function (res) {
|
||
// console.log('条码内容：' + res.result);
|
||
searchValue.value = res.result
|
||
searchList()
|
||
}
|
||
});
|
||
}
|
||
const list = ref([])
|
||
// 搜索列表
|
||
const searchList = () => {
|
||
let obj = {
|
||
sapNo: searchValue.value
|
||
}
|
||
inAddStorageList(obj).then(res => {
|
||
// console.log("搜索", res)
|
||
res.data.forEach(e => {
|
||
e.gysJhId = e.id
|
||
e.scanList = [
|
||
{
|
||
pcode: null,
|
||
trayCode: null,
|
||
realQty: e.jhQty,
|
||
entityId: null,
|
||
remark: null,
|
||
fileList: []
|
||
}
|
||
]
|
||
});
|
||
list.value = res.data
|
||
})
|
||
}
|
||
|
||
// 搜索picker
|
||
const searchPickerRef = ref(null)
|
||
const searchIndex = ref(null)
|
||
const searchIndexs = ref(null)
|
||
const searchKey = ref(null)
|
||
const openSearchPicker = (index, indexs, key) => {
|
||
searchPickerRef.value.open()
|
||
searchIndex.value = index
|
||
searchIndexs.value = indexs
|
||
searchKey.value = key
|
||
}
|
||
const clearSearchPicker = (index, indexs, key) => {
|
||
list.value[index].scanList[indexs][key] = ""
|
||
}
|
||
// 确定选择的存放位置
|
||
const searchPickerConfirm = (e) => {
|
||
// console.log(list.value[searchIndex.value].scanList[searchIndexs.value])
|
||
console.log(e)
|
||
list.value[searchIndex.value].scanList[searchIndexs.value][searchKey.value] = e.pcode
|
||
}
|
||
|
||
|
||
const scanPlace = (items, key) => {
|
||
uni.scanCode({
|
||
success: function (res) {
|
||
if (key === 'pcode' && !placeData.value.some(e => e.locationCode == res.result)) {
|
||
uni.showToast({
|
||
title: `扫码有误`,
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
items[key] = res.result
|
||
}
|
||
});
|
||
}
|
||
|
||
// 存放位置
|
||
const placeData = ref([])
|
||
const getPlaceList = (e) => {
|
||
placeList(e).then(res => {
|
||
console.log("存放位置", res)
|
||
placeData.value = res.data
|
||
})
|
||
}
|
||
|
||
const datetimeRk = Number(new Date())
|
||
// 物资类型
|
||
const materialTypeData = ref([])
|
||
const getMaterialTypeList = () => {
|
||
materialTypeList().then(res => {
|
||
// console.log("物资类型", res)
|
||
res.data.forEach(item => {
|
||
item.value = item.typeCode
|
||
item.text = item.typeName
|
||
});
|
||
materialTypeData.value = res.data
|
||
})
|
||
}
|
||
// 入库类型
|
||
const storageTypeData = ref([])
|
||
const getStoragTypeList = () => {
|
||
storageTypeList().then(res => {
|
||
// console.log("入库类型", res)
|
||
res.data.forEach(item => {
|
||
item.value = item.typeCode
|
||
item.text = item.typeName
|
||
});
|
||
storageTypeData.value = res.data
|
||
})
|
||
}
|
||
// 用户
|
||
const userData = ref([])
|
||
const getUserList = () => {
|
||
userList().then(res => {
|
||
// console.log("入库类型", res)
|
||
res.data.forEach(item => {
|
||
item.value = item.userId
|
||
item.text = item.userName
|
||
});
|
||
userData.value = res.data
|
||
// console.log(userData.value)
|
||
})
|
||
}
|
||
// 仓库列表
|
||
const warehouseBigData = ref([])
|
||
const warehouseSmallData = ref([])
|
||
const getWarehouseInfoList = () => {
|
||
warehouseInfoList().then(res => {
|
||
// console.log("入库类型", res)
|
||
res.data.forEach(item => {
|
||
item.value = item.warehouseCode
|
||
item.text = item.warehouseName
|
||
});
|
||
warehouseBigData.value = res.data
|
||
})
|
||
}
|
||
|
||
const changeWarehouse = (e) => {
|
||
console.log("选择的大仓库", e)
|
||
formModel.value.cangku = ""
|
||
const targetItem = warehouseBigData.value.find(item => e === item.warehouseCode);
|
||
console.log("目标大仓库", targetItem)
|
||
if (targetItem) {
|
||
// 2. 处理children：先判断是否为数组，再转换格式
|
||
warehouseSmallData.value = Array.isArray(targetItem.children)
|
||
? targetItem.children.map(child => ({
|
||
value: child.warehouseCode,
|
||
text: child.warehouseName
|
||
}))
|
||
: [];
|
||
}
|
||
}
|
||
|
||
|
||
// 删除单条记录
|
||
const removeOrder = (index) => {
|
||
list.value.splice(index, 1)
|
||
}
|
||
// 新增存放位置
|
||
const addPlace = (index) => {
|
||
list.value[index].scanList.push({
|
||
pcode: null,
|
||
trayCode: null,
|
||
realQty: null,
|
||
entityId: null,
|
||
remark: null,
|
||
fileList: []
|
||
})
|
||
}
|
||
// 删除存放位置
|
||
const removePlace = (index, indexs) => {
|
||
list.value[index].scanList.splice(indexs, 1)
|
||
}
|
||
|
||
// 选择项数据
|
||
const warehouses = [];
|
||
// const onWarehouseChange1 = (items, e) => {
|
||
// items.pcode = warehouses[e.detail.value]
|
||
// }
|
||
const onWarehouseChange = (items, e) => {
|
||
items.trayCode = warehouses[e.detail.value]
|
||
}
|
||
|
||
|
||
// 上传
|
||
const afterRead = (event, items) => {
|
||
uploadImg(event.file.url, {}).then(res=>{
|
||
items.fileList.push({ url: res.url })
|
||
})
|
||
}
|
||
|
||
const deletePic = (event, items) => {
|
||
items.fileList.splice(event.index, 1)
|
||
}
|
||
|
||
|
||
onLoad(() => {
|
||
getMaterialTypeList()
|
||
getStoragTypeList()
|
||
getUserList()
|
||
getWarehouseInfoList()
|
||
})
|
||
|
||
|
||
|
||
|
||
|
||
const openInfo = () => {
|
||
stockFormRef.value.validate().then(res => {
|
||
// let total = list.value.reduce((num, item) => {
|
||
// return num + item.jhQty
|
||
// }, 0)
|
||
// let sum = 0;
|
||
// list.value.forEach(item => {
|
||
// item.scanList.forEach(items => {
|
||
// sum += parseFloat(items.realQty);
|
||
// });
|
||
// });
|
||
// const realNum = list.value.every(item => item.realQty);
|
||
const realNum = list.value.every(outerItem => {
|
||
// 外层每个元素必须有 scanList，且 scanList 是数组
|
||
if (!Array.isArray(outerItem?.scanList)) {
|
||
return false;
|
||
}
|
||
// 内层 scanList 中每一项的 realQty 必须有值
|
||
return outerItem.scanList.every(innerItem => {
|
||
// 可根据需求选择判断条件：
|
||
// 方式1：严格判断（排除 null/undefined/空字符串/0 等假值）
|
||
return !!innerItem?.realQty;
|
||
|
||
// 方式2：宽松判断（仅排除 null/undefined，允许 0、空字符串等）
|
||
// return innerItem?.realQty !== null && innerItem?.realQty !== undefined;
|
||
});
|
||
}) ?? false; // 若 list.value 为 undefined，最终返回 false;
|
||
if (!realNum) {
|
||
uni.showToast({
|
||
title: "请填写所有数量",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
|
||
// console.log('数量', total, sum)
|
||
// if (total == sum) {
|
||
// 判断存放位置是否有值，并且存放位置：G或者F，容器码可不填
|
||
// const hasNeed = list.value.every(item =>
|
||
// item.scanList.every(nestedItem =>
|
||
// nestedItem.pcode && !(nestedItem.pcode.startsWith('G') || nestedItem.pcode.startsWith('F')) ? (!(nestedItem.pcode.startsWith('G') || nestedItem.pcode.startsWith('F')) && nestedItem.trayCode) : true
|
||
// )
|
||
// );
|
||
// console.log('根据存放位置判断', hasNeed)
|
||
// if (hasNeed) {
|
||
// const rkList = JSON.parse(JSON.stringify(list.value))
|
||
// const allFileListsValid = rkList.every(item =>
|
||
// item.scanList.every(itemScan =>
|
||
// itemScan.fileList.length > 0
|
||
// )
|
||
// )
|
||
// if (!allFileListsValid) {
|
||
// uni.showToast({
|
||
// title: "请上传所有入库的货物图片",
|
||
// icon: "none"
|
||
// })
|
||
// return
|
||
// }
|
||
// 判断是否为发现场入库，如果是发现场入库都可以不填
|
||
// const hasNeedType = list.value.every(item =>
|
||
// item.scanList.every(nestedItem =>
|
||
// nestedItem.pcode
|
||
// )
|
||
// );
|
||
|
||
// // 创建一个Set集合来存储已出现过的pcode
|
||
// const pcodeSet = new Set();
|
||
// // 遍历数据数组
|
||
// list.value.forEach(item => {
|
||
// // 遍历scanList数组
|
||
// item.scanList.forEach(scanItem => {
|
||
// // 如果pcode已存在于Set集合中，说明重复
|
||
// if (pcodeSet.has(scanItem.pcode)) {
|
||
// uni.showToast({
|
||
// title: `存放位置 ${scanItem.pcode} 重复`,
|
||
// icon: 'none'
|
||
// });
|
||
// } else {
|
||
// // 将pcode添加到Set集合中
|
||
// pcodeSet.add(scanItem.pcode);
|
||
// }
|
||
// });
|
||
// });
|
||
|
||
// if (formModel.value.operationType !== "RK025" && !hasNeedType) {
|
||
// uni.showToast({
|
||
// title: "请填写存放位置等必要信息",
|
||
// icon: "none"
|
||
// })
|
||
// return
|
||
// }
|
||
|
||
let form = JSON.parse(JSON.stringify(formModel.value))
|
||
let obj = {
|
||
rkBill: {
|
||
...form,
|
||
},
|
||
}
|
||
obj.rkInfoList = JSON.parse(JSON.stringify(list.value))
|
||
obj.rkInfoList.forEach(item => {
|
||
item.scanList.forEach(itemScan => {
|
||
itemScan.photoUrl = itemScan.fileList.length ? itemScan.fileList[0].url : ""
|
||
})
|
||
})
|
||
|
||
console.log("obj", obj)
|
||
AddStock(obj).then(res => {
|
||
uni.showLoading({
|
||
title: "入库成功...",
|
||
mask: true,
|
||
});
|
||
uni.navigateBack({});
|
||
// uni.showLoading({
|
||
// title: "入库成功，正在打印中...",
|
||
// mask: true,
|
||
// });
|
||
// handleDrawAndBack()
|
||
})
|
||
// } else {
|
||
// uni.showToast({
|
||
// title: "容器码不能为空",
|
||
// icon: "none"
|
||
// })
|
||
// }
|
||
// } else {
|
||
// uni.showToast({
|
||
// title: "入库数量不一致",
|
||
// icon: "none"
|
||
// })
|
||
// }
|
||
})
|
||
}
|
||
|
||
// 弹窗
|
||
const stockModalRef = ref(null)
|
||
const stockFormRef = ref()
|
||
const formModel = ref({
|
||
operationType: '',
|
||
wlType: '',
|
||
operator: '',
|
||
execStatus: null,
|
||
parentWarehouseName: '',
|
||
cangku: '',
|
||
bizType: 0,
|
||
approverId: ''
|
||
})
|
||
const stockRules = ref({
|
||
'operationType': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择入库类型',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'wlType': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择物资类型',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'operator': {
|
||
type: 'number',
|
||
required: true,
|
||
message: '请选择理货员',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'execStatus': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择是否预入库',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'parentWarehouseName': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择所属大仓库',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'cangku': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择所属小仓库',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'approverId': {
|
||
type: 'number',
|
||
required: true,
|
||
message: '请选择审核员',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
})
|
||
|
||
// const stockSubmit = () => {
|
||
// console.log(formModel.value)
|
||
// stockFormRef.value.validate().then(res => {
|
||
// // 判断是否为发现场入库，如果是发现场入库都可以不填
|
||
// const hasNeed = list.value.every(item =>
|
||
// item.scanList.every(nestedItem =>
|
||
// nestedItem.pcode
|
||
// )
|
||
// );
|
||
|
||
// // 创建一个Set集合来存储已出现过的pcode
|
||
// const pcodeSet = new Set();
|
||
// // 遍历数据数组
|
||
// list.value.forEach(item => {
|
||
// // 遍历scanList数组
|
||
// item.scanList.forEach(scanItem => {
|
||
// // 如果pcode已存在于Set集合中，说明重复
|
||
// if (pcodeSet.has(scanItem.pcode)) {
|
||
// uni.showToast({
|
||
// title: `存放位置 ${scanItem.pcode} 重复`,
|
||
// icon: 'none'
|
||
// });
|
||
// } else {
|
||
// // 将pcode添加到Set集合中
|
||
// pcodeSet.add(scanItem.pcode);
|
||
// }
|
||
// });
|
||
// });
|
||
|
||
|
||
// console.log(formModel.value.operationType, hasNeed)
|
||
// if (formModel.value.operationType !== "RK025" && !hasNeed) {
|
||
// uni.showToast({
|
||
// title: "请填写存放位置等必要信息",
|
||
// icon: "none"
|
||
// })
|
||
// stockModalRef.value.closeLoading()
|
||
// return
|
||
// }
|
||
|
||
// let obj = JSON.parse(JSON.stringify(formModel.value))
|
||
// obj.rkList = JSON.parse(JSON.stringify(list.value))
|
||
// obj.rkList.forEach(item => {
|
||
// item.scanList.forEach(itemScan => {
|
||
// itemScan.gysJhId = item.id
|
||
// itemScan.photoUrl = itemScan.fileList.length ? itemScan.fileList[0].url : ""
|
||
// })
|
||
// })
|
||
|
||
// console.log("obj", obj)
|
||
// AddStock(obj).then(res => {
|
||
// uni.showLoading({
|
||
// title: "入库成功，正在打印中...",
|
||
// mask: true,
|
||
// });
|
||
// stockModalRef.value.close()
|
||
// handleDrawAndBack()
|
||
// })
|
||
// }).catch(errors => {
|
||
// stockModalRef.value.closeLoading()
|
||
// })
|
||
// }
|
||
|
||
const handleDrawAndBack = async () => {
|
||
for (const item of list.value) {
|
||
for (const scanItem of item.scanList) {
|
||
// 等待当前 drawCanvas 完成后再继续下一个
|
||
await drawCanvas(item, scanItem);
|
||
}
|
||
}
|
||
// 执行返回
|
||
uni.navigateBack({});
|
||
uni.showLoading()
|
||
}
|
||
|
||
// 计算属性
|
||
// const currentDatePrefix = computed(() => {
|
||
// const date = new Date();
|
||
// return `${date.getMonth() + 1}/${date.getDate()}`;
|
||
// });
|
||
|
||
|
||
// 绘制画布表格+二维码
|
||
|
||
onReady(() => {
|
||
// drawCanvas({wlMs: '保护设备配件,电源插件,', xmMs: '500kV安甸二线等线路在='},{});
|
||
});
|
||
|
||
// 画布相关
|
||
let canvasContext = null;
|
||
|
||
|
||
const drawCanvas = (item, scanItem) => {
|
||
return new Promise((resolve) => {
|
||
canvasContext = uni.createCanvasContext('myCanvas');
|
||
console.log(canvasContext)
|
||
canvasContext.fillStyle = 'white'; // 设置填充颜色为红色
|
||
canvasContext.fillRect(0, 0, 340, 260); // 填充整个画板
|
||
|
||
|
||
// canvasContext.drawImage('../static/image/logo-circle.png', 200, 10, 100, 100);
|
||
// canvasContext.drawImage('../static/image/logo-text.png', 10, 10, 168, 60);
|
||
canvasContext.drawImage('../static/image/logo-circle.png', 10, 10, 100, 100);
|
||
canvasContext.drawImage('../static/image/logo-text.png', 140, 10, 168, 60);
|
||
drawTable(canvasContext, item, scanItem);
|
||
|
||
canvasContext.draw(true, ()=> {
|
||
printImg(resolve)
|
||
}); // 异步绘制，false表示绘制完成后不返回绘图结果
|
||
})
|
||
};
|
||
|
||
|
||
// 绘制表格
|
||
const drawTable = (ctx, item, scanItem) => {
|
||
// 绘制表格数据
|
||
ctx.setFontSize(16);
|
||
ctx.setFillStyle('#000000');
|
||
// ctx.fillText('物料编号：134588788', 10, 100);
|
||
// ctx.fillText('订单编号：300104518', 10, 125);
|
||
// ctx.fillText('物料描述：连接杆', 10, 150);
|
||
// ctx.fillText('项目描述：2025年工频升压试验装置购置', 10, 175);
|
||
// ctx.fillText('供应商：武汉国电中星电力设备有限公司', 10, 200);
|
||
// ctx.fillText('备注：超高压输变电运检中心', 10, 225);
|
||
// ctx.setFontSize(14);
|
||
// ctx.fillText(`A01-010101(${obj}套)`, 10, 128);
|
||
let wlMsHeightNum = 0
|
||
let xmMsHeightNum = 0
|
||
|
||
ctx.fillText(`物料编号：${item.wlNo}`, 140, 85);
|
||
ctx.fillText(`订单编号：${item.sapNo}`, 140, 105);
|
||
// ctx.fillText(`订单编号：${item.sapNo}`, 10, 135);
|
||
// ctx.fillText(`项目描述：${item.xmMs}`, 10, 175);
|
||
wlMsHeightNum = drawSmartWrappedText(ctx, `物料描述：${item.wlMs}`, 10, 135, 17)
|
||
if (wlMsHeightNum == 1) {
|
||
xmMsHeightNum = drawSmartWrappedText(ctx, `项目描述：${item.xmMs}`, 10, 160, 17)
|
||
} else {
|
||
xmMsHeightNum = drawSmartWrappedText(ctx, `项目描述：${item.xmMs}`, 10, 175, 17)
|
||
}
|
||
if (wlMsHeightNum == 1 && xmMsHeightNum == 1) {
|
||
ctx.fillText(`供应商：${item.gysMc}`, 10, 185);
|
||
ctx.fillText(`备注：${scanItem.remark}`, 10, 210);
|
||
ctx.fillText(`存放位置：${scanItem.pcode}(${scanItem.realQty}${item.dw})`, 10, 235);
|
||
} else if (wlMsHeightNum == 1 || xmMsHeightNum == 1) {
|
||
ctx.fillText(`供应商：${item.gysMc}`, 10, 200);
|
||
ctx.fillText(`备注：${scanItem.remark}`, 10, 225);
|
||
ctx.fillText(`存放位置：${scanItem.pcode}(${scanItem.realQty}${item.dw})`, 10, 250);
|
||
} else {
|
||
ctx.fillText(`供应商：${item.gysMc}`, 10, 210);
|
||
ctx.fillText(`备注：${scanItem.remark || '-'}`, 10, 230);
|
||
ctx.fillText(`存放位置：${scanItem.pcode || '-'}(${scanItem.realQty}${item.dw})`, 10, 250);
|
||
}
|
||
|
||
};
|
||
|
||
const drawSmartWrappedText = (ctx, text, x, y, lineHeight) => {
|
||
// 先处理换行符（如果文本中本身包含多行）
|
||
let line = '';
|
||
let currentWidth = 0;
|
||
let heightNum = 1
|
||
// 按字符遍历文本
|
||
for (let i = 0; i < text.length; i++) {
|
||
const char = text[i];
|
||
const charWidth = ctx.measureText(char).width;
|
||
// 如果是空格，记录为潜在的换行点
|
||
const isSpace = char === ' ';
|
||
|
||
// 如果添加当前字符会超出宽度
|
||
if (currentWidth + charWidth > 320) {
|
||
heightNum = 2
|
||
// 情况1：如果当前是空格，直接换行
|
||
if (isSpace) {
|
||
ctx.fillText(line, x, y);
|
||
line = '';
|
||
currentWidth = 0;
|
||
y += lineHeight;
|
||
} else { // 情况2：如果不是空格，尝试回溯到最近的空格
|
||
const lastSpaceIndex = line.lastIndexOf(' ');
|
||
console.log(line, x, y)
|
||
// 如果行内有空格，从最近的空格处换行
|
||
if (lastSpaceIndex !== -1) {
|
||
const lineToDraw = line.substring(0, lastSpaceIndex);
|
||
ctx.fillText(lineToDraw, x, y);
|
||
|
||
// 剩余文本移到下一行
|
||
line = line.substring(lastSpaceIndex + 1) + char;
|
||
currentWidth = ctx.measureText(line).width;
|
||
y += lineHeight;
|
||
} else { // 情况3：行内没有空格（长单词），强制截断
|
||
|
||
ctx.fillText(line, x, y);
|
||
line = char;
|
||
currentWidth = charWidth;
|
||
y += lineHeight;
|
||
}
|
||
}
|
||
} else { // 未超出宽度，正常添加字符
|
||
line += char;
|
||
currentWidth += charWidth;
|
||
}
|
||
}
|
||
|
||
// 绘制最后一行
|
||
if (line) {
|
||
ctx.fillText(line, x, y);
|
||
y += lineHeight;
|
||
}
|
||
|
||
return heightNum; // 返回最终Y坐标，用于继续绘制其他内容
|
||
}
|
||
|
||
// var printSDK = uni.requireNativePlugin("PrintSDK");
|
||
// 打印标签
|
||
const printImg = (resolve) => {
|
||
printSDK.connectPrinter()
|
||
for (let index = 0; index < 8; index++) {
|
||
printSDK.setPaperBack(2)
|
||
}
|
||
// uni.showToast({
|
||
// title: "函数执行成功",
|
||
// icon: "none",
|
||
// });
|
||
// canvas保存成临时图片
|
||
uni.canvasToTempFilePath({
|
||
width: 350,
|
||
height: 600,
|
||
canvasId: 'myCanvas',
|
||
success: function(res) {
|
||
console.log(res.tempFilePath)
|
||
var picData = res.tempFilePath
|
||
// 后台直接打印图片
|
||
saveImage(picData, resolve);
|
||
}
|
||
})
|
||
};
|
||
|
||
|
||
// 保存图片并打印
|
||
const saveImage = (picData, resolve) => {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: picData,
|
||
success(result) {
|
||
// uni.showToast({
|
||
// title: "开始打印图片",
|
||
// icon: "none",
|
||
// });
|
||
var destPic = result.file;
|
||
|
||
var ret = printSDK.initPrint();
|
||
if (ret.code != '0') {
|
||
uni.showToast({
|
||
title: "打印机初始化失败",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
printSDK.printText("\n");
|
||
printSDK.setPrinter(1, 1);
|
||
var path = result.path;
|
||
getImageSize(path);
|
||
// uni.showToast({
|
||
// title: "打印路径：" + path,
|
||
// icon: "none",
|
||
// });
|
||
console.log(path);
|
||
ret = printSDK.printImage(result.file, 3, 0, false);
|
||
if (ret.code == "0") {
|
||
// uni.showToast({
|
||
// title: "函数执行成功",
|
||
// icon: "none",
|
||
// });
|
||
printSDK.searchGap()
|
||
resolve();
|
||
} else {
|
||
uni.showToast({
|
||
title: "函数执行失败",
|
||
icon: "none",
|
||
});
|
||
}
|
||
}
|
||
},
|
||
fail() {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
content: '检测到您没打开获取信息功能权限，是否去设置打开？',
|
||
confirmText: "确认",
|
||
cancelText: '取消',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.openSetting({
|
||
success: (res) => {
|
||
console.log(res);
|
||
uni.showToast({
|
||
title: "请重新打印图片",
|
||
icon: "none"
|
||
});
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: "保存失败，请打开权限功能重试",
|
||
icon: "none"
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
};
|
||
|
||
|
||
// 获取图片尺寸
|
||
const getImageSize = (filePath) => {
|
||
// 使用 uni.getImageInfo 获取图片的元数据，包括尺寸信息
|
||
uni.getImageInfo({
|
||
src: filePath,
|
||
success: (imageInfo) => {
|
||
console.log('图片宽度:', imageInfo.width);
|
||
console.log('图片高度:', imageInfo.height);
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取图片信息失败', err);
|
||
}
|
||
});
|
||
};
|
||
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
padding: 30rpx;
|
||
padding-bottom: 120rpx;
|
||
background-color: #f7f7f7;
|
||
min-height: calc(100vh - 150rpx);
|
||
position: relative;
|
||
}
|
||
|
||
.section {
|
||
background: #fff;
|
||
padding: 40rpx;
|
||
margin-bottom: 30rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.form-row {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.form-control {
|
||
flex: 1;
|
||
border: 2rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.form-box {
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* .btn {
|
||
padding: 0 30rpx;
|
||
height: 68rpx;
|
||
line-height: 68rpx;
|
||
border-radius: 8rpx;
|
||
background: #2196F3;
|
||
color: white;
|
||
font-size: 28rpx;
|
||
} */
|
||
|
||
.scan-btn {
|
||
padding: 0 10rpx;
|
||
height: 68rpx;
|
||
line-height: 68rpx;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.close-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 50%;
|
||
background-color: #C6C7CB;
|
||
|
||
.uv-icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
uni-button:after {
|
||
border: 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 40rpx;
|
||
color: #333;
|
||
border-left: 8rpx solid #2196F3;
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.info-box {
|
||
background: #f8f9fa;
|
||
padding: 30rpx;
|
||
border-radius: 8rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.info-label {
|
||
color: #666;
|
||
width: 200rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.info-value {
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.btn {
|
||
position: fixed;
|
||
width: calc(100vw - 60rpx);
|
||
bottom: 0;
|
||
}
|
||
|
||
.stockModalForm {
|
||
::v-deep .uni-select {
|
||
border-color: #FFFFFF;
|
||
border-bottom: unset;
|
||
padding: 0;
|
||
}
|
||
|
||
.formDatatime{
|
||
::v-deep .uni-date__x-input{
|
||
color: #c0c4cc;
|
||
}
|
||
::v-deep .icon-calendar{
|
||
color: #999 !important;
|
||
}
|
||
::v-deep .uni-date__icon-clear{
|
||
padding-right: 0;
|
||
}
|
||
::v-deep .uni-date__icon-clear .uni-icons{
|
||
font-size: 48rpx !important;
|
||
}
|
||
}
|
||
|
||
.operationTime{
|
||
::v-deep .uni-date__x-input{
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
:deep(.uv-popup__content) {
|
||
overflow: unset !important;
|
||
}
|
||
|
||
::v-deep .uv-modal {
|
||
overflow: unset !important;
|
||
}
|
||
|
||
::v-deep .uv-input__content {
|
||
flex-direction: column;
|
||
}
|
||
|
||
::v-deep .uni-select__input-placeholder {
|
||
font-size: unset;
|
||
color: #c0c4cc;
|
||
}
|
||
|
||
::v-deep .uni-select__selector-item {
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
::v-deep uni-toast {
|
||
z-index: 30000 !important;
|
||
}
|
||
</style> |