AnalysisSystemForRadionuclide_vue/src/views/logManage/index.vue

<template>
  <div class="log">
    <a-card class="log-tree" :bordered="false">
      <!-- 标题 -->
      <template slot="title">
        <div class="title">
          <div class="title-text">LOG</div>
          <div class="title-rect">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </template>
      <!-- 标题结束 -->
      <!-- 内容 -->
      <tree-with-line :treeData="treeData" :selected-keys.sync="selectedKeys" :expanded-keys.sync="expandedKeys" @select="onSelect"> </tree-with-line>
      <!-- 内容结束 -->
    </a-card>
    <div class="log-list">
      <custom-table
        size="middle"
        rowKey="id"
        :columns="columns"
        :list="dataSource"
        :pagination="false"
        :loading="loading"
        :can-select="false"
        @change="handleTableChange"
        :scroll="{ y: 'calc(100vh - 365px)' }"
      >
        <template slot="operate" slot-scope="{ record }">
          <a-space :size="20">
            <img src="@/assets/images/log/operate.png" alt="" style="cursor: pointer" @click.stop="onOperate(record)" />
            <img
              src="@/assets/images/log/download.png"
              alt=""
              style="cursor: pointer"
              @click.stop="onDownload(record)"
            />
          </a-space>
        </template>
      </custom-table>
    </div>

    <custom-modal title="Log" v-model="visible" :show-footer="false">
      这里是Log内容
    </custom-modal>
  </div>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import TreeWithLine from '@/components/TreeWithLine/index.vue'
import { downloadFile, getAction } from '../../api/manage'
import TreeJson from './tree.json'

const columns = [
  {
    title: 'Name',
    align: 'center',
    dataIndex: 'name'
  },
  {
    title: 'date',
    align: 'center',
    dataIndex: 'date'
  },
  {
    title: 'size',
    align: 'center',
    dataIndex: 'size'
  },
  {
    title: 'Operate',
    align: 'center',
    scopedSlots: {
      customRender: 'operate'
    }
  }
]

export default {
  mixins: [JeecgListMixin],
  components: {
    TreeWithLine
  },
  data() {
    this.columns = columns
    return {
      disableMixinCreated: true,
      url: {
        list: '/test'
      },
      isGettingTreeData: false, // 正在获取左侧树信息
      treeData: [],
      selectedKeys: [],
      expandedKeys: [],
      dataSource: [
        {
          id: 1,
          name: 'DEX33_002-20220512_0723_S_FULL_9011.9.log',
          date: '2022-05-13',
          size: '105KB',
          fileName: 'test.txt'
        }
      ],
      visible: false
    }
  },
  created() {
    this.getTreeData()
  },
  methods: {
    async getTreeData() {
      try {
        this.isGettingTreeData = true
        const res = await getAction('/logManage/findFtpFolders')
        console.log('%c [ res ]-159', 'font-size:13px; background:pink; color:#bf2c9f;', res)
      } catch (error) {
        console.error(error)
        this.$message.error('Get Tree Data Failed')
        this.treeData = this.buildTreeData(TreeJson)
        console.log('%c [ this.treeData ]-125', 'font-size:13px; background:pink; color:#bf2c9f;', this.treeData)
        const firstNode = this.treeData[0]
        this.selectedKeys = [firstNode.key]
        this.expandedKeys = [firstNode.key]
        this.onSelect()
      } finally {
        this.isGettingTreeData = false
      }
    },

    /**
     * @param {Array<any>} treeJson
     */
    buildTreeData(treeJson) {
      const tree = []
      treeJson.forEach(item => {
        const treeNode = {
          title: item.name,
          key: item.path,
          children: []
        }
        if (item.children && item.children.length) {
          treeNode.children.push(...this.buildTreeData(item.children))
        }
        tree.push(treeNode)
      })
      return tree
    },
    onSelect() {
      this.queryParam.query = this.selectedKeys[0]
      this.loadData()
    },
    onOperate(record) {
      console.log('%c [  ]-147', 'font-size:13px; background:pink; color:#bf2c9f;', record)
      this.visible = true
    },
    onDownload({ fileName }) {
      downloadFile('/logManage/downloadFile', fileName, { fileName })
    }
  }
}
</script>
<style lang="less" scoped>
.log {
  height: 100%;
  display: flex;
  &-tree {
    width: 290px;
    height: 100%;
    flex-shrink: 0;
    margin-right: 20px;
    background-color: #022024;
    border: 1px solid #0c6a66;
    ::v-deep {
      .ant-card {
        &-head {
          border-bottom: 4px solid rgba(12, 235, 201, 0.2);
          height: auto;
          &-title {
            height: 45px;
            line-height: 45px;
            padding: 0;
            padding-right: 20px;
            font-family: MicrogrammaD-MediExte;
            font-size: 18px;
            font-weight: bold;
            color: #0cebc9;
          }
        }
        &-body {
          padding: 0 20px;
          height: calc(100% - 50px);
          overflow: auto;
        }
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      &-text {
        padding-left: 20px;
        width: 100px;
        background-color: rgba(12, 235, 201, 0.05);
      }

      &-rect {
        span {
          display: inline-block;
          background-color: rgba(12, 235, 201, 0.2);
          vertical-align: middle;
          &:first-child {
            width: 4px;
            height: 4px;
          }
          &:nth-child(2) {
            width: 6px;
            height: 6px;
            margin-right: 6px;
          }
          &:nth-child(3) {
            width: 4px;
            height: 4px;
            margin-right: 9px;
          }
          &:nth-child(4) {
            width: 1px;
            height: 16px;
            margin-right: 23px;
          }
          &:nth-child(5) {
            width: 2px;
            height: 2px;
            margin-right: 24px;
          }
          &:nth-child(6) {
            width: 4px;
            height: 4px;
          }
        }
      }
    }
  }

  &-list {
  }
}
</style>