功能优化：修正表单字段命名及UI细节调整

src/views/material/archives/index.vue

@@ -77,26 +77,26 @@
       </el-col>
       <!--表格数据-->
       <el-col :span="19" :xs="24">
-        <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-          <el-form-item label="关键字" prop="keyword">
+          <el-form-item label="关键字" prop="keyWord">
-            <el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable style="width: 240px" @keyup.enter.native="handleQuery"/>
+            <el-input v-model="queryParams.keyWord" placeholder="请输入关键字" clearable style="width: 240px" @keyup.enter.native="handleQuery"/>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
           </el-form-item>
-        </el-form> -->
+        </el-form>
 
         <el-row :gutter="14" style="margin-bottom: 20px;">
           <el-col :span="2">
             <el-button type="primary" plain icon="el-icon-upload" size="mini" @click="openUpLoadDialog">上传</el-button>
-          </el-col> 
+          </el-col>
           <el-col :span="2">
             <el-button type="warning" plain icon="el-icon-download" :disabled="multiple" size="mini" @click="handleExport">下载</el-button>
           </el-col>
           <el-col :span="2">
             <el-button type="success" plain icon="el-icon-download" :disabled="single" size="mini" @click="handleReName">重命名</el-button>
-          </el-col> 
+          </el-col>
           <el-col :span="2">
             <el-button type="danger" plain icon="el-icon-download" :disabled="multiple" size="mini" @click="handleAllDel">删除</el-button>
           </el-col>
@@ -105,15 +105,15 @@
             <div style="display: flex;align-items: center;height: 32px;margin-right: 10px;" @click="changeShowType(1)">
               <img src="../../../assets/img/list1.png" v-if="showType==1" style="width: 18px;height: 18px;" alt="">
               <img src="../../../assets/img/list2.png" v-else style="width: 18px;height: 18px;" alt="">
-            </div> 
+            </div>
             <div style="display: flex;align-items: center;height: 32px;" @click="changeShowType(2)">
               <img src="../../../assets/img/grid1.png" v-if="showType==2" style="width: 18px;height: 18px;" alt="">
               <img src="../../../assets/img/grid2.png" v-else style="width: 18px;height: 18px;" alt="">
-            </div> 
+            </div>
           </el-col>
           <el-col :span="4" style="float: right;">
             <el-button type="primary" plain icon="el-icon-plus" size="mini"  @click="handleAdd">新建文件夹</el-button>
-          </el-col> 
+          </el-col>
         </el-row>
         <el-row :gutter="10" style="margin-bottom: 20px;">
           <el-breadcrumb separator-class="el-icon-arrow-right">
@@ -150,7 +150,7 @@
           </el-table-column>
           <el-table-column label="类 型 " align="center" prop="docType" show-overflow-tooltip/>
           <el-table-column label="文件大小" align="center" prop="docSize" show-overflow-tooltip>
-            <template slot-scope="scope">  
+            <template slot-scope="scope">
               <span v-if="scope.row.docSize">{{ scope.row.docSize }}MB</span>
             </template>
           </el-table-column>
@@ -159,7 +159,7 @@
           <el-table-column label="上传人员 " align="center" prop="createBy" show-overflow-tooltip/>
         </el-table>
 
-        
+
         <div style="width: 100%;height: 300px;display: flex;" v-if="showType==2">
           <div style="width: 140px;height: 140px;display: flex;flex-direction: column;align-items: center;margin: 10px;" v-for="item in tableDataList" :key="item.detailsId" @click="getSubDetails(item)">
             <img src="../../../assets/img/fileIcon1.png" v-if="item.docType=='文件夹'" style="width: 60px;height: 60px;">
@@ -183,7 +183,7 @@
 
     <!-- 上传弹窗 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="600px" append-to-body>
-      <el-upload ref="upload" :limit="20" :headers="upload.headers" :multiple="true" drag 
+      <el-upload ref="upload" :limit="20" :headers="upload.headers" :multiple="true" drag
                  :action="upload.url" style="width: 100%;" :file-list="fileList"
                  :on-success="handleSuccess" :on-error="handleError" :on-remove="handleFileRemove"
                  :before-upload="beforeUpload"
@@ -191,8 +191,8 @@
       >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-        <div class="el-upload__tip text-center" slot="tip">  
+        <div class="el-upload__tip text-center" slot="tip">
-          <span>按住Ctrl可同时多选，支持上传图片、视频、PDF、Word格式文件，单个文件不能超过20MB</span> 
+          <span>按住Ctrl可同时多选，支持上传图片、视频、PDF、Word格式文件，单个文件不能超过20MB</span>
         </div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
@@ -203,7 +203,7 @@
     <!-- 图片查看 -->
     <el-dialog :visible.sync="dialogVisible">
       <img width="100%" height="650px" :src="dialogImageUrl" alt />
