kd-aiot-frontend-aps/src/views/workOrder/components/unpackDialog.vue

<template>
  <ele-modal
    width="60vw"
    :visible.sync="visible"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    :maxable="true"
    :title="'拆分工单'"
  >
    <div class="form-wrapper">
      <el-form :model="requestData" label-width="0" :show-message="false">
        <el-descriptions title="" :column="2" border>
          <el-descriptions-item label="生产订单号">
            {{ formData.code }}</el-descriptions-item
          >
          <el-descriptions-item label="产品编码">
            {{ formData.productCode }}</el-descriptions-item
          >
          <el-descriptions-item label="产品名称">{{
            formData.productName
          }}</el-descriptions-item>
          <el-descriptions-item label="牌号|型号">
            {{ formData.brandNo }}|{{ formData.model }}</el-descriptions-item
          >
          <el-descriptions-item label="要求生产数量">{{
            formData.formingNum
          }}</el-descriptions-item>

          <el-descriptions-item label="批次号">{{
            formData.batchNo
          }}</el-descriptions-item>

          <el-descriptions-item label="计划开始时间">{{
            formData.planStartTime
          }}</el-descriptions-item>

          <el-descriptions-item label="要求完成日期">{{
            formData.planCompleteTime
          }}</el-descriptions-item>
        </el-descriptions>
      </el-form>

      <headerTitle title="剩余拆单" class="mt20"> </headerTitle>
      <el-form ref="form" :model="form" :rules="rules">
        <ele-pro-table
          ref="table"
          :needPage="false"
          :columns="columns"
          :datasource="form.surplusUnpack"
        >
          <template v-slot:toolbar>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              :disabled="formingNum == 0 ? true : false"
              @click="openUnpack"
            >
              拆单
            </el-button>
          </template>

          <template v-slot:formingNum="scope">
            <el-form-item
              v-if="formingNum != 0"
              :prop="'surplusUnpack.' + scope.$index + '.formingNum'"
              :rules="[
                {
                  required: true,
                  message: '请输入要求生产数量',
                  trigger: 'change'
                },
                {
                  pattern: /^\d+(\.{0,1}\d+){0,1}$/,
                  message: '拆单数超过生产数量',
                  trigger: ['blur', 'change']
                }
              ]"
            >
              <el-input
                disabled
                v-model="formingNum"
                placeholder="请输入"
              ></el-input>
            </el-form-item>

            <el-form-item v-else> 工单已全部拆完 </el-form-item>
          </template>

          <template v-slot:planStartTime="scope">
            <el-form-item
              v-if="formingNum != 0"
              :prop="'surplusUnpack.' + scope.$index + '.planStartTime'"
              :rules="{
                required: true,
                message: '请选择开始计划时间',
                trigger: 'change'
              }"
            >
              <el-date-picker
                class="w100"
                disabled
                v-model="scope.row.planStartTime"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </template>

          <template v-slot:planCompleteTime="scope">
            <el-form-item
              v-if="formingNum != 0"
              :rules="{
                required: true,
                message: '请选择计划结束时间',
                trigger: 'change'
              }"
            >
              <el-date-picker
                class="w100"
                disabled
                v-model="scope.row.planCompleteTime"
                type="date"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </template>
        </ele-pro-table>

        <headerTitle title="拆单" class="mt20"> </headerTitle>

        <ele-pro-table
          ref="table"
          :needPage="false"
          :columns="columns2"
          :datasource="form.unpackList"
        >
          <template v-slot:formingNum="scope">
            <el-form-item
              :prop="'unpackList.' + scope.$index + '.formingNum'"
              :rules="{
                required: true,
                message: '请输入要求生产数量',
                trigger: 'change'
              }"
            >
              <!-- <el-input-number type="number" @change="changeNum(scope.$index)" :min="0" v-model="scope.row.formingNum"
                placeholder="请输入"></el-input-number> -->

              <el-input
                v-model="scope.row.formingNum"
                type="number"
                @input="changeNum(scope.$index)"
                :min="0"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </template>

          <template v-slot:planStartTime="scope">
            <el-form-item
              :prop="'unpackList.' + scope.$index + '.planStartTime'"
              :rules="{
                required: true,
                message: '请选择开始计划时间',
                trigger: 'change'
              }"
            >
              <el-date-picker
                class="w100"
                v-model="scope.row.planStartTime"
                type="datetime"
                @change="handleStartTimeChange(scope.row)"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="{
                  disabledDate: (time) => {
                    const end = scope.row.planCompleteTime;
                    if (!end) return false; // 无结束时间，不禁用
                    // 将结束时间和当前时间都转换为“当天0点”，仅比较年月日
                    const endDay = new Date(end);
                    endDay.setHours(0, 0, 0, 0);
                    const currentDay = new Date(time);
                    currentDay.setHours(0, 0, 0, 0);
                    return currentDay > endDay; // 仅当天0点更晚时禁用
                  }
                }"
              ></el-date-picker>
              <!-- :picker-options="pickerOptions" -->
            </el-form-item>
          </template>

          <template v-slot:planCompleteTime="scope">
            <el-form-item
              :prop="'unpackList.' + scope.$index + '.planCompleteTime'"
              :rules="{
                required: true,
                message: '请选择计划结束时间',
                trigger: 'change'
              }"
            >
              <el-date-picker
                class="w100"
                v-model="scope.row.planCompleteTime"
                type="datetime"
                @change="handleEndTimeChange(scope.row)"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="{
                  disabledDate: (time) => {
                    const start = scope.row.planStartTime;
                    if (!start) return false; // 无开始时间，不禁用
                    // 将开始时间和当前时间都转换为“当天0点”，仅比较年月日
                    const startDay = new Date(start);
                    startDay.setHours(0, 0, 0, 0);
                    const currentDay = new Date(time);
                    currentDay.setHours(0, 0, 0, 0);
                    return currentDay < startDay; // 仅当天0点更早时禁用
                  },
                  // 新增：限制同一天内的时间必须晚于开始时间
                  disabledTime: (date) => {
                    const start = scope.row.planStartTime;
                    if (!start) {
                      return {
                        disabledHours: () => [],
                        disabledMinutes: () => [],
                        disabledSeconds: () => []
                      };
                    }
                    const startDate = new Date(start);
                    const currentDate = new Date(date);
                    // 判断是否是同一天
                    if (
                      currentDate.getFullYear() === startDate.getFullYear() &&
                      currentDate.getMonth() === startDate.getMonth() &&
                      currentDate.getDate() === startDate.getDate()
                    ) {
                      const startHour = startDate.getHours();
                      const startMinute = startDate.getMinutes();
                      const startSecond = startDate.getSeconds();
                      return {
                        // 禁用比 startHour 早的小时
                        disabledHours: () =>
                          Array.from({ length: startHour }, (_, i) => i),
                        // 若小时相同，禁用比 startMinute 早的分钟
                        disabledMinutes: (hour) =>
                          hour === startHour
                            ? Array.from({ length: startMinute }, (_, i) => i)
                            : [],
                        // 若小时和分钟都相同，禁用比 startSecond 早的秒
                        disabledSeconds: (hour, minute) =>
                          hour === startHour && minute === startMinute
                            ? Array.from({ length: startSecond }, (_, i) => i)
                            : []
                      };
                    } else {
                      // 不同天，时间无限制
                      return {
                        disabledHours: () => [],
                        disabledMinutes: () => [],
                        disabledSeconds: () => []
                      };
                    }
                  }
                }"
              ></el-date-picker>
              <!-- :picker-options="pickerOptionsEnd" -->
            </el-form-item>
          </template>

          <template v-slot:action="{ $index }">
            <el-popconfirm
              class="ele-action"
              title="确定要删除此子单吗？"
              @confirm="remove($index)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-form>
    </div>
    <div slot="footer">
      <el-button plain @click="cancel" :loading="loading">取消</el-button>
      <el-button type="primary" @click="confirm" :loading="loading"
        >确定</el-button
      >
    </div>
  </ele-modal>
