yangzifeng/hazardousWaste_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

入库流程对接完毕

Browse Source
This commit is contained in:
zx
2026-04-03 08:38:34 +08:00
parent dde27ed688
commit ce6d5e5d6e
42 changed files with 3028 additions and 936 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
pages/warehousing/uniqueCode/myUniqueCode/QrCodeModal.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<view style="display: block;">
<view class="top">
<uv-image src="../../../../static//logo/logo.jpg" width="40px" height="40px" style="margin-top:10rpx" />
<!-- 唯一兼容 iPad 的写法：纯 2D Canvas -->
<canvas id="barcode" type="2d" class="barcode-canvas"></canvas>
</view>
<view class="content mt-16">
<p>物料：
<span>{{ material?.materialName }}</span>
<span v-if="material?.quantity">x {{ material?.quantity }}</span>
</p>
<p>描述：
<span v-if="material?.description">{{ material?.description || '-' }}</span>
<span v-else>
<span v-if="material?.materialShortName">{{ material?.materialShortName }} / </span>
<span v-if="material?.model">{{ material?.model }} / </span>
<span v-if="material?.specification">{{ material?.specification }} / </span>
<span v-if="material?.typeName">{{ material?.typeName }} </span>
</span>
</p>
<view class="top">
<p>备注：
<span>{{ material?.uniqueCodeRemark || '' }}</span>
</p>
<uv-image :src="qrCode" width="80rpx" height="80rpx" />
</view>
</view>
</view>
</template>
<script setup>
import { onMounted, computed, watch } from 'vue';
import JsBarcode from 'jsbarcode';
const props = defineProps({
detail: { type: Object, default: null }
});
const qrCode = computed(() => props.detail?.material?.[0]?.qrCode);
const material = computed(() => props.detail?.material?.[0]);
const barcodeValue = computed(() => props.detail?.material?.[0]?.code || '');
// iPad 兼容核心：不用 document，只用 uni 官方 API
const drawBarcode = () => {
if (!barcodeValue.value) return;
const query = uni.createSelectorQuery();
query.select('#barcode')
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0]?.node;
if (!canvas) return;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 渲染条形码
JsBarcode(canvas, barcodeValue.value, {
format: 'CODE128',
width: 2,
height: 40,
displayValue: false,
margin: 10,
});
});
};
// 延迟执行，保证 iPad 能加载
onMounted(() => {
setTimeout(drawBarcode, 400);
});
// 数据变化重新绘制
watch(
() => props.detail,
() => setTimeout(drawBarcode, 400),
{ deep: true }
);
</script>
<style scoped lang="scss">
.top {
display: flex;
align-items: center;
justify-content: space-between;
}
.content {
// display: flex;
p {
font-weight: 600;
font-size: 14px;
}
span {
font-weight: 400;
font-size: 14px;
}
}
/* 必须给宽度高度，iPad 才会显示 */
.barcode-canvas {
width: 40%;
height: 20px;
}
</style>

184
pages/warehousing/uniqueCode/myUniqueCode/detail.vue Normal file
View File

