实现文件管理

javascript 复制代码
<template>
	<div>
		<el-card class="box-card" style="height: auto; overflow: auto hidden">
			<div class="top">
				<div class="left">
					<div class="upload">
						<el-button size="small" type="primary" @click="addFileBackupTask"
							>文件上传</el-button
						>
						<!-- <upload /> -->
					</div>
					<div class="group">
						<div class="block">
							<el-cascader
								v-model="value"
								:options="options"
								:props="cascaderProps"
								clearable
								@change="changeEvent"
								@expand-change="expandChange"
								ref="cascader"
							></el-cascader>
						</div>
					</div>
					<div class="time">
						<div class="block">
							<el-date-picker
								v-model="value1"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								@change="changeDate"
							>
							</el-date-picker>
						</div>
					</div>
				</div>
				<div class="middle">
					<div class="search">
						<el-input
							placeholder="请输入内容"
							prefix-icon="el-icon-search"
							v-model="input2"
							clearable
							@clear="clearAll"
							@keyup.enter.native="handleSearch"
						>
						</el-input>
					</div>
					<div class="search-button">
						<el-button type="primary" @click="handleSearch">搜索</el-button>
					</div>
				</div>
				<div class="right">
					<div class="delete">
						<el-button type="primary" @click="mutipleDelete"
							>批量删除</el-button
						>
					</div>
					<div class="download">
						<el-button type="primary" @click="download"
							><a
								:href="
									downloadPath +
									'?ids=' +
									this.fileDownloadIds +
									'&satoken=' +
									token
								"
								style="text-decoration: none; color: white; font-weight: 500"
								>批量下载</a
							></el-button
						>
					</div>
				</div>
			</div>
			<div class="drbor">
				<span class="drspan1">文件管理</span>
				<div class="drprojectTable">
					<el-table
						ref="table"
						:data="filteredTableData"
						row-key="id"
						class="drline"
						:header-cell-style="rowClass"
						@selection-change="handleSelectionChange"
						style="width: 100%"
					>
						<el-table-column type="selection" width="55"> </el-table-column>
						<el-table-column label="序号" type="index" :index="indexMethod3">
						</el-table-column>
						<el-table-column prop="organizeName" label="所属组织" sortable>
							<!-- <template slot="header" slot-scope="scope">
								所属组织
								<span class="sort">
									<i class="sort-caret ascending"></i>
									<i class="sort-caret descending"></i>
								</span>
							</template> -->
						</el-table-column>

						<el-table-column prop="docTypeName" label="文件数据类别">
						</el-table-column>
						<el-table-column prop="fileName" label="文件名称">
						</el-table-column>
						<el-table-column label="文件类型">
							<template slot-scope="scope">
								<div v-if="scope.row.fileType == 3">一般资产</div>
								<div v-if="scope.row.fileType == 2">重要资产</div>
								<div v-if="scope.row.fileType == 1">关键资产</div>
							</template>
						</el-table-column>
						<el-table-column prop="fileSize" label="大小"> </el-table-column>

						<el-table-column label="文件公开/保密">
							<template slot-scope="scope">
								<div v-if="scope.row.shareType == 1">公开</div>
								<div v-else>保密</div>
							</template>
						</el-table-column>
						<el-table-column prop="userName" label="管理人员">
						</el-table-column>
						<el-table-column prop="endTime" label="上传日期" sortable>
						</el-table-column>
						<el-table-column label="上传状态">
							<template slot-scope="scope">
								<div v-if="scope.row.backupStatus == 1">上传中</div>
								<div v-else-if="scope.row.backupStatus == 2">成功</div>
								<div v-else-if="scope.row.backupStatus == 3">失败</div>
							</template>
						</el-table-column>
						<el-table-column prop="viewCount" label="预览次数">
						</el-table-column>
						<el-table-column prop="downloadCount" label="下载次数">
						</el-table-column>

						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button
									type="text"
									size="mini"
									circle
									style="padding: 0px; font-size: 14px"
									@click="deleteRow(scope.row)"
									>删除</el-button
								>
								<a
									:href="
										downloadPath + '?ids=' + scope.row.id + '&satoken=' + token
									"
									style="
										text-decoration: none;
										color: #0095ff;
										font-weight: 500;
										margin-left: 10px;
									"
									>下载</a
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<div class="drblock">
						<el-pagination
							:current-page="currentPage"
							:background="true"
							:page-sizes="[10, 20]"
							:page-size="pageSize"
							layout=" prev, pager, next,sizes, jumper"
							:total="total"
							@current-change="handleCurrentChangeFile"
							@size-change="handleSizeChangeFile"
						>
						</el-pagination>
					</div>
				</div>
			</div>
			<el-dialog
				width="600px"
				top="8vh"
				:visible.sync="addFileBackupTaskVisible"
				:close-on-click-modal="false"
				@close="close"
				class="dialog"
			>
				<div class="downloadDialog_div1">
					<span>文件上传</span>
				</div>
				<el-divider class="downloadDialog_divider1"></el-divider>
				<el-form
					:model="addFileBackupTaskForm"
					ref="addFileBackupTaskForm"
					label-width="100px"
					style="height: auto"
				>
					<el-form-item label="客户端:" prop="fileIp">
						<div class="select">
							<el-select
								v-model="addFileBackupTaskForm.fileIp"
								placeholder="选择一个客户端"
								size="mini"
								class="marg"
								@change="datasourceChange"
							>
								<el-option
									v-for="item in deviceList"
									:key="item.id"
									:label="item.deviceName"
									:value="item.id"
								>
								</el-option>
							</el-select>
						</div>
					</el-form-item>

					<el-form-item label="选择:" prop="filePath">
						<div style="margin-left: 76px; width: 185px">
							<el-button
								size="mini"
								icon="el-icon-thumb"
								@click="selectFile"
								style="width: 197px; margin-left: -28px"
								>选择文件/文件夹</el-button
							>
							<input
								type="file"
								name=""
								id="open"
								value=""
								style="display: none"
							/>
							<input
								type="text"
								id="upload"
								v-model="addFileBackupTaskForm.filePath"
								disabled="none"
								style="width: 189px; margin-left: -28px"
							/>
						</div>
					</el-form-item>
					<el-form-item label="文件数据类别:">
						<div class="sele">
							<el-select
								placeholder="请选择文件数据类别"
								v-model="fileType"
								@change="filetypeChange"
							>
								<el-option
									v-for="item in options1"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</div>
					</el-form-item>
					<!-- <el-form-item label="文件属性:">
						<div class="radio">
							<el-radio-group v-model="shareType">
								<el-radio label="共享"></el-radio>
								<el-radio label="私有"></el-radio>
							</el-radio-group>
						</div>
					</el-form-item> -->
				</el-form>
				<el-divider class="SynchronizeDivider"></el-divider>
				<div class="synchronizeClose">
					<el-button @click="close">取消</el-button>
					<el-button type="primary" @click="fileUploadConfirm">确定</el-button>
				</div>
			</el-dialog>

			<!--       选择文件路径模态框-->
			<el-dialog
				top="8vh"
				:visible.sync="chooseFileVisible"
				v-if="chooseFileVisible"
				@close="closeFilePath()"
				width="600px"
				height="500px"
			>
				<div class="sketch_content selectFile">
					<el-tree
						:empty-text="emptyText"
						element-loading-text="数据加载中"
						class="tree"
						:props="defaultProps"
						show-checkbox
						node-key="id"
						:filter-node-method="filterNode"
						:expand-on-click-node="false"
						:lazy="true"
						:load="expandTreeNode"
						:check-on-click-node="true"
						@check="currentChecked"
						ref="tree"
					>
						<span class="span-ellipsis" slot-scope="{ node, data }">
							<i
								v-if="node.data !== undefined && 'childList' in node.data"
								class="el-icon-folder"
							></i>
							<i v-else class="el-icon-file"></i>
							<span :title="node.label">{{ node.label }}</span>
						</span>
					</el-tree>
				</div>
				<span slot="footer" class="dialog-footer">
					<div style="margin-bottom: -65px">
						<el-button @click="closeFilePath()">取消</el-button>
						<el-button type="primary" @click="selectFilePath()">确定</el-button>
					</div>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
