编辑时间轴组件

gaoshp

2024-04-23 88dc89d715828ae485cd00772c0c690b58a7b650

 src/views/mdc/MYTree.vue

@@ -1,13 +1,13 @@
<!--
 * @Date: 2024-04-18 19:53:35
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-18 21:30:19
 * @LastEditTime: 2024-04-21 10:37:48
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/MYTree.vue
-->
<template>
    <el-tree ref="treeRef" v-bind="$attrs" :show-checkbox="showCheckbox" :current-node-key="currentNodeKey"
        node-key="id" :props="defalutProps" :data="data" @check-change="checkChange" @node-click="handleNodeClick"
        highlight-current default-expand-all :render-content="renderContent"></el-tree>
        highlight-current default-expand-all :expand-on-click-node="false" :render-content="renderContent"></el-tree>
</template>

<script>
@@ -23,13 +23,17 @@
        return {
            pmsPng,
            firstWorkKey: '',
            currentNodeKey: '',
            currentNodeKey: [],
            defalutProps: {
                label: 'title',
                children: 'children'
                children: 'children',
                disabled: 'disabled',
                class: (data, node) => {
                    return this.value.includes(data.id) ? 'active' : ''
                }
            },
            data: [],
            value: []
            value: [],
        }
    },
    watch: {
@@ -44,12 +48,15 @@
    },
    created() {
        this.getList()
        this.customNodeClass = (data, node) => {
            return this.currentNodeKey == node.id || this.value.includes(node.id) ? 'active' : ''
        }
    },
    methods: {
        renderContent(h, { data }) {
            let img = data.groupTag == 'fms_beltline'
            return h('span', {

            return h('a', {
                disabled: data.disabled
            },
                img ? h('img', {
                    src: pmsPng
@@ -65,6 +72,7 @@
                    this.data = this.formatData(data)
                    this.$nextTick(() => {
                        this.currentNodeKey = this.firstWorkKey
                        this.$emit('loaded', this.firstWorkKey)
                    })
                }
            })
@@ -79,6 +87,7 @@
            let newData = []
            if (!current) {
                newData = data.filter(item => item.parentId == 0).map(v => {
                    if (!v.isWorkstation) v.disabled = true
                    v.children = this.formatData(data, v).sort((a, b) => {
                        return b.sort - a.sort
                    })
@@ -88,6 +97,7 @@
            } else {
                let res = data.filter(v => v.parentId == current.id)
                res = res.map(item => {
                    if (!item.isWorkstation) item.disabled = true
                    item.children = this.formatData(data, item).sort((a, b) => {
                        return b.sort - a.sort
                    })
@@ -99,7 +109,6 @@
            return newData
        },
        handleNodeClick(node) {
            console.log(node)
            this.$nextTick(() => {
                if (node.isWorkstation) {
                    this.currentNodeKey = node.id
@@ -114,4 +123,8 @@
}
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.active .el-tree-node__content {
    background: var(--el-color-primary) !important;
}
</style>