Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Support merging categories and groups #907

Open
wants to merge 4 commits into
base: refactor/develop
Choose a base branch
from
Open

feat: Support merging categories and groups #907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
11552e5
feat: support merge categories and groups in blocks
gene9831 Nov 15, 2024
6c730df
add extra param to groups get request
gene9831 Nov 18, 2024
df0f50c
fix create block error
gene9831 Nov 20, 2024
f057a11
undo changes in registry.js
gene9831 Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/plugins/block/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ export default {
apis: api,
entry,
metas: [BlockService],
options: {
mergeCategoriesAndGroups: false
},
components: {
SaveNewBlock
}
Expand Down
19 changes: 15 additions & 4 deletions packages/plugins/block/src/BlockConfig.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
></tiny-input>
</div>
</tiny-form-item>
<tiny-form-item label="区块分类" prop="categoryId">
<tiny-form-item :label="groupLabels.select" prop="categoryId">
<tiny-select
ref="groupSelect"
v-model="formData.categoryId"
popper-class="block-popper"
placeholder="默认分类"
:placeholder="groupLabels.selectPlaceholder"
:options="categoryList"
filterable
:filter-method="categoryFilter"
Expand Down Expand Up @@ -122,7 +122,7 @@ export default {
TinyOption: Option
},
setup() {
const { getCategoryList } = useBlock()
const { getCategoryList, shouldReplaceCategoryWithGroup } = useBlock()
const nameCn = 'name_cn'
const state = reactive({
inputVisible: false,
Expand Down Expand Up @@ -247,6 +247,16 @@ export default {
}
}

const groupLabels = shouldReplaceCategoryWithGroup
? {
select: '区块分组',
selectPlaceholder: '默认分组'
}
: {
select: '区块分类',
selectPlaceholder: '默认分类'
}

gene9831 marked this conversation as resolved.
Show resolved Hide resolved
return {
isVsCodeEnv,
state,
Expand All @@ -265,7 +275,8 @@ export default {
clearValidateForm,
blockForm,
categoryFilter,
changeBlockProperty
changeBlockProperty,
groupLabels
}
}
}
Expand Down
36 changes: 30 additions & 6 deletions packages/plugins/block/src/CategoryEdit.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,15 @@
label-position="left"
validate-type="text"
>
<tiny-form-item label="分类名称" prop="name">
<tiny-input v-model="formData.name" placeholder="请输入分类名称" @change="handleChangeName"></tiny-input>
<tiny-form-item :label="groupLabels.nameInput" prop="name">
<tiny-input
v-model="formData.name"
:placeholder="groupLabels.nameInputPlaceholder"
@change="handleChangeName"
></tiny-input>
</tiny-form-item>
<tiny-form-item label="分类ID" prop="categoryId">
<!-- 分组不需要填写表单id字段 -->
<tiny-form-item v-if="!shouldReplaceCategoryWithGroup()" label="分类ID" prop="categoryId">
<tiny-input v-model="formData.categoryId" placeholder="请输入分类ID" :disabled="isEdit"></tiny-input>
</tiny-form-item>
</tiny-form>
Expand All @@ -46,7 +51,7 @@ import { REGEXP_GROUP_NAME } from '@opentiny/tiny-engine-common/js/verification'
import { extend } from '@opentiny/vue-renderless/common/object'
import { createOrUpdateCategory } from './js/blockSetting'

const { getGroupList } = useBlock()
const { getGroupList, shouldReplaceCategoryWithGroup } = useBlock()

const props = defineProps({
modelValue: Boolean,
Expand All @@ -55,6 +60,20 @@ const props = defineProps({

const emit = defineEmits(['update:modelValue'])

const groupLabels = shouldReplaceCategoryWithGroup()
? {
text: '分组',
nameInput: '分组名称',
nameInputPlaceholder: '请输入分组名称',
validateErrMsg: '分组名称不能重复！'
}
: {
text: '分类',
nameInput: '分类名称',
nameInputPlaceholder: '请输入分类名称',
validateErrMsg: '分类名称不能重复！'
}

const state = reactive({
visible: false
})
Expand All @@ -69,7 +88,7 @@ const formData = reactive({ name: '', categoryId: '' })
const validateGroup = (rule, value, callback) => {
const isRepeat = props.initialValue?.name !== value && groupList.value.some((group) => group.name === value)
if (isRepeat) {
callback(new Error('分类名称不能重复！'))
callback(new Error(groupLabels.validateErrMsg))
return
}
callback()
Expand All @@ -86,6 +105,11 @@ const rules = reactive({
categoryId: [{ required: true, message: '必填', trigger: 'blur' }]
})

// 分组不需要填写表单id字段
if (shouldReplaceCategoryWithGroup()) {
rules.categoryId = []
}

const handleChangeName = (value) => {
if (isEdit.value) {
// 编辑时不允许修改id
Expand All @@ -103,7 +127,7 @@ const handleChangeName = (value) => {
formData.categoryId = id
}

const title = computed(() => `${isEdit.value ? '编辑' : '新增'}分类`)
const title = computed(() => `${isEdit.value ? '编辑' : '新增'}${groupLabels.text}`)

const closeDialog = () => {
emit('update:modelValue', false)
Expand Down
23 changes: 18 additions & 5 deletions packages/plugins/block/src/Main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
ref="groupSelect"
v-model="state.categoryId"
popper-class="block-popper"
placeholder="默认展示全部分类"
:placeholder="groupLabels.selectPlaceholder"
filterable
:filter-method="categoryFilter"
clearable
Expand Down Expand Up @@ -48,7 +48,7 @@
<div class="popper-confirm" @mousedown.stop="">
<div class="popper-confirm-header">
<svg-icon class="icon" name="warning"></svg-icon>
<span class="title">您确定删除该区块分类吗？</span>
<span class="title">{{ groupLabels.deletePrompt }}</span>
</div>
<div class="popper-confirm-footer">
<tiny-button class="confirm-btn" size="small" type="primary" @click="delCategory(item.id)"
Expand Down Expand Up @@ -327,8 +327,20 @@ export default {
}
}

const groupLabels = useBlock().shouldReplaceCategoryWithGroup()
? {
selectPlaceholder: '默认展示全部分组',
deletePrompt: '您确定删除该区块分组吗？',
deleteTitle: '删除分组'
}
: {
selectPlaceholder: '默认展示全部分类',
deletePrompt: '您确定删除该区块分类吗？',
deleteTitle: '删除分类'
}

const changeCategory = (val) => {
let params = { categoryId: val }
let params = useBlock().shouldReplaceCategoryWithGroup() ? { groupId: val } : { categoryId: val }

if (!val) {
params = {}
Expand All @@ -349,7 +361,7 @@ export default {

const deleteItem = (item) => {
confirm({
title: '删除分类',
title: groupLabels.deleteTitle,
status: 'custom',
message: {
render() {
Expand Down Expand Up @@ -423,7 +435,8 @@ export default {
handleChangeDeletePopoverVisible,
handleSelectVisibleChange,
externalBlock,
docsUrl
docsUrl,
groupLabels
}
}
}
Expand Down
7 changes: 4 additions & 3 deletions packages/plugins/block/src/SaveNewBlock.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<tiny-form-item label="区块ID" prop="label">
<TinyInput v-model="formData.label" placeholder="请输入区块ID"></TinyInput>
</tiny-form-item>
<tiny-form-item label="请选择区块分类" prop="group">
<tiny-form-item :label="shouldReplaceCategoryWithGroup() ? '请选择区块分组' : '请选择区块分类'" prop="group">
<tiny-select v-model="formData.group" :options="categoryList" placeholder="请选择" @change="changeCategory">
</tiny-select>
</tiny-form-item>
Expand Down Expand Up @@ -67,7 +67,7 @@ export default {
name_cn: '',
group: ''
})
const { createEmptyBlock, createBlock, getCategoryList } = useBlock()
const { createEmptyBlock, createBlock, getCategoryList, shouldReplaceCategoryWithGroup } = useBlock()
const visible = computed(() => props.boxVisibility)
const { PLUGIN_NAME, activePlugin } = useLayout()
const { isSaved } = useCanvas()
Expand Down Expand Up @@ -127,7 +127,8 @@ export default {
addBlock,
cancel,
changeCategory,
visible
visible,
shouldReplaceCategoryWithGroup
}
}
}
Expand Down
10 changes: 9 additions & 1 deletion packages/plugins/block/src/composable/useBlock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,10 @@ import {
getMetaApi,
META_APP,
getMergeMeta,
getOptions,
META_SERVICE
} from '@opentiny/tiny-engine-meta-register'
import meta from '../../meta'

const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants

Expand Down Expand Up @@ -715,6 +717,11 @@ const getBlockAssetsByVersion = (block, version) => {
return assets
}

const shouldReplaceCategoryWithGroup = () => {
const { mergeCategoriesAndGroups } = getOptions(meta.id)
return mergeCategoriesAndGroups
}

export default function () {
return {
NODE_TYPE_PAGE,
Expand Down Expand Up @@ -758,6 +765,7 @@ export default function () {
removePropertyLink,
getBlockProperties,
getBlockPageSchema,
getDateFromNow
getDateFromNow,
shouldReplaceCategoryWithGroup
}
}
46 changes: 37 additions & 9 deletions packages/plugins/block/src/js/blockSetting.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@ import {
fetchCategories,
createCategory,
updateCategory,
deleteCategory
deleteCategory,
fetchGroups,
createGroup,
updateGroup,
deleteGroup
} from './http'
import { constants, utils } from '@opentiny/tiny-engine-utils'
import { generateBlock } from '@opentiny/tiny-engine-common/js/vscodeGenerateFile'
Expand Down Expand Up @@ -588,7 +592,9 @@ const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id

const getCategories = () => {
const appId = getAppId()
fetchCategories({ appId }).then((res) => {
const fetchData = useBlock().shouldReplaceCategoryWithGroup() ? fetchGroups : fetchCategories

fetchData({ appId }).then((res) => {
useBlock().setCategoryList(res)
})
}
Expand All @@ -597,7 +603,17 @@ const getCategories = () => {
const createBlock = (block = {}) => {
const { message } = useModal()
const created_app = getAppId()
const params = { ...block, created_app }

const { categories, ...rest } = block
const extraParams = {}

if (useBlock().shouldReplaceCategoryWithGroup()) {
extraParams.groups = categories
} else {
extraParams.categories = categories
}

const params = { ...rest, ...extraParams, created_app }

if (isVsCodeEnv) {
const id = getMaterialHistory()?.id
Expand Down Expand Up @@ -643,6 +659,14 @@ const updateBlock = (block = {}) => {
label
} = block
const nameCn = 'name_cn'

const extraParams = {}
if (useBlock().shouldReplaceCategoryWithGroup()) {
extraParams.groups = categories
} else {
extraParams.categories = categories
}

requestUpdateBlock(
id,
{
Expand All @@ -652,9 +676,9 @@ const updateBlock = (block = {}) => {
public_scope_tenants,
public: publicType,
tags,
categories: categories.map((category) => category.id),
description,
label
label,
...extraParams
},
{
params: {
Expand Down Expand Up @@ -777,11 +801,14 @@ export const getBlockById = async (id) => {
export const createOrUpdateCategory = async ({ categoryId, ...params }, isEdit) => {
const appId = getAppId()
params.app = Number(appId)
let requestFunc = updateCategory
const replaceCategoryWithGroup = useBlock().shouldReplaceCategoryWithGroup()
let requestFunc = replaceCategoryWithGroup ? updateGroup : updateCategory

if (!isEdit) {
params.category_id = categoryId
requestFunc = createCategory
if (!replaceCategoryWithGroup) {
params.category_id = categoryId
}
requestFunc = replaceCategoryWithGroup ? createGroup : createCategory
}

const res = await requestFunc(params)
Expand All @@ -792,7 +819,8 @@ export const createOrUpdateCategory = async ({ categoryId, ...params }, isEdit)
}

export const delCategory = async (id) => {
const res = await deleteCategory(id)
const deleteFn = useBlock().shouldReplaceCategoryWithGroup() ? deleteGroup : deleteCategory
const res = await deleteFn(id)

if (res) {
getCategories()
Expand Down
19 changes: 19 additions & 0 deletions packages/plugins/block/src/js/http.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,22 @@ export const createCategory = (params) =>
// 删除区块分类
export const deleteCategory = (id) =>
getMetaApi(META_SERVICE.Http).delete(`/material-center/api/block-categories/${id}`)

// 下面是区块分组的增删查改接口
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

建议方案：

  1. label 提供配置，二开用户可以自行替换
  2. 区块分类的增删查改接口提供替换配置，二开用户自行替换

// 当 Block 插件的 options.mergeCategoriesAndGroups 为 true 时，将分类的接口全部替换成分组的接口

// 区块分组列表
export const fetchGroups = (params) =>
getMetaApi(META_SERVICE.Http).get(`/material-center/api/block-groups`, { params: { ...params, from: 'block' } })

// 更新区块分组
export const updateGroup = ({ id, ...params }) =>
getMetaApi(META_SERVICE.Http).post(`/material-center/api/block-groups/update/${id}`, params)

// 新建区块分组
export const createGroup = (params) =>
getMetaApi(META_SERVICE.Http).post('/material-center/api/block-groups/create', params)

// 删除区块分组
export const deleteGroup = (groupId) =>
getMetaApi(META_SERVICE.Http).get(`/material-center/api/block-groups/delete/${groupId}`)
gene9831 marked this conversation as resolved.
Show resolved Hide resolved