diff --git a/.eslintrc.js b/.eslintrc.js index 3786b486..fb7c3d3f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -16,7 +16,11 @@ module.exports = { 'vue/setup-compiler-macros': true, node: true, }, - extends: ["plugin:vue/vue3-essential", "eslint:recommended"], + extends: [ + "plugin:vue/vue3-essential", + "eslint:recommended", + "./.eslintrc-auto-import.json" + ], rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", diff --git a/.gitignore b/.gitignore index e12136fb..7812c212 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules +.history .husky .DS_Store dist @@ -7,4 +8,5 @@ dist-ssr .vscode stats.html auto-imports.d.ts +.eslintrc-auto-import.json components.d.ts \ No newline at end of file diff --git a/plop/component-template/config.ts b/plop/component-template/config.ts new file mode 100644 index 00000000..188691f3 --- /dev/null +++ b/plop/component-template/config.ts @@ -0,0 +1,14 @@ +import { CreateComponentType } from '@/packages/index.d'; +import { publicConfig } from '@/packages/public/publicConfig'; +import { ComponentConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' + +export const option = { +} + +export default class Config extends publicConfig implements CreateComponentType +{ + public key = ComponentConfig.key + public chartConfig = cloneDeep(ComponentConfig) + public option = cloneDeep(option) +} \ No newline at end of file diff --git a/plop/component-template/config.vue b/plop/component-template/config.vue new file mode 100644 index 00000000..bb1ef495 --- /dev/null +++ b/plop/component-template/config.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/plop/component-template/index.ts b/plop/component-template/index.ts new file mode 100644 index 00000000..b158eb99 --- /dev/null +++ b/plop/component-template/index.ts @@ -0,0 +1,13 @@ +import { FormCategoryEnum, FormCategoryEnumName } from './../../index.d'; +import { PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'; +import { getComponentConfig } from '@/utils/componets'; + +export const ComponentConfig = getComponentConfig({ + key: 'InputCommon', + title: '输入框', + category: FormCategoryEnum.INPUT, + categoryName: FormCategoryEnumName.INPUT, + package: PackagesCategoryEnum.FORM, + chartFrame: ChartFrameEnum.COMMON +}) + diff --git a/plop/component-template/index.vue b/plop/component-template/index.vue new file mode 100644 index 00000000..cba754c1 --- /dev/null +++ b/plop/component-template/index.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/src/enums/componentEnum.ts b/src/enums/componentEnum.ts new file mode 100644 index 00000000..7000f51a --- /dev/null +++ b/src/enums/componentEnum.ts @@ -0,0 +1,13 @@ +export enum COMPONENT_SIZE_ENUM { + TINY = 'tiny', + SMALL = 'small', + MEDIUM = 'medium', + LARGE = 'large' +} + +export const componentSizeMap = new Map([ + [COMPONENT_SIZE_ENUM.TINY, '迷你'], + [COMPONENT_SIZE_ENUM.SMALL, '小'], + [COMPONENT_SIZE_ENUM.MEDIUM, '中'], + [COMPONENT_SIZE_ENUM.LARGE, '大'], +]) \ No newline at end of file diff --git a/src/enums/eventEnum.ts b/src/enums/eventEnum.ts index 2b61ca88..894fc88f 100644 --- a/src/enums/eventEnum.ts +++ b/src/enums/eventEnum.ts @@ -30,9 +30,25 @@ export const EventTriggerTypeMap = new Map( ] ) -export const CommonEventMap = new Map( +// 数据组件事件 +export enum DATA_COMPONENT_EVENT_ENUM { + LOAD_DATA ='loadData' +} + +export const dataComponentEventMap = new Map( [ - ['forceUpdate', '强制更新'], + [DATA_COMPONENT_EVENT_ENUM.LOAD_DATA, '加载数据'], + ] +) + +// 公共事件 +export enum COMMON_EVENT_ENUM { + FORCE_UPDATE ='forceUpdate' +} + +export const CommonEventMap = new Map( + [ + [COMMON_EVENT_ENUM.FORCE_UPDATE, '强制更新'], ] ) diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index d13c60e7..d8d07043 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -5,6 +5,7 @@ import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { RequestDataTypeEnum } from '@/enums/httpEnum' import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' +import { useIntervalFn } from '@vueuse/core' // 获取类型 type ChartEditStoreType = typeof useChartEditStore @@ -21,10 +22,16 @@ export const useChartDataFetch = ( updateCallback?: (...args: any) => any ) => { const vChartRef = ref(null) - let fetchInterval: any = 0 + let pauseFn: any = null + let resumeFn: any = null + let fetchFn: any = null const requestIntervalFn = () => { const chartEditStore = useChartEditStore() + + pauseFn = null + resumeFn = null + fetchFn = null // 全局数据 const { @@ -55,9 +62,7 @@ export const useChartDataFetch = ( const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value if (!completePath) return - clearInterval(fetchInterval) - - const fetchFn = async () => { + fetchFn = async (callback: () => any) => { const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.requestGlobalConfig)) if (res && res.data) { try { @@ -73,6 +78,7 @@ export const useChartDataFetch = ( } } } + callback && callback() } catch (error) { console.error(error) } @@ -87,11 +93,17 @@ export const useChartDataFetch = ( // 单位 const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value // 开启轮询 - if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) + if (time) { + const { pause, resume, isActive } = useIntervalFn(fetchFn, intervalUnitHandle(time, unit)) + pauseFn = pause + resumeFn = resume + } } - } catch (error) {} + } catch (error) { + console.error(error) + } } - + isPreview() && requestIntervalFn() - return { vChartRef } + return { vChartRef, pauseFn, resumeFn, fetchFn } } diff --git a/src/packages/components/Charts/Bars/BarCommon/enum.ts b/src/packages/components/Charts/Bars/BarCommon/enum.ts new file mode 100644 index 00000000..9344ce61 --- /dev/null +++ b/src/packages/components/Charts/Bars/BarCommon/enum.ts @@ -0,0 +1,13 @@ +import { dataComponentEventMap } from '@/enums/eventEnum'; +import { OptionsType } from '@/packages/index.d'; +import { mapToOptions } from '@/utils'; + +//内置方法 +export const methodList = mapToOptions(dataComponentEventMap) as Array + +export const config = { + key: 'BarCommon', + title: '柱状图', + methodList +} + diff --git a/src/packages/components/Charts/Bars/BarCommon/index.ts b/src/packages/components/Charts/Bars/BarCommon/index.ts index 46bd0e28..b35eb506 100644 --- a/src/packages/components/Charts/Bars/BarCommon/index.ts +++ b/src/packages/components/Charts/Bars/BarCommon/index.ts @@ -2,10 +2,10 @@ import image from '@/assets/images/chart/charts/bar_x.png' import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' import { getComponentConfig } from '@/utils' import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' +import { config } from './enum' export const BarCommonConfig: ConfigType = getComponentConfig({ - key: 'BarCommon', - title: '柱状图', + ...config, category: ChatCategoryEnum.BAR, categoryName: ChatCategoryEnumName.BAR, package: PackagesCategoryEnum.CHARTS, diff --git a/src/packages/components/Charts/Bars/BarCommon/index.vue b/src/packages/components/Charts/Bars/BarCommon/index.vue index f6f9482c..c93652a2 100644 --- a/src/packages/components/Charts/Bars/BarCommon/index.vue +++ b/src/packages/components/Charts/Bars/BarCommon/index.vue @@ -49,5 +49,15 @@ const option = computed(() => { return mergeTheme(props.chartConfig.option, props.themeSetting, includes) }) -const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore) +const { vChartRef, pauseFn, resumeFn, fetchFn } = useChartDataFetch(props.chartConfig, useChartEditStore) + +defineExpose({ + loadData: async () => { + if(fetchFn){ + pauseFn() + await fetchFn() + resumeFn() + } + } +}) diff --git a/src/packages/components/Form/DatePickers/DatePickerCommon/config.ts b/src/packages/components/Form/DatePickers/DatePickerCommon/config.ts new file mode 100644 index 00000000..e6ec53bc --- /dev/null +++ b/src/packages/components/Form/DatePickers/DatePickerCommon/config.ts @@ -0,0 +1,14 @@ +import { CreateComponentType } from '@/packages/index.d'; +import { publicConfig } from '@/packages/public/publicConfig'; +import { DatePickerCommonConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' + +export const option = { +} + +export default class Config extends publicConfig implements CreateComponentType +{ + public key = DatePickerCommonConfig.key + public chartConfig = cloneDeep(DatePickerCommonConfig) + public option = cloneDeep(option) +} \ No newline at end of file diff --git a/src/packages/components/Form/DatePickers/DatePickerCommon/config.vue b/src/packages/components/Form/DatePickers/DatePickerCommon/config.vue new file mode 100644 index 00000000..3d0a9354 --- /dev/null +++ b/src/packages/components/Form/DatePickers/DatePickerCommon/config.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/packages/components/Form/DatePickers/DatePickerCommon/index.ts b/src/packages/components/Form/DatePickers/DatePickerCommon/index.ts new file mode 100644 index 00000000..294063a3 --- /dev/null +++ b/src/packages/components/Form/DatePickers/DatePickerCommon/index.ts @@ -0,0 +1,13 @@ +import { FormCategoryEnum, FormCategoryEnumName } from '../../index.d'; +import { PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'; +import { getComponentConfig } from '@/utils/componets'; + +export const DatePickerCommonConfig = getComponentConfig({ + key: 'DatePickerCommon', + title: '日期选择', + category: FormCategoryEnum.DATE_PICKER, + categoryName: FormCategoryEnumName.DATE_PICKER, + package: PackagesCategoryEnum.FORM, + chartFrame: ChartFrameEnum.COMMON +}) + diff --git a/src/packages/components/Form/DatePickers/DatePickerCommon/index.vue b/src/packages/components/Form/DatePickers/DatePickerCommon/index.vue new file mode 100644 index 00000000..0705cf2f --- /dev/null +++ b/src/packages/components/Form/DatePickers/DatePickerCommon/index.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/packages/components/Form/DatePickers/index.ts b/src/packages/components/Form/DatePickers/index.ts new file mode 100644 index 00000000..871a2495 --- /dev/null +++ b/src/packages/components/Form/DatePickers/index.ts @@ -0,0 +1,3 @@ +import { DatePickerCommonConfig } from './DatePickerCommon/index' + +export default [ DatePickerCommonConfig ] diff --git a/src/packages/components/Form/Inputs/InputCommon/config.ts b/src/packages/components/Form/Inputs/InputCommon/config.ts new file mode 100644 index 00000000..68b5e29c --- /dev/null +++ b/src/packages/components/Form/Inputs/InputCommon/config.ts @@ -0,0 +1,24 @@ +import { CreateComponentType } from '@/packages/index.d'; +import { publicConfig } from '@/packages/public/publicConfig'; +import { InputCommonConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' +import { COMPONENT_SIZE_ENUM } from '@/enums/componentEnum'; + +export const option = { + // 参考 https://www.naiveui.com/zh-CN/os-theme/components/input + inputOption: { + clearable: true, + maxlength: 20, + placeholder: '', + round: false, + showCount: false, + size: COMPONENT_SIZE_ENUM.MEDIUM + } +} + +export default class Config extends publicConfig implements CreateComponentType +{ + public key = InputCommonConfig.key + public chartConfig = cloneDeep(InputCommonConfig) + public option = cloneDeep(option) +} \ No newline at end of file diff --git a/src/packages/components/Form/Inputs/InputCommon/config.vue b/src/packages/components/Form/Inputs/InputCommon/config.vue new file mode 100644 index 00000000..75a68caf --- /dev/null +++ b/src/packages/components/Form/Inputs/InputCommon/config.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/src/packages/components/Form/Inputs/InputCommon/index.ts b/src/packages/components/Form/Inputs/InputCommon/index.ts new file mode 100644 index 00000000..29e82114 --- /dev/null +++ b/src/packages/components/Form/Inputs/InputCommon/index.ts @@ -0,0 +1,13 @@ +import { FormCategoryEnum, FormCategoryEnumName } from './../../index.d'; +import { PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'; +import { getComponentConfig } from '@/utils/componets'; + +export const InputCommonConfig = getComponentConfig({ + key: 'InputCommon', + title: '输入框', + category: FormCategoryEnum.INPUT, + categoryName: FormCategoryEnumName.INPUT, + package: PackagesCategoryEnum.FORM, + chartFrame: ChartFrameEnum.COMMON +}) + diff --git a/src/packages/components/Form/Inputs/InputCommon/index.vue b/src/packages/components/Form/Inputs/InputCommon/index.vue new file mode 100644 index 00000000..1b18d19b --- /dev/null +++ b/src/packages/components/Form/Inputs/InputCommon/index.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/src/packages/components/Form/Inputs/index.ts b/src/packages/components/Form/Inputs/index.ts new file mode 100644 index 00000000..3a233718 --- /dev/null +++ b/src/packages/components/Form/Inputs/index.ts @@ -0,0 +1,3 @@ +import { InputCommonConfig } from './InputCommon/index' + +export default [ InputCommonConfig ] diff --git a/src/packages/components/Form/Selects/SelectCommon/config.ts b/src/packages/components/Form/Selects/SelectCommon/config.ts new file mode 100644 index 00000000..74ded2c7 --- /dev/null +++ b/src/packages/components/Form/Selects/SelectCommon/config.ts @@ -0,0 +1,14 @@ +import { CreateComponentType } from '@/packages/index.d'; +import { publicConfig } from '@/packages/public/publicConfig'; +import { SelectCommonConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' + +export const option = { +} + +export default class Config extends publicConfig implements CreateComponentType +{ + public key = SelectCommonConfig.key + public chartConfig = cloneDeep(SelectCommonConfig) + public option = cloneDeep(option) +} \ No newline at end of file diff --git a/src/packages/components/Form/Selects/SelectCommon/config.vue b/src/packages/components/Form/Selects/SelectCommon/config.vue new file mode 100644 index 00000000..3d0a9354 --- /dev/null +++ b/src/packages/components/Form/Selects/SelectCommon/config.vue @@ -0,0 +1,7 @@ + + + + + diff --git a/src/packages/components/Form/Selects/SelectCommon/index.ts b/src/packages/components/Form/Selects/SelectCommon/index.ts new file mode 100644 index 00000000..6f1074b2 --- /dev/null +++ b/src/packages/components/Form/Selects/SelectCommon/index.ts @@ -0,0 +1,13 @@ +import { FormCategoryEnum, FormCategoryEnumName } from './../../index.d'; +import { PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'; +import { getComponentConfig } from '@/utils/componets'; + +export const SelectCommonConfig = getComponentConfig({ + key: 'SelectCommon', + title: '下拉框', + category: FormCategoryEnum.SELECT, + categoryName: FormCategoryEnumName.SELECT, + package: PackagesCategoryEnum.FORM, + chartFrame: ChartFrameEnum.COMMON +}) + diff --git a/src/packages/components/Form/Selects/SelectCommon/index.vue b/src/packages/components/Form/Selects/SelectCommon/index.vue new file mode 100644 index 00000000..53a8f654 --- /dev/null +++ b/src/packages/components/Form/Selects/SelectCommon/index.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/packages/components/Form/Selects/index.ts b/src/packages/components/Form/Selects/index.ts new file mode 100644 index 00000000..a5f37175 --- /dev/null +++ b/src/packages/components/Form/Selects/index.ts @@ -0,0 +1,3 @@ +import { SelectCommonConfig } from './SelectCommon/index' + +export default [ SelectCommonConfig ] diff --git a/src/packages/components/Form/index.d.ts b/src/packages/components/Form/index.d.ts new file mode 100644 index 00000000..c5888e42 --- /dev/null +++ b/src/packages/components/Form/index.d.ts @@ -0,0 +1,13 @@ +export enum FormCategoryEnum { + INPUT = 'Inputs', + SELECT = 'Selects', + DATE_PICKER = 'DatePickers', + MORE = 'Mores' + } + + export enum FormCategoryEnumName { + INPUT = '输入框', + SELECT = '下拉框', + DATE_PICKER = '日期选择', + MORE = '更多' + } \ No newline at end of file diff --git a/src/packages/components/Form/index.ts b/src/packages/components/Form/index.ts new file mode 100644 index 00000000..959e0d8c --- /dev/null +++ b/src/packages/components/Form/index.ts @@ -0,0 +1,5 @@ +import Inputs from './Inputs' +import DatePickers from './DatePickers' +import Selects from './Selects' + +export const FormList = [...Inputs, ...DatePickers, ...Selects] diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index b2805beb..e7624804 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -33,7 +33,7 @@ export type ConfigType = { chartFrame?: ChartFrameEnum methodList?: Array eventList?: Array - image: string | (() => Promise) + image?: string | (() => Promise) } @@ -132,7 +132,8 @@ export enum PackagesCategoryEnum { CHARTS = 'Charts', TABLES = 'Tables', INFORMATIONS = 'Informations', - DECORATES = 'Decorates' + DECORATES = 'Decorates', + FORM = 'Form', } // 包分类名称 @@ -140,7 +141,8 @@ export enum PackagesCategoryName { CHARTS = '图表', TABLES = '列表', INFORMATIONS = '信息', - DECORATES = '小组件' + DECORATES = '小组件', + FORM = '表单', } // 获取组件 @@ -155,4 +157,5 @@ export type PackagesType = { [PackagesCategoryEnum.INFORMATIONS]: ConfigType[] [PackagesCategoryEnum.TABLES]: ConfigType[] [PackagesCategoryEnum.DECORATES]: ConfigType[] + [PackagesCategoryEnum.FORM]: ConfigType[] } diff --git a/src/packages/index.ts b/src/packages/index.ts index 25476aa1..ea1ee81f 100644 --- a/src/packages/index.ts +++ b/src/packages/index.ts @@ -2,6 +2,7 @@ import { ChartList } from '@/packages/components/Charts/index' import { DecorateList } from '@/packages/components/Decorates/index' import { InformationList } from '@/packages/components/Informations/index' import { TableList } from '@/packages/components/Tables/index' +import { FormList } from '@/packages/components/Form/index' import { PackagesCategoryEnum, PackagesType, @@ -17,7 +18,8 @@ export let packagesList: PackagesType = { [PackagesCategoryEnum.CHARTS]: ChartList, [PackagesCategoryEnum.INFORMATIONS]: InformationList, [PackagesCategoryEnum.TABLES]: TableList, - [PackagesCategoryEnum.DECORATES]: DecorateList + [PackagesCategoryEnum.DECORATES]: DecorateList, + [PackagesCategoryEnum.FORM]: FormList, } /** diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 19252019..2ac3443d 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -90,6 +90,7 @@ import { Filter as FilterIcon, FilterEdit as FilterEditIcon, Edit as EditIcon, + DataFormat as DataFormatIcon } from '@vicons/carbon' const ionicons5 = { @@ -218,6 +219,7 @@ const ionicons5 = { const carbon = { EditIcon, + DataFormatIcon, // 图表 RoadmapIcon, // 信息 diff --git a/src/utils/componets.ts b/src/utils/componets.ts index e08151a0..acf8baa3 100644 --- a/src/utils/componets.ts +++ b/src/utils/componets.ts @@ -20,6 +20,11 @@ export const loadAsyncComponent = (loader: AsyncComponentLoader) => defineAsyncComponent({ loader, loadingComponent: AsyncLoading, + errorComponent: { + render(){ + return '加载失败' + } + }, delay: 20, }) diff --git a/src/utils/utils.ts b/src/utils/utils.ts index b3ffa42f..39a36d19 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -204,7 +204,7 @@ export const newFunctionHandle = ( try { if (!funcStr) return data const fn = new Function('data', funcStr) - const fnRes = fn(cloneDeep(data)) + const fnRes = fn(data) const resHandle = isToString ? toString(fnRes) : fnRes // 成功回调 successCallBack && successCallBack(resHandle) diff --git a/src/views/chart/ContentCharts/hooks/useAside.hook.ts b/src/views/chart/ContentCharts/hooks/useAside.hook.ts index eb69d0c1..9066337e 100644 --- a/src/views/chart/ContentCharts/hooks/useAside.hook.ts +++ b/src/views/chart/ContentCharts/hooks/useAside.hook.ts @@ -13,6 +13,7 @@ const { RoadmapIcon, SpellCheckIcon, GraphicalDataFlowIcon, + DataFormatIcon, } = icon.carbon @@ -44,6 +45,10 @@ const packagesListObj = { icon: renderIcon(GraphicalDataFlowIcon), label: PackagesCategoryName.DECORATES, }, + [PackagesCategoryEnum.FORM]: { + icon: renderIcon(DataFormatIcon), + label: PackagesCategoryName.FORM, + }, } // 处理列表 diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue index 59899b73..475def20 100644 --- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue +++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue @@ -70,6 +70,7 @@ const select = computed(() => { border-radius: 5px; background-color: #fff; transform: translate(-40%, -30%); + cursor: col-resize; &.t { width: 30px; transform: translate(-50%, -50%); diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index c35b2785..d1e815d5 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -127,6 +127,12 @@ onMounted(() => { }) + +