@@ -0,0 +1,184 @@
<!-- 唯一码详情 -->
<template>
<!-- 自定义导航栏 -->
<navigation :title="pathParams.code ? pathParams.code : '唯一码发放'">
<template #right>
<view class="right-btn flex align-center justify-center ">
<uv-image @click="toEdit" src="../../../../static/edit.png" class="ml-24" width="20px" height="20px"
style="margin-top:10rpx" />
</view>
</template>
</Navigation>
<uv-skeletons :loading="loading" :skeleton="skeleton">
<view class=" content">
<!-- 唯一码展示 -->
<uni-list>
<uni-list-item v-for="item in uniqueCodeList" :key="item.id" clickable class="material-card">
<template v-slot:body>
<p style="display: flex; flex-direction: column; width: 100%;">
<!-- 编码、状态行 -->
<view class="flex-center">
<p class="title">编号：{{ item.code }}</p>
<p class="status">{{ getStatusName(item.status) }}</p>
</view>
<!-- 内容行 -->
<view class="text">
<p>RFID：
<span v-if="item.rfidCode">{{ item.remark }}</span>
<span v-else style="color: #999;">未绑定RFID</span>
</p>
<p>生成时间：
<span>{{ item?.createTime }}</span>
</p>
<!-- 备注行-->
<view class="flex-center qrCode">
<p>备注：
<span v-if="item.remark">{{ item.remark }}</span>
<span v-else style="color: #999;">未填写</span>
</p>
<view @click="toViewQrCode">
<uv-image src="../../../../static/qrcode.png" width="40rpx" height="40rpx"
style="margin-top:10rpx" />
</view>
</view>
</view>
</p>
</template>
</uni-list-item>
</uni-list>
<!-- 物料列表 -只读 -->
<view>
<material-list ref="materialRef" :formData="materialList" isEdit="2" />
</view>
<!-- 底部按钮 -->
<view class="bottom">
<uv-button type="primary" text="唯一码打印"></uv-button>
<uv-button type="success" text="溯源" @click="toTraceability"></uv-button>
</view>
</view>
</uv-skeletons>
<uv-modal ref="modalRef" :title="none" class="qrCodeModal" width="480rpx" :showConfirmButton="false">
<qr-code-modal :detail="materialList" />
</uv-modal>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { detailUniqueCode } from '@/api/uniqueCode'
import { getStatusName, getDetail } from '../until';
import QrCodeModal from './QrCodeModal.vue';
import MaterialList from '../../../components/MaterialList.vue'
import Navigation from '../../../components/Navigation.vue'
const modalRef = ref()
// 路径参数
const pathParams = ref('')
// 物料列表数组
const materialList = ref({
material: {},
remark: ''
})
// 唯一码数组
const uniqueCodeList = ref([])
// 详情数据
const detail = ref([])
// 骨架屏开关
const loading = ref(true)
// 骨架屏样式
const skeleton = [{
type: 'line',
num: 3,
gap: '20rpx',
style: ['width: 200rpx;marginBottom: 50rpx;marginTop:50rpx;padding:24rpx', 'height: 100rpx;', 'width: 500rpx;'],
}]
const toViewQrCode = () => {
modalRef.value.open()
}
// 详情：唯一码
const getDetailInfo = () => {
detailUniqueCode({ id: pathParams.value.id }).then((res) => {
if (res.code == 200) {
// ! 写成数组原因 为了适应可多个物料生成唯一码
// 将物料写入信息以及物料详细信息解构出来、以及qrCode、唯一码对应的物料code、qrCodeMark仅用于二维码页面的备注展示
materialList.value.material = [{
...res.data.material,
...getDetail(res.data.material.wornMaterial),
qrCode: res.data.qrCode,
code: res.data.code, //唯一码code
uniqueCodeMaterialId: res.data.material.id, //唯一码物料id
uniqueCodeRemark: res.data.remark, //唯一码备注
}]
// 唯一码备注
materialList.value.remark = res.data.remark
uniqueCodeList.value = [res.data]
console.log('详情数据：唯一码materialList', materialList);
// 更新缓存物料值
uni.setStorageSync('app_material', materialList.value.material);
} else {
materialList.value = []
uniqueCodeList.value = []
uni.showToast({ title: '暂无数据', icon: 'none' })
}
loading.value = false
})
}
// 溯源
const toTraceability = () => {
}
// 修改：唯一码的物料信息 - 携带title和唯一码id
const toEdit = () => {
uni.navigateTo({
url: `/pages/warehousing/uniqueCode/issueUniqueCode/index?title=${pathParams.value.code}&id=${pathParams.value.id}`,
});
}
// 接收id 且修改标题
onLoad((options) => {
if (!options.id) {
loading.value = false
uni.showToast({ title: '参数错误,无唯一码ID', icon: 'none' })
return
}
pathParams.value = options
getDetailInfo()
})
onShow(() => {
uni.setNavigationBarTitle({ title: pathParams.value.code })
})
</script>
<style scoped lang="scss">
// 底部按钮
.bottom {
position: fixed;
bottom: 0;
height: 60rpx;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
.uv-button-wrapper {
width: 50%;
border-radius: 0;
}
}
::v-deep.qrCodeModal {
.uv-modal__content {
display: block !important;
padding: 24rpx;
}
}
</style>

173
pages/warehousing/uniqueCode/myUniqueCode/index.vue Normal file
View File

