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-12 11:27:31 +08:00
parent 1a4f106ed7
commit 52f1a1cda2
11 changed files with 1980 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/mes/production/material-requisition/MaterialRequisitionForm.vue
View File

@@ -1,14 +1,14 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="80%">
<Dialog :title="dialogTitle" v-model="dialogVisible" :width="isMobile ? '100%' : '80%'" :fullscreen="isMobile">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
:label-width="isMobile ? '80px' : '100px'"
v-loading="formLoading"
>
<el-row :gutter="20">
<el-col :span="12">
<el-row :gutter="isMobile ? 0 : 20">
<el-col :span="isMobile ? 24 : 12">
<el-form-item label="工单编号" prop="orderCode">
<el-input
v-model="formData.orderCode"
@@ -24,15 +24,15 @@
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="isMobile ? 24 : 12">
<el-form-item label="领料单号" prop="code">
<el-input v-model="formData.code" placeholder="请输入领料单号" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-row :gutter="isMobile ? 0 : 20">
<el-col :span="isMobile ? 24 : 12">
<el-form-item label="领料时间" prop="requisitionTime">
<el-date-picker
v-model="formData.requisitionTime"
@@ -43,7 +43,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="isMobile ? 24 : 12">
<el-form-item label="申请人" prop="applicantName">
<el-input
v-model="formData.applicantName"
@@ -55,8 +55,8 @@
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-row :gutter="isMobile ? 0 : 20">
<el-col :span="isMobile ? 24 : 12">
<el-form-item label="选择BOM">
<el-select
v-model="selectedBomId"
@@ -75,7 +75,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="isMobile ? 24 : 12">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
@@ -632,6 +632,10 @@ import { WarehouseApi } from '@/api/erp/stock/warehouse'
import { WeighApi } from '@/api/erp/purchase/weigh'
import { YVHgetWorkOrderPage } from '@/api/mes/production/workorder'
import { getProductBomPage, getProductBom, ProductBomVO, ProductBomItemVO } from '@/api/mes/product/bom'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const emit = defineEmits(['success'])
const dialogVisible = ref(false)

392
src/views/mes/production/material-requisition/index.vue
View File

