graphTypeDialog.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <el-dialog class="create-dialog-inner" width="840px" title="所属类别" :visible.sync="innerVisible" append-to-body :close-on-click-modal="false"
  3. custom-class="graphTypeDialog">
  4. <div class="dialog-bodys">
  5. <div class="left content">
  6. <p>拓扑图所属类别</p>
  7. <div class="treeContainer">
  8. <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode" node-key="name"></el-tree>
  9. </div>
  10. </div>
  11. <div class="splitLine"></div>
  12. <div class="right content">
  13. <p>设备分类参考</p>
  14. <div class="treeContainer">
  15. <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode"></el-tree>
  16. </div>
  17. </div>
  18. </div>
  19. <div slot="footer" class="dialog-footer">
  20. <el-button @click="innerVisible=false">取消</el-button>
  21. <el-button type="primary" :disabled="disabled" @click="confirm">确定</el-button>
  22. </div>
  23. </el-dialog>
  24. </template>
  25. <script>
  26. import { queryCategoryGraph } from "@/api/home"
  27. export default {
  28. data() {
  29. return {
  30. innerVisible: false,
  31. treeData: [],
  32. disabled: true,
  33. defaultProps: {
  34. children: 'categoryList',
  35. label: 'name'
  36. },
  37. selectNode: {}
  38. }
  39. },
  40. mounted() {
  41. this.init()
  42. },
  43. methods: {
  44. init() {
  45. queryCategoryGraph({ switch: true }).then(res => {
  46. this.treeData = res.content;
  47. })
  48. },
  49. showDialog() {
  50. this.innerVisible = true
  51. },
  52. changeNode(data, node) {
  53. if (node.isLeaf) {
  54. this.selectNode = node;
  55. this.disabled = false;
  56. }
  57. },
  58. // 确认
  59. confirm() {
  60. this.innerVisible = false;
  61. this.$emit('selectNode', this.selectNode)
  62. }
  63. }
  64. }
  65. </script>
  66. <style lang="less" scoped>
  67. /deep/ .graphTypeDialog {
  68. /deep/ .el-dialog__header {
  69. border-bottom: 1px solid #f0f1f2ff;
  70. }
  71. /deep/ .el-dialog__body {
  72. padding: 16px 32px;
  73. }
  74. .el-dialog__footer {
  75. padding: 0 20px 20px;
  76. .el-button {
  77. padding: 0;
  78. width: 80px;
  79. height: 32px;
  80. text-align: center;
  81. line-height: 1;
  82. }
  83. }
  84. .dialog-bodys {
  85. display: flex;
  86. overflow: hidden;
  87. height: 380px;
  88. .splitLine {
  89. width: 1px;
  90. background-color: #e4e5e7ff;
  91. margin: 0 30px;
  92. }
  93. .content {
  94. width: 356px;
  95. padding: 16px 0 16px 16px;
  96. box-sizing: border-box;
  97. .el-tree {
  98. /deep/ .el-tree-node {
  99. &.is-current {
  100. & > .el-tree-node__content {
  101. background: #e1f2ffff;
  102. color: #0091ffff;
  103. &:hover{
  104. background: #e1f2ffff;
  105. color: #0091ffff;
  106. }
  107. }
  108. }
  109. .el-tree-node__content {
  110. height: 38px;
  111. line-height: 38px;
  112. &:hover {
  113. background: #F5F6F7;
  114. color: #1F2429;
  115. }
  116. }
  117. }
  118. }
  119. &.right {
  120. background: #f7f8f9;
  121. .el-tree {
  122. background: #f7f8f9;
  123. }
  124. }
  125. .treeContainer {
  126. height: 305px;
  127. overflow: auto;
  128. }
  129. & > p {
  130. border-left: 4px solid #0091ffff;
  131. margin-bottom: 20px;
  132. padding-left: 8px;
  133. color: #1f2429;
  134. line-height: 19px;
  135. }
  136. }
  137. }
  138. }
  139. </style>