sl-sfy-safety/src/views/production-safety/productionSafetySystem/collegeFileManagement/components/collegeFileManagementDetail.vue

<template>
  <main class="safety-platform-container__main">
    <BasicForm
      ref="basicFormRef"
      :formData="ruleFormData"
      :formRules="isViewMode ? undefined : formRules"
      :formConfig="computedFormConfig"
    >
      <template #fileFormat>
        <el-radio-group v-model="ruleFormData.fileFormat" :disabled="isViewMode">
          <el-radio value="PDF">PDF</el-radio>
          <el-radio value="WORD">WORD</el-radio>
        </el-radio-group>
      </template>
      <template #fileUrl>
        <UploadFiles
          label="上传文件"
          :maxCount="1"
          :fileList="uploadFileList"
          @uploadSuccess="handleUploadSuccess"
        />
      </template>
      <template #content>
        <div class="editor-container">
          <Toolbar 
            style="border-bottom: 1px solid #dcdfe6" 
            :editor="editorRef" 
          />
          <Editor
            style="height: 400px; overflow-y: auto"
            v-model="ruleFormData.content"
            mode="default"
            :defaultConfig="editorConfig"
            @on-created="handleEditorCreated"
            @on-change="handleEditorChange"
          />
        </div>
      </template>
      <template #status>
        <el-radio-group v-model="ruleFormData.status" :disabled="isViewMode">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="0">禁用</el-radio>
        </el-radio-group>
      </template>
    </BasicForm>
  </main>
  <footer class="safety-platform-container__footer">
    <el-button @click="router.back()">返回</el-button>
    <el-button v-if="!isViewMode" type="primary" @click="handleSubmit">
      {{ isCreateMode ? '提交' : '保存' }}
    </el-button>
  </footer>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref, shallowRef, onBeforeUnmount } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import BasicForm from '@/components/BasicForm.vue';
  import UploadFiles from '@/components/UploadFiles/UploadFiles.vue';
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import '@wangeditor/editor/dist/css/style.css';
  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
  import { ACADEMY_FILE_FORM_CONFIG, ACADEMY_FILE_FORM_DATA, ACADEMY_FILE_FORM_RULES } from '../configs/form';
  import {
    queryAcademyFileById,
    saveAcademyFile,
    updateAcademyFile,
    type ProductionSafetyFile,
  } from '@/api/production-safety-system';
  import type { FileItem } from '@/components/UploadFiles/types';

  const router = useRouter();
  const route = useRoute();

  const operate = computed(() => (route.query.operate as string) || 'college-file-create');
  const currentId = computed(() => Number(route.query.id));

  const isCreateMode = computed(() => operate.value === 'college-file-create');
  const isEditMode = computed(() => operate.value === 'college-file-edit');
  const isViewMode = computed(() => operate.value === 'college-file-view');

  const { ruleFormData, formRules, ruleFormConfig, cloneRuleFormData, beforeRouteLeave } =
    useFormConfigHook(ACADEMY_FILE_FORM_CONFIG, ACADEMY_FILE_FORM_DATA, ACADEMY_FILE_FORM_RULES);

  // 查看模式下，所有字段设为只读
  const viewFormConfig = ref(
    ACADEMY_FILE_FORM_CONFIG.map((item) => ({
      ...item,
      componentProps: {
        ...item.componentProps,
        disabled: true,
      },
    })),
  );

  const computedFormConfig = computed(() => {
    if (isViewMode.value) {
      return viewFormConfig.value;
    }
    return ruleFormConfig.value;
  });

  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
  
  // 富文本编辑器
  const editorRef = shallowRef();
  const editorConfig = computed(() => ({
    placeholder: '请输入文档内容',
    MENU_CONF: {},
  }));

  const handleEditorCreated = (editor: any) => {
    editorRef.value = editor;
  };

  const handleEditorChange = () => {
    // 编辑器内容变化时的处理
  };

  // 文件上传
  const uploadFileList = ref<FileItem[]>([]);

  const handleUploadSuccess = (files: FileItem[]) => {
    uploadFileList.value = files;
    if (files.length > 0 && files[0].file) {
      // 这里需要实际上传文件到服务器，获取 fileUrl
      // 暂时使用文件对象，实际应该调用上传接口
      ruleFormData.fileUrl = files[0].file.name; // 临时处理，需要替换为实际上传后的URL
    }
  };

  const getFileName = (url: string) => {
    if (!url) return '';
    const parts = url.split('/');
    return parts[parts.length - 1];
  };

  const handleValidate = async () => {
    if (!basicFormRef.value) return;
    const res = await basicFormRef.value.validateForm();
    return res;
  };

  const getDetail = async () => {
    if (!currentId.value) return;
    try {
      const res = await queryAcademyFileById(currentId.value);
      if (res) {
        // 映射接口字段到表单字段
        ruleFormData.fileName = res.fileName || '';
        ruleFormData.classifyName = res.classifyName || '';
        ruleFormData.fileCode = res.fileCode || '';
        ruleFormData.fileVersion = res.fileVersion || '';
        ruleFormData.fileFormat = res.fileFormat || '';
        ruleFormData.releaseDate = res.releaseDate || '';
        ruleFormData.fileUrl = res.fileUrl || '';
        ruleFormData.content = res.content || '';
        ruleFormData.status = res.status ?? 1;
        
        // 如果有文件URL，转换为FileItem格式
        if (res.fileUrl) {
          uploadFileList.value = [
            {
              fileId: Date.now(),
              fileName: getFileName(res.fileUrl),
              fileType: res.fileFormat?.toLowerCase() === 'pdf' ? 'pdf' : 'word',
              fileSize: '0KB',
            },
          ];
        }
      }
      cloneRuleFormData();
    } catch (e) {
      console.error('获取院级文件详情失败:', e);
      ElMessage.error('获取详情失败');
    }
  };

  const handleSubmit = async () => {
    const res = await handleValidate();
    if (!res) return;
    try {
      const basePayload: ProductionSafetyFile = {
        fileName: ruleFormData.fileName,
        classifyName: ruleFormData.classifyName,
        fileCode: ruleFormData.fileCode,
        fileVersion: ruleFormData.fileVersion,
        fileFormat: ruleFormData.fileFormat,
        releaseDate: ruleFormData.releaseDate,
        fileUrl: ruleFormData.fileUrl || undefined,
        content: ruleFormData.content || undefined,
        status: ruleFormData.status ?? 1,
      };

      if (isCreateMode.value) {
        await saveAcademyFile(basePayload);
        ElMessage.success('创建成功');
      } else if (isEditMode.value && currentId.value) {
        await updateAcademyFile({
          id: currentId.value,
          ...basePayload,
        });
        ElMessage.success('保存成功');
      }

      router.back();
    } catch (e) {
      console.error('保存院级文件失败:', e);
      ElMessage.error('保存失败，请重试');
    }
  };

  onMounted(() => {
    cloneRuleFormData();
    beforeRouteLeave();
    if (isEditMode.value || isViewMode.value) {
      getDetail();
    }
  });

  onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;

  .editor-container {
    width: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
  }

  .content-display {
    min-height: 200px;
    padding: 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background-color: #f5f7fa;
  }

  .file-display {
    .file-link {
      color: #409eff;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .no-file {
    color: rgba(0, 0, 0, 0.65);
  }
</style>