wanda-bm-guide/src/views/legendRules/index.vue

<template>
    <!-- 图例库首页 -->
    <div class='legend-rules'>
        <div class='nav'>
            <img class='img-menu' src='@/assets/imgs/menu.png' alt />
            <el-divider direction='vertical'></el-divider>
            <img class='img-logo' src='@/assets/imgs/logo_tu.png' alt />
            <span style='color:#1F2329'>万达管理说明书</span>
            <span class='circular'></span>
            <span style='color:#1F2329'>图例绘制规则</span>
            <i class='el-icon-caret-bottom'></i>
        </div>
        <div class='legend-rules-top'>
            图例绘制规则
            <el-button type='primary' class='rules-button' size='small' @click='add'>添加图例</el-button>
        </div>
        <div class='legend-rules-bottom'>
            <div class='legend-rules-left'>
                <!-- <p>楼层功能</p> -->
                <!-- <el-tree :data='treeData' :default-checked-keys='`GDXT`' :props='defaultProps' default-expand-all @node-click='handleNodeClick'></el-tree> -->
                <a-tree
                    :tree-data='treeData'
                    v-if='treeData.length'
                    defaultExpandAll
                    :replaceFields='defaultProps'
                    :default-selected-keys='["GDXT"]'
                    @select='handleNodeClick'
                ></a-tree>
            </div>
            <div class='legend-rules-right'>
                <!-- <el-table :data='tableData' style='width: 100%'>
                    <el-table-column prop='Name' label='图例名称'>
                        <template slot-scope='{row}'>{{row.Name || '--'}}</template>
                    </el-table-column>
                    <el-table-column prop='Url' label='图例样式'>
                        <template slot-scope='{row}'>
                            <img v-if='row.Url' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
                            <span v-else>{{'--'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop label='单位'>
                        <template slot-scope='{row}'>{{row.Unit || '--'}}</template>
                    </el-table-column>
                    <el-table-column label='操作' width='100'>
                        <template slot-scope='scope'>
                            <el-button @click='deleteClick(scope.row)' type='text' size='small'>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>-->
                <Table
                    :head='headList2'
                    :source='tableData'
                    :toolButtons='toolBtns'
                    :selectWidth='180'
                    height='100%'
                    @tool-button-click='buttonClickHandle'
                >
                    <img slot-scope='{col, row}' v-if='col.key==="Url"' class='img' :src='`/serve/topology-wanda/Picture/query/${row.Url}`' alt />
                </Table>
            </div>
        </div>
        <add-legend ref='addLegend' @mesg='mesg'></add-legend>
    </div>
</template>
<script>
import addLegend from '../legendLibrary/addLegend'
import { getLegendTree, queryRelation, deleteRelation } from '@/api/legendLibrary.js'
export default {
    components: { addLegend },
    data() {
        return {
            treeData: [],
            GraphCategoryId: ['GDXT'],
            tableData: [],
            defaultProps: {
                children: 'Category',
                title: 'Name',
                key: 'Id'
            }, //test
            // 可筛选表格表头列表
            headList2: [
                {
                    title: '图例名称', // 列的名称
                    key: 'Name', // 列的标识
                    show: true // 是否显示该列
                },
                {
                    title: '图例样式',
                    key: 'Url',
                    show: true
                },
                {
                    title: '单位',
                    key: 'Unit',
                    show: true
                }
            ],
            // 操作按钮组 (非必填)
            toolBtns: [
                {
                    icon: 'copy',
                    name: '上移'
                },
                {
                    icon: 'print',
                    name: '下移'
                },
                {
                    icon: 'pending',
                    name: '删除'
                }
            ]
        }
    },
    methods: {
        /**
         * 点击工具栏按钮回调方法
         * @param {Object} Obj {tool:{icon:'icon组件名称',name:'按钮名称',type:'icon组件type'},item:当前行数据}
         */
        buttonClickHandle(obj) {
            let index = Number(obj.item.index.split('-')[1])
            let _this = this
            switch (obj.tool.name) {
                case '删除':
                    this.deleteClick(obj.item)
                    break
                case '上移':
                    up()
                    break
                case '下移':
                    down()
                    break
            }
            function up() {
                if (index == 0) {
                    _this.$message.error('处于顶端，不可再上移')
                } else {
                    let upDate = _this.tableData[index - 1]
                    _this.tableData.splice(index - 1, 1)
                    _this.tableData.splice(index, 0, upDate)
                }
            }

            function down() {
                if (index == _this.tableData.length - 1) {
                    _this.$message.error('处于底端，不可再下移')
                } else {
                    let downDate = _this.tableData[index + 1]
                    _this.tableData.splice(index + 1, 1)
                    _this.tableData.splice(index, 0, downDate)
                }
            }
        },

        handleNodeClick(data, e) {
            this.GraphCategoryId = [e.node.eventKey]
            this.getData()
        },
        deleteClick(row) {
            console.log(row)
            let postParams = [
                {
                    GraphCategoryId: this.GraphCategoryId[0],
                    GraphElementId: row.Id
                }
            ]
            deleteRelation({ postParams }).then(res => {
                if (res.Result == 'success') {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.getData()
                }
            })
        },
        mesg() {
            this.getData()
        },
        add() {
            this.$refs.addLegend.open('', '', this.GraphCategoryId)
        },
        init() {
            let getParams = {}
            getLegendTree({ getParams }).then(res => {
                this.treeData = res.Content
                this.getData()
            })
        },
        getData() {
            let postParams = this.GraphCategoryId
            let data = {}
            queryRelation({ data, postParams }).then(res => {
                this.tableData = res.data.Content
            })
        }
    },
    mounted() {
        this.init()
    }
}
</script>
<style lang="less" scoped>
.legend-rules {
    background: rgba(247, 249, 250, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #1f2329;
    .nav {
        height: 48px;
        line-height: 48px;
        width: 100%;
        background: #fff;
        margin-left: 17px;
        .img-menu {
            margin-right: 9px;
        }
        .img-logo {
            margin: 0 9px;
        }
        .circular {
            display: inline-block;
            width: 4px;
            height: 4px;
            background: rgba(195, 198, 203, 1);
            border-radius: 50%;
            margin: 0 8px 3px 8px;
        }
    }
    .legend-rules-top {
        text-align: center;
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        .rules-button {
            float: right;
            margin-right: 16px;
            margin-top: 8px;
        }
    }
    .legend-rules-bottom {
        flex: 1;
        display: flex;
        .legend-rules-left {
            width: 288px;
            padding: 26px;
        }
        .legend-rules-right {
            padding: 16px;
            flex: 1;
            background: #fff;
            color: #1f2429;
            .img {
                width: 28px;
                height: 28px;
            }
        }
    }
}
</style>
<style lang="less" >
.legend-rules {
    .el-tree {
        background: rgba(247, 249, 250, 1);
    }
    .is-current {
        background: #e1f2ff !important;
        border-radius: 4px;
        font-size: 14px;
        color: rgba(0, 145, 255, 1);
    }
    th {
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: #646a73;
        height: 40px;
        background: rgba(248, 249, 250, 1);
    }
    td {
        color: #1f2429;
    }
}
</style>