完善收付款管理

src/views/payment/receipt-claim-record-form.vue

@@ -96,51 +96,11 @@
         </el-table>
       </section-card>
 
-      <section-card title="附件信息"><template #extra><el-button
-            v-if="form.attachments.length"
-            type="primary"
-            :icon="Download"
-            @click="downloadAttachments"
-            >批量下载</el-button
-          ></template>
-        <el-table :data="form.attachments" border>
-          <el-table-column type="index" label="序号" width="64" align="center" />
-          <el-table-column label="文件名" min-width="220">
-            <template #default="{ row }">{{ row.originalName || row.name || '-' }}</template>
-          </el-table-column>
-          <el-table-column prop="description" label="附件描述" min-width="240" />
-          <el-table-column label="文件大小" width="120">
-            <template #default="{ row }">{{ displayFileSize(row.size) }}</template>
-          </el-table-column>
-          <el-table-column prop="uploadUserName" label="上传人" width="140" />
-          <el-table-column prop="uploadTime" label="上传时间" width="170" />
-          <el-table-column label="操作" width="120" align="center">
-            <template #default="{ row }">
-              <div class="claim-record-form-page__links">
-                <el-link v-if="row.url || row.link" type="primary" @click="viewAttachment(row)">
-                  查看
-                </el-link>
-                <el-link
-                  v-if="form.claimStatus === 'claimed'"
-                  type="danger"
-                  @click="removeAttachment(row)"
-                  >删除</el-link
-                >
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <vehicle-attachment-upload
-          v-if="form.claimStatus === 'claimed'"
+      <section-card title="附件信息">
+        <vehicle-attachment-table
           v-model="form.attachments"
-          :multiple="true"
-          :limit="20"
-          :max-size="500"
-          :file-types="attachmentFileTypes"
-          :show-file-list="false"
-          button-text="上传附件"
-          class="claim-record-form-page__uploader"
-          @change="handleAttachmentChange"
+          :readonly="form.claimStatus !== 'claimed'"
+          @update:model-value="handleAttachmentUpdate"
         />
       </section-card>
 
@@ -156,8 +116,8 @@
 </template>
 
 <script>
-import { Download } from '@element-plus/icons-vue';
 import * as api from '@/api/payment/receiptClaimRecord';
+import VehicleAttachmentTable from '@/components/vehicle-attachment-table/main.vue';
 
 const emptyForm = () => ({
   receiptNoticeNo: '',
@@ -182,26 +142,10 @@ const emptyForm = () => ({
 
 export default {
   name: 'ReceiptClaimRecordForm',
+  components: { VehicleAttachmentTable },
   data() {
     return {
-      Download,
       form: emptyForm(),
-      attachmentFileTypes: [
-        'pdf',
-        'bmp',
-        'jpeg',
-        'png',
-        'jpg',
-        'doc',
-        'docx',
-        'ppt',
-        'pptx',
-        'xlsx',
-        'xls',
-        'eml',
-        'msg',
-        'zip',
-      ],
     };
   },
   computed: {
@@ -241,40 +185,9 @@ export default {
         return [];
       }
     },
-    downloadAttachments() {
-      this.form.attachments.forEach(file => {
-        const url = file.url || file.link;
-        if (!url) return;
-        const anchor = document.createElement('a');
-        anchor.href = url;
-        anchor.download = file.originalName || file.name || '';
-        anchor.target = '_blank';
-        anchor.click();
-      });
-    },
-    viewAttachment(row) {
-      window.open(row.url || row.link, '_blank', 'noopener');
-    },
-    async handleAttachmentChange(files) {
-      const userInfo = this.$store.getters.userInfo || {};
-      const userName = userInfo.realName || userInfo.userName || '';
-      const uploadTime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
-      this.form.attachments = (files || []).map(file => ({
-        ...file,
-        description: file.description || '',
-        uploadUserName: file.uploadUserName || userName,
-        uploadTime: file.uploadTime || uploadTime,
-      }));
-      await this.persistAttachments('附件上传成功');
-    },
-    async removeAttachment(row) {
-      await this.$confirm('确定删除该附件吗？', '删除附件', {
-        type: 'warning',
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-      });
-      this.form.attachments = this.form.attachments.filter(item => item !== row);
-      await this.persistAttachments('附件删除成功');
+    async handleAttachmentUpdate(files) {
+      this.form.attachments = files || [];
+      await this.persistAttachments('附件更新成功');
     },
     async persistAttachments(message) {
       await api.updateAttachments({
@@ -296,15 +209,6 @@ export default {
     formatMoney(value) {
       return Number(value || 0).toFixed(2);
     },
-    displayFileSize(size) {
-      if (size === null || size === undefined || size === '') return '-';
-      if (typeof size === 'string' && /[a-z]/i.test(size)) return size;
-      const bytes = Number(size);
-      if (!Number.isFinite(bytes)) return size;
-      if (bytes < 1024) return `${bytes}B`;
-      if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
-      return `${(bytes / 1024 / 1024).toFixed(2)}MB`;
-    },
   },
 };
 </script>