1

src/views/bill/statementInvoice/addInvoiceDialog.vue

@@ -52,29 +52,22 @@
 
       <el-row :gutter="20">
         <el-col :span="24">
-          <el-form-item label="发票附件" prop="invoiceAttachment">
-            <el-button type="primary" size="small" @click="handleOpenFileSelector">
-              <el-icon><Upload /></el-icon>
-              点击上传
-            </el-button>
-            <div style="color: #999; font-size: 12px; margin-top: 5px">支持jpg/png/xlsx等文件</div>
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <!-- 附件列表 -->
-      <el-row :gutter="20" v-if="fileList.length > 0">
-        <el-col :span="24">
-          <el-table :data="fileList" border style="width: 100%; margin-top: 10px">
-            <el-table-column type="index" label="序号" width="60" align="center" />
-            <el-table-column prop="name" label="附件名称" min-width="200" align="center" />
-            <el-table-column label="操作" width="150" align="center">
-              <template #default="scope">
-                <el-button link type="primary" size="small" @click="handlePreviewFile(scope.row)">预览</el-button>
-                <el-button link type="danger" size="small" @click="handleRemoveFile(scope.$index)">删除</el-button>
+          <el-form-item label="发票附件" prop="invoiceAnnex">
+            <el-upload
+              :action="uploadAction"
+              :on-success="handleUploadSuccess"
+              :before-upload="beforeUpload"
+              :on-remove="handleRemoveUploadFile"
+              :on-preview="handlePreviewUploadFile"
+              :file-list="fileList"
+              multiple
+            >
+              <el-button type="primary" icon="Upload">点击上传</el-button>
+              <template #tip>
+                <div class="el-upload__tip">支持jpg/png/xlsx等文件,单个文件不超过50MB</div>
               </template>
-            </el-table-column>
-          </el-table>
+            </el-upload>
+          </el-form-item>
         </el-col>
       </el-row>
     </el-form>
@@ -86,15 +79,9 @@
       </div>
     </template>
   </el-dialog>
-
-  <!-- 文件选择器 -->
-  <FileSelector v-model="fileSelectorVisible" :multiple="true" :allowed-types="[1, 2, 3, 4, 5]" title="选择发票附件" @confirm="handleFileSelected" />
 </template>
 
 <script setup name="AddInvoiceDialog" lang="ts">
