mky-vent-base/src/views/vent/reportManager/index.vue

<template>
  <div class="reportManager">
    <customHeader>报表管理中心</customHeader>
    <div class="content">
      <div class="left-box">
        <!-- 左侧树菜单 -->
        <fileSystem :selected="selected" :list="listArr" :draggable="true" @on-click="onClick">
          <template #icon="{ item }">
            <template v-if="item.isFolder">
              <SvgIcon v-if="item.isexpanded" size="18" name="file-open" />
              <SvgIcon v-else size="18" name="file-close" />
            </template>
            <treeIcon class="iconfont" :title="item.title" v-else />
          </template>
        </fileSystem>
      </div>
      <div class="right-box">
        <NormalTable
          :key="dataNow"
          :searchParam="searchParam"
          :columns="columns"
          :deleteById="deleteById"
          :downLoad="downLoad"
          :list="reportList"
          designScope="device-tabel"
          title="报表管理"
          :showTab="false"
          @saveAdd="saveAdd"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, nextTick, reactive, onMounted } from 'vue';
  import customHeader from '/@/components/vent/customHeader.vue';
  import fileSystem from './comment/common/cameraTree.vue';
  import { SvgIcon } from '/@/components/Icon';
  import treeIcon from './comment/common/Icon/treeIcon.vue';
  import NormalTable from './comment/NormalTable.vue';
  import { message } from 'ant-design-vue';
  import { columns } from './reportManager.data';
  import { reportList, save, deleteById, downLoad, getQuery } from './reportManager.api';

  let dataNow = ref(0);
  let searchParam = reactive({
    busKind: '',
    modelType: '',
    reportType: '',
  });

  //左侧菜单列表
  let listArr = reactive<any[]>([
    {
      pid: 'auto',
      isFolder: true,
      isexpanded: true,
      title: '系统数据报表',
      id: '0',
      children: [],
    },
    {
      pid: 'hand',
      isFolder: true,
      isexpanded: true,
      title: '手动报表',
      id: '1',
      children: [],
    },
    {
      pid: 'temp',
      isFolder: true,
      isexpanded: true,
      title: '报表模板',
      id: '2',
      children: [],
    },
  ]);
  //lxh 当前选中树节点
  let selected = reactive<any>({
    id: null,
    pid: null,
    title: '',
    isFolder: false,
  });

  //获取左侧菜单树
  async function getTreeList() {
    const res = await getQuery();
    if (res.length != 0) {
      listArr.forEach((el) => {
        el.children.length = 0;
        res.forEach((v) => {
          // v.id=v.itemValue
          let childre: any[] = [];
          if (v.children.length != 0) {
            v.children.forEach((m) => {
              childre.push({ pid: v.itemValue, ppid: el.id, isFolder: false, isexpanded: false, title: m.itemText, id: m.itemValue });
            });
          }
          el.children.push({ pid: el.id, isFolder: true, isexpanded: false, title: v.itemText, id: v.itemValue, children: childre });
        });
      });
      console.log(listArr, 'listArr-----------');
    }
  }
  //点击目录
  async function onClick(node) {
    console.log(node, 'node--------------');
    if (node.pid == 'auto') {
      treeClick(node);
    } else if (node.pid == 'hand') {
      treeClick(node);
    } else {
      treeClick(node);
    }
  }
  function treeClick(node) {
    dataNow.value = new Date().getTime();
    selected.id = node.id;
    selected.pid = node.pid;
    selected.title = node.title;
    selected.isFolder = node.isFolder;
    selected.ppid = node.ppid;
    if (node.id == '0' || node.id == '1' || node.id == '2') {
      searchParam.busKind = '';
      searchParam.modelType = node.id;
      searchParam.reportType = '';
    } else if (node.pid == '0' || node.pid == '1' || node.pid == '2') {
      searchParam.busKind = node.id;
      searchParam.modelType = node.pid;
      searchParam.reportType = '';
    } else {
      searchParam.busKind = node.pid;
      searchParam.modelType = node.ppid;
      searchParam.reportType = node.id;
    }
  }

  async function saveAdd(params) {
    let res = await save({ ...params });
    if (res.id) {
      message.warning('新增成功!');
    } else {
      message.error('新增失败!');
    }
    dataNow.value = new Date().getTime();
  }

  onMounted(() => {
    getTreeList();
  });
</script>

<style lang="less" scoped>
  .reportManager {
    width: calc(100% - 20px);
    height: calc(100% - 90px);
    position: relative;
    margin: 80px 10px 10px 10px;

    .content {
      width: 100%;
      height: calc(100% - 30px);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;

      // z-index: 999;
      .left-box {
        width: 15%;
        height: 100%;
        padding: 20px;
        border: 1px solid #99e8ff66;
        background: #27546e1a;
        box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
        -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
        -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
        overflow-y: auto;

        // lxh
        .iconfont {
          color: #fff;
          font-size: 12px;
          margin-left: 5px;
        }
      }

      .right-box {
        width: 85%;
        height: 100%;
        padding: 0px 0px 0px 15px;
        box-sizing: border-box;
      }
    }
  }
</style>