生产管控 排产工单页面

cuilei

5 天以前 dacf37deb3d53345024402016e9c4d19ac82e3aa

生产管控 排产工单页面

 src/views/mes/MesProductionWorkOrderList.vue

@@ -1,33 +1,34 @@
<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 :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="工单号(任务号)">
              <j-input placeholder="请输入工单号(任务号)" v-model="queryParam.workOrderCode"></j-input>
              <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 :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="物料编号">
              <j-input placeholder="请输入物料编号" v-model="queryParam.materialNumber"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="工单状态">
              <j-dict-select-tag dictCode="work_order_status" placeholder="请输入工单状态" v-model="queryParam.workOrderStatus"></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="重发布人">
              <j-select-user-by-dep placeholder="请输入重发布人" v-model="queryParam.republisher"></j-select-user-by-dep>
              <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="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</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>
@@ -37,14 +38,20 @@
    <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-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-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>项
            <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>

@@ -67,7 +74,8 @@
        </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;"/>
              <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>
@@ -83,10 +91,18 @@
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

              <span v-if="record.workOrderStatus === 'NEW'">
                <a-popconfirm title="确定发布吗?" @confirm="() => handlePublish(record.id)">
                  <a>发布</a>
                </a-popconfirm>
          <a-divider type="vertical" />
          <a-dropdown>
              </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>
@@ -100,12 +116,46 @@
            </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-modal ref="modalForm" @ok="modalFormOk"></mes-production-work-order-modal>
        <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>
@@ -114,13 +164,21 @@
  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
    MesProductionWorkOrderModal,
    MesProductionWeekCalendar,
    MesProductionWorkOrderListModal,
    MesProductionWorkOrderRepublishModal
    },
    data () {
      return {
@@ -132,115 +190,220 @@
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
          align: 'center',
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            return parseInt(index) + 1
            }
          },
          {
            title:'工单号(任务号)',
            align:"center",
          align: 'center',
            dataIndex: 'workOrderCode'
          },
          {
            title:'物料编码',
            align:"center",
          align: 'center',
            dataIndex: 'materialNumber'
          },
          {
            title:'物料名称',
            align:"center",
          align: 'center',
            dataIndex: 'materialName'
          },
          {
            title:'计划生产数量',
            align:"center",
          align: 'center',
            dataIndex: 'planQuantity'
          },
          {
            title:'产线(冗余)',
            align:"center",
          title: '产线',
          align: 'center',
            dataIndex: 'factoryId_dictText'
          },
          {
            title:'班组',
            align:"center",
          align: 'center',
            dataIndex: 'groupId_dictText'
          },
          {
            title:'班次(冗余)',
            align:"center",
          title: '班次',
          align: 'center',
            dataIndex: 'shiftId_dictText'
          },
          {
            title:'排产日期',
            align:"center",
          align: 'center',
            dataIndex: 'workOrderDate'
          },
          {
            title:'工单状态',
            align:"center",
          align: 'center',
            dataIndex: 'workOrderStatus_dictText'
          },
          {
            title:'实际报工数量',
            align:"center",
          align: 'center',
            dataIndex: 'actualQuantity'
          },
          {
            title:'发布人',
            align:"center",
          align: 'center',
            dataIndex: 'publisher'
          },
          {
            title:'发布时间',
            align:"center",
          align: 'center',
            dataIndex: 'publishTime'
          },
          {
            title:'重发布人',
            align:"center",
          align: 'center',
            dataIndex: 'republisher'
          },
          {
            title:'重发布时间',
            align:"center",
          align: 'center',
            dataIndex: 'republishTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
          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",

        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.getSuperFieldList()
    this.initDictConfig()
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
      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=[];
      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:''})
@@ -257,10 +420,147 @@
        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>

 src/views/mes/modules/MesProductionWeekCalendar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,241 @@
