培训管理-标签管理完成

src/views/training_manage/labelManage.vue

@@ -1,10 +1,108 @@
+<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="searchText" clearable 
-                prefix-icon="el-icon-search" placeholder="请输入标签名称" @input="handleCurrentChange(1)" 
+            <el-input v-model="tableParams.searchText" clearable 
+                :prefix-icon="Search" placeholder="请输入标签名称" @input="handleCurrentChange(1)" 
                 style="width:240px;"></el-input>
         </div>
         <div class="table-wrap">
@@ -15,31 +113,30 @@
                     :min-width="column.minWidth">
                 </el-table-column>
                 <el-table-column label="操作" align="center">
-                    <template slot-scope="{row}">
-                        <el-button type="text" @click="handleModifyLabel(row)">编辑</el-button>
-                        <el-button type="text" @click="deleteLabel(row)" style="color:red;">删除</el-button>
+                    <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="currentPage"
+                :current-page="tableParams.currentPage"
                 @current-change="handleCurrentChange"
-                :page-size="pageSize" 
-                :total="total"
-                style="text-align:right;margin-top:30px;">
+                :page-size="tableParams.pageSize" 
+                :total="tableParams.total"
+                style="margin-top: 60px;justify-content: flex-end;">
             </el-pagination>
         </div>
         <!-- 添加标签弹窗 -->
         <el-dialog
             :title="currentLabel.TagId?'编辑标签':'添加标签'"
-            :visible.sync="isModifyDialogShow"
+            v-model="isModifyDialogShow"
             :close-on-click-modal="false"
             :modal-append-to-body="false"
             @close="isModifyDialogShow=false"
             width="589px"
-            v-dialogDrag
             center
             >
             <div class="dialog-container">
@@ -56,113 +153,6 @@
     </div>
 </template>
 
-<script>
-import {labelTableColumn} from './config/tableColumn'
-import {TagInterface} from '@/api/modules/trainingApi'
-export default {
-    data() {
-        return {
-            /* table */
-            tableLoading:false,
-            tableData:[],
-            tableColumn:labelTableColumn,
-            searchText:'',
-            /* table-page */
-            currentPage:1,
-            pageSize:10,
-            total:0,
-            /* modify label */
-            currentLabel:{},
-            isModifyDialogShow:false,
-        };
-    },
-    methods: {
-        handleModifyLabel(data){
-            this.currentLabel = _.cloneDeep(data)
-            this.isModifyDialogShow = true
-        },
-        async modifyLabel(){
-            if(!this.currentLabel.TagName){
-                this.$message.warning("请输入标签名称")
-                return
-            }
-            if(this.currentLabel.TagName.length>5){
-                this.$message.warning("标签名称过长,请重新编辑")
-                return
-            }
-            let res = null
-            if(this.currentLabel.TagId){
-                //edit
-                res = await TagInterface.editTag({
-                    TagId:this.currentLabel.TagId,
-                    TagName:this.currentLabel.TagName
-                })
-            }else{
-                //add
-                res = await TagInterface.addTag({
-                    TagName:this.currentLabel.TagName
-                })
-            }
-            if(res.Ret!==200) return 
-            //添加/编辑成功
-            this.$message.success(`${this.currentLabel.TagId?'编辑':'添加'}成功`)
-            this.currentPage = 1
-            this.getTableData()
-            this.isModifyDialogShow = false
-        },
-        deleteLabel(label){
-            if(label.VideoTotal!==0){
-                this.$confirm('该标签已关联视频，删除失败','提示',{confirmButtonText:'知道了',showCancelButton:false,type:'error'})
-                return
-            }
-            this.$confirm(
-                '删除后不可恢复，是否确认删除该标签？',
-                '提示',
-                {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning',
-                }
-            ).then(()=>{
-                TagInterface.deleteTag({
-                    TagId:label.TagId
-                }).then(res=>{
-                    if(res.Ret!==200) return 
-                    this.$message.success('删除成功')
-                    this.currentPage=1
-                    this.getTableData()
-                })
-            }).catch(()=>{}).finally(()=>{})
-        },
-        getTableData(){
-            this.tableLoading = true
-            TagInterface.getTagList({
-                PageSize:this.pageSize,
-                CurrentIndex:this.currentPage,
-                Keyword:this.searchText
-            }).then(res=>{
-                this.tableLoading = false
-                if(res.Ret!==200) return
-                if(!res.Data){
-                    this.tableData = []
-                    this.total = 0
-                    return
-                } 
-                this.tableData = res.Data.List||[]
-                this.total = res.Data.Paging.Totals
-            })
-        },
-        handleCurrentChange(page){
-            this.currentPage = page
-            this.getTableData()
-        }
-    },
-    mounted(){
-        this.getTableData()
-    }
-};
-</script>
-
 <style scoped lang="scss">
 @import "./css/manage.scss";
 </style>