aiot-app/pages/ehs/accidentReport/processDialog.vue

<template>
  <u-popup
    :show="visible"
    mode="bottom"
    :round="10"
    :closeOnClickOverlay="false"
    @close="cancel"
    class="process-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"
              ref="formRef"
            >
              <u-form-item label="事故事件名称" borderBottom
                ><u--input
                  v-model="form.acdntName"
                  disabled
                  border="none"
                  inputAlign="right"
              /></u-form-item>
              <u-form-item label="责任单位" borderBottom
                ><u--input
                  v-model="form.dutyUnitName"
                  disabled
                  border="none"
                  inputAlign="right"
              /></u-form-item>
            </u--form>
          </view>

          <!-- 四个模块 -->
          <view
            class="card-section"
            v-for="section in sections"
            :key="section.key"
          >
            <view class="section-title">{{ section.title }}</view>
            <u--form
              labelPosition="left"
              labelWidth="200rpx"
              :model="form"
              ref="formRef"
            >
              <u-form-item :label="section.statusLabel" borderBottom>
                <u-radio-group
                  v-model="form[section.statusKey]"
                  placement="row"
                >
                  <u-radio :name="1" :labelSize="24"
                    >已{{ section.statusLabel.replace("是否", "") }}</u-radio
                  >
                  <u-radio :name="0" :labelSize="24"
                    >未{{ section.statusLabel.replace("是否", "") }}</u-radio
                  >
                </u-radio-group>
              </u-form-item>
              <u-form-item :label="section.noteLabel" borderBottom>
                <u--textarea
                  v-model="form[section.noteKey]"
                  placeholder="请输入"
                  border="none"
                  height="100rpx"
                />
              </u-form-item>
              <u-form-item :label="section.materialLabel" borderBottom>
                <fileMain v-model="form[section.materialKey]" type="add" />
              </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 { getById, updatePartial } from "@/api/accidentReport/index.js";

const defForm = {
  acdntName: "",
  dutyUnitName: "",
  ascertainedStatus: 0,
  ascertainedNote: "",
  ascertainedMaterials: [],
  responsibilityStatus: 0,
  responsibilityNote: "",
  responsibilityMaterials: [],
  correctiveMeasuresStatus: 0,
  correctiveMeasuresNote: "",
  correctiveMeasuresMaterials: [],
  personnelEducationStatus: 0,
  personnelEducationNote: "",
  personnelEducationMaterials: [],
};

export default {
  components: { fileMain },
  data() {
    return {
      visible: false,
      loading: false,
      form: JSON.parse(JSON.stringify(defForm)),
      sections: [
        {
          key: "ascertained",
          title: "事故查明情况",
          statusLabel: "是否查清",
          statusKey: "ascertainedStatus",
          noteKey: "ascertainedNote",
          materialKey: "ascertainedMaterials",
        },
        {
          key: "responsibility",
          title: "责任人员处理",
          statusLabel: "是否处理",
          statusKey: "responsibilityStatus",
          noteKey: "responsibilityNote",
          materialKey: "responsibilityMaterials",
        },
        {
          key: "corrective",
          title: "整改措施落实",
          statusLabel: "是否落实",
          statusKey: "correctiveMeasuresStatus",
          noteKey: "correctiveMeasuresNote",
          materialKey: "correctiveMeasuresMaterials",
        },
        {
          key: "education",
          title: "相关人员教育",
          statusLabel: "是否已教育",
          statusKey: "personnelEducationStatus",
          noteKey: "personnelEducationNote",
          materialKey: "personnelEducationMaterials",
        },
      ],
    };
  },
  methods: {
    async open(row) {
      this.visible = true;
      const data = await getById(row.id);
      this.form = { ...JSON.parse(JSON.stringify(defForm)), ...data };
    },
    cancel() {
      this.visible = false;
      this.form = JSON.parse(JSON.stringify(defForm));
    },
    async save() {
      this.loading = true;
      try {
        await updatePartial(this.form);
        this.$refs.uToast.show({ type: "success", message: "处理成功" });
        this.cancel();
        this.$emit("reload");
      } catch (e) {
        this.$refs.uToast.show({ type: "error", message: e.message });
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.process-popup {
  /deep/ .u-popup__content {
    border-radius: 32rpx 32rpx 0 0;
    overflow: hidden;
  }
}
.popup-content {
  height: 80vh;
  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;
  }
}
.popup-body {
  flex: 1;
  overflow-y: auto;
  padding: 24rpx;
}
.card-a {
  background: #fff;
  border-radius: 48rpx;
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.card-section {
  padding: 30rpx 32rpx;
  &:not(:last-child) {
    border-bottom: 2rpx solid #f0f2f5;
  }
}
.section-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #1f2a44;
  margin-bottom: 24rpx;
  padding-left: 16rpx;
  border-left: 6rpx solid #4caf50;
}
/deep/ .u-form-item {
  padding: 12rpx 0;
  .u-form-item__body__left__label {
    font-size: 26rpx !important;
    color: #6c7a91 !important;
  }
  .u-radio-group .u-radio {
    margin-right: 24rpx;
  }
}
.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>