canrd-outside / order-erp-front · Files

<template>
    <BasicDrawer
      v-bind="$attrs"
      @register="registerDrawer"
      :title="isEdit ? '编辑用印申请' : '新增用印申请'"
      width="600px"
      :showFooter="true"
      @ok="handleSubmit"
      @close="handleCancel"
    >
      <BasicForm @register="registerForm" />
      
      <!-- 文件上传区域 -->
      <div class="file-upload-section">
        <div class="upload-title">用印文件 <span style="color: red;">*</span></div>
        <div class="file-list">
          <!-- 已上传文件列表 -->
          <div class="file-item" v-for="(file, index) in uploadedFiles" :key="index">
            <div class="file-info">
              <div class="file-name">{{ file.name }}</div>
            </div>
            <div class="file-actions">
              <a @click="previewFile(file)" class="action-btn">预览</a>
              <a @click="downloadFile(file)" class="action-btn">下载</a>
              <a-popconfirm title="确定删除吗？" ok-text="是" cancel-text="否" @confirm="removeFile(index)">
                <a class="action-btn delete">删除</a>
              </a-popconfirm>
            </div>
          </div>
          
          <!-- 上传按钮 -->
          <div class="file-upload-button" @click="handleFileUpload">
            <div class="upload-button-text">
              <PlusOutlined />
              <div>{{ uploadedFiles.length === 0 ? '上传文件' : '继续上传' }}</div>
              <div class="upload-hint">支持Word、Excel、PDF格式，可上传多个文件</div>
            </div>
          </div>
        </div>
        <input 
          type="file" 
          ref="fileInput"
          accept=".docx,.xls,.xlsx,.pdf"
          multiple
          style="display: none;"
          @change="uploadSelectedFiles"
        />
      </div>
      
      <!-- 自定义底部按钮 -->
      <template #footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleSubmit" :loading="submitLoading">
          {{ isEdit ? '确认修改' : '确认保存' }}
        </a-button>
      </template>
    </BasicDrawer>
  </template>
  
  <script lang="ts" setup>
    import { ref } from 'vue';
    import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
    import { BasicForm, useForm, FormSchema } from '/@/components/Form';
    import { useMessage } from '/@/hooks/web/useMessage';
    import { PlusOutlined } from '@ant-design/icons-vue';
    import { 
      getFileTypeOptions, 
      getSealTypeOptions, 
      getCompanyOptions, 
      getDeptOptions,
      createSealApplication,
      updateSealApplication
    } from '/@/api/project/seal';
  
    const emit = defineEmits(['success', 'register']);
    const { createMessage } = useMessage();
    
    // 编辑模式相关
    const isEdit = ref(false);
    const editId = ref<string | number>('');
    
    // 文件上传相关
    const fileInput = ref<HTMLInputElement>();
    const uploadedFiles = ref<Array<{ name: string; fileUrl: string }>>([]);
    const isFileUploading = ref(false);
    const submitLoading = ref(false);
    const uploadUrl = 'http://47.104.8.35:80/api/localStorage/upload_file_oss?name=';
  
    // 表单配置
    const formSchema: FormSchema[] = [
      {
        field: 'fileName',
        label: '用印文件名称',
        component: 'Input',
        required: true,
        colProps: { span: 24 },
      },
      {
        field: 'fileType',
        label: '文件分类',
        component: 'Select',
        required: true,
        componentProps: {
          options: [],
          placeholder: '请选择文件分类',
        },
        colProps: { span: 24 },
      },
      {
        field: 'signType',
        label: '签署方式',
        component: 'Select',
        required: true,
        componentProps: {
          options: [
            { label: '电子', value: '电子' },
            { label: '纸质', value: '纸质' },
          ],
          placeholder: '请选择签署方式',
        },
        colProps: { span: 24 },
      },
      {
        field: 'count',
        label: '文件份数',
        component: 'InputNumber',
        required: true,
        componentProps: {
          min: 1,
          placeholder: '请输入文件份数',
        },
        colProps: { span: 24 },
      },
      {
        field: 'sealTypes',
        label: '印章类型',
        component: 'Select',
        required: true,
        componentProps: {
          mode: 'multiple',
          options: [],
          placeholder: '请选择印章类型（可多选）',
        },
        colProps: { span: 24 },
      },
      {
        field: 'company',
        label: '印章所属主体',
        component: 'Select',
        required: true,
        componentProps: {
          options: [],
          placeholder: '请选择印章所属主体',
        },
        colProps: { span: 24 },
      },
      {
        field: 'dept',
        label: '用印部门',
        component: 'Select',
        required: true,
        componentProps: {
          options: [],
          placeholder: '请选择用印部门',
        },
        colProps: { span: 24 },
      },
      {
        field: 'note',
        label: '备注',
        component: 'InputTextArea',
        componentProps: {
          rows: 3,
          placeholder: '请输入备注信息',
        },
        colProps: { span: 24 },
      },
    ];
  
    const [registerForm, { validate, resetFields, updateSchema, setFieldsValue }] = useForm({
      labelWidth: 120,
      schemas: formSchema,
      showActionButtonGroup: false,
    });
  
    const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => {
      // 重置表单
      resetFields();
      uploadedFiles.value = [];
      
      // 判断是否为编辑模式
      isEdit.value = !!data?.record;
      
      // 先加载选项数据
      await loadOptions();
      
      if (isEdit.value && data.record) {
        editId.value = data.record.id;
        
        console.log('编辑模式 - 原始数据:', data.record);
        
        // 回显表单数据
        const formData = {
          fileName: data.record.fileName || '',
          fileType: data.record.fileTypeId || data.record.fileType || undefined,
          signType: data.record.signType || '',
          count: data.record.count || 1,
          sealTypes: (() => {
            // 处理 sealTypesId 字符串转换为数字数组
            if (data.record.sealTypesId && typeof data.record.sealTypesId === 'string') {
              // 将 "217,218" 转换为 [217, 218]
              return data.record.sealTypesId.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id));
            } else if (Array.isArray(data.record.sealTypesId)) {
              // 如果已经是数组，确保元素是数字类型
              return data.record.sealTypesId.map(id => typeof id === 'string' ? parseInt(id) : id);
            } else if (Array.isArray(data.record.sealTypes)) {
              // 兼容旧的字段名
              return data.record.sealTypes;
            }
            return [];
          })(),
          company: data.record.companyId || data.record.company || undefined,
          dept: data.record.deptId || data.record.dept || undefined,
          note: data.record.note || '',
        };
        
        console.log('准备回显的表单数据:', formData);
        console.log('sealTypesId 原始值:', data.record.sealTypesId);
        console.log('转换后的 sealTypes:', formData.sealTypes);
        
        // 等待一下确保DOM更新
        setTimeout(() => {
          setFieldsValue(formData);
          console.log('表单数据已设置');
        }, 100);
        
        // 回显文件数据
        if (data.record.files && Array.isArray(data.record.files) && data.record.files.length > 0) {
          uploadedFiles.value = data.record.files.map((fileUrl: string, index: number) => {
            // 从URL中提取文件名
            let fileName = '';
            try {
              // 尝试从URL中解析文件名
              const urlObj = new URL(fileUrl);
              const pathParts = urlObj.pathname.split('/');
              const lastPart = pathParts[pathParts.length - 1];
              
              // 如果URL包含编码的文件名，尝试解码
              if (lastPart.includes('-')) {
                const fileNamePart = lastPart.split('-').slice(1).join('-');
                fileName = decodeURIComponent(fileNamePart);
              } else {
                fileName = decodeURIComponent(lastPart);
              }
              
              // 如果解析失败，使用默认名称
              if (!fileName || fileName.length < 3) {
                fileName = `${data.record.fileName || '用印文件'}_${index + 1}`;
              }
            } catch (error) {
              // URL解析失败，使用默认名称
              fileName = `${data.record.fileName || '用印文件'}_${index + 1}`;
            }
            
            return {
              name: fileName,
              fileUrl: fileUrl,
            };
          });
          console.log('文件数据已回显:', uploadedFiles.value);
        } else if (data.record.fileUrl) {
          // 兼容单个文件字段的情况
          uploadedFiles.value = [{
            name: data.record.fileName || '文件',
            fileUrl: data.record.fileUrl.startsWith('http') ? data.record.fileUrl : `http://47.104.8.35:80${data.record.fileUrl}`,
          }];
          console.log('单个文件数据已回显:', uploadedFiles.value);
        } else {
          console.log('没有找到文件数据');
        }
      } else {
        editId.value = '';
        console.log('新建模式');
      }
    });
  
    // 加载所有选项数据
    const loadOptions = async () => {
      try {
        // 加载文件分类选项
        const fileTypeOptions = await getFileTypeOptions();
        updateSchema({
          field: 'fileType',
          componentProps: { options: fileTypeOptions },
        });
  
        // 加载印章类型选项
        const sealTypeOptions = await getSealTypeOptions();
        updateSchema({
          field: 'sealTypes',
          componentProps: { options: sealTypeOptions },
        });
  
        // 加载公司选项
        const companyOptions = await getCompanyOptions();
        updateSchema({
          field: 'company',
          componentProps: { options: companyOptions },
        });
  
        // 加载部门选项
        const deptOptions = await getDeptOptions();
        updateSchema({
          field: 'dept',
          componentProps: { options: deptOptions },
        });
      } catch (error) {
        console.error('加载选项数据失败:', error);
        createMessage.error('加载选项数据失败');
      }
    };
  
    // 文件上传处理
    const handleFileUpload = () => {
      if (isFileUploading.value) return;
      fileInput.value?.click();
    };
  
    const uploadSelectedFiles = async (e: Event) => {
      const target = e.target as HTMLInputElement;
      if (!target.files || target.files.length === 0) return;
      
      const files = Array.from(target.files);
      let uploadingCount = 0;  // 记录正在上传的文件数量
      
      for (const file of files) {
        // 验证文件类型
        const allowedTypes = ['.doc', '.docx', '.xls', '.xlsx', '.pdf'];
        const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
        if (!allowedTypes.includes(fileExtension)) {
          createMessage.error(`${file.name}: 只支持Word、Excel、PDF格式的文件`);
          continue;
        }
        
        // 验证文件大小 (10MB)
        if (file.size > 10 * 1024 * 1024) {
          createMessage.error(`${file.name}: 文件大小不能超过10MB`);
          continue;
        }
        
        // 检查是否已存在同名文件
        if (uploadedFiles.value.some(f => f.name === file.name)) {
          createMessage.warning(`${file.name}: 文件已存在`);
          continue;
        }
        
        uploadingCount++; // 增加上传中的文件计数
        isFileUploading.value = true; // 设置全局上传状态
        
        // 显示上传开始消息
        const uploadingMessage = createMessage.loading(`正在上传: ${file.name}...`, 0); // 0表示不自动关闭
        
        try {
          const formData = new FormData();
          formData.append('file', file);
          
          const response = await fetch(uploadUrl + file.name, {
            method: 'POST',
            body: formData,
          });
          
          if (!response.ok) {
            throw new Error(`上传失败: ${response.statusText}`);
          }
          
          const data = await response.json();
          
          if (data.data && data.data.fileUrl) {
            const fileUrl = data.data.fileUrl;
            // 确保URL是完整路径
            const fullUrl = fileUrl.startsWith('http') ? fileUrl : `http://47.104.8.35:80${fileUrl}`;
            
            uploadedFiles.value.push({
              name: file.name,
              fileUrl: fullUrl,
            });
            
            // 关闭上传中消息，显示成功消息
            uploadingMessage();
            createMessage.success(`${file.name} 上传成功`);
          } else {
            throw new Error('无法获取文件URL');
          }
        } catch (error) {
          // 关闭上传中消息，显示错误消息
          uploadingMessage();
          createMessage.error(`${file.name} 上传失败: ${error.message || '未知错误'}`);
        } finally {
          uploadingCount--; // 减少上传中的文件计数
          
          // 如果所有文件都上传完成，清除全局上传状态
          if (uploadingCount === 0) {
            isFileUploading.value = false;
          }
        }
      }
      
      // 清空input，以便再次选择文件
      if (fileInput.value) {
        fileInput.value.value = '';
      }
    };
  
    // 预览文件
    const previewFile = (file: any) => {
      if (!file.fileUrl) {
        createMessage.error('无法预览：找不到文件URL');
        return;
      }
      window.open(file.fileUrl, '_blank');
    };
  
    // 下载文件
    const downloadFile = (file: any) => {
      if (!file.fileUrl) {
        createMessage.error('无法下载：找不到文件URL');
        return;
      }
      const a = document.createElement('a');
      a.href = file.fileUrl;
      a.download = file.name;
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    };
  
    // 删除文件
    const removeFile = (index: number) => {
      uploadedFiles.value.splice(index, 1);
    };
  
    // 提交表单
    const handleSubmit = async () => {
      try {
        // 验证表单
        const values = await validate();
        
        // 验证文件上传
        if (uploadedFiles.value.length === 0) {
          createMessage.error('请上传用印文件');
          return;
        }
        
        submitLoading.value = true;
        
        let result;
        if (isEdit.value) {
          // 编辑模式 - 准备编辑数据
          const editData = {
            id: editId.value,
            fileName: values.fileName,
            fileTypeId: values.fileType,
            signType: values.signType,
            count: values.count,
            sealTypesId: values.sealTypes,
            companyId: values.company,
            deptId: values.dept,
            files: uploadedFiles.value.map(file => file.fileUrl),
            note: values.note || '',
          };
          console.log('提交编辑数据到 /order/erp/seal/edit:', editData);
          result = await updateSealApplication(editData);
          console.log('编辑印章申请响应:', result);
          createMessage.success('用印申请修改成功');
        } else {
          // 新建模式 - 准备新建数据
          const createData = {
            fileName: values.fileName,
            fileTypeId: values.fileType,
            signType: values.signType,
            count: values.count,
            sealTypesId: values.sealTypes,
            companyId: values.company,
            deptId: values.dept,
            files: uploadedFiles.value.map(file => file.fileUrl),
            note: values.note || '',
          };
          console.log('提交数据到 /order/erp/seal/add:', createData);
          result = await createSealApplication(createData);
          console.log('创建印章申请响应:', result);
          createMessage.success('用印申请创建成功');
        }
        
        closeDrawer();
        emit('success');
      } catch (error) {
        console.error(isEdit.value ? '修改用印申请失败:' : '创建用印申请失败:', error);
        createMessage.error(isEdit.value ? '修改用印申请失败，请重试' : '创建用印申请失败，请重试');
      } finally {
        submitLoading.value = false;
      }
    };
  
    // 取消操作
    const handleCancel = () => {
      closeDrawer();
    };
  </script>
  
  <style lang="less" scoped>
    .file-upload-section {
      margin-top: 20px;
      padding: 20px;
      border-top: 1px solid #f0f0f0;
      
      .upload-title {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 16px;
      }
      
      .file-list {
        .file-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          margin-bottom: 8px;
          
          .file-info {
            flex: 1;
            
            .file-name {
              font-size: 14px;
              color: #333;
            }
          }
          
          .file-actions {
            display: flex;
            gap: 8px;
            
            .action-btn {
              color: #1890ff;
              cursor: pointer;
              
              &:hover {
                color: #40a9ff;
              }
              
              &.delete {
                color: #ff4d4f;
                
                &:hover {
                  color: #ff7875;
                }
              }
            }
          }
        }
        
        .file-upload-button {
          width: 100%;
          height: 100px;
          border: 1px dashed #d9d9d9;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          transition: border-color 0.3s;
          
          &:hover {
            border-color: #1890ff;
            background-color: #f6f6f6;
          }
          
          .upload-button-text {
            text-align: center;
            color: #666;
            
            .anticon {
              font-size: 24px;
              margin-bottom: 8px;
            }
            
            .upload-hint {
              font-size: 12px;
              color: #999;
              margin-top: 4px;
            }
          }
        }
      }
    }
  </style>