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-24 11:38:41 +08:00
parent b648176e82
commit dde27ed688
12 changed files with 310 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
pages/my/index.vue
View File

@@ -5,8 +5,7 @@
<uv-image src="../../static/avatar.png" width="120rpx" height="120rpx" shape="circle" />
<view class="right">
<h3 class="nickName">{{ userInfo?.nickName }}</h3>
<!-- todo 这里仓库信息暂时没有 所以写死 -->
<p class="tag">电网仓储公司</p>
<p class="tag">{{ userInfo?.dept.deptName }}</p>
</view>
</view>
@@ -17,13 +16,26 @@
thumb-size="sm" link @click="item.click" clickable />
</uni-list>
</view>
<uni-popup ref="popupRef" type="center" background-color="#fff" borderRadius="8px">
<view class="popup-wrap" style="width: 400rpx; ">
<view class="popup-body">
<p>确定退出登录吗？</p>
<view class="popup-btn">
<uv-button type="primary" @click="toLogout" text="确定"></uv-button>
<uv-button @click="close" type="info " text="取消"></uv-button>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import { ref } from "vue";
import { logout } from "@/api/login"
const userInfo = ref(null)
const popupRef = ref()
const menuList = [
{
id: 1,
@@ -47,10 +59,25 @@ const menuList = [
thumb: '../../static/exit.svg',
click: () => {
console.log('退出登录')
popupRef.value.open()
}
}
]
// 退出登录
const toLogout = () => {
logout().then((res) => {
uni.removeStorage('app_user')
uni.removeStorage('app_roles')
uni.removeStorage('app_permissions')
uni.navigateTo({
url: '/pages/login/login'
});
})
}
// 弹窗：关闭登录二次确认弹窗
const close = () => {
popupRef.value.close()
}
// 获取缓存内的用户信息
const getUserInfo = () => {
uni.getStorage({
@@ -85,4 +112,25 @@ getUserInfo();
background-color: #4682B4;
}
}
.popup-wrap {
padding: 24rpx;
border-radius: 8px;
}
.popup-body{
p{
font-size: 14px;
font-weight: 500;
}
}
.popup-btn {
margin-top: 20px;
display: flex;
justify-content: space-between;
.uv-button-wrapper{
width: 48%;
margin-left: 8rpx;
}
}
</style>

97
pages/uniqueCode/myUniqueCode/QrCodeModal.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<view class="top">
<img style="width: 80rpx; height: 80rpx;" src="../../../static//logo/logo.jpg" />
<svg id="barcodeSvg" ref="barcodeRef"></svg>
</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?.qrCodeMark || '' }}</span>
</p>
<img :src="qrCode" class="qrcode" />
</view>
</view>
</template>
<script setup>
import { onMounted, computed } from 'vue';
import JsBarcode from 'jsbarcode'
const props = defineProps({
detail: {
type: Object,
default: null,
}
})
// 条形码容器
console.log(props.detail, 'props.detail');
// 二维码
const qrCode = computed(() => props.detail?.[0]?.qrCode);
// 物料数据
const material = computed(() => props.detail?.[0]);
// 条形码
const barcodeValue = computed(() => props.detail?.[0]?.code);
const generateBarcode = () => {
const svg = document.getElementById('barcodeSvg')
// SVG渲染：直接调用JsBarcode，无需清空（会自动替换内容）
JsBarcode(svg, barcodeValue.value, {
format: 'CODE128', // 常用的CODE128格式（支持任意字符）
width: 3,
height: 80,
displayValue: false,
margin: 10 // 条形码四周留白
})
}
onMounted(generateBarcode)
</script>
<style scoped lang="scss">
.qrcode {
width: 120rpx;
height: 120rpx;
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
}
.content {
p {
font-weight: 600;
font-size: 14px;
}
span {
font-weight: 400;
font-size: 14px;
}
}
</style>

56
pages/uniqueCode/myUniqueCode/detail.vue
View File

