功能优化：修正表单字段命名及UI细节调整
This commit is contained in:
syruan
parent
aaaeee7b5b
commit
7c68ec49f4
|
|
@ -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-item label="关键字" prop="keyword">
|
||||
<el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable style="width: 240px" @keyup.enter.native="handleQuery"/>
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="关键字" prop="keyWord">
|
||||
<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">
|
||||
<span>按住Ctrl可同时多选，支持上传图片、视频、PDF、Word格式文件，单个文件不能超过20MB</span>
|
||||
<div class="el-upload__tip text-center" slot="tip">
|
||||
<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";
|
||||
import { imgUpLoad, fileUpLoad } from "@/api/system/upload";
|
||||
} from "@/api/archives/archives";
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue