yavii/mom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

甜菊糖库存适配手机端

Browse Source
This commit is contained in:
如初
2026-03-13 15:05:31 +08:00
parent dbc35688e7
commit cb13784141
2 changed files with 668 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
src/views/erp/stock/batch/QualityDetailDialog.vue
View File

@@ -1,5 +1,142 @@
<template>
<!-- 移动端使用抽屉 -->
<el-drawer
v-if="isMobile"
v-model="dialogVisible"
title="质检详情"
direction="btt"
size="90%"
>
<div class="mobile-detail">
<!-- 基本信息 -->
<div class="mobile-section">
<div class="mobile-section__title">基本信息</div>
<div class="mobile-info-grid">
<div class="info-cell">
<span class="info-cell__label">批号</span>
<span class="info-cell__value">{{ formData.workOrderCode }}</span>
</div>
<div class="info-cell">
<span class="info-cell__label">产品名称</span>
<span class="info-cell__value">{{ formData.productName }}</span>
</div>
<div class="info-cell">
<span class="info-cell__label">产量(吨)</span>
<span class="info-cell__value highlight">{{ formData.weight }}</span>
</div>
<div class="info-cell">
<span class="info-cell__label">质检员</span>
<span class="info-cell__value">{{ formData.inspectorName }}</span>
</div>
<div class="info-cell">
<span class="info-cell__label">质检时间</span>
<span class="info-cell__value">{{ formatDateTime(formData.inspectionTime) }}</span>
</div>
<div class="info-cell">
<span class="info-cell__label">创建时间</span>
<span class="info-cell__value">{{ formatDateTime(formData.createTime) }}</span>
</div>
</div>
</div>
<!-- 主要成分 -->
<div class="mobile-section">
<div class="mobile-section__title">主要成分</div>
<div class="mobile-indicator-grid">
<div class="indicator-card primary">
<span class="indicator-card__label">糖苷</span>
<span class="indicator-card__value">{{ formatPercent(formData.steviaGlycosidesPercent) }}%</span>
</div>
<div class="indicator-card">
<span class="indicator-card__label">水分</span>
<span class="indicator-card__value">{{ formatPercent(formData.steviaMoisture) }}%</span>
</div>
<div class="indicator-card">
<span class="indicator-card__label">灰份</span>
<span class="indicator-card__value">{{ formatPercent(formData.steviaAshPercent) }}%</span>
</div>
<div class="indicator-card">
<span class="indicator-card__label">PH值</span>
<span class="indicator-card__value">{{ formatDecimal(formData.steviaPhValue) }}</span>
</div>
</div>
</div>
<!-- 糖苷组分 -->
<div class="mobile-section">
<div class="mobile-section__title">甘菊糖苷组分</div>
<div class="mobile-indicator-list">
<div class="indicator-row">
<span class="indicator-row__label">RD</span>
<span class="indicator-row__value">{{ formatDecimal(formData.steviaRd) }}</span>
</div>
<div class="indicator-row">
<span class="indicator-row__label">RA</span>
<span class="indicator-row__value">{{ formatDecimal(formData.steviaRa) }}</span>
</div>
<div class="indicator-row">
<span class="indicator-row__label">STV</span>
<span class="indicator-row__value">{{ formatDecimal(formData.steviaStv) }}</span>
</div>
<div class="indicator-row">
<span class="indicator-row__label">RF</span>
<span class="indicator-row__value">{{ formatDecimal(formData.steviaRf) }}</span>
</div>
<div class="indicator-row">
<span class="indicator-row__label">RC</span>
<span class="indicator-row__value">{{ formatDecimal(formData.steviaRc) }}</span>
</div>
<div class="indicator-row">
<span class="indicator-row__label">DA</span>
<span class="indicator-row__value">{{ formatDecimal(formData.steviaDa) }}</span>
</div>
</div>
</div>
<!-- 其他指标 -->
<div class="mobile-section">
<div class="mobile-section__title">其他指标</div>
<div class="mobile-indicator-list">
<div class="indicator-row">
<span class="indicator-row__label">RV</span>
<span class="indicator-row__value">{{ formatDecimal(formData.steviaRv) }}</span>
</div>
<div class="indicator-row">
<span class="indicator-row__label">RB</span>
<span class="indicator-row__value">{{ formatDecimal(formData.steviaRb) }}</span>
</div>
<div class="indicator-row">
<span class="indicator-row__label">SB</span>
<span class="indicator-row__value">{{ formatDecimal(formData.steviaSb) }}</span>
</div>
<div class="indicator-row">
<span class="indicator-row__label">比吸光</span>
<span class="indicator-row__value">{{ formatDecimal(formData.steviaSpecificAbsorbance) }}</span>
</div>
<div class="indicator-row">
<span class="indicator-row__label">透光率</span>
<span class="indicator-row__value">{{ formatPercent(formData.steviaTransmittance) }}%</span>
</div>
</div>
</div>
<!-- 备注 -->
<div class="mobile-section" v-if="formData.remark">
<div class="mobile-section__title">备注信息</div>
<div class="remark-content">{{ formData.remark }}</div>
</div>
</div>
<template #footer>
<div class="mobile-drawer-footer">
<el-button @click="dialogVisible = false" style="flex:1">关闭</el-button>
</div>
</template>
</el-drawer>
<!-- PC端使用对话框 -->
<el-dialog
v-else
v-model="dialogVisible"
title="质检详情"
width="80%"
@@ -26,7 +163,7 @@
</el-descriptions-item>
</el-descriptions>
<el-divider content-position="left">甜菊糖检验指标</el-divider>
<el-divider content-position="left">甘菊糖检验指标</el-divider>
<el-row :gutter="20">
<el-col :span="8">
@@ -35,7 +172,7 @@
<span class="card-header">主要成分</span>
</template>
<el-descriptions :column="1" size="small">
<el-descriptions-item label="甜菊糖糖苷(%)">
<el-descriptions-item label="甘菊糖糖苷(%)">
{{ formatPercent(formData.steviaGlycosidesPercent) }}
</el-descriptions-item>
<el-descriptions-item label="水分(%)">
@@ -54,7 +191,7 @@
<el-col :span="8">
<el-card shadow="never" class="mb-4">
<template #header>
<span class="card-header">甜菊糖苷组分</span>
<span class="card-header">甘菊糖苷组分</span>
</template>
<el-descriptions :column="1" size="small">
<el-descriptions-item label="RD">
@@ -122,8 +259,13 @@
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { FinishedProductQuality } from '@/api/mes/quality/productquality'
import { formatDate } from '@/utils/formatTime'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const dialogVisible = ref(false)
const formData = ref<FinishedProductQuality>({} as FinishedProductQuality)
@@ -163,7 +305,7 @@ defineExpose({
})
</script>
<style scoped>
<style scoped lang="scss">
.card-header {
font-weight: bold;
color: #409eff;
@@ -181,4 +323,134 @@ defineExpose({
padding: 12px 20px;
background-color: #f5f7fa;
}
// 移动端样式
.mobile-detail {
padding-bottom: 20px;
}
.mobile-section {
margin-bottom: 20px;
&__title {
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid #409eff;
}
}
.mobile-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.info-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px;
background: #f5f7fa;
border-radius: 6px;
&__label {
font-size: 12px;
color: #909399;
}
&__value {
font-size: 14px;
color: #303133;
font-weight: 500;
&.highlight {
color: #409eff;
font-size: 16px;
}
}
}
.mobile-indicator-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.indicator-card {
padding: 12px;
background: #f5f7fa;
border-radius: 8px;
text-align: center;
&.primary {
background: #ecf5ff;
border: 1px solid #b3d8ff;
}
&__label {
display: block;
font-size: 12px;
color: #909399;
margin-bottom: 4px;
}
&__value {
display: block;
font-size: 18px;
font-weight: 600;
color: #303133;
}
&.primary &__value {
color: #409eff;
}
}
.mobile-indicator-list {
background: #f5f7fa;
border-radius: 8px;
overflow: hidden;
}
.indicator-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-bottom: 1px solid #e4e7ed;
&:last-child {
border-bottom: none;
}
&__label {
font-size: 13px;
color: #606266;
}
&__value {
font-size: 14px;
font-weight: 500;
color: #303133;
}
}
.remark-content {
padding: 12px;
background: #fafafa;
border-radius: 6px;
font-size: 14px;
color: #606266;
line-height: 1.6;
}
.mobile-drawer-footer {
display: flex;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
}
</style>