-import { Upload } from '@element-plus/icons-vue';
-import FileSelector from '@/components/FileSelector/index.vue';
-
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { invoice_type } = toRefs<any>(proxy?.useDict('invoice_type'));
 interface InvoiceForm {
@@ -104,7 +91,7 @@ interface InvoiceForm {
   invoiceAmount?: number;
   invoiceDate?: string;
   remark?: string;
-  invoiceAttachment?: string;
+  invoiceAnnex?: string;
 }
 
 const initFormData: InvoiceForm = {
@@ -114,14 +101,14 @@ const initFormData: InvoiceForm = {
   invoiceAmount: undefined,
   remark: undefined,
   invoiceDate: undefined,
-  invoiceAttachment: undefined
+  invoiceAnnex: undefined
 };
 
 const formRef = ref<ElFormInstance>();
 const buttonLoading = ref(false);
 const form = ref<InvoiceForm>({ ...initFormData });
 const fileList = ref<any[]>([]);
-const fileSelectorVisible = ref(false);
+const uploadAction = import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload';
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -152,14 +139,15 @@ const open = (data?: InvoiceForm) => {
     Object.assign(form.value, data);
 
     // 解析附件地址并回显附件列表
-    if (data.invoiceAttachment) {
-      const urls = data.invoiceAttachment.split(',').filter((url) => url.trim());
+    if (data.invoiceAnnex) {
+      const urls = data.invoiceAnnex.split(',').filter((url) => url.trim());
       fileList.value = urls.map((url, index) => {
         const fileName = url.split('/').pop() || `附件${index + 1}`;
         return {
           name: fileName,
           url: url.trim(),
-          id: undefined
+          uid: Date.now() + index,
+          status: 'success'
         };
       });
     }
@@ -175,39 +163,46 @@ const reset = () => {
   formRef.value?.clearValidate();
 };
 
-/** 打开文件选择器 */
-const handleOpenFileSelector = () => {
-  fileSelectorVisible.value = true;
+/** 上传前校验 */
+const beforeUpload = (file: any) => {
+  const isLt50M = file.size / 1024 / 1024 < 50;
+  if (!isLt50M) {
+    proxy?.$modal.msgWarning('上传文件大小不能超过 50MB!');
+  }
+  return isLt50M;
 };
 
-/** 文件选择完成 */
-const handleFileSelected = (files: any[]) => {
-  if (files && files.length > 0) {
-    files.forEach((file) => {
-      fileList.value.push({
-        name: file.fileName || file.name,
-        url: file.fileUrl || file.url,
-        id: file.id
-      });
+/** 上传成功回调 */
+const handleUploadSuccess = (response: any, uploadFile: any) => {
+  if (response.code === 200) {
+    uploadFile.url = response.data.url;
+    nextTick(() => {
+      form.value.invoiceAnnex = fileList.value
+        .map((f) => f.url)
+        .filter(Boolean)
+        .join(',');
     });
-    form.value.invoiceAttachment = fileList.value.map((f) => f.url || f.name).join(',');
+    proxy?.$modal.msgSuccess('上传成功');
+  } else {
+    proxy?.$modal.msgError(response.msg || '上传失败');
   }
-  fileSelectorVisible.value = false;
 };
 
 /** 删除文件 */
-const handleRemoveFile = (index: number) => {
-  fileList.value.splice(index, 1);
-  form.value.invoiceAttachment = fileList.value.map((f) => f.url || f.name).join(',');
+const handleRemoveUploadFile = (uploadFile: any) => {
+  form.value.invoiceAnnex = fileList.value
+    .map((f) => f.url)
+    .filter(Boolean)
+    .join(',');
 };
 
 /** 预览文件 */
-const handlePreviewFile = (file: any) => {
-  if (!file.url) {
+const handlePreviewUploadFile = (uploadFile: any) => {
+  if (uploadFile.url) {
+    window.open(uploadFile.url, '_blank');
+  } else {
     proxy?.$modal.msgWarning('文件地址不存在');
-    return;
   }
-  window.open(file.url, '_blank');
 };
 
 /** 提交表单 */

src/views/bill/statementOrder/addDrawer.vue

@@ -173,9 +173,16 @@
           <span style="color: #409eff; font-weight: 600">对账附件</span>
         </el-divider>
 
-        <div style="margin-bottom: 10px">
-          <el-button type="primary" icon="Upload" @click="handleOpenFileSelector">点击上传</el-button>
-        </div>
+        <el-upload
+          :action="uploadAction"
+          :on-success="handleUploadSuccess"
+          :before-upload="beforeUpload"
+          :show-file-list="false"
+          multiple
+          style="margin-bottom: 10px"
+        >
+          <el-button type="primary" icon="Upload">点击上传</el-button>
+        </el-upload>
 
         <el-table :data="fileList" border style="width: 100%; margin-bottom: 20px">
           <el-table-column type="index" label="序号" width="80" align="center" />
@@ -185,10 +192,11 @@
               {{ scope.row.url || '暂无地址' }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="200" align="center">
+          <el-table-column label="操作" width="250" align="center">
             <template #default="scope">
               <el-button type="primary" link @click="handleDownloadFile(scope.row)">下载</el-button>
               <el-button type="primary" link @click="handlePreviewFile(scope.row)">预览</el-button>
+              <el-button type="danger" link @click="handleRemoveFile(scope.$index)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -209,9 +217,6 @@
 
   <!-- 客户订单抽屉 -->
   <OrderMainDrawer ref="orderMainDrawerRef" @success="handleOrderSelected" />
-
-  <!-- 文件选择器 -->
-  <FileSelector v-model="fileSelectorVisible" :multiple="true" :allowed-types="[1, 2, 3, 4, 5]" title="选择对账附件" @confirm="handleFileSelected" />
 </template>
 
 <script setup name="AddDrawer" lang="ts">
@@ -226,7 +231,6 @@ import { OrderDeliverVO } from '@/api/order/orderDeliver/types';
 import { listComStaff } from '@/api/company/comStaff';
 import { ComStaffVO, ComStaffQuery } from '@/api/company/comStaff/types';
 import OrderMainDrawer from './orderMainDrawer.vue';
-import FileSelector from '@/components/FileSelector/index.vue';
 import { getCustomerDeliverOrders } from '@/api/order/orderDeliver';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -298,8 +302,7 @@ const customerLoading = ref(false);
 const customerOptions = ref<CustomerInfoVO[]>([]);
 const staffOptions = ref<ComStaffVO[]>([]);
 const orderMainDrawerRef = ref<any>();
-const fileSelectorRef = ref<any>();
-const fileSelectorVisible = ref(false);
+const uploadAction = import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload';
 const currentSelectedOrders = ref<OrderDeliverVO[]>([]);
 const preloadedOrders = ref<OrderDeliverVO[]>([]); // 预加载的订单列表
 
@@ -542,41 +545,42 @@ const handleProductCurrentChange = (val: number) => {
   productPage.pageNum = val;
 };
 
-/** 文件上传改变 */
-const handleFileChange = (file: any, uploadFileList: any[]) => {
-  // 更新文件列表
-  fileList.value = uploadFileList;
-  // 更新表单中的附件地址
-  form.value.annexAddress = uploadFileList.map((f) => f.name).join(',');
+/** 上传前校验 */
+const beforeUpload = (file: any) => {
+  const isLt50M = file.size / 1024 / 1024 < 50;
+  if (!isLt50M) {
+    proxy?.$modal.msgWarning('上传文件大小不能超过 50MB!');
+  }
+  return isLt50M;
+};
+
+/** 上传成功回调 */
+const handleUploadSuccess = (response: any, file: any) => {
+  if (response.code === 200) {
+    fileList.value.push({
+      name: file.name,
+      url: response.data.url,
+      id: undefined
+    });
+    // 更新表单中的附件地址
+    form.value.annexAddress = fileList.value
+      .map((f) => f.url)
+      .filter(Boolean)
+      .join(',');
+    proxy?.$modal.msgSuccess('上传成功');
+  } else {
+    proxy?.$modal.msgError(response.msg || '上传失败');
+  }
 };
 
 /** 删除文件 */
 const handleRemoveFile = (index: number) => {
   fileList.value.splice(index, 1);
   // 更新表单中的附件地址
-  form.value.annexAddress = fileList.value.map((f) => f.name).join(',');
-};
-
-/** 打开文件选择器 */
-const handleOpenFileSelector = () => {
-  fileSelectorVisible.value = true;
-};
-
-/** 处理文件选择完成 */
-const handleFileSelected = (files: any[]) => {
-  if (files && files.length > 0) {
-    // 将选中的文件添加到文件列表
-    files.forEach((file) => {
-      fileList.value.push({
-        name: file.fileName || file.name,
-        url: file.fileUrl || file.url,
-        id: file.id
-      });
-    });
-    // 更新表单中的附件地址
-    form.value.annexAddress = fileList.value.map((f) => f.url || f.name).join(',');
-  }
-  fileSelectorVisible.value = false;
+  form.value.annexAddress = fileList.value
+    .map((f) => f.url)
+    .filter(Boolean)
+    .join(',');
 };
 
 /** 下载文件 */

src/views/order/saleOrder/orderAffirm.vue

@@ -39,7 +39,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="信用额度">
+            <el-form-item label="临时额度">
               <el-input v-model="orderInfo.temporaryQuota" placeholder="0" disabled />
             </el-form-item>
           </el-col>