index.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <div class="ele-body">
  3. <el-card shadow="never" v-loading="loading">
  4. <ele-split-layout
  5. width="266px"
  6. allow-collapse
  7. :right-style="{ overflow: 'hidden' }"
  8. >
  9. <div>
  10. <div class="ele-border-lighter sys-organization-list">
  11. <AssetTree
  12. @handleNodeClick="handleNodeClick"
  13. :type="'5'"
  14. :paramsType="'type'"
  15. ref="treeList"
  16. />
  17. </div>
  18. </div>
  19. <template v-slot:content>
  20. <turnovercar-list
  21. v-if="current"
  22. :category-id="current.id"
  23. :root-id="rootId"
  24. />
  25. </template>
  26. </ele-split-layout>
  27. </el-card>
  28. </div>
  29. </template>
  30. <script>
  31. import AssetTree from '@/components/AssetTree';
  32. import TurnovercarList from './components/turnovercar-list.vue';
  33. export default {
  34. components: {
  35. AssetTree ,
  36. TurnovercarList
  37. },
  38. data () {
  39. return {
  40. // 加载状态
  41. loading: false,
  42. // 表格选中数据
  43. selection: [],
  44. current:null,
  45. rootId:null
  46. };
  47. },
  48. computed: {
  49. },
  50. methods: {
  51. handleNodeClick (info) {
  52. this.current = info
  53. },
  54. // 获取根节点id
  55. setRootId(id){
  56. this.rootId = id
  57. }
  58. }
  59. };
  60. </script>
  61. <style lang="scss" scoped>
  62. .sys-organization-list {
  63. height: calc(100vh - 264px);
  64. box-sizing: border-box;
  65. border-width: 1px;
  66. border-style: solid;
  67. overflow: auto;
  68. }
  69. .sys-organization-list :deep(.el-tree-node__content) {
  70. height: 40px;
  71. & > .el-tree-node__expand-icon {
  72. margin-left: 10px;
  73. }
  74. }
  75. </style>