crm_front_v3/src/views/training_manage/labelManage.vue

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


/* table */
const tableLoading = ref(false)
let tableData = ref([])
const tableColumn = labelTableColumn
const tableParams = reactive({
    searchText:'',
    /* table-page */
    currentPage:1,
    pageSize:10,
    total:0,
})
function getTableData(){
    tableLoading.value = true
    TagInterface.getTagList({
        PageSize:tableParams.pageSize,
        CurrentIndex:tableParams.currentPage,
        Keyword:tableParams.searchText
    }).then(res=>{
        tableLoading.value = false
        if(res.Ret!==200) return
        if(!res.Data){
            tableData.value = []
            tableParams.total = 0
            return
        } 
        tableData.value = res.Data.List||[]
        tableParams.total = res.Data.Paging.Totals
    })
}
getTableData()
function handleCurrentChange(page){
    tableParams.currentPage = page
    getTableData()
}
/* modify label */
let currentLabel = ref({})
let isModifyDialogShow = ref(false)
function handleModifyLabel(data){
    currentLabel.value = _.cloneDeep(data)
    isModifyDialogShow.value = true
}
async function modifyLabel(){
    const {TagId,TagName} = currentLabel.value
    if(!TagName){
        ElMessage.warning("请输入标签名称")
        return
    }
    if(TagName.length>5){
        ElMessage.warning("标签名称过长,请重新编辑")
        return
    }
    let res = null
    if(TagId){
        //edit
        res = await TagInterface.editTag({TagId,TagName})
    }else{
        //add
        res = await TagInterface.addTag({TagName})
    }
    if(res.Ret!==200) return 
    //添加/编辑成功
    ElMessage.success(`${TagId?'编辑':'添加'}成功`)
    handleCurrentChange(1)
    isModifyDialogShow.value = false
}
function deleteLabel(label){
    if(label.VideoTotal!==0){
        ElMessageBox.confirm('该标签已关联视频，删除失败','提示',{confirmButtonText:'知道了',showCancelButton:false,type:'error'})
        return
    }
    ElMessageBox.confirm(
        '删除后不可恢复，是否确认删除该标签？',
        '提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    ).then(()=>{
        TagInterface.deleteTag({
            TagId:label.TagId
        }).then(res=>{
            if(res.Ret!==200) return 
            ElMessage.success('删除成功')
            handleCurrentChange(1)
        })
    }).catch(()=>{}).finally(()=>{})
}
</script>
<template>
    <!-- 培训管理-标签管理 -->
    <div class="label-manage-wrap traing-manage">
        <div class="top-wrap">
            <el-button type="primary" @click="handleModifyLabel({})">新增标签</el-button>
            <el-input v-model="tableParams.searchText" clearable 
                :prefix-icon="Search" placeholder="请输入标签名称" @input="handleCurrentChange(1)" 
                style="width:240px;"></el-input>
        </div>
        <div class="table-wrap">
            <el-table :data="tableData" border v-loading="tableLoading">
                <el-table-column v-for="column in tableColumn" :key="column.key" 
                    :label="column.label" align="center"
                    :prop="column.key"
                    :min-width="column.minWidth">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="{row}">
                        <el-link :underline="false" type="primary" style="margin-right: 20px;" @click="handleModifyLabel(row)">编辑</el-link>
                        <el-link :underline="false" type="danger" @click="deleteLabel(row)" style="color:red;">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                layout="total,prev,pager,next,jumper" 
                background
                :current-page="tableParams.currentPage"
                @current-change="handleCurrentChange"
                :page-size="tableParams.pageSize" 
                :total="tableParams.total"
                style="margin-top: 60px;justify-content: flex-end;">
            </el-pagination>
        </div>
        <!-- 添加标签弹窗 -->
        <el-dialog
            :title="currentLabel.TagId?'编辑标签':'添加标签'"
            v-model="isModifyDialogShow"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
            @close="isModifyDialogShow=false"
            width="589px"
            center
            >
            <div class="dialog-container">
                <div class="input-item">
                <el-input  placeholder="请输入标签名称" v-model.trim="currentLabel.TagName" required ></el-input>
                </div>
                <p class="form-hint">注：名称不得超过5个字</p>
            </div>
            <div class="foot-container">
                <el-button @click="isModifyDialogShow=false">取 消</el-button>
                <el-button type="primary" @click="modifyLabel">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

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