-    </el-dialog> 
+    </el-dialog>
     <!-- 新增弹框(新建弹窗) -->
     <el-dialog :title="addTitle" :visible.sync="addShowVisible" v-if="addShowVisible" width="500px" append-to-body :close-on-click-modal="false">
       <el-form label-width="80px" :model="addFormParams" :rules="addFormParamsRules" ref="addFormParamsRef">
@@ -253,8 +253,8 @@
           </el-form-item>
         </el-row>
       </el-form>
-    </el-dialog> 
+    </el-dialog>
-    
+
   </div>
 </template>
 
@@ -264,8 +264,8 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import {
   getArchivesTypeListApi,getAddArchivesTypeApi,updateArchivesTypeApi,delArchivesTypeApi,
   getArchivesDetailsLstApi, addArchivesDetailsApi, updateArchivesDetailsApi, delArchivesDetailsApi,downloadFileApi
-} from "@/api/archives/archives"; 
+} from "@/api/archives/archives";
-import { imgUpLoad, fileUpLoad } from "@/api/system/upload"; 
+import { imgUpLoad, fileUpLoad } from "@/api/system/upload";
 import { downloadFile } from "@/utils/download";
 import { getToken } from '@/utils/auth'
 export default {
@@ -371,7 +371,7 @@ export default {
         // 是否显示弹出层（上传导入）
         open: false,
         // 弹出层标题（上传导入）
-        title: '上传文件', 
+        title: '上传文件',
         // 设置上传的请求头部
         headers: { Authorization: 'Bearer ' + getToken() },
         // 上传的地址
@@ -594,7 +594,7 @@ export default {
         window.open(file.docUrl, windowName)
       } else {
         this.dialogVisible = true
-      } 
+      }
     },
 
     beforeUpload(file) {
@@ -776,7 +776,7 @@ export default {
     openUpLoadDialog(){
       this.uploadList=[]
       this.fileList=[]
-      this.upload.open=true; 
+      this.upload.open=true;
     },
     //文件上传-成功
     handleSuccess(response, file, fileList) {
@@ -793,12 +793,12 @@ export default {
           level:this.queryParams.level
         }
         this.uploadList.push(param)
-      } 
+      }
       // let size = (file.size / 1024 / 1024).toFixed(2)
       // console.log(size)
     },
     //文件上传删除
-    handleFileRemove(file, fileList){ 
+    handleFileRemove(file, fileList){
       console.log(file)
       console.log(fileList)
       let index = this.uploadList.findIndex(item=>item.docName==file.name)
@@ -810,37 +810,37 @@ export default {
     },
     // 文件上传成功处理
     handleFileSuccess(response, file, fileList) {
-    //   this.upload.open = false 
+    //   this.upload.open = false
     },
     // 提交上传文件
-    async submitFileForm() { 
+    async submitFileForm() {
       console.log(this.uploadList)
-      if(this.uploadList.length==0){ 
+      if(this.uploadList.length==0){
         this.$modal.msgError("请先选择上传文件");
       }else{
         let param = {
           archivesDetailsList:this.uploadList
         }
         const res = await addArchivesDetailsApi(param);
-        if (res.code === 200) { 
+        if (res.code === 200) {
           this.$modal.msgSuccess("上传成功！");
-          this.upload.open = false 
+          this.upload.open = false
           this.getList()
         }
       }
-      
+
-      // this.$refs.upload.submit() 
+      // this.$refs.upload.submit()
     },
     //取消
     cancelUpload() {
       this.getList()
       this.upload.open=false
-    }, 
+    },
     /** 导出按钮作 */
     handleExport() {
       let arr=[]
       let errorList = []
-      this.ids.forEach(item=>{ 
+      this.ids.forEach(item=>{
         console.log(item)
         if(item.docType=='文件夹'){
           errorList.push(item.detailsId)
@@ -849,21 +849,21 @@ export default {
       })
       console.log(errorList.length)
       if(errorList.length==0){
-        downloadFileApi({'ids':arr.join(',')}).then((res) => { 
+        downloadFileApi({'ids':arr.join(',')}).then((res) => {
           downloadFile({
               fileName: "文件档案下载.zip",
               fileData: res,
               fileType: "text/html;charset=UTF-8",
-          });  
+          });
         })
       }else{
         this.$modal.msgError("所选文件中包含文件夹，文件夹不能下载");
-      } 
+      }
     },
- 
+
     //切换展示模式
     changeShowType(val){
-      this.showType=val; 
+      this.showType=val;
     }
   },
 };
@@ -996,13 +996,13 @@ export default {
       color: #c0c4cc;
     }
   }
-} 
+}
 
 
 ::v-deep .el-upload{
-    width: 100%; 
+    width: 100%;
 }
 ::v-deep .el-upload-dragger{
-    width: 100%; 
+    width: 100%;
 }
 </style>