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-03-20 09:45:13 +08:00
parent 100ea5a0d1
commit b648176e82
63 changed files with 11415 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
pages/uniqueCode/issueUniqueCode/index.vue Normal file
View File

@@ -0,0 +1,242 @@
<!-- 唯一码发放页面 -->
<template>
<view class="content">
<view class="remarkLine">
<span>备注：</span>
<uni-easyinput type="text" v-model="formData.remark" :inputBorder="false" placeholder="请输入备注" />
</view>
<!-- 物料列表 - 添加物料 -->
<view class="remarkLine">
<p>物料列表</p>
<uv-button type="primary" :plain="true" size="small" text="添加物料" @click="toMaterial"></uv-button>
</view>
<view>
<uni-forms ref="materialFormRef" :modelValue="formData.material" class="form">
<view v-for="(item, idx) in materialList" :key="item.id" class="material-card"
style="padding: 24rpx; margin-bottom: 16rpx;">
<view style="display: flex; flex-direction: column; width: 100%;">
<!-- 标题行 -->
<view class="title">{{ item.materialName }} ({{ item.materialCode }})</view>
<!--小标题行 简称/型号/规格/类型 -->
<view class="subTitle">
<span v-if="item.materialShortName">{{ item.materialShortName }} / </span>
<span v-if="item.model">{{ item.model }} / </span>
<span v-if="item.specification">{{ item.specification }} / </span>
<span v-if="item.typeName">{{ item.typeName }} </span>
</view>
<!-- 数量行 -->
<view class="tag">
<uni-tag :text="getTypeParentNames(item.typeParentNames)" type="error" />
<p class="tag-form">
<uni-forms-item :name="`material.${idx}.quantity`">
<uni-easyinput v-model="formData.material[idx].quantity" type="number"
:clearable="false" />
</uni-forms-item>
<span style=" margin-left: 8rpx; width: 16px;">{{ item.unitName }}</span>
</p>
</view>
<!-- 备注行 -->
<view class="remark">
<uni-forms-item :name="`material.${idx}.remark`" label="备注：">
<uni-easyinput type="text" v-model="formData.material[idx].remark" :clearable="false"
:inputBorder="false" placeholder="请填写备注信息" />
</uni-forms-item>
</view>
</view>
</view>
</uni-forms>
</view>
<button class="bottom-btn" type="primary" @click="handleSubmit">提交</button>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { getTypeParentNames } from '../until';
import { addUniqueCode, editUniqueCode } from '@/api/uniqueCode'
import { onLoad, onShow } from '@dcloudio/uni-app';
const formData = ref({
remark: '',
material: []
})
// 物料列表
const materialList = ref([])
const materialFormRef = ref([])
// 路径参数
const pathParams = ref('')
// 选择物料列表
const toMaterial = () => {
uni.navigateTo({
url: '/pages/uniqueCode/issueUniqueCode/materialSelection'
});
}
// 接收路径参数 - 修改标题
onLoad((options) => {
pathParams.value = options
})
onShow(() => {
if (pathParams.value.code) {
uni.setNavigationBarTitle({ title: pathParams.value.code })
}
})
// 创建/编辑 唯一码
const handleSubmit = () => {
materialFormRef.value.validate().then(res => {
let params = {
...formData.value,
material: {
materialId: formData.value.material[0].id,
remark: formData.value.material[0].remark,
quantity: formData.value.material[0].quantity,
unitId: formData.value.material[0].unitId,
}
}
if (pathParams.value.id) {
params.id = pathParams.value.id;
params.material.id = pathParams.value.materialId;
params.material.materialId = formData.value.material[0].materialId;
editUniqueCode(params).then((response) => {
if (response.code == 200) {
uni.showToast({
title: '唯一码编辑成功',
mask: true,
icon: 'success',
})
uni.navigateTo({
url: `/pages/uniqueCode/myUniqueCode/detail?id=${pathParams.value.id}&code=${pathParams.value.code}`,
});
}
})
} else {
addUniqueCode(params).then((response) => {
if (response.code == 200) {
uni.showToast({
title: '唯一码创建成功',
mask: true,
icon: 'success',
})
uni.switchTab({
url: "/pages/warehousing/index"
})
}
})
}
})
}
// 获取缓存内的物料列表
const getMaterialList = () => {
uni.getStorage({
key: 'app_material',
success: ({ data }) => {
materialList.value = data
formData.value.material = data
formData.value.remark = data?.[0]?.uniqueCodeRemark
console.log(formData);
},
fail: (error) => { }
})
}
getMaterialList();
</script>
<style scoped lang="scss">
.remarkLine {
display: flex;
align-items: center;
background-color: #fff;
justify-content: space-between;
padding: 8rpx 24rpx;
margin-bottom: 8rpx;
min-height: 40rpx;
span {
font-size: 14px;
}
p {
font-weight: 700;
font-size: 14px;
}
}
::v-deep .uv-button {
height: 20px;
}
::v-deep .form {
.title {
color: #424242;
}
.tag {
.uni-tag {
display: flex;
align-items: center;
height: calc(25px - 6px);
}
.tag-form {
display: flex;
align-items: center;
}
.uni-forms-item {
margin-bottom: 0;
align-items: center;
.uni-easyinput__content,
.uni-easyinput__content-input {
height: 25px;
width: 80px;
}
}
}
.remark {
.uni-forms-item {
margin-bottom: 0;
margin-top: 16rpx;
display: flex;
align-items: center;
.uni-forms-item__label {
color: #212121;
height: 40rpx;
}
.uni-easyinput__content-input {
height: 40rpx;
.uni-input-wrapper {
text-align: right;
}
}
.uni-input-placeholder {
text-align: right;
font-size: 13px;
}
}
}
}
</style>

