|
|
@@ -2,6 +2,7 @@
|
|
|
<van-row class="container">
|
|
|
<van-col style="background-color: #b0b2b2" span="6">
|
|
|
<van-row justify="center" :gutter="[0, 23]" style="margin-top: 23px">
|
|
|
+ <h3 style="text-align: center; margin-bottom: 20px; color: #3498db;">用户信息</h3>
|
|
|
<van-col span="24"><span>用户ID:</span> {{ userInfo.userId }}</van-col>
|
|
|
<van-col span="24"><span>用户姓名:</span> {{ userInfo.name }}</van-col>
|
|
|
<van-col span="24"><span>IP:</span> {{ ipAddress || '获取中...' }}</van-col>
|
|
|
@@ -10,15 +11,16 @@
|
|
|
</van-col>
|
|
|
<van-col span="18" class="table-container">
|
|
|
<van-cell-group class="custom-cell-group">
|
|
|
- <van-cell title="信息提示:" :value="message" />
|
|
|
+ <van-cell title="系统提示:" :value="message" />
|
|
|
</van-cell-group>
|
|
|
+
|
|
|
<div class="waterfall-table">
|
|
|
<!-- 固定表头 -->
|
|
|
<div class="table-header">
|
|
|
<div class="col index">序号</div>
|
|
|
<div class="col time">时间</div>
|
|
|
<div class="col operator">操作人</div>
|
|
|
- <div class="col content">内容</div>
|
|
|
+ <div class="col content">操作内容</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 表格主体 -->
|
|
|
@@ -28,34 +30,44 @@
|
|
|
finished-text="没有更多了"
|
|
|
@load="onLoad"
|
|
|
class="table-body">
|
|
|
- <van-cell
|
|
|
+ <div
|
|
|
v-for="(item, index) in list"
|
|
|
:key="item.id"
|
|
|
class="table-row"
|
|
|
>
|
|
|
- <span class="col index">{{ index + 1 }}</span>
|
|
|
- <span class="col time">{{ item.time }}</span>
|
|
|
- <span class="col operator">{{ item.operator }}</span>
|
|
|
- <span class="col content">{{ item.content }}</span>
|
|
|
- </van-cell>
|
|
|
+ <div class="col index">{{ index + 1 }}</div>
|
|
|
+ <div class="col time">{{ item.operationTime }}</div>
|
|
|
+ <div class="col operator">{{ item.operator }}</div>
|
|
|
+ <div class="col content">{{ item.deliveryNo }}</div>
|
|
|
+ </div>
|
|
|
</van-list>
|
|
|
</div>
|
|
|
</van-col>
|
|
|
</van-row>
|
|
|
<van-button class="add" icon="setting-o" type="primary" @click="_openSetting" />
|
|
|
- <van-dialog v-model:show="setting.show" title="设置" width="410px" :before-close="_verifyMac"
|
|
|
- show-cancel-button @confirm="_saveMac" @closed="_closeSetting">
|
|
|
+ <van-dialog
|
|
|
+ v-model:show="setting.show"
|
|
|
+ title="设置"
|
|
|
+ class="setting-dialog"
|
|
|
+ show-cancel-button
|
|
|
+ :before-close="_verifyMac"
|
|
|
+ @confirm="_saveMac"
|
|
|
+ @closed="_closeSetting"
|
|
|
+ width="380px">
|
|
|
+
|
|
|
<van-notice-bar
|
|
|
wrapable
|
|
|
left-icon="volume-o"
|
|
|
:scrollable="false"
|
|
|
:text="hintMessage"
|
|
|
/>
|
|
|
+
|
|
|
<van-cell-group inset>
|
|
|
<van-field
|
|
|
v-model="setting.mac"
|
|
|
label="MAC地址"
|
|
|
- placeholder="请输入MAC地址" />
|
|
|
+ placeholder="请输入MAC地址"
|
|
|
+ />
|
|
|
<van-field
|
|
|
v-model="setting.password"
|
|
|
type="password"
|
|
|
@@ -69,9 +81,11 @@
|
|
|
<script setup>
|
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
import { closeListener, openListener, scanInit } from '@/utils/keydownListener'
|
|
|
-import { saveMacAddress, readMacAddress } from '@/utils/android'
|
|
|
+import { scanSuccess, scanError, scanRepeat, saveMacAddress, readMacAddress, pageDelivery, addDelivery } from '@/utils/android'
|
|
|
import { showNotify } from 'vant'
|
|
|
import { getUserIdByCert, getUserNameById } from '@/api/login/index.ts'
|
|
|
+import { receive } from '@/api/scan/index.ts'
|
|
|
+import { formatDateTime } from '@/utils/date.ts'
|
|
|
|
|
|
// 在输入对话框或界面中添加提示文本
|
|
|
const hintMessage = ref(`请前往:设置 → 关于平板电脑 → 设备WLAN MAC 地址 长按复制并粘贴到此处。`);
|
|
|
@@ -85,8 +99,11 @@ const setting = ref({
|
|
|
mac: '',
|
|
|
password: ''
|
|
|
})
|
|
|
-
|
|
|
const message = ref('')
|
|
|
+const list = ref([])
|
|
|
+const loading = ref(false)
|
|
|
+const finished = ref(false)
|
|
|
+
|
|
|
onUnmounted(() => {
|
|
|
closeListener()
|
|
|
})
|
|
|
@@ -131,7 +148,52 @@ const _handlerScan = (code) => {
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
+ // 校验是否已登录
|
|
|
+ if (!userInfo.value.userId) {
|
|
|
+ scanError()
|
|
|
+ showNotify({ type: 'danger', message: '请先登录!' });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 校验是否为空
|
|
|
+ if (!code) {
|
|
|
+ scanError()
|
|
|
+ showNotify({ type: 'danger', message: '请先扫描快递单号!' });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 校验是否已扫描
|
|
|
+ if (list.value.some(item => item.code === code)) {
|
|
|
+ scanRepeat()
|
|
|
+ message.value = '该快递单已扫描!'
|
|
|
+ showNotify({ type: 'danger', message: '该快递单已扫描!' });
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
+ // 校验是否已存在
|
|
|
+ const currentTime = formatDateTime(new Date())
|
|
|
+
|
|
|
+ const result = addDelivery(mac.value, code, userInfo.value.userId)
|
|
|
+ if (result === -1) {
|
|
|
+ scanRepeat()
|
|
|
+ message.value = '该快递单已扫描!'
|
|
|
+ showNotify({ type: 'danger', message: '该快递单已扫描!' });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (result === -2) {
|
|
|
+ scanError()
|
|
|
+ showNotify({ type: 'danger', message: '插入失败,请联系开发人员!' });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ message.value = ''
|
|
|
+ const dto = { deliveryNo: code, machine: mac.value, operator: userInfo.value.userId, operationTime: currentTime }
|
|
|
+ receive(dto).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ scanSuccess()
|
|
|
+ showNotify({ type: 'success', message: '扫描成功!' });
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ scanError()
|
|
|
+ showNotify({ type: 'danger', message: `扫描失败!${err.message}` });
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -199,69 +261,49 @@ const fetchIP = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const list = ref([]);
|
|
|
-const loading = ref(false);
|
|
|
-const finished = ref(false);
|
|
|
-
|
|
|
+const page = ref(1)
|
|
|
+const size = ref(10)
|
|
|
// 模拟数据加载
|
|
|
const onLoad = () => {
|
|
|
- setTimeout(() => {
|
|
|
- const newData = Array.from({ length: 100 }, (_, i) => ({
|
|
|
- id: list.value.length + i + 1,
|
|
|
- time: `2023-06-${Math.floor(Math.random() * 30) + 1} ${Math.floor(Math.random() * 24)}:${Math.floor(Math.random() * 60)}`,
|
|
|
- operator: `用户${Math.floor(Math.random() * 1000)}`,
|
|
|
- content: `${list.value.length + i + 1} - ${'这是一段动换行显示'}`
|
|
|
- }));
|
|
|
-
|
|
|
- list.value.push(...newData);
|
|
|
- loading.value = false;
|
|
|
-
|
|
|
- // 模拟数据加载完成
|
|
|
- if (list.value.length >= 50) {
|
|
|
- finished.value = true;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
+ const result = pageDelivery(page.value, size.value)
|
|
|
+ if (result.size < size.value) {
|
|
|
+ finished.value = true;
|
|
|
+ }
|
|
|
+ list.value.push(...result)
|
|
|
+ loading.value = false;
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="sass">
|
|
|
+*
|
|
|
+ margin: 0
|
|
|
+ padding: 0
|
|
|
+ box-sizing: border-box
|
|
|
+
|
|
|
+body
|
|
|
+ font-family: "PingFang SC", "Microsoft YaHei", sans-serif
|
|
|
+ background: #f5f7fa
|
|
|
+ color: #333
|
|
|
+ overflow: hidden
|
|
|
+ height: 100vh
|
|
|
+
|
|
|
.container
|
|
|
height: 100vh
|
|
|
display: flex
|
|
|
overflow: hidden
|
|
|
font-size: large
|
|
|
+ background: #fff
|
|
|
+
|
|
|
+span
|
|
|
+ font-size: 7px
|
|
|
|
|
|
.table-container
|
|
|
display: flex
|
|
|
flex-direction: column
|
|
|
height: 100%
|
|
|
overflow: hidden
|
|
|
-
|
|
|
-.add
|
|
|
- position: fixed
|
|
|
- bottom: 10px
|
|
|
- left: 10px
|
|
|
- z-index: 1000
|
|
|
-
|
|
|
-span
|
|
|
- font-size: 7px
|
|
|
-
|
|
|
-/* 深度选择器穿透组件作用域 */
|
|
|
-:deep(.custom-cell-group)
|
|
|
- /* 调整标题宽度 */
|
|
|
- .van-cell__title
|
|
|
- flex: 0 0 50px !important /* 固定宽度 */
|
|
|
- font-size: x-large
|
|
|
- max-width: 50px /* 最大宽度 */
|
|
|
- min-width: 50px /* 最小宽度 */
|
|
|
- /* 调整内容区域 */
|
|
|
- .van-cell__value
|
|
|
- flex: 1
|
|
|
- color: red
|
|
|
- font-size: large
|
|
|
- text-align: left /* 左对齐 */
|
|
|
- margin-left: 1px /* 可选:增加左边距 */
|
|
|
+ background: #fff
|
|
|
|
|
|
.waterfall-table
|
|
|
position: relative
|
|
|
@@ -286,6 +328,7 @@ span
|
|
|
padding-top: 0 // 移除之前的padding-top
|
|
|
|
|
|
.table-row
|
|
|
+ height: 18px
|
|
|
display: flex
|
|
|
box-sizing: border-box
|
|
|
|
|
|
@@ -313,4 +356,54 @@ span
|
|
|
flex: 1
|
|
|
min-width: 0 /* 允许内容换行 */
|
|
|
white-space: normal /* 允许换行 */
|
|
|
+
|
|
|
+/* 确保表体中的单元格与表头对齐 */
|
|
|
+:deep(.van-list)
|
|
|
+ .van-cell
|
|
|
+ padding: 0
|
|
|
+ width: 100%
|
|
|
+ box-sizing: border-box
|
|
|
+ .van-cell__title, .van-cell__value
|
|
|
+ flex: none
|
|
|
+
|
|
|
+.add
|
|
|
+ position: fixed
|
|
|
+ bottom: 10px
|
|
|
+ left: 10px
|
|
|
+ z-index: 1000
|
|
|
+ width: 20px
|
|
|
+ height: 20px
|
|
|
+ border-radius: 50%
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15)
|
|
|
+
|
|
|
+:deep(.custom-cell-group)
|
|
|
+ height: auto // 移除固定高度
|
|
|
+ display: flex
|
|
|
+ align-items: center
|
|
|
+ min-height: 20px // 确保有足够高度
|
|
|
+ .van-cell
|
|
|
+ display: flex
|
|
|
+ align-items: center
|
|
|
+ height: 100%
|
|
|
+ .van-cell__title
|
|
|
+ flex: 0 0 50px !important
|
|
|
+ font-size: 10px
|
|
|
+ max-width: 50px
|
|
|
+ min-width: 50px
|
|
|
+ .van-cell__value
|
|
|
+ flex: 1
|
|
|
+ color: red
|
|
|
+ font-size: 9px
|
|
|
+ padding-left: 3px
|
|
|
+ text-align: left
|
|
|
+ margin-left: 1px
|
|
|
+
|
|
|
+.van-notice-bar
|
|
|
+ background-color: #f8f9fa
|
|
|
+ margin: 5px 0 5px 0
|
|
|
+ border: 1px solid #eaeaea
|
|
|
+
|
|
|
+.van-field
|
|
|
+ padding: 5px 16px
|
|
|
+ transition: border-color 0.3s
|
|
|
</style>
|