profitManage1.1/src/views/resource/fileManage/fileManage.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>