360 lines
13 KiB
Vue
360 lines
13 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-row :gutter="20">
|
||
<splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
|
||
<!--部门数据-->
|
||
<pane size="16">
|
||
<el-col>
|
||
<div class="head-container">
|
||
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
|
||
</div>
|
||
<div class="head-container">
|
||
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
|
||
</div>
|
||
</el-col>
|
||
</pane>
|
||
<!--用户数据-->
|
||
<pane size="84">
|
||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="80px">
|
||
<el-col :span="7">
|
||
<el-form-item label="名称" prop="switchName">
|
||
<el-input
|
||
v-model="queryParams.switchName"
|
||
placeholder="请输入名称"
|
||
clearable
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="类型" prop="bandwidthType">
|
||
<el-select
|
||
v-model="queryParams.bandwidthType"
|
||
placeholder="请选择类型"
|
||
clearable>
|
||
<el-option
|
||
v-for="dict in dict.type.rm_topology_type"
|
||
:key="dict.value"
|
||
:label="dict.label"
|
||
:value="dict.value"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="5">
|
||
<el-form-item class="lastBtnSty">
|
||
<el-button type="primary" size="mini" icon="Search" @click="handleQuery(1)">搜索</el-button>
|
||
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-form>
|
||
<input type="file" ref="fileInput" @change="handleFileChange" style="display: none;">
|
||
<TableList :columns="columns" :modelIdent="this.$options.name" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange"></TableList>
|
||
<!-- 新建文件夹 -->
|
||
<el-dialog title="新建文件夹" :visible.sync="open" width="500px" append-to-body>
|
||
<el-form ref="noticeRef" :rules="rules" :model="formList" label-width="90px">
|
||
<el-row>
|
||
<el-col :span="20">
|
||
<el-form-item label="名称" prop="switchName">
|
||
<el-input v-model="formList.switchName" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="20">
|
||
<el-form-item label="描述" prop="remarks">
|
||
<el-input v-model="formList.remarks" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm(1)">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 移动 -->
|
||
<el-dialog class="towDialog" :title="title" :visible.sync="openMove" width="700px" append-to-body>
|
||
<div class="w100" style="height: 300px">
|
||
<div>
|
||
将<template v-for="(item,index) of moveList">
|
||
<span>【{{item.switchName}}】<span v-if="index !== moveList.length - 1">、</span></span>
|
||
</template>
|
||
</div>
|
||
<div class="w100 mt10">
|
||
<span style="width: 13%;">{{title}}到：</span>
|
||
<treeselect v-model="catalogList" :options="deptOptions" class="disInlineBlock" style="width: 87%;vertical-align: middle;" :show-count="true" placeholder="请选择目录" />
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm(2)">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</pane>
|
||
</splitpanes>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import TableList from "@/components/table/index.vue"
|
||
import EchartsPie from "@/components/echartsList/pie.vue"
|
||
import {listTopology, delTopology} from "@/api/disRevenue/resource"
|
||
import {deptTreeSelect } from "@/api/system/user"
|
||
import { Splitpanes, Pane } from "splitpanes"
|
||
import Treeselect from "@riophae/vue-treeselect"
|
||
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
|
||
import "splitpanes/dist/splitpanes.css"
|
||
export default {
|
||
name: 'Filemanage',
|
||
components: {TableList,EchartsPie, Splitpanes, Pane, Treeselect},
|
||
dicts: ['rm_topology_type'],
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
// 部门名称
|
||
deptName: undefined,
|
||
// 所有部门树选项
|
||
deptOptions: undefined,
|
||
defaultProps: {
|
||
children: "children",
|
||
label: "label",
|
||
disabled: true
|
||
},
|
||
|
||
showSearch: true,
|
||
roleList: [],
|
||
queryParams: {
|
||
total: 0,
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
// 列显隐信息
|
||
columns: {
|
||
id: { label: `ID`, width: '50', visible: false },
|
||
switchName: { label: `名称`, minWidth: '250', visible: true },
|
||
switchSn: { label: `类型`, minWidth: '200', visible: true},
|
||
interfaceName: { label: `大小(KB)`, minWidth: '100', visible: true },
|
||
connectedDeviceType: { label: `路径`, minWidth: '200', visible: true },
|
||
serverName: { label: `描述`, minWidth: '200', visible: true},
|
||
md5: { label: `md5值`, minWidth: '160', visible: true},
|
||
createBy: { label: `创建人`, minWidth: '160', visible: true},
|
||
createTime: { label: `创建时间`, minWidth: '160', visible: true},
|
||
serverPort: { label: `修改时间`,minWidth: '160', visible: true }
|
||
},
|
||
config: {
|
||
searcherForm: [
|
||
{label: '交换机名称', prop: 'roleName', type: 'selset', options: []}
|
||
],
|
||
tableButton: {
|
||
top: [
|
||
{content: '上传文件', fnCode: 'upload', type: 'success', icon: 'el-icon-upload2', hasPermi: 'resource:fileManage:upload'},
|
||
{content: '新建文件夹', fnCode: 'newFile', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:fileManage:file'},
|
||
{content: '移动', fnCode: 'move', type: 'warning', icon: 'el-icon-sort', hasPermi: 'resource:fileManage:move'},
|
||
],
|
||
line: [
|
||
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:fileManage:details'},
|
||
{content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'resource:fileManage:edit'},
|
||
{content: '删除', fnCode: 'delete', type: 'text', icon: 'el-icon-delete', hasPermi: 'resource:fileManage:delete'},
|
||
{content: '移动', fnCode: 'move', type: 'text', icon: 'el-icon-sort', hasPermi: 'resource:fileManage:move'},
|
||
{content: '复制', fnCode: 'copy', type: 'text', icon: 'el-icon-document-copy', hasPermi: 'resource:fileManage:copy'},
|
||
{content: '下载', fnCode: 'download', type: 'text', icon: 'el-icon-download', hasPermi: 'resource:fileManage:download'},
|
||
]
|
||
}
|
||
},
|
||
open: false,
|
||
openMove: false,
|
||
title: '',
|
||
moveList: [],
|
||
catalogList: null,
|
||
formList:{
|
||
switchName: '',
|
||
remarks: ''
|
||
},
|
||
rules: {
|
||
switchName: [
|
||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
||
]
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
// 根据名称筛选部门树
|
||
deptName(val) {
|
||
this.$refs.tree.filter(val)
|
||
}
|
||
},
|
||
created() {
|
||
this.getList();
|
||
this.getDeptTree();
|
||
},
|
||
methods: {
|
||
// 处理文件选择
|
||
handleFileChange(e) {
|
||
console.log('e====',e);
|
||
// const file = e.target.files[0] // 获取第一个选中的文件
|
||
// if (file) {
|
||
// selectedFile = file
|
||
// selectedFileName = file.name // 显示文件名
|
||
// // 可选：自动上传
|
||
// // uploadFile()
|
||
// } else {
|
||
// clearFile() // 未选择文件时清空
|
||
// }
|
||
},
|
||
/** 查询部门下拉树结构 */
|
||
getDeptTree() {
|
||
deptTreeSelect().then(response => {
|
||
this.deptOptions = response.data;
|
||
})
|
||
},
|
||
// 筛选节点
|
||
filterNode(value, data) {
|
||
if (!value) return true
|
||
return data.label.indexOf(value) !== -1
|
||
},
|
||
// 节点单击事件
|
||
handleNodeClick(data) {
|
||
this.queryParams.deptId = data.id;
|
||
this.handleQuery();
|
||
},
|
||
/** 查询列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
listTopology(this.addDateRange(this.queryParams)).then(response => {
|
||
this.roleList = response.rows;
|
||
this.queryParams.total = response.total;
|
||
this.loading = false;
|
||
})
|
||
},
|
||
fnDetails(row,type) {
|
||
if (type && type === '1') {
|
||
this.$router.push({
|
||
path:'/resource/resMonitor/digitalSuper',
|
||
query:{
|
||
id: row.id
|
||
}
|
||
});
|
||
} else {
|
||
this.$router.push({
|
||
path:'/resource/resMonitor/digitalAutoFind',
|
||
query:{
|
||
id: row.id
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 处理子组件传递的新值
|
||
handleValueChange(newValue) {
|
||
// 父组件更新自身数据，实现同步
|
||
this.showSearch = newValue;
|
||
// console.log('父组件拿到新值:', newValue);
|
||
},
|
||
/** 搜索按钮操作 */
|
||
handleQuery(val) {
|
||
if (val && val === 1) {
|
||
delete this.queryParams.deptId;
|
||
}
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm("queryRef");
|
||
this.handleQuery();
|
||
},
|
||
|
||
submitForm(num){
|
||
if (num === 1) {
|
||
this.$refs['noticeRef'].validate((valid) => {
|
||
if (!valid) {
|
||
return false;
|
||
}
|
||
this.open = false;
|
||
});
|
||
} else {
|
||
console.log('ddd==',this.catalogList);
|
||
this.openMove = false;
|
||
}
|
||
},
|
||
/** 取消按钮 */
|
||
cancel() {
|
||
this.open = false;
|
||
this.openMove = false;
|
||
},
|
||
|
||
callback(result, rowData, selectChange, selectList) {
|
||
if (result && result.fnCode) {
|
||
switch (result.fnCode) {
|
||
case 'upload':
|
||
this.$refs.fileInput.click();
|
||
break;
|
||
case 'newFile':
|
||
this.open = true;
|
||
this.$nextTick(() => {
|
||
this.$refs['noticeRef'].resetFields();
|
||
});
|
||
break;
|
||
case 'move':
|
||
this.title = '移动';
|
||
if (rowData && rowData.id) {
|
||
this.moveList = [rowData];
|
||
} else {
|
||
if (selectList && selectList.length <= 0) {
|
||
this.$modal.msgWarning("请选择数据！");
|
||
return;
|
||
}
|
||
this.moveList = selectList;
|
||
}
|
||
this.openMove = true;
|
||
break;
|
||
case 'copy':
|
||
this.title = '复制';
|
||
this.moveList = [rowData];
|
||
this.openMove = true;
|
||
break;
|
||
case 'edit':
|
||
this.$router.push({
|
||
path:'/resource/fileManage/view',
|
||
query:{
|
||
id: rowData.id
|
||
}
|
||
});
|
||
break;
|
||
case 'details':
|
||
this.$router.push({
|
||
path:'/resource/fileManage/view',
|
||
query:{
|
||
id: rowData.id,
|
||
readonly: true
|
||
}
|
||
});
|
||
break;
|
||
case 'download':
|
||
break;
|
||
case 'delete':
|
||
this.$modal.confirm('是否确认删除数据项？').then(function() {
|
||
return delTopology(selectChange)
|
||
}).then(() => {
|
||
this.getList();
|
||
this.$modal.msgSuccess("删除成功")
|
||
}).catch(() => {});
|
||
break;
|
||
default:
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
::v-deep .lastBtnSty .el-form-item__content{
|
||
margin-left: 10px!important;
|
||
}
|
||
</style>
|