唯一码图形对接以及退出登录

2026-03-24 11:38:41 +08:00
parent b648176e82
commit dde27ed688
12 changed files with 310 additions and 41 deletions
--- a/api/login.js
+++ b/api/login.js
@@ -7,15 +7,20 @@ const userLogin = (params) => {
 const getCodeImg = (params) => {
  return request('/captchaImage', params, 'get')
 }
-// 获取图形验证码
+// 获取用户信息
 const getInfo = (params) => {
  return request('/getInfo', params, 'get')
 }
+// 退出登录
+const logout = (params) => {
+  return request('/logout', params, 'post')
+}


 export {
  userLogin,
  getCodeImg,
-  getInfo
+  getInfo,
+  logout
 }

--- a/components/BarcodeGenerator.vue
+++ b/components/BarcodeGenerator.vue
@@ -0,0 +1,60 @@
+<!-- components/BarcodeGenerator.vue -->
+<template>
+  <div class="barcode-container">
+    <canvas v-if="type === 'canvas'" ref="barcodeRef"></canvas>
+    <svg v-else ref="barcodeRef"></svg>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, defineProps, defineEmits } from 'vue';
+import JsBarcode from 'jsbarcode';
+
+// 定义Props（外部传参）
+const props = defineProps({
+  value: { // 条形码内容
+    type: String,
+    required: true
+  },
+  format: { // 条形码格式
+    type: String,
+    default: 'CODE128'
+  },
+  type: { // 渲染类型
+    type: String,
+    default: 'canvas',
+    validator: (val) => ['canvas', 'svg'].includes(val)
+  },
+  options: { // 自定义配置
+    type: Object,
+    default: () => ({
+      width: 2,
+      height: 100,
+      displayValue: true
+    })
+  }
+})
+
+// 定义DOM引用
+const barcodeRef = ref(null)
+
+// 生成条形码
+const generate = () => {
+  if (!barcodeRef.value) return
+  // 合并默认配置和外部配置
+  const finalOptions = { ...props.options, format: props.format }
+  // 清空Canvas（SVG无需清空）
+  if (props.type === 'canvas') {
+    const ctx = barcodeRef.value.getContext('2d')
+    ctx.clearRect(0, 0, barcodeRef.value.width, barcodeRef.value.height)
+  }
+  // 生成条形码
+  JsBarcode(barcodeRef.value, props.value, finalOptions)
+}
+
+// 挂载后初始化
+onMounted(generate)
+
+// 监听props变化，自动更新
+watch([() => props.value, () => props.format, () => props.options], generate, { deep: true })
+</script>
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
    "": {
      "dependencies": {
        "@climblee/uv-ui": "^1.1.20",
+        "jsbarcode": "^3.12.3",
        "z-paging": "^2.8.8"
      },
      "devDependencies": {
@@ -1034,6 +1035,12 @@
        "node": ">= 10.13.0"
      }
    },
+    "node_modules/jsbarcode": {
+      "version": "3.12.3",
+      "resolved": "https://registry.npmmirror.com/jsbarcode/-/jsbarcode-3.12.3.tgz",
+      "integrity": "sha512-CuHU9hC6dPsHF5oVFMo8NW76uQVjH4L22CsP4hW+dNnGywJHC/B0ThA1CTDVLnxKLrrpYdicBLnd2xsgTfRnvg==",
+      "license": "MIT"
+    },
    "node_modules/json-parse-even-better-errors": {
      "version": "2.3.1",
      "resolved": "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -1519,14 +1526,6 @@
        "punycode": "^2.1.0"
      }
    },
-    "node_modules/uview-ui": {
-      "version": "2.0.38",
-      "resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.38.tgz",
-      "integrity": "sha512-6egHDf9lXHKpG3hEjRE0vMx4+VWwKk/ReTf5x18KrIKqdvdPRqO3+B8Unh7vYYwrIxzAWIlmhZ9RJpKI/4UqPQ==",
-      "engines": {
-        "HBuilderX": "^3.1.0"
-      }
-    },
    "node_modules/watchpack": {
      "version": "2.5.1",
      "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.5.1.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
  "dependencies": {
    "@climblee/uv-ui": "^1.1.20",
+    "jsbarcode": "^3.12.3",
    "z-paging": "^2.8.8"
  },
  "devDependencies": {
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -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>
--- a/pages/uniqueCode/myUniqueCode/QrCodeModal.vue
+++ b/pages/uniqueCode/myUniqueCode/QrCodeModal.vue
@@ -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>
--- a/pages/uniqueCode/myUniqueCode/detail.vue
+++ b/pages/uniqueCode/myUniqueCode/detail.vue
@@ -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>
--- a/pages/uniqueCode/myUniqueCode/index.vue
+++ b/pages/uniqueCode/myUniqueCode/index.vue
@@ -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>
--- a/pages/uniqueCode/until.js
+++ b/pages/uniqueCode/until.js
@@ -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,
    }


--- a/static/logo/logo.jpg
+++ b/static/logo/logo.jpg
--- a/styles/theme.scss
+++ b/styles/theme.scss
@@ -71,4 +71,11 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-}
+}
+
+.mt-8{
+	margin-top: 8rpx;
+}
+.mt-16{
+	margin-top: 16rpx;
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -460,6 +460,11 @@ jest-worker@^27.4.5:
    merge-stream "^2.0.0"
    supports-color "^8.0.0"

+jsbarcode@^3.12.3:
+  version "3.12.3"
+  resolved "https://registry.npmmirror.com/jsbarcode/-/jsbarcode-3.12.3.tgz"
+  integrity sha512-CuHU9hC6dPsHF5oVFMo8NW76uQVjH4L22CsP4hW+dNnGywJHC/B0ThA1CTDVLnxKLrrpYdicBLnd2xsgTfRnvg==
+
 json-parse-even-better-errors@^2.3.1:
  version "2.3.1"
  resolved "https://registry.npmmirror.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"