Merge remote-tracking branch 'origin/master'

cuilei

2025-06-13 1e653db94c24389cc7615fd4a7ef1d63b00af534

 src/views/dnc/base/modules/TerminalIndex/ReportEquipmentClose/SplitShutdownInfoModal.vue

@@ -1,113 +1,208 @@
<template>
  <a-modal :visible="visible" :width="800" title="拆分停机信息" @ok="handleSubmit" @cancel="handleCancel">
    <a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="{span:8}" :wrapperCol="{span:12}">
  <j-modal :visible="visible" :width="800" title="拆分停机信息" @ok="handleSubmit" @cancel="handleCancel"
           :confirmLoading="confirmLoading"
           :maskClosable="false">
    <a-form-model ref="form" :model="model" :rules="validateRules" :hideRequiredMark="true" :labelCol="{span:8}"
                  :wrapperCol="{span:12}">
      <a-row>
        <a-col :span="10">
          <a-form-model-item prop="startTime" label="开始时间">
            <a-date-picker show-time value-format="YYYY-MM-DD HH:mm:ss" v-model="model.startTime"/>
        <a-col :span="12">
          <a-form-model-item label="开始时间">
            <a-date-picker disabled show-time value-format="YYYY-MM-DD HH:mm:ss" v-model="model.startDate"/>
          </a-form-model-item>
        </a-col>
      </a-row>

      <div v-for="item in splitList" :key="item.title">
        <a-divider orientation="left">{{item.title}}</a-divider>
      <a-divider orientation="left">拆分一段</a-divider>

        <a-row>
          <a-col :span="10">
            <a-form-model-item prop="endTime" label="结束日期">
              <a-date-picker show-time value-format="YYYY-MM-DD HH:mm:ss" v-model="item.splitParams.endTime"/>
            </a-form-model-item>
          </a-col>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="    " :colon="false" prop="firstMiddleTime">
            <a-date-picker show-time :showToday="false" value-format="YYYY-MM-DD HH:mm:ss"
                           v-model="model.firstMiddleTime"
                           @change="handleFirstMiddleTimeChange"
                           :disabledDate="disabledDate1"/>
          </a-form-model-item>
        </a-col>

          <a-col :span="10">
            <a-form-model-item prop="closeReason" label="停机原因">
              <a-select v-model="item.splitParams.closeReason" placeholder="请选择停机原因">
                <a-select-option v-for="item in closeReasonList" :key="item.id">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        <a-col :span="12">
          <a-form-model-item label="停机原因">
            <a-select v-model="model.firstDowntimeDescription" placeholder="请选择停机原因">
              <a-select-option v-for="item in downtimeDescriptionList" :key="item.value">
                {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

          <a-col :span="4">
            <a-form-model-item label="选择">
              <a-checkbox @change="handleCheckboxChange(item,$event)"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </div>
      <a-divider orientation="left">拆分二段</a-divider>

      <a-row>
        <a-col :span="12">
          <a-form-model-item label="    " :colon="false">
            <a-date-picker show-time :showToday="false" value-format="YYYY-MM-DD HH:mm:ss"
                           v-model="model.secondMiddleTime"
                           :disabled="!model.firstMiddleTime" :disabledDate="disabledDate2"/>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="停机原因">
            <a-select v-model="model.secondDowntimeDescription" placeholder="请选择停机原因"
                      :disabled="!model.firstMiddleTime">
              <a-select-option v-for="item in downtimeDescriptionList" :key="item.value">
                {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-divider orientation="left">拆分三段</a-divider>

      <a-row>
        <a-col :span="12">
          <a-form-model-item label="结束日期">
            <a-date-picker disabled show-time value-format="YYYY-MM-DD HH:mm:ss" v-model="model.endDate"/>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="停机原因">
            <a-select v-model="model.thirdDowntimeDescription" placeholder="请选择停机原因">
              <a-select-option v-for="item in downtimeDescriptionList" :key="item.value">
                {{item.label}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
  </j-modal>
</template>

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

  export default {
    name: 'SplitShutdownInfoModal',
    props: {
      downtimeDescriptionList: {
        type: Array
      }
    },
    data() {
      return {
        visible: false,
        model: {},
        validateRules: {
          startTime: [{ required: true, message: '请选择开始时间！', trigger: 'change' }]
          firstMiddleTime: [{ required: true, message: '请选择拆分一段时间！', trigger: 'change' }]
        },
        closeReasonList: [
          {
            id: 1,
            label: '吃饭时间休息'
          },
          {
            id: 2,
            label: '工作时间休息'
          },
          {
            id: 3,
            label: '计划性停电'
          },
          {
            id: 4,
            label: '待料停机'
          },
          {
            id: 5,
            label: '首件调试'
          },
          {
            id: 6,
            label: '刀量具准备'
          }
        ],
        splitList: [
          {
            title: '拆分一段',
            splitParams: {}
          },
          {
            title: '拆分二段',
            splitParams: {}
          },
          {
            title: '拆分三段',
            splitParams: {}
          }
        ]
        confirmLoading: false,
        url: {
          submit: '/mdc/operator/mdcDowntime/splitDowntime'
        }
      }
    },
    methods: {
      handleCheckboxChange(record, event) {
        console.log('record', record)
        record.splitParams.checked = event.target.checked
      /**
       * 设置开始及结束日期时间
       * @param record 列表行记录对象
       */
      setDateTime(record) {
        this.model = {
          id: record.id,
          startDate: record.startDate,
          endDate: record.endDate
        }
      },

      /**
       * 拆分一段时间值发生改变时触发
       * @param value 改变后的值
       */
      handleFirstMiddleTimeChange(value) {
        // 若时间值被清空时触发
        if (!value) {
          delete this.model.secondMiddleTime
          delete this.model.secondDowntimeDescription
        }
      },

      /**
       * 拆分一段禁用日期范围
       * @param current 禁用范围
       * @returns {boolean}
       */
      disabledDate1(current) {
        const { startDate, endDate, secondMiddleTime } = this.model
        let nextEndTime

        if (!secondMiddleTime) nextEndTime = endDate
        else nextEndTime = secondMiddleTime

        return current < moment(startDate).startOf('days') || current > moment(nextEndTime).endOf('days')
      },

      /**
       * 拆分二段禁用日期范围
       * @param current  禁用范围
       * @returns {boolean}
       */
      disabledDate2(current) {
        const { endDate, firstMiddleTime } = this.model

        return current < moment(firstMiddleTime).startOf('days') || current > moment(endDate).endOf('days')
      },

      /**
       * 创建禁用时间范围数组
       * @param start 开始时间（时分秒）
       * @param end 结束时间（时分秒）
       * @returns {Array}
       */
      handleCreateTimeRangeArray(start, end) {
        const result = []
        for (let i = start; i < end; i++) {
          result.push(i)
        }
        return result
      },

      // 表单提交事件
      handleSubmit() {
        const that = this
        this.$refs.form.validate(valid => {
          if (valid) {

            that.confirmLoading = true
            postAction(that.url.submit, that.model)
              .then(res => {
                if (res.success) {
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                  that.handleCancel()
                  that.$emit('submitSuccess')
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that.confirmLoading = false
              })
            console.log('model', this.model)
          } else {
            return false
          }
        })
      },

      // 关闭弹窗事件
      handleCancel() {
        this.$refs.form.clearValidate()
        this.visible = false