crm_front_v3/src/views/training_manage/classifyManage.vue

<script setup>
import { reactive, ref, watch, computed, nextTick } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {ClassifyInterface} from '@/api/modules/trainingApi'
import _ from 'lodash'

let searchText = ref('')
let tableData = ref([])
let tableLoading = ref(false)

let defaultList = ref([{ClassifyId:-1,ClassifyName:'无'}])
const rules = reactive({
    ParentId:[{required:true,message:'请选择上级分类'}],
    ClassifyName:[{required:true,message:'请输入分类名称'}]
})

const optionList = computed(()=>{
    const list = tableData.value.map(i=>{
        return {
            ClassifyId:i.ClassifyId,
            ClassifyName:i.ClassifyName
        }
    })
    return list
})


let isModifyDialogShow = ref(false)
let formRef = ref(null)
watch(isModifyDialogShow,(newVal)=>{
    if(newVal){
        nextTick(()=>{
            formRef.value?.clearValidate()
        })
    }
})
let currentClassify = ref({})
function handleModifyClassify(data){
    currentClassify.value = _.cloneDeep(data)
    if(data.ParentId===0){
        currentClassify.value.ParentId = -1
    }
    isModifyDialogShow.value = true
}
//添加编辑分类
async function modifyClassify(){
    try{
        await formRef.value?.validate()
    }catch(e){
        console.log(e)
        return 
    }
    
    let res = null
    //params对ParentId为-1的数据做处理,转为0
    if(currentClassify.value.ClassifyId){
        res = await ClassifyInterface.editClassify({
            ClassifyId:currentClassify.value.ClassifyId,
            ParentId:currentClassify.value.ParentId===-1?0:currentClassify.value.ParentId,
            ClassifyName:currentClassify.value.ClassifyName
        })
    }else{
        res = await ClassifyInterface.addClassify({
            ParentId:currentClassify.value.ParentId===-1?0:currentClassify.value.ParentId,
            ClassifyName:currentClassify.value.ClassifyName
        })
    }
    if(res.Ret!==200) return 
    ElMessage.success(`${currentClassify.value.ClassifyId?'编辑':'添加'}成功`)
    getTableData()
    isModifyDialogShow.value = false
}
function getTableData(){
    ClassifyInterface.getClassifyList({
        Keyword:searchText.value
    }).then(res=>{
        if(res.Ret!==200) return
        tableData.value = res.Data&&res.Data.List||[]
    })
}
getTableData()
function deleteClassify(data){
    if(data.Children&&data.Children.length){
        ElMessageBox.confirm(
            '该分类下已关联内容，不可删除！',
            '提示',
            {
                confirmButtonText: '知道了',
                showCancelButton:false,
                type: 'error',
            }
        ).then(()=>{})
    }else{
        ElMessageBox.confirm(
            '删除后不可恢复，是否确认删除？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(()=>{
            ClassifyInterface.deleteClassify({
                ClassifyId:data.ClassifyId
            }).then(res=>{
                if(res.Ret!==200) return 
                ElMessage.success('删除成功')
                getTableData()
            })
            
        })
    }
}
</script>
<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="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 #default="{row}">
                        <span>{{row.ParentId?'':row.ClassifyName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="ClassifyName" label="二级分类" align="center">
                    <template #default="{row}">
                        <span>{{row.ParentId?row.ClassifyName:''}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="400px">
                    <template #default="{row}">
                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="handleModifyClassify(row)">编辑</el-link>
                        <el-link :underline="false" type="danger" @click="deleteClassify(row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加分类弹窗 -->
        <el-dialog :title="currentClassify.ClassifyId?'编辑分类':'添加分类'" v-model="isModifyDialogShow"
            :close-on-click-modal="false" :modal-append-to-body="false" @close="isModifyDialogShow=false" width="589px" center>
            <div class="dialog-container">
                <el-form :model="currentClassify" :rules="rules" ref="formRef" 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>

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