diff --git a/src/assets/images/chart/decorates/inputs_date.png b/src/assets/images/chart/decorates/inputs_date.png new file mode 100644 index 00000000..e59ed6fd Binary files /dev/null and b/src/assets/images/chart/decorates/inputs_date.png differ diff --git a/src/enums/eventEnum.ts b/src/enums/eventEnum.ts index 9f05aa57..d7f6b5d4 100644 --- a/src/enums/eventEnum.ts +++ b/src/enums/eventEnum.ts @@ -10,6 +10,26 @@ export enum BaseEvent { ON_MOUSE_LEAVE = 'mouseleave' } +// 组件交互回调事件 +export enum InteractEvents { + INTERACT_ON = 'interactOn', + INTERACT_COMPONENTS = 'interactComponents', + INTERACT_FN = 'interactFn' +} + +// 组件交互回调事件触发的类型 +export enum InteractEventOn { + CLICK = 'click', + CHANGE = 'change' +} + +// 交互式组件的触发配置 +export type InteractActionType = { + interactType: InteractEventOn + interactName: string + componentEmitEvents: { [T: string]: any[] } +} + // vue3 生命周期事件 export enum EventLife { // 渲染之后 diff --git a/src/hooks/events.hook.ts b/src/hooks/events.hook.ts deleted file mode 100644 index e99480c6..00000000 --- a/src/hooks/events.hook.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { computed, toRefs } from 'vue' -import { CreateComponentType } from '@/packages/index.d' -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' - -// 获取类型 -type ChartEditStoreType = typeof useChartEditStore - -// Params 参数修改触发api更新图表请求 -export const eventsCreate = (chartConfig: CreateComponentType, useChartEditStore: ChartEditStoreType, param: { [name: string]: string }, onEvevnt: string) => { - const chartEditStore = useChartEditStore() - const { eventsFn } = chartConfig.events - const fnOnEvevnt = eventsFn.filter((item) => { - return item.on === onEvevnt - }) || [] - if (fnOnEvevnt.length === 0) return - fnOnEvevnt.forEach((item) => { - const index = chartEditStore.fetchTargetIndex(item.components) - const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams) - Object.keys(item.fn).forEach((key) => { - if (Params.value[key]) { - Params.value[key] = param[item.fn[key]] - } - if (Header.value[key]) { - Header.value[key] = param[item.fn[key]] - } - }) - }) -} \ No newline at end of file diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 902d76ef..0fa06549 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -5,4 +5,4 @@ export * from '@/hooks/useChartDataFetch.hook' export * from '@/hooks/useChartDataPondFetch.hook' export * from '@/hooks/useLifeHandler.hook' export * from '@/hooks/useLang.hook' -export * from '@/hooks/events.hook' \ No newline at end of file +export * from '@/hooks/useChartInteract.hook' \ No newline at end of file diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 6cbbdee4..758e190f 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -90,12 +90,17 @@ export const useChartDataFetch = ( // 立即调用 fetchFn() + // 组件交互处理监听 + watch( + () => targetComponent.request, + () => { + fetchFn() + }, + { + deep: true + } + ) - watch(() => targetComponent.request, () => { - fetchFn() - }, { - deep: true - }) // 定时时间 const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value // 单位 diff --git a/src/hooks/useChartInteract.hook.ts b/src/hooks/useChartInteract.hook.ts new file mode 100644 index 00000000..78fdb52e --- /dev/null +++ b/src/hooks/useChartInteract.hook.ts @@ -0,0 +1,35 @@ +import { toRefs } from 'vue' +import { CreateComponentType } from '@/packages/index.d' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' + +// 获取类型 +type ChartEditStoreType = typeof useChartEditStore + +// Params 参数修改触发 api 更新图表请求 +export const useChartInteract = ( + chartConfig: CreateComponentType, + useChartEditStore: ChartEditStoreType, + param: { [name: string]: string }, + onEvent: string +) => { + const chartEditStore = useChartEditStore() + const { interactEvents } = chartConfig.events + + const fnOnEvent = interactEvents.filter(item => { + return item.interactOn === onEvent + }) + + fnOnEvent.forEach(item => { + const index = chartEditStore.fetchTargetIndex(item.interactComponents) + if (index !== -1) return + const { Params, Header } = toRefs(chartEditStore.componentList[index].request.requestParams) + Object.keys(item.interactFn).forEach(key => { + if (Params.value[key]) { + Params.value[key] = param[item.interactFn[key]] + } + if (Header.value[key]) { + Header.value[key] = param[item.interactFn[key]] + } + }) + }) +} diff --git a/src/packages/components/Decorates/Inputs/InputsDate/config.ts b/src/packages/components/Decorates/Inputs/InputsDate/config.ts new file mode 100644 index 00000000..c0949b4a --- /dev/null +++ b/src/packages/components/Decorates/Inputs/InputsDate/config.ts @@ -0,0 +1,56 @@ +import { NDatePicker } from 'naive-ui' +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { InputsDateConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' +import { chartInitConfig } from '@/settings/designSetting' +import { InteractEventOn, InteractActionType } from '@/enums/eventEnum' + +// 时间组件类型 +enum ComponentInteractEvent { + DATE = 'date', + DATERANGE = 'daterange' +} + +export const option = { + dataset: { + count: 0, + // 时间组件展示类型 daterange & date + type: ComponentInteractEvent.DATE, + range: undefined + } +} + +// 定义组件触发回调事件 +const interactActions: InteractActionType[] = [ + { + interactType: InteractEventOn.CHANGE, + interactName: '完成后的回调', + componentEmitEvents: { + [ComponentInteractEvent.DATE]: [ + { + value: 'date', + label: '日期' + } + ], + [ComponentInteractEvent.DATERANGE]: [ + { + value: 'dateStart', + label: '开始时间' + }, + { + value: 'dateEnd', + label: '结束时间' + } + ] + } + } +] + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = InputsDateConfig.key + public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 } + public chartConfig = cloneDeep(InputsDateConfig) + public interactActions = interactActions + public option = cloneDeep(option) +} diff --git a/src/packages/components/Decorates/Pickers/Date/config.vue b/src/packages/components/Decorates/Inputs/InputsDate/config.vue similarity index 100% rename from src/packages/components/Decorates/Pickers/Date/config.vue rename to src/packages/components/Decorates/Inputs/InputsDate/config.vue index 2a3f8fd3..304e7305 100644 --- a/src/packages/components/Decorates/Pickers/Date/config.vue +++ b/src/packages/components/Decorates/Inputs/InputsDate/config.vue @@ -41,9 +41,9 @@ diff --git a/src/packages/components/Decorates/Inputs/index.ts b/src/packages/components/Decorates/Inputs/index.ts new file mode 100644 index 00000000..48ef63f0 --- /dev/null +++ b/src/packages/components/Decorates/Inputs/index.ts @@ -0,0 +1,3 @@ +import { InputsDateConfig } from './InputsDate/index' + +export default [InputsDateConfig] diff --git a/src/packages/components/Decorates/Pickers/Date/config.ts b/src/packages/components/Decorates/Pickers/Date/config.ts deleted file mode 100644 index 30bf2af0..00000000 --- a/src/packages/components/Decorates/Pickers/Date/config.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { PublicConfigClass } from '@/packages/public' -import { CreateComponentType } from '@/packages/index.d' -import { DataConfig } from './index' -import cloneDeep from 'lodash/cloneDeep' -import { chartInitConfig } from '@/settings/designSetting' - -export const option = { - eventsApi: [ - { - value: 'change', - label: '完成后的回调', - date: [ - { - value: 'data1', - label: '日期', - }, - ], - daterange: [ - { - value: 'data1', - label: '开始时间', - }, - { - value: 'data2', - label: '结束时间', - } - ] - } - ], - dataset: { - count: 0, - type: 'date', //'daterange', // date - range: undefined - } -} - -export default class Config extends PublicConfigClass implements CreateComponentType { - public key = DataConfig.key - public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 } - public chartConfig = cloneDeep(DataConfig) - public option = cloneDeep(option) -} diff --git a/src/packages/components/Decorates/Pickers/Date/index.ts b/src/packages/components/Decorates/Pickers/Date/index.ts deleted file mode 100644 index 3f1a31b7..00000000 --- a/src/packages/components/Decorates/Pickers/Date/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -import image from '@/assets/images/chart/informations/text_static.png' -import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' -import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' - -export const DataConfig: ConfigType = { - key: 'Date', - chartKey: 'VDate', - conKey: 'VCDate', - title: '时间', - category: ChatCategoryEnum.PICKERS, - categoryName: ChatCategoryEnumName.PICKERS, - package: PackagesCategoryEnum.DECORATES, - image -} diff --git a/src/packages/components/Decorates/Pickers/index.ts b/src/packages/components/Decorates/Pickers/index.ts deleted file mode 100644 index ab163c31..00000000 --- a/src/packages/components/Decorates/Pickers/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { DataConfig } from './Date/index' -export default [DataConfig] \ No newline at end of file diff --git a/src/packages/components/Decorates/index.d.ts b/src/packages/components/Decorates/index.d.ts index 68214a1a..8aab63dc 100644 --- a/src/packages/components/Decorates/index.d.ts +++ b/src/packages/components/Decorates/index.d.ts @@ -2,7 +2,7 @@ export enum ChatCategoryEnum { BORDER = 'Borders', DECORATE = 'Decorates', THREE = 'Three', - PICKERS = 'Pickers', + INPUTS = 'Inputs', MORE = 'Mores' } @@ -10,6 +10,7 @@ export enum ChatCategoryEnumName { BORDER = '边框', DECORATE = '装饰', THREE = '三维', - PICKERS = '控件', + // 控件 => 数据录入 + INPUTS = '控件', MORE = '更多' } \ No newline at end of file diff --git a/src/packages/components/Decorates/index.ts b/src/packages/components/Decorates/index.ts index bf7c5563..482f58d1 100644 --- a/src/packages/components/Decorates/index.ts +++ b/src/packages/components/Decorates/index.ts @@ -1,7 +1,7 @@ import Borders from './Borders' import Decorates from './Decorates' import Three from './Three' -import Pickers from './Pickers' +import Inputs from './Inputs' import Mores from './Mores' -export const DecorateList = [...Borders, ...Decorates, ...Three, ...Pickers, ...Mores] +export const DecorateList = [...Borders, ...Decorates, ...Three, ...Inputs, ...Mores] diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 8190a8d9..74a77ebb 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -1,4 +1,4 @@ -import { BaseEvent, EventLife } from '@/enums/eventEnum' +import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionType } from '@/enums/eventEnum' import type { GlobalThemeJsonType } from '@/settings/chartThemes/index' import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' @@ -120,25 +120,26 @@ export interface PublicConfigType { } filter?: string status: StatusType + interactActions?: InteractActionType[], events: { baseEvent: { [K in BaseEvent]?: string - }, + } advancedEvents: { [K in EventLife]?: string - }, - eventsFn: { - on: 'change' | 'click' | undefined - components: string | undefined - fn: { [name: string]: string } - }[], + } + interactEvents: { + [InteractEvents.INTERACT_ON]: InteractEventOn.CHANGE | InteractEventOn.CLICK | undefined + [InteractEvents.INTERACT_COMPONENTS]: string | undefined + [InteractEvents.INTERACT_FN]: { [name: string]: string } + }[] } } export interface CreateComponentType extends PublicConfigType, requestConfig { key: string chartConfig: ConfigType - option: GlobalThemeJsonType, + option: GlobalThemeJsonType } // 组件成组实例类 diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 4ebbce4e..2a21d71d 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -103,7 +103,7 @@ export class PublicConfigClass implements PublicConfigType { [EventLife.VNODE_MOUNTED]: undefined, [EventLife.VNODE_BEFORE_MOUNT]: undefined }, - eventsFn: [] + interactEvents: [] } } diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index f800222e..e8979e07 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -100,8 +100,7 @@ import { Carbon3DSoftware as Carbon3DSoftwareIcon, Filter as FilterIcon, FilterEdit as FilterEditIcon, - Laptop as LaptopIcon, - RowDelete as RowDeleteIcon + Laptop as LaptopIcon } from '@vicons/carbon' const ionicons5 = { @@ -295,9 +294,7 @@ const carbon = { FilterIcon, FilterEditIcon, // 图层 - LaptopIcon, - // 删除组件 - RowDeleteIcon + LaptopIcon } // https://www.xicons.org/#/ 还有很多 diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index 26590341..cf75e72e 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -44,7 +44,7 @@ export const asideCollapsedWidth = 60 export const maskClosable = false // 全局边框圆角 -export const borderRadius = '6px' +export const borderRadius = '4px' // 轮播间隔 export const carouselInterval = 4000 diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue index 736130c6..68b73edf 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue @@ -135,8 +135,9 @@ const sendHandle = async () => { showMatching.value = true return } - window['$message'].warning('数据异常，请检查参数！') + window['$message'].warning('没有拿到返回值，请检查接口！') } catch (error) { + console.error(error); loading.value = false window['$message'].warning('数据异常，请检查参数！') } diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue index 205f3328..129b50c1 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue @@ -132,8 +132,9 @@ const fetchTargetData = async () => { sourceData.value = res return } - window['$message'].warning('数据异常，请检查参数！') + window['$message'].warning('没有拿到返回值，请检查接口！') } catch (error) { + console.error(error); window['$message'].warning('数据异常，请检查参数！') } } diff --git a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue index ed9bc272..b51938dd 100644 --- a/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue @@ -114,10 +114,6 @@ const sendHandle = async () => { } loading.value = true try { - // const res = await customizeHttp( - // toRaw(pondData.value?.dataPondRequestConfig), - // toRaw(chartEditStore.getRequestGlobalConfig) - // ) const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig)) loading.value = false if (res) { @@ -126,8 +122,9 @@ const sendHandle = async () => { showMatching.value = true return } - window['$message'].warning('数据异常，请检查参数！') + window['$message'].warning('没有拿到返回值，请检查接口！') } catch (error) { + console.error(error); loading.value = false window['$message'].warning('数据异常，请检查参数！') } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEvebtInteraction/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEvebtInteraction/index.ts deleted file mode 100644 index d4c2031d..00000000 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEvebtInteraction/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import ChartEvebtInteraction from './index.vue' - -export { ChartEvebtInteraction } \ No newline at end of file diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEvebtInteraction/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEvebtInteraction/index.vue deleted file mode 100644 index f6980427..00000000 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEvebtInteraction/index.vue +++ /dev/null @@ -1,168 +0,0 @@ - - - - - diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue index 581fefcb..9310bf6a 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue @@ -1,5 +1,5 @@