121
pages/uniqueCode/issueUniqueCode/materialSelection.vue Normal file
View File

@@ -0,0 +1,121 @@
<!-- 物料选择 -->
<template>
<view class="content">
<view class="topSearch">
<uni-easyinput type="text" v-model="queryParams.keyword" prefixIcon="search" :inputBorder="false"
@iconClick="getMaterialList" placeholder="请输入搜索内容" />
</view>
<!-- 物料列表 -->
<z-paging ref="pagingRef" class="containerBox" v-model="materialList" @query="getMaterialList">
<uni-list>
<uni-list-item v-for="item in materialList" :key="item.id" clickable class="material-card"
@click="onMaterial(item)">
<template v-slot:body>
<p style="display: flex; flex-direction: column; width: 100%;">
<p class="title">{{ item.materialName }} ({{ item.materialCode }})</p>
<p class="subTitle">
<!-- 简称/型号/规格/类型 -->
<span v-if="item.materialShortName">{{ item.materialShortName }} / </span>
<span v-if="item.model">{{ item.model }} / </span>
<span v-if="item.specification">{{ item.specification }} / </span>
<span v-if="item.typeName">{{ item.typeName }} </span>
</p>
<p class="tag">
<uni-tag :text="getTypeParentNames(item.typeParentNames)" type="error" />
<p>单位：{{ item.unitName }}</p>
</p>
</p>
</template>
</uni-list-item>
</uni-list>
</z-paging>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { getMaterial } from '@/api/uniqueCode'
import { onShow } from "@dcloudio/uni-app";
import { getTypeParentNames } from '../until';
const queryParams = ref({
keyword:''
})
const pagingRef = ref(null)
const materialList = ref([])
// 获取列表
const getMaterialList = () => {
getMaterial(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 handleSearch = () => {
}
// 选择物料
const onMaterial = (val) => {
let materialChecked = uni.getStorageSync('app_material');
if (!Array.isArray(materialChecked)) {
materialChecked = [];
}
const idx = materialChecked?.findIndex((i) => i.id === val.id)
if (idx != -1) {
//! 现在仅允许添加一条物料打印一个唯一码 但保留可添加多个
// uni.showToast({
// title: '该物料已添加，请勿重复添加！',
// mask: true,
// icon: 'none',
// })
} else {
if (val) {
// materialChecked = [...materialChecked, { ...val, quantity: 1 }];
materialChecked = [{ ...val, quantity: 1 }]
uni.setStorageSync('app_material', materialChecked);
}
}
uni.navigateTo({
url: '/pages/uniqueCode/issueUniqueCode/index'
});
}
</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;
}
}
</style>

274
pages/uniqueCode/myUniqueCode/detail.vue Normal file
View File

