feat: 扩展 ConfigType,添加禁用属性,并添加一个上传按钮组件,在拖拽、双击、搜索模式让配置了禁用项的组件不可用

This commit is contained in:
tnt group 2023-05-18 09:45:41 +08:00
parent 045e6c2e3c
commit 308cb84ee4
5 changed files with 25 additions and 4 deletions

View File

@ -13,4 +13,15 @@ const photoConfig = {
virtualComponent: './components/Informations/Mores/Image' // 虚拟组件路径,尾部不跟 /’,相对于 /packages/index.ts 文件的位置
}
export default [photoConfig, photoConfig, photoConfig, photoConfig, photoConfig]
const addConfig = {
...ImageConfig,
category: ChatCategoryEnum.MY,
categoryName: ChatCategoryEnumName.MY,
package: PackagesCategoryEnum.PHOTOS,
title: '增加新项',
image: 'https://img.51miz.com/Element/00/62/75/91/d5453102_E627591_3bbace6f.png',
virtualComponent: './components/Informations/Mores/Image', // 虚拟组件路径,尾部不跟 /’,相对于 /packages/index.ts 文件的位置
disabled: true
}
export default [photoConfig, photoConfig, photoConfig, photoConfig, photoConfig, addConfig]

View File

@ -26,6 +26,7 @@ export type ConfigType = {
image: string
virtualComponent?: string // 虚拟组件Path指定后创建该组件时从指定路径创建
dataset?: any // 组件预设的 dataset 值
disabled?: boolean // 禁用的
}
// 数据请求
@ -158,6 +159,7 @@ export enum PackagesCategoryEnum {
CHARTS = 'Charts',
TABLES = 'Tables',
INFORMATIONS = 'Informations',
PHOTOS = 'Photos',
DECORATES = 'Decorates'
}
@ -166,6 +168,7 @@ export enum PackagesCategoryName {
CHARTS = '图表',
TABLES = '列表',
INFORMATIONS = '信息',
PHOTOS = '图片',
DECORATES = '小组件'
}
@ -180,5 +183,6 @@ export type PackagesType = {
[PackagesCategoryEnum.CHARTS]: ConfigType[]
[PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
[PackagesCategoryEnum.TABLES]: ConfigType[]
[PackagesCategoryEnum.PHOTOS]: ConfigType[]
[PackagesCategoryEnum.DECORATES]: ConfigType[]
}

View File

@ -11,8 +11,8 @@
v-for="(item, index) in menuOptions"
:key="index"
draggable
@dragstart="dragStartHandle($event, item)"
@dragend="dragendHandle"
@dragstart="!item.disabled && dragStartHandle($event, item)"
@dragend="!item.disabled && dragendHandle"
@dblclick="dblclickHandle(item)"
>
<div class="list-header">
@ -69,6 +69,7 @@ const chartMode: Ref<ChartModeEnum> = computed(() => {
//
const dragStartHandle = (e: DragEvent, item: ConfigType) => {
if (item.disabled) return
//
componentInstall(item.chartKey, fetchChartComponent(item))
componentInstall(item.conKey, fetchConfigComponent(item))
@ -85,6 +86,7 @@ const dragendHandle = () => {
//
const dblclickHandle = async (item: ConfigType) => {
if (item.disabled) return
try {
loadingStart()
//

View File

@ -129,7 +129,9 @@ const searchHandle = (key: string | null) => {
}
loading.value = true
showPopover.value = true
searchRes.value = List.filter((e: ConfigType) => !key || e.title.toLowerCase().includes(key.toLowerCase()))
searchRes.value = List.filter(
(e: ConfigType) => !e.disabled && (!key || e.title.toLowerCase().includes(key.toLowerCase()))
)
setTimeout(() => {
loading.value = undefined
}, 500)
@ -146,6 +148,7 @@ const listenerCloseHandle = (e: Event) => {
//
const selectChartHandle = async (item: ConfigType) => {
if (item.disabled) return
try {
loadingStart()
//

View File

@ -29,6 +29,7 @@ export const dragHandle = async (e: DragEvent) => {
// 修改状态
chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false)
const dropData: Exclude<ConfigType, ['image']> = JSONParse(drayDataString)
if (dropData.disabled) return
// 创建新图表组件
let newComponent: CreateComponentType = await createComponent(dropData)