排产计划生成页面增加物料、计划生产数量筛选输入框；修复日历组件展示超出错位问题

cuilei

13 小时以前 7bb4635dff502d78ff82768c1e6f68e88b2c291b

 src/views/mes/modules/MesProductionWorkOrderScheduleModal.vue

@@ -17,13 +17,15 @@
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="12">
                <a-col :span="7">
                <a-col :span="10">
                  <a-form-item label="产线" :label-col="{span: 6}" :wrapper-col="{span: 18}">
                    <j-tree-select dict="base_factory,factory_name,id" pid-field="parent_id"
                                   v-model="queryParam.factoryId" style="width: 100%"></j-tree-select>
                    <j-search-select-tag placeholder="请选择" v-model="queryParam.factoryId"
                                         dict="base_factory,factory_name,id,del_flag=0 and factory_category = '3'"
                                         @change="handleFactoryChange"
                    ></j-search-select-tag>
                  </a-form-item>
                </a-col>
                <a-col :span="9">
                <a-col :span="10">
                  <a-form-item label="日期" :label-col="{span: 4}" :wrapper-col="{span: 20}">
                    <a-range-picker
                      style="width: 100%"
@@ -34,9 +36,24 @@
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                <a-col :span="4">
                  <span style="float: left;overflow: hidden;white-space: nowrap;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                    <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px">查询</a-button>
                  </span>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="物料" :label-col="{span: 6}" :wrapper-col="{span: 18}">
                    <a-select placeholder="请选择" v-model="queryParam.materialNumber"
                              :options="materialSelectOptions"></a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="10">
                  <a-form-item label="计划生产数量" :label-col="{span: 6}" :wrapper-col="{span: 18}">
                    <a-input-number :min="1" v-model="queryParam.planQuantity" style="width: 100%" placeholder="请输入计划生产数量" />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <span style="float: left;overflow: hidden;white-space: nowrap;" class="table-page-search-submitButtons">
                    <a-button type="info" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                  </span>
                </a-col>
@@ -172,16 +189,33 @@
            @change="onCalendarChange"
          >
            <template #dateCell="{ date, isSelected, isToday }">
              <div class="custom-date-content">
              <div class="custom-date-content" style="overflow: hidden; max-height: 120px;">
                <div
                  v-for="(workOrder, index) in getWorkOrdersForDate(date)"
                  :key="workOrder.id"
                  class="work-order-item"
                  :class="getColorClass(index)"
                  :class="getColorClass(index)" style="
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    overflow: hidden;
                    padding: 2px 4px;
                    margin-bottom: 2px;
                    background-color: #f0f0f0;
                    border-radius: 2px;
                    max-width: 100%;
                    box-sizing: border-box;
                    width: 100%;
                    word-break: break-all;
                  "
                >
                  <span class="work-order-shift">{{ workOrder.shiftCode }}</span>
                  <span class="work-order-material">{{ workOrder.materialName }}</span>
                  <span class="work-order-quantity">{{ workOrder.planQuantity }}</span>
                  <div class="work-order-shift-quantity">
                    <span class="work-order-shift">{{ workOrder.shiftCode }}</span>
                    <span class="work-order-quantity">{{ workOrder.planQuantity }}</span>
                  </div>
                  <div class="work-order-material" :title="workOrder.materialName">
                    {{ workOrder.materialName }}
                  </div>
                </div>
              </div>
            </template>
@@ -222,6 +256,7 @@
      materialOptions: [],
      materNumberNameMap: {},
      workOrderDateOptions: [],
      materialSelectOptions: [],
      selectedRowKeys: [],
      selectionRows: [],
      /* 分页参数 */
@@ -301,6 +336,21 @@
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleFactoryChange(value) {
      this.materialSelectOptions = []
      if (value) {
        getAction(this.url.queryLswMaterialByProductionType, { factoryId: value }).then(res => {
          if (res.success) {
            this.materialSelectOptions = res.result.map(item => {
              return {
                value: item.materialNumber,
                label: item.materialName
              }
            })
          }
        })
      }
    },
    handleOk() {
      // 表格全表校验
@@ -512,7 +562,9 @@
      getAction(this.url.schedule, {
        factoryId: this.queryParam.factoryId,
        startDate: this.dateRange[0].format('YYYY-MM-DD'),
        endDate: this.dateRange[1].format('YYYY-MM-DD')
        endDate: this.dateRange[1].format('YYYY-MM-DD'),
        materialNumber: this.queryParam.materialNumber,
        planQuantity: this.queryParam.planQuantity
      }).then(res => {
        if (res.success) {
          const record = res.result
@@ -601,11 +653,15 @@
      } else {
        factoryCode = this.dataSource[0].factoryCode
      }
      let material
      if (this.queryParam.materialNumber) {
        material = this.materialSelectOptions.find(item => item.value === this.queryParam.materialNumber)
      }
      // 创建新行数据
      const newRow = {
        workOrderCode: factoryCode,
        materialNumber: '',
        materialName: '',
        materialNumber: this.dataSource.length > 0 ? this.dataSource[0].materialNumber : this.queryParam.materialNumber ? this.queryParam.materialNumber : '',
        materialName: this.dataSource.length > 0 ? this.dataSource[0].materialName : this.queryParam.materialNumber ? material.label : '',
        factoryId: this.dataSource.length > 0 ? this.dataSource[0].factoryId : this.queryParam.factoryId,
        factoryCode: factoryCode,
        groupId: '',
@@ -613,13 +669,14 @@
        shiftCode: '',
        shiftName: '',
        workOrderDate: '',
        planQuantity: ''
        planQuantity: this.dataSource.length > 0 ? this.dataSource[0].planQuantity : this.queryParam.planQuantity ? this.queryParam.planQuantity : '',
      }
      this.initDictSelectOptions(null).then(() => {
        // 根据日期范围生成排产日期选项
        if (this.dateRange && this.dateRange.length === 2) {
          this.workOrderDateOptions = this.generateDateRangeOptions(this.dateRange[0], this.dateRange[1]);
        }
        this.updateWorkOrderCode(newRow)
        this.dataSource.push(newRow)
        this.pagination.total += 1
        // 激活新增的行进入编辑状态
@@ -714,7 +771,7 @@
    onDateSelect(date) {
      console.log('Selected date:', date.format('YYYY-MM-DD'))
      // 更新日历显示为选中日期所在周
      this.calendarStartDate = date.clone().startOf('week');
      // this.calendarStartDate = date.clone().startOf('week');
    },

    // 处理日历周变化事件
@@ -758,6 +815,13 @@
  color: #999;
}

.custom-date-content {
  overflow: hidden;
  max-height: 120px;
  padding: 4px 0;
  box-sizing: border-box;
}

.work-order-item {
  font-size: 12px;
  padding: 2px 4px;
@@ -767,6 +831,9 @@
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
}

.work-order-item.blue-item {
@@ -779,16 +846,34 @@
  border-left: 2px solid #f5222d;
}

.work-order-shift-quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  margin-bottom: 2px;
}

.work-order-shift {
  font-weight: bold;
  margin-right: 4px;
}

.work-order-material {
  margin-right: 4px;
  flex-shrink: 0;
}

.work-order-quantity {
  float: right;
  color: #666;
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}

.work-order-material {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
</style>