<template>
|
<a-row :gutter="{ xs: 4, sm: 8, md: 16}">
|
<a-col :span="12">
|
<a-card :bordered="false">
|
<!-- 查询区域 -->
|
<div class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-item label="产线">
|
<j-tree-select dict="base_factory,factory_name,id" pid-field="parent_id"
|
v-model="queryParam.factoryId"></j-tree-select>
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="起止日期">
|
<a-range-picker
|
style="width: 100%"
|
@change="dateRangeChange"
|
:value="dateRange"
|
:disabledDate="disabledDate"
|
@openChange="onOpenChange"
|
/>
|
</a-form-item>
|
</a-col>
|
<a-col :xl="6" :lg="7" :md="8" :sm="24">
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<a-button type="info" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
<a-button type="primary" @click="productionSchedule" icon="retweet"
|
style="margin-left: 8px">排产</a-button>
|
</span>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
|
<div class="table-operator">
|
<a-dropdown v-if="selectedRowKeys.length > 0">
|
<a-menu slot="overlay">
|
<a-menu-item key="1" @click="batchDel">
|
<a-icon type="delete" />
|
删除
|
</a-menu-item>
|
</a-menu>
|
<a-button style="margin-left: 8px"> 批量操作
|
<a-icon type="down" />
|
</a-button>
|
</a-dropdown>
|
</div>
|
<div>
|
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
|
<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
|
style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
|
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
</div>
|
|
<a-table
|
ref="table"
|
size="middle"
|
:scroll="{x:true}"
|
bordered
|
rowKey="id"
|
:columns="columns"
|
:dataSource="dataSource"
|
:pagination="ipagination"
|
:loading="loading"
|
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
class="j-table-force-nowrap"
|
@change="handleTableChange">
|
|
<template slot="htmlSlot" slot-scope="text">
|
<div v-html="text"></div>
|
</template>
|
<template slot="imgSlot" slot-scope="text,record">
|
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
|
<img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt=""
|
style="max-width:80px;font-size: 12px;font-style: italic;" />
|
</template>
|
<template slot="fileSlot" slot-scope="text">
|
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
|
<a-button
|
v-else
|
:ghost="true"
|
type="primary"
|
icon="download"
|
size="small"
|
@click="downloadFile(text)">
|
下载
|
</a-button>
|
</template>
|
|
<span slot="action" slot-scope="text, record">
|
<span v-if="record.workOrderStatus === 'NEW'">
|
<a-popconfirm title="确定发布吗?" @confirm="() => handlePublish(record.id)">
|
<a>发布</a>
|
</a-popconfirm>
|
<a-divider type="vertical" />
|
</span>
|
<span v-if="record.workOrderStatus === 'PUBLISHED'">
|
<a @click="handleRePublish(record)">重发布</a>
|
<a-divider type="vertical" />
|
</span>
|
<span>
|
<a-dropdown v-if="record.workOrderStatus === 'NEW'">
|
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
|
<a-menu slot="overlay">
|
<a-menu-item>
|
<a @click="handleDetail(record)">详情</a>
|
</a-menu-item>
|
<a-menu-item>
|
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
<a>删除</a>
|
</a-popconfirm>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</span>
|
<span v-if="record.workOrderStatus !== 'NEW'">
|
<a @click="handleDetail(record)">详情</a>
|
</span>
|
</span>
|
</a-table>
|
</div>
|
|
<mes-production-work-order-list-modal ref="modal" @ok="modalFormOk"></mes-production-work-order-list-modal>
|
<mes-production-work-order-modal ref="modalForm"></mes-production-work-order-modal>
|
<mes-production-work-order-republish-modal ref="republishModal" @ok="modalFormOk"></mes-production-work-order-republish-modal>
|
</a-card>
|
</a-col>
|
<a-col :span="12">
|
<a-card>
|
<MesProductionWeekCalendar
|
ref="weekCalendar"
|
:start-date="calendarStartDate"
|
@select="onDateSelect"
|
@change="onCalendarChange"
|
>
|
<!-- 使用插槽自定义日期单元格内容 -->
|
<template #dateCell="{ date, isSelected, isToday }">
|
<div class="custom-date-content">
|
<!-- 示例：在日期单元格中显示工单信息 -->
|
<div
|
v-for="workOrder in getWorkOrdersForDate(date)"
|
:key="workOrder.id"
|
class="work-order-item"
|
:class="{ 'urgent': isUrgent(workOrder) }"
|
>
|
<span class="work-order-shift">{{ workOrder.groupName }}</span>
|
<span class="work-order-material">{{ workOrder.materialName }}</span>
|
<span class="work-order-quantity">{{ workOrder.planQuantity }}</span>
|
</div>
|
</div>
|
</template>
|
</MesProductionWeekCalendar>
|
</a-card>
|
</a-col>
|
</a-row>
|
</template>
|
|
<script>
|
|
import '@/assets/less/TableExpand.less'
|
import { mixinDevice } from '@/utils/mixin'
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import MesProductionWorkOrderModal from './modules/MesProductionWorkOrderModal'
|
import MesProductionWeekCalendar from '@views/mes/modules/MesProductionWeekCalendar.vue'
|
import MesProductionWorkOrderListModal from '@views/mes/modules/MesProductionWorkOrderListModal.vue'
|
import MesProductionWorkOrderRepublishModal from '@views/mes/modules/MesProductionWorkOrderRepublishModal.vue'
|
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
|
import moment from 'moment'
|
import { getAction, postAction, requestPut } from '@api/manage'
|
|
export default {
|
name: 'MesProductionWorkOrderList',
|
mixins: [JeecgListMixin, mixinDevice],
|
components: {
|
MesProductionWorkOrderModal,
|
MesProductionWeekCalendar,
|
MesProductionWorkOrderListModal,
|
MesProductionWorkOrderRepublishModal
|
},
|
data() {
|
return {
|
description: '排产工单管理页面',
|
// 表头
|
columns: [
|
{
|
title: '#',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: 'center',
|
customRender: function(t, r, index) {
|
return parseInt(index) + 1
|
}
|
},
|
{
|
title: '工单号(任务号)',
|
align: 'center',
|
dataIndex: 'workOrderCode'
|
},
|
{
|
title: '物料编码',
|
align: 'center',
|
dataIndex: 'materialNumber'
|
},
|
{
|
title: '物料名称',
|
align: 'center',
|
dataIndex: 'materialName'
|
},
|
{
|
title: '计划生产数量',
|
align: 'center',
|
dataIndex: 'planQuantity'
|
},
|
{
|
title: '产线',
|
align: 'center',
|
dataIndex: 'factoryId_dictText'
|
},
|
{
|
title: '班组',
|
align: 'center',
|
dataIndex: 'groupId_dictText'
|
},
|
{
|
title: '班次',
|
align: 'center',
|
dataIndex: 'shiftId_dictText'
|
},
|
{
|
title: '排产日期',
|
align: 'center',
|
dataIndex: 'workOrderDate'
|
},
|
{
|
title: '工单状态',
|
align: 'center',
|
dataIndex: 'workOrderStatus_dictText'
|
},
|
{
|
title: '实际报工数量',
|
align: 'center',
|
dataIndex: 'actualQuantity'
|
},
|
{
|
title: '发布人',
|
align: 'center',
|
dataIndex: 'publisher'
|
},
|
{
|
title: '发布时间',
|
align: 'center',
|
dataIndex: 'publishTime'
|
},
|
{
|
title: '重发布人',
|
align: 'center',
|
dataIndex: 'republisher'
|
},
|
{
|
title: '重发布时间',
|
align: 'center',
|
dataIndex: 'republishTime'
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
align: 'center',
|
fixed: 'right',
|
width: 147,
|
scopedSlots: { customRender: 'action' }
|
}
|
],
|
url: {
|
list: '/mesproductionworkorder/mesProductionWorkOrder/list',
|
delete: '/mesproductionworkorder/mesProductionWorkOrder/delete',
|
deleteBatch: '/mesproductionworkorder/mesProductionWorkOrder/deleteBatch',
|
exportXlsUrl: '/mesproductionworkorder/mesProductionWorkOrder/exportXls',
|
importExcelUrl: 'mesproductionworkorder/mesProductionWorkOrder/importExcel',
|
listProductionLinesOption: '/base/factory/queryIdTree',
|
schedule: '/mesproductionworkorder/mesProductionWorkOrder/schedule',
|
publish: '/mesproductionworkorder/mesProductionWorkOrder/publish'
|
},
|
dictOptions: {},
|
superFieldList: [],
|
// 用于演示的工单数据
|
workOrdersByDate: {},
|
// 日历起始日期
|
calendarStartDate: moment(),
|
productionLineData: [],
|
dateRange: [],
|
tempStartDate: null, // 临时存储开始日期
|
hoveredDate: null, // 存储鼠标悬停的日期
|
}
|
},
|
created() {
|
this.getSuperFieldList()
|
this.initDictConfig()
|
},
|
computed: {
|
importExcelUrl: function() {
|
return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
|
}
|
},
|
methods: {
|
modalFormOk() {
|
this.onClearSelected()
|
this.loadData(1).then(() => {
|
if (this.queryParam.factoryId) {
|
// 同时更新日历中的工单数据
|
this.updateCalendarWorkOrders()
|
}
|
}).catch(error => {
|
console.error('数据加载失败:', error)
|
})
|
},
|
loadData(arg) {
|
return new Promise((resolve, reject) => {
|
if (!this.url.list) {
|
this.$message.error("请设置url.list属性!")
|
reject(new Error("请设置url.list属性!"))
|
return
|
}
|
//加载数据 若传入参数1则加载第一页的内容
|
if (arg === 1) {
|
this.ipagination.current = 1;
|
}
|
var params = this.getQueryParams();//查询条件
|
console.log('params', params)
|
if (!params) {
|
reject(new Error("查询参数无效"))
|
return false;
|
}
|
this.loading = true;
|
getAction(this.url.list, params).then((res) => {
|
if (res.success) {
|
// console.log(res)
|
//update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
this.dataSource = res.result.records || res.result;
|
if (res.result.total) {
|
this.ipagination.total = res.result.total;
|
} else {
|
this.ipagination.total = 0;
|
}
|
//update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
resolve(res)
|
} else {
|
this.$message.warning(res.message)
|
reject(new Error(res.message))
|
}
|
}).catch(error => {
|
reject(error)
|
}).finally(() => {
|
this.loading = false
|
})
|
})
|
},
|
searchQuery() {
|
this.queryParam = Object.assign(this.queryParam, this.dateRange)
|
this.loadData(1).then(() => {
|
if (this.queryParam.factoryId) {
|
// 同时更新日历中的工单数据
|
this.updateCalendarWorkOrders()
|
}
|
}).catch(error => {
|
console.error('数据加载失败:', error)
|
})
|
},
|
searchReset() {
|
this.queryParam = {}
|
this.dateRange = []
|
this.workOrdersByDate = {}
|
this.loadData(1);
|
},
|
handlePublish(id) {
|
requestPut(this.url.publish, null, { ids: id }).then(res => {
|
if (res.success) {
|
this.$message.success(res.message)
|
this.loadData(1).then(() => {
|
if (this.queryParam.factoryId) {
|
// 同时更新日历中的工单数据
|
this.updateCalendarWorkOrders()
|
}
|
}).catch(error => {
|
console.error('数据加载失败:', error)
|
})
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
},
|
handleRePublish(record) {
|
this.$refs.republishModal.add(record)
|
},
|
initDictConfig() {
|
getAction(this.url.listProductionLinesOption, null).then(res => {
|
if (res.success) {
|
this.productionLineData = res.result
|
}
|
})
|
},
|
getSuperFieldList() {
|
let fieldList = []
|
fieldList.push({ type: 'int', value: 'delFlag', text: '删除标记', dictCode: '' })
|
fieldList.push({ type: 'string', value: 'workOrderCode', text: '工单号(任务号)', dictCode: '' })
|
fieldList.push({ type: 'string', value: 'materialNumber', text: '物料编码', dictCode: '' })
|
fieldList.push({ type: 'string', value: 'materialName', text: '物料名称', dictCode: '' })
|
fieldList.push({ type: 'double', value: 'planQuantity', text: '计划生产数量', dictCode: '' })
|
fieldList.push({ type: 'string', value: 'factoryId', text: '产线ID(冗余)', dictCode: '' })
|
fieldList.push({ type: 'string', value: 'groupId', text: '班组ID', dictCode: '' })
|
fieldList.push({ type: 'string', value: 'shiftId', text: '班次ID(冗余)', dictCode: '' })
|
fieldList.push({ type: 'datetime', value: 'workOrderDate', text: '排产日期' })
|
fieldList.push({ type: 'string', value: 'workOrderStatus', text: '工单状态', dictCode: 'work_order_status' })
|
fieldList.push({ type: 'double', value: 'actualQuantity', text: '实际报工数量', dictCode: '' })
|
fieldList.push({ type: 'string', value: 'publisher', text: '发布人', dictCode: '' })
|
fieldList.push({ type: 'datetime', value: 'publishTime', text: '发布时间' })
|
fieldList.push({ type: 'string', value: 'republisher', text: '重发布人', dictCode: '' })
|
fieldList.push({ type: 'datetime', value: 'republishTime', text: '重发布时间' })
|
this.superFieldList = fieldList
|
},
|
productionSchedule() {
|
if (!this.queryParam.factoryId || this.dateRange.length === 0) {
|
this.$message.warning('请选择产线及排产日期范围！')
|
return
|
}
|
getAction(this.url.schedule, {
|
factoryId: this.queryParam.factoryId,
|
startDate: this.dateRange[0].format('YYYY-MM-DD'),
|
endDate: this.dateRange[1].format('YYYY-MM-DD')
|
}).then(res => {
|
if (res.success) {
|
this.$refs.modal.edit(res.result, this.dateRange)
|
}
|
})
|
},
|
onOpenChange(open) {
|
if (!open) {
|
// 关闭选择器时重置状态
|
this.tempStartDate = null
|
this.hoveredDate = null
|
}
|
},
|
disabledDate(current) {
|
// 如果有临时开始日期，则限制结束日期范围
|
if (this.tempStartDate) {
|
const startDate = this.tempStartDate.clone().startOf('day')
|
const maxDate = startDate.clone().add(6, 'days').endOf('day') // 7天包括起始日
|
const minDate = startDate.clone().subtract(6, 'days').startOf('day') // 也可以向前选6天
|
// 禁用超出7天范围的日期
|
return current && (current < minDate || current > maxDate)
|
}
|
// 默认不禁用
|
return false
|
},
|
dateRangeChange(dates, dateStrings) {
|
this.dateRange = dates
|
if (dates && dates.length > 0) {
|
if (dates.length === 1) {
|
// 选择了开始日期，保存到临时变量
|
this.tempStartDate = dates[0]
|
this.hoveredDate = dates[0]
|
} else if (dates.length === 2) {
|
// 选择了结束日期，验证范围
|
const startDate = dates[0]
|
const endDate = dates[1]
|
const diffDays = endDate.diff(startDate, 'days') + 1
|
|
if (diffDays > 7) {
|
this.$message.warning('日期范围不能超过7天')
|
// 自动调整为7天范围
|
const adjustedEndDate = startDate.clone().add(6, 'days')
|
this.dateRange = [startDate, adjustedEndDate]
|
this.queryParam.startDate = startDate.format('YYYY-MM-DD')
|
this.queryParam.endDate = adjustedEndDate.format('YYYY-MM-DD')
|
} else {
|
this.queryParam.startDate = dateStrings[0]
|
this.queryParam.endDate = dateStrings[1]
|
}
|
// 重置临时状态
|
this.tempStartDate = null
|
this.hoveredDate = null
|
}
|
} else {
|
// 清除了选择
|
this.queryParam.startDate = null
|
this.queryParam.endDate = null
|
this.tempStartDate = null
|
this.hoveredDate = null
|
}
|
},
|
// 处理日期选择事件
|
onDateSelect(date) {
|
console.log('Selected date:', date.format('YYYY-MM-DD'))
|
},
|
// 处理日历周变化事件
|
onCalendarChange(date) {
|
console.log('Calendar week changed:', date.format('YYYY-MM-DD'))
|
},
|
// 更新日历中的工单数据
|
updateCalendarWorkOrders() {
|
// 将当前表格数据按日期分组显示在日历中
|
const workOrdersByDate = {}
|
this.dataSource.filter(workOrder => workOrder.workOrderStatus !== 'NEW').forEach(workOrder => {
|
const workOrderDate = workOrder.workOrderDate
|
if (workOrderDate) {
|
if (!workOrdersByDate[workOrderDate]) {
|
workOrdersByDate[workOrderDate] = []
|
}
|
workOrdersByDate[workOrderDate].push({
|
id: workOrder.id,
|
groupName: workOrder.groupId_dictText || '',
|
materialName: workOrder.materialName || '',
|
planQuantity: workOrder.planQuantity || 0
|
})
|
}
|
})
|
this.workOrdersByDate = workOrdersByDate
|
},
|
// 获取指定日期的工单
|
getWorkOrdersForDate(date) {
|
const dateStr = date.format('YYYY-MM-DD')
|
console.log(dateStr)
|
return this.workOrdersByDate[dateStr] || []
|
},
|
// 判断工单是否紧急
|
isUrgent(workOrder) {
|
return workOrder.status === 'urgent'
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
@import '~@assets/less/common.less';
|
|
.work-order-item {
|
font-size: 12px;
|
padding: 2px 4px;
|
margin-bottom: 2px;
|
background-color: #f0f0f0;
|
border-radius: 2px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.work-order-item.urgent {
|
background-color: #ffccc7;
|
border-left: 2px solid #ff4d4f;
|
}
|
|
.work-order-shift {
|
font-weight: bold;
|
margin-right: 4px;
|
}
|
|
.work-order-material {
|
margin-right: 4px;
|
}
|
|
.work-order-quantity {
|
float: right;
|
}
|
</style>
|
