aiot-app/pages/ehs/emergencyDrill/workOrderReportDialog.vue

<template>
  <u-popup
    :show="visible"
    mode="bottom"
    :round="10"
    :closeOnClickOverlay="false"
    @close="cancel"
    class="report-popup"
  >
    <view class="popup-content">
      <view class="popup-header">
        <text class="popup-title">报工</text>
        <view class="close-btn" @click="cancel">×</view>
      </view>

      <scroll-view class="popup-body" scroll-y>
        <view class="card-a">
          <view class="card-section">
            <u--form
              labelPosition="left"
              labelWidth="190rpx"
              :model="form"
              :rules="rules"
              ref="formRef"
            >
              <u-form-item label="演练实施记录" prop="processRecord" borderBottom required>
                <u--textarea
                  v-model="form.processRecord"
                  placeholder="请输入"
                  height="120rpx"
                />
              </u-form-item>

              <u-form-item label="演练时间" prop="drillTime" borderBottom required>
                <view class="picker-value" @click="showDateTimePicker">
                  {{ form.drillTime || '请选择' }}
                </view>
                <u-icon slot="right" name="arrow-right" />
              </u-form-item>

              <u-form-item label="附件" prop="processRecordAttachment" borderBottom required>
                <fileMain v-model="form.processRecordAttachment" />
              </u-form-item>
            </u--form>
          </view>
        </view>
      </scroll-view>

      <view class="popup-footer">
        <u-button type="default" @click="cancel">取消</u-button>
        <u-button type="primary" @click="save" :loading="loading">提交</u-button>
      </view>
    </view>

    <u-datetime-picker
      :show="showDateTimePopup"
      v-model="datetimeValue"
      mode="datetime"
      @confirm="onDateTimeConfirm"
      @cancel="showDateTimePopup = false"
    />

    <u-toast ref="uToast" />
  </u-popup>
</template>

<script>
import fileMain from '@/pages/doc/index.vue';
import { recordProcess } from '@/api/emergencyDrill/workOrder.js';

export default {
  components: { fileMain },
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        id: '',
        processRecord: '',
        processRecordAttachment: [],
        drillTime: ''
      },
      showDateTimePopup: false,
      datetimeValue: 0,
      rules: {
        processRecord: { type: 'string', required: true, message: '请输入演练实施记录', trigger: ['blur', 'change'] },
        processRecordAttachment: { type: 'array', required: true, message: '请选择附件', trigger: ['change'] },
        drillTime: { type: 'string', required: true, message: '请选择演练时间', trigger: ['change'] }
      }
    };
  },
  methods: {
    open(row) {
      this.visible = true;
      this.form = {
        id: row.id,
        processRecord: '',
        processRecordAttachment: [],
        drillTime: this.$u.timeFormat(Date.now(), 'yyyy-mm-dd hh:MM:ss')
      };
      this.$nextTick(() => {
        if (this.$refs.formRef) {
          this.$refs.formRef.setRules(this.rules);
        }
      });
    },

    cancel() {
      this.visible = false;
      this.form = { id: '', processRecord: '', processRecordAttachment: [], drillTime: '' };
    },

    showDateTimePicker() {
      this.datetimeValue = this.form.drillTime ? new Date(this.form.drillTime).getTime() : Date.now();
      this.showDateTimePopup = true;
    },

    onDateTimeConfirm(e) {
      this.showDateTimePopup = false;
      this.form.drillTime = this.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
      if (this.$refs.formRef) {
        this.$refs.formRef.validateField('drillTime');
      }
    },

    async save() {
      try {
        if (this.$refs.formRef) {
          await this.$refs.formRef.validate();
        }
        if (!this.form.processRecordAttachment || this.form.processRecordAttachment.length === 0) {
          this.$refs.uToast.show({ type: 'warning', message: '请选择附件' });
          return;
        }
        this.loading = true;
        await recordProcess(this.form);
        this.$refs.uToast.show({ type: 'success', message: '报工成功' });
        this.cancel();
        this.$emit('reload');
      } catch (e) {
        if (e && e.message) {
          this.$refs.uToast.show({ type: 'error', message: e.message });
        }
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.report-popup {
  /deep/ .u-popup__content {
    border-radius: 32rpx 32rpx 0 0;
    overflow: hidden;
  }

  .popup-content {
        height: calc(100vh - 100px);

    display: flex;
    flex-direction: column;
    background: #eff2f7;
  }

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 32rpx;
    background: #fff;
    border-bottom: 2rpx solid #eef2f6;
    flex-shrink: 0;
    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #1f2b3c;
    }
    .close-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 52rpx;
      color: #8e9aae;
      line-height: 1;
    }
  }

  .popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 24rpx;
  }

  .card-a {
    background: #ffffff;
    border-radius: 48rpx;
    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }

  .card-section {
    padding: 30rpx 32rpx;
  }

  /deep/ .u-form-item {
    padding: 12rpx 0;
    .u-form-item__body__left__label {
      font-size: 26rpx !important;
      color: #6c7a91 !important;
    }
    .u-textarea__field {
      font-size: 26rpx !important;
      min-height: 100rpx;
    }
  }

  .picker-value {
    font-size: 26rpx;
    color: #1e2a3a;
    text-align: right;
    flex: 1;
    min-height: 44rpx;
    padding: 4rpx 0;
  }

  .popup-footer {
    display: flex;
    padding: 16rpx 24rpx;
    background: #fff;
    border-top: 2rpx solid #eef2f6;
    gap: 16rpx;
    flex-shrink: 0;
    /deep/ .u-button {
      flex: 1;
      border-radius: 48rpx;
      height: 72rpx;
    }
  }
}
</style>