kd-aiot-frontend-ehs/src/views/safetyTraining/offlineTrainingRecords/summary.vue

<template>
  <ele-modal
    :visible.sync="visible"
    title="培训总结"
    width="60vw"
    append-to-body
    :close-on-click-modal="false"
    :maxable="true"
    @close="cancel"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="130px"
      class="el-form-box"
      v-loading="loading"
    >
      <!-- 培训基本信息（只读，带自培训记录带出） -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="培训项目：">
            <el-input :value="info.trainingProject" disabled placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地点：">
            <el-input :value="info.location" disabled placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="培训讲师：">
            <el-input :value="info.trainingLecturer" disabled placeholder="-" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="讲师资质：">
            <el-input
              :value="info.lecturerQualification"
              disabled
              placeholder="-"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划人数：">
            <el-input :value="info.plannedCount" disabled placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实到人数：">
            <el-input
              :value="info.actualCount"
              disabled
              placeholder="请输入实到人数"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="培训时段：">
            <el-input :value="trainingPeriod" disabled placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="教学方式：">
            <el-input :value="info.teachingMethod" disabled placeholder="-" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="培训类别：" prop="trainingCategories">
            <el-checkbox-group v-model="form.trainingCategories">
              <el-checkbox
                v-for="item in trainingCategoryOptions"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="教材：" prop="teachingMaterial">
        <el-input
          v-model="form.teachingMaterial"
          type="textarea"
          :rows="2"
          maxlength="500"
          show-word-limit
          placeholder="请输入教材（最多500字）"
        />
      </el-form-item>
      <el-form-item label="评价形式：" prop="evaluationForm">
        <el-input
          v-model="form.evaluationForm"
          type="textarea"
          :rows="2"
          maxlength="500"
          show-word-limit
          placeholder="请输入评价形式（最多500字）"
        />
      </el-form-item>
      <el-form-item label="培训总结：" prop="trainingSummary">
        <el-input
          v-model="form.trainingSummary"
          type="textarea"
          :rows="4"
          maxlength="2000"
          show-word-limit
          placeholder="请输入培训总结（最多2000字）"
        />
      </el-form-item>
      <el-form-item label="效果追踪评价：" prop="trackingEvaluation">
        <el-input
          v-model="form.trackingEvaluation"
          type="textarea"
          :rows="4"
          maxlength="2000"
          show-word-limit
          placeholder="请输入培训效果追踪评价（最多2000字）"
        />
      </el-form-item>
      <el-form-item label="总结附件：" prop="summaryAttachments">
        <fileMain v-model="form.summaryAttachments" type="add" />
      </el-form-item>
    </el-form>

    <template v-slot:footer>
      <el-button type="primary" :loading="saving" @click="save()"
        >保存</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { getById, saveSummary } from '@/api/offlineTraining/index.js';
  import {
    TEACHING_METHOD_OPTIONS,
    SUMMARY_TRAINING_CATEGORY_OPTIONS,
    toValueArray,
    toValueString,
    toLabelString
  } from '../constants';

  const defForm = {
    trainingId: '',
    trainingCategories: [],
    teachingMaterial: '',
    evaluationForm: '',
    trainingSummary: '',
    trackingEvaluation: '',
    summaryAttachments: []
  };

  const defInfo = {
    trainingProject: '',
    location: '',
    trainingLecturer: '',
    lecturerQualification: '',
    plannedCount: '',
    actualCount: '',
    startTime: '',
    endTime: '',
    teachingMethod: ''
  };

  export default {
    data() {
      return {
        visible: false,
        loading: false,
        saving: false,
        info: JSON.parse(JSON.stringify(defInfo)),
        trainingCategoryOptions: SUMMARY_TRAINING_CATEGORY_OPTIONS,
        form: JSON.parse(JSON.stringify(defForm)),
        rules: {
          teachingMaterial: [
            { max: 500, message: '教材不能超过500字', trigger: 'blur' }
          ],
          evaluationForm: [
            { max: 500, message: '评价形式不能超过500字', trigger: 'blur' }
          ],
          trainingSummary: [
            { max: 2000, message: '培训总结不能超过2000字', trigger: 'blur' }
          ],
          trackingEvaluation: [
            {
              max: 2000,
              message: '培训效果追踪评价不能超过2000字',
              trigger: 'blur'
            }
          ]
        }
      };
    },
    computed: {
      // 培训时段：开始时间 ~ 结束时间
      trainingPeriod() {
        const { startTime, endTime } = this.info;
        if (startTime && endTime) {
          return `${startTime} ~ ${endTime}`;
        }
        return startTime || endTime || '';
      }
    },
    methods: {
      async open(row) {
        this.visible = true;
        this.loading = true;
        this.info = {
          ...JSON.parse(JSON.stringify(defInfo)),
          trainingProject: (row && row.trainingProject) || ''
        };
        this.form = { ...JSON.parse(JSON.stringify(defForm)), trainingId: row.id };
        try {
          const detail = await getById(row.id);
          const summary = (detail && detail.summary) || {};
          this.info = this.mapDetailToInfo(detail);
          this.form = {
            trainingId: row.id,
            trainingCategories: toValueArray(summary.trainingCategories),
            teachingMaterial: summary.teachingMaterial || '',
            evaluationForm: summary.evaluationForm || '',
            trainingSummary: summary.trainingSummary || '',
            trackingEvaluation: summary.trackingEvaluation || '',
            summaryAttachments: toValueArray(summary.summaryAttachments)
          };
        } catch (error) {
          this.$message.error(error.message || '获取培训总结失败');
        } finally {
          this.loading = false;
          this.$nextTick(() => {
            this.$refs.form && this.$refs.form.clearValidate();
          });
        }
      },
      // 培训记录基本信息（只读展示）
      mapDetailToInfo(detail) {
        const data = detail || {};
        return {
          trainingProject: data.trainingProject || '',
          location: data.location || '',
          trainingLecturer: data.trainingLecturer || '',
          lecturerQualification: data.lecturerQualification || '',
          plannedCount:
            data.plannedCount === undefined || data.plannedCount === null
              ? ''
              : data.plannedCount,
          actualCount:
            data.actualCount === undefined || data.actualCount === null
              ? ''
              : data.actualCount,
          startTime: data.startTime || '',
          endTime: data.endTime || '',
          teachingMethod: toLabelString(
            TEACHING_METHOD_OPTIONS,
            data.teachingMethod
          )
        };
      },
      cancel() {
        this.visible = false;
        this.info = JSON.parse(JSON.stringify(defInfo));
        this.form = JSON.parse(JSON.stringify(defForm));
        this.$refs.form && this.$refs.form.clearValidate();
      },
      save() {
        this.$refs.form.validate(async (valid) => {
          if (!valid) return;
          this.saving = true;
          try {
            await saveSummary({
              trainingId: this.form.trainingId,
              trainingCategories: toValueString(this.form.trainingCategories),
              teachingMaterial: this.form.teachingMaterial,
              evaluationForm: this.form.evaluationForm,
              trainingSummary: this.form.trainingSummary,
              trackingEvaluation: this.form.trackingEvaluation,
              summaryAttachments: (this.form.summaryAttachments || []).join(',')
            });
            this.$message.success('培训总结保存成功');
            this.cancel();
            this.$emit('reload');
          } catch (error) {
            this.$message.error(error.message || '保存失败');
          } finally {
            this.saving = false;
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-form-box {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 10px;
  }
</style>