kd-aiot-frontend/src/components/addDoc/doc_template.vue

<template>
  <div class="ele-body" style="height:60vh;overflow: auto;">
    <el-card shadow="never" v-loading="loading">
      <ele-split-layout
        width="210px"
        allow-collapse
        :right-style="{ overflow: 'hidden' }"
      >
        <div>
          <!-- 操作按钮 -->
          <ele-toolbar class="ele-toolbar-actions">
            <div style="margin: 5px 0"> </div>
          </ele-toolbar>
             
          <div class="ele-border-lighter sys-organization-list"  style="height: 65vh">
            <el-tree
              ref="tree"
              :data="data"
              highlight-current
              :draggable="true"
              node-key="id"
              :props="{ label: 'name', children: 'sonDirectoryList' }"
              :expand-on-click-node="false"
              :default-expand-all="true"
              @node-click="onNodeClick"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <ElementTreeLine
                  :node="node"
                  :showLabelLine="true"
                  :indent="20"
                >
                  <img src="../../assets/wjj.png" />

                  <span>{{ node.label }}</span>
                </ElementTreeLine>
              </span>
            </el-tree>
          </div>
        </div>
        <template v-slot:content>
          <FileTableList
            ref="tableRef"
            :parentData="current"
            :disabledTableList="disabledTableList"
          />
        </template>
      </ele-split-layout>
    </el-card>

    <!-- {{current?.id}} -->
  </div>
</template>

<script>
//
import FileTableList from './file-table-listTemplate.vue';
import { getDocTreeListAPI } from './api';
import { mapGetters } from 'vuex';

import ElementTreeLine from 'element-tree-line';
// css
import 'element-tree-line/dist/style.scss';
export default {
  components: { FileTableList, ElementTreeLine },

  data() {
    return {
      loading: true,
      // 列表数据
      data: [],
      fileType:0,
      // 选中数据
      current: {}
    };
  },
  props: {
    lcyStatus: '', //1：文档工作区 2：文档归档区 3：文档发布区 4：文档废止区

    disabledTableList: {
      //已选择列表
      default: () => []
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created() {
    this.query();
  },

  methods: {
    /* 查询 */
    async query() {
      this.loading = true;
      let query = {
        type: this.fileType,
        currentUserId: this.user.info.userId
      };
      this.data = await getDocTreeListAPI(query);

      this.current = null;
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.data[0].id);

        this.onNodeClick(this.data[0]);
      });
      this.loading = false;
    },
    /* 选择数据 */
    onNodeClick(row) {
      if (row) {
        this.current = row;
        this.$nextTick(() => {
          this.$refs.tableRef.reload();
        });
      } else {
        this.current = null;
      }
    },

    getTableList() {
      return this.$refs.tableRef.getTableList();
    }
  }
};
</script>

<style lang="scss" scoped>
.sys-organization-list {
  height: calc(100vh - 180px);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  overflow: auto;
}

.sys-organization-list :deep(.el-tree-node__content) {
  height: 30px;

  & > .el-tree-node__expand-icon {
    margin-left: 10px;
  }
}
.custom-tree-node {
  display: flex;
  align-items: center;
}
:deep(.el-popover) {
  min-width: 50px;
  position: fixed;
}
:deep(.el-link--inner) {
  padding: 3px 0;
}
// :deep(.element-tree-node-line-hor) {
//   border-bottom: 1px solid #dcdfe6;
// }
// :deep(.element-tree-node-line-ver) {
//   border-left: 1px solid #dcdfe6;
// }
</style>
<style lang="scss">
.el-tree
  > .el-tree-node
  > .el-tree-node__content:nth-of-type(1)
  .element-tree-node-line-hor {
  border: none;
}
.el-tree
  > .el-tree-node
  > .el-tree-node__content:nth-of-type(1)
  .element-tree-node-line-ver {
  border: none;
}
</style>