<template>
<div class="app
-container">
<!
-- 操作工具栏
-->
<div class="mb
-4">
<
el-button type="primary" @click="showFormDialog()">新增分类</
el-button>
</div>
<!
-- 树形表格
-->
<
el-table
:data="
tableData"
row
-key="id"
:tree
-props="{children: 'children'}"
border
default
-expand
-all
style="width: 100%"
>
<
el-table-column prop="id" lab
el="ID" width="80" />
<
el-table-column prop="title" lab
el="分类名称" />
<
el-table-column lab
el="操作" width="180" align="center">
<template #default="{ row }">
<
el-button
type="primary"
size="small"
@click="showFormDialog(row
.id)"
>修改</
el-button>
<
el-button
type="danger"
size="small"
@click="handleD
elete(row
.id)"
>删除</
el-button>
</template>
</
el-table-column>
</
el-table>
<!
-- 表单对话框
-->
<
el-dialog
v
-mod
el="formVisible"
:title="currentId ? '修改分类' : '新增分类'"
width="30%"
>
<
el-form
ref="formRef"
:mod
el="form"
:rules="rules"
lab
el-width="80px"
>
<
el-form
-item lab
el="分类名称" prop="title">
<
el-input v
-mod
el="form
.title" placeholder="请输入分类名称" />
</
el-form
-item>
</
el-form>
<template #footer>
<
el-button @click="formVisible = false">取消</
el-button>
<
el-button type="primary" @click="submitForm">确认</
el-button>
</template>
</
el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted } from '
vue'
import request from '@/utils/request'
import {
ElMessage,
ElMessageBox } from '
element
-plus'
// 表格数据
const
tableData = ref([])
// 表单相关
const formVisible = ref(false)
const currentId = ref(null)
const form = ref({ title: '' })
const formRef = ref(null)
// 验证规则
const rules = ref({
title: [
{ required: true, message: '分类名称不能为空', trigger: 'blur' }
]
})
// 加载数据
const loadData = async () => {
try {
const res = await request
.get('/category/tree')
if (res
.code === '200') {
tableData
.value = res
.data
}
} catch (error) {
console
.error('加载失败:', error)
}
}
// 显示表单对话框
const showFormDialog = async (id) => {
currentId
.value = id || null
if (id) {
// 加载现有数据
const res = await request
.get(`/category/${id}`)
form
.value = res
.data
}
else {
form
.value = { title: '' }
}
formVisible
.value = true
}
// 提交表单
const submitForm = async () => {
try {
await formRef
.value
.validate()
const api = currentId
.value ? '/category/update' : '/category/save'
const res = await request
.post(api, {
...form
.value, id: currentId
.value })
if (res
.code === '200') {
ElMessage
.success('操作成功')
formVisible
.value = false
await loadData()
}
} catch (error) {
console
.error('提交失败:', error)
}
}
// 删除处理
const handleD
elete = (id) => {
ElMessageBox.confirm('确认删除该分类？', '警告', {
type: 'warning',
confirmButtonText: '确认',
canc
elButtonText: '取消'
})
.then(async () => {
const res = await request
.d
elete(`/category/d
elete/${id}`)
if (res
.code === '200') {
ElMessage
.success('删除成功')
await loadData()
}
})
}
// 初始化加载
onMounted(() => {
loadData()
})
</script>
<style scoped>
.app
-container {
padding: 20px;
}
.mb
-4 {
margin
-bottom: 16px;
}
</style>不要分类全部展示,只有电机的时候再展示
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