<!-- src/views/mes/modules/MesProductionWeekCalendar.vue -->
<template>
  <div class="week-calendar">
    <div class="calendar-header">
      <a-button icon="left" @click="prevWeek" size="small" />
      <span class="current-week-range">{{ weekRangeText }}</span>
      <a-button icon="right" @click="nextWeek" size="small" />
      <a-button @click="goToToday" size="small" style="margin-left: 8px">今天</a-button>
    </div>

    <div class="calendar-grid">
      <div class="week-header">
        <div
          v-for="(day, index) in weekDays"
          :key="index"
          class="header-cell"
        >
          <div class="day-name">{{ day.format('ddd') }}</div>
          <div
            class="day-number"
            :class="{ today: isToday(day), selected: isSelected(day) }"
            @click="selectDay(day)"
          >
            {{ day.date() }}
          </div>
        </div>
      </div>

      <div class="calendar-body">
        <div
          v-for="(day, index) in weekDays"
          :key="index"
          class="day-cell"
          :class="{ today: isToday(day), selected: isSelected(day) }"
          @click="selectDay(day)"
        >
          <div class="cell-content">
            <!-- æ’槽用于渲染日期内容 -->
            <slot
              name="dateCell"
              :date="day"
              :isSelected="isSelected(day)"
              :isToday="isToday(day)"
            >
              <!-- é»˜è®¤å†…容 -->
              <div class="default-content">
                <!-- å¯ä»¥åœ¨è¿™é‡Œæ·»åŠ é»˜è®¤çš„日期内容渲染逻辑 -->
              </div>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'MesProductionWeekCalendar',
  props: {
    // èµ·å§‹æ—¥æœŸï¼Œé»˜è®¤ä¸ºä»Šå¤©
    startDate: {
      type: [Object, String, Date],
      default: null
    }
  },
  data() {
    return {
      // å½“前显示的起始日期
      currentStartDate: this.startDate ? moment(this.startDate) : moment(),
      // é€‰ä¸­çš„日期
      selectedDate: this.startDate ? moment(this.startDate) : moment()
    }
  },
  computed: {
    // è®¡ç®—è¿žç»­7天的日期
    weekDays() {
      const days = []
      for (let i = 0; i < 7; i++) {
        days.push(this.currentStartDate.clone().add(i, 'days'))
      }
      return days
    },
    // å½“前显示的日期范围文本
    weekRangeText() {
      const start = this.currentStartDate
      const end = this.currentStartDate.clone().add(6, 'days')

      if (start.month() === end.month()) {
        return `${start.format('YYYYå¹´M月D日')} - ${end.format('D日')}`
      } else {
        return `${start.format('YYYYå¹´M月D日')} - ${end.format('M月D日')}`
      }
    }
  },
  watch: {
    startDate(newVal) {
      if (newVal) {
        this.currentStartDate = moment(newVal)
        this.selectedDate = moment(newVal)
      }
    }
  },
  methods: {
    // åˆ‡æ¢åˆ°ä¸Š7天
    prevWeek() {
      this.currentStartDate = this.currentStartDate.clone().subtract(7, 'days')
      this.$emit('change', this.currentStartDate)
    },
    // åˆ‡æ¢åˆ°ä¸‹7天
    nextWeek() {
      this.currentStartDate = this.currentStartDate.clone().add(7, 'days')
      this.$emit('change', this.currentStartDate)
    },
    // è·³è½¬åˆ°ä»Šå¤©
    goToToday() {
      this.currentStartDate = moment()
      this.selectedDate = moment()
      this.$emit('change', this.currentStartDate)
      this.$emit('select', this.selectedDate)
    },
    // é€‰æ‹©æ—¥æœŸ
    selectDay(day) {
      this.selectedDate = day.clone()
      this.$emit('select', day)
    },
    // åˆ¤æ–­æ˜¯å¦æ˜¯ä»Šå¤©
    isToday(day) {
      return day.isSame(moment(), 'day')
    },
    // åˆ¤æ–­æ˜¯å¦æ˜¯é€‰ä¸­çš„日期
    isSelected(day) {
      return day.isSame(this.selectedDate, 'day')
    }
  }
}
</script>

<style scoped>
.week-calendar {
  padding: 16px;
}

.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.current-week-range {
  margin: 0 16px;
  font-weight: bold;
  font-size: 14px;
}

