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

<template>
  <u-popup
    :show="visible"
    mode="bottom"
    :round="10"
    :closeOnClickOverlay="false"
    @close="cancel"
    class="acceptance-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="200rpx"
              :model="form"
              :rules="rules"
              ref="formRef"
            >
              <u-form-item label="演练效果和总结评价" prop="drillEvaluation" borderBottom required>
                <u--textarea
                  v-model="form.drillEvaluation"
                  placeholder="请输入"
                  border="none"
                  height="120rpx"
                />
              </u-form-item>

              <u-form-item label="存在的问题及整改措施" prop="drillEvaluationMeasure" borderBottom>
                <u--textarea
                  v-model="form.drillEvaluationMeasure"
                  placeholder="请输入"
                  border="none"
                  height="120rpx"
                />
              </u-form-item>

              <u-form-item label="整改情况" prop="inspectionRecordRectification" borderBottom>
                <u--textarea
                  v-model="form.inspectionRecordRectification"
                  placeholder="请输入"
                  border="none"
                  height="120rpx"
                />
              </u-form-item>

              <u-form-item label="验收结果" prop="inspectionResult" borderBottom required>
                <u--input
                  v-model="form.inspectionResult"
                  placeholder="请输入"
                  border="none"
                  inputAlign="right"
                />
              </u-form-item>

              <u-form-item label="验收人" prop="inspectorName" borderBottom>
                <u--input v-model="form.inspectorName" disabled border="none" inputAlign="right" />
              </u-form-item>

              <u-form-item label="附件" prop="inspectionRecordAttachment" borderBottom>
                <fileMain v-model="form.inspectionRecordAttachment" />
              </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-toast ref="uToast" />
  </u-popup>
</template>

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

export default {
  components: { fileMain },
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        id: '',
        drillEvaluation: '',
        drillEvaluationMeasure: '',
        inspectionRecordRectification: '',
        inspectionResult: '',
        inspectorName: '',
        inspector: '',
        inspectionRecordAttachment: []
      },
      rules: {
        drillEvaluation: { type: 'string', required: true, message: '请输入演练效果和总结评价', trigger: ['blur', 'change'] },
        inspectionResult: { type: 'string', required: true, message: '请输入验收结果', trigger: ['blur', 'change'] }
      }
    };
  },
  methods: {
    open(row) {
      this.visible = true;
      const userInfo = uni.getStorageSync('userInfo') || {};
      this.form = {
        id: row.id,
        drillEvaluation: '',
        drillEvaluationMeasure: '',
        inspectionRecordRectification: '',
        inspectionResult: '',
        inspectorName: userInfo.name || '',
        inspector: userInfo.userId || '',
        inspectionRecordAttachment: []
      };
      this.$nextTick(() => {
        if (this.$refs.formRef) {
          this.$refs.formRef.setRules(this.rules);
        }
      });
    },

    cancel() {
      this.visible = false;
      this.form = {
        id: '',
        drillEvaluation: '',
        drillEvaluationMeasure: '',
        inspectionRecordRectification: '',
        inspectionResult: '',
        inspectorName: '',
        inspector: '',
        inspectionRecordAttachment: []
      };
    },

    async save() {
      try {
        if (this.$refs.formRef) {
          await this.$refs.formRef.validate();
        }
        this.loading = true;
        await evaluate(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>
.acceptance-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;
    }
    .u-input__content__field-wrapper__field {
      font-size: 26rpx !important;
      text-align: right;
    }
  }

  .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>