@@ -0,0 +1,274 @@
<!-- 唯一码详情 -->
<template>
<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>
<uv-image src="../../../static/qrcode.png" width="40rpx" height="40rpx"
style="margin-top:10rpx" />
</view>
</view>
</p>
</template>
</uni-list-item>
</uni-list>
<!-- 物料列表 -->
<view class="remarkLine">
<p>物料列表</p>
<p class="btn-link" @click="toEdit">修改</p>
</view>
<view>
<uni-forms ref="materialFormRef" :modelValue="formData.material" class="form">
<view v-for="(item, idx) in materialList" :key="item.id" class="material-card"
style="padding: 24rpx; margin-bottom: 16rpx;">
<view style="display: flex; flex-direction: column; width: 100%;">
<!-- 标题行 -->
<view class="title">{{ item.materialName }} ({{ item.materialCode }})</view>
<!--小标题行 简称/型号/规格/类型 -->
<view class="subTitle">
<span v-if="item.materialShortName">{{ item.materialShortName }} / </span>
<span v-if="item.model">{{ item.model }} / </span>
<span v-if="item.specification">{{ item.specification }} / </span>
<span v-if="item.typeName">{{ item.typeName }} </span>
</view>
<!-- 数量行 -->
<view class="tag">
<uni-tag :text="getTypeParentNames(item.typeParentNames) || ''" type="error" />
<p class="tag-form">
<uni-forms-item :name="`material.${idx}.quantity`">
<uni-easyinput v-model="formData.material[idx].quantity" :disabled="true"
type="number" :clearable="false" />
</uni-forms-item>
<span style=" margin-left: 8rpx; width: 16px;">{{ item.unitName }}</span>
</p>
</view>
<!-- 备注行 -->
<view class="remark">
<uni-forms-item :name="`material.${idx}.remark`" label="备注：">
<uni-easyinput type="text" v-model="formData.material[idx].remark" :disabled="true"
:clearable="false" :inputBorder="false" placeholder="请填写备注信息" />
</uni-forms-item>
</view>
</view>
</view>
</uni-forms>
</view>
<!-- 底部按钮 -->
<view class="bottom">
<uv-button type="primary" text="确定"></uv-button>
<uv-button type="success" text="确定"></uv-button>
</view>
</view>
</uv-skeletons>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { detailUniqueCode } from '@/api/uniqueCode'
import { getTypeParentNames, getStatusName ,getDetail} from '../until';
const formData = ref({
remark: '',
material: []
})
// 路径参数
const pathParams = ref('')
// 物料列表数组
const materialList = ref([])
// 唯一码数组
const uniqueCodeList = 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 getDetailInfo = () => {
detailUniqueCode({ id: pathParams.value.id }).then((res) => {
if (res.code == 200) {
// ! 写成数组原因 为了适应可多个物料生成唯一码
materialList.value = [{ ...res.data.material, ...getDetail(res.data.material.wornMaterial) }]
uniqueCodeList.value = [res.data]
formData.value.material = [{ ...res.data.material, ...getDetail(res.data.material.wornMaterial)}]
console.log(materialList);
} else {
materialList.value = []
uniqueCodeList.value = []
uni.showToast({ title: '暂无数据', icon: 'none' })
}
loading.value = false
})
}
// 修改：唯一码的物料信息
const toEdit = () => {
uni.setStorageSync('app_material', [{ ...materialList.value[0], uniqueCodeRemark: uniqueCodeList.value[0].remark }]);
uni.navigateTo({
url: `/pages/uniqueCode/issueUniqueCode/index?code=${pathParams.value.code}&id=${pathParams.value.id}&materialId=${materialList.value[0].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">
.remarkLine {
display: flex;
align-items: center;
background-color: #fff;
justify-content: space-between;
padding: 8rpx 24rpx;
margin-bottom: 4rpx;
min-height: 40rpx;
margin-top: 16rpx;
span {
font-size: 14px;
}
p {
font-weight: 700;
font-size: 14px;
}
.btn-link {
font-weight: 500;
color: #3c9cff;
}
}
::v-deep .form {
.title {
color: #424242;
}
.tag {
.uni-tag {
display: flex;
align-items: center;
height: calc(25px - 6px);
}
.tag-form {
display: flex;
align-items: center;
}
.uni-forms-item {
margin-bottom: 0;
align-items: center;
.uni-easyinput__content,
.uni-easyinput__content-input {
height: 25px;
width: 80px;
}
}
}
.remark {
.uni-forms-item {
margin-bottom: 0;
margin-top: 16rpx;
display: flex;
align-items: center;
.is-disabled {
background-color: #fff !important;
}
.uni-forms-item__label {
color: #212121;
height: 40rpx;
}
.uni-easyinput__content-input {
height: 40rpx;
.uni-input-wrapper {
text-align: right;
}
}
.uni-input-placeholder {
text-align: right;
font-size: 13px;
}
}
}
.uni-input-input {
color: #616161
}
}
// 底部按钮
.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;
}
}
</style>

143
pages/uniqueCode/myUniqueCode/index.vue Normal file
View File

@@ -0,0 +1,143 @@
<!-- 唯一码 -->
<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>
<uv-image src="../../../static/qrcode.png" width="40rpx" height="40rpx"
style="margin-top:10rpx" />
</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>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { getStatusName } from '../until';
import { onShow } from "@dcloudio/uni-app";
import { getUniqueCodeList, delUniqueCode } from '@/api/uniqueCode'
const queryParams = ref({
code:''
})
const pagingRef = ref(null)
// 删除的数据
const delItem = ref(null)
// 删除弹框相关
const alertDialog = ref(null)
const isDialog = ref(false)
// 唯一码列表
const uniqueCodeList = ref([])
// 列表：唯一码
const getMaterialList = () => {
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/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 => {
console.log(res, '11');
dialogClose()
})
}
</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;
}
}
</style>

52
pages/uniqueCode/until.js Normal file
View File

@@ -0,0 +1,52 @@
export const getTypeParentNames = (val) => {
if (val) {
let value = val.replace("/", ",");
const arr = `${value}`.split(",");
return arr[arr?.length - 1];
}
};
const statusMenu = [
{
value: 0,
label: "初始化创建",
},
{
value: 1,
label: "已打印",
},
{
value: 2,
label: "已入库",
},
{
value: 3,
label: "已出库,",
},
{
value: 3,
label: "已配送,",
},
];
export const getStatusName = (val) => {
if (val) {
return statusMenu.find((i) => i.value == val)?.label || "";
}
return "";
};
// 唯一码修改 生成想要的对象 切勿解构对象 会覆盖前值 数据错误
export const getDetail = (info) => {
return {
materialName: info.materialName,
materialCode: info.materialCode,
materialShortName: info.materialShortName,
model: info.model,
specification: info.specification,
typeName: info.typeName,
unitName: info.unitName,
typeParentNames: info.typeParentNames,
}
}