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.expanded" 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,
    title: '自动报表',
    id: '0',
    children: []
  },
  {
    pid: 'hand',
    isFolder: true,
    title: '手动报表',
    id: '1',
    children: []
  },
  {
    pid: 'temp',
    isFolder: 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, title: m.itemText, id: m.itemValue })
          })
        }
        el.children.push({ pid: el.id, isFolder: true, 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>