gasInjection-project/src/views/vent/performance/fileDetail/index.vue

<template>
  <div class="file-details">
    <!-- <div class="title">文件共享中心</div> -->
    <div class="content">
      <div class="left-box">
        <a-button type="primary" preIcon="ant-design:form-outlined" style="margin-bottom: 15px" @click="editMenu">编辑目录</a-button>
        <BasicTree :expandedKeys="expandedKeys" :treeData="treeData" :showLine="showLine" />
      </div>
      <div class="right-box">
        <div class="search">
          <a-input v-model:value="fileName" placeholder="请输入文件名称" />
          <a-button type="primary" preIcon="ant-design:search-outlined">查询</a-button>
          <a-button type="primary" style="float: right; right: 15px" preIcon="ant-design:cloud-upload-outlined">文件上传</a-button>
        </div>
        <div class="list">
          <div class="bd-t"></div>
          <NormalTable
            :columns="columns"
            :list="getTree"
            :formSchema="formSchema"
            :deleteById="deleteById"
            :saveOrUpdate="saveOrUpdate"
            designScope="file-detail"
            title="文件详情"
            :showTab="false"
          />
          <div class="bd-b"></div>
        </div>
      </div>
    </div>
    <!-- 编辑目录 -->
    <fileMenuDialog @register="registerModal" @saveOrUpdate="saveOrUpdateHandler" />
  </div>
</template>
<script lang="ts" setup name="system-user">
  import { useModal } from '/@/components/Modal';
  import fileMenuDialog from '../comment/fileMenuModal.vue';
  import { ref, onMounted, reactive, provide } from 'vue';
  import { BasicTree } from '/@/components/Tree/index';
  import { CollapseContainer } from '/@/components/Container/index';
  import NormalTable from '../comment/NormalTable.vue';
  import { columns, formSchema } from './fileDetail.data';
  import { getTree, deleteById, saveOrUpdate } from './fileDetail.api';
  import { TreeItem } from '/@/components/Tree/index';

  components: {
    CollapseContainer;
  }
  let showLine = ref(true);
  const expandedKeys = ref<string[]>(['0-0']); //默认展开树节点
  let fileName = ref('');
  //tree
  let treeData = reactive<TreeItem[]>([
    {
      title: '全部',
      key: '0-0',
      icon: 'file1|svg',
      children: [],
    },
  ]);
  provide('treeData', treeData);
  let getTreeList = async () => {
    let data = await getTree({ parentId: '' });
    console.log(data, '树节点数据');
    let child = data.records.map((el, index) => {
      return {
        id: el.id,
        title: el.fileName,
        key: index,
        icon: 'file2|svg',
      };
    });
    treeData[0].children?.push(...child);
  };

  //注册弹窗
  const [registerModal, { openModal, closeModal }] = useModal();
  //编辑目录
  let editMenu = () => {
    openModal(true);
  };
  //关闭目录弹窗
  let saveOrUpdateHandler = () => {
    closeModal();
  };
  onMounted(() => {
    getTreeList();
  });
</script>

<style lang="less" scoped>
  .file-details {
    width: 100%;
    height: 100%;
    padding: 15px;
    position: relative;
    background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;
    .content {
      width: 100%;
      height: calc(100% - 30px);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      .left-box {
        width: 15%;
        height: calc(100% - 20px);
        margin-bottom: 20px;
        padding: 20px;
        border: 2px solid #268bc1;
        box-shadow: 0px 0px 20px 7px rgba(30, 119, 186, 0.7) inset;
        -moz-box-shadow: 0px 0px 20px 7px rgba(30, 119, 186, 0.7) inset;
        -webkit-box-shadow: 0px 0px 20px 7px rgba(30, 119, 186, 0.7) inset;
      }
      .right-box {
        width: 85%;
        height: calc(100% - 20px);
        padding: 0px 0px 0px 15px;
        box-sizing: border-box;
        .search {
          height: 34px;
          line-height: 34px;
          margin-bottom: 15px;
          background: url(../../../../assets/images/files/details/cz-b.png) no-repeat;
          background-size: 100% 100%;
        }
      }
      .list {
        height: calc(100% - 49px);
        position: relative;
        .bd-t {
          height: 4px;
          width: 100%;
          position: absolute;
          top: 0px;
          background: url(../../../../assets/images/files/details/lb-b.png) no-repeat;
          background-size: 100% 100%;
        }
        .bd-b {
          height: 4px;
          width: 100%;
          position: absolute;
          bottom: 0px;
          background: url(../../../../assets/images/files/details/lb-b.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  ::v-deep .jeecg-svg-icon {
    margin-right: 5px;
  }
  ::v-deep .jeecg-basic-table-form-container {
    padding: 0px 0px;
  }
  ::v-deep .zxm-btn-primary {
    background-color: transparent;
    border: none;
    background: url(../../../../assets/images/files/details/btn.png) no-repeat !important;
    background-size: 100% 100% !important;
  }
  ::v-deep .zxm-tree-switcher {
    background: transparent;
  }
  ::v-deep .zxm-input {
    width: 220px;
    height: 28px;
    background: transparent;
    border: 1px solid #31bccc;
    margin: 0px 20px;
    border-radius: 5px;
  }
</style>