附件弹窗修改，收入管理修改

chenhj

2026-04-30 a096b6183948cbe05e50498de96620c209e7e8b5

附件弹窗修改，收入管理修改

 src/components/Dialog/FileList.vue

@@ -13,13 +13,15 @@
      </el-button>
    </div>
    <!-- 上传组件弹窗 -->
    <el-dialog v-model="uploadDialogVisible"
    <el-dialog
        v-model="uploadDialogVisible"
               title="上传附件"
               width="50%"
               @close="handleUploadClose">
        @close="closeUpload">
      <AttachmentUpload v-model:file-list="newFileList" />
      <template #footer>
        <el-button @click="handleUploadClose">关闭</el-button>
        <el-button @click="saveUpload">保存</el-button>
        <el-button @click="closeUpload">关闭</el-button>
      </template>
    </el-dialog>
    <!-- 文件列表表格 -->
@@ -40,8 +42,8 @@
            <el-button link
                       type="primary"
                       size="small"
                       :href="scope.row.downloadURL"
                       class="download-link">
                       class="download-link"
                       @click="downloadFile(scope.row.downloadURL)">
              下载
            </el-button>
            <el-button link
@@ -119,7 +121,7 @@
    uploadDialogVisible.value = true;
  };

  const handleUploadClose = async () => {
const saveUpload = async () => {
    // 检查是否有新上传的文件
    if (newFileList.value.length > 0) {
      try {
@@ -138,6 +140,11 @@
    }
    uploadDialogVisible.value = false;
  };

const closeUpload = () => {
  newFileList.value = [];
  uploadDialogVisible.value = false;
}

  const handleDelete = async (row, index) => {
    try {
@@ -160,6 +167,9 @@
    });
  };

const downloadFile = (url) => {
  window.open(url, "_blank");
};
  onMounted(() => {
    setList();
  });

 src/main.js

@@ -48,6 +48,8 @@
import ImageUpload from "@/components/AttachmentUpload/image";
// 图片预览组件
import ImagePreview from "@/components/AttachmentPreview/image";
// 附件弹窗组件
import FileListDialog from "@/components/Dialog/FileList.vue";
// 字典标签组件
import DictTag from "@/components/DictTag";
// 表格组件
@@ -92,6 +94,7 @@
app.component("FileUpload", FileUpload);
app.component("ImageUpload", ImageUpload);
app.component("ImagePreview", ImagePreview);
app.component("FileListDialog", FileListDialog);
app.component("RightToolbar", RightToolbar);
app.component("Editor", Editor);
app.component("PIMTable", PIMTable);

 src/views/financialManagement/revenueManagement/index.vue

@@ -81,28 +81,16 @@
      </PIMTable>
    </div>
    <Modal ref="modalRef" @success="getTableData"></Modal>
    <!--  todo 附件预览相关 -->
    <FileListDialog 
      ref="fileListRef" 
      v-model="fileListDialogVisible"
      :show-upload-button="true"
      :show-delete-button="true"
      :upload-method="handleUpload"
      :delete-method="handleFileDelete"
    />
    <FileListDialog v-if="fileListDialogVisible" :record-id="currentRecordId" record-type="account_income" v-model:visible="fileListDialogVisible"/>
  </div>
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { listPage, delAccountIncome, fileListPage, fileAdd, fileDel } from "@/api/financialManagement/revenueManagement";
import {listPage, delAccountIncome} from "@/api/financialManagement/revenueManagement";
import { onMounted, getCurrentInstance, ref, computed } from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import dayjs from "dayjs";
import FileListDialog from "@/components/Dialog/FileListDialog.vue";
import request from "@/utils/request";
import { getToken } from "@/utils/auth";

defineOptions({
  name: "收入管理",
@@ -117,8 +105,7 @@
const { income_types } = proxy.useDict("income_types");
const fileListRef = ref(null);
const fileListDialogVisible = ref(false);
const currentFileRow = ref(null);
const accountType = ref('收入');
const currentRecordId = ref(0);

const incomeMethodOptions = computed(() => {
  const merged = [...(payment_methods.value || []), ...(receipt_payment_type.value || [])];
@@ -345,153 +332,8 @@
};
// 打开附件弹框
const openFilesFormDia = async (row) => {
  currentFileRow.value = row;
  accountType.value = '收入';
  try {
    const res = await fileListPage({
      accountId: row.id,
      accountType: accountType.value,
      current: 1,
      size: 100
    });
    if (res.code === 200 && fileListRef.value) {
      // 将数据转换为 FileListDialog 需要的格式
      const fileList = (res.data?.records || []).map(item => ({
        name: item.name,
        url: item.url,
        id: item.id,
        ...item
      }));
      fileListRef.value.open(fileList);
  currentRecordId.value = row.id;
      fileListDialogVisible.value = true;
    }
  } catch (error) {
    proxy.$modal.msgError("获取附件列表失败");
  }
};

// 上传附件
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 = {
            accountId: currentFileRow.value.id,
            accountType: accountType.value,
            name: uploadRes.data.originalName || file.name,
            url: uploadRes.data.tempPath || uploadRes.data.url
          };
          
          const saveRes = await fileAdd(fileData);
          if (saveRes.code === 200) {
            proxy.$modal.msgSuccess("文件上传成功");
            // 重新加载文件列表
            const listRes = await fileListPage({
              accountId: currentFileRow.value.id,
              accountType: accountType.value,
              current: 1,
              size: 100
            });
            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);
            }
            // 返回新文件信息
            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 handleFileDelete = async (row) => {
  try {
    const res = await fileDel([row.id]);
    if (res.code === 200) {
      proxy.$modal.msgSuccess("删除成功");
      // 重新加载文件列表
      if (currentFileRow.value && fileListRef.value) {
        const listRes = await fileListPage({
          accountId: currentFileRow.value.id,
          accountType: accountType.value,
          current: 1,
          size: 100
        });
        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);
        }
      }
      return true; // 返回 true 表示删除成功，组件会更新列表
    } else {
      proxy.$modal.msgError(res.msg || "删除失败");
      return false;
    }
  } catch (error) {
    proxy.$modal.msgError("删除失败");
    return false;
  }
};

onMounted(() => {
@@ -503,6 +345,7 @@
.table_list {
  margin-top: unset;
}

.actions {
  display: flex;
  justify-content: space-between;