【修改】修改样式

src/views/reportProcess/components/reportForm.vue

@@ -115,16 +115,46 @@
       value: orgTableVal,
         valueName: orgTableValName
      }" :workNumFlag="true" :isOrg="true" :maxSelected="1" @confirm="isTreeOk"></orgTable>
-    <el-dialog title="上传文件" :visible.sync="dialogFile"  width="10%" :close-on-click-modal="false"
+    <el-dialog title="上传文件" :visible.sync="dialogFile"  width="30%" :close-on-click-modal="false"
                :close-on-press-escape="false" modal-append-to-body append-to-body>
-      <el-upload :disabled="formControl"  action="/library/api/report/uploadFile"  :show-file-list="true"
-                 :before-upload="beforeUploadFile" :on-remove="handleRemove"
+      <el-upload :disabled="formControl"  action="/library/api/report/uploadFile"  :show-file-list="false"
+                 :before-upload="beforeUploadFile"
                  :file-list="fileList"  multiple :on-success="onSuccess"
                   :on-preview="handlePreview"
-                 drag :class="{'disable':formControl}">
-        <i class="el-icon-upload" ></i>
-        <div class="el-upload__text">点击或拖拽上传文件</div>
+                :class="{'disable':formControl}">
+        <div class="table_top">
+          <el-button class="uploadBtn" type="primary" >上传文件</el-button>
+        </div>
+
       </el-upload>
+      <div class="table">
+        <vxe-table ref="xTable" :data="fileLists" :empty-render="{name: 'NotData'}" align="center" border stripe
+                   class="table-over" width="100%"
+                   v-table-min-height="'50px'">
+          <vxe-column show-header-overflow field="name" title="文件名称">
+            <template #default="{ row, rowIndex }">
+              <!--                      <label class="row-title" >-->
+              <!--                          <el-tooltip :content="row.name" placement="top-start">-->
+              <span class="report-name"> {{ row.name }}</span>
+            </template>
+          </vxe-column>
+          <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
+            <template #default="{ row }">
+              <el-button type="text"  class="del-btn"  v-if="!formControl" @click="handleRemove(row)">删除</el-button>
+
+            </template>
+          </vxe-column>
+
+        </vxe-table>
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="q.pageNo"
+          :page-sizes="[5, 10, 20]"
+          :page-size="q.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"/>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -160,6 +190,8 @@ export default {
   },
   data() {
     return {
+      total:0,
+      fileLists:[],
       delIds:[],
       dialogFile:false,
       privacyLevelOptions,
@@ -292,12 +324,30 @@ export default {
               id:item.fileId
             }
           })
+          this.handleCurrentChange(1)
         }
       },
       immediate: true
     }
   },
   methods: {
+    handleSizeChange(size){
+      this.q.pageSize=size
+      this.handleCurrentChange()
+    },
+    handleCurrentChange(current){
+      setTimeout(() => {
+        current = current ? current : this.q.pageNo
+        this.q.pageNo = current
+        this.fileLists = this.fileList.slice(this.q.pageSize * (current - 1), this.q.pageSize * current)
+        // console.log(this.pages.size, this.pages.size * (current - 1), this.pages.size * this.pages.current, this.list)
+        if (this.fileLists.length < 1 && current > 1) {
+          this.handleCurrentChange(current - 1)
+          return false
+        }
+        this.total = this.fileList.length
+      },500)
+    },
     handlePreview(file){
       let lastName=file.name.split('.')
       let list=['xls','xlsx']
@@ -461,17 +511,13 @@ export default {
       this.dialogUser = true
     },
     handleRemove(file, fileList) {
-      if(this.prcType == '5' || this.$route.query.taskDefinitionKey == 'reEdit'){
-        // 记录删除的文件id
-        this.delIds.push(file.id)
-      }
-      this.fileList = fileList
-      this.form.fileList = this.fileList.map(item=>{
-        return {
-          fileId:item.id,
-          fileName:item.name
+      this.form.fileList = this.fileList.filter(item=>{
+        if(item.id!=file.id){
+          return item
         }
       })
+      this.fileList=this.form.fileList
+      this.handleCurrentChange(1)
     },
     //用递归方式去除children
     getTreeData(data) {
@@ -495,6 +541,7 @@ export default {
     onSuccess(res, file,fileList){
         if(res.ok){
           // this.fileList.push({url:res.data.fullurl})//以前的错误代码
+          debugger
           this.fileList=fileList
           this.form.fileList = this.fileList.map(item=>{
             return {
@@ -502,7 +549,14 @@ export default {
               fileName:item.response?item.response.data.name:item.name
             }
           })
+          this.fileList= this.form.fileList.map(item=>{
+            return {
+              id:item.fileId,
+              name:item.fileName
+            }
+          })
           this.$refs.processFormRef.clearValidate(['fileList'])
+          this.handleCurrentChange(1)
         }
       console.log( res," this.fileList3")
     },
@@ -601,11 +655,6 @@ export default {
     }
   }
 }
-
-.uploadBtn {
-  vertical-align: super;
-}
-
 .uploadFile {
   margin-left: -35px;
   height: 36px;
@@ -663,4 +712,20 @@ export default {
 
   }
 }
+.table_top{
+  padding: 10px 13px;
+  text-align: left;
+}
+.table {
+  width: 500px;
+  margin: 0 14px 0 13px;
+  min-height: 200px;
+  ::v-deep .vxe-table--body-wrapper{
+    height: 200px;
+    overflow: auto;
+  }
+  .uploadBtn{
+    margin: 10px;
+  }
+}
 </style>