123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- <template>
- <el-dialog class="create-dialog-inner" width="840px" title="所属类别" :visible.sync="innerVisible" append-to-body :close-on-click-modal="false"
- custom-class="graphTypeDialog">
- <div class="dialog-bodys">
- <div class="left content">
- <p>拓扑图所属类别</p>
- <div class="treeContainer">
- <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode" node-key="name"></el-tree>
- </div>
- </div>
- <div class="splitLine"></div>
- <div class="right content">
- <p>设备分类参考</p>
- <div class="treeContainer">
- <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode"></el-tree>
- </div>
- </div>
- </div>
- <div slot="footer" class="dialog-footer">
- <el-button @click="innerVisible=false">取消</el-button>
- <el-button type="primary" :disabled="disabled" @click="confirm">确定</el-button>
- </div>
- </el-dialog>
- </template>
- <script>
- import { queryCategoryGraph } from "@/api/home"
- export default {
- data() {
- return {
- innerVisible: false,
- treeData: [],
- disabled: true,
- defaultProps: {
- children: 'categoryList',
- label: 'name'
- },
- selectNode: {}
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- queryCategoryGraph({ switch: true }).then(res => {
- this.treeData = res.content;
- })
- },
- showDialog() {
- this.innerVisible = true
- },
- changeNode(data, node) {
- if (node.isLeaf) {
- this.selectNode = node;
- this.disabled = false;
- }
- },
- // 确认
- confirm() {
- this.innerVisible = false;
- this.$emit('selectNode', this.selectNode)
- }
- }
- }
- </script>
- <style lang="less" scoped>
- /deep/ .graphTypeDialog {
- /deep/ .el-dialog__header {
- border-bottom: 1px solid #f0f1f2ff;
- }
- /deep/ .el-dialog__body {
- padding: 16px 32px;
- }
- .el-dialog__footer {
- padding: 0 20px 20px;
- .el-button {
- padding: 0;
- width: 80px;
- height: 32px;
- text-align: center;
- line-height: 1;
- }
- }
- .dialog-bodys {
- display: flex;
- overflow: hidden;
- height: 380px;
- .splitLine {
- width: 1px;
- background-color: #e4e5e7ff;
- margin: 0 30px;
- }
- .content {
- width: 356px;
- padding: 16px 0 16px 16px;
- box-sizing: border-box;
- .el-tree {
- /deep/ .el-tree-node {
- &.is-current {
- & > .el-tree-node__content {
- background: #e1f2ffff;
- color: #0091ffff;
- &:hover{
- background: #e1f2ffff;
- color: #0091ffff;
- }
- }
- }
- .el-tree-node__content {
- height: 38px;
- line-height: 38px;
- &:hover {
- background: #F5F6F7;
- color: #1F2429;
- }
- }
- }
- }
- &.right {
- background: #f7f8f9;
- .el-tree {
- background: #f7f8f9;
- }
- }
- .treeContainer {
- height: 305px;
- overflow: auto;
- }
- & > p {
- border-left: 4px solid #0091ffff;
- margin-bottom: 20px;
- padding-left: 8px;
- color: #1f2429;
- line-height: 19px;
- }
- }
- }
- }
- </style>
|