mirror of https://github.com/halo-dev/halo-admin
Extract category select tree with CategorySelectTree component
parent
ebb59569e7
commit
dfa4879d57
|
@ -7,31 +7,43 @@
|
||||||
:md="10"
|
:md="10"
|
||||||
:sm="24"
|
:sm="24"
|
||||||
:xs="24"
|
:xs="24"
|
||||||
:style="{ 'padding-bottom': '12px' }">
|
:style="{ 'padding-bottom': '12px' }"
|
||||||
|
>
|
||||||
<a-card title="添加分类目录">
|
<a-card title="添加分类目录">
|
||||||
<a-form layout="horizontal">
|
<a-form layout="horizontal">
|
||||||
<a-form-item label="名称:" help="*页面上所显示的名称">
|
<a-form-item
|
||||||
|
label="名称:"
|
||||||
|
help="*页面上所显示的名称"
|
||||||
|
>
|
||||||
<a-input v-model="categoryToCreate.name" />
|
<a-input v-model="categoryToCreate.name" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="路径名称:" help="*这是文章路径上显示的名称,最好为英文">
|
<a-form-item
|
||||||
|
label="路径名称:"
|
||||||
|
help="*这是文章路径上显示的名称,最好为英文"
|
||||||
|
>
|
||||||
<a-input v-model="categoryToCreate.slugNames" />
|
<a-input v-model="categoryToCreate.slugNames" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="上级目录:">
|
<a-form-item label="上级目录:">
|
||||||
<a-tree-select
|
<category-select-tree
|
||||||
:treeData="categoriesTree"
|
:categories="categories"
|
||||||
placeholder="请选择上级目录,默认为顶级目录"
|
|
||||||
treeDefaultExpandAll
|
|
||||||
v-model="categoryToCreate.parentId"
|
v-model="categoryToCreate.parentId"
|
||||||
:treeDataSimpleMode="true"
|
/>
|
||||||
:allowClear="true"
|
|
||||||
>
|
|
||||||
</a-tree-select>
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="描述:" help="*分类描述,部分主题可显示">
|
<a-form-item
|
||||||
<a-input type="textarea" v-model="categoryToCreate.description" :autosize="{ minRows: 3 }" />
|
label="描述:"
|
||||||
|
help="*分类描述,部分主题可显示"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
type="textarea"
|
||||||
|
v-model="categoryToCreate.description"
|
||||||
|
:autosize="{ minRows: 3 }"
|
||||||
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-button type="primary" @click="createCategory">保存</a-button>
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
@click="createCategory"
|
||||||
|
>保存</a-button>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-card>
|
</a-card>
|
||||||
|
@ -42,14 +54,31 @@
|
||||||
:md="14"
|
:md="14"
|
||||||
:sm="24"
|
:sm="24"
|
||||||
:xs="24"
|
:xs="24"
|
||||||
:style="{ 'padding-bottom': '12px' }">
|
:style="{ 'padding-bottom': '12px' }"
|
||||||
|
>
|
||||||
<a-card title="所有分类">
|
<a-card title="所有分类">
|
||||||
<a-table :columns="columns" :dataSource="categories" :rowKey="record => record.id" :loading="loading">
|
<a-table
|
||||||
<ellipsis :length="30" tooltip slot="name" slot-scope="text">
|
:columns="columns"
|
||||||
|
:dataSource="categories"
|
||||||
|
:rowKey="record => record.id"
|
||||||
|
:loading="loading"
|
||||||
|
>
|
||||||
|
<ellipsis
|
||||||
|
:length="30"
|
||||||
|
tooltip
|
||||||
|
slot="name"
|
||||||
|
slot-scope="text"
|
||||||
|
>
|
||||||
{{ text }}
|
{{ text }}
|
||||||
</ellipsis>
|
</ellipsis>
|
||||||
<span slot="action" slot-scope="text, record">
|
<span
|
||||||
<a href="javascript:;" @click="editCategory(record.id)">编辑</a>
|
slot="action"
|
||||||
|
slot-scope="text, record"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="javascript:;"
|
||||||
|
@click="editCategory(record.id)"
|
||||||
|
>编辑</a>
|
||||||
<a-divider type="vertical" />
|
<a-divider type="vertical" />
|
||||||
<a-popconfirm
|
<a-popconfirm
|
||||||
:title="'你确定要删除【' + record.name + '】分类?'"
|
:title="'你确定要删除【' + record.name + '】分类?'"
|
||||||
|
@ -68,6 +97,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import CategorySelectTree from './components/CategorySelectTree'
|
||||||
import categoryApi from '@/api/category'
|
import categoryApi from '@/api/category'
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
|
@ -94,6 +124,7 @@ const columns = [
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
export default {
|
export default {
|
||||||
|
components: { CategorySelectTree },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
categories: [],
|
categories: [],
|
||||||
|
@ -105,18 +136,6 @@ export default {
|
||||||
created() {
|
created() {
|
||||||
this.loadCategories()
|
this.loadCategories()
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
categoriesTree() {
|
|
||||||
return this.categories.map(category => {
|
|
||||||
return {
|
|
||||||
id: category.id,
|
|
||||||
title: category.name,
|
|
||||||
value: category.id.toString(),
|
|
||||||
pId: category.parentId
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
loadCategories() {
|
loadCategories() {
|
||||||
categoryApi.listAll().then(response => {
|
categoryApi.listAll().then(response => {
|
||||||
|
|
|
@ -0,0 +1,59 @@
|
||||||
|
<template>
|
||||||
|
<a-tree-select
|
||||||
|
:treeData="categoryTreeData"
|
||||||
|
placeholder="请选择上级目录,默认为顶级目录"
|
||||||
|
treeDefaultExpandAll
|
||||||
|
:treeDataSimpleMode="true"
|
||||||
|
:allowClear="true"
|
||||||
|
@change="handleSelectionChange"
|
||||||
|
>
|
||||||
|
</a-tree-select>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CategorySelectTree',
|
||||||
|
model: {
|
||||||
|
prop: 'value',
|
||||||
|
event: 'change'
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
/**
|
||||||
|
* Category id.
|
||||||
|
*/
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
categories: {
|
||||||
|
type: Array,
|
||||||
|
required: false,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
categoryTreeData() {
|
||||||
|
return this.categories.map(category => {
|
||||||
|
return {
|
||||||
|
id: category.id,
|
||||||
|
title: category.name,
|
||||||
|
value: category.id.toString(),
|
||||||
|
pId: category.parentId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSelectionChange(value, label, extra) {
|
||||||
|
this.$log.debug('value: ', value)
|
||||||
|
this.$log.debug('label: ', label)
|
||||||
|
this.$log.debug('extra: ', extra)
|
||||||
|
this.$emit('change', value ? parseInt(value) : 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
Loading…
Reference in New Issue