</template>

<script>
  import { splitBatch } from '@/api/workOrder/index.js';

  import { deepClone } from '@/utils';
  export default {
    components: {},
    data() {
      return {
        visible: false,
        formData: {},
        requestData: {
          deviceCode: '',
          deviceName: '',
          deviceId: ''
        },
        formingNum: 0,
        storageNum: 0,
        form: {
          surplusUnpack: [],
          unpackList: []
        },
        pickerOptions: {
          disabledDate: (time) => {
            // 根据某个条件动态设置最大日期
            if (this.formData.planStartTime) {
              const maxDate = new Date(this.formData.planStartTime); // 您的逻辑方法
              return time.getTime() < maxDate.getTime();
            } else {
              return false;
            }
          }
        },
        pickerOptionsEnd: {
          disabledDate: (time) => {
            // 根据某个条件动态设置最大日期
            if (this.formData.planCompleteTime) {
              const maxDate = new Date(this.formData.planCompleteTime); // 您的逻辑方法
              return time.getTime() > maxDate.getTime();
            } else {
              return false;
            }
          }
        },
        rules: {},
        columns: [
          {
            prop: 'originalCode',
            label: '生产订单号',
            align: 'center',
            minWidth: 200
          },
          {
            prop: 'formingNum',
            label: '要求生产数量',
            align: 'center',
            slot: 'formingNum',
            minWidth: 200
          },
          {
            prop: 'planStartTime',
            label: '计划开始时间',
            align: 'center',
            slot: 'planStartTime',
            minWidth: 200
          },
          {
            prop: 'planCompleteTime',
            label: '计划结束时间',
            align: 'center',
            slot: 'planCompleteTime',
            minWidth: 200
          }
        ],
        columns2: [
          {
            prop: 'originalCode',
            label: '生产订单号',
            align: 'center',
            minWidth: 200
          },
          {
            prop: 'formingNum',
            label: '要求生产数量',
            align: 'center',
            slot: 'formingNum',
            minWidth: 200
          },
          {
            prop: 'planStartTime',
            label: '计划开始时间',
            align: 'center',
            slot: 'planStartTime',
            minWidth: 200
          },
          {
            prop: 'planCompleteTime',
            label: '计划结束时间',
            align: 'center',
            slot: 'planCompleteTime',
            minWidth: 200
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 160,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        loading: false
      };
    },
    methods: {
      open(row) {
        this.visible = true;
        this.formData = deepClone(row);
        this.formingNum = this.residualVal();
        this.storageNum = this.residualVal();
        this.form.surplusUnpack = [];
        this.form.unpackList = [];
        this.setSurplus();
      },

      // 要求生产数量( 剩余值 )
      residualVal() {
        if (this.formData.splitResidue) {
          return this.formData.splitResidue;
        }
        if (this.formData.splitResidue === 0) {
          return 0;
        }
        return this.formData.formingNum;
      },

      checkEndTimeValid(row) {
        const { planStartTime: start, planCompleteTime: end } = row;
        if (!start || !end) return; // 开始/结束时间未填，跳过
        const startTime = new Date(start);
        const endTime = new Date(end);
        if (endTime < startTime) {
          row.planCompleteTime = new Date(startTime); // 修正为开始时间
          this.$message.info('结束时间不能早于开始时间，已自动设为开始时间');
        }
      },

      // 【开始时间变化时】触发
      handleStartTimeChange(row) {
        this.checkEndTimeValid(row);
      },

      // 【结束时间变化时】触发
      handleEndTimeChange(row) {
        this.checkEndTimeValid(row);
      },

      setSurplus() {
        this.form.surplusUnpack.push({
          originalCode: this.formData.code,
          // formingNum: this.formData.formingNum,
          formingNum: this.residualVal(),
          planStartTime: this.formData.planStartTime,
          planCompleteTime: this.formData.planCompleteTime,
          isCopy: 1
        });
      },

      openUnpack() {
        this.form.unpackList.push({
          originalCode: this.formData.code,
          formingNum: '',
          planStartTime: this.formData.planStartTime || '',
          planCompleteTime: this.formData.planCompleteTime || ''
        });
      },

      surplusUnpackFn(index) {
        console.log(this.form.unpackList);
      },

      changeNum(index) {
        // let num = this.formData.formingNum;
        let num = this.storageNum;
        this.form.unpackList.forEach((e) => {
          if (e.formingNum != null && e.formingNum != undefined) {
            num = num - Number(e.formingNum);
            if (num >= 0) {
              this.formingNum = num;
            } else {
              // this.$nextTick(() => {
              this.$set(this.form.unpackList[index], 'formingNum', 0);
              //
              // });
              this.$message.error('拆单数超过生产数量');
              this.calculateQuantity();
              return;
            }
          }
        });
      },

      // 计算数量 在只有一条数据的时候之前算法有问题
      calculateQuantity() {
        this.$nextTick(() => {
          let total = 0;
          this.form.unpackList.map((el) => {
            if (el.formingNum) {
              total += el.formingNum - 0;
            }
          });
          if (total == 0) {
            this.formingNum = this.storageNum;
          }
        });
      },

      remove(index) {
        this.form.unpackList.splice(index, 1);
        if (this.form.unpackList.length == 0) {
          this.formingNum = this.storageNum;
        } else {
          this.changeNum(index);
        }
      },

      cancel() {
        this.formData = {};
        this.visible = false;
        this.$refs.form.resetFields();
      },

      confirm() {
        if (this.form.unpackList.length === 0) {
          return this.$message.warning('请至少有一条拆单数据');
        }
        this.$refs.form.validate(async (value) => {
          if (value) {
            // if (
            //   this.form.unpackList.length == 1 &&
            //   this.form.unpackList[0].formingNum == this.formData.formingNum
            // ) {
            //   this.$message.info('拆单数要大于1');
            //   return false;
            // }

            // if (
            //   this.form.surplusUnpack.length == 1 &&
            //   this.form.unpackList.length == 0
            // ) {
            //   this.$message.info('拆单数要大于1');
            //   return false;
            // }

            // let params = [];
            // if (this.formingNum != 0) {
            //   this.form.surplusUnpack[0].formingNum = this.formingNum;
            //   params = [...this.form.unpackList, ...this.form.surplusUnpack];
            // } else {
            //   params = this.form.unpackList;
            // }
            for (let i = 0; i < this.form.unpackList.length; i++) {
              let item = this.form.unpackList[i];
              if (item.formingNum == 0) {
                this.$message.warning(`第${i + 1}条拆单要求生产数据不能为0`);
                return;
              }
            }
            this.form.surplusUnpack[0].formingNum = this.formingNum;
            let params = [...this.form.unpackList, ...this.form.surplusUnpack];
            try {
              this.loading = true;
              const res = await splitBatch(params);
              this.loading = false;
              if (res) {
                this.$message.success('拆分成功！');
                this.$emit('success');
                this.cancel();
              }
            } catch (err) {
              this.loading = false;
            }
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mt20 {
    margin-top: 20px;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }
</style>