进度条处理

src/components/FileUploader/index.vue

@@ -3,16 +3,32 @@
     <!-- 上传按钮区域 -->
     <div class="uploadFlex">
       <el-upload
+        :timeout="300000"
         :action="uploadUrl"
         :headers="headers"
         :show-file-list="false"
         multiple
-        :disabled="disabled"
+        :disabled="disabled || uploading"
         :on-success="handleUploadSuccess"
+        :on-error="handleUploadError"
         :before-upload="beforeUpload"
+        :on-progress="handleProgress"
       >
-        <el-button type="default" :disabled="disabled">上传</el-button>
+        <el-button type="default" :disabled="disabled || uploading">
+          <span v-if="uploading">上传中...</span>
+          <span v-else>上传</span>
+        </el-button>
       </el-upload>
+
+      <!-- 进度条 -->
+      <div v-if="showProgress" class="progress-container">
+        <el-progress
+          :percentage="uploadPercentage"
+          stroke-width="6"
+          size="small"
+        />
+      </div>
+
       <el-button
         v-if="!isInline"
         type="default"
@@ -24,6 +40,7 @@
       </el-button>
       <slot name="actions"></slot>
     </div>
+
     <!-- 文件列表表格 -->
     <el-table
       v-if="!isInline"
@@ -311,6 +328,11 @@ const emit = defineEmits([
 const selectedIds = ref([]);
 const popoverVisible = ref(false);
 
+// ========== 上传进度 & loading 状态 ==========
+const uploading = ref(false); // 上传中
+const uploadPercentage = ref(0); // 进度百分比
+const showProgress = ref(false); // 是否显示进度条
+
 // 核心：安全处理文件列表，将非数组值转为空数组
 const safeFileList = computed({
   get() {
@@ -326,19 +348,42 @@ const formatDate = (date) => {
   return date ? moment(date).format("YYYY-MM-DD HH:mm:SS") : "";
 };
 
+// 上传前
+const beforeUpload = (file) => {
+  uploading.value = true;
+  uploadPercentage.value = 0;
+  showProgress.value = true;
+  return true;
+};
+
+// 上传进度
+const handleProgress = (event, file, fileList) => {
+  uploadPercentage.value = Math.floor(event.percent);
+};
+
 // 文件上传成功处理
 const handleUploadSuccess = (res) => {
   if (res && res.data) {
     safeFileList.value = [...safeFileList.value, res.data];
-    console.log("上传成功：", res.data);
     ElMessage.success("文件上传成功");
     popoverVisible.value = false;
   }
+  finishUpload();
 };
 
-const beforeUpload = (file) => {
-  // 可添加文件类型、大小等校验逻辑
-  return true;
+// 上传失败
+const handleUploadError = () => {
+  ElMessage.error("文件上传失败");
+  finishUpload();
+};
+
+// 结束上传
+const finishUpload = () => {
+  uploading.value = false;
+  uploadPercentage.value = 100;
+  setTimeout(() => {
+    showProgress.value = false;
+  }, 500);
 };
 
 // 选择文件变化
@@ -438,7 +483,9 @@ watch(
 }
 .uploadFlex {
   display: flex;
+  align-items: center;
   margin-bottom: 16px;
+  gap: 12px;
 }
 .inline {
   display: flex;
@@ -450,6 +497,12 @@ watch(
   }
 }
 
+// 进度条容器
+.progress-container {
+  flex: 1;
+  max-width: 200px;
+}
+
 .inline-file-wrapper {
   flex: 1;
   margin-left: 10px;

src/views/investingManage/addStatement.vue

@@ -64,7 +64,10 @@
 
                         <el-col :span="12">
                           <el-form-item label="项目名称">
-                            <el-input v-model="formData.projectName" :disabled="projectDisabled" />
+                            <el-input
+                              v-model="formData.projectName"
+                              :disabled="projectDisabled"
+                            />
                           </el-form-item>
                         </el-col>
                         <el-col :span="12">
@@ -583,66 +586,7 @@
                 <el-row :gutter="20">
                   <el-col :span="24">
                     <el-form-item label="策划文件">
-                      <el-upload
-                        :action="windowConfig.baseUrl + '/api/file/upload'"
-                        :headers="{ Authorization: token }"
-                        :show-file-list="false"
-                        multiple
-                        :disabled="isPreview"
-                        :on-success="addChwjFile"
-                      >
-                        <el-button :disabled="isPreview" type="default"
-                          >上传</el-button
-                        >
-                      </el-upload>
-                      <el-button
-                        type="default"
-                        @click="multiDeleteChwj"
-                        :disabled="!chwjSelectIds.length"
-                        >删除选中文件</el-button
-                      >
-                    </el-form-item>
-                    <el-form-item label=" ">
-                      <el-table
-                        :data="chwjData"
-                        style="width: 100%"
-                        empty-text="暂无数据"
-                        border
-                        @selection-change="chwjSelectionChange"
-                      >
-                        <el-table-column type="selection" width="55" />
-                        <el-table-column prop="originalname" label="文件名" />
-                        <el-table-column prop="updatedAt" label="上传时间">
-                          <template #default="{ row }">
-                            <span>{{
-                              moment(row.updatedAt).format(
-                                "YYYY-MM-DD HH:mm:SS"
-                              )
-                            }}</span>
-                          </template>
-                        </el-table-column>
-                        <el-table-column prop="size" label="大小">
-                          <template #default="{ row }">
-                            <span>{{ row.size }} MB</span>
-                          </template>
-                        </el-table-column>
-                        <el-table-column fixed="right" label="操作" width="100">
-                          <template #default="{ row, index }">
-                            <span
-                              class="always-click"
-                              @click="downloadFile(row)"
-                              >下载</span
-                            >
-                            <el-button
-                              link
-                              type="danger"
-                              size="small"
-                              @click="deleteChwj(index)"
-                              >删除</el-button
-                            >
-                          </template>
-                        </el-table-column>
-                      </el-table>
+                      <FileUploader v-model="chwjData" />
                     </el-form-item>
                   </el-col>
                 </el-row>
@@ -659,64 +603,7 @@
                 >
                   <el-col :span="24">
                     <el-form-item label="责任书文件">
-                      <el-upload
-                        :action="windowConfig.baseUrl + '/api/file/upload'"
-                        :headers="{ Authorization: token }"
-                        :show-file-list="false"
-                        multiple
-                        :on-success="addZrsFile"
-                      >
-                        <el-button type="default">上传</el-button>
-                      </el-upload>
-                      <el-button
-                        type="default"
-                        @click="multiDeleteZrs"
-                        :disabled="!zrsSelectIds.length"
-                        >删除选中文件</el-button
-                      >
-                    </el-form-item>
-                    <el-form-item label="">
-                      <el-table
-                        :data="zrsData"
-                        style="width: 100%"
-                        empty-text="暂无数据"
-                        border
-                        @selection-change="zrsSelectionChange"
-                      >
-                        <el-table-column type="selection" width="55" />
-                        <el-table-column prop="originalname" label="文件名" />
-                        <el-table-column prop="updatedAt" label="上传时间">
-                          <template #default="{ row, index }">
-                            <span>{{
-                              moment(row.updatedAt).format(
-                                "YYYY-MM-DD HH:mm:SS"
-                              )
-                            }}</span>
-                          </template>
-                        </el-table-column>
-                        <el-table-column prop="size" label="大小">
-                          <template #default="{ row }">
-                            <span>{{ row.size }} MB</span>
-                          </template>
-                        </el-table-column>
-
-                        <el-table-column fixed="right" label="操作" width="100">
-                          <template #default="{ row, index }">
-                            <span
-                              class="always-click"
-                              @click="downloadFile(row)"
-                              >下载</span
-                            >
-                            <el-button
-                              link
-                              type="danger"
-                              size="small"
-                              @click="deleteZrs(index)"
-                              >删除</el-button
-                            >
-                          </template>
-                        </el-table-column>
-                      </el-table>
+                      <FileUploader v-model="zrsData" />
                     </el-form-item>
                   </el-col>
                 </el-form>
@@ -849,7 +736,7 @@ watch(
     } else {
       selectedFullPath.value = "";
     }
-  }
+  },
 );
 // 构建节点映射表
 const nodeMap = new Map();
@@ -928,7 +815,7 @@ const getStatementInfo = () => {
             ...item,
             sfsy: item.sfsy && item.sfsy.toString(),
           };
-        })
+        }),
       );
       Object.assign(chwjData.value, res.chwj);
       Object.assign(pfyjlsqkData.value, res.tzmbzrsPfyjs);
