|
|
|
|
@ -11,7 +11,7 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-card>
|
|
|
|
|
<div class="operation-container">
|
|
|
|
|
<el-button type="primary" @click="openDialog"
|
|
|
|
|
<el-button type="primary" @click="openAddDialog"
|
|
|
|
|
><el-icon><Plus /></el-icon>新增</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button type="danger" plain :disabled="isMultiple" @click="multipleDelete"
|
|
|
|
|
@ -30,8 +30,17 @@
|
|
|
|
|
<el-table-column prop="articleNum" label="文章量" align="center" />
|
|
|
|
|
<el-table-column label="操作" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-button type="primary" @click="updateCategory(scope.row.id)">修改</el-button>
|
|
|
|
|
<el-button type="danger" @click="deleteCategory(scope.row.id)">删除</el-button>
|
|
|
|
|
<el-button type="primary" @click="openUpdateDialog(scope.row._id)">修改</el-button>
|
|
|
|
|
<el-popconfirm
|
|
|
|
|
title="确定删除吗？"
|
|
|
|
|
@confirm="deleteCategoryById(scope.row._id)"
|
|
|
|
|
confirm-button-text="是"
|
|
|
|
|
cancel-button-text="否"
|
|
|
|
|
>
|
|
|
|
|
<template #reference>
|
|
|
|
|
<el-button type="danger">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
@ -47,7 +56,7 @@
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
/>
|
|
|
|
|
<!-- “新增分类”对话框 -->
|
|
|
|
|
<el-dialog v-model="dialogVisible" title="新增分类" width="30%">
|
|
|
|
|
<el-dialog v-model="addDialogVisible" title="新增分类" width="30%">
|
|
|
|
|
<el-form :model="categoryFrom" label-width="120px" label-position="left" class="dialog-form">
|
|
|
|
|
<el-form-item label="名称" label-width="auto">
|
|
|
|
|
<el-input v-model="categoryFrom.name"></el-input>
|
|
|
|
|
@ -55,8 +64,22 @@
|
|
|
|
|
</el-form>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="dialogVisible = false">提交</el-button>
|
|
|
|
|
<el-button @click="addDialogVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="submitAddForm">提交</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<!-- “修改分类”对话框 -->
|
|
|
|
|
<el-dialog v-model="updateDialogVisible" title="修改分类" width="30%">
|
|
|
|
|
<el-form :model="categoryFrom" label-width="120px" label-position="left" class="dialog-form">
|
|
|
|
|
<el-form-item label="名称" label-width="auto">
|
|
|
|
|
<el-input v-model="categoryFrom.name"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
<el-button @click="updateDialogVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="submitUpdateForm">提交</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
@ -64,28 +87,20 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
|
import {
|
|
|
|
|
getCategoryList as apiGetCategoryList,
|
|
|
|
|
getCategoryById,
|
|
|
|
|
deleteCategoryById as apiDelCategoryById,
|
|
|
|
|
updateCategory as apiUpdateCategory
|
|
|
|
|
} from '@/api/category'
|
|
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
|
|
|
|
|
|
const isMultiple = ref(true)
|
|
|
|
|
const multipleSelection = ref([])
|
|
|
|
|
const categoryList = [
|
|
|
|
|
{
|
|
|
|
|
id: 0,
|
|
|
|
|
name: '学习笔记',
|
|
|
|
|
articleNum: 5
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
name: '生活',
|
|
|
|
|
articleNum: 5
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
name: '散文',
|
|
|
|
|
articleNum: 5
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
const categoryList = ref([])
|
|
|
|
|
const categoryFrom = ref({
|
|
|
|
|
_id: '',
|
|
|
|
|
name: ''
|
|
|
|
|
})
|
|
|
|
|
const paginition = ref({
|
|
|
|
|
@ -93,14 +108,25 @@ const paginition = ref({
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
total: 40
|
|
|
|
|
})
|
|
|
|
|
const dialogVisible = ref(false)
|
|
|
|
|
const addDialogVisible = ref(false)
|
|
|
|
|
const updateDialogVisible = ref(false)
|
|
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
getCategoryList()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const getCategoryList = async () => {
|
|
|
|
|
const { data } = await apiGetCategoryList()
|
|
|
|
|
categoryList.value = data
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 批量删除
|
|
|
|
|
const multipleDelete = () => {
|
|
|
|
|
console.log(multipleSelection.value)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 当选择项发生变化时，multipleSelection数组中的值变为selection
|
|
|
|
|
const handleSelectionChange = (selection) => {
|
|
|
|
|
// 当选择项发生变化时，multipleSelection数组中的值变为selection
|
|
|
|
|
multipleSelection.value = selection
|
|
|
|
|
if (multipleSelection.value.length <= 0) {
|
|
|
|
|
isMultiple.value = true
|
|
|
|
|
@ -109,12 +135,31 @@ const handleSelectionChange = (selection) => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const updateCategory = (id) => {
|
|
|
|
|
console.log(id)
|
|
|
|
|
// 显示新增分类弹窗
|
|
|
|
|
const openAddDialog = () => {
|
|
|
|
|
addDialogVisible.value = true
|
|
|
|
|
categoryFrom.value.name = ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 显示修改分类弹窗
|
|
|
|
|
const openUpdateDialog = async (id) => {
|
|
|
|
|
updateDialogVisible.value = true
|
|
|
|
|
categoryFrom.value._id = id
|
|
|
|
|
const { data } = await getCategoryById(id)
|
|
|
|
|
categoryFrom.value.name = data.name
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const deleteCategory = (id) => {
|
|
|
|
|
console.log(id)
|
|
|
|
|
// 根据id删除分类
|
|
|
|
|
const deleteCategoryById = async (id) => {
|
|
|
|
|
// console.log(id)
|
|
|
|
|
const { code, message } = await apiDelCategoryById(id)
|
|
|
|
|
if (code === 200) {
|
|
|
|
|
ElMessage({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
getCategoryList()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleSizeChange = (val) => {
|
|
|
|
|
@ -125,9 +170,40 @@ const handleCurrentChange = (val) => {
|
|
|
|
|
console.log(`current page: ${val}`)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const openDialog = () => {
|
|
|
|
|
dialogVisible.value = true
|
|
|
|
|
categoryFrom.value.name = ''
|
|
|
|
|
// 提交新增表单
|
|
|
|
|
const submitAddForm = async () => {
|
|
|
|
|
if (categoryFrom.value.name.trim() === '') {
|
|
|
|
|
ElMessage({
|
|
|
|
|
type: 'error',
|
|
|
|
|
message: '分类名不能为空！'
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
addDialogVisible.value = false
|
|
|
|
|
const { code, message } = await apiUpdateCategory(categoryFrom.value)
|
|
|
|
|
ElMessage({
|
|
|
|
|
type: code === 200 ? 'success' : 'error',
|
|
|
|
|
message
|
|
|
|
|
})
|
|
|
|
|
getCategoryList()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 提交修改后的标签
|
|
|
|
|
const submitUpdateForm = async () => {
|
|
|
|
|
if (categoryFrom.value.name.trim() === '') {
|
|
|
|
|
ElMessage({
|
|
|
|
|
type: 'error',
|
|
|
|
|
message: '标签名不能为空！'
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
updateDialogVisible.value = false
|
|
|
|
|
const { code, message } = await apiUpdateCategory(categoryFrom.value)
|
|
|
|
|
ElMessage({
|
|
|
|
|
type: code === 200 ? 'success' : 'error',
|
|
|
|
|
message
|
|
|
|
|
})
|
|
|
|
|
getCategoryList()
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