@@ -1,87 +1,196 @@
<template>
<doc-alert title="【MES】生产领料管理" url="https://doc.iocoder.cn/mes/material-requisition/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="领料单号" prop="code">
<!-- 手机端布局 -->
<div v-if="isMobile" class="mobile-requisition-list">
<!-- 顶部操作栏 -->
<div class="mobile-header">
<div class="mobile-header__search">
<el-input
v-model="queryParams.code"
placeholder="请输入领料单号"
placeholder="搜索领料单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
:prefix-icon="Search"
/>
</el-form-item>
<el-form-item label="工单编号" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
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="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="createTime">
<el-date-picker
v-model="queryParams.createTime"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
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="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:material-requisition:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<!-- <el-button
type="danger"
plain
@click="handleDelete(selectionList.map((item) => item.id))"
v-hasPermi="['mes:material-requisition:delete']"
:disabled="selectionList.length === 0"
>
<Icon icon="ep:delete" 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" />
<el-button type="primary" :icon="Plus" circle @click="openForm('create')" v-hasPermi="['mes:material-requisition:create']" />
</div>
</div>
<!-- 列表 -->
<ContentWrap>
<el-table
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
>
<el-table-column type="selection" width="50" />
<el-table-column label="领料单号" align="center" prop="code" min-width="120" />
<!-- 快捷筛选 -->
<div class="mobile-header__quick-filter">
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === undefined }"
@click="handleQuickFilter(undefined)"
>全部</div>
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === 1 }"
@click="handleQuickFilter(1)"
>待审核</div>
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === 2 }"
@click="handleQuickFilter(2)"
>已审核</div>
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === 3 }"
@click="handleQuickFilter(3)"
>已领料</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="handleCardClick(row)"
>
<div class="mobile-card__header">
<span class="mobile-card__no">{{ row.code }}</span>
<el-tag :type="getStatusType(row.status)" size="small">{{ getStatusText(row.status) }}</el-tag>
</div>
<div class="mobile-card__body">
<div class="mobile-card__row">
<span class="mobile-card__label">批次信息</span>
<span class="mobile-card__value">{{ row.orderCode || '-' }}</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">领料时间</span>
<span class="mobile-card__value">{{ formatDate(row.requisitionTime) }}</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">申请人</span>
<span class="mobile-card__value">{{ row.applicantName || '-' }}</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">审批人</span>
<span class="mobile-card__value">{{ row.approverName || '-' }}</span>
</div>
</div>
<div class="mobile-card__footer" @click.stop>
<el-button size="small" @click="handleView(row.id)">详情</el-button>
<el-button size="small" type="primary" @click="openForm('update', row.id)" v-if="row.status === 1">编辑</el-button>
<el-button size="small" type="success" @click="handleApprove(row.id)" v-if="row.status === 1">审核</el-button>
<el-button size="small" type="success" @click="handleComplete(row.id)" v-if="row.status === 2">确认领料</el-button>
<el-button size="small" type="warning" @click="handleReverse(row.id)" v-if="row.status === 2">反审核</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="50%">
<el-form :model="queryParams" ref="queryFormRef" label-position="top">
<el-form-item label="工单编号" prop="orderCode">
<el-input v-model="queryParams.orderCode" placeholder="请输入工单编号" clearable style="width:100%" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width:100%">
<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="createTime">
<el-date-picker v-model="queryParams.createTime" type="daterange" value-format="YYYY-MM-DD HH:mm:ss" 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>
<doc-alert title="【MES】生产领料管理" url="https://doc.iocoder.cn/mes/material-requisition/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="领料单号" prop="code">
<el-input
v-model="queryParams.code"
placeholder="请输入领料单号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="工单编号" prop="orderCode">
<el-input
v-model="queryParams.orderCode"
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="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="createTime">
<el-date-picker
v-model="queryParams.createTime"
type="daterange"
value-format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期"
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="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:material-requisition:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
>
<el-table-column type="selection" width="50" />
<el-table-column label="领料单号" align="center" prop="code" min-width="120" />
<el-table-column label="批次信息" align="center" prop="orderCode" min-width="120" />
<el-table-column label="领料时间" align="center" prop="requisitionTime" min-width="150" sortable>
<template #default="scope">
@@ -172,15 +281,16 @@
</el-tooltip> -->
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<!-- 表单弹窗：添加/修改 -->
<MaterialRequisitionForm ref="formRef" @success="getList" />
@@ -191,6 +301,7 @@
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Filter, Plus } from '@element-plus/icons-vue'
import { formatDate } from '@/utils/formatTime'
import {
getMaterialRequisitionPage,
@@ -201,6 +312,14 @@ import { Icon } from '@/components/Icon'
import MaterialRequisitionForm from './MaterialRequisitionForm.vue'
import MaterialRequisitionView from './MaterialRequisitionView.vue'
import { useUserStore } from '@/store/modules/user'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
// 手机端筛选相关
const filterVisible = ref(false)
const quickFilterStatus = ref<number | undefined>(undefined)
const userStore = useUserStore()
const currentUser = computed(() => userStore.user)
@@ -263,9 +382,33 @@ const resetQuery = () => {
queryParams.orderCode = undefined
queryParams.status = undefined
queryParams.createTime = undefined
quickFilterStatus.value = undefined
handleQuery()
}
/** 快捷筛选 */
const handleQuickFilter = (status: number | undefined) => {
quickFilterStatus.value = status
queryParams.status = status
queryParams.pageNo = 1
getList()
}
/** 筛选确认 */
const handleFilterConfirm = () => {
filterVisible.value = false
handleQuery()
}
/** 卡片点击 */
const handleCardClick = (row: any) => {
if (row.status === 1) {
openForm('update', row.id)
} else {
handleView(row.id)
}
}
const openForm = (type: 'create' | 'update', id?: number) => {
console.log('打开表单:', type, id)
formRef.value.open(type, id)
@@ -355,3 +498,80 @@ onMounted(() => {
getList()
})
</script>
<style lang="scss" scoped>
.mobile-requisition-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-header__quick-filter {
display: flex;
gap: 12px;
margin: 8px 0;
justify-content: flex-start;
.quick-filter-item {
padding: 4px 12px;
font-size: 14px;
border-radius: 20px;
cursor: pointer;
color: #909399;
background: transparent;
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;
}
&__no { font-weight: 600; font-size: 15px; color: #303133; }
&__body { font-size: 13px; }
&__row { display: flex; justify-content: space-between; padding: 3px 0; }
&__label { color: #909399; flex-shrink: 0; margin-right: 12px; }
&__value {
color: #606266;
text-align: right;
&--ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
}
&__footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
}
.mobile-pagination {
margin-top: 12px;
display: flex;
justify-content: center;
:deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
}
</style>

35
src/views/mes/production/plan/detail/index.vue
View File

@@ -3,7 +3,7 @@
<ContentWrap v-loading="loading">
<!-- 计划基本信息 -->
<el-descriptions title="计划基本信息" :column="3" border>
<el-descriptions title="计划基本信息" :column="isMobile ? 1 : 3" border>
<el-descriptions-item label="计划编号">{{ planInfo.planCode }}</el-descriptions-item>
<el-descriptions-item label="计划名称">{{ planInfo.planName }}</el-descriptions-item>
<el-descriptions-item label="计划类型">
@@ -20,7 +20,7 @@
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ planInfo.createTime }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="3">{{ planInfo.remark || '-' }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="isMobile ? 1 : 3">{{ planInfo.remark || '-' }}</el-descriptions-item>
</el-descriptions>
<!-- 完成情况统计 -->
@@ -37,26 +37,26 @@
</el-button>
</div>
</template>
<el-row :gutter="20">
<el-col :span="6">
<el-row :gutter="isMobile ? 10 : 20">
<el-col :span="isMobile ? 12 : 6">
<div class="stat-card">
<div class="stat-label">总计划数量</div>
<div class="stat-value text-blue-600">{{ planInfo.totalPlanQuantity || 0 }}</div>
</div>
</el-col>
<el-col :span="6">
<el-col :span="isMobile ? 12 : 6">
<div class="stat-card">
<div class="stat-label">已完成数量</div>
<div class="stat-value text-green-600">{{ planInfo.totalCompletedQuantity || 0 }}</div>
</div>
</el-col>
<el-col :span="6">
<el-col :span="isMobile ? 12 : 6" :class="isMobile ? 'mt-10px' : ''">
<div class="stat-card">
<div class="stat-label">进行中数量</div>
<div class="stat-value text-orange-600">{{ planInfo.totalInProgressQuantity || 0 }}</div>
</div>
</el-col>
<el-col :span="6">
<el-col :span="isMobile ? 12 : 6" :class="isMobile ? 'mt-10px' : ''">
<div class="stat-card">
<div class="stat-label">整体完成率</div>
<div class="stat-value" :style="{ color: getProgressColor(planInfo.overallCompletionRate) }">
@@ -221,7 +221,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Icon } from '@/components/Icon'
@@ -232,6 +232,10 @@ import {
updatePlanProgress
} from '@/api/mes/production/plan'
import { YVHgetWorkOrderPage } from '@/api/mes/production/workorder'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
defineOptions({ name: 'MesProductionPlanDetail' })
@@ -414,4 +418,19 @@ onMounted(() => {
font-weight: bold;
}
}
@media screen and (max-width: 768px) {
.stat-card {
padding: 12px;
.stat-label {
font-size: 12px;
margin-bottom: 6px;
}
.stat-value {
font-size: 20px;
}
}
}
</style>

202
src/views/mes/production/plan/list/GenerateMonthlyPlanDialog.vue
View File

@@ -1,5 +1,91 @@
<template>
<Dialog v-model="dialogVisible" title="生成月度计划" width="600px">
<!-- 移动端使用抽屉 -->
<el-drawer
v-if="isMobile"
v-model="dialogVisible"
title="生成月度计划"
direction="btt"
size="85%"
:close-on-click-modal="false"
>
<el-form ref="formRef" :model="formData" :rules="rules" label-position="top">
<el-alert
title="提示"
type="info"
:closable="false"
class="mb-15px"
>
<template #default>
<div class="mobile-alert-text">从年度计划生成月度计划，系统将根据所选月份和分配策略自动生成对应的月度计划。</div>
</template>
</el-alert>
<div class="mobile-form-section">
<div class="mobile-form-section__title">计划信息</div>
<el-form-item label="年度计划" prop="annualPlanId">
<div class="plan-info">
<div class="plan-info__code">{{ annualPlan?.planCode }}</div>
<div class="plan-info__name">{{ annualPlan?.planName }}</div>
</div>
</el-form-item>
<el-form-item label="计划周期" prop="planPeriod">
<el-tag type="danger">{{ annualPlan?.planPeriod }}</el-tag>
</el-form-item>
</div>
<div class="mobile-form-section">
<div class="mobile-form-section__title">选择月份</div>
<el-form-item prop="months" required>
<div class="month-grid">
<div
v-for="month in availableMonths"
:key="month"
class="month-item"
:class="{
'month-item--selected': formData.months.includes(month),
'month-item--disabled': existingMonths.includes(month)
}"
@click="toggleMonth(month)"
>
<div class="month-item__label">{{ month }}月</div>
<div v-if="existingMonths.includes(month)" class="month-item__tag">已存在</div>
</div>
</div>
</el-form-item>
</div>
<div class="mobile-form-section">
<div class="mobile-form-section__title">分配策略</div>
<el-form-item prop="splitStrategy">
<el-radio-group v-model="formData.splitStrategy">
<el-radio label="average">平均分配</el-radio>
<el-radio label="proportional">按比例分配</el-radio>
</el-radio-group>
<div class="strategy-desc">
<div v-if="formData.splitStrategy === 'average'">
将年度计划数量平均分配到各月度计划
</div>
<div v-else>
根据各月工作日比例分配计划数量
</div>
</div>
</el-form-item>
</div>
</el-form>
<template #footer>
<div class="mobile-drawer-footer">
<el-button @click="dialogVisible = false" style="flex:1">取消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="submitLoading" style="flex:1">
确定生成
</el-button>
</div>
</template>
</el-drawer>
<!-- PC端使用对话框 -->
<Dialog v-else v-model="dialogVisible" title="生成月度计划" width="600px">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-alert
title="提示"
@@ -68,11 +154,15 @@
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { generateMonthlyPlans, type GenerateMonthlyPlanReqVO } from '@/api/mes/production/plan'
import { useWindowSize } from '@vueuse/core'
defineOptions({ name: 'GenerateMonthlyPlanDialog' })
const emit = defineEmits(['success'])
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const dialogVisible = ref(false)
const submitLoading = ref(false)
const formRef = ref()
@@ -94,6 +184,17 @@ const rules = {
splitStrategy: [{ required: true, message: '请选择分配策略', trigger: 'change' }]
}
const toggleMonth = (month: number) => {
if (existingMonths.value.includes(month)) return
const index = formData.months.indexOf(month)
if (index > -1) {
formData.months.splice(index, 1)
} else {
formData.months.push(month)
}
}
const open = (plan: any) => {
annualPlan.value = plan
formData.annualPlanId = plan.id
@@ -138,3 +239,102 @@ const handleSubmit = async () => {
defineExpose({ open })
</script>
<style lang="scss" scoped>
.mobile-alert-text {
font-size: 13px;
line-height: 1.6;
}
.mobile-form-section {
margin-bottom: 20px;
&__title {
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
}
.plan-info {
&__code {
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 4px;
}
&__name {
font-size: 13px;
color: #909399;
}
}
.month-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.month-item {
padding: 12px;
border: 2px solid #dcdfe6;
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
&__label {
font-size: 14px;
font-weight: 500;
color: #606266;
}
&__tag {
font-size: 11px;
color: #909399;
margin-top: 4px;
}
&--selected {
border-color: #409eff;
background: #ecf5ff;
.month-item__label {
color: #409eff;
font-weight: 600;
}
}
&--disabled {
background: #f5f7fa;
border-color: #e4e7ed;
cursor: not-allowed;
opacity: 0.6;
}
&:active:not(&--disabled) {
transform: scale(0.95);
}
}
.strategy-desc {
margin-top: 8px;
padding: 8px 12px;
background: #f5f7fa;
border-radius: 6px;
font-size: 12px;
color: #606266;
line-height: 1.5;
}
.mobile-drawer-footer {
display: flex;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
}
</style>

257
src/views/mes/production/plan/list/GenerateOrderDialog.vue
View File

@@ -1,5 +1,105 @@
<template>
<!-- 移动端使用抽屉 -->
<el-drawer
v-if="isMobile"
v-model="visible"
title="从计划生成工单"
direction="btt"
size="90%"
@close="handleClose"
:close-on-click-modal="false"
>
<div v-loading="formLoading">
<el-alert
title="提示"
type="info"
:closable="false"
class="mb-15px"
>
<template #default>
<div class="mobile-alert-text">
<div>计划名称：{{ planInfo.planName }}</div>
<div>计划周期：{{ planInfo.planPeriod }}</div>
<div>总计划数量：{{ planInfo.totalPlanQuantity }}</div>
</div>
</template>
</el-alert>
<div class="mobile-form-section">
<div class="mobile-form-section__title">选择产品</div>
<div class="product-list">
<div
v-for="item in planItems"
:key="item.id"
class="product-card"
:class="{ 'product-card--selected': form.itemIds.includes(item.id) }"
@click="toggleProduct(item)"
>
<div class="product-card__header">
<el-checkbox :model-value="form.itemIds.includes(item.id)" @click.stop="toggleProduct(item)" />
<span class="product-card__name">{{ item.productName }}</span>
</div>
<div class="product-card__stats">
<div class="stat-item">
<span class="stat-label">计划</span>
<span class="stat-value">{{ item.planQuantity }}</span>
</div>
<div class="stat-item">
<span class="stat-label">已完成</span>
<span class="stat-value success">{{ item.completedQuantity || 0 }}</span>
</div>
<div class="stat-item">
<span class="stat-label">进行中</span>
<span class="stat-value warning">{{ item.inProgressQuantity || 0 }}</span>
</div>
</div>
<div class="product-card__progress">
<el-progress
:percentage="item.completionRate || 0"
:format="() => `${item.completionRate || 0}%`"
/>
</div>
</div>
</div>
</div>
<div class="mobile-form-section">
<div class="mobile-form-section__title">拆分策略</div>
<el-radio-group v-model="form.splitStrategy">
<el-radio label="single">单个工单（不拆分）</el-radio>
<el-radio label="weekly">按周拆分</el-radio>
<el-radio label="daily">按天拆分</el-radio>
</el-radio-group>
<div class="strategy-desc">
<div v-if="form.splitStrategy === 'single'">将整个计划明细生成为一个工单</div>
<div v-if="form.splitStrategy === 'weekly'">按周拆分，每周生成一个工单</div>
<div v-if="form.splitStrategy === 'daily'">按天拆分，每天生成一个工单</div>
</div>
</div>
<div class="mobile-form-section">
<div class="mobile-form-section__title">其他设置</div>
<div class="switch-item">
<span class="switch-item__label">自动审核</span>
<el-switch v-model="form.autoApprove" />
</div>
<div class="switch-item__desc">开启后，生成的工单将自动审核通过</div>
</div>
</div>
<template #footer>
<div class="mobile-drawer-footer">
<el-button @click="visible = false" style="flex:1">取消</el-button>
<el-button type="primary" :loading="loading" @click="submitForm" style="flex:1">
生成工单
</el-button>
</div>
</template>
</el-drawer>
<!-- PC端使用对话框 -->
<el-dialog
v-else
title="从计划生成工单"
v-model="visible"
width="800px"
@@ -82,9 +182,13 @@
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { generateWorkOrders, getProductionPlan } from '@/api/mes/production/plan'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const emits = defineEmits(['success'])
@@ -142,6 +246,20 @@ const handleSelectionChange = (selection: any[]) => {
form.itemIds = selection.map((item) => item.id)
}
const toggleProduct = (item: any) => {
const index = form.itemIds.indexOf(item.id)
if (index > -1) {
form.itemIds.splice(index, 1)
const selectedIndex = selectedItems.value.findIndex(i => i.id === item.id)
if (selectedIndex > -1) {
selectedItems.value.splice(selectedIndex, 1)
}
} else {
form.itemIds.push(item.id)
selectedItems.value.push(item)
}
}
const submitForm = () => {
if (!form.itemIds || form.itemIds.length === 0) {
ElMessage.warning('请至少选择一个产品')
@@ -171,3 +289,140 @@ const handleClose = () => {
defineExpose({ open })
</script>
<style lang="scss" scoped>
.mobile-alert-text {
font-size: 13px;
line-height: 1.6;
div {
margin-bottom: 4px;
}
}
.mobile-form-section {
margin-bottom: 20px;
&__title {
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
}
.product-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.product-card {
padding: 12px;
border: 2px solid #dcdfe6;
border-radius: 8px;
background: #fff;
transition: all 0.3s;
cursor: pointer;
&__header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
&__name {
font-size: 14px;
font-weight: 500;
color: #303133;
flex: 1;
}
&__stats {
display: flex;
justify-content: space-around;
margin-bottom: 10px;
padding: 8px 0;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
}
&__progress {
margin-top: 8px;
}
&--selected {
border-color: #409eff;
background: #ecf5ff;
}
&:active {
transform: scale(0.98);
}
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
.stat-label {
font-size: 11px;
color: #909399;
}
.stat-value {
font-size: 16px;
font-weight: 600;
color: #303133;
&.success {
color: #67c23a;
}
&.warning {
color: #e6a23c;
}
}
}
.strategy-desc {
margin-top: 8px;
padding: 8px 12px;
background: #f5f7fa;
border-radius: 6px;
font-size: 12px;
color: #606266;
line-height: 1.5;
}
.switch-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
&__label {
font-size: 14px;
color: #303133;
}
&__desc {
font-size: 12px;
color: #909399;
margin-top: 4px;
line-height: 1.5;
}
}
.mobile-drawer-footer {
display: flex;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
}
</style>

277
src/views/mes/production/plan/list/ProductionPlanForm.vue
View File

@@ -1,5 +1,189 @@
<template>
<!-- 移动端使用抽屉 -->
<el-drawer
v-if="isMobile"
v-model="visible"
:title="formType === 'create' ? '新增生产计划' : '编辑生产计划'"
direction="rtl"
size="100%"
@close="handleClose"
:close-on-click-modal="false"
>
<el-form :model="form" :rules="rules" ref="formRef" label-position="top" v-loading="formLoading">
<div class="mobile-form-section">
<div class="mobile-form-section__title">基本信息</div>
<el-form-item label="计划编号" prop="planCode">
<el-input v-model="form.planCode" placeholder="请输入计划编号" />
</el-form-item>
<el-form-item label="计划名称" prop="planName">
<el-input v-model="form.planName" placeholder="请输入计划名称" />
</el-form-item>
<el-form-item label="计划类型" prop="planType">
<el-select v-model="form.planType" placeholder="请选择计划类型" style="width:100%">
<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="planPeriod">
<el-input v-model="form.planPeriod" placeholder="如:2024-01" />
</el-form-item>
<el-form-item label="父计划" prop="parentPlanId" v-if="filteredParentPlans.length > 0">
<el-select
v-model="form.parentPlanId"
placeholder="请选择父计划"
clearable
filterable
style="width:100%"
>
<el-option
v-for="item in filteredParentPlans"
:key="item.id"
:label="`${item.planName} (${item.planCode})`"
:value="item.id"
/>
</el-select>
</el-form-item>
</div>
<div class="mobile-form-section">
<div class="mobile-form-section__title">计划时间</div>
<el-form-item label="开始日期" prop="startDate">
<el-date-picker
v-model="form.startDate"
type="date"
placeholder="选择开始日期"
value-format="YYYY-MM-DD"
style="width:100%"
/>
</el-form-item>
<el-form-item label="结束日期" prop="endDate">
<el-date-picker
v-model="form.endDate"
type="date"
placeholder="选择结束日期"
value-format="YYYY-MM-DD"
style="width:100%"
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
</el-form-item>
</div>
<div class="mobile-form-section">
<div class="mobile-form-section__title">
计划明细
<el-button type="primary" size="small" @click="handleAddItem" style="float:right">
<Icon icon="ep:plus" class="mr-5px" /> 添加产品
</el-button>
</div>
<div class="product-items">
<div v-for="(item, index) in form.items" :key="index" class="product-item-card">
<div class="product-item-card__header">
<span class="product-item-card__index">{{ index + 1 }}</span>
<el-button link type="danger" @click="handleDeleteItem(index)">
<Icon icon="ep:delete" />
</el-button>
</div>
<el-form-item label="产品">
<el-select
v-model="item.productId"
placeholder="请选择产品"
filterable
@change="handleProductChange(item, index)"
style="width:100%"
>
<el-option
v-for="product in productOptions"
:key="product.id"
:label="product.name"
:value="product.id"
>
<span>{{ product.name }}</span>
<span class="text-gray-400 ml-10px">({{ product.barCode }})</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="计划数量">
<el-input-number
v-model="item.planQuantity"
:min="1"
:precision="0"
controls-position="right"
style="width:100%"
/>
</el-form-item>
<el-form-item label="工序路线">
<el-select
v-model="item.routeId"
placeholder="请选择工序路线"
filterable
@change="handleRouteChange(item)"
style="width:100%"
>
<el-option
v-for="route in routeOptions"
:key="route.id"
:label="route.name"
:value="route.id"
/>
</el-select>
</el-form-item>
<el-form-item label="优先级">
<el-input-number
v-model="item.priority"
:min="1"
:max="10"
controls-position="right"
style="width:100%"
/>
</el-form-item>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="计划开始">
<el-date-picker
v-model="item.plannedStartDate"
type="date"
placeholder="开始日期"
value-format="YYYY-MM-DD"
style="width:100%"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计划结束">
<el-date-picker
v-model="item.plannedEndDate"
type="date"
placeholder="结束日期"
value-format="YYYY-MM-DD"
style="width:100%"
/>
</el-form-item>
</el-col>
</el-row>
</div>
<div v-if="form.items.length === 0" class="empty-items">
<el-empty description="暂无产品，请添加" :image-size="80" />
</div>
</div>
</div>
</el-form>
<template #footer>
<div class="mobile-drawer-footer">
<el-button @click="visible = false" style="flex:1">取消</el-button>
<el-button type="primary" :loading="loading" @click="submitForm" style="flex:1">确定</el-button>
</div>
</template>
</el-drawer>
<!-- PC端使用对话框 -->
<el-dialog
v-else
:title="formType === 'create' ? '新增生产计划' : '编辑生产计划'"
v-model="visible"
width="1200px"
@@ -7,20 +191,20 @@
:close-on-click-modal="false"
>
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px" v-loading="formLoading">
<el-row :gutter="20">
<el-col :span="12">
<el-row :gutter="isMobile ? 0 : 20">
<el-col :span="isMobile ? 24 : 12">
<el-form-item label="计划编号" prop="planCode">
<el-input v-model="form.planCode" placeholder="请输入计划编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="isMobile ? 24 : 12">
<el-form-item label="计划名称" prop="planName">
<el-input v-model="form.planName" placeholder="请输入计划名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="8">
<el-row :gutter="isMobile ? 0 : 20">
<el-col :span="isMobile ? 24 : 8">
<el-form-item label="计划类型" prop="planType">
<el-select v-model="form.planType" placeholder="请选择计划类型" class="!w-full">
<el-option label="年度计划" :value="1" />
@@ -30,12 +214,12 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="isMobile ? 24 : 8">
<el-form-item label="计划周期" prop="planPeriod">
<el-input v-model="form.planPeriod" placeholder="如:2024-01" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="isMobile ? 24 : 8">
<el-form-item label="父计划" prop="parentPlanId">
<el-select
v-model="form.parentPlanId"
@@ -54,8 +238,8 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-row :gutter="isMobile ? 0 : 20">
<el-col :span="isMobile ? 24 : 12">
<el-form-item label="开始日期" prop="startDate">
<el-date-picker
v-model="form.startDate"
@@ -66,7 +250,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="isMobile ? 24 : 12">
<el-form-item label="结束日期" prop="endDate">
<el-date-picker
v-model="form.endDate"
@@ -200,6 +384,10 @@ import {
} from '@/api/mes/production/plan'
import { ProductApi } from '@/api/erp/product/product'
import { YVHgetProcessRouteList } from '@/api/mes/production/process-route'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const emits = defineEmits(['success'])
@@ -405,3 +593,72 @@ const getCurrentPeriod = () => {
defineExpose({ open })
</script>
<style lang="scss" scoped>
.mobile-form-section {
margin-bottom: 24px;
&__title {
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid #409eff;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.product-items {
display: flex;
flex-direction: column;
gap: 12px;
}
.product-item-card {
padding: 16px;
background: #f5f7fa;
border-radius: 8px;
border: 1px solid #e4e7ed;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #dcdfe6;
}
&__index {
font-size: 14px;
font-weight: 600;
color: #409eff;
background: #ecf5ff;
padding: 4px 12px;
border-radius: 12px;
}
}
.empty-items {
padding: 40px 20px;
text-align: center;
}
.mobile-drawer-footer {
display: flex;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
position: sticky;
bottom: 0;
background: #fff;
z-index: 10;
}
:deep(.el-drawer__body) {
padding-bottom: 70px;
}
</style>

433
src/views/mes/production/plan/list/index.vue
View File

@@ -1,87 +1,234 @@
<template>
<doc-alert title="【MES】生产计划管理" url="https://doc.iocoder.cn/mes/production-plan/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="84px"
>
<el-form-item label="计划编号" prop="planCode">
<!-- 手机端布局 -->
<div v-if="isMobile" class="mobile-plan-list">
<!-- 顶部操作栏 -->
<div class="mobile-header">
<div class="mobile-header__search">
<el-input
v-model="queryParams.planCode"
placeholder="请输入计划编号"
placeholder="搜索计划编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
:prefix-icon="Search"
/>
</el-form-item>
<el-form-item label="计划名称" prop="planName">
<el-input
v-model="queryParams.planName"
placeholder="请输入计划名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="计划类型" prop="planType">
<el-select
v-model="queryParams.planType"
placeholder="请选择计划类型"
clearable
class="!w-240px"
>
<el-option label="年度计划" :value="1" />
<el-option label="月度计划" :value="2" />
<el-option label="周度计划" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="计划周期" prop="planPeriod">
<el-input
v-model="queryParams.planPeriod"
placeholder="如:2024-01"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="计划状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择状态"
clearable
multiple
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>
<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="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:production-plan:create']"
>
<Icon icon="ep:plus" 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" />
<el-button type="primary" :icon="Plus" circle @click="openForm('create')" v-hasPermi="['mes:production-plan:create']" />
</div>
</div>
<!-- 列表 -->
<ContentWrap>
<el-table
<!-- 快捷筛选 -->
<div class="mobile-header__quick-filter">
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === undefined }"
@click="handleQuickFilter(undefined)"
>全部</div>
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === 0 }"
@click="handleQuickFilter(0)"
>草稿</div>
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === 1 }"
@click="handleQuickFilter(1)"
>已发布</div>
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === 2 }"
@click="handleQuickFilter(2)"
>执行中</div>
</div>
<!-- 卡片列表 -->
<div class="mobile-list" v-loading="loading">
<div v-if="treeList.length === 0 && !loading" class="mobile-empty">
<el-empty description="暂无计划数据" />
</div>
<div
v-for="row in treeList"
:key="row.id"
class="mobile-card"
@click="openDetail(row.id)"
>
<div class="mobile-card__header">
<span class="mobile-card__no">{{ row.planCode }}</span>
<el-tag :type="getStatusType(row.status)" size="small">{{ getStatusText(row.status) }}</el-tag>
</div>
<div class="mobile-card__body">
<div class="mobile-card__row">
<span class="mobile-card__label">计划名称</span>
<span class="mobile-card__value">{{ row.planName }}</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">计划类型</span>
<span class="mobile-card__value">
<el-tag :type="getPlanTypeTagType(row.planType)" size="small">{{ getPlanTypeText(row.planType) }}</el-tag>
</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">计划周期</span>
<span class="mobile-card__value">{{ row.planPeriod }}</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">计划时间</span>
<span class="mobile-card__value">{{ row.startDate }} ~ {{ row.endDate }}</span>
</div>
<div class="mobile-card__nums">
<div class="mobile-card__num-item">
<div class="mobile-card__num-val" style="color:#409eff">{{ row.totalPlanQuantity || 0 }}</div>
<div class="mobile-card__num-label">计划数量</div>
</div>
<div class="mobile-card__num-item">
<div class="mobile-card__num-val" style="color:#67c23a">{{ row.totalCompletedQuantity || 0 }}</div>
<div class="mobile-card__num-label">已完成</div>
</div>
<div class="mobile-card__num-item">
<div class="mobile-card__num-val" style="color:#e6a23c">{{ row.totalInProgressQuantity || 0 }}</div>
<div class="mobile-card__num-label">进行中</div>
</div>
<div class="mobile-card__num-item">
<div class="mobile-card__num-val" :style="{ color: getProgressColor(row.overallCompletionRate) }">{{ row.overallCompletionRate || 0 }}%</div>
<div class="mobile-card__num-label">完成率</div>
</div>
</div>
</div>
<div class="mobile-card__footer" @click.stop>
<el-button size="small" @click="openDetail(row.id)">详情</el-button>
<el-button size="small" @click="handleAnalyze(row.id)">分析</el-button>
<el-button size="small" type="primary" @click="openForm('update', row.id)" v-if="row.status === 0" v-hasPermi="['mes:production-plan:update']">编辑</el-button>
<el-button size="small" type="success" @click="handlePublish(row.id)" v-if="row.status === 0" v-hasPermi="['mes:production-plan:publish']">发布</el-button>
<el-button size="small" type="warning" @click="handleGenerateOrders(row)" v-if="row.status >= 1 && row.status <= 2 && !row.hasChildPlans && !row.hasGeneratedOrders" v-hasPermi="['mes:production-plan:generate-orders']">生成工单</el-button>
<el-button size="small" type="danger" @click="handleDelete(row.id)" v-if="row.status === 0" v-hasPermi="['mes:production-plan:delete']">删除</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="60%">
<el-form :model="queryParams" ref="queryFormRef" label-position="top">
<el-form-item label="计划名称" prop="planName">
<el-input v-model="queryParams.planName" placeholder="请输入计划名称" clearable style="width:100%" />
</el-form-item>
<el-form-item label="计划类型" prop="planType">
<el-select v-model="queryParams.planType" placeholder="请选择计划类型" clearable style="width:100%">
<el-option label="年度计划" :value="1" />
<el-option label="月度计划" :value="2" />
<el-option label="周度计划" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="计划周期" prop="planPeriod">
<el-input v-model="queryParams.planPeriod" placeholder="如:2024-01" clearable style="width:100%" />
</el-form-item>
<el-form-item label="计划状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable multiple style="width:100%">
<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>
<template #footer>
<el-button @click="resetQuery">重置</el-button>
<el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
</template>
</el-drawer>
</div>
<!-- PC端布局 -->
<template v-else>
<doc-alert title="【MES】生产计划管理" url="https://doc.iocoder.cn/mes/production-plan/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="84px"
>
<el-form-item label="计划编号" prop="planCode">
<el-input
v-model="queryParams.planCode"
placeholder="请输入计划编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="计划名称" prop="planName">
<el-input
v-model="queryParams.planName"
placeholder="请输入计划名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="计划类型" prop="planType">
<el-select
v-model="queryParams.planType"
placeholder="请选择计划类型"
clearable
class="!w-240px"
>
<el-option label="年度计划" :value="1" />
<el-option label="月度计划" :value="2" />
<el-option label="周度计划" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="计划周期" prop="planPeriod">
<el-input
v-model="queryParams.planPeriod"
placeholder="如:2024-01"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="计划状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择状态"
clearable
multiple
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>
<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="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:production-plan:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增计划
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table
v-loading="loading"
:data="treeList"
:stripe="true"
@@ -253,15 +400,16 @@
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<!-- 表单弹窗：添加/修改 -->
<ProductionPlanForm ref="formRef" @success="getList" />
@@ -286,9 +434,10 @@
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Filter, Plus } from '@element-plus/icons-vue'
import { Icon } from '@/components/Icon'
import ProductionPlanForm from './ProductionPlanForm.vue'
import GenerateOrderDialog from './GenerateOrderDialog.vue'
@@ -303,7 +452,14 @@ import {
} from '@/api/mes/production/plan'
import { SubmitApprovalDialog, ApprovalRecordsDialog, ProcessApprovalDialog } from '@/components/Approval'
import { ApprovalRecordApi, ApprovalRecordVO } from '@/api/erp/approval/index'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
// 手机端筛选相关
const filterVisible = ref(false)
const quickFilterStatus = ref<number | undefined>(undefined)
defineOptions({ name: 'MesProductionPlanList' })
@@ -395,6 +551,21 @@ const resetQuery = () => {
queryParams.planType = undefined
queryParams.planPeriod = undefined
queryParams.status = []
quickFilterStatus.value = undefined
handleQuery()
}
/** 快捷筛选 */
const handleQuickFilter = (status: number | undefined) => {
quickFilterStatus.value = status
queryParams.status = status !== undefined ? [status] : []
queryParams.pageNo = 1
getList()
}
/** 筛选确认 */
const handleFilterConfirm = () => {
filterVisible.value = false
handleQuery()
}
@@ -529,3 +700,91 @@ const getProgressColor = (percentage: number) => {
getList()
</script>
<style lang="scss" scoped>
.mobile-plan-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-header__quick-filter {
display: flex;
gap: 12px;
margin: 8px 0;
justify-content: flex-start;
.quick-filter-item {
padding: 4px 12px;
font-size: 14px;
border-radius: 20px;
cursor: pointer;
color: #909399;
background: transparent;
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;
}
&__no { font-weight: 600; font-size: 15px; color: #303133; }
&__body { font-size: 13px; }
&__row { display: flex; justify-content: space-between; padding: 3px 0; }
&__label { color: #909399; flex-shrink: 0; margin-right: 12px; }
&__value {
color: #606266;
text-align: right;
&--ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
}
&__nums {
display: flex;
justify-content: space-around;
margin-top: 10px;
padding: 10px 0;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
}
&__num-item { text-align: center; }
&__num-val { font-size: 15px; font-weight: 600; color: #303133; }
&__num-label { font-size: 11px; color: #909399; margin-top: 2px; }
&__footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
}
.mobile-pagination {
margin-top: 12px;
display: flex;
justify-content: center;
:deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
}
</style>

18
src/views/mes/production/workorder/WorkOrderForm.vue
View File

@@ -2,11 +2,12 @@
<el-dialog
:title="formType === 'create' ? '新增工单' : '编辑工单'"
v-model="visible"
width="900px"
:width="isMobile ? '100%' : '900px'"
:fullscreen="isMobile"
@close="handleClose"
:close-on-click-modal="false"
>
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px" v-loading="formLoading">
<el-form :model="form" :rules="rules" ref="formRef" :label-width="isMobile ? '80px' : '120px'" v-loading="formLoading">
<el-tabs v-model="activeTab">
<!-- 基本信息 -->
<el-tab-pane label="基本信息" name="basic">
@@ -14,7 +15,7 @@
<el-select
v-model="form.productId"
placeholder="请选择产品"
class="!w-240px"
:class="isMobile ? '!w-full' : '!w-240px'"
@change="handleProductChange"
>
<el-option
@@ -41,7 +42,7 @@
<el-select
v-model="form.routeId"
placeholder="请选择工序路线"
class="!w-240px"
:class="isMobile ? '!w-full' : '!w-240px'"
@change="handleRouteChange"
>
<el-option
@@ -62,6 +63,7 @@
:precision="2"
:step="0.1"
placeholder="请输入计划数量"
:class="isMobile ? '!w-full' : ''"
/>
</el-form-item>
<!-- <el-form-item label="优先级" prop="priority">-->
@@ -76,7 +78,7 @@
<el-form-item label="计划时间" prop="planTime">
<el-date-picker
v-model="form.planTime"
type="datetimerange"
:type="isMobile ? 'datetimerange' : 'datetimerange'"
start-placeholder="开始时间"
end-placeholder="结束时间"
:default-time="[
@@ -95,7 +97,7 @@
)
)
]"
class="!w-380px"
:class="isMobile ? '!w-full' : '!w-380px'"
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
@@ -137,6 +139,10 @@ import {
} from '@/api/mes/production/workorder'
import { YVHgetProcessRoute, YVHgetProcessRouteList } from '@/api/mes/production/process-route'
import { ProductApi } from '@/api/erp/product/product'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const emits = defineEmits(['success'])

149
src/views/mes/production/workorder/components/OperationDetailDialog.vue
View File

@@ -1,5 +1,87 @@
<template>
<el-dialog v-model="visibleProxy" title="报工单" width="800px" append-to-body>
<!-- 移动端使用抽屉 -->
<el-drawer
v-if="isMobile"
v-model="visibleProxy"
title="报工单"
direction="btt"
size="75%"
>
<el-form label-position="top">
<template v-if="Object.keys(detailProcessData).length > 0">
<div class="mobile-form-section">
<div class="mobile-form-section__title">工序参数</div>
<template v-for="(field, key) in detailProcessData" :key="key">
<el-form-item :label="field.label">
<div class="detail-value">{{ formatDetailFieldValue(field) }}</div>
</el-form-item>
</template>
</div>
</template>
<div class="mobile-form-section">
<div class="mobile-form-section__title">执行信息</div>
<el-form-item label="操作人">
<div class="detail-value">{{
currentDetailOperation?.currentExecution?.workerName || '-'
}}</div>
</el-form-item>
<el-form-item label="设备">
<div class="detail-value">{{
currentDetailOperation?.currentExecution?.equipmentName || '-'
}}</div>
</el-form-item>
<el-form-item label="开始时间">
<div class="detail-value">{{
currentDetailOperation?.currentExecution?.startTime || '-'
}}</div>
</el-form-item>
<el-form-item label="结束时间">
<div class="detail-value">{{
currentDetailOperation?.currentExecution?.endTime || '-'
}}</div>
</el-form-item>
</div>
<div class="mobile-form-section">
<div class="mobile-form-section__title">数量统计</div>
<div class="quantity-grid">
<div class="quantity-item">
<div class="quantity-item__label">投入数量</div>
<div class="quantity-item__value">{{
currentDetailOperation?.currentExecution?.inputQuantity || '-'
}}</div>
</div>
<div class="quantity-item">
<div class="quantity-item__label">产出数量</div>
<div class="quantity-item__value">{{
currentDetailOperation?.currentExecution?.outputQuantity || '-'
}}</div>
</div>
<div class="quantity-item">
<div class="quantity-item__label">合格数量</div>
<div class="quantity-item__value success">{{
currentDetailOperation?.currentExecution?.qualifiedQuantity || '-'
}}</div>
</div>
<div class="quantity-item">
<div class="quantity-item__label">不合格数量</div>
<div class="quantity-item__value danger">{{
currentDetailOperation?.currentExecution?.unqualifiedQuantity || '-'
}}</div>
</div>
</div>
</div>
</el-form>
<template #footer>
<div class="mobile-drawer-footer">
<el-button @click="visibleProxy = false" style="flex:1">关闭</el-button>
</div>
</template>
</el-drawer>
<!-- PC端使用对话框 -->
<el-dialog v-else v-model="visibleProxy" title="报工单" width="800px" append-to-body>
<el-form label-width="120px">
<template v-if="Object.keys(detailProcessData).length > 0">
<div class="mb-4">
@@ -60,6 +142,10 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
const props = defineProps<{
visible: boolean
@@ -93,7 +179,7 @@ const formatDetailFieldValue = (field: any) => {
}
</script>
<style scoped>
<style scoped lang="scss">
.text-lg {
font-size: 16px;
}
@@ -109,4 +195,63 @@ const formatDetailFieldValue = (field: any) => {
.text-gray-600 {
color: #606266;
}
.mobile-form-section {
margin-bottom: 20px;
&__title {
font-size: 15px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
}
}
.detail-value {
font-size: 14px;
color: #606266;
font-weight: 500;
}
.quantity-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.quantity-item {
padding: 12px;
background: #f5f7fa;
border-radius: 8px;
text-align: center;
&__label {
font-size: 12px;
color: #909399;
margin-bottom: 6px;
}
&__value {
font-size: 18px;
font-weight: 600;
color: #303133;
&.success {
color: #67c23a;
}
&.danger {
color: #f56c6c;
}
}
}
.mobile-drawer-footer {
display: flex;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
}
</style>

63
src/views/mes/production/workorder/components/OperationStartDialog.vue
View File

@@ -1,5 +1,53 @@
<template>
<el-dialog v-model="visibleProxy" title="开始工序" width="500px" append-to-body>
<!-- 移动端使用抽屉 -->
<el-drawer
v-if="isMobile"
v-model="visibleProxy"
title="开始工序"
direction="btt"
size="70%"
>
<el-form ref="startFormRef" :model="startForm" :rules="startRules" label-position="top">
<el-form-item label="操作工人" prop="workerName">
<el-input
v-model="startForm.workerName"
placeholder="请输入操作工人姓名"
/>
</el-form-item>
<el-form-item label="设备" prop="equipmentId">
<el-select v-model="startForm.equipmentId" placeholder="请选择设备" style="width:100%">
<el-option
v-for="item in equipmentOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="生产数量" prop="inputQuantity">
<el-input-number
v-model="startForm.inputQuantity"
:min="0.01"
:precision="2"
:step="0.1"
style="width:100%"
controls-position="right"
/>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="startForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<div class="mobile-drawer-footer">
<el-button @click="visibleProxy = false" style="flex:1">取消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="submitting" style="flex:1">确定</el-button>
</div>
</template>
</el-drawer>
<!-- PC端使用对话框 -->
<el-dialog v-else v-model="visibleProxy" title="开始工序" width="500px" append-to-body>
<el-form ref="startFormRef" :model="startForm" :rules="startRules" label-width="100px">
<el-form-item label="操作工人" prop="workerName">
<el-input
@@ -41,6 +89,10 @@
<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
interface EquipmentOption {
id: number
@@ -124,3 +176,12 @@ const handleSubmit = () => {
})
}
</script>
<style lang="scss" scoped>
.mobile-drawer-footer {
display: flex;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
}
</style>

429
src/views/mes/production/workorder/index.vue
View File

@@ -1,88 +1,223 @@
<template>
<doc-alert title="【MES】生产工单管理" url="https://doc.iocoder.cn/mes/workorder/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="84px"
>
<el-form-item label="工单编号" prop="code">
<!-- 手机端布局 -->
<div v-if="isMobile" class="mobile-workorder-list">
<!-- 顶部操作栏 -->
<div class="mobile-header">
<div class="mobile-header__search">
<el-input
v-model="queryParams.code"
placeholder="请输入工单编号"
placeholder="搜索工单编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
:prefix-icon="Search"
/>
</el-form-item>
<el-form-item label="产品名称" prop="productName">
<el-input
v-model="queryParams.productName"
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
multiple
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-option label="已关闭" :value="5" />
<el-option label="已取消" :value="6" />
<el-option label="已入库" :value="7" />
</el-select>
</el-form-item>
<el-form-item label="计划日期" prop="planTime">
<el-date-picker
v-model="queryParams.planTime"
type="daterange"
value-format="YYYY-MM-DD"
start-placeholder="开始日期"
end-placeholder="结束日期"
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="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:production-order:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="danger"
plain
@click="handleDelete(selectionList.map((item) => item.id))"
v-hasPermi="['mes:production-order:delete']"
:disabled="selectionList.length === 0"
>
<Icon icon="ep:delete" 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" />
<el-button type="primary" :icon="Plus" circle @click="openForm('create')" v-hasPermi="['mes:production-order:create']" />
</div>
</div>
<!-- 列表 -->
<ContentWrap>
<el-table
<!-- 快捷筛选 -->
<div class="mobile-header__quick-filter">
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === undefined }"
@click="handleQuickFilter(undefined)"
>全部</div>
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === 2 }"
@click="handleQuickFilter(2)"
>已审核</div>
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === 3 }"
@click="handleQuickFilter(3)"
>生产中</div>
<div
class="quick-filter-item"
:class="{ active: quickFilterStatus === 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="handleCardClick(row)"
>
<div class="mobile-card__header">
<span class="mobile-card__no">{{ row.code }}</span>
<el-tag :type="getStatusType(row.status)" size="small">{{ getStatusText(row.status) }}</el-tag>
</div>
<div class="mobile-card__body">
<div class="mobile-card__row">
<span class="mobile-card__label">产品</span>
<span class="mobile-card__value mobile-card__value--ellipsis">{{ row.productName }}</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">产品编码</span>
<span class="mobile-card__value">{{ row.productCode }}</span>
</div>
<div class="mobile-card__row">
<span class="mobile-card__label">计划时间</span>
<span class="mobile-card__value">{{ formatDateTime(row.planStartTime) }} ~ {{ formatDateTime(row.planEndTime) }}</span>
</div>
<div class="mobile-card__nums">
<div class="mobile-card__num-item">
<div class="mobile-card__num-val" style="color:#409eff">{{ row.planQuantity || 0 }}</div>
<div class="mobile-card__num-label">计划数量</div>
</div>
<div class="mobile-card__num-item">
<div class="mobile-card__num-val" style="color:#67c23a">{{ row.producedQuantity || 0 }}</div>
<div class="mobile-card__num-label">已完成</div>
</div>
<div class="mobile-card__num-item">
<div class="mobile-card__num-val" :style="{ color: row.producedQuantity >= row.planQuantity ? '#67c23a' : '#e6a23c' }">
{{ row.planQuantity > 0 ? Math.round((row.producedQuantity || 0) / row.planQuantity * 100) : 0 }}%
</div>
<div class="mobile-card__num-label">完成率</div>
</div>
</div>
</div>
<div class="mobile-card__footer" @click.stop>
<el-button size="small" @click="handleShowOperations(row.id, row.status)">详情</el-button>
<el-button size="small" type="primary" @click="openForm('update', row.id)" v-if="row.status === 0">编辑</el-button>
<el-button size="small" type="primary" @click="handleSubmit(row.id)" v-if="row.status === 0">提交</el-button>
<el-button size="small" type="success" @click="handleStart(row.id)" v-if="row.status === 2">开始生产</el-button>
<el-button size="small" type="success" @click="handleComplete(row)" v-if="row.status === 3">完成</el-button>
<el-button size="small" type="danger" @click="handleDelete([row.id])" v-if="[0, 6].includes(row.status)">删除</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="60%">
<el-form :model="queryParams" ref="queryFormRef" label-position="top">
<el-form-item label="产品名称" prop="productName">
<el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable style="width:100%" />
</el-form-item>
<el-form-item label="工单状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable multiple style="width:100%">
<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-option label="已关闭" :value="5" />
<el-option label="已取消" :value="6" />
<el-option label="已入库" :value="7" />
</el-select>
</el-form-item>
<el-form-item label="计划日期" prop="planTime">
<el-date-picker v-model="queryParams.planTime" type="daterange" value-format="YYYY-MM-DD" 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>
<doc-alert title="【MES】生产工单管理" url="https://doc.iocoder.cn/mes/workorder/" />
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="84px"
>
<el-form-item label="工单编号" prop="code">
<el-input
v-model="queryParams.code"
placeholder="请输入工单编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="产品名称" prop="productName">
<el-input
v-model="queryParams.productName"
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
multiple
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-option label="已关闭" :value="5" />
<el-option label="已取消" :value="6" />
<el-option label="已入库" :value="7" />
</el-select>
</el-form-item>
<el-form-item label="计划日期" prop="planTime">
<el-date-picker
v-model="queryParams.planTime"
type="daterange"
value-format="YYYY-MM-DD"
start-placeholder="开始日期"
end-placeholder="结束日期"
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="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:production-order:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="danger"
plain
@click="handleDelete(selectionList.map((item) => item.id))"
v-hasPermi="['mes:production-order:delete']"
:disabled="selectionList.length === 0"
>
<Icon icon="ep:delete" class="mr-5px" /> 删除
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table
v-loading="loading"
:data="list"
:stripe="true"
@@ -302,15 +437,16 @@
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<!-- 表单弹窗：添加/修改 -->
<WorkOrderForm ref="formRef" @success="getList" />
@@ -368,8 +504,9 @@
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Filter, Plus } from '@element-plus/icons-vue'
import { Icon } from '@/components/Icon'
import WorkOrderForm from './WorkOrderForm.vue'
import OperationExecutionDialog from './components/OperationExecutionDialog.vue'
@@ -387,6 +524,14 @@ import {
} from '@/api/mes/production/workorder'
import { YVHgetWorkOrderOperationList } from '@/api/mes/production/order-operation'
import request from '@/config/axios'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
// 手机端筛选相关
const filterVisible = ref(false)
const quickFilterStatus = ref<number | undefined>(undefined)
// 隐藏旧的 ERP 入库逻辑，改为调用 MES 入库（按产品条码）接口
@@ -491,9 +636,29 @@ const resetQuery = () => {
queryParams.productName = undefined
queryParams.status = []
queryParams.planTime = []
quickFilterStatus.value = undefined
handleQuery()
}
/** 快捷筛选 */
const handleQuickFilter = (status: number | undefined) => {
quickFilterStatus.value = status
queryParams.status = status !== undefined ? [status] : []
queryParams.pageNo = 1
getList()
}
/** 筛选确认 */
const handleFilterConfirm = () => {
filterVisible.value = false
handleQuery()
}
/** 卡片点击 */
const handleCardClick = (row: any) => {
handleShowOperations(row.id, row.status)
}
const openForm = (type: 'create' | 'update', id?: number) => {
formRef.value.open(type, id)
}
@@ -698,3 +863,91 @@ const formatFullDateTime = (time: string) => {
getList()
</script>
<style lang="scss" scoped>
.mobile-workorder-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-header__quick-filter {
display: flex;
gap: 12px;
margin: 8px 0;
justify-content: flex-start;
.quick-filter-item {
padding: 4px 12px;
font-size: 14px;
border-radius: 20px;
cursor: pointer;
color: #909399;
background: transparent;
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;
}
&__no { font-weight: 600; font-size: 15px; color: #303133; }
&__body { font-size: 13px; }
&__row { display: flex; justify-content: space-between; padding: 3px 0; }
&__label { color: #909399; flex-shrink: 0; margin-right: 12px; }
&__value {
color: #606266;
text-align: right;
&--ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
}
&__nums {
display: flex;
justify-content: space-around;
margin-top: 10px;
padding: 10px 0;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
}
&__num-item { text-align: center; }
&__num-val { font-size: 15px; font-weight: 600; color: #303133; }
&__num-label { font-size: 11px; color: #909399; margin-top: 2px; }
&__footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
}
.mobile-pagination {
margin-top: 12px;
display: flex;
justify-content: center;
:deep(.el-pagination) { flex-wrap: wrap; justify-content: center; }
}
</style>