|
|
@@ -1,1292 +1,886 @@
|
|
|
<template>
|
|
|
- <div class="f_box">
|
|
|
- <div class="f_box_top">
|
|
|
- <div class="f_box_top_left">
|
|
|
- <div class="f_box_top_title">
|
|
|
- 所有文件
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="f_box_top_right">
|
|
|
- <div class="btn">
|
|
|
- 上传文件
|
|
|
- </div>
|
|
|
- <div class="btn delBtn">
|
|
|
- 删除
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="f_box" @dragover.prevent @drop="handleDrop">
|
|
|
+ <div class="f_box_top">
|
|
|
+ <div class="f_box_top_left">
|
|
|
+ <div class="f_box_top_title">所有文件</div>
|
|
|
+ </div>
|
|
|
+ <div class="f_box_top_right">
|
|
|
+ <div class="btn" @click="serchFile">刷新</div>
|
|
|
+ <div class="btn" @click="addImg($event)">
|
|
|
+ 上传文件
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="*"
|
|
|
+ style="display: none"
|
|
|
+ multiple="multiple"
|
|
|
+ @change="beforeUpload($event)"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="f_box_top">
|
|
|
- <div class="f_box_top_left">
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="f_box_top_right">
|
|
|
- <div class="input">
|
|
|
- <input type="text" v-model="fileName" placeholder="请输入你需要搜索的文件名字" @keyup.enter="serchFile">
|
|
|
- <div class="serch" @click="serchFile"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="none_box" v-if="fileArray.length == 0">
|
|
|
- 暂无上传文件
|
|
|
- </div>
|
|
|
- <div class="f_box_file_list" v-else-if="stype == '2' && fileArray.length" v-loading.body="isLoading">
|
|
|
- <div class="list_file_box">
|
|
|
- <div class="list_top">
|
|
|
- <div class="check">
|
|
|
- <div class="list_allcheck" @click="checkAll" v-if="fileArray.length">
|
|
|
- <img :src="checkImg" alt="" v-if="checkArray.length != fileArray.length">
|
|
|
- <img :src="checkIsImg" alt="" v-else>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="name">文件名</div>
|
|
|
- <div class="size">大小</div>
|
|
|
- <div class="type">类型</div>
|
|
|
- <div class="time">上传时间</div>
|
|
|
- </div>
|
|
|
- <div class="list_content" :class="{ active: checkArray.indexOf(item.id) != -1 }"
|
|
|
- @click="checkFile(item.id)" v-for="(item, index) in fileArray" :key="index">
|
|
|
- <div class="check">
|
|
|
- <div class="list_allcheck">
|
|
|
- <img :src="checkImg" alt="" v-if="checkArray.indexOf(item.id) == -1">
|
|
|
- <img :src="checkIsImg" alt="" v-else>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="name">
|
|
|
- <div class="list_file_name">
|
|
|
- <img :src="officeImg" alt="" v-if="item.type == 1">
|
|
|
- <img :src="pdfImg" alt="" v-if="item.type == 4">
|
|
|
- <img :src="videoImg" alt="" v-if="item.type == 2">
|
|
|
- <img :src="otherImg" alt="" v-if="item.type == 5">
|
|
|
- <img :src="item.file" alt="" v-if="item.type == 3">
|
|
|
- <el-tooltip :content="item.name" placement="top" effect="dark">
|
|
|
- <div>{{ item.name }}</div>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="size">
|
|
|
- {{ item.size }}
|
|
|
- </div>
|
|
|
- <div class="type">
|
|
|
- {{ retrunType(item) }}
|
|
|
- </div>
|
|
|
- <div class="time">
|
|
|
- {{ item.time }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="btn delBtn" @click="batchDelete">删除</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="f_box_top">
|
|
|
+ <div class="f_box_top_left">
|
|
|
+ <el-select v-model="checkFolderid" filterable @change="serchFile">
|
|
|
+ <el-option v-for="item in myFolderArray"
|
|
|
+ :key="item.folderid"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.folderid">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="f_box_top_right">
|
|
|
+ <div class="input">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="fileName"
|
|
|
+ placeholder="请输入你需要搜索的文件名字"
|
|
|
+ @keyup.enter="serchFile"
|
|
|
+ />
|
|
|
+ <div class="serch" @click="serchFile"></div>
|
|
|
</div>
|
|
|
- <div v-if="proVisible" class="mask">
|
|
|
- <div class="progressBox">
|
|
|
- <div class="lbox">
|
|
|
- <img src="../../../assets/loading.gif" />上传中，请稍后
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="none_box" v-if="fileArray.length == 0">暂无上传文件</div>
|
|
|
+ <div
|
|
|
+ class="f_box_file_list"
|
|
|
+ v-else-if="stype == '2' && fileArray.length"
|
|
|
+ v-loading.body="isLoading"
|
|
|
+ >
|
|
|
+ <div class="list_file_box">
|
|
|
+ <el-table
|
|
|
+ :data="fileArray"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ style="width: 100%"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ :row-key="(row) => row.id"
|
|
|
+ ref="myTable"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="50px" :reserve-selection="true"></el-table-column>
|
|
|
+ <el-table-column prop="name" label="文件名" show-overflow-tooltip min-width="15"></el-table-column>
|
|
|
+ <el-table-column prop="username" label="拥有者" show-overflow-tooltip min-width="20"></el-table-column>
|
|
|
+ <el-table-column prop="folderName" label="所属文件夹" show-overflow-tooltip min-width="20"></el-table-column>
|
|
|
+ <el-table-column label="处理状态" width="80px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ getState(scope.row.ingestionStatus) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="是否已提取知识图谱" width="150px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ getState2(scope.row.extractionStatus) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="documentType" label="文件类型" show-overflow-tooltip min-width="10"></el-table-column>
|
|
|
+ <!-- <el-table-column label="公开状态" show-overflow-tooltip width="80px"></el-table-column> -->
|
|
|
+ <el-table-column prop="time" label="上传时间" show-overflow-tooltip min-width="20"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="200px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <!-- <el-button type="primary" size="small">查看</el-button> -->
|
|
|
+ <el-button type="danger" size="small" v-if="scope.row.userid == userid" @click="deleteFile(scope.row.id, scope.row.documentid)">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ style="margin-top: 10px"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="limit"
|
|
|
+ :total="total"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <div v-if="proVisible" class="mask">
|
|
|
+ <div class="progressBox">
|
|
|
+ <div class="lbox">
|
|
|
+ <img src="../../../assets/loading.gif" />上传中，请稍后
|
|
|
</div>
|
|
|
- <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
|
|
|
- <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
|
|
|
- <wOffice :dialogVisibleOffice.sync="dialogVisibleOffice" :url="wurl"></wOffice>
|
|
|
- <el-dialog title="移动至" :visible.sync="moveBox" width="400px" @close="moveBox = false" class="dialog">
|
|
|
- <div>
|
|
|
- <div class="type_nav_box" v-for="(item, index) in checkTypeArray" :key="index">
|
|
|
- <div class="nav" :class="{ active: item.open }" @click.stop="openChild(index)">
|
|
|
- <span class="down"></span>
|
|
|
- <span class="file"></span>
|
|
|
- <el-tooltip :content="item.name" placement="top" effect="dark">:
|
|
|
- <!-- content to trigger tooltip here -->
|
|
|
- <span class="name">{{ item.name }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="child" v-if="item.open">
|
|
|
- <div class="nav" v-for="(item2, index2) in item.child" :key="index + '-' + index2"
|
|
|
- :class="{ active: moveChild.id == item2.id }" @click.stop="checkMoveChild(item2)">
|
|
|
- <span class="file"></span>
|
|
|
- <el-tooltip :content="item2.name" placement="top" effect="dark">:
|
|
|
- <!-- content to trigger tooltip here -->
|
|
|
- <span class="name">{{ item2.name }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <span slot="footer">
|
|
|
- <el-button @click="moveBox = false">取 消</el-button>
|
|
|
- <el-button type="primary" @click="confirmMove">确 定</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
|
|
|
+ <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
|
|
|
+ <wOffice
|
|
|
+ :dialogVisibleOffice.sync="dialogVisibleOffice"
|
|
|
+ :url="wurl"
|
|
|
+ ></wOffice>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import officeImg from '../../../assets/icon/sourceFile/office.png'
|
|
|
-import pdfImg from '../../../assets/icon/sourceFile/pdf.png'
|
|
|
-import videoImg from '../../../assets/icon/sourceFile/video.png'
|
|
|
-import otherImg from '../../../assets/icon/sourceFile/other.png'
|
|
|
-import checkImg from '../../../assets/icon/sourceFile/check.png'
|
|
|
-import checkIsImg from '../../../assets/icon/sourceFile/check_is.png'
|
|
|
-
|
|
|
+import officeImg from "../../../assets/icon/sourceFile/office.png";
|
|
|
+import pdfImg from "../../../assets/icon/sourceFile/pdf.png";
|
|
|
+import videoImg from "../../../assets/icon/sourceFile/video.png";
|
|
|
+import otherImg from "../../../assets/icon/sourceFile/other.png";
|
|
|
+import checkImg from "../../../assets/icon/sourceFile/check.png";
|
|
|
+import checkIsImg from "../../../assets/icon/sourceFile/check_is.png";
|
|
|
|
|
|
import wVideo from "../test/file/wVideo.vue";
|
|
|
import wpdf from "../test/file/wPdf2.vue";
|
|
|
import wOffice from "../test/file/wOffice.vue";
|
|
|
|
|
|
-import JSZip from "jszip";
|
|
|
-import FileSaver from "file-saver";
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
|
|
|
const getFile = (url) => {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- var credentials = {
|
|
|
- accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
- secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
- }; //秘钥形式的登录上传
|
|
|
- window.AWS.config.update(credentials);
|
|
|
- window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
- let url2 = url;
|
|
|
- let _url2 = "";
|
|
|
- if (
|
|
|
- url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
|
|
|
- ) {
|
|
|
- _url2 = url2.split(
|
|
|
- "https://view.officeapps.live.com/op/view.aspx?src="
|
|
|
- )[1];
|
|
|
- } else {
|
|
|
- _url2 = url2;
|
|
|
- }
|
|
|
- var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
|
|
|
- let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1].replace(/\+/g, ' '))
|
|
|
- var params = {
|
|
|
- Bucket: "ccrb",
|
|
|
- Key: name
|
|
|
- };
|
|
|
- s3.getObject(params, function (err, data) {
|
|
|
- if (err) {
|
|
|
- console.log(err, err.stack)
|
|
|
- resolve({ data: 1 });
|
|
|
- } else {
|
|
|
- resolve({ data: data.Body });
|
|
|
- console.log(data);
|
|
|
- } // sxuccessful response
|
|
|
-
|
|
|
- });
|
|
|
- // axios({
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+ let url2 = url;
|
|
|
+ let _url2 = "";
|
|
|
+ if (
|
|
|
+ url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
|
|
|
+ ) {
|
|
|
+ _url2 = url2.split(
|
|
|
+ "https://view.officeapps.live.com/op/view.aspx?src="
|
|
|
+ )[1];
|
|
|
+ } else {
|
|
|
+ _url2 = url2;
|
|
|
+ }
|
|
|
+ var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
|
|
|
+ let name = decodeURIComponent(
|
|
|
+ _url2
|
|
|
+ .split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1]
|
|
|
+ .replace(/\+/g, " ")
|
|
|
+ );
|
|
|
+ var params = {
|
|
|
+ Bucket: "ccrb",
|
|
|
+ Key: name,
|
|
|
+ };
|
|
|
+ s3.getObject(params, function (err, data) {
|
|
|
+ if (err) {
|
|
|
+ console.log(err, err.stack);
|
|
|
+ resolve({ data: 1 });
|
|
|
+ } else {
|
|
|
+ resolve({ data: data.Body });
|
|
|
+ console.log(data);
|
|
|
+ } // sxuccessful response
|
|
|
});
|
|
|
+ // axios({
|
|
|
+ });
|
|
|
};
|
|
|
export default {
|
|
|
- components: {
|
|
|
- wVideo,
|
|
|
- wpdf,
|
|
|
- wOffice,
|
|
|
+ components: {
|
|
|
+ wVideo,
|
|
|
+ wpdf,
|
|
|
+ wOffice,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ userid: {
|
|
|
+ type: String,
|
|
|
},
|
|
|
- props: {
|
|
|
- userid: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- typeArray: {
|
|
|
- type: Array,
|
|
|
- },
|
|
|
- pid: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- type: {
|
|
|
- type: String
|
|
|
- }
|
|
|
+ typeArray: {
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ pid: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
},
|
|
|
- watch: {
|
|
|
- pid: {
|
|
|
- immediate: true,
|
|
|
- deep: true,
|
|
|
- handler(newValue, oldValue) {
|
|
|
- this.fileArray = []
|
|
|
- this.checkArray = []
|
|
|
- this.fileName = ''
|
|
|
- this.getData()
|
|
|
- },
|
|
|
- },
|
|
|
+ moFolderid: {
|
|
|
+ type: String
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isLoading: false,
|
|
|
- proVisible: false,
|
|
|
- stype: 2,
|
|
|
- fileArray: [],
|
|
|
- officeImg: officeImg,
|
|
|
- pdfImg: pdfImg,
|
|
|
- videoImg: videoImg,
|
|
|
- otherImg: otherImg,
|
|
|
- checkImg: checkImg,
|
|
|
- checkIsImg: checkIsImg,
|
|
|
- checkArray: [],
|
|
|
- dialogVisiblePdf: false,
|
|
|
- dialogVisibleVideo: false,
|
|
|
- dialogVisibleOffice: false,
|
|
|
- wurl: '',
|
|
|
- moveBox: false,
|
|
|
- checkTypeArray: [],
|
|
|
- moveChild: '',
|
|
|
- fileName: '',
|
|
|
+ myFolderArray: {
|
|
|
+ type: Array,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ pid: {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ this.fileArray = [];
|
|
|
+ this.checkArray = [];
|
|
|
+ this.fileName = "";
|
|
|
+ this.checkFolderid = this.moFolderid
|
|
|
+ // this.getData();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoading: false,
|
|
|
+ proVisible: false,
|
|
|
+ stype: 2,
|
|
|
+ fileArray: [],
|
|
|
+ officeImg: officeImg,
|
|
|
+ pdfImg: pdfImg,
|
|
|
+ videoImg: videoImg,
|
|
|
+ otherImg: otherImg,
|
|
|
+ checkImg: checkImg,
|
|
|
+ checkIsImg: checkIsImg,
|
|
|
+ checkArray: [],
|
|
|
+ checkArray2: [],
|
|
|
+ dialogVisiblePdf: false,
|
|
|
+ dialogVisibleVideo: false,
|
|
|
+ dialogVisibleOffice: false,
|
|
|
+ wurl: "",
|
|
|
+ moveBox: false,
|
|
|
+ checkTypeArray: [],
|
|
|
+ moveChild: "",
|
|
|
+ fileName: "",
|
|
|
+ limit: 10,
|
|
|
+ total: 0,
|
|
|
+ page: 1,
|
|
|
+ checkFolderid: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getState() {
|
|
|
+ return function (item) {
|
|
|
+ if (item == "success") {
|
|
|
+ return "成功";
|
|
|
+ } else if (item == "failed") {
|
|
|
+ return "失败";
|
|
|
+ } else if (item == "augmenting") {
|
|
|
+ return "上传中";
|
|
|
+ } else if (item == "pending") {
|
|
|
+ return "待处理";
|
|
|
+ } else if (item == "enriched") {
|
|
|
+ return "enriched";
|
|
|
+ } else if(!item){
|
|
|
+ return "上传中"
|
|
|
+ } else {
|
|
|
+ return item
|
|
|
}
|
|
|
+ };
|
|
|
},
|
|
|
- computed: {
|
|
|
- retrunType() {
|
|
|
- return function (item) {
|
|
|
- if (item.type == 1) {
|
|
|
- return 'OFFICE文件'
|
|
|
- } else if (item.type == 2) {
|
|
|
- return '视频文件'
|
|
|
- } else if (item.type == 3) {
|
|
|
- return '图片'
|
|
|
- } else if (item.type == 4) {
|
|
|
- return 'PDF文件'
|
|
|
- } else if (item.type == 5) {
|
|
|
- return '其他文件'
|
|
|
- }
|
|
|
- };
|
|
|
+ getState2() {
|
|
|
+ return function (item) {
|
|
|
+ if (item == "success") {
|
|
|
+ return "成功";
|
|
|
+ } else if (item == "failed") {
|
|
|
+ return "失败";
|
|
|
+ } else if (item == "pending") {
|
|
|
+ return "待处理";
|
|
|
+ } else if (item == "processing") {
|
|
|
+ return "处理中";
|
|
|
+ } else if (item == "enriched") {
|
|
|
+ return "enriched";
|
|
|
+ } else if(!item){
|
|
|
+ return "上传中"
|
|
|
+ } else {
|
|
|
+ return item
|
|
|
}
|
|
|
+ };
|
|
|
},
|
|
|
- methods: {
|
|
|
- getData() {
|
|
|
- let type = this.pid.split('/')
|
|
|
- let id = ''
|
|
|
- if (type.length == 1) {
|
|
|
- if (type[0] == 'wu') {
|
|
|
- id = '0'
|
|
|
- } else {
|
|
|
- id = this.typeArray[type[0]].id
|
|
|
- }
|
|
|
- } else {
|
|
|
- id = this.typeArray[type[0]].child[type[1]].id
|
|
|
- }
|
|
|
- this.isLoading = true;
|
|
|
- let params = {
|
|
|
- uid: this.userid,
|
|
|
- pid: id,
|
|
|
- n: this.fileName
|
|
|
- };
|
|
|
- this.ajax
|
|
|
- .get(this.$store.state.api + "getSourceFile", params)
|
|
|
- .then((res) => {
|
|
|
- this.isLoading = false;
|
|
|
- // this.fileArray = res.data[0];
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- this.isLoading = false;
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- },
|
|
|
- addImg(e) {
|
|
|
- var el = e.currentTarget;
|
|
|
- el.getElementsByTagName("input")[0].click();
|
|
|
- e.target.value = "";
|
|
|
- },
|
|
|
- serchFile() {
|
|
|
- this.getData();
|
|
|
- },
|
|
|
- beforeUpload(event) {
|
|
|
- // const loading = this.openLoading();
|
|
|
- let file = "";
|
|
|
- let cfindex2 = 0;
|
|
|
- for (var cfindex = 0; cfindex < event.target.files.length; cfindex++) {
|
|
|
- file = event.target.files[cfindex];
|
|
|
-
|
|
|
- var credentials = {
|
|
|
- accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
- secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
- }; //秘钥形式的登录上传
|
|
|
- window.AWS.config.update(credentials);
|
|
|
- window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
-
|
|
|
- var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
- var _this = this;
|
|
|
- let _name = file.name;
|
|
|
- // _this.progress = 0;
|
|
|
- _this.proVisible = true;
|
|
|
- // _this.isFinishSize = 0;
|
|
|
- // _this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
|
|
|
- let size = file.size;
|
|
|
- _this.$forceUpdate();
|
|
|
- if (file) {
|
|
|
- var params = {
|
|
|
- Key:
|
|
|
- file.name.split(".")[0] +
|
|
|
- new Date().getTime() +
|
|
|
- "." +
|
|
|
- file.name.split(".")[file.name.split(".").length - 1],
|
|
|
- ContentType: file.type,
|
|
|
- Body: file,
|
|
|
- "Access-Control-Allow-Credentials": "*",
|
|
|
- ACL: "public-read",
|
|
|
- }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
|
|
|
- var options = {
|
|
|
- partSize: 2048 * 1024 * 1024,
|
|
|
- queueSize: 2,
|
|
|
- leavePartsOnError: true,
|
|
|
- };
|
|
|
- bucket
|
|
|
- .upload(params, options)
|
|
|
- .on("httpUploadProgress", function (evt) {
|
|
|
- //这里可以写进度条
|
|
|
- // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
|
|
|
- // _this.progress = parseInt((evt.loaded / evt.total) * 100);
|
|
|
- // _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
|
|
|
- // _this.$forceUpdate();
|
|
|
- })
|
|
|
- .send(function (err, data) {
|
|
|
- cfindex2++;
|
|
|
-
|
|
|
- // _this.progress = 100;
|
|
|
- // _this.isFinishSize = _this.isAllSize;
|
|
|
- // _this.$forceUpdate();
|
|
|
- // setTimeout(() => {
|
|
|
- // _this.proVisible = false;
|
|
|
- // _this.$forceUpdate();
|
|
|
- // }, 1000);
|
|
|
- setTimeout(() => {
|
|
|
- if (
|
|
|
- cfindex2 == event.target.files.length ||
|
|
|
- cfindex2 > event.target.files.length
|
|
|
- ) {
|
|
|
- _this.proVisible = false;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- // loading.close();
|
|
|
- if (err) {
|
|
|
- _this.$message.error("上传失败");
|
|
|
- } else {
|
|
|
- let _type = 2;
|
|
|
- var imgA = [
|
|
|
- "png",
|
|
|
- "jpg",
|
|
|
- "jpeg",
|
|
|
- "bmp",
|
|
|
- "gif",
|
|
|
- "webp",
|
|
|
- "psd",
|
|
|
- "svg",
|
|
|
- "tiff",
|
|
|
- ];
|
|
|
- var fileA = [
|
|
|
- "DOC",
|
|
|
- "DOCX",
|
|
|
- "DOCM",
|
|
|
- "DOTM",
|
|
|
- "DOTX",
|
|
|
- "PPTX",
|
|
|
- "PPSX",
|
|
|
- "PPT",
|
|
|
- "PPS",
|
|
|
- "PPTM",
|
|
|
- "POTM",
|
|
|
- "PPAM",
|
|
|
- "POTX",
|
|
|
- "PPSM",
|
|
|
- "XLSX",
|
|
|
- "XLS",
|
|
|
- ];
|
|
|
- var videoA = [
|
|
|
- "AVI",
|
|
|
- "NAVI",
|
|
|
- "MPEG",
|
|
|
- "ASF",
|
|
|
- "MOV",
|
|
|
- "WMV",
|
|
|
- "3GP",
|
|
|
- "RM",
|
|
|
- "RMVB",
|
|
|
- "FLV",
|
|
|
- "F4V",
|
|
|
- "H.264",
|
|
|
- "H.265",
|
|
|
- "REAL VIDEO",
|
|
|
- "MKV",
|
|
|
- "WebM",
|
|
|
- "HDDVD",
|
|
|
- "MP4",
|
|
|
- "MPG",
|
|
|
- "M4V",
|
|
|
- "MGV",
|
|
|
- "OGV",
|
|
|
- "QTM",
|
|
|
- "STR",
|
|
|
- "AMC",
|
|
|
- "DVX",
|
|
|
- "EVO",
|
|
|
- "DAT",
|
|
|
- "OGG",
|
|
|
- "OGM",
|
|
|
- ];
|
|
|
- if (
|
|
|
- fileA.indexOf(
|
|
|
- data.Location.split(".")[
|
|
|
- data.Location.split(".").length - 1
|
|
|
- ].toLocaleUpperCase()
|
|
|
- ) != -1
|
|
|
- ) {
|
|
|
- _type = 1; //word 文件
|
|
|
- } else if (
|
|
|
- videoA.indexOf(
|
|
|
- data.Location.split(".")[
|
|
|
- data.Location.split(".").length - 1
|
|
|
- ].toLocaleUpperCase()
|
|
|
- ) != -1
|
|
|
- ) {
|
|
|
- _type = 2; //视频
|
|
|
- } else if (
|
|
|
- imgA.indexOf(
|
|
|
- data.Location.split(".")[
|
|
|
- data.Location.split(".").length - 1
|
|
|
- ].toLocaleLowerCase()
|
|
|
- ) != -1
|
|
|
- ) {
|
|
|
- _type = 3; //图片
|
|
|
- } else if (
|
|
|
- 'pdf'.indexOf(
|
|
|
- data.Location.split(".")[
|
|
|
- data.Location.split(".").length - 1
|
|
|
- ].toLocaleLowerCase()
|
|
|
- ) != -1
|
|
|
- ) {
|
|
|
- _type = 4; //pdf
|
|
|
- } else {
|
|
|
- _type = 5; //文件
|
|
|
- }
|
|
|
- let _file = {
|
|
|
- name: _name,
|
|
|
- url: data.Location,
|
|
|
- type: _type,
|
|
|
- size: _this.formatFileSize(size)
|
|
|
- }
|
|
|
- // if (_this.checkJson.file) {
|
|
|
- // _this.checkJson.file.push({
|
|
|
- // name: file.name,
|
|
|
- // url: data.Location,
|
|
|
- // type: _type,
|
|
|
- // });
|
|
|
- // } else {
|
|
|
- // _this.checkJson.file = []
|
|
|
- // _this.checkJson.file.push({
|
|
|
- // name: file.name,
|
|
|
- // url: data.Location,
|
|
|
- // type: _type,
|
|
|
- // });
|
|
|
- // }
|
|
|
- let type = 1
|
|
|
- if (
|
|
|
- cfindex2 == event.target.files.length ||
|
|
|
- cfindex2 > event.target.files.length
|
|
|
- ) {
|
|
|
- type = 2
|
|
|
- }
|
|
|
- _this.addSource(_file, type)
|
|
|
- _this.$forceUpdate();
|
|
|
-
|
|
|
- console.log(_file);
|
|
|
- console.log(data.Location);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- addSource(file, ctype) {
|
|
|
- let _ctype = ctype
|
|
|
- let type = this.pid.split('/')
|
|
|
- let id = ''
|
|
|
- if (type.length == 1) {
|
|
|
- if (type[0] == 'wu') {
|
|
|
- id = '0'
|
|
|
- } else {
|
|
|
- id = this.typeArray[type[0]].id
|
|
|
- }
|
|
|
- } else {
|
|
|
- id = this.typeArray[type[0]].child[type[1]].id
|
|
|
- }
|
|
|
- let params = [{
|
|
|
- n: file.name,
|
|
|
- file: file.url,
|
|
|
- type: file.type,
|
|
|
- pid: id,
|
|
|
- uid: this.userid,
|
|
|
- size: file.size,
|
|
|
- }];
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "addSourceFile", params)
|
|
|
- .then((res) => {
|
|
|
- if (_ctype == 2) {
|
|
|
- this.$message.success('上传成功');
|
|
|
- this.getData()
|
|
|
- }
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- },
|
|
|
- formatFileSize(bytes) {
|
|
|
- if (bytes < 1024) {
|
|
|
- return bytes + "B";
|
|
|
- } else if (bytes < 1048576) {
|
|
|
- return (bytes / 1024).toFixed(2) + "KB";
|
|
|
- } else if (bytes < 1073741824) {
|
|
|
- return (bytes / 1048576).toFixed(2) + "MB";
|
|
|
- } else {
|
|
|
- return (bytes / 1073741824).toFixed(2) + "GB";
|
|
|
- }
|
|
|
- },
|
|
|
- checkFile(id) {
|
|
|
- if (this.checkArray.indexOf(id) == -1) {
|
|
|
- this.checkArray.push(id)
|
|
|
- } else {
|
|
|
- this.checkArray.splice(this.checkArray.indexOf(id), 1)
|
|
|
- }
|
|
|
- },
|
|
|
- selectFile(item) {
|
|
|
- if (item.type == 3) {
|
|
|
- this.$hevueImgPreview(item.file);
|
|
|
- } else if (item.type == 5) {
|
|
|
- this.downloadFile(item);
|
|
|
- } else if (item.type == 1) {
|
|
|
- this.dialogVisibleOffice = true
|
|
|
- this.wurl = item.file
|
|
|
- } else if (item.type == 2) {
|
|
|
- this.dialogVisibleVideo = true
|
|
|
- this.wurl = item.file
|
|
|
- } else if (item.type == 4) {
|
|
|
- this.dialogVisiblePdf = true
|
|
|
- this.wurl = item.file
|
|
|
- }
|
|
|
- },
|
|
|
- downloadFile(f) {
|
|
|
- this.isLoading = true;
|
|
|
- var credentials = {
|
|
|
- accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
- secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
- }; //秘钥形式的登录上传
|
|
|
- window.AWS.config.update(credentials);
|
|
|
- window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
- let url2 = f.file;
|
|
|
- let _url2 = "";
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page = val;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.isLoading = true;
|
|
|
+ let params = {
|
|
|
+ uid: this.userid,
|
|
|
+ folderid: this.checkFolderid,
|
|
|
+ n: this.fileName,
|
|
|
+ page: this.page,
|
|
|
+ num: this.limit,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.fileApi + "getFile", [params])
|
|
|
+ .then((res) => {
|
|
|
+ this.isLoading = false;
|
|
|
+ console.log(res.data);
|
|
|
+ this.total = res.data.result.length ? res.data.result[0].num : 0;
|
|
|
+ this.fileArray = res.data.result;
|
|
|
+ this.$parent.$refs.folder.getData();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.isLoading = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSelectionChange(selectedRows) {
|
|
|
+ this.checkArray = selectedRows.map((row) => row.id);
|
|
|
+ this.checkArray2 = selectedRows.map(row => ({ id: row.id, documentid: row.documentid }));
|
|
|
+ },
|
|
|
+ addImg(e) {
|
|
|
+ var el = e.currentTarget;
|
|
|
+ el.getElementsByTagName("input")[0].click();
|
|
|
+ e.target.value = "";
|
|
|
+ },
|
|
|
+ handleDrop(event) {
|
|
|
+ event.preventDefault(); // 阻止默认的浏览器下载行为
|
|
|
+ const files = event.dataTransfer.files;
|
|
|
+ if (files.length) {
|
|
|
+ this.beforeUpload({target:{files}});
|
|
|
+ }
|
|
|
+ },
|
|
|
+ serchFile() {
|
|
|
+ this.page = 1;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ async beforeUpload(event) {
|
|
|
+ // const loading = this.openLoading();
|
|
|
+ let file = "";
|
|
|
+ let cfindex2 = 0;
|
|
|
+ this.proVisible = true;
|
|
|
+ const allowedExtensions = [
|
|
|
+ "csv","xls","xlsx","md","pdf","txt","ppt","pptx","docx"
|
|
|
+ ];
|
|
|
+
|
|
|
+ for (var cfindex = 0; cfindex < event.target.files.length; cfindex++) {
|
|
|
+ file = event.target.files[cfindex];
|
|
|
+ const fileExtension = file.name.split('.').pop().toLowerCase();
|
|
|
+
|
|
|
+ if (!allowedExtensions.includes(fileExtension)) {
|
|
|
+ this.$message.error(`不支持的文件格式: ${file.name}`);
|
|
|
+ cfindex2++;
|
|
|
+ setTimeout(() => {
|
|
|
if (
|
|
|
- url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
|
|
|
+ cfindex2 == event.target.files.length ||
|
|
|
+ cfindex2 > event.target.files.length
|
|
|
) {
|
|
|
- _url2 = url2.split(
|
|
|
- "https://view.officeapps.live.com/op/view.aspx?src="
|
|
|
- )[1];
|
|
|
- } else {
|
|
|
- _url2 = url2;
|
|
|
- }
|
|
|
- let _this = this;
|
|
|
-
|
|
|
- var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
|
|
|
- let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1].replace(/\+/g, ' '))
|
|
|
- var params = {
|
|
|
- Bucket: "ccrb",
|
|
|
- Key: name
|
|
|
- };
|
|
|
- s3.getObject(params, function (err, data) {
|
|
|
- _this.isLoading = false
|
|
|
- if (err) console.log(err, err.stack); // an error occurred
|
|
|
- else {
|
|
|
- let url = window.URL.createObjectURL(new Blob([data.Body]));
|
|
|
- let a = document.createElement("a");
|
|
|
- a.name = f.name;
|
|
|
- a.href = url;
|
|
|
- a.download = f.name;
|
|
|
- a.click();
|
|
|
- console.log(data);
|
|
|
- } // sxuccessful response
|
|
|
-
|
|
|
- });
|
|
|
- },
|
|
|
- checkAll() {
|
|
|
- if (this.checkArray.length === this.fileArray.length) {
|
|
|
- this.checkArray = []
|
|
|
- } else {
|
|
|
- this.checkArray = []
|
|
|
- this.fileArray.forEach(item => {
|
|
|
- this.checkArray.push(item.id)
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- deleteFile() {
|
|
|
- this.$confirm("确定删除这些文件吗?", "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- let params = [
|
|
|
- { ids: this.checkArray.join(",") }
|
|
|
- ]
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "deleteSourceFile", params)
|
|
|
- .then((res) => {
|
|
|
- this.$message({
|
|
|
- message: "删除成功",
|
|
|
- type: "success",
|
|
|
- });
|
|
|
- this.checkArray = []
|
|
|
- this.getData();
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- this.$message.error("删除失败");
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => { });
|
|
|
- },
|
|
|
- openMoveBox() {
|
|
|
- if (this.checkArray.length == 0) {
|
|
|
- this.$message.error("请添加分类再移动");
|
|
|
- return
|
|
|
- }
|
|
|
- let type = this.pid.split('/')
|
|
|
- let id = ''
|
|
|
- if (type.length == 1) {
|
|
|
- if (type[0] == 'wu') {
|
|
|
- id = '0'
|
|
|
- } else {
|
|
|
- id = this.typeArray[type[0]].id
|
|
|
- }
|
|
|
- } else {
|
|
|
- id = this.typeArray[type[0]].child[type[1]].id
|
|
|
+ this.proVisible = false;
|
|
|
}
|
|
|
- let array = JSON.parse(JSON.stringify(this.typeArray)).filter((item) => {
|
|
|
- item.open = false
|
|
|
- return item.child.length > 0
|
|
|
- })
|
|
|
+ }, 1000);
|
|
|
+ continue; // 跳过不支持的文件
|
|
|
+ }
|
|
|
+ let uuid = uuidv4();
|
|
|
+ let formData = new FormData();
|
|
|
+ const timestamp = Date.now();
|
|
|
+ const baseName = file.name.slice(0, -(fileExtension.length + 1));
|
|
|
+ formData.append('file', new File([file], `${baseName}${timestamp}.${fileExtension}`));
|
|
|
+ formData.append('collection_ids', JSON.stringify([this.moFolderid]));
|
|
|
+ formData.append('id', uuid);
|
|
|
+ formData.append('metadata', JSON.stringify({title: file.name}));
|
|
|
+ formData.append('ingestion_mode', "fast");
|
|
|
+
|
|
|
+ // 使用同步方式上传文件
|
|
|
+ await this.uploadFile(formData, file.name, uuid);
|
|
|
+ cfindex2++;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ if (
|
|
|
+ cfindex2 == event.target.files.length ||
|
|
|
+ cfindex2 > event.target.files.length
|
|
|
+ ) {
|
|
|
+ this.proVisible = false;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async uploadFile(formData, name, uuid) {
|
|
|
+ try {
|
|
|
+ // 确保formData是正确的格式
|
|
|
+ // this.$store.state.fileApi + "upload"
|
|
|
+ this.ajax.post("https://r2rserver.cocorobo.cn/v3/documents", formData, {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data'
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- array = array.filter((item) => {
|
|
|
- item.child = item.child.filter((item2) => {
|
|
|
- return item2.id != id
|
|
|
- })
|
|
|
- return item.child.length > 0
|
|
|
- })
|
|
|
- this.moveChild = ''
|
|
|
- this.checkTypeArray = array
|
|
|
- this.moveBox = true
|
|
|
- },
|
|
|
- openChild(index) {
|
|
|
- this.checkTypeArray[index].open = !this.checkTypeArray[index].open
|
|
|
- },
|
|
|
- checkMoveChild(item) {
|
|
|
- this.moveChild = item
|
|
|
- },
|
|
|
- confirmMove() {
|
|
|
- if (!this.moveChild) {
|
|
|
- this.$message.error("请选择移动的分类");
|
|
|
- return
|
|
|
- }
|
|
|
- this.$confirm("确定将文件移动到" + this.moveChild.name + "下吗?", "提示", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
+ let params = {
|
|
|
+ n: name,
|
|
|
+ did: uuid,
|
|
|
+ uid: this.userid,
|
|
|
+ fid: this.moFolderid,
|
|
|
+ mofid: "",
|
|
|
+ }
|
|
|
+ const res2 = await this.ajax.post(this.$store.state.api + 'addFile', [params]);
|
|
|
+ this.$message.success("上传成功");
|
|
|
+ this.getData();
|
|
|
+ } catch (err) {
|
|
|
+ console.error(err);
|
|
|
+ this.$message.error("上传失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatFileSize(bytes) {
|
|
|
+ if (bytes < 1024) {
|
|
|
+ return bytes + "B";
|
|
|
+ } else if (bytes < 1048576) {
|
|
|
+ return (bytes / 1024).toFixed(2) + "KB";
|
|
|
+ } else if (bytes < 1073741824) {
|
|
|
+ return (bytes / 1048576).toFixed(2) + "MB";
|
|
|
+ } else {
|
|
|
+ return (bytes / 1073741824).toFixed(2) + "GB";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deleteFile(fileid, documentid) {
|
|
|
+ this.$confirm("确定删除该文件吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ let params = [{
|
|
|
+ ids: fileid,
|
|
|
+ documentids: documentid,
|
|
|
+ }];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.fileApi + "deleteFile", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "删除成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.checkArray = []
|
|
|
+ this.checkArray2 = []
|
|
|
+ this.$refs.myTable.clearSelection();
|
|
|
+ this.getData();
|
|
|
})
|
|
|
- .then(() => {
|
|
|
- let params = [
|
|
|
- {
|
|
|
- ids: this.checkArray.join(","),
|
|
|
- pid: this.moveChild.id
|
|
|
- }
|
|
|
- ]
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "updateSourceFilePid", params)
|
|
|
- .then((res) => {
|
|
|
- this.$message({
|
|
|
- message: "移动成功",
|
|
|
- type: "success",
|
|
|
- });
|
|
|
- this.checkArray = []
|
|
|
- this.moveChild = ''
|
|
|
- this.moveBox = false
|
|
|
- this.getData();
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- this.$message.error("删除失败");
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => { });
|
|
|
- },
|
|
|
- downPan() {
|
|
|
- this.downloadFile({file:'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/icons1712477416633.png',name:"icons1712477416633.png"})
|
|
|
- // let array = []
|
|
|
- // this.fileArray.forEach(item => {
|
|
|
- // if (this.checkArray.includes(item.id)) {
|
|
|
- // array.push(item)
|
|
|
- // }
|
|
|
- // })
|
|
|
- // if (array.length == 1) {
|
|
|
- // this.downloadFile(array[0])
|
|
|
- // } else {
|
|
|
- // this.uploadCourse(array)
|
|
|
- // }
|
|
|
- },
|
|
|
- uploadCourse(item) {
|
|
|
- this.isLoading = true;
|
|
|
- const _chapInfo = item;
|
|
|
- let url = [];
|
|
|
- for (let i = 0; i < _chapInfo.length; i++) {
|
|
|
- url.push({
|
|
|
- name: _chapInfo[i].name,
|
|
|
- url: _chapInfo[i].file,
|
|
|
- });
|
|
|
- }
|
|
|
- console.log(url);
|
|
|
- this.downLoadAll(url);
|
|
|
- },
|
|
|
- downLoadAll(url) {
|
|
|
- const data = url; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
|
|
|
- const zip = new JSZip();
|
|
|
- const cache = {};
|
|
|
- const promises = [];
|
|
|
- data.forEach((item) => {
|
|
|
- const promise = getFile(item.url).then((data) => {
|
|
|
- if (data.data != 1) {
|
|
|
- // 下载文件, 并存成ArrayBuffer对象
|
|
|
- const file_name = item.name; // 获取文件名
|
|
|
- zip.file(file_name, data.data, { binary: true }); // 逐个添加文件
|
|
|
- cache[file_name] = data.data;
|
|
|
- }
|
|
|
- });
|
|
|
- promises.push(promise);
|
|
|
- });
|
|
|
- Promise.all(promises).then(() => {
|
|
|
- zip.generateAsync({ type: "blob" }).then((content) => {
|
|
|
- // 生成二进制流
|
|
|
- FileSaver.saveAs(content, "附件.zip"); // 利用file-saver保存文件 自定义文件名
|
|
|
- setTimeout(() => {
|
|
|
- this.isLoading = false;
|
|
|
- }, 2000);
|
|
|
- });
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("删除失败");
|
|
|
+ console.error(err);
|
|
|
});
|
|
|
- },
|
|
|
- addFileToTest(){
|
|
|
- if(!this.checkArray.length){
|
|
|
- return
|
|
|
- }
|
|
|
- let file = []
|
|
|
- for(let i = 0; i < this.fileArray.length; i++){
|
|
|
- if(this.checkArray.includes(this.fileArray[i].id)){
|
|
|
- file.push(this.fileArray[i])
|
|
|
- }
|
|
|
- }
|
|
|
- this.$emit('addFile', file)
|
|
|
- this.checkArray = []
|
|
|
- }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getData();
|
|
|
+ batchDelete(){
|
|
|
+ if(!this.checkArray.length){
|
|
|
+ this.$message.warning("请选择要删除的文件")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let array = this.checkArray2.map(item => item.id);
|
|
|
+ let array2 = this.checkArray2.map(item => item.documentid);
|
|
|
+ this.deleteFile(array.join(","), array2.join(","))
|
|
|
},
|
|
|
-}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.f_box {
|
|
|
- width: 100%;
|
|
|
- /* height: 100%; */
|
|
|
- position: relative;
|
|
|
+ width: 100%;
|
|
|
+ /* height: 100%; */
|
|
|
+ position: relative;
|
|
|
+ min-height: 400px;
|
|
|
}
|
|
|
|
|
|
.f_box_top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 10px;
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.f_box_top_left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
-.f_box_top_title{
|
|
|
- font-size: 16px;
|
|
|
- /* font-weight: bold; */
|
|
|
+.f_box_top_title {
|
|
|
+ font-size: 16px;
|
|
|
+ /* font-weight: bold; */
|
|
|
}
|
|
|
|
|
|
.f_box_top .btn {
|
|
|
- display: flex;
|
|
|
- cursor: pointer;
|
|
|
- align-items: center;
|
|
|
- height: 30px;
|
|
|
- padding: 0 8px;
|
|
|
- background: rgb(0, 97, 255);
|
|
|
- color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 14px;
|
|
|
- align-items: center;
|
|
|
+ display: flex;
|
|
|
+ cursor: pointer;
|
|
|
+ align-items: center;
|
|
|
+ height: 30px;
|
|
|
+ padding: 0 8px;
|
|
|
+ background: rgb(0, 97, 255);
|
|
|
+ color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.f_box_top .btn2 {
|
|
|
- display: flex;
|
|
|
- cursor: pointer;
|
|
|
- align-items: center;
|
|
|
- height: 30px;
|
|
|
- padding: 0 8px;
|
|
|
- background: #fff;
|
|
|
- color: rgb(0, 97, 255);
|
|
|
- border: 1px solid rgb(0, 97, 255);
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 14px;
|
|
|
- align-items: center;
|
|
|
+ display: flex;
|
|
|
+ cursor: pointer;
|
|
|
+ align-items: center;
|
|
|
+ height: 30px;
|
|
|
+ padding: 0 8px;
|
|
|
+ background: #fff;
|
|
|
+ color: rgb(0, 97, 255);
|
|
|
+ border: 1px solid rgb(0, 97, 255);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.f_box_top .delBtn {
|
|
|
- background: rgb(255, 0, 13);
|
|
|
+ background: rgb(255, 0, 13);
|
|
|
}
|
|
|
|
|
|
-.f_box_top .btn+.btn2,
|
|
|
-.f_box_top .btn+.btn,
|
|
|
-.f_box_top .btn2+.btn2,
|
|
|
-.f_box_top .btn2+.delBtn {
|
|
|
- margin-left: 15px;
|
|
|
+.f_box_top .btn + .btn2,
|
|
|
+.f_box_top .btn + .btn,
|
|
|
+.f_box_top .btn2 + .btn2,
|
|
|
+.f_box_top .btn2 + .delBtn {
|
|
|
+ margin-left: 15px;
|
|
|
}
|
|
|
|
|
|
.f_box_top_right {
|
|
|
- margin-left: auto;
|
|
|
- max-width: calc(100% - 280px);
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.f_box_top_right>.input {
|
|
|
- position: relative;
|
|
|
- width: 250px;
|
|
|
- height: 35px;
|
|
|
-}
|
|
|
-
|
|
|
-.f_box_top_right>.input>input {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border: 1px solid #D9D9D9;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 0 45px 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 12px;
|
|
|
- outline: none;
|
|
|
-}
|
|
|
-
|
|
|
-.f_box_top_right>.input>.serch {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- background-image: url('../../../assets/icon/sourceFile/search.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- position: absolute;
|
|
|
- right: 13px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.f_box_top_right>.tab {
|
|
|
- height: 30px;
|
|
|
- width: 80px;
|
|
|
- margin-left: 15px;
|
|
|
- background: #e7e7e7;
|
|
|
- border: 2px solid #D9D9D9;
|
|
|
- border-radius: 5px;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.f_box_top_right>.tab>.table,
|
|
|
-.f_box_top_right>.tab>.list {
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.f_box_top_right>.tab>.list::before {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- background-image: url('../../../assets/icon/sourceFile/list.png');
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.f_box_top_right>.tab>.list.active,
|
|
|
-.f_box_top_right>.tab>.table.active {
|
|
|
- background: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.f_box_top_right>.tab>.table::before {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- background-image: url('../../../assets/icon/sourceFile/table.png');
|
|
|
- background-size: 100% 100%;
|
|
|
+ margin-left: auto;
|
|
|
+ max-width: calc(100% - 280px);
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.f_box_top_right > .input {
|
|
|
+ position: relative;
|
|
|
+ width: 250px;
|
|
|
+ height: 35px;
|
|
|
+}
|
|
|
+
|
|
|
+.f_box_top_right > .input > input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 0 45px 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 12px;
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+.f_box_top_right > .input > .serch {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-image: url("../../../assets/icon/sourceFile/search.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ right: 13px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.f_box_top_right > .tab {
|
|
|
+ height: 30px;
|
|
|
+ width: 80px;
|
|
|
+ margin-left: 15px;
|
|
|
+ background: #e7e7e7;
|
|
|
+ border: 2px solid #d9d9d9;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.f_box_top_right > .tab > .table,
|
|
|
+.f_box_top_right > .tab > .list {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.f_box_top_right > .tab > .list::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-image: url("../../../assets/icon/sourceFile/list.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.f_box_top_right > .tab > .list.active,
|
|
|
+.f_box_top_right > .tab > .table.active {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.f_box_top_right > .tab > .table::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-image: url("../../../assets/icon/sourceFile/table.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
.mask {
|
|
|
- background-color: rgb(0 0 0 / 30%);
|
|
|
- /* position: fixed; */
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 90;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ background-color: rgb(0 0 0 / 30%);
|
|
|
+ /* position: fixed; */
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 90;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
.progressBox {
|
|
|
- width: 300px;
|
|
|
- height: 150px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- box-shadow: 0 0 6px 1px #bfbfbf;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
- color: #6c6c6c;
|
|
|
+ width: 300px;
|
|
|
+ height: 150px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 0 6px 1px #bfbfbf;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ color: #6c6c6c;
|
|
|
}
|
|
|
|
|
|
-.progressBox>>>.el-progress-bar__outer {
|
|
|
- background-color: #d1dfff !important;
|
|
|
+.progressBox >>> .el-progress-bar__outer {
|
|
|
+ background-color: #d1dfff !important;
|
|
|
}
|
|
|
|
|
|
.progressBox .lbox {
|
|
|
- height: 50px;
|
|
|
- font-size: 19px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #747474;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 19px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #747474;
|
|
|
}
|
|
|
|
|
|
.progressBox .lbox img {
|
|
|
- width: 40px;
|
|
|
- margin-right: 20px;
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
.closeCss {
|
|
|
- position: absolute;
|
|
|
- top: 8px;
|
|
|
- right: 8px;
|
|
|
- cursor: pointer;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
}
|
|
|
|
|
|
-.closeCss>img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+.closeCss > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.f_box_file_square {
|
|
|
- height: calc(100% - 55px);
|
|
|
- overflow: auto;
|
|
|
- width: 100%;
|
|
|
- padding: 55px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-content: flex-start;
|
|
|
- position: relative;
|
|
|
+ height: calc(100% - 55px);
|
|
|
+ overflow: auto;
|
|
|
+ width: 100%;
|
|
|
+ padding: 55px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: flex-start;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-.f_box_file_square>.f_box_file {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 160px;
|
|
|
- height: 160px;
|
|
|
- cursor: pointer;
|
|
|
- margin: 0 36px 36px 0;
|
|
|
- border-radius: 20px;
|
|
|
- position: relative;
|
|
|
+.f_box_file_square > .f_box_file {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 160px;
|
|
|
+ height: 160px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 36px 36px 0;
|
|
|
+ border-radius: 20px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-.f_box_file_square>.f_box_file:hover {
|
|
|
- background: #F0F2F5;
|
|
|
+.f_box_file_square > .f_box_file:hover {
|
|
|
+ background: #f0f2f5;
|
|
|
}
|
|
|
|
|
|
-.f_box_file_square>.f_box_file:hover>.check {
|
|
|
- display: block;
|
|
|
+.f_box_file_square > .f_box_file:hover > .check {
|
|
|
+ display: block;
|
|
|
}
|
|
|
|
|
|
-.f_box_file_square>.f_box_file.check {
|
|
|
- background: #E0EAFB;
|
|
|
+.f_box_file_square > .f_box_file.check {
|
|
|
+ background: #e0eafb;
|
|
|
}
|
|
|
|
|
|
-.f_box_file_square>.f_box_file.check>.check {
|
|
|
- display: block;
|
|
|
+.f_box_file_square > .f_box_file.check > .check {
|
|
|
+ display: block;
|
|
|
}
|
|
|
|
|
|
-.f_box_file_square>.f_box_file>.check {
|
|
|
- position: absolute;
|
|
|
- left: 15px;
|
|
|
- top: 15px;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- background-size: 100%;
|
|
|
- display: none;
|
|
|
+.f_box_file_square > .f_box_file > .check {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px;
|
|
|
+ top: 15px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-size: 100%;
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
-.f_box_file_square>.f_box_file>.check>img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
+.f_box_file_square > .f_box_file > .check > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
}
|
|
|
|
|
|
-.f_box_file_square>.f_box_file>img {
|
|
|
- width: 90px;
|
|
|
- height: 90px;
|
|
|
- object-fit: cover;
|
|
|
+.f_box_file_square > .f_box_file > img {
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
+ object-fit: cover;
|
|
|
}
|
|
|
|
|
|
-.f_box_file_square>.f_box_file>.name {
|
|
|
- white-space: nowrap;
|
|
|
- font-size: 14px;
|
|
|
- max-width: 80%;
|
|
|
- overflow: hidden;
|
|
|
- margin: 4px auto 0;
|
|
|
- text-overflow: ellipsis;
|
|
|
- text-align: center;
|
|
|
+.f_box_file_square > .f_box_file > .name {
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 14px;
|
|
|
+ max-width: 80%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 4px auto 0;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
.f_box_file_list {
|
|
|
- /* height: calc(100% - 55px); */
|
|
|
- /* overflow: auto; */
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+ /* height: calc(100% - 55px); */
|
|
|
+ /* overflow: auto; */
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.f_box_file_list>.f_box_file {}
|
|
|
-
|
|
|
-
|
|
|
-.f_box_file_allCheck {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- font-size: 14px;
|
|
|
- top: 20px;
|
|
|
- left: 10px;
|
|
|
- cursor: pointer;
|
|
|
+.f_box_file_list > .f_box_file {
|
|
|
}
|
|
|
|
|
|
-.f_box_file_allCheck>img {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- object-fit: cover;
|
|
|
- margin-right: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.dialog>>>.el-dialog__body {
|
|
|
- padding: 10px 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.type_nav_box {}
|
|
|
-
|
|
|
-.type_nav_box>.nav {
|
|
|
- height: 40px;
|
|
|
- border-radius: 5px;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- padding: 0 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 10px;
|
|
|
- font-size: 16px;
|
|
|
- color: #000;
|
|
|
-}
|
|
|
-
|
|
|
-.type_nav_box>.nav>.down {
|
|
|
- min-width: 14px;
|
|
|
- height: 14px;
|
|
|
- background-image: url('../../../assets/icon/sourceFile/icon_arrow.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 10px;
|
|
|
- transition: all 0.3s;
|
|
|
- transform: rotate(-90deg);
|
|
|
-}
|
|
|
-
|
|
|
-.type_nav_box>.nav.active>.down {
|
|
|
- transform: rotate(0deg);
|
|
|
-}
|
|
|
-
|
|
|
-.type_nav_box>.nav>.file {
|
|
|
- min-width: 18px;
|
|
|
- height: 18px;
|
|
|
- background-image: url('../../../assets/icon/sourceFile/file.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.type_nav_box>.nav>.name {
|
|
|
- max-width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-
|
|
|
-.type_nav_box>.child {}
|
|
|
-
|
|
|
-.type_nav_box>.child>.nav {
|
|
|
- height: 40px;
|
|
|
- border-radius: 5px;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- padding: 0 10px 0 50px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 10px;
|
|
|
- font-size: 16px;
|
|
|
- color: #000;
|
|
|
-}
|
|
|
-
|
|
|
-.type_nav_box>.child>.nav.active {
|
|
|
- background: #e0eafb;
|
|
|
-}
|
|
|
-
|
|
|
-.type_nav_box>.child>.nav>.file {
|
|
|
- min-width: 18px;
|
|
|
- height: 18px;
|
|
|
- background-image: url('../../../assets/icon/sourceFile/file.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.type_nav_box>.child>.nav>.name {
|
|
|
- max-width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-
|
|
|
-.none_box {
|
|
|
- height: calc(100% - 55px);
|
|
|
- overflow: auto;
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+.f_box_file_allCheck {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ font-size: 14px;
|
|
|
+ top: 20px;
|
|
|
+ left: 10px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-.list_file_box {
|
|
|
- width: 100%;
|
|
|
+.f_box_file_allCheck > img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ object-fit: cover;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
-.list_file_box>.list_top {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 50px;
|
|
|
+.dialog >>> .el-dialog__body {
|
|
|
+ padding: 10px 20px;
|
|
|
}
|
|
|
|
|
|
-.list_file_box .check {
|
|
|
- width: 21px;
|
|
|
- margin: 0 10px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+.type_nav_box {
|
|
|
}
|
|
|
|
|
|
-.list_allcheck {
|
|
|
- cursor: pointer;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
+.type_nav_box > .nav {
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
}
|
|
|
|
|
|
-.list_allcheck>img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
+.type_nav_box > .nav > .down {
|
|
|
+ min-width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ background-image: url("../../../assets/icon/sourceFile/icon_arrow.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 10px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ transform: rotate(-90deg);
|
|
|
}
|
|
|
|
|
|
-.list_file_box .name {
|
|
|
- width: calc(100% - 21px - 100px - 100px - 200px - 50px);
|
|
|
- margin-right: 10px;
|
|
|
+.type_nav_box > .nav.active > .down {
|
|
|
+ transform: rotate(0deg);
|
|
|
}
|
|
|
|
|
|
-.list_file_box .size {
|
|
|
- width: 100px;
|
|
|
- margin-right: 10px;
|
|
|
+.type_nav_box > .nav > .file {
|
|
|
+ min-width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background-image: url("../../../assets/icon/sourceFile/file.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
-.list_file_box .type {
|
|
|
- width: 100px;
|
|
|
- margin-right: 10px;
|
|
|
+.type_nav_box > .nav > .name {
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
-.list_file_box .time {
|
|
|
- width: 200px;
|
|
|
+.type_nav_box > .child {
|
|
|
}
|
|
|
|
|
|
-.list_top>.check,
|
|
|
-.list_top>.name,
|
|
|
-.list_top>.size,
|
|
|
-.list_top>.type,
|
|
|
-.list_top>.time {
|
|
|
- font-size: 16px;
|
|
|
+.type_nav_box > .child > .nav {
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px 0 50px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
}
|
|
|
|
|
|
-.list_content {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 50px;
|
|
|
- cursor: pointer;
|
|
|
+.type_nav_box > .child > .nav.active {
|
|
|
+ background: #e0eafb;
|
|
|
}
|
|
|
|
|
|
-.list_content:hover {
|
|
|
- background: #f0f2f5;
|
|
|
+.type_nav_box > .child > .nav > .file {
|
|
|
+ min-width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background-image: url("../../../assets/icon/sourceFile/file.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
-.list_content.active {
|
|
|
- background: #e0eafb;
|
|
|
+.type_nav_box > .child > .nav > .name {
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
-.list_content>.name {
|
|
|
- font-size: 14px;
|
|
|
- color: #000000e6;
|
|
|
+.none_box {
|
|
|
+ height: calc(100% - 55px);
|
|
|
+ overflow: auto;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
-.list_content>.size,
|
|
|
-.list_content>.type,
|
|
|
-.list_content>.time {
|
|
|
- font-size: 12px;
|
|
|
- color: #00000099;
|
|
|
+.list_file_box {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
.list_file_name {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
-.list_file_name>img {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- object-fit: cover;
|
|
|
- margin-right: 5px;
|
|
|
+.list_file_name > img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ object-fit: cover;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
-.list_file_name>div {
|
|
|
- max-width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
+.list_file_name > div {
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
</style>
|
