FE_middlePlatform_server/src/views/data/Introduce.vue

<template>
    <div>
        <el-container>
            <el-aside width="350px">
                <el-tree ref="type" :data="typeList" node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" highlight-current @node-click="typeClick"></el-tree>
            </el-aside>

            <el-main style="padding-top: 0">
                <el-col :span="24">
                    <el-card shadow="hover" class="mgb20 teacher_tab">
                        <div class="flex-between" style="margin-bottom: 10px;">
                            <p>数据简介</p>
                            <el-button v-if="edited && !editing" type="primary" size="small" @click="editing = !editing">编辑</el-button>
                        </div>
                        <div class="intro" v-if="!edited">
                            <p class="text">{{introduceText}}</p>
                            <div class="btn">
                                <el-button type="primary" size="small" @click="edit">{{introduceText ? '编辑简介' : '添加简介'}}</el-button>
                            </div>
                        </div>
                        <div v-else>
                            <el-input placeholder="请输入简介" v-model="introduce" type="textarea" rows="5" :disabled="!editing"></el-input>
                            <div class="btns" v-if="editing">
                                <el-button @click="editing = false">取 消</el-button>
                                <el-button type="primary" @click="confirmEdit">确 定</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            typeList: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            defaultActive: [],
            edited: false,
            editing: false,
            introduce: '',
            introduceText: '',
            categoryId: ''
        };
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer)
            this.searchTimer = setTimeout(() => {
                this.getData()
            },500)
        }
    },
    mounted(){
        this.getData()
    },
    methods: {
        getData(){
            this.$post(this.api.getTableByClassification).then(res => {
                res.map(n => {
                    n.id = String(n.id)
                    n.label = n.categoryName
                    n.children.map(n => {
                        n.id = String(n.id)
                        n.label = n.categoryName
                        n.children.map(n => {
                            n.id = String(n.id)
                            n.label = n.categoryName
                        })
                    })
                })
                this.typeList = res
                if(res[0].children.length){
                    let item = res[0].children[0]
                    this.categoryId = item.id
                    this.defaultActive = [item.id]
                    this.introduceText = item.introduce
                }else{
                    this.categoryId = res[0].id
                    this.defaultActive = [res[0].id]
                    this.introduceText = res[0].introduce
                }
            }).catch(res => {})
        },
        typeClick(data,node){
            this.edited = false
            this.editing = false
            this.categoryId = data.id
            this.introduceText = data.introduce
        },
        edit(){
            this.edited = true
            this.editing = true
            this.introduce = this.introduceText
        },
        confirmEdit(){
            this.$post(this.api.updateCategory,{
                id: this.categoryId,
                introduce: this.introduce
            }).then(res => {
                this.$message.success(this.introduceText ? '编辑成功' : '新增成功')
                this.getData()
                this.editing = false
            }).catch(res => {})
        }
    }
};
</script>
<style lang="scss" scoped>
    /deep/.el-container{
        background-color: #f0f0f0;
        .el-aside{
            padding: 15px;
            background-color: #fff;
        }
        .intro{
            padding: 20px;
            margin: 20px 0;
            border: 1px solid #dcdcdc;
            border-radius: 4px;
            .text{
                margin-bottom: 20px;
            }
        }
        .btns{
            margin-top: 20px;
        }
    }
    .mag{
        margin-right: 20px;
        margin-left: 20px;
    }
</style>