Skip to content

Commit

Permalink
编辑可选择分类
Browse files Browse the repository at this point in the history
  • Loading branch information
task committed Jan 8, 2025
1 parent 7f1b918 commit 6e31567
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 74 deletions.
61 changes: 24 additions & 37 deletions web/src/components/selectImage/selectImage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,6 @@
<div class="flex">
<div class="w-64" style="border-right: solid 1px var(--el-border-color);">
<el-scrollbar style="height: calc(100vh - 110px)">
<div class="flex cursor-pointer">
<div class="w-36 ml-6" :class="search.classId === 0 ? 'text-blue-500 font-bold' : ''" @click="getAll">
全部分类
</div>
<el-icon class="ml-3 text-right mt-2" @click="addCategoryFun({ID:0})">
<Plus />
</el-icon>
</div>
<el-tree
:data="categories"
node-key="id"
Expand All @@ -32,15 +24,14 @@
<template #default="{ node, data }">
<div class="w-36" :class="search.classId === data.ID ? 'text-blue-500 font-bold' : ''">{{ data.name }}
</div>
<el-dropdown @command="(command) => handleCommand(data, command)">
<el-icon class="ml-3 text-right">
<MoreFilled />
</el-icon>
<el-dropdown>
<el-icon class="ml-3 text-right" v-if="data.ID > 0"><MoreFilled /></el-icon>
<el-icon class="ml-3 text-right mt-1" v-else><Plus /></el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="add">添加分类</el-dropdown-item>
<el-dropdown-item command="edit" v-if="data.ID > 0">编辑分类</el-dropdown-item>
<el-dropdown-item command="delete" v-if="data.ID > 0">删除分类</el-dropdown-item>
<el-dropdown-item @click="addCategoryFun(data)">添加分类</el-dropdown-item>
<el-dropdown-item @click="editCategory(data)" v-if="data.ID > 0">编辑分类</el-dropdown-item>
<el-dropdown-item @click="deleteCategoryFun(data.ID)" v-if="data.ID > 0">删除分类</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
Expand Down Expand Up @@ -113,6 +104,16 @@
draggable
>
<el-form ref="categoryForm" :rules="rules" :model="categoryFormData" label-width="80px">
<el-form-item label="上级分类">
<el-tree-select
v-model="categoryFormData.pid"
:data="categories"
check-strictly
:props="defaultProps"
:render-after-expand="false"
style="width: 240px"
/>
</el-form-item>
<el-form-item label="分类名称" prop="name">
<el-input v-model.trim="categoryFormData.name" placeholder="分类名称"></el-input>
</el-form-item>
Expand Down Expand Up @@ -296,14 +297,21 @@ const deleteCheck = (item) => {
const defaultProps = {
children: 'children',
label: 'name',
value: 'id'
value: 'ID'
}
const categories = ref([])
const fetchCategories = async() => {
const res = await getCategoryList()
let data = {
name: '全部分类',
ID: 0,
pid: 0,
children:[]
}
if (res.code === 0) {
categories.value = res.data
categories.value.unshift(data)
}
}
Expand All @@ -314,33 +322,12 @@ const handleNodeClick = (node) => {
getImageList()
}
const getAll = () => {
search.value.keyword = null
search.value.classId = 0
page.value = 1
getImageList()
}
const onSuccess = () => {
search.value.keyword = null
page.value = 1
getImageList()
}
const handleCommand = (category, command) => {
switch (command) {
case 'add':
addCategoryFun(category)
break
case 'edit':
editCategory(category)
break
case 'delete':
deleteCategoryFun(category.ID)
break
}
}
const categoryDialogVisible = ref(false)
const categoryFormData = ref({
ID: 0,
Expand Down
61 changes: 24 additions & 37 deletions web/src/view/example/upload/upload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,6 @@
<div class="flex gap-4 p-2">
<div class="flex-none w-64 bg-white text-slate-700 dark:text-slate-400 dark:bg-slate-900 rounded p-4">
<el-scrollbar style="height: calc(100vh - 300px)">
<div class="flex cursor-pointer">
<div class="w-36 ml-6" :class="search.classId === 0 ? 'text-blue-500 font-bold' : ''" @click="getAll">
全部分类
</div>
<el-icon class="ml-3 text-right mt-1" @click="addCategoryFun({ID:0})">
<Plus/>
</el-icon>
</div>
<el-tree
:data="categories"
node-key="id"
Expand All @@ -21,15 +13,14 @@
<template #default="{ node, data }">
<div class="w-36" :class="search.classId === data.ID ? 'text-blue-500 font-bold' : ''">{{ data.name }}
</div>
<el-dropdown @command="(command) => handleCommand(data, command)">
<el-icon class="ml-3 text-right">
<MoreFilled/>
</el-icon>
<el-dropdown>
<el-icon class="ml-3 text-right" v-if="data.ID > 0"><MoreFilled /></el-icon>
<el-icon class="ml-3 text-right mt-1" v-else><Plus /></el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="add">添加分类</el-dropdown-item>
<el-dropdown-item command="edit" v-if="data.ID > 0">编辑分类</el-dropdown-item>
<el-dropdown-item command="delete" v-if="data.ID > 0">删除分类</el-dropdown-item>
<el-dropdown-item @click="addCategoryFun(data)">添加分类</el-dropdown-item>
<el-dropdown-item @click="editCategory(data)" v-if="data.ID > 0">编辑分类</el-dropdown-item>
<el-dropdown-item @click="deleteCategoryFun(data.ID)" v-if="data.ID > 0">删除分类</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
Expand Down Expand Up @@ -139,6 +130,16 @@
draggable
>
<el-form ref="categoryForm" :rules="rules" :model="categoryFormData" label-width="80px">
<el-form-item label="上级分类">
<el-tree-select
v-model="categoryFormData.pid"
:data="categories"
check-strictly
:props="defaultProps"
:render-after-expand="false"
style="width: 240px"
/>
</el-form-item>
<el-form-item label="分类名称" prop="name">
<el-input v-model.trim="categoryFormData.name" placeholder="分类名称"></el-input>
</el-form-item>
Expand Down Expand Up @@ -344,13 +345,6 @@ const importUrlFunc = () => {
})
}
const getAll = () => {
search.value.keyword = null
search.value.classId = 0
page.value = 1
getTableData()
}
const onSuccess = () => {
search.value.keyword = null
page.value = 1
Expand All @@ -360,14 +354,21 @@ const onSuccess = () => {
const defaultProps = {
children: 'children',
label: 'name',
value: 'id'
value: 'ID'
}
const categories = ref([])
const fetchCategories = async () => {
const res = await getCategoryList()
let data = {
name: '全部分类',
ID: 0,
pid: 0,
children:[]
}
if (res.code === 0) {
categories.value = res.data
categories.value.unshift(data)
}
}
Expand All @@ -378,20 +379,6 @@ const handleNodeClick = (node) => {
getTableData()
}
const handleCommand = (category, command) => {
switch (command) {
case 'add':
addCategoryFun(category)
break
case 'edit':
editCategory(category)
break
case 'delete':
deleteCategoryFun(category.ID)
break
}
}
const categoryDialogVisible = ref(false)
const categoryFormData = ref({
ID: 0,
Expand Down

0 comments on commit 6e31567

Please sign in to comment.