增加列表显示

gaoshp

2024-11-04 eef1ef0be935d4a3d8fc691b2666f41796b2d4a5

 src/views/mdc/MYTree.vue

@@ -1,17 +1,30 @@
<!--
 * @Date: 2024-04-18 19:53:35
 * @LastEditors: Sneed
 * @LastEditTime: 2024-06-16 16:21:59
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/MYTree.vue
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-11-04 19:55:07
 * @FilePath: /cps-web/src/views/mdc/MYTree.vue
-->
<template>
    <el-tree :expand-on-click-node="false" 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>
    <el-input v-model="word" style="max-width: 600px" @change="search" placeholder="" class="input-with-select">
        <template #append>
            <el-button :icon="ElementPlusIconsVue.Search" />
        </template>
    </el-input>
    <el-switch v-model="showType" active-text="列表" inactive-text="树状" @change="switchFn" />
    <el-tree v-show="!showType" :expand-on-click-node="false" 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>
    <el-table v-show="showType" :data="tableData" @selection-change="handleSelectionChange" highlight-current-row
        :current-row-key="currentNodeKey" row-key="id" @row-click="rowClick">
        <el-table-column v-if="showCheckbox" type="selection" :selectable="selectable" width="55" />
        <el-table-column prop="title" label="工位名称" />
    </el-table>
</template>

<script>
import pmsPng from '@/assets/pms.png'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
export default {
    props: {
        showCheckbox: {
@@ -31,6 +44,10 @@
    },
    data() {
        return {
            ElementPlusIconsVue,
            word: '',
            showType: false, // 显示类型
            tableData: [],
            pmsPng,
            firstWorkKey: '',
            currentNodeKey: [],
@@ -57,10 +74,29 @@
            this.$emit('update:modelValue', value)
        }
    },
    created() {
    mounted() {
        this.getList()
        let key = this.$route.path
        if (localStorage.getItem(key) === '1') {
            this.showType = true
        }
        console.log(this.$route, '>>>>>>')
    },
    methods: {
        search() {
            console.log('Search')
            this.getList()
        },
        switchFn(val) {
            console.log(this.$route, val, '>>>>>>')
            localStorage.setItem(this.$route.path, val ? '1' : '0')
        },
        handleSelectionChange(selection) {
            this.value = selection.map(v => v.id)
        },
        rowClick(row) {
            this.currentNodeKey = row.id
        },
        renderContent(h, { data, node }) {
            let img = data.groupTag == 'fms_beltline'
            return h('a', {
@@ -80,6 +116,7 @@
                groupType: "group_workstation"
            }).then(({ code, data }) => {
                if (code === 200) {
                    this.tableData = data.filter(v => v.isWorkstation && v.title.indexOf(this.word) > -1)
                    this.data = this.formatData(data)
                    this.$nextTick(() => {
                        this.currentNodeKey = this.firstWorkKey
@@ -100,8 +137,15 @@
            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) => {
                    let children = this.formatData(data, v).sort((a, b) => {
                        return b.sort - a.sort
                    })
                    v.children = children.filter(v => {
                        if (v.isWorkstation) {
                            return v.title.indexOf(this.word) > -1
                        } else {
                            return true
                        }
                    })
                    this.setCurrentKey(v)
                    return v
@@ -110,8 +154,15 @@
                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) => {
                    let children = this.formatData(data, item).sort((a, b) => {
                        return b.sort - a.sort
                    })
                    item.children = children.filter(v => {
                        if (v.isWorkstation) {
                            return v.title.indexOf(this.word) > -1
                        } else {
                            return true
                        }
                    })
                    this.setCurrentKey(item)
                    return item
@@ -129,6 +180,7 @@

        },
        checkChange(data, data1, data2) {
            console.log('>>>>>>>')
            if (this.getAll) {
                return this.value = this.$refs.treeRef.getCheckedNodes().filter(v => v.isWorkstation)
            }