feat(teachingDemo): 新增工艺路线与BOM教学演示模块

云

3 天以前 47bae1f938f915206e3934ea960aff975e5738c9

 src/views/safeProduction/safetyTrainingAssessment/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1299 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">培训日期：</span>
        <el-date-picker v-model="searchForm.trainingDate"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        @change="handleQuery"
                        type="date"
                        placeholder="请选择"
                        clearable />
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">
          æœç´¢
        </el-button>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">新增培训</el-button>
        <el-button type="primary"
                   @click="opendetail">培训记录</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div class="table_list">
      <el-tabs v-model="searchForm.state"
               @tab-click="tabhandleQuery">
        <el-tab-pane label="未开始"
                     :name="0"></el-tab-pane>
        <el-tab-pane label="进行中"
                     :name="1"></el-tab-pane>
        <el-tab-pane label="已结束"
                     :name="2"></el-tab-pane>
      </el-tabs>
      <!-- state   çŠ¶æ€(0：未开始1：进行中；2：已结束)    -->
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :total="page.total"
                :rowClassName="getRowClass"></PIMTable>
    </div>
    <!-- æ–°å¢ž/编辑知识弹窗 -->
    <el-dialog v-model="dialogVisible"
               :title="dialogTitle"
               width="800px"
               :close-on-click-modal="false">
      <el-form ref="formRef"
               :model="form"
               :rules="rules"
               label-position="top"
               label-width="150px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="培训日期"
                          prop="trainingDate">
              <el-date-picker style="width: 100%"
                              v-model="form.trainingDate"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程编号"
                          prop="courseCode">
              <el-input v-model="form.courseCode"
                        disabled
                        placeholder="保存后自动生成" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建时间"
                          prop="createTime">
              <el-date-picker style="width: 100%"
                              v-model="formCreateTimeDate"
                              value-format="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              type="date"
                              placeholder="请选择"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间"
                          prop="openingTime">
              <el-time-picker v-model="form.openingTime"
                              placeholder="请选择"
                              style="width: 100%"
                              value-format="HH:mm:ss"
                              format="HH:mm:ss"
                              clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间"
                          prop="endTime">
              <el-time-picker v-model="form.endTime"
                              placeholder="请选择"
                              style="width: 100%"
                              value-format="HH:mm:ss"
                              format="HH:mm:ss"
                              clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="培训目标"
                          prop="trainingObjectives">
              <el-input v-model="form.trainingObjectives"
                        placeholder="请输入培训目标" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参加对象"
                          prop="participants">
              <el-input v-model="form.participants"
                        placeholder="请输入参加对象" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="培训内容"
                          prop="trainingContent">
              <el-input v-model="form.trainingContent"
                        placeholder="请输入培训内容" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训讲师"
                          prop="trainingLecturer">
              <el-input v-model="form.trainingLecturer"
                        placeholder="请输入培训讲师" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="课程学分"
                          prop="projectCredits">
              <el-input v-model="form.projectCredits"
                        type="number"
                        min="0"
                        placeholder="请输入课程学分" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训方式"
                          prop="trainingMode">
              <el-select v-model="form.trainingMode"
                         placeholder="请选择培训方式"
                         clearable>
                <el-option v-for="item in trainingModeOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="培训地点"
                          prop="placeTraining">
              <el-input v-model="form.placeTraining"
                        placeholder="请输入培训地点" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课时"
                          prop="classHour">
              <el-input v-model="form.classHour"
                        type="number"
                        min="0"
                        placeholder="请输入课时" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- æŸ¥çœ‹çŸ¥è¯†è¯¦æƒ…弹窗 -->
    <el-dialog v-model="viewDialogVisible"
               title="结果明细"
               width="900px"
               :close-on-click-modal="false">
      <div class="knowledge-detail">
        <div class="classtitle">课程详情</div>
        <el-descriptions size="mini"
                         border
                         :column="3">
          <el-descriptions-item label="课程编号:">{{ currentKnowledge.courseCode }}</el-descriptions-item>
          <el-descriptions-item label="培训内容:">{{ currentKnowledge.trainingContent }}</el-descriptions-item>
          <el-descriptions-item label="状态:">
            <el-tag :type="currentKnowledge.status === 0 ? 'success' : (currentKnowledge.status === 1 ? 'success' : 'info')">
              {{ currentKnowledge.status === 0 ? '未开始' : (currentKnowledge.status === 1 ? '进行中' : '已结束') }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="培训讲师:">
            {{ currentKnowledge.trainingLecturer }}
          </el-descriptions-item>
          <el-descriptions-item label="培训开始时间:">
            {{ currentKnowledge.trainingDate + ' ' + currentKnowledge.openingTime }}
          </el-descriptions-item>
          <el-descriptions-item label="培训结束时间:">
            {{ currentKnowledge.trainingDate + ' ' + currentKnowledge.endTime }}
          </el-descriptions-item>
          <el-descriptions-item label="培训目标:">
            {{ currentKnowledge.trainingObjectives }}
          </el-descriptions-item>
          <el-descriptions-item label="参加对象:">
            {{ currentKnowledge.participants }}
          </el-descriptions-item>
          <el-descriptions-item label="培训方式:">
            <el-tag type="primary">
              {{ getTrainingModeLabel(currentKnowledge.trainingMode) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="培训地点:">
            {{ currentKnowledge.placeTraining }}
          </el-descriptions-item>
          <el-descriptions-item label="课时:">
            {{ currentKnowledge.classHour }}
          </el-descriptions-item>
          <el-descriptions-item label="课程学分:">
            {{ currentKnowledge.projectCredits }}
          </el-descriptions-item>
          <el-descriptions-item label="报名人数:">
            {{ currentKnowledge.nums }}
          </el-descriptions-item>
          <el-descriptions-item label="附件列表:">
            <el-button type="primary"
                       size="small"
                       @click="openFileDialog(endform)">附件列表</el-button>
          </el-descriptions-item>
        </el-descriptions>
        <!-- <el-divider style="margin: 20px 0;" /> -->
        <div class="classtitle"
             style="margin-top: 40px;margin-bottom: 30px;">课程评价</div>
        <el-form ref="formRef"
                 :model="form"
                 :rules="rules"
                 label-position="top"
                 label-width="150px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="评价人:"
                            prop="courseCode">
                <el-input v-model="endform.assessmentUserName"
                          disabled
                          placeholder="请选择评价人" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评价时间:"
                            prop="trainingDate">
                <el-date-picker style="width: 100%"
                                disabled
                                v-model="endform.assessmentDate"
                                value-format="YYYY-MM-DD"
                                format="YYYY-MM-DD"
                                type="date"
                                placeholder="请选择"
                                clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="考核方式:"
                            prop="assessmentMethod">
                <el-input v-model="endform.assessmentMethod"
                          placeholder="请选择考核方式" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="本次课程综合评价:"
                            prop="comprehensiveAssessment">
                <el-input v-model="endform.comprehensiveAssessment"
                          placeholder="请输入本次课程综合评价" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="培训摘要:"
                        prop="trainingAbstract">
            <el-input v-model="endform.trainingAbstract"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入培训摘要" />
          </el-form-item>
          <!-- <el-row :gutter="30">
            <el-col :span="24">
              <el-form-item label="附件材料："
                            prop="remark">
                <el-upload v-model:file-list="fileList"
                           :action="upload.url"
                           multiple
                           ref="fileUpload"
                           auto-upload
                           :headers="upload.headers"
                           :before-upload="handleBeforeUpload"
                           :on-error="handleUploadError"
                           :on-success="handleUploadSuccess"
                           :on-remove="handleRemove">
                  <el-button type="primary"
                             v-if="operationType !== 'view'">上传</el-button>
                  <template #tip
                            v-if="operationType !== 'view'">
                    <div class="el-upload__tip">
                      æ–‡ä»¶æ ¼å¼æ”¯æŒ
                      doc，docx，xls，xlsx，ppt，pptx，pdf，txt，xml，jpg，jpeg，png，gif，bmp，rar，zip，7z
                    </div>
                  </template>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>
        <div class="classtitle"
             style="margin-top: 40px;">考核列表</div>
        <el-table style="margin-top: 20px;"
                  :data="endform.safeTrainingDetailsDtoList"
                  border
                  fit
                  stripe
                  highlight-current-row>
          <el-table-column prop="nickName"
                           label="姓名" />
          <el-table-column prop="phonenumber"
                           label="电话号码" />
          <el-table-column prop="examinationResults"
                           label="考核结果">
            <template #default="scope">
              <el-select v-model="scope.row.examinationResults"
                         placeholder="请选择考核结果">
                <el-option label="合格"
                           value="合格" />
                <el-option label="不合格"
                           value="不合格" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary"
                     @click="submitForm2">提交</el-button>
          <el-button @click="viewDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <!--  todo é™„件预览相关 -->
    <FileList v-if="fileDialogVisible"  v-model:visible="fileDialogVisible" record-type="safe_training" :record-id="recordId"  />
  </div>
</template>

<script setup>
  import { Search } from "@element-plus/icons-vue";
  import {
    onMounted,
    ref,
    reactive,
    toRefs,
    getCurrentInstance,
    computed,
  } from "vue";
  import request from "@/utils/request";
  import { getToken } from "@/utils/auth";
  import { ElMessage, ElMessageBox } from "element-plus";
  import PIMTable from "@/components/PIMTable/PIMTable.vue";
  import { userListNoPage } from "@/api/system/user.js";
  import {
    safeTrainingListPage,
    safeTrainingAdd,
    safeTrainingExport,
    safeTrainingDel,
    safeTrainingFileListPage,
    safeTrainingFileAdd,
    safeTrainingFileDel,
    safeTrainingSign,
    safeTrainingGet,
    safeTrainingSave,
  } from "@/api/safeProduction/safetyTrainingAssessment.js";
  import useUserStore from "@/store/modules/user";
  import dayjs from "dayjs";
  const userStore = useUserStore();
  const FileList = defineAsyncComponent(() => import("@/components/Dialog/FileList.vue"));

  // è¡¨å•éªŒè¯è§„则
  const rules = {
    trainingDate: [
      { required: true, message: "请选择培训日期", trigger: "change" },
    ],
    openingTime: [
      { required: true, message: "请选择开始时间", trigger: "change" },
    ],
    endTime: [{ required: true, message: "请选择结束时间", trigger: "change" }],
    trainingContent: [
      { required: true, message: "请输入培训内容", trigger: "blur" },
    ],
    trainingLecturer: [
      { required: true, message: "请输入培训讲师", trigger: "blur" },
    ],
    classHour: [{ required: true, message: "请输入课时", trigger: "blur" }],
  };
  const upload = reactive({
    // ä¸Šä¼ çš„地址
    url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
    // è®¾ç½®ä¸Šä¼ çš„请求头部
    headers: { Authorization: "Bearer " + getToken() },
  });
  // å“åº”式数据
  const data = reactive({
    searchForm: {
      trainingDate: "",
      state: 0,
    },
    tableLoading: false,
    page: {
      current: 1,
      size: 20,
      total: 0,
    },
    tableData: [],
    selectedIds: [],
    form: {
      courseCode: "", // è¯¾ç¨‹ç¼–号
      trainingDate: "", // åŸ¹è®­æ—¥æœŸ
      openingTime: "", // å¼€å§‹æ—¶é—´
      endTime: "", // ç»“束时间
      trainingObjectives: "", // åŸ¹è®­ç›®æ ‡
      participants: "", // å‚加对象
      trainingContent: "", // åŸ¹è®­å†…容
      trainingLecturer: "", // åŸ¹è®­è®²å¸ˆ
      projectCredits: "", // é¡¹ç›®å­¦åˆ†
      trainingMode: "", // åŸ¹è®­æ–¹å¼
      placeTraining: "", // åŸ¹è®­åœ°ç‚¹
      classHour: "", // è¯¾æ—¶
      createTime: "", // åˆ›å»ºæ—¶é—´
    },
    dialogVisible: false,
    dialogTitle: "",
    dialogType: "add",
    viewDialogVisible: false,
    currentKnowledge: {},
  });
  const formCreateTimeDate = computed({
    get: () => (form.value.createTime ? String(form.value.createTime).split(" ")[0] : ""),
    set: (value) => {
      form.value.createTime = value ? `${value} ${dayjs().format("HH:mm:ss")}` : "";
    },
  });

  const {
    searchForm,
    tableLoading,
    page,
    tableData,
    selectedIds,
    form,
    dialogVisible,
    dialogTitle,
    dialogType,
    viewDialogVisible,
    currentKnowledge,
  } = toRefs(data);
  const { proxy } = getCurrentInstance();
  const { safe_training_methods } = proxy.useDict("safe_training_methods");
  const trainingModeOptions = computed(() => safe_training_methods?.value || []);
  const getTrainingModeLabel = val => {
    const item = trainingModeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item ? item.label : val;
  };
  // åˆ‡æ¢tab查询
  const tabhandleQuery = val => {
    searchForm.value.state = val.paneName;
    console.log(searchForm.value.state, "searchForm.value.state");

    handleQuery();
  };
  // è¡¨å•å¼•ç”¨
  const formRef = ref();
  const riskLevelOptions = ref([
    { value: "低风险", label: "低风险" },
    { value: "一般风险", label: "一般风险" },
    { value: "较大风险", label: "较大风险" },
    { value: "重大风险", label: "重大风险" },
  ]);

  const fileList = ref([]);

  // è¡¨æ ¼åˆ—配置
  const tableColumn = ref([
    {
      label: "课程编号",
      prop: "courseCode",
      width: 150,
      showOverflowTooltip: true,
    },
    {
      label: "培训日期",
      prop: "trainingDate",
      width: 120,

      showOverflowTooltip: true,
    },
    {
      label: "开始时间",
      prop: "openingTime",
      width: 120,
      showOverflowTooltip: true,
    },
    {
      label: "结束时间",
      prop: "endTime",
      width: 120,
      showOverflowTooltip: true,
    },
    {
      label: "培训目标",
      prop: "trainingObjectives",
      width: 200,
      showOverflowTooltip: true,
    },
    {
      label: "参加对象",
      prop: "participants",
      width: 200,
      showOverflowTooltip: true,
    },
    {
      label: "培训内容",
      prop: "trainingContent",
      width: 200,
      showOverflowTooltip: true,
    },
    {
      label: "培训讲师",
      prop: "trainingLecturer",
      width: 200,
      showOverflowTooltip: true,
    },
    {
      label: "项目学分",
      prop: "projectCredits",
      width: 120,
      showOverflowTooltip: true,
    },
    {
      label: "培训方式",
      prop: "trainingMode",
      width: 120,
      showOverflowTooltip: true,
      formatData: params => {
        return getTrainingModeLabel(params);
      },
    },
    {
      label: "培训地点",
      prop: "placeTraining",
      width: 200,
      showOverflowTooltip: true,
    },
    {
      label: "课时",
      prop: "classHour",
      width: 120,
      showOverflowTooltip: true,
    },
    {
      label: "报名人数",
      prop: "nums",
      width: 120,
      showOverflowTooltip: true,
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      fixed: "right",
      width: 300,
      operation: [
        {
          name: "签到",
          type: "text",
          disabled: row => row.state !== 1,
          clickFun: row => {
            signIn(row);
          },
        },
        {
          name: "编辑",
          type: "text",
          disabled: row => row.state !== 0,
          clickFun: row => {
            openForm("edit", row);
          },
        },
        {
          name: "导出",
          type: "text",
          clickFun: row => {
            exportKnowledge(row);
          },
          color: "#C49000",
        },
        {
          name: "附件",
          type: "text",
          clickFun: row => {
            openFileDialog(row);
          },
          color: "#007AFF",
        },

        {
          name: "结果明细",
          type: "text",
          disabled: row => row.state == 0,
          clickFun: row => {
            viewResultDetail(row);
          },
        },
        // {
        //   name: "查看",
        //   type: "text",
        //   clickFun: row => {
        //     viewKnowledge(row);
        //   },
        // },
      ],
    },
  ]);
  const userList = ref([]);
  // ç”Ÿå‘½å‘¨æœŸ
  onMounted(() => {
    getCurrentFactoryName();
    getList();
    startAutoRefresh();
    userListNoPage().then(res => {
      userList.value = res.data;
    });
  });
  const endform = ref({
    assessmentUserId: "", //评价人
    assessmentUserName: "", //评价人姓名
    assessmentMethod: "", //考核方式
    assessmentDate: "", //评价时间
    comprehensiveAssessment: "", //综合评价
    trainingAbstract: "", //培训摘要
    safeTrainingFileList: [], //培训附件
    safeTrainingDetailsDtoList: [], //考核结果详情
  });
  const operationType = ref("edit");
  const viewResultDetail = row => {
    // fileList.value = [];
    operationType.value = "edit";
    safeTrainingGet({ id: row.id }).then(res => {
      if (res.code === 200) {
        console.log(res.data, "res.data");
        currentKnowledge.value = JSON.parse(JSON.stringify(res.data));
        currentKnowledge.value.nums = row.nums;
        viewDialogVisible.value = true;
        endform.value = { ...res.data };
        endform.value.assessmentUserName = endform.value.assessmentUserName
          ? endform.value.assessmentUserName
          : currentUserName.value;
        endform.value.assessmentUserId = endform.value.assessmentUserId
          ? endform.value.assessmentUserId
          : currentUserId.value;
        endform.value.assessmentDate = dayjs().format("YYYY-MM-DD");
      } else {
        proxy.$modal.msgError(res.msg || "查询详情失败");
      }
    });
  };

  // ä¸Šä¼ å‰æ ¡æ£€
  function handleBeforeUpload(file) {
    proxy.$modal.loading("正在上传文件，请稍候...");
    return true;
  }
  // ä¸Šä¼ å¤±è´¥
  function handleUploadError(err) {
    proxy.$modal.msgError("上传文件失败");
    proxy.$modal.closeLoading();
  }
  // ä¸Šä¼ æˆåŠŸå›žè°ƒ
  function handleUploadSuccess(res, file, uploadFiles) {
    proxy.$modal.closeLoading();
    if (res.code === 200) {
      // ç¡®ä¿ tempFileIds å­˜åœ¨ä¸”为数组
      if (!endform.value.safeTrainingFileList) {
        endform.value.safeTrainingFileList = [];
      }
      endform.value.safeTrainingFileList.push({
        id: res.data.tempId,
        fileName: res.data.originalName,
        url: res.data.tempPath,
        safeTrainingId: currentKnowledge.value.id,
      });
      proxy.$modal.msgSuccess("上传成功");
    } else {
      proxy.$modal.msgError(res.msg);
      proxy.$refs.fileUpload.handleRemove(file);
    }
  }
  // ç§»é™¤æ–‡ä»¶
  function handleRemove(file) {
    if (operationType.value === "edit") {
      let index = endform.value.safeTrainingFileList.findIndex(
        item => item.fileName === file.name
      );
      if (index !== -1) {
        endform.value.safeTrainingFileList.splice(index, 1);
      }
    }
  }
  const submitForm2 = () => {
    endform.value.safeTrainingDetailsDtoList.forEach((item, index) => {
      if (!item.examinationResults) {
        proxy.$modal.msgError(`请选择${item.nickName}的考核结果`);
        return;
      }
    });
    console.log(endform.value, "endform.value");
    proxy.$modal.loading("正在提交，请稍候...");
    safeTrainingSave(endform.value).then(res => {
      proxy.$modal.closeLoading();
      if (res.code === 200) {
        proxy.$modal.msgSuccess("提交成功");
        getList();
        viewDialogVisible.value = false;
      } else {
        proxy.$modal.msgError(res.msg || "提交失败");
      }
    });
  };
  const opendetail = row => {
    proxy.$router.push({
      path: "/safeProduction/safetyTrainingAssessmentDetail",
    });
  };

  const signIn = row => {
    ElMessageBox.confirm("确认签到吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      safeTrainingSign({
        safeTrainingId: row.id,
        userId: currentUserId.value,
      }).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("签到成功");
          getList();
        } else {
          proxy.$modal.msgError(res.msg || "签到失败");
        }
      });
    });
  };

  // å¤„理用户选择变化
  const handleUserChange = userId => {
    const selectedUser = userList.value.find(user => user.userId === userId);
    if (selectedUser) {
      form.value.principalUser = selectedUser.nickName;
      form.value.principalMobile = selectedUser.phonenumber;
    }
  };

  // æ‰“开附件弹窗
  const recordId =ref(0)
  const fileDialogVisible = ref(false)

  // æ‰“开附件弹框
  const openFileDialog = async (row) => {
    recordId.value = row.id
    fileDialogVisible.value = true
  }
  
  // ä¸Šä¼ é™„件
  const handleUpload = async () => {
    if (!currentFileRow.value) {
      proxy.$modal.msgWarning("请先选择数据");
      return null;
    }

    return new Promise(resolve => {
      // åˆ›å»ºä¸€ä¸ªéšè—çš„文件输入元素
      const input = document.createElement("input");
      input.type = "file";
      input.style.display = "none";
      input.onchange = async e => {
        const file = e.target.files[0];
        if (!file) {
          resolve(null);
          return;
        }

        try {
          // ä½¿ç”¨ FormData ä¸Šä¼ æ–‡ä»¶
          const formData = new FormData();
          formData.append("file", file);

          const uploadRes = await request({
            url: "/file/upload",
            method: "post",
            data: formData,
            headers: {
              "Content-Type": "multipart/form-data",
              Authorization: `Bearer ${getToken()}`,
            },
          });

          if (uploadRes.code === 200) {
            // ä¿å­˜é™„件信息
            const fileData = {
              safeTrainingId: currentFileRow.value.id,
              name: uploadRes.data.originalName || file.name,
              url: uploadRes.data.tempPath || uploadRes.data.url,
            };

            const saveRes = await safeTrainingFileAdd(fileData);
            if (saveRes.code === 200) {
              proxy.$modal.msgSuccess("文件上传成功");
              // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
              const listRes = await safeTrainingFileListPage({
                safeTrainingId: currentFileRow.value.id,
                current: filePagination.value.current,
                size: filePagination.value.size,
              });
              if (listRes.code === 200 && fileListRef.value) {
                const fileList = (listRes.data?.records || []).map(item => ({
                  name: item.name,
                  url: item.url,
                  id: item.id,
                  ...item,
                }));
                fileListRef.value.setList(fileList);
                filePagination.value.total = listRes.data?.total || 0;
              }
              // è¿”回新文件信息
              resolve({
                name: fileData.name,
                url: fileData.url,
                id: saveRes.data?.id,
              });
            } else {
              proxy.$modal.msgError(saveRes.msg || "文件保存失败");
              resolve(null);
            }
          } else {
            proxy.$modal.msgError(uploadRes.msg || "文件上传失败");
            resolve(null);
          }
        } catch (error) {
          proxy.$modal.msgError("文件上传失败");
          resolve(null);
        } finally {
          document.body.removeChild(input);
        }
      };

      document.body.appendChild(input);
      input.click();
    });
  };
  const filePagination = ref({
    current: 1,
    size: 10,
    total: 0,
  });
  const paginationSearch = async (page, size) => {
    filePagination.value.current = page;
    filePagination.value.size = size;
    const listRes = await safeTrainingFileListPage({
      safeTrainingId: currentFileRow.value.id,
      current: filePagination.value.current,
      size: filePagination.value.size,
    });
    if (listRes.code === 200) {
      const fileList = (listRes.data?.records || []).map(item => ({
        name: item.name,
        url: item.url,
        id: item.id,
        ...item,
      }));

      fileListRef.value.setList(fileList);
      filePagination.value.total = listRes.data?.total || 0;
    }
  };
  // åˆ é™¤é™„件
  const handleFileDelete = async row => {
    try {
      const res = await safeTrainingFileDel([row.id]);
      if (res.code === 200) {
        proxy.$modal.msgSuccess("删除成功");
        // é‡æ–°åŠ è½½æ–‡ä»¶åˆ—表
        if (currentFileRow.value && fileListRef.value) {
          const listRes = await safeTrainingFileListPage({
            safeTrainingId: currentFileRow.value.id,
            current: filePagination.value.current,
            size: filePagination.value.size,
          });
          if (listRes.code === 200) {
            const fileList = (listRes.data?.records || []).map(item => ({
              name: item.name,
              url: item.url,
              id: item.id,
              ...item,
            }));
            fileListRef.value.setList(fileList);
            filePagination.value.total = listRes.data?.total || 0;
          }
        }
        return true; // è¿”回 true è¡¨ç¤ºåˆ é™¤æˆåŠŸï¼Œç»„件会更新列表
      } else {
        proxy.$modal.msgError(res.msg || "删除失败");
        return false;
      }
    } catch (error) {
      proxy.$modal.msgError("删除失败");
      return false;
    }
  };

  // å¼€å§‹è‡ªåŠ¨åˆ·æ–°
  const startAutoRefresh = () => {
    setInterval(() => {
      getList();
    }, 600000); // 10分钟刷新一次 (10 * 60 * 1000 = 600000ms)
  };

  // æŸ¥è¯¢æ•°æ®
  const handleQuery = () => {
    page.value.current = 1;
    getList();
  };
  const exportKnowledge = row => {
    safeTrainingExport(row)
      .then(res => {
        // åˆ›å»ºBlob对象
        const blob = new Blob([res], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        // åˆ›å»ºä¸‹è½½é“¾æŽ¥
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = `培训记录_${row.courseCode}.docx`;

        // æ¨¡æ‹Ÿç‚¹å‡»ä¸‹è½½
        document.body.appendChild(link);
        link.click();

        // æ¸…理临时对象
        setTimeout(() => {
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        }, 100);

        ElMessage.success("导出成功");
      })
      .catch(err => {
        console.error("导出失败:", err);
        ElMessage.error("导出失败，请重试");
      });
  };
  const getList = () => {
    tableLoading.value = true;
    safeTrainingListPage({ ...page.value, ...searchForm.value })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.value.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };

  // åˆ†é¡µå¤„理
  const pagination = obj => {
    page.value.current = obj.page;
    page.value.size = obj.limit;
    getList();
  };

  // é€‰æ‹©å˜åŒ–处理
  const handleSelectionChange = selection => {
    selectedIds.value = selection.map(item => item.id);
  };
  const currentUserId = ref("");
  const currentUserName = ref("");
  const getCurrentFactoryName = async () => {
    let res = await userStore.getInfo();
    currentUserId.value = res.user.userId;
    currentUserName.value = res.user.nickName;
  };

  // æ‰“开表单
  const openForm = (type, row = null) => {
    dialogType.value = type;
    if (type === "add") {
      dialogTitle.value = "新增培训";
      // é‡ç½®è¡¨å•
      Object.assign(form.value, {
        courseCode: "", // è¯¾ç¨‹ç¼–号
        trainingDate: "", // åŸ¹è®­æ—¥æœŸ
        openingTime: "", // å¼€å§‹æ—¶é—´
        endTime: "", // ç»“束时间
        trainingObjectives: "", // åŸ¹è®­ç›®æ ‡
        participants: "", // å‚加对象
        trainingContent: "", // åŸ¹è®­å†…容
        trainingLecturer: "", // åŸ¹è®­è®²å¸ˆ
        projectCredits: "", // é¡¹ç›®å­¦åˆ†
        trainingMode: "", // åŸ¹è®­æ–¹å¼
        placeTraining: "", // åŸ¹è®­åœ°ç‚¹
        classHour: "", // è¯¾æ—¶
        createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // åˆ›å»ºæ—¶é—´
      });
    } else if (type === "edit" && row) {
      dialogTitle.value = "编辑培训";
      Object.assign(form.value, {
        id: row.id,
        courseCode: row.courseCode, // è¯¾ç¨‹ç¼–号
        trainingDate: row.trainingDate, // åŸ¹è®­æ—¥æœŸ
        openingTime: row.openingTime, // å¼€å§‹æ—¶é—´
        endTime: row.endTime, // ç»“束时间
        trainingObjectives: row.trainingObjectives, // åŸ¹è®­ç›®æ ‡
        participants: row.participants, // å‚加对象
        trainingContent: row.trainingContent, // åŸ¹è®­å†…容
        trainingLecturer: row.trainingLecturer, // åŸ¹è®­è®²å¸ˆ
        projectCredits: row.projectCredits, // é¡¹ç›®å­¦åˆ†
        trainingMode: row.trainingMode, // åŸ¹è®­æ–¹å¼
        placeTraining: row.placeTraining, // åŸ¹è®­åœ°ç‚¹
        classHour: row.classHour, // è¯¾æ—¶
        createTime: row.createTime || "", // åˆ›å»ºæ—¶é—´
      });
    }
    dialogVisible.value = true;
  };

  // èŽ·å–类型标签类型
  const getTypeTagType = type => {
    const typeMap = {
      è¾ƒå¤§é£Žé™©: "warning",
      ä½Žé£Žé™©: "info",
      ä¸€èˆ¬é£Žé™©: "info",
      é‡å¤§é£Žé™©: "danger",
    };
    return typeMap[type] || "info";
  };

  // èŽ·å–效率标签类型
  const getEfficiencyTagType = efficiency => {
    const typeMap = {
      high: "success",
      medium: "warning",
      low: "info",
    };
    return typeMap[efficiency] || "info";
  };

  // èŽ·å–效率标签文本
  const getEfficiencyLabel = efficiency => {
    const efficiencyMap = {
      high: "显著提升",
      medium: "一般提升",
      low: "轻微提升",
    };
    return efficiencyMap[efficiency] || efficiency;
  };

  // èŽ·å–效率提升百分比
  const getEfficiencyScore = efficiency => {
    const scoreMap = {
      high: 40,
      medium: 25,
      low: 15,
    };
    return scoreMap[efficiency] || 0;
  };

  // èŽ·å–平均节省时间
  const getTimeSaved = efficiency => {
    const timeMap = {
      high: "2-3天",
      medium: "1-2天",
      low: "0.5-1天",
    };
    return timeMap[efficiency] || "未知";
  };

  /**
   * èŽ·å–行类名，用于判断风险等级是否为重大风险
   * @param row è¡Œæ•°æ®
   * @returns ç±»å
   */
  const getRowClass = ({ row }) => {
    if (row.riskLevel === "重大风险") {
      return "danger-row";
    }
    return "";
  };

  // æäº¤åŸ¹è®­è¡¨å•
  const submitForm = async () => {
    try {
      await formRef.value.validate();
      if (dialogType.value === "add") {
        // æ–°å¢žåŸ¹è®­å°è´¦
        safeTrainingAdd({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("添加成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      } else {
        // æ›´æ–°åŸ¹è®­å°è´¦
        safeTrainingAdd({ ...form.value })
          .then(res => {
            if (res.code == 200) {
              ElMessage.success("更新成功");
              dialogVisible.value = false;
              getList();
            }
          })
          .catch(err => {
            ElMessage.error(err.msg);
          });
      }
    } catch (error) {
      console.error("表单验证失败:", error);
    }
  };

  // åˆ é™¤åŸ¹è®­
  const handleDelete = () => {
    if (selectedIds.value.length === 0) {
      ElMessage.warning("请选择要删除的培训");
      return;
    }

    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // console.log(selectedIds.value);
        safeTrainingDel(selectedIds.value).then(res => {
          if (res.code == 200) {
            ElMessage.success("删除成功");
            selectedIds.value = [];
            getList();
          }
        });
      })
      .catch(() => {
        // ç”¨æˆ·å–消
      });
  };

  const getKnowledgeTypeTagType = val => {
    const item = knowledgeTypeOptions.value.find(
      i => String(i.value) === String(val)
    );
    return item?.elTagType || "info";
  };
  const handleExport = () => {
    proxy.download(
      "/knowledgeBase/export",
      { ...searchForm.value },
      "知识库.xlsx"
    );
  };
</script>

<style scoped>
  .auto-refresh-info {
    margin-bottom: 15px;
  }

  .auto-refresh-info .el-alert {
    border-radius: 8px;
  }

  .dialog-footer {
    text-align: right;
  }

  .knowledge-detail {
    padding: 20px 0;
  }

  .detail-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }

  .detail-section {
    margin-top: 24px;
  }

  .detail-section h4 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    border-left: 4px solid #409eff;
    padding-left: 12px;
  }

  .detail-content {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 6px;
    line-height: 1.6;
    color: #606266;
    white-space: pre-wrap;
  }

  .key-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .usage-stats {
    margin-top: 16px;
  }

  .stat-item {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
  }

  .stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 8px;
  }

  .stat-label {
    font-size: 14px;
    color: #909399;
  }

  :deep(.danger-row td) {
    color: #e95a66 !important;
  }
  .classtitle {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    border-left: 4px solid #409eff;
    padding-left: 12px;
    margin-bottom: 12px;
  }
</style>