.calendar-grid {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.week-header {
  display: flex;
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.header-cell {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-right: 1px solid #e8e8e8;
}

.header-cell:last-child {
  border-right: none;
}

.day-name {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.day-number {
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  border-radius: 50%;
}

.day-number.today {
  background-color: #1890ff;
  color: white;
}

.day-number.selected {
  background-color: #bae7ff;
  color: #1890ff;
}

.calendar-body {
  display: flex;
  height: 300px;
}

.day-cell {
  flex: 1;
  border-right: 1px solid #e8e8e8;
  cursor: pointer;
  padding: 4px;
}

.day-cell:last-child {
  border-right: none;
}

.day-cell.today {
  background-color: #e6f7ff;
}

.day-cell.selected {
  background-color: #bae7ff;
}

.cell-content {
  height: 100%;
  overflow: hidden;
}

.default-content {
  height: 100%;
}
</style>

 src/views/mes/modules/MesProductionWorkOrderForm.vue

@@ -24,28 +24,28 @@
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="产线ID(冗余)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="factoryId">
              <a-input v-model="model.factoryId" placeholder="请输入产线ID(冗余)"  ></a-input>
            <a-form-model-item label="产线" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="factoryId">
              <a-input v-model="model.factoryId_dictText" placeholder="请输入产线ID(冗余)"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="班组ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="groupId">
              <a-input v-model="model.groupId" placeholder="请输入班组ID"  ></a-input>
            <a-form-model-item label="班组" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="groupId">
              <a-input v-model="model.groupId_dictText" placeholder="请输入班组ID"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="班次ID(冗余)" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shiftId">
              <a-input v-model="model.shiftId" placeholder="请输入班次ID(冗余)"  ></a-input>
            <a-form-model-item label="班次" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shiftId">
              <a-input v-model="model.shiftId_dictText" placeholder="请输入班次ID(冗余)"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="排产日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workOrderDate">
              <j-date placeholder="请选择排产日期"  v-model="model.workOrderDate" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
              <j-date placeholder="请选择排产日期"  v-model="model.workOrderDate" :show-time="true" date-format="YYYY-MM-DD" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="工单状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workOrderStatus">
              <j-dict-select-tag type="list" v-model="model.workOrderStatus" dictCode="work_order_status" placeholder="请选择工单状态" />
              <j-dict-select-tag type="list" v-model="model.workOrderStatus_dictText" dictCode="work_order_status" placeholder="请选择工单状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
@@ -102,7 +102,7 @@
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },

 src/views/mes/modules/MesProductionWorkOrderListModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,375 @@
<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-button :style="{ marginBottom: '10px' }" type="primary" @click="handleAdd">新增</a-button>
    <vxe-table
      ref="table"
      border
      :data="dataSource"
      :edit-config="{trigger: 'click', mode: 'cell'}"
      :edit-rules="editRules"
    >
      <vxe-table-column type="seq" width="40"/>
      <vxe-table-column width="200" title="工单号" field="workOrderCode">
        <template #default="{ row }">
          <span v-if="row.workOrderCode">{{ row.workOrderCode }}</span>
          <span v-else class="placeholder-text">系统自动生成</span>
        </template>
      </vxe-table-column>
      <vxe-table-column
        title="物料编号"
        field="materialNumber"
        :edit-render="{name: '$select', options: materialOptions, events: {change: handleMaterialChange}}">
        <template #default="{ row }">
          <span v-if="row.materialNumber">{{ row.materialNumber }}</span>
          <span v-else class="placeholder-text">请选择物料编号</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="物料名称" field="materialName">
        <template #default="{ row }">
          <span v-if="row.materialName">{{ row.materialName }}</span>
          <span v-else class="placeholder-text">物料名称自动填充</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="产线" field="factoryName"></vxe-table-column>
      <vxe-table-column
        title="班组"
        field="groupId"
        :edit-render="{name: '$select', options: groupOptions, events: {change: handleGroupChange}}">
      </vxe-table-column>
      <vxe-table-column title="班次id" :visible="false" field="shiftName"></vxe-table-column>
      <vxe-table-column title="班次" field="shiftName"></vxe-table-column>
      <vxe-table-column
        title="排产日期"
        field="workOrderDate"
        :edit-render="{name: '$select', options: workOrderDateOptions, events: {change: handleWorkOrderDateChange}}">
      </vxe-table-column>
      <vxe-table-column
        title="计划生产数量"
        field="planQuantity"
        width="150"
        :edit-render="{name: '$input'}">
        <template #default="{ row }">
          <span v-if="row.planQuantity">{{ row.planQuantity }}</span>
          <span v-else class="placeholder-text">请填写计划生产数量</span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作">
        <template #default="{ row }">
          <vxe-button size="small" class="error-button" @click="handleRemove(row)">删除</vxe-button>
        </template>
      </vxe-table-column>
    </vxe-table>
  </j-modal>
</template>

<script>

import MesProductionWorkOrderForm from './MesProductionWorkOrderForm'
import { ajaxGetDictItems } from '@api/api'
import { getAction, postAction } from '@api/manage'

export default {
    name: 'MesProductionWorkOrderModal',
    components: {
      MesProductionWorkOrderForm
    },
    data () {
      return {
        title: '排产明细',
        width: 1300,
        visible: false,
        disableSubmit: false,
        loading: false,
        dataSource: [],
        groupOptions: [],
        groupShiftMap: {},
        materialOptions: [],
        materNumberNameMap: {},
        workOrderDateOptions: [],
        url: {
          queryShiftGroupByFactoryId: '/base/shiftGroup/queryShiftGroupByFactoryId',
          addSchedulePlan: '/mesproductionworkorder/mesProductionWorkOrder/addSchedulePlan'
        },
        editRules: {
          materialNumber: [
            { required: true, message: '物料编号必须选择' }
          ],
          groupId: [
            { required: true, message: '班组必须选择' }
          ],
          workOrderDate: [
            { required: true, message: '排产日期必须选择' }
          ],
          planQuantity: [
            { required: true, message: '计划生产数量为必填' }
          ]
        }
      }
    },
    methods: {
      // ç”Ÿæˆæ—¥æœŸèŒƒå›´æ•°ç»„
      generateDateRangeOptions(startDate, endDate) {
        const dateOptions = [];
        const start = new Date(startDate);
        const end = new Date(endDate);

        // è®¾ç½®æ—¶é—´ä¸ºæ¯å¤©çš„0点
        start.setHours(0, 0, 0, 0);
        end.setHours(0, 0, 0, 0);

        // ç”Ÿæˆæ—¥æœŸèŒƒå›´å†…的所有日期
        for (let date = new Date(start); date <= end; date.setDate(date.getDate() + 1)) {
          const formattedDate = this.formatDate(date);
          dateOptions.push({
            value: formattedDate,
            label: formattedDate
          });
        }
        return dateOptions;
      },
      // æ ¼å¼åŒ–日期为 YYYY-MM-DD
      formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      // ç”Ÿæˆå·¥å•å·çš„方法
      generateWorkOrderCode(row) {
        console.log('row:', row)
        // èŽ·å–各个字段的值
        const factoryCode = row.factoryCode || '';      // äº§çº¿ç¼–号
        const materialNumber = row.materialNumber || ''; // ç‰©æ–™ç¼–号
        const workDate = row.workOrderDate || '';       // æŽ’产日期
        const shiftCode = row.shiftCode || '';            // ç­æ¬¡ç¼–号

        // æ ¼å¼åŒ–排产日期（如果需要特定格式，比如只取年月日）
        let formattedDate = workDate;
        if (workDate && workDate.length >= 10) {
          // å¦‚果是完整日期格式，提取 YYYY-MM-DD éƒ¨åˆ†
          formattedDate = workDate.substring(0, 10).replace(/-/g, '');
        }
        // æ‹¼æŽ¥å·¥å•å·
        return `${factoryCode}${materialNumber}${formattedDate}${shiftCode}`;
      },
      // åœ¨é€‚当时机更新工单号
      updateWorkOrderCode(row) {
        row.workOrderCode = this.generateWorkOrderCode(row);
      },
      handleWorkOrderDateChange($event, value) {
        $event.row.workOrderDate = value.value;
        this.updateWorkOrderCode($event.row)
      },
      handleMaterialChange($event, value) {
        const key = value.value
        if (key && this.materNumberNameMap[key]) {
          $event.row.materialName = this.materNumberNameMap[key]
        } else {
          $event.row.materialName = '';
        }
        // æ›´æ–°ç‰©æ–™ç¼–号
        $event.row.materialNumber = key;
        // é‡æ–°ç”Ÿæˆå·¥å•å·
        this.updateWorkOrderCode($event.row);
      },
      handleGroupChange($event, value) {
        const key = value.value
        // ä»Ž groupShiftMap ä¸­èŽ·å–对应的班次信息
        if (key && this.groupShiftMap[key]) {
          // æ›´æ–°å½“前行的班次字段
          $event.row.shiftId = this.groupShiftMap[key].shiftId;
          $event.row.shiftCode = this.groupShiftMap[key].shiftCode;
          $event.row.shiftName = this.groupShiftMap[key].shiftName;
        } else {
          // å¦‚果没有匹配的班次信息，则清空班次字段
          $event.row.shiftId = '';
          $event.row.shiftCode = '';
          $event.row.shiftName = '';
        }
        // é‡æ–°ç”Ÿæˆå·¥å•å·
        this.updateWorkOrderCode($event.row);
      },
      initDictSelectOptions(record) {
        return new Promise((resolve) => {
          // å¹¶è¡Œæ‰§è¡Œå¤šä¸ªå¼‚步请求
          const promises = [];

          // èŽ·å–班组和班次信息
          if (record && record.length > 0) {
            const factoryId = record[0].factoryId
            const shiftGroupPromise = getAction(this.url.queryShiftGroupByFactoryId, { factoryId: factoryId }).then(res => {
              if (res.success) {
                // ä¿®æ­£æ˜ å°„逻辑
                this.groupOptions = res.result.map(item => {
                  return {
                    value: item.id,
                    label: item.groupName
                  }
                })
                // ä¿å­˜ç­ç»„和班次的映射关系
                this.groupShiftMap = res.result.reduce((map, item) => {
                  map[item.id] = {
                    shiftId: item.shiftId,
                    shiftCode: item.shiftCode_dictText,
                    shiftName: item.shiftId_dictText
                  }
                  return map
                }, {})
              }
            }).catch(() => {
              // å³ä½¿è¯·æ±‚失败也不阻塞
            });
            promises.push(shiftGroupPromise);
          }

          //获取物料编号下拉选项
          const materialNumberPromise = ajaxGetDictItems("lsw_material,material_name,material_number,del_flag!='1' order by material_number asc", null).then(res => {
            if (res.success) {
              // å‡è®¾ç‰©æ–™ç¼–号字段为 materialNumber，需要根据实际字段调整
              // å°†ç‰©æ–™é€‰é¡¹å­˜å‚¨åˆ°ç»„件数据中，供表格使用
              this.materialOptions = res.result.map(item => {
                return {
                  value: item.value,
                  label: item.value
                }
              });
              this.materNumberNameMap = res.result.reduce((map, item) => {
                map[item.value] = item.text
                return map
              }, {})
            }
          }).catch(() => {
            // å³ä½¿è¯·æ±‚失败也不阻塞
          });
          promises.push(materialNumberPromise);

          // ç­‰å¾…所有请求完成
          Promise.all(promises).then(() => {
            resolve();
          });
        })
      },
      edit (record, dateRange) {
        // å…ˆåŠ è½½å­—典数据，再初始化表单
        this.initDictSelectOptions(record).then(() => {
          this.$nextTick(() => {
            // æ ¹æ®æ—¥æœŸèŒƒå›´ç”ŸæˆæŽ’产日期选项
            if (dateRange && dateRange.length === 2) {
              this.workOrderDateOptions = this.generateDateRangeOptions(dateRange[0], dateRange[1]);
            }

            // ä¸ºæ¯æ¡è®°å½•ç”Ÿæˆå·¥å•å·
            if (record && record.length > 0) {
              record.forEach(row => {
                if (!row.workOrderCode) {
                  this.updateWorkOrderCode(row);
                }
              });
            }
            this.dataSource = record
            this.visible = true
            // æ•°æ®åŠ è½½å®ŒæˆåŽæ¿€æ´»æ‰€æœ‰è¡Œçš„编辑状态
            this.$nextTick(() => {
              if (this.$refs.table && this.dataSource.length > 0) {
                // æ¿€æ´»ç¬¬ä¸€è¡Œè¿›å…¥ç¼–辑状态
                this.$refs.table.setActiveRow(this.dataSource[0])
              }
            })
          });
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleAdd() {
        // åˆ›å»ºæ–°è¡Œæ•°æ®
        const newRow = {
          workOrderCode: this.dataSource.length > 0 ? this.dataSource[0].factoryCode : '',
          materialNumber: '',       // ç‰©æ–™ç¼–号（需选择）
          materialName: '',         // ç‰©æ–™åç§°ï¼ˆè‡ªåŠ¨å¡«å……）
          factoryId: this.dataSource.length > 0 ? this.dataSource[0].factoryId : '',
          factoryCode: this.dataSource.length > 0 ? this.dataSource[0].factoryCode : '',
          factoryName: this.dataSource.length > 0 ? this.dataSource[0].factoryName : '',
          groupId: '',              // ç­ç»„（需选择）
          shiftId: '',              // ç­æ¬¡ID
          shiftCode: '',            // ç­æ¬¡ç¼–号
          shiftName: '',            // ç­æ¬¡åç§°
          workOrderDate: '',        // æŽ’产日期（需选择）
          planQuantity: ''          // è®¡åˆ’生产数量（需填写）
        }
        // å°†æ–°è¡Œæ·»åŠ åˆ°æ•°æ®æºä¸­
        this.dataSource.push(newRow);
        // æ¿€æ´»æ–°å¢žçš„行进入编辑状态
        this.$nextTick(() => {
          if (this.$refs.table) {
            this.$refs.table.setActiveRow(newRow);
          }
        });
      },
      handleRemove(row) {
        let table = this.$refs.table
        this.$confirm({
          title: '提示',
          content: '确认要删除吗？',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            // åˆ é™¤è¡Œ
            table.remove(row)
          }
        })
      },
      handleOk () {
        // è¡¨æ ¼å…¨è¡¨æ ¡éªŒ
        this.$refs.table.validate((valid) => {
          if (valid) {
            this.$message.error("请完成所有必填信息后再提交！")
          } else {
            let tableData = this.$refs.table.getTableData().fullData
            console.log(tableData)
            postAction(this.url.addSchedulePlan, tableData).then(res=> {
              if (res.success) {
                this.$message.success(res.message)
                this.submitCallback()
              } else {
                this.$message.warning(res.message)
              }
            })
          }
        })
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>

<style scoped>

.placeholder-text {
  color: #999;
  font-style: italic;
}

.error-button {
  background-color: #ff4d4f !important;
  border-color: #ff4d4f !important;
  color: #fff !important;
}

</style>

 src/views/mes/modules/MesProductionWorkOrderModal.vue

@@ -23,7 +23,7 @@
    data () {
      return {
        title:'',
        width:896,
        width:900,
        visible: false,
        disableSubmit: false
      }

 src/views/mes/modules/MesProductionWorkOrderRepublishModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,132 @@
<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="计划生产数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="planQuantity">
                <a-input-number
                  v-model="model.planQuantity"
                  placeholder="请输入计划生产数量"
                  style="width: 100%"
                  :min="0">
                </a-input-number>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="重发布原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="republishReason">
                <a-textarea
                  v-model="model.republishReason"
                  placeholder="请填写重发布原因"
                  :rows="4">
                </a-textarea>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </j-modal>
</template>

<script>
import { postAction } from '@api/manage'

export default {
  name: 'MesProductionWorkOrderRepublishModal',
  data () {
    return {
      title: '重发布工单',
      width: 600,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      model: {
        id: '',
        planQuantity: null,
        republishReason: ''
      },
      validatorRules: {
        planQuantity: [
          { required: true, message: '请输入计划生产数量!' }
        ],
        republishReason: [
          { required: true, message: '请填写重发布原因!' }
        ]
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      url: {
        republish: '/mesproductionworkorder/mesProductionWorkOrder/republish'
      }
    }
  },
  computed: {
    formDisabled(){
      return this.disabled
    },
  },
  methods: {
    add (record) {
      // é‡ç½®è¡¨å•
      this.$refs.form && this.$refs.form.resetFields()
      // è®¾ç½®åˆå§‹å€¼
      if (record) {
        this.model.id = record.id
        this.model.planQuantity = record.planQuantity
        this.model.republishReason = ''
      }
      this.visible = true
    },
    close () {
      this.$emit('close');
      this.visible = false;
    },
    handleOk () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          let formData = {
            id: this.model.id,
            planQuantity: this.model.planQuantity,
            republishReason: this.model.republishReason
          }
          postAction(this.url.republish, formData).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.submitCallback()
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    submitCallback(){
      this.$emit('ok');
      this.visible = false;
    },
    handleCancel () {
      this.close()
    }
  }
}
</script>