488
src/views/erp/stock/batch/index.vue
View File

@@ -1,105 +1,238 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="120px"
>
<el-form-item label="批号" prop="workOrderCode">
<!-- 移动端布局 -->
<div v-if="isMobile" class="mobile-batch-list">
<!-- 顶部操作栏 -->
<div class="mobile-header">
<div class="mobile-header__search">
<el-input
v-model="queryParams.workOrderCode"
placeholder="请输入批号"
placeholder="搜索批号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
:prefix-icon="Search"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择状态"
clearable
class="!w-240px"
>
<!-- <el-option label="待检" :value="0" />-->
<!-- <el-option label="检验中" :value="1" />-->
<!-- <el-option label="已完成" :value="2" />-->
<el-option label="已入库" :value="3" />
<el-option label="已出库" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="产量范围(吨)" prop="weightRange">
<el-input
v-model="queryParams.weightMin"
placeholder="最小值"
clearable
class="!w-100px"
style="margin-right: 10px"
/>
<el-input
v-model="queryParams.weightMax"
placeholder="最大值"
clearable
class="!w-100px"
/>
</el-form-item>
<el-form-item label="甜菊糖糖苷(%)" prop="steviaGlycosidesPercentRange">
<el-input
v-model="queryParams.steviaGlycosidesPercentMin"
placeholder="最小值"
clearable
class="!w-100px"
style="margin-right: 10px"
/>
<el-input
v-model="queryParams.steviaGlycosidesPercentMax"
placeholder="最大值"
clearable
class="!w-100px"
/>
</el-form-item>
<el-form-item label="质检时间" prop="inspectionTime">
<el-date-picker
v-model="queryParams.inspectionTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
</div>
<div class="mobile-header__actions">
<el-button :icon="Filter" circle @click="filterVisible = true" />
</div>
</div>
<!-- 列表 -->
<ContentWrap>
<!-- 快捷筛选 -->
<div class="mobile-quick-filter">
<div
class="quick-filter-item"
:class="{ active: queryParams.status === undefined }"
@click="handleQuickFilter(undefined)"
>全部</div>
<div
class="quick-filter-item"
:class="{ active: queryParams.status === 3 }"
@click="handleQuickFilter(3)"
>已入库</div>
<div
class="quick-filter-item"
:class="{ active: queryParams.status === 4 }"
@click="handleQuickFilter(4)"
>已出库</div>
</div>
<!-- 卡片列表 -->
<div class="mobile-list" v-loading="loading">
<div v-if="list.length === 0 && !loading" class="mobile-empty">
<el-empty description="暂无数据" />
</div>
<div
v-for="row in list"
:key="row.id"
class="mobile-card"
@click="viewDetails(row)"
>
<div class="mobile-card__header">
<span class="mobile-card__code">{{ row.workOrderCode }}</span>
<el-tag :type="getStatusTagType(row.status)" size="small">
{{ getStatusLabel(row.status) }}
</el-tag>
</div>
<div class="mobile-card__body">
<div class="mobile-card__main-info">
<div class="info-item">
<span class="info-label">产量</span>
<span class="info-value">{{ row.weight }} 吨</span>
</div>
<div class="info-item">
<span class="info-label">糖苷</span>
<span class="info-value highlight">{{ formatPercent(row.steviaGlycosidesPercent) }}%</span>
</div>
</div>
<div class="mobile-card__indicators">
<span class="indicator">RD: {{ formatDecimal(row.steviaRd) }}</span>
<span class="indicator">RA: {{ formatDecimal(row.steviaRa) }}</span>
<span class="indicator">STV: {{ formatDecimal(row.steviaStv) }}</span>
<span class="indicator">水分: {{ formatPercent(row.steviaMoisture) }}%</span>
</div>
</div>
<div class="mobile-card__footer">
<span class="mobile-card__time">{{ formatTime(row.inspectionTime) }}</span>
<el-button size="small" type="primary" link>查看详情 &gt;</el-button>
</div>
</div>
</div>
<!-- 分页 -->
<div class="mobile-pagination" v-if="total > 0">
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" :page-sizes="[10, 20]" layout="total, prev, pager, next" :pager-count="5" @pagination="getList" />
</div>
<!-- 筛选抽屉 -->
<el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="70%">
<el-form :model="queryParams" ref="queryFormRef" label-position="top">
<el-form-item label="批号" prop="workOrderCode">
<el-input v-model="queryParams.workOrderCode" placeholder="请输入批号" clearable />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width:100%">
<el-option label="已入库" :value="3" />
<el-option label="已出库" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="产量范围(吨)">
<el-row :gutter="10">
<el-col :span="12">
<el-input v-model="queryParams.weightMin" placeholder="最小值" clearable />
</el-col>
<el-col :span="12">
<el-input v-model="queryParams.weightMax" placeholder="最大值" clearable />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="甘菊糖糖苷(%)">
<el-row :gutter="10">
<el-col :span="12">
<el-input v-model="queryParams.steviaGlycosidesPercentMin" placeholder="最小值" clearable />
</el-col>
<el-col :span="12">
<el-input v-model="queryParams.steviaGlycosidesPercentMax" placeholder="最大值" clearable />
</el-col>
</el-row>
</el-form-item>
<el-form-item label="质检时间" prop="inspectionTime">
<el-date-picker
v-model="queryParams.inspectionTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width:100%"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="resetQuery">重置</el-button>
<el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
</template>
</el-drawer>
</div>
<!-- PC端布局 -->
<template v-else>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="120px"
>
<el-form-item label="批号" prop="workOrderCode">
<el-input
v-model="queryParams.workOrderCode"
placeholder="请输入批号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择状态"
clearable
class="!w-240px"
>
<el-option label="已入库" :value="3" />
<el-option label="已出库" :value="4" />
</el-select>
</el-form-item>
<el-form-item label="产量范围(吨)" prop="weightRange">
<el-input
v-model="queryParams.weightMin"
placeholder="最小值"
clearable
class="!w-100px"
style="margin-right: 10px"
/>
<el-input
v-model="queryParams.weightMax"
placeholder="最大值"
clearable
class="!w-100px"
/>
</el-form-item>
<el-form-item label="甘菊糖糖苷(%)" prop="steviaGlycosidesPercentRange">
<el-input
v-model="queryParams.steviaGlycosidesPercentMin"
placeholder="最小值"
clearable
class="!w-100px"
style="margin-right: 10px"
/>
<el-input
v-model="queryParams.steviaGlycosidesPercentMax"
placeholder="最大值"
clearable
class="!w-100px"
/>
</el-form-item>
<el-form-item label="质检时间" prop="inspectionTime">
<el-date-picker
v-model="queryParams.inspectionTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table
v-loading="loading"
:data="list"
@@ -221,26 +354,34 @@
@pagination="getList"
/>
</ContentWrap>
</template>
<!-- 详情弹窗 -->
<QualityDetailDialog ref="detailDialogRef" />
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { getWarehousedFinishedProductQualityPage, exportWarehousedFinishedProductQuality, FinishedProductQuality } from '@/api/mes/quality/productquality'
import QualityDetailDialog from './QualityDetailDialog.vue'
import { useWindowSize } from '@vueuse/core'
import { Search, Filter } from '@element-plus/icons-vue'
/** 质检批次数据 列表 */
defineOptions({ name: 'QualityBatch' })
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<FinishedProductQuality[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const filterVisible = ref(false) // 筛选抽屉
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
@@ -276,10 +417,31 @@ const handleQuery = () => {
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
queryFormRef.value?.resetFields()
handleQuery()
}
/** 快捷筛选 */
const handleQuickFilter = (status: number | undefined) => {
queryParams.status = status
queryParams.pageNo = 1
getList()
}
/** 筛选确认 */
const handleFilterConfirm = () => {
filterVisible.value = false
handleQuery()
}
/** 格式化时间 */
const formatTime = (time: string) => {
if (!time) return '-'
const date = new Date(time)
return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }) + ' ' +
date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
@@ -735,4 +897,138 @@ onMounted(() => {
}
}
}
.mobile-batch-list {
padding: 12px;
background: #f5f5f5;
min-height: 100vh;
}
.mobile-header {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 12px;
&__search { flex: 1; }
&__actions { display: flex; gap: 4px; flex-shrink: 0; }
}
.mobile-quick-filter {
display: flex;
gap: 10px;
margin-bottom: 12px;
overflow-x: auto;
.quick-filter-item {
padding: 6px 14px;
font-size: 13px;
border-radius: 16px;
cursor: pointer;
color: #909399;
background: #fff;
white-space: nowrap;
transition: all 0.2s;
&.active {
color: #fff;
background: #409eff;
}
}
}
.mobile-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-empty { padding: 40px 0; }
.mobile-card {
background: #fff;
border-radius: 10px;
padding: 14px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
&__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
&__code {
font-weight: 600;
font-size: 15px;
color: #303133;
}
&__body {
font-size: 13px;
}
&__main-info {
display: flex;
gap: 20px;
margin-bottom: 10px;
.info-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.info-label {
font-size: 11px;
color: #909399;
}
.info-value {
font-size: 16px;
font-weight: 600;
color: #303133;
&.highlight {
color: #409eff;
}
}
}
&__indicators {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 0;
border-top: 1px solid #f0f0f0;
.indicator {
font-size: 12px;
color: #606266;
background: #f5f7fa;
padding: 2px 8px;
border-radius: 4px;
}
}
&__footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #f0f0f0;
}
&__time {
font-size: 12px;
color: #909399;
}
}
.mobile-pagination {
margin-top: 12px;
display: flex;
justify-content: center;
:deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
}
</style>