import axiosRequest from '@/axios'
import jsCookie from 'js-cookie'
import {
	getRootValue,
	fileUpload,
	getFileTypeList,
	getOrgList,
	searchFileList,
	searchGroupType,
	searchByDate,
	fileDelete,
} from '@/api/index'
import upload from '@/views/test'
export default {
	components: {
		upload,
	},
	data() {
		const currentDate = new Date()
		const startOfYear = new Date(currentDate.getFullYear(), 0, 1) // 1月1日
		return {
			currentPage: 1,
			pageSize: 10,
			fileDownloadIds: [],
			total: 0,
			value: [],
			input2: '',
			value1: [startOfYear, currentDate],
			options: [
				{
					id: 'type',
					name: '文件格式类型',
					childList: [],
				},
				{
					id: 'organize',
					name: '所属组织',
					childList: [],
				},
				{
					id: 'kinds',
					name: '文件数据类别',
					childList: [
						{
							id: '1',
							name: '关键资产',
						},
						{
							id: '2',
							name: '重要资产',
						},
						{
							id: '3',
							name: '一般资产',
						},
					],
				},
			],
			tableData: [],
			cascaderProps: {
				// 自定义级联选择器的属性
				value: 'id', // 选项的值对应的属性名
				label: 'name', // 选项的标签对应的属性名
				children: 'childList', // 子选项的属性名
			},
			filteredTableData: [],
			fileUpload: false,
			deviceList: [],
			chooseFileVisible: false,
			emptyText: '',
			defaultProps: {
				children: 'childList',
				label: 'name',
				isLeaf: (data, node) => {
					if (node.data !== undefined && !('childList' in node.data)) {
						return true
					}
				},
				disabled: (data, node) => {
					if (
						node.data.disabled === undefined ||
						('disabled' in node.data && data.disabled)
					) {
						return true
					}
				},
			},
			addFileBackupTaskForm: {
				filePath: '',
				strategyId: '',
				cleanModel: '',
				cleanTime: '',
				cleanNumber: '',
				fileIp: '',
				taskName: '',
				strategyName: '',
				strategy: '',
			},
			addBackupTaskForm: {
				dbType: '',
				sourceId: '',
				dbName: [],
				strategyId: '',
				cleanModel: '',
				cleanTime: '',
				cleanNumber: '',
				taskName: '',
				strategyName: '',
				clientId: '',
				// 数据库备份模式
				strategy: 2,
			},
			addFileBackupTaskVisible: false,
			options1: [
				{
					value: 1,
					label: '关键资产',
				},
				{
					value: 2,
					label: '重要资产',
				},
				{
					value: 3,
					label: '一般资产',
				},
			],
			fileType: '',
			shareType: '',
			docTypeId: [],
			files: [],
			ids: [],
			clientId: '',
			downloadPath: this.$url + '/view/download',
			token: '',
			groupType: '',
			selectedDateRange: null,
			searchText: '',
		}
	},
	methods: {
		// 获取文件数据类别
		filetypeChange(value) {
			this.fileType = value
		},
		// 文件上传
		async fileUploadConfirm() {
			if (this.shareType == '共享') {
				this.shareType = 1
			} else {
				this.shareType = 0
			}

			this.clientId = this.addFileBackupTaskForm.fileIp
			await fileUpload({
				clientId: this.addFileBackupTaskForm.fileIp,
				files: this.files,
				fileType: this.fileType,
				shareType: this.shareType,
			}).then((res) => {
				if (res.data.status == 500) {
					this.$message({
						type: 'error',
						message: res.data.message,
					})
					this.addFileBackupTaskVisible = false
				} else if (res.data.status == 200) {
					this.$message({
						type: 'success',
						message: res.data.message,
					})
					this.addFileBackupTaskVisible = false
					this.getSearchFileList()
					let timer = setInterval(async () => {
						await axiosRequest
							.get('/client/complete', {
								params: {
									key:
										jsCookie.get('userId') +
										'' +
										this.clientId +
										'viewFileBackup',
								},
							})
							.then((res) => {
								if (res.data.status === 200) {
									clearInterval(timer)
									this.getSearchFileList()
									const h = this.$createElement
									this.$notify({
										title: '提示',
										message: h('p', null, res.data.data),
										duration: 60000,
									})
								}
							})
					}, 2000)
				}
			})
		},
		clearAll() {
			this.searchText = ''
			this.content = ''
			this.getSearchFileList()
		},
		rowClass({}) {
			return 'background:#F0F0F0'
		},
		handleChange(value) {},
		customDateSort(a, b) {
			// 将日期字符串转换为 Date 对象
			const dateA = new Date(a.date)
			const dateB = new Date(b.date)

			// 根据日期进行排序
			if (dateA < dateB) return -1
			if (dateA > dateB) return 1
			return 0
		},
		handleSearch() {
			this.searchText = this.input2.trim().toLowerCase()

			searchFileList({
				content: this.searchText,
				currentPage: this.currentPage,
				pageSize: this.pageSize,
			}).then((res) => {
				this.filteredTableData = res.data.data.records
				this.total = res.data.data.total
			})
		},
		download() {
			setTimeout(() => {
				this.toggleSelection()
			}, 0)
		},
		toggleSelection(rows) {
			if (rows) {
				rows.forEach((row) => {
					this.$refs.table.toggleRowSelection(row)
				})
			} else {
				this.$refs.table.clearSelection()
			}
		},
		upload() {
			this.addFileBackupTaskForm.filePath = ''
			this.fileUpload = true
			this.getDeviceList()
		},
		close() {
			this.addFileBackupTaskForm.fileIp = ''
			this.fileUpload = false
			this.fileType = ''
		},
		//新建数据库备份任务 通过三个下拉框的值来拼接任务名称
		getDbTaskName(dbName) {
			let name = ''
			for (let i = 0; i < dbName.length; i++) {
				name += dbName[i]
			}
			this.addBackupTaskForm.taskName = name
		},
		//选择数据源下拉框事件 赋值任务名
		datasourceChange() {
			// this.getDbTaskName()
			if (this.addBackupTaskForm.sourceId == '') {
				this.addBackupTaskForm.dbName = ''
			}
			this.dbNameList = []
		},
		selectFilePath() {
			for (let i = 0; i < this.sourcePath.length; i++) {
				if (i === this.sourcePath.length - 1) {
					this.addFileBackupTaskForm.filePath += this.sourcePath[i]
					// this.recoveryFileTaskForm.filePath  = this.sourcePath[i];
				} else {
					this.addFileBackupTaskForm.filePath += this.sourcePath[i] + '|'
					// this.recoveryFileTaskForm.filePath  += this.sourcePath[i] +"|";
				}
			}
			//对文件路径进行过滤取文件名 如果是多个文件或文件夹则取第一个文件名
			var filePath = this.addFileBackupTaskForm.filePath
			if (filePath.includes('|')) {
				// 如果filePath中包含'|',说明是多个文件,取第一个
				filePath = filePath.substring(0, filePath.indexOf('|'))
				filePath = filePath.substring(filePath.lastIndexOf('\\') + 1) + '等'
			} else {
				// 取文件名部分
				filePath = filePath.substring(filePath.lastIndexOf('\\') + 1)
			}

			this.addFileBackupTaskForm.taskName = filePath

			this.chooseFileVisible = false
			this.chooseRecoverFileVisible = false
			this.fileRootPath = ''
		},

		checkData(data) {
			const list = []
			return this.check(data, list)
		},
		check(data, list) {
			if (data !== null || data != undefined || data !== '') {
				data.forEach((item) => {
					if (item.childList && item.childList.length > 0) {
						this.check(item.childList, list)
					} else {
						if (this.chooseFileVisible === true) {
							// item.disabled = false
						}
						list.push(item)
					}
				})
				return list
			}
		},
		//对树节点进行筛选时执行的方法,true:可以显示,false:不能显示
		filterNode(value, data) {
			if (!value) return true
			return data.label.indexOf(value) !== -1
		},

		async getTagList() {
			// let tages

			let params = new URLSearchParams()
			if (this.addFileBackupTaskVisible === true) {
				params.append('id', this.addFileBackupTaskForm.fileIp)
			}
			await axiosRequest
				.get('/view/fileRoot', { params: params })
				.then((res) => {
					if (res.data.status === 200) {
						let i = 0
						let timer = setInterval(async () => {
							if (!this.chooseFileVisible && !this.chooseFileVisible) {
								clearInterval(timer)
							}
							if (i > 30) {
								clearInterval(timer)
								this.$message({
									type: 'error',
									message: '获取失败',
								})
							}
							await axiosRequest
								.get('/client/complete', {
									params: {
										key: jsCookie.get('userId') + 'viewFilePath',
									},
								})
								.then((res) => {
									i += 1
									if (res.data.status === 200) {
										clearInterval(timer)
										this.fileRootPath = res.data.data
									}
								})
						}, 1000)
					} else if (res.data.status === 500) {
						this.chooseFileVisible = false
						this.closeFilePath()
						this.$message({
							type: 'error',
							message: res.data.message,
						})
					}
				})
		},

		// 获取节点
		async expandTreeNode(node, resolve) {
			//初始化页面,第一次子节点为0执行

			if (node.level === 0) {
				this.emptyText = '正在加载中...'
				await this.getTagList()

				if (this.fileRootPath === '' || this.fileRootPath === undefined) {
					let timer = setInterval(async () => {
						if (this.fileRootPath !== '' && this.fileRootPath !== undefined) {
							clearInterval(timer)
							return resolve(this.fileRootPath)
						}
					}, 1100)
				}
			}
			//取得子节点
			if (node.level >= 1) {
				//传递当前节点路径,resolve:节点赋值
				await this.getFileList1(node.data.path, resolve)
			}
		},
		//根据点击路径发送请求,加载数据
		async getFileList1(path, resolve) {
			let params = new URLSearchParams()
			if (this.addFileBackupTaskVisible === true) {
				params.append('id', this.addFileBackupTaskForm.fileIp)
				params.append('selectType', '1')
			} else if (this.fileRecoveryVisible === true) {
				params.append('ip', this.recoveryFileTaskForm.fileIp)
				params.append('selectType', '2')
			}
			params.append('filePath', path + '\\')
			return await axiosRequest
				.get(`/view/fileLists`, { params: params })
				.then((res) => {
					if (res.data.status === 200) {
						let i = 0
						let timer = setInterval(async () => {
							if (!this.chooseFileVisible && !this.chooseFileVisible) {
								clearInterval(timer)
							}
							if (i > 30) {
								clearInterval(timer)
								this.$message({
									type: 'error',
									message: '获取失败',
								})
							}
							await axiosRequest
								.get('/client/complete', {
									params: {
										key: jsCookie.get('userId') + 'viewFilePath',
									},
								})
								.then((res) => {
									i += 1
									if (res.data.status === 200) {
										clearInterval(timer)
										let list = []
										//遍历返回数据
										for (let i = 0; i < res.data.data.length; i++) {
											let arr = []
											//调用函数获取最内侧子节点
											arr = this.checkData(res.data.data)
											//去掉最后的路径,获取上一次路径
											let p = arr[i].path.lastIndexOf('\\')
											let x = arr[i].path.substring(0, p)
											//判断返回路径和传递路径 相同则赋值
											if (x == path) {
												list = arr
												resolve(list)
												return
											}
										}
										//无节点赋值为空,避免转圈
										resolve([])
									}
								})
						}, 1000)
					}
				})
		},
		treeCheck(node, list) {
			if (list.checkedKeys.length > 0) {
				this.$refs.treeRecover.setCheckedKeys([node.path])
				this.recoveryFileTaskForm.filePath = node.path
			}
		},
		currentChecked(nodeObj, SelectedObj) {
			this.sourcePath = []
			//获取获取选中节点的最父层节点
			let parent = this.getSimpleCheckedNodes(this.$refs.tree.store)
			//遍历选中节点,并赋值
			for (let i = 0; i < parent.length; i++) {
				this.sourcePath.push(parent[i].path)
			}
			this.files = []
			for (let i = 0; i < parent.length; i++) {
				this.files.push({
					localPath: parent[i].path,
					docTypeId: parent[i].docTypeId,
				})
			}
		},
		//获取选中节点的最父层节点
		getSimpleCheckedNodes(store) {
			const checkedNodes = []
			const traverse = function (node) {
				const childNodes = node.root ? node.root.childNodes : node.childNodes
				childNodes.forEach((child) => {
					if (child.checked) {
						checkedNodes.push(child.data)
					}
					if (child.indeterminate) {
						traverse(child)
					}
				})
			}
			traverse(store)
			return checkedNodes
		},
		close() {
			this.fileType = ''

			this.addFileBackupTaskVisible = false
			this.strategy = ''
			this.addFileBackupTaskForm.strategyId = ''
			this.addFileBackupTaskForm.cleanModel = ''
			this.addFileBackupTaskForm.cleanNumber = ''
			this.addFileBackupTaskForm.fileIp = ''
			this.addFileBackupTaskForm.taskName = ''
			this.addFileBackupTaskForm.filePath = ''
			// this.$refs['filePath'].value = ' '
		},

		addBackupTask() {
			this.addBackupTaskForm.strategy = 2
			this.addBackupTaskVisible = true
			this.dbNameList = []
			this.source = []
			axiosRequest.get('/strategy/listNoPage', {}).then((res) => {
				if (res.data.status === 200) {
					// this.total = res.data.data.total;
					this.backupTableData = res.data.data
					// this.backupId = res.data.data.backupId
				} else {
					this.$message({
						message: res.data.message,
						type: 'warning',
					})
				}
			})
			this.addBackupTaskForm.dbType = ''
			this.addBackupTaskForm.sourceId = ''
			this.addBackupTaskForm.dbName = ''
			this.addBackupTaskForm.strategyId = ''
			this.addBackupTaskForm.cleanModel = '1'
			this.addBackupTaskForm.cleanTime = '10'
			this.addBackupTaskForm.cleanNumber = ''
			this.addBackupTaskForm.taskName = ''
			this.addBackupTaskForm.clientId = ''
			this.strategy = ''
		},
		getsourceId() {
			this.dbNameList = []
			this.addBackupTaskForm.sourceId = ''
			this.addBackupTaskForm.taskName = ''
			this.addBackupTaskForm.dbName = ''
			// this.getDbTaskName()
			axiosRequest
				.get('/dbsource/dbType', {
					params: {
						dbType: this.addBackupTaskForm.dbType,
					},
				})
				.then((res) => {
					if (res.data.status === 200) {
						this.source = res.data.data
					} else {
						this.$message({
							message: res.data.message,
							type: 'warning',
						})
					}
				})
			// if (this.addBackupTaskForm.sourceId && this.addBackupTaskForm.dbType) {
			//   this.addBackupTaskForm.taskName = this.addBackupTaskForm.dbType + '-' + this.addBackupTaskForm.sourceId
			// }
		},
		connection() {
			this.ip = localStorage.getItem('ip')
			axiosRequest
				.post('/database/connection', {
					sourceId: this.addBackupTaskForm.sourceId,
				})
				.then((res) => {
					if (res.data.status === 200) {
						this.$message({
							message: res.data.message,
							type: 'success',
						})
						let i = 0
						let timer = setInterval(async () => {
							if (this.addBackupTaskVisible == false) {
								clearInterval(timer)
							}
							if (i > 10) {
								clearInterval(timer)
								this.$message({
									type: 'error',
									message: '连接失败',
								})
							}
							i = i + 1
							await axiosRequest
								.get('/client/complete', {
									params: {
										key: jsCookie.get('userId') + 'connection',
									},
								})
								.then((res) => {
									if (res.data.status === 200) {
										clearInterval(timer)
										if (res.data.data instanceof Array) {
											this.connection_add = true
											this.dbNameList = res.data.data
											this.$message({
												message: '连接成功',
												type: 'success',
											})
										} else {
											this.$message({
												message: res.data.data,
												type: 'error',
											})
										}
									}
								})
						}, 1000)
					} else if (res.data.status === 500) {
						this.$message({
							type: 'error',
							message: res.data.message,
						})
					}
				})
		},
		//文件
		addFileBackupTask() {
			this.addFileBackupTaskVisible = true
			this.getDeviceList()

			this.strategy = 2
			// this.strategy =''
			// this.addFileBackupTaskForm.strategyId =''
			this.addFileBackupTaskForm.cleanModel = '1'
			this.addFileBackupTaskForm.cleanTime = '10'
			this.addFileBackupTaskForm.strategyName = ''
			// this.addFileBackupTaskForm.cleanTime=''
			// this.addFileBackupTaskForm.cleanNumber =''
			// this.addFileBackupTaskForm.fileIp =''
			// this.addFileBackupTaskForm.taskName =''
			// this.$refs['filePath'].value =' '

			this.ip = localStorage.getItem('ip')
			axiosRequest.get('/strategy/listNoPage').then((res) => {
				if (res.data.status === 200) {
					// this.total = res.data.data.total;
					this.backupTableData = res.data.data
					// this.backupId = res.data.data.backupId
				} else if (res.data.status === 500) {
					this.$message({
						message: res.data.message,
						type: 'warning',
					})
				}
			})
		},

		selectFile() {
			this.addFileBackupTaskForm.filePath = ''
			this.chooseFileVisible = true
		},

		closeFilePath() {
			this.chooseFileVisible = false
			this.chooseRecoverFileVisible = false
			this.fileRootPath = ''
			this.sourcePath = []
		},
		//文件初始化列表
		getFileList(pageId) {
			let params = new URLSearchParams()
			if (
				this.currentPageFile != 1 &&
				this.taskName1 != '' &&
				pageId == 'query'
			) {
				params.append('currentPage', 1)
				this.currentPageFile = 1
			} else {
				params.append('currentPage', this.currentPageFile)
			}
			params.append('pageSize', this.pageSizeFile)

			params.append('taskName', this.taskName1)
			axiosRequest
				.get('/file', {
					params,
				})
				.then((res) => {
					if (res.data.status === 200) {
						this.totalFile = res.data.data.total
						// this.fileTableData = res.data.data.records;
						this.fileTableData = res.data.data.records.map((item) => {
							if (item.lastBackup && item.backupEndTime) {
								item.lastBackup = `${item.lastBackup} ------ ${item.backupEndTime}`
							}
							return item
						})
						if (this.fileTableData == '') {
							if (this.currentPageFile > 1) {
								this.getFileList(this.currentPageFile - 1, this.pageSizeFile)
							}
						}
					} else if (res.data.status === 500) {
						this.$message({
							message: res.data.message,
							type: 'warning',
						})
					}
				})
		},

		getDeviceList() {
			this.deviceList = []
			axiosRequest.get('/client/device').then((res) => {
				if (res.status === 200) {
					this.deviceList = res.data.data
				} else if (res.data.status === 500) {
					this.$message({
						message: res.data.message,
						type: 'warning',
					})
				}
			})
		},
		// 文件下载
		downloadTemplate: function (type) {
			axiosRequest({
				method: 'GET',
				url: '/user/downloadTemplate/' + type,
				responseType: 'blob',
			}).then((response) => {
				// 获取http头部的文件名信息,若无需重命名文件,将下面这行删去
				const fileName1 = response.headers['content-disposition'].split('=')[1]
				const fileName = decodeURIComponent(fileName1)
				/* 兼容ie内核,360浏览器的兼容模式 */
				if (window.navigator && window.navigator.msSaveOrOpenBlob) {
					const blob = new Blob([response.data], { type: 'application/zip' })
					window.navigator.msSaveOrOpenBlob(blob, fileName)
				} else {
					/* 火狐谷歌的文件下载方式 */
					const blob = new Blob([response.data], { type: 'application/zip' })
					const url = window.URL.createObjectURL(blob)
					const link = document.createElement('a') // 创建a标签
					link.href = url
					link.download = fileName // 文件重命名,若无需重命名,将该行删去
					link.click()
					URL.revokeObjectURL(url) // 释放内存
				}
				// resolve(response)
			})
		},
		// 获取级联选择器选取的值
		changeEvent(e) {
			if (e[0] == 'type') {
				this.groupType = 1
			} else if (e[0] == 'organize') {
				this.groupType = 2
			} else {
				this.groupType = 3
			}

			const id = e[e.length - 1]
			this.currentPage = 1
			searchGroupType({
				groupType: this.groupType,
				id: id,
				currentPage: this.currentPage,
				pageSize: this.pageSize,
			}).then((res) => {
				this.filteredTableData = res.data.data.records
				this.total = res.data.data.total
			})
			if (this.$refs.cascader.checkedValue.length == 0) {
				searchFileList({
					content: '',
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					this.filteredTableData = res.data.data.records
					this.total = res.data.data.total
				})
			}
		},
		// 获取日期
		changeDate(e) {
			this.selectedDateRange = e
			if (e == null) {
				this.getSearchFileList()
			} else {
				let startTime = e[0]
				let endTime = e[1]
				this.currentPage = 1
				searchByDate({
					startTime: startTime,
					endTime: endTime,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					this.filteredTableData = res.data.data.records
					this.total = res.data.data.total
				})
			}
		},
		// 删除
		deleteRow(row) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					let ids = row.id.toString()

					fileDelete({ ids: row.id }).then((res) => {
						if (res.data.status == 500) {
							this.$message({
								type: 'error',
								message: res.data.message,
							})
						} else {
							this.getSearchFileList()
							this.$message({
								type: 'success',
								message: '删除成功!',
							})
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		handleSelectionChange(val) {
			// 遍历找到多选的数据
			const id = val.map((obj) => obj.id)
			this.ids = id.map((str) => {
				return str.split(',')
			})
			this.ids = this.ids
				.map((id) => id[0])
				.join(', ')
				.replace(/\s/g, '')

			this.fileDownloadIds = this.ids
		},
		// 批量删除
		mutipleDelete() {
			// fileDelete({ ids: this.ids }).then((res) => {
			// 	this.getSearchFileList()
			// })
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					fileDelete({ ids: this.ids }).then((res) => {
						if (res.data.status == 500) {
							this.$message({
								type: 'error',
								message: res.data.message,
							})
						} else {
							this.$message({
								type: 'success',
								message: '删除成功!',
							})
							this.currentPage = 1
							this.getSearchFileList()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					})
				})
		},
		expandChange() {
			getFileTypeList().then((res) => {
				this.options[0].childList = res.data.data
			})
			getOrgList().then((res) => {
				this.options[1].childList = res.data.data
			})
		},
		// 初始化文件列表
		getSearchFileList() {
			searchFileList({
				content: '',
				currentPage: this.currentPage,
				pageSize: this.pageSize,
			}).then((res) => {
				this.filteredTableData = res.data.data.records
				this.total = res.data.data.total
			})
		},
		// 改变页码事件
		handleCurrentChangeFile(currentPage) {
			// 给当前页赋值
			this.currentPage = currentPage
			// 判断级联选择器是否选中了某些值
			if (this.$refs.cascader.checkedValue.length > 0) {
				// 如果选中了值,使用选中的值来进行数据筛选
				const id =
					this.$refs.cascader.checkedValue[
						this.$refs.cascader.checkedValue.length - 1
					]
				searchGroupType({
					groupType: this.groupType,
					id: id,
					currentPage: currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					this.filteredTableData = res.data.data.records
					this.total = res.data.data.total
				})
			} else if (this.selectedDateRange) {
				const startTime = this.selectedDateRange[0]
				const endTime = this.selectedDateRange[1]
				searchByDate({
					startTime: startTime,
					endTime: endTime,
					currentPage: currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					this.filteredTableData = res.data.data.records
					this.total = res.data.data.total
				})
			} else if (this.searchText) {
				searchFileList({
					content: this.searchText,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					this.filteredTableData = res.data.data.records
					this.total = res.data.data.total
				})
			} else {
				// 如果没有选中值,获取所有数据
				this.getSearchFileList()
			}
		},

		// 使表格数据按顺序递增
		indexMethod3(index) {
			return (this.currentPage - 1) * this.pageSize + index + 1
		},
		// 改变页码大小事件
		handleSizeChangeFile(pageSize) {
			this.pageSize = pageSize
			// 判断级联选择器是否选中了某些值
			if (this.$refs.cascader.checkedValue.length > 0) {
				// 如果选中了值,使用选中的值来进行数据筛选
				const id =
					this.$refs.cascader.checkedValue[
						this.$refs.cascader.checkedValue.length - 1
					]
				searchGroupType({
					groupType: this.groupType,
					id: id,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					this.filteredTableData = res.data.data.records
					this.total = res.data.data.total
				})
			} else if (this.selectedDateRange) {
				const startTime = this.selectedDateRange[0]
				const endTime = this.selectedDateRange[1]
				searchByDate({
					startTime: startTime,
					endTime: endTime,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					this.filteredTableData = res.data.data.records
					this.total = res.data.data.total
				})
			} else if (this.searchText) {
				searchFileList({
					content: this.searchText,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}).then((res) => {
					this.filteredTableData = res.data.data.records
					this.total = res.data.data.total
				})
			} else {
				// 如果没有选中值,获取所有数据
				this.getSearchFileList()
			}
		},
	},
	created() {
		this.filteredTableData = this.tableData
		getRootValue()
		this.getSearchFileList()
		this.token = localStorage.getItem('satoken')
	},
}
</script>
相关推荐
忠实米线18 分钟前
使用pdf-lib.js实现pdf添加自定义水印功能
前端·javascript·pdf
明辉光焱1 小时前
[Electron]总结:如何创建Electron+Element Plus的项目
前端·javascript·electron
牧码岛1 小时前
Web前端之汉字排序、sort与localeCompare的介绍、编码顺序与字典顺序的区别
前端·javascript·web·web前端
开心工作室_kaic2 小时前
ssm111基于MVC的舞蹈网站的设计与实现+vue(论文+源码)_kaic
前端·vue.js·mvc
云空2 小时前
《InsCode AI IDE:编程新时代的引领者》
java·javascript·c++·ide·人工智能·python·php
咔咔库奇2 小时前
ES6基础
前端·javascript·es6
bug爱好者2 小时前
如何解决sourcetree 一打开就闪退问题
前端·javascript·vue.js
徐小夕2 小时前
Flowmix/Docx 多模态文档编辑器:V1.3.5版本,全面升级
前端·javascript·架构
迂 幵3 小时前
vue el-table 超出隐藏移入弹窗显示
javascript·vue.js·elementui
上趣工作室3 小时前
vue2在el-dialog打开的时候使该el-dialog中的某个输入框获得焦点方法总结
前端·javascript·vue.js