甜菊糖库存适配手机端
This commit is contained in:
@@ -1,5 +1,142 @@
|
|||||||
<template>
|
<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
|
<el-dialog
|
||||||
|
v-else
|
||||||
v-model="dialogVisible"
|
v-model="dialogVisible"
|
||||||
title="质检详情"
|
title="质检详情"
|
||||||
width="80%"
|
width="80%"
|
||||||
@@ -26,7 +163,7 @@
|
|||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
|
|
||||||
<el-divider content-position="left">甜菊糖检验指标</el-divider>
|
<el-divider content-position="left">甘菊糖检验指标</el-divider>
|
||||||
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
@@ -35,7 +172,7 @@
|
|||||||
<span class="card-header">主要成分</span>
|
<span class="card-header">主要成分</span>
|
||||||
</template>
|
</template>
|
||||||
<el-descriptions :column="1" size="small">
|
<el-descriptions :column="1" size="small">
|
||||||
<el-descriptions-item label="甜菊糖糖苷(%)">
|
<el-descriptions-item label="甘菊糖糖苷(%)">
|
||||||
{{ formatPercent(formData.steviaGlycosidesPercent) }}
|
{{ formatPercent(formData.steviaGlycosidesPercent) }}
|
||||||
</el-descriptions-item>
|
</el-descriptions-item>
|
||||||
<el-descriptions-item label="水分(%)">
|
<el-descriptions-item label="水分(%)">
|
||||||
@@ -54,7 +191,7 @@
|
|||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-card shadow="never" class="mb-4">
|
<el-card shadow="never" class="mb-4">
|
||||||
<template #header>
|
<template #header>
|
||||||
<span class="card-header">甜菊糖苷组分</span>
|
<span class="card-header">甘菊糖苷组分</span>
|
||||||
</template>
|
</template>
|
||||||
<el-descriptions :column="1" size="small">
|
<el-descriptions :column="1" size="small">
|
||||||
<el-descriptions-item label="RD">
|
<el-descriptions-item label="RD">
|
||||||
@@ -122,8 +259,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
import { FinishedProductQuality } from '@/api/mes/quality/productquality'
|
import { FinishedProductQuality } from '@/api/mes/quality/productquality'
|
||||||
import { formatDate } from '@/utils/formatTime'
|
import { formatDate } from '@/utils/formatTime'
|
||||||
|
import { useWindowSize } from '@vueuse/core'
|
||||||
|
|
||||||
|
const { width } = useWindowSize()
|
||||||
|
const isMobile = computed(() => width.value < 768)
|
||||||
|
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
const formData = ref<FinishedProductQuality>({} as FinishedProductQuality)
|
const formData = ref<FinishedProductQuality>({} as FinishedProductQuality)
|
||||||
@@ -163,7 +305,7 @@ defineExpose({
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.card-header {
|
.card-header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #409eff;
|
color: #409eff;
|
||||||
@@ -181,4 +323,134 @@ defineExpose({
|
|||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
background-color: #f5f7fa;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -1,105 +1,238 @@
|
|||||||
<template>
|
<template>
|
||||||
<ContentWrap>
|
<!-- 移动端布局 -->
|
||||||
<!-- 搜索工作栏 -->
|
<div v-if="isMobile" class="mobile-batch-list">
|
||||||
<el-form
|
<!-- 顶部操作栏 -->
|
||||||
class="-mb-15px"
|
<div class="mobile-header">
|
||||||
:model="queryParams"
|
<div class="mobile-header__search">
|
||||||
ref="queryFormRef"
|
|
||||||
:inline="true"
|
|
||||||
label-width="120px"
|
|
||||||
>
|
|
||||||
<el-form-item label="批号" prop="workOrderCode">
|
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.workOrderCode"
|
v-model="queryParams.workOrderCode"
|
||||||
placeholder="请输入批号"
|
placeholder="搜索批号"
|
||||||
clearable
|
clearable
|
||||||
@keyup.enter="handleQuery"
|
@keyup.enter="handleQuery"
|
||||||
class="!w-240px"
|
:prefix-icon="Search"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</div>
|
||||||
<el-form-item label="状态" prop="status">
|
<div class="mobile-header__actions">
|
||||||
<el-select
|
<el-button :icon="Filter" circle @click="filterVisible = true" />
|
||||||
v-model="queryParams.status"
|
</div>
|
||||||
placeholder="请选择状态"
|
</div>
|
||||||
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>
|
|
||||||
|
|
||||||
<!-- 列表 -->
|
<!-- 快捷筛选 -->
|
||||||
<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>查看详情 ></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
|
<el-table
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
:data="list"
|
:data="list"
|
||||||
@@ -221,26 +354,34 @@
|
|||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
/>
|
/>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
|
</template>
|
||||||
|
|
||||||
<!-- 详情弹窗 -->
|
<!-- 详情弹窗 -->
|
||||||
<QualityDetailDialog ref="detailDialogRef" />
|
<QualityDetailDialog ref="detailDialogRef" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { computed } from 'vue'
|
||||||
import { dateFormatter } from '@/utils/formatTime'
|
import { dateFormatter } from '@/utils/formatTime'
|
||||||
import download from '@/utils/download'
|
import download from '@/utils/download'
|
||||||
import { getWarehousedFinishedProductQualityPage, exportWarehousedFinishedProductQuality, FinishedProductQuality } from '@/api/mes/quality/productquality'
|
import { getWarehousedFinishedProductQualityPage, exportWarehousedFinishedProductQuality, FinishedProductQuality } from '@/api/mes/quality/productquality'
|
||||||
import QualityDetailDialog from './QualityDetailDialog.vue'
|
import QualityDetailDialog from './QualityDetailDialog.vue'
|
||||||
|
import { useWindowSize } from '@vueuse/core'
|
||||||
|
import { Search, Filter } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
/** 质检批次数据 列表 */
|
/** 质检批次数据 列表 */
|
||||||
defineOptions({ name: 'QualityBatch' })
|
defineOptions({ name: 'QualityBatch' })
|
||||||
|
|
||||||
|
const { width } = useWindowSize()
|
||||||
|
const isMobile = computed(() => width.value < 768)
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
const message = useMessage() // 消息弹窗
|
||||||
const { t } = useI18n() // 国际化
|
const { t } = useI18n() // 国际化
|
||||||
|
|
||||||
const loading = ref(true) // 列表的加载中
|
const loading = ref(true) // 列表的加载中
|
||||||
const list = ref<FinishedProductQuality[]>([]) // 列表的数据
|
const list = ref<FinishedProductQuality[]>([]) // 列表的数据
|
||||||
const total = ref(0) // 列表的总页数
|
const total = ref(0) // 列表的总页数
|
||||||
|
const filterVisible = ref(false) // 筛选抽屉
|
||||||
const queryParams = reactive({
|
const queryParams = reactive({
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
@@ -276,10 +417,31 @@ const handleQuery = () => {
|
|||||||
|
|
||||||
/** 重置按钮操作 */
|
/** 重置按钮操作 */
|
||||||
const resetQuery = () => {
|
const resetQuery = () => {
|
||||||
queryFormRef.value.resetFields()
|
queryFormRef.value?.resetFields()
|
||||||
handleQuery()
|
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 () => {
|
const handleExport = async () => {
|
||||||
try {
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user