Skip to content

W
wangxiaolu-sfa-ui
提交 2f6d234a authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

fix(scm): 修复：水印只在系统内页面显示以及修复勤策发货单表格数量超出范围无法垂直滚动问题

上级 374e77d5
隐藏空白字符变更
内嵌 并排
正在显示 包含 209 行增加 和 185 行删除
src/App.vue
浏览文件 @ 2f6d234a
<template>
<el-watermark :font="font"
:content="content"
class="wm-class">
<template v-if="!isInWhiteList">
<el-watermark :font="font"
:content="content"
class="wm-class">
<router-view />
</el-watermark>
</template>
<template v-else>
<router-view />
</el-watermark>
</template>
<back-to-up />
</template>
......@@ -11,6 +16,10 @@
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'
import useUserStore from '@/store/modules/user'
import { isWhiteList } from '@/permission'
const route = useRoute()
const isInWhiteList = computed(() => isWhiteList(route.path))
const content = computed(() => {
return useUserStore().userInfo.nickName + ' ' + useUserStore().userInfo.phone
......@@ -19,14 +28,14 @@ const isDark = computed(() => {
return useSettingsStore().isDark
})
const font = reactive({
color: 'rgba(0, 0, 0, .15)',
color: 'rgba(0, 0, 0, .05)',
})
watch(
isDark,
() => {
font.color = isDark.value
? 'rgba(255, 255, 255, 0.15)'
: 'rgba(0, 0, 0, .15)'
? 'rgba(255, 255, 255, 0.05)'
: 'rgba(0, 0, 0, .05)'
},
{
immediate: true,
......
src/permission.js
浏览文件 @ 2f6d234a
......@@ -14,9 +14,9 @@ import useVersionStore from '@/store/modules/version'
NProgress.configure({ showSpinner: false })
// 登录页，物流查询页
export const whiteList = ['/login', '/logistics']
const whiteList = ['/login', '/logistics']
const isWhiteList = (path) => {
export const isWhiteList = (path) => {
return whiteList.some(pattern => isPathMatch(pattern, path))
}
......
src/views/scm/logistics_receipt/index.vue
浏览文件 @ 2f6d234a
<template>
<div class="app-container">
<div class="container">
<!-- 查询表单 -->
<el-form :model="queryParams"
inline
label-position="left">
<el-row>
<el-form-item label="安徽/北京单据编号"
prop="sentNo">
<el-input v-model="queryParams.sentNo"
clearable
placeholder="输入要查询的安徽/北京单独单号"
@input="getLogisticsReceiptList"
style="width: 250px;" />
</el-form-item>
<el-form-item label="快递单号"
prop="expressNo">
<el-input v-model="queryParams.expressNo"
clearable
placeholder="输入要查询的快递单号"
@input="getLogisticsReceiptList" />
</el-form-item>
<el-form-item label="DD 单号查询"
prop="ddNo">
<el-input v-model="queryParams.ddNo"
clearable
placeholder="输入要查询的 DD 单号"
@input="getLogisticsReceiptList" />
</el-form-item>
<el-form-item label="物流公司编码"
prop="transport">
<el-input v-model="queryParams.transport"
clearable
placeholder="输入要查询的物流公司编码"
@input="getLogisticsReceiptList"
style="width: 220px;" />
</el-form-item>
<el-form-item label="订单状态"
prop="isOperateEnd">
<el-select v-model="queryParams.isOperateEnd"
placeholder="查询订单状态"
clearable
@change="getLogisticsReceiptList">
<el-option label="已完成"
value="true" />
<el-option label="未完成"
value="false" />
</el-select>
</el-form-item>
</el-row>
</el-form>
<!-- 数据表格 -->
<el-table :data="tableList"
border
style="width: 100%"
class="table-container">
<el-table-column v-for="item in columns"
:key="item.label"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
:class-name="item.className">
<template #header="{ column }"
v-if="item.prop === 'receiptPhoto'">
<div class="header-container">
<span>{{ column.label }}</span>
<el-button @click="showPhoto = !showPhoto"
style="margin-left: 10px;">{{ showPhoto ? '隐藏' : '显示' }}图片</el-button>
</div>
</template>
<template #default="scope">
<template v-if="item.prop === 'receiptPhoto'">
<div class="receipt-photo-container"
v-if="showPhoto">
<span v-if="JSON.parse(scope.row[item.prop] || '[]').length === 0">暂无图片</span>
<el-image v-else
v-for="(urlStr, index) in JSON.parse(scope.row[item.prop] || '[]')"
:key="index"
:initial-index="index"
:preview-src-list="JSON.parse(scope.row[item.prop] || '[]')"
preview-teleported
:src="urlStr"
alt="图片"
class="receipt-photo-item"
fit="cover"
style="width: 80px; height: 50px; " />
</div>
</template>
<template v-else-if="item.prop === 'logisticsTrack'">
<el-button type="primary"
@click="handleLogisticsTrack(scope.row)"
text>
查看物流轨迹
</el-button>
</template>
<template v-else-if="item.prop === 'receiptPhotoCompleteFlag'">
<el-select v-model="scope.row[item.prop]"
placeholder="请选择"
style="width: 100%"
@change="handleReceiptPhotoChangeStatus(scope.row)">
<el-option v-for="item in receiptPhotoCompleteFlagOptions"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
</template>
<template v-else-if="item.prop === 'sentStatus'">
<el-select v-model="scope.row[item.prop]"
placeholder="请选择"
filterable
style="width: 100%"
@change="handleSentStatusChange(scope.row)">
<el-option v-for="item in sentStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value" />
<el-row class="client-fix-height container">
<el-col>
<!-- 查询表单 -->
<el-form :model="queryParams"
inline
label-position="left">
<el-row>
<el-form-item label="安徽/北京单据编号"
prop="sentNo">
<el-input v-model="queryParams.sentNo"
clearable
placeholder="输入要查询的安徽/北京单独单号"
@input="getLogisticsReceiptList"
style="width: 250px;" />
</el-form-item>
<el-form-item label="快递单号"
prop="expressNo">
<el-input v-model="queryParams.expressNo"
clearable
placeholder="输入要查询的快递单号"
@input="getLogisticsReceiptList" />
</el-form-item>
<el-form-item label="DD 单号查询"
prop="ddNo">
<el-input v-model="queryParams.ddNo"
clearable
placeholder="输入要查询的 DD 单号"
@input="getLogisticsReceiptList" />
</el-form-item>
<el-form-item label="物流公司编码"
prop="transport">
<el-input v-model="queryParams.transport"
clearable
placeholder="输入要查询的物流公司编码"
@input="getLogisticsReceiptList"
style="width: 220px;" />
</el-form-item>
<el-form-item label="订单状态"
prop="isOperateEnd">
<el-select v-model="queryParams.isOperateEnd"
placeholder="查询订单状态"
clearable
@change="getLogisticsReceiptList">
<el-option label="已完成"
value="true" />
<el-option label="未完成"
value="false" />
</el-select>
</el-form-item>
</el-row>
</el-form>
<!-- 数据表格 -->
<el-table :data="tableList"
border
style="width: 100%"
class="table-container">
<el-table-column v-for="item in columns"
:key="item.label"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
:class-name="item.className">
<template #header="{ column }"
v-if="item.prop === 'receiptPhoto'">
<div class="header-container">
<span>{{ column.label }}</span>
<el-button @click="showPhoto = !showPhoto"
style="margin-left: 10px;">{{ showPhoto ? '隐藏' : '显示' }}图片</el-button>
</div>
</template>
<template #default="scope">
<template v-if="item.prop === 'receiptPhoto'">
<div class="receipt-photo-container"
v-if="showPhoto">
<span v-if="JSON.parse(scope.row[item.prop] || '[]').length === 0">暂无图片</span>
<el-image v-else
v-for="(urlStr, index) in JSON.parse(scope.row[item.prop] || '[]')"
:key="index"
:initial-index="index"
:preview-src-list="JSON.parse(scope.row[item.prop] || '[]')"
preview-teleported
:src="urlStr"
alt="图片"
class="receipt-photo-item"
fit="cover"
style="width: 80px; height: 50px; " />
</div>
</template>
<template v-else-if="item.prop === 'logisticsTrack'">
<el-button type="primary"
@click="handleLogisticsTrack(scope.row)"
text>
查看物流轨迹
</el-button>
</template>
<template v-else-if="item.prop === 'receiptPhotoCompleteFlag'">
<el-select v-model="scope.row[item.prop]"
placeholder="请选择"
style="width: 100%"
@change="handleReceiptPhotoChangeStatus(scope.row)">
<el-option v-for="item in receiptPhotoCompleteFlagOptions"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
</template>
<template v-else-if="item.prop === 'sentStatus'">
<el-select v-model="scope.row[item.prop]"
placeholder="请选择"
filterable
style="width: 100%"
@change="handleSentStatusChange(scope.row)">
<el-option v-for="item in sentStatusOptions"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
</template>
<template v-else>
<!-- 其他字段显示原始值 -->
{{ formatter(scope.row, scope.column, scope.row[item.prop]) }}
<template v-else>
<!-- 其他字段显示原始值 -->
{{ formatter(scope.row, scope.column, scope.row[item.prop]) }}
</template>
</template>
</template>
</el-table-column>
<!-- <el-table-column label="操作"
</el-table-column>
<!-- <el-table-column label="操作"
width="200"
fixed="right">
<template #default="scope">
......@@ -136,13 +137,14 @@
</el-button>
</template>
</el-table-column> -->
</el-table>
<!-- 分页 -->
<pagination :total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getLogisticsReceiptList" />
</div>
</el-table>
<!-- 分页 -->
<pagination :total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getLogisticsReceiptList" />
</el-col>
</el-row>
</div>
</template>
......@@ -402,65 +404,78 @@ const handleSentStatusChange = async (row) => {
<style scoped
lang="scss">
.table-container {
margin-top: 20px;
.app-container {
>.el-row {
.el-col {
display: flex;
flex-direction: column;
height: 100%;
.header-container {
display: flex;
align-items: center;
}
.table-container {
margin-top: 20px;
::v-deep(.el-image) {
img {
width: 80px !important;
height: 50px !important;
}
}
}
.header-container {
display: flex;
align-items: center;
}
.receipt-photo-container {
padding: 0 15px;
display: flex;
flex-wrap: wrap;
gap: 10px;
min-width: 200px;
/* justify-content: center; // 内容整体居中
align-items: flex-start; // 顶部对齐 */
justify-content: flex-start; // 改为左对齐，让每行都从左边开始
align-items: flex-start; // 顶部对齐
::v-deep(.el-image) {
img {
width: 80px !important;
height: 50px !important;
}
}
}
.receipt-photo-item {
border-radius: 4px;
border: 1px solid #e4e7ed;
transition: all 0.3s;
flex: 0 0 80px; // 固定宽度，不伸缩
.receipt-photo-container {
padding: 0 15px;
display: flex;
flex-wrap: wrap;
gap: 10px;
min-width: 200px;
/* justify-content: center; // 内容整体居中
align-items: flex-start; // 顶部对齐 */
justify-content: flex-start; // 改为左对齐，让每行都从左边开始
align-items: flex-start; // 顶部对齐
&:hover {
border-color: #409eff;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}
}
}
.receipt-photo-item {
border-radius: 4px;
border: 1px solid #e4e7ed;
transition: all 0.3s;
flex: 0 0 80px; // 固定宽度，不伸缩
// 让表格列宽自适应内容
::v-deep(.el-table) {
.el-table__body-wrapper {
.el-table__body {
.el-table__row {
.cell {
white-space: nowrap;
overflow: visible;
&:hover {
border-color: #409eff;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}
}
}
td.el-table__cell.col-receipt-photo {
.cell {
padding-right: 0px; // 给回单照片列补充右内边距
padding-left: 0px; // 给回单照片列补充左内边距
text-align: center; // 内容居中
// 让表格列宽自适应内容
::v-deep(.el-table) {
.el-table__body-wrapper {
.el-table__body {
.el-table__row {
.cell {
white-space: nowrap;
overflow: visible;
}
}
td.el-table__cell.col-receipt-photo {
.cell {
padding-right: 0px; // 给回单照片列补充右内边距
padding-left: 0px; // 给回单照片列补充左内边距
text-align: center; // 内容居中
}
}
}
}
}
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论