登记大厅-图片上传列表

src/views/AAAFont/dataRegistration/enrollApply.vue

@@ -16,19 +16,12 @@
               <Icon style="color: #409eff" icon="ant-design:send-outlined" />申请信息</div
             >
             <el-form ref="form" :model="form" label-width="130px">
-              <Row class="row1">
+              <Row :gutter="[0, 30]" class="row1">
                 <Col :span="12">
                   <el-form-item label="登记编号">
                     <el-input class="input1" v-model="form.enrollCode" />
                   </el-form-item>
                 </Col>
-                <Col :span="12">
-                  <el-form-item label="申请日期">
-                    <el-input class="input1" v-model="form.enrollDate" />
-                  </el-form-item>
-                </Col>
-              </Row>
-              <Row class="row1">
                 <Col :span="12">
                   <el-form-item label="申请人">
                     <el-input class="input1" v-model="form.applicant" />
@@ -39,8 +32,6 @@
                     <el-input class="input1" v-model="form.dataName" />
                   </el-form-item>
                 </Col>
-              </Row>
-              <Row class="row1">
                 <Col :span="12">
                   <el-form-item label="所属行业">
                     <el-input class="input1" v-model="form.industry" />
@@ -51,8 +42,6 @@
                     <el-input class="input1" v-model="form.dataSource" />
                   </el-form-item>
                 </Col>
-              </Row>
-              <Row class="row1">
                 <Col :span="12">
                   <el-form-item label="场景类型">
                     <el-Select placeholder="" class="input1" v-model="form.sceneType" clearable>
@@ -65,28 +54,6 @@
                     </el-Select>
                   </el-form-item>
                 </Col>
-                <Col :span="12">
-                  <el-form-item label="上传文件">
-                    <el-upload
-                      class="upload-demo"
-                      action="https://jsonplaceholder.typicode.com/posts/"
-                      :on-preview="handlePreview"
-                      :on-remove="handleRemove"
-                      :before-remove="beforeRemove"
-                      multiple
-                      :limit="3"
-                      :on-exceed="handleExceed"
-                      :file-list="fileList"
-                    >
-                      <el-button size="small" type="primary">选择文件</el-button>
-                      <template #tip>
-                        <div>可上传jpg/png/excel/word/pdf文件，且不超过5Mb</div>
-                      </template>
-                    </el-upload>
-                  </el-form-item>
-                </Col>
-              </Row>
-              <Row class="row1">
                 <Col :span="24">
                   <el-form-item label="数据结构">
                     <el-input
@@ -97,8 +64,6 @@
                     />
                   </el-form-item>
                 </Col>
-              </Row>
-              <Row class="row1">
                 <Col :span="12">
                   <el-form-item label="数据规模">
                     <el-input class="input1" v-model="form.dataSize" />
@@ -109,8 +74,6 @@
                     <el-input class="input1" v-model="form.updateRate" />
                   </el-form-item>
                 </Col>
-              </Row>
-              <Row class="row1">
                 <Col :span="12">
                   <el-form-item label="应用场景">
                     <el-input type="textarea" rows="3" class="input1" v-model="form.applyScene" />
@@ -121,8 +84,6 @@
                     <el-input type="textarea" rows="3" class="input1" v-model="form.ruleExplain" />
                   </el-form-item>
                 </Col>
-              </Row>
-              <Row class="row1">
                 <Col :span="12">
                   <el-form-item label="存证公证编号">
                     <el-input class="input1" v-model="form.applyScene" />
@@ -135,7 +96,41 @@
                 </Col>
               </Row>
               <Row>
-                <Col :span="24" style="text-align: right; padding: 0 4% 0 0; margin-top: -10px">
+                <Col :span="12">
+                  <el-form-item label="上传文件">
+                    <el-upload
+                      class="upload-demo"
+                      :action="''"
+                      :on-success="fileSuccess"
+                      :before-upload="handleFileChange"
+                      multiple
+                      :limit="3"
+                      :file-list="fileList"
+                    >
+                      <el-button size="small" type="primary">选择文件</el-button>
+                      <template #tip>
+                        <div>可上传jpg/png/excel/word/pdf文件，且不超过5Mb</div>
+                      </template>
+                    </el-upload>
+                  </el-form-item>
+                </Col>
+              </Row>
+              <div style="text-align: left; flex-direction: column; margin-bottom: 30px">
+                <Icon style="color: #409eff" icon="ant-design:send-outlined" />文件列表</div
+              >
+              <el-table
+                :data="tableData"
+                stripe
+                border
+                style="width: 100%"
+                :header-cell-style="{ background: '#E4ECFA', color: '#3F3F3F', height: '60px' }"
+              >
+                <el-table-column prop="name" label="文件名称" min-width="180" />
+                <el-table-column prop="size" label="大小" min-width="180" />
+                <el-table-column prop="type" label="文件类型" min-width="180" />
+              </el-table>
+              <Row>
+                <Col :span="24" style="text-align: right; padding: 0 4% 0 0; margin-top: 15px">
                   <el-button size="large" @click="handleCancel">取消</el-button>
                   <el-button type="primary" size="large" @click="handleSubmit">提交</el-button>
                 </Col>
@@ -247,7 +242,9 @@
             field: 'ruleExplain',
           },
         ],
-      };
+        fileList: [],
+        tableData: [],
+      }; // return
     },
     methods: {
       handleSubmit() {
@@ -257,6 +254,29 @@
       handleCancel() {
         this.$router.go(-1);
       },
+      fileSuccess() {
+        this.getFileList();
+      },
+      getFileList() {
+        console.log('fileList', this.fileList);
+      },
+      handleFileChange(file) {
+        const fileName = file.name;
+        const fileSize = file.size;
+        const fileExtension = fileName.split('.').pop(); // 获取文件后缀
+        const fileSizeInKB = (fileSize / 1024).toFixed(2) + 'K';
+        // 设置文件信息
+        const fileInfo = {
+          name: fileName,
+          size: fileSizeInKB,
+          type: fileExtension,
+        };
+        this.tableData.push(fileInfo);
+        // 打印文件信息（仅供调试）
+        console.log('文件名:', fileName);
+        console.log('文件大小:', fileSize);
+        console.log('文件后缀:', fileExtension);
+      },
     },
   };
 </script>