@@ -27,8 +27,10 @@
<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 @click="toViewQrCode">
<uv-image src="../../../static/qrcode.png" width="40rpx" height="40rpx"
style="margin-top:10rpx" />
</view>
</view>
</view>
</p>
@@ -41,7 +43,7 @@
<p class="btn-link" @click="toEdit">修改</p>
</view>
<view>
<uni-forms ref="materialFormRef" :modelValue="formData.material" class="form">
<uni-forms ref="materialFormRef" :modelValue="materialList" 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%;">
@@ -61,7 +63,7 @@
<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"
<uni-easyinput v-model="materialList[idx].quantity" :disabled="true"
type="number" :clearable="false" />
</uni-forms-item>
<span style=" margin-left: 8rpx; width: 16px;">{{ item.unitName }}</span>
@@ -70,8 +72,9 @@
<!-- 备注行 -->
<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-easyinput type="text" v-model="materialList[idx].remark"
:disabled="true" :clearable="false" :inputBorder="false"
placeholder="请填写备注信息" />
</uni-forms-item>
</view>
</view>
@@ -81,30 +84,32 @@
<!-- 底部按钮 -->
<view class="bottom">
<uv-button type="primary" text="确定"></uv-button>
<uv-button type="success" text="确定"></uv-button>
<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 { getTypeParentNames, getStatusName ,getDetail} from '../until';
const formData = ref({
remark: '',
material: []
})
import { getTypeParentNames, getStatusName, getDetail } from '../until';
import QrCodeModal from './QrCodeModal.vue';
const modalRef = ref()
// 路径参数
const pathParams = ref('')
// 物料列表数组
const materialList = ref([])
// 唯一码数组
const uniqueCodeList = ref([])
// 详情数据
const detail = ref([])
// 骨架屏开关
const loading = ref(true)
// 骨架屏样式
@@ -114,16 +119,17 @@ const skeleton = [{
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) {
// ! 写成数组原因 为了适应可多个物料生成唯一码
materialList.value = [{ ...res.data.material, ...getDetail(res.data.material.wornMaterial) }]
materialList.value = [{ ...res.data.material, ...getDetail(res.data.material.wornMaterial), qrCode: res.data.qrCode, code: res.data.code, qrCodeMark: res.data.remark }]
uniqueCodeList.value = [res.data]
formData.value.material = [{ ...res.data.material, ...getDetail(res.data.material.wornMaterial)}]
console.log(materialList);
} else {
materialList.value = []
@@ -137,11 +143,15 @@ const getDetailInfo = () => {
// 修改：唯一码的物料信息
const toEdit = () => {
uni.setStorageSync('app_material', [{ ...materialList.value[0], uniqueCodeRemark: uniqueCodeList.value[0].remark }]);
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}`,
url: `/pages/uniqueCode/issueUniqueCode/index?code=${pathParams.value.code}&id=${pathParams.value.id}&materialId=${materialList.value?.[0].id}`,
});
}
// 溯源
const toTraceability = () => {
}
// 接收id 且修改标题
onLoad((options) => {
@@ -271,4 +281,12 @@ onShow(() => {
border-radius: 0;
}
}
::v-deep.qrCodeModal {
.uv-modal__content {
display: block;
padding: 24rpx;
}
}
</style>

42
pages/uniqueCode/myUniqueCode/index.vue
View File

@@ -33,8 +33,10 @@
<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 @click.stop="getDetailInfo(item)">
<uv-image src="../../../static/qrcode.png" width="40rpx" height="40rpx"
style="margin-top:10rpx" />
</view>
</view>
</view>
</p>
@@ -44,26 +46,31 @@
</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 } from '../until';
import { getStatusName, getDetail } from '../until';
import { onShow } from "@dcloudio/uni-app";
import { getUniqueCodeList, delUniqueCode } from '@/api/uniqueCode'
import { getUniqueCodeList, delUniqueCode, detailUniqueCode } from '@/api/uniqueCode'
import QrCodeModal from './QrCodeModal.vue';
const queryParams = ref({
code:''
code: ''
})
const pagingRef = ref(null)
// 开关：唯一码图形
const modalRef = ref()
// 删除的数据
const delItem = ref(null)
// 删除弹框相关
@@ -71,7 +78,8 @@ const alertDialog = ref(null)
const isDialog = ref(false)
// 唯一码列表
const uniqueCodeList = ref([])
// 物料列表数组
const materialList = ref([])
// 列表：唯一码
const getMaterialList = () => {
getUniqueCodeList(queryParams.value).then(res => {
@@ -114,6 +122,17 @@ const dialogConfirm = () => {
dialogClose()
})
}
// 详情：唯一码
const getDetailInfo = (row) => {
detailUniqueCode({ id: row.id }).then((res) => {
if (res.code == 200) {
materialList.value = [{ ...res.data.material, ...getDetail(res.data.material.wornMaterial), qrCode: res.data.qrCode, code: res.data.code,qrCodeMark:res.data.remark }]
setTimeout(() => {
modalRef.value.open()
}, 300)
}
})
}
</script>
<style scoped lang="scss">
@@ -140,4 +159,11 @@ const dialogConfirm = () => {
font-size: 12px;
}
}
::v-deep.qrCodeModal {
.uv-modal__content {
display: block;
padding: 24rpx;
}
}
</style>

3
pages/uniqueCode/until.js
View File

@@ -46,6 +46,9 @@ export const getDetail = (info) => {
typeName: info.typeName,
unitName: info.unitName,
typeParentNames: info.typeParentNames,
description: info.description,
weight: info.weight,
kgFactor: info.kgFactor,
}