@@ -0,0 +1,173 @@
<!-- 唯一码 -->
<template>
<view class="content">
<view class="topSearch">
<uni-easyinput type="text" v-model="queryParams.code" prefixIcon="search" :inputBorder="false"
@iconClick="getMaterialList" placeholder="请输入关键词搜索" />
</view>
<!-- 唯一码列表 -->
<z-paging ref="pagingRef" class="containerBox" v-model="uniqueCodeList" @query="getMaterialList">
<uni-list>
<uni-list-item v-for="item in uniqueCodeList" :key="item.id" clickable class="material-card"
@longpress="() => handleItemLongPress(item, index)" @click="toDetail(item)">
<template v-slot:body>
<p style="display: flex; flex-direction: column; width: 100%;">
<!-- 编码、状态行 -->
<view class="flex-center">
<p class="title">编号：{{ item.code }}</p>
<p class="status">{{ getStatusName(item.status) }}</p>
</view>
<!-- 内容行 -->
<view class="text ">
<p>RFID：
<span v-if="item.rfidCode">{{ item.remark }}</span>
<span v-else style="color: #999;">未绑定RFID</span>
</p>
<p>生成时间：
<span>{{ item?.createTime }}</span>
</p>
<!-- 备注行-->
<view class="flex-center qrCode">
<p>备注：
<span v-if="item.remark">{{ item.remark }}</span>
<span v-else style="color: #999;">未填写</span>
</p>
<view @click.stop="getDetailInfo(item)">
<uv-image src="../../../../static/qrcode.png" width="40rpx" height="40rpx"
style="margin-top:10rpx" />
</view>
</view>
</view>
</p>
</template>
</uni-list-item>
</uni-list>
</z-paging>
<view>
<uni-popup ref="alertDialog" type="center">
<uni-popup-dialog type="error" v-if="isDialog" cancelText="取消" confirmText="确认" title="是否需要删除该唯一码？"
@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
</uni-popup>
</view>
<!-- 唯一码图形显示弹窗 -->
<uv-modal ref="modalRef" :title="none" class="qrCodeModal" :showConfirmButton="false">
<qr-code-modal :detail="materialList" />
</uv-modal>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { getStatusName, getDetail } from '../until';
import { onShow } from "@dcloudio/uni-app";
import { getUniqueCodeList, delUniqueCode, detailUniqueCode } from '@/api/uniqueCode'
import QrCodeModal from './QrCodeModal.vue';
const queryParams = ref({
code: ''
})
const pagingRef = ref(null)
// 开关：唯一码图形
const modalRef = ref()
// 删除的数据
const delItem = ref(null)
// 删除弹框相关
const alertDialog = ref(null)
const isDialog = ref(false)
// 唯一码列表
const uniqueCodeList = ref([])
// 物料列表数组
const materialList = ref({
material: []
})
// 列表：唯一码
const getMaterialList = (pageNo, pageSize) => {
queryParams.value.pageNum = pageNo
console.log(pageNo, pageSize, queryParams.value)
getUniqueCodeList(queryParams.value).then(res => {
res.rows.forEach(e => {
e.showMore = false;
});
pagingRef.value.complete(res.rows)
}).catch(res => {
pagingRef.value.complete(false)
})
}
onShow(() => {
pagingRef.value?.reload?.()
})
// 详情：唯一码
const toDetail = (val) => {
uni.navigateTo({
url: `/pages/warehousing/uniqueCode/myUniqueCode/detail?id=${val.id}&code=${val.code}`,
});
}
// 删除弹窗：显示 长按事件
const handleItemLongPress = (val) => {
alertDialog.value.open()
isDialog.value = true
delItem.value = val
}
//删除弹窗：关闭
const dialogClose = () => {
alertDialog.value.close()
isDialog.value = false
}
//删除弹窗：确认
const dialogConfirm = () => {
console.log(delItem.value.id, 'delItem.value.id');
delUniqueCode({ ids: [delItem.value.id] }).then(res => {
dialogClose()
})
}
// 详情：唯一码
const getDetailInfo = (row) => {
detailUniqueCode({ id: row.id }).then((res) => {
if (res.code == 200) {
materialList.value.material = [{ ...res.data.material, ...getDetail(res.data.material.wornMaterial), qrCode: res.data.qrCode, code: res.data.code, uniqueCodeRemark: res.data.remark }]
setTimeout(() => {
modalRef.value.open()
}, 300)
}
})
}
</script>
<style scoped lang="scss">
.topSearch {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
padding: 10px;
background-color: #fff;
border-bottom: 1px solid #eee;
box-sizing: border-box;
}
.containerBox {
// padding: 0 12rpx;
padding-top: 60px;
width: 100%;
height: 100%;
box-sizing: border-box;
.zp-l-text-rpx {
font-size: 12px;
}
}
::v-deep.qrCodeModal {
.uv-modal__content {
display: block;
padding: 24rpx;
}
}
</style>