fix: 处理 TS 报错

This commit is contained in:
奔跑的面条 2022-08-15 11:43:32 +08:00
parent bad7e37f5a
commit 09ebd67c37
7 changed files with 27 additions and 49 deletions

View File

@ -90,12 +90,8 @@ export interface CreateComponentType extends PublicConfigType, requestConfig {
option: GlobalThemeJsonType
}
// 组件成组实例类 (部分属性用不到设置为 any)
export interface CreateComponentGroupType extends PublicConfigType {
// 保持结构一致, 设置组件名称
chartConfig: {
title: ConfigType.title
}
// 组件成组实例类
export interface CreateComponentGroupType extends CreateComponentType {
groupList: Array<CreateComponentType>
}

View File

@ -1,5 +1,5 @@
import { getUUID } from '@/utils'
import { PublicConfigType, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { ChartFrameEnum, PublicConfigType, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
import { groupTitle } from '@/settings/designSetting'
import {
@ -79,48 +79,30 @@ export class publicConfig implements PublicConfigType {
}
// 成组类 (部分属性不需要, 不继承 publicConfig)
export class PublicGroupConfigClass implements CreateComponentGroupType {
export class PublicGroupConfigClass extends publicConfig implements CreateComponentGroupType {
// 成组
public isGroup = true
// 名称
public chartConfig = {
title: groupTitle
key: 'group',
chartKey: 'group',
conKey: 'group',
category: 'group',
categoryName: 'group',
package: 'group',
chartFrame: ChartFrameEnum.COMMON,
title: groupTitle,
image: ''
}
// 组成员列表
public groupList: Array<CreateComponentType> = []
// ---- 原有 ---
// key
public key = 'group'
// 配置
public option = {}
// 标识
public id = getUUID()
// 基本信息
public attr = { w: 0, h: 0, x: 0, y: 0, zIndex: -1 }
// 基本样式
public styles = {
// 色相
hueRotate: 0,
// 饱和度
saturate: 1,
// 对比度
contrast: 1,
// 亮度
brightness: 1,
// 透明
opacity: 1,
// 旋转
rotateZ: 0,
rotateX: 0,
rotateY: 0,
// 倾斜
skewX: 0,
skewY: 0,
// 动画
animations: []
}
// 设置坐标
public setPosition(x: number, y: number): void {
this.attr.x = x
this.attr.y = y
}
}

View File

@ -24,8 +24,8 @@
<n-scrollbar style="max-height: 500px">
<div
class="list-item go-flex-items-center go-ellipsis-1"
v-for="item in options"
:key="item.key"
v-for="(item, index) in options"
:key="index"
:title="item.label"
>
<n-icon
@ -66,6 +66,7 @@ import {
HistoryTargetTypeEnum,
HistoryActionTypeEnum,
} from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
import { isArray } from 'node_modules/_@types_lodash@4.14.182@@types/lodash'
const {
DesktopOutlineIcon,
@ -127,7 +128,6 @@ const options = computed(() => {
const options = backStack.map((e: HistoryItemType) => {
return {
label: labelHandle(e),
key: e.id,
icon: iconHandle(e),
}
})

View File

@ -24,11 +24,11 @@
<!-- 图表 -->
<div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
<!-- 分组 -->
<edit-group v-if="item.isGroup" :groupData="item" :groupIndex="index"></edit-group>
<edit-group v-if="item.isGroup" :groupData="(item as CreateComponentGroupType)" :groupIndex="index"></edit-group>
<!-- 单组件 -->
<edit-shape-box
v-if="!item.isGroup"
v-else
:data-id="item.id"
:index="index"
:style="useComponentStyle(item.attr, index)"

View File

@ -51,7 +51,7 @@ export const useSync = () => {
// 重新创建是为了处理类种方法消失的问题
const create = async (e: CreateComponentType, callBack?: (e: CreateComponentType) => void) => {
// 补充 class 上的方法
let newComponent: CreateComponentType = await createComponent(e.chartConfig as ConfigType)
let newComponent: CreateComponentType = await createComponent(e.chartConfig)
if (callBack) {
callBack(Object.assign(newComponent, { ...e, id: getUUID() }))
} else {
@ -82,7 +82,7 @@ export const useSync = () => {
} else {
// 非组件(顺便排除脏数据)
if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
Object.assign((chartEditStore as any)[key], projectData[key])
Object.assign(chartEditStore[key], projectData[key])
}
}
}

View File

@ -44,8 +44,6 @@ const props = defineProps({
required: true
}
})
console.log(props.groupData)
</script>
<style lang="scss" scoped>

View File

@ -13,7 +13,7 @@
<!-- 分组 -->
<preview-render-group
v-if="item.isGroup"
:groupData="item"
:groupData="(item as CreateComponentGroupType)"
:groupIndex="index"
:themeSetting="themeSetting"
:themeColor="themeColor"
@ -21,6 +21,7 @@
<!-- 单组件 -->
<component
v-else
:is="item.chartConfig.chartKey"
:chartConfig="item"
:themeSetting="themeSetting"
@ -34,6 +35,7 @@
import { PropType, computed } from 'vue'
import { ChartEditStorageType } from '../../index.d'
import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
import { CreateComponentGroupType } from '@/packages/index.d'
import { chartColors } from '@/settings/chartThemes/index'
import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
import { getSizeStyle, getComponentAttrStyle } from '../../utils'