@@ -1001,7 +888,7 @@ const multiDeleteZrs = () => {
   })
     .then(() => {
       zrsData.value = zrsData.value.filter(
-        (item) => !zrsSelectIds.value.includes(item.id)
+        (item) => !zrsSelectIds.value.includes(item.id),
       );
     })
     .catch(() => {});
@@ -1584,7 +1471,7 @@ const multiDeleteChwj = () => {
   })
     .then(() => {
       chwjData.value = chwjData.value.filter(
-        (item) => !chwjSelectIds.value.includes(item.id)
+        (item) => !chwjSelectIds.value.includes(item.id),
       );
     })
     .catch(() => {});
@@ -1616,7 +1503,7 @@ const multiDeleteQdfj = () => {
   })
     .then(() => {
       qdfjData.value = qdfjData.value.filter(
-        (item) => !qdfjSelectIds.value.includes(item.id)
+        (item) => !qdfjSelectIds.value.includes(item.id),
       );
     })
     .catch(() => {});
@@ -1690,7 +1577,11 @@ const exportStatement = () => {
           { prop: "zbmc", label: "指标名称" },
           { prop: "zbmbz", label: "指标目标值" },
           { prop: "khjzf", label: "考核基准分" },
-          { prop: "sfsy", label: "是否适用", formatter: (v) => v === "1" ? "是" : "否" },
+          {
+            prop: "sfsy",
+            label: "是否适用",
+            formatter: (v) => (v === "1" ? "是" : "否"),
+          },
           { prop: "khsm", label: "考核说明" },
         ],
         colWidths: [35, 15, 12, 10, 30],
@@ -1700,10 +1591,20 @@ const exportStatement = () => {
         type: "table",
         data: pfyjlsqkData.value,
         columns: [
-          { prop: "lx", label: "类型", formatter: (v) => pfyjlxList.find((l) => l.key === v)?.name || v || "" },
+          {
+            prop: "lx",
+            label: "类型",
+            formatter: (v) =>
+              pfyjlxList.find((l) => l.key === v)?.name || v || "",
+          },
           { prop: "pfyj", label: "批复意见" },
           { prop: "jzf", label: "基准分" },
-          { prop: "lsqk", label: "落实情况", formatter: (v) => lsqkList.find((l) => l.key === v)?.name || v || "" },
+          {
+            prop: "lsqk",
+            label: "落实情况",
+            formatter: (v) =>
+              lsqkList.find((l) => l.key === v)?.name || v || "",
+          },
           { prop: "lssj", label: "落实时间" },
           { prop: "lsqkjtsm", label: "落实情况具体说明" },
         ],

src/views/projectManage/addProject/composables/useJueceData.js

@@ -50,9 +50,9 @@ export function useJueceData(jcFormData, gdlxListRef) {
         obj[item.gdlx].lrfpbl = new Decimal(
           Number(obj[item.gdlx].lrfpbl || 0),
         ).plus(new Decimal(Number(item.lrfpbl || 0)));
-        obj[item.gdlx].cze = new Decimal(
-          Number(obj[item.gdlx].cze || 0),
-        ).plus(new Decimal(Number(item.cze || 0)));
+        obj[item.gdlx].cze = new Decimal(Number(obj[item.gdlx].cze || 0)).plus(
+          new Decimal(Number(item.cze || 0)),
+        );
         obj[item.gdlx].yjzczb = new Decimal(
           Number(obj[item.gdlx].yjzczb || 0),
         ).plus(new Decimal(Number(item.yjzczb || 0)));
@@ -539,25 +539,86 @@ export function useJueceData(jcFormData, gdlxListRef) {
 
   return {
     jcRadioClick,
-    jcSwlzbData, addJcSwlzb, deleteJcSwlzb,
-    jcGdxxData, addJcGdxx, deleteJcGdxx, jcgdxxSums, changeJcGdxxSums, jcgdxxIndexMethod,
-    dbzqData, addDbzq, deleteDbzq,
-    fxglData, addFxgl, deleteFxgl,
-    lcbjdData, addLcbjd, deleteLcbjd,
-    lcbspData, addLcbspFile, deleteLcbsp, lcbspSelectIds, lcbspSelectionChange, multiDeleteLcbsp,
-    kyclData, addKyclFile, deleteKycl, kyclSelectIds, kyclSelectionChange, multiDeleteKycl,
-    jjzbcsData, addJjzbcsFile, deleteJjzbcs, jjzbcsSelectIds, jjzbcsSelectionChange, multiDeleteJjzbcs,
-    tpbczcclData, addTpbczcclFile, deleteTpbczccl, tpbczcclSelectIds, tpbczcclSelectionChange, multiDeleteTpbczccl,
-    tpzcclData, addTpzcclFile, deleteTpzccl, tpzcclSelectIds, tpzcclSelectionChange, multiDeleteTpzccl,
-    shyaData, addShyaFile, deleteShya, shyaSelectIds, shyaSelectionChange, multiDeleteShya,
+    jcSwlzbData,
+    addJcSwlzb,
+    deleteJcSwlzb,
+    jcGdxxData,
+    addJcGdxx,
+    deleteJcGdxx,
+    jcgdxxSums,
+    changeJcGdxxSums,
+    jcgdxxIndexMethod,
+    dbzqData,
+    addDbzq,
+    deleteDbzq,
+    fxglData,
+    addFxgl,
+    deleteFxgl,
+    lcbjdData,
+    addLcbjd,
+    deleteLcbjd,
+    lcbspData,
+    addLcbspFile,
+    deleteLcbsp,
+    lcbspSelectIds,
+    lcbspSelectionChange,
+    multiDeleteLcbsp,
+    kyclData,
+    addKyclFile,
+    deleteKycl,
+    kyclSelectIds,
+    kyclSelectionChange,
+    multiDeleteKycl,
+    jjzbcsData,
+    addJjzbcsFile,
+    deleteJjzbcs,
+    jjzbcsSelectIds,
+    jjzbcsSelectionChange,
+    multiDeleteJjzbcs,
+    tpbczcclData,
+    addTpbczcclFile,
+    deleteTpbczccl,
+    tpbczcclSelectIds,
+    tpbczcclSelectionChange,
+    multiDeleteTpbczccl,
+    tpzcclData,
+    addTpzcclFile,
+    deleteTpzccl,
+    tpzcclSelectIds,
+    tpzcclSelectionChange,
+    multiDeleteTpzccl,
+    shyaData,
+    addShyaFile,
+    deleteShya,
+    shyaSelectIds,
+    shyaSelectionChange,
+    multiDeleteShya,
     jcTzzeqkjData,
     jcCwpjzbData,
-    jcHxbjtjData, addJchxbjtj, deleteJchxbjtj,
-    jcztshqkData, addJcztshqk, deleteJcztshqk, addJcztshqkFile, deleteJcztshqkFile,
-    tzztshqkData, addTzztshqk, deleteTzztshqk, addTzztshqkFile, deleteTzztshqkFile,
-    jcspyjData, addJcspyj, deleteJcspyj, addJcspyjFile, deleteRowFile,
+    jcHxbjtjData,
+    addJchxbjtj,
+    deleteJchxbjtj,
+    jcztshqkData,
+    addJcztshqk,
+    deleteJcztshqk,
+    addJcztshqkFile,
+    deleteJcztshqkFile,
+    tzztshqkData,
+    addTzztshqk,
+    deleteTzztshqk,
+    addTzztshqkFile,
+    deleteTzztshqkFile,
+    jcspyjData,
+    addJcspyj,
+    deleteJcspyj,
+    addJcspyjFile,
+    deleteRowFile,
     bhqkData,
-    jxjlData, addJxjl, deleteJxjl,
-    jlrData, addJlr, deleteJlr,
+    jxjlData,
+    addJxjl,
+    deleteJxjl,
+    jlrData,
+    addJlr,
+    deleteJlr,
   };
 }

src/views/projectManage/addProject/composables/useLixiangData.js

@@ -12,6 +12,7 @@ export function useLixiangData(formData, gdlxListRef) {
       delete formData[key];
     }
   };
+  let uploadDialogVisible = ref(false);
 
   // 建设规模（实物量指标）
   let swlzbData = reactive([]);
@@ -41,7 +42,8 @@ export function useLixiangData(formData, gdlxListRef) {
         if (item.gdlx) {
           if (!obj[item.gdlx]) {
             obj[item.gdlx] = {
-              name: gdlxListRef.filter((gdlx) => gdlx.key == item.gdlx)[0].value,
+              name: gdlxListRef.filter((gdlx) => gdlx.key == item.gdlx)[0]
+                .value,
             };
           }
           obj[item.gdlx].cgbl = new Decimal(
@@ -73,6 +75,7 @@ export function useLixiangData(formData, gdlxListRef) {
   // 支撑材料
   let zcclData = ref([]);
   const addZcclFile = (res, file) => {
+    uploadDialogVisible.value = false;
     zcclData.value.push(res.data);
   };
   const deleteZccl = (index) => {
@@ -273,14 +276,42 @@ export function useLixiangData(formData, gdlxListRef) {
 
   return {
     radioClick,
-    swlzbData, addSwlzb, deleteSwlzb,
-    gdxxData, addGdxx, deleteGdxx, gdxxSums, changeGdxxSums, gdxxIndexMethod, getObjSums,
-    zcclData, addZcclFile, deleteZccl, zcclSelectIds, zcclSelectionChange, multiDeleteZccl,
+    swlzbData,
+    addSwlzb,
+    deleteSwlzb,
+    gdxxData,
+    addGdxx,
+    deleteGdxx,
+    gdxxSums,
+    changeGdxxSums,
+    gdxxIndexMethod,
+    getObjSums,
+    zcclData,
+    addZcclFile,
+    deleteZccl,
+    zcclSelectIds,
+    zcclSelectionChange,
+    multiDeleteZccl,
     tzzeqkjData,
     cwpjzbData,
-    hxbjtjData, addHxbjtj, deleteHxbjtj,
-    lxpfwjData, addLxpfFile, deleteLxpf, lxpfSelectIds, lxpfSelectionChange, multiDeleteLxpf,
-    spyjTableData, addSpyj, deleteSpyj,
-    shclData, addShclFile, deleteShcl, shclSelectIds, shclSelectionChange, multiDeleteShcl,
+    hxbjtjData,
+    addHxbjtj,
+    deleteHxbjtj,
+    lxpfwjData,
+    addLxpfFile,
+    deleteLxpf,
+    lxpfSelectIds,
+    lxpfSelectionChange,
+    multiDeleteLxpf,
+    spyjTableData,
+    addSpyj,
+    deleteSpyj,
+    shclData,
+    addShclFile,
+    deleteShcl,
+    shclSelectIds,
+    shclSelectionChange,
+    multiDeleteShcl,
+    uploadDialogVisible,
   };
 }