feat: 扩展 ConfigType,添加禁用属性,并添加一个上传按钮组件,在拖拽、双击、搜索模式让配置了禁用项的组件不可用
This commit is contained in:
parent
045e6c2e3c
commit
308cb84ee4
@ -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]
|
||||
|
4
src/packages/index.d.ts
vendored
4
src/packages/index.d.ts
vendored
@ -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[]
|
||||
}
|
||||
|
@ -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()
|
||||
// 动态注册图表组件
|
||||
|
@ -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()
|
||||
// 动态注册图表组件
|
||||
|
@ -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)
|
||||
|
Loading…
x
Reference in New Issue
Block a user