hz_crm_web/src/views/training_manage/classifyManage.vue

<template>
    <div class="classify-manage-wrap traing-manage">
        <div class="top-wrap">
            <el-button type="primary" @click="handleModifyClassify({})">添加分类</el-button>
            <el-input v-model="searchText" clearable prefix-icon="el-icon-search" placeholder="请输入分类名称"
                @input="getTableData" style="width:240px;"></el-input>
        </div>
        <div class="table-wrap">
            <el-table :data="tableData" v-loading="tableLoading" row-key="ClassifyId"
                :tree-props="{children:'Children',hasChildren:'hasChildren'}">
                <el-table-column prop="ClassifyName" label="一级分类" align="center">
                    <template slot-scope="{row}">
                        <span>{{row.ParentId?'':row.ClassifyName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="ClassifyName" label="二级分类" align="center">
                    <template slot-scope="{row}">
                        <span>{{row.ParentId?row.ClassifyName:''}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="400px">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="handleModifyClassify(row)">编辑</el-button>
                        <el-button type="text" @click="deleteClassify(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加分类弹窗 -->
        <el-dialog :title="currentClassify.ClassifyId?'编辑分类':'添加分类'" :visible.sync="isModifyDialogShow"
            :close-on-click-modal="false" :modal-append-to-body="false" @close="isModifyDialogShow=false" width="589px"
            v-dialogDrag center>
            <div class="dialog-container">
                <el-form :model="currentClassify" :rules="rules" ref="form" label-position="top">
                    <el-form-item label="上级分类" prop="ParentId">
                        <el-select v-model="currentClassify.ParentId" placeholder="请选择上级分类" style="width:100%;">
                            <el-option v-for="item in currentClassify.ClassifyId
                                ?(currentClassify.ParentId<=0?defaultList:optionList)
                                :[...defaultList,...optionList]" 
                            :key="item.ClassifyId"
                            :label="item.ClassifyName"
                            :value="item.ClassifyId"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类名称" prop="ClassifyName">
                        <el-input v-model="currentClassify.ClassifyName" placeholder="请输入分类名称" style="width:100%;"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="foot-container">
                <el-button @click="isModifyDialogShow=false">取 消</el-button>
                <el-button type="primary" @click="modifyClassify">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {ClassifyInterface} from '@/api/modules/trainingApi'
export default {
    data() {
        return {
            searchText: '',
            tableData: [],
            tableLoading: false,
            currentClassify: {},
            defaultList:[{ClassifyId:-1,ClassifyName:'无'}],
            isModifyDialogShow: false,
            rules:{
                ParentId:[{required:true,message:'请选择上级分类'}],
                ClassifyName:[{required:true,message:'请输入分类名称'}]
            }
        };
    },
    watch:{
        isModifyDialogShow(newVal){
            if(newVal){
                this.$nextTick(()=>{
                    this.$refs.form&&this.$refs.form.clearValidate();
                })
            }
        }
    },
    computed:{
        optionList(){
            const list = this.tableData.map(i=>{
                return {
                    ClassifyId:i.ClassifyId,
                    ClassifyName:i.ClassifyName
                }
            })
            return list
        },
    },
    methods: {
        handleModifyClassify(data) {
            this.currentClassify = _.cloneDeep(data)
            if(data.ParentId===0){
                this.currentClassify.ParentId = -1
            }
            this.isModifyDialogShow = true
        },
        async modifyClassify() {
            //params对ParentId为-1的数据做处理,转为0
            await this.$refs.form.validate()
            let res = null
            if(this.currentClassify.ClassifyId){
                res = await ClassifyInterface.editClassify({
                    ClassifyId:this.currentClassify.ClassifyId,
                    ParentId:this.currentClassify.ParentId===-1?0:this.currentClassify.ParentId,
                    ClassifyName:this.currentClassify.ClassifyName
                })
            }else{
                res = await ClassifyInterface.addClassify({
                    ParentId:this.currentClassify.ParentId===-1?0:this.currentClassify.ParentId,
                    ClassifyName:this.currentClassify.ClassifyName
                })
            }
            if(res.Ret!==200) return 
            this.$message.success(`${this.currentClassify.ClassifyId?'编辑':'添加'}成功`)
            this.getTableData()
            this.isModifyDialogShow = false
        },
        deleteClassify(data) {
            if(data.Children&&data.Children.length){
                this.$confirm(
                    '该分类下已关联内容，不可删除！',
                    '提示',
                    {
                        confirmButtonText: '知道了',
                        showCancelButton:false,
                        type: 'error',
                    }
                ).then(()=>{})
            }else{
                this.$confirm(
                    '删除后不可恢复，是否确认删除？',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).then(()=>{
                    ClassifyInterface.deleteClassify({
                        ClassifyId:data.ClassifyId
                    }).then(res=>{
                        if(res.Ret!==200) return 
                        this.$message.success('删除成功')
                        this.getTableData()
                    })
                    
                })
            }
        },
        getTableData(){
            ClassifyInterface.getClassifyList({
                Keyword:this.searchText
            }).then(res=>{
                if(res.Ret!==200) return
                this.tableData = res.Data&&res.Data.List||[]
            })
        },
    },
    mounted(){
        this.getTableData()
    }
};
</script>

<style scoped lang="scss">
@import "./css/manage.scss";
</style>