fix: 分离配置项里的名称部分数据

This commit is contained in:
mtruning 2022-03-19 21:29:03 +08:00
parent c4ff0d24b7
commit c4e3c34842
5 changed files with 41 additions and 46 deletions

View File

@ -0,0 +1,26 @@
<template>
<setting-item-box name="名称" :alone="true">
<n-input
type="text"
maxlength="6"
show-count
placeholder="请输入图表名称"
size="small"
v-model:value="chartConfig.title"
></n-input>
</setting-item-box>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { SettingItemBox } from '@/components/ChartItemSetting/index'
import { ConfigType } from '@/packages/index.d'
const props = defineProps({
chartConfig: {
type: Object as PropType<ConfigType>,
required: true
},
})
</script>

View File

@ -92,9 +92,7 @@ const props = defineProps({
required: true
},
chartAttr: {
type: Object as PropType<
Omit<PickCreateComponentType<'attr'>, 'node' | 'conNode'>
>,
type: Object as PropType<PickCreateComponentType<'attr'>>,
required: true
}
})

View File

@ -5,6 +5,8 @@ import CollapseItem from './CollapseItem.vue'
// 全局配置属性
import GlobalSetting from './GlobalSetting.vue'
// 名称
import NameSetting from './NameSetting.vue'
// 方向
import PositionSetting from './PositionSetting.vue'
// 尺寸
@ -12,4 +14,4 @@ import SizeSetting from './SizeSetting.vue'
// 样式
import StylesSetting from './StylesSetting.vue'
export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, PositionSetting, SizeSetting, StylesSetting }
export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, NameSetting, PositionSetting, SizeSetting, StylesSetting }

View File

@ -8,7 +8,7 @@
v-model:value="canvasConfig.width"
:validator="validator"
@update:value="changeSizeHandle"
></n-input-number>
></n-input-number>
</n-form-item>
<n-form-item label="高度">
<n-input-number
@ -16,7 +16,7 @@
v-model:value="canvasConfig.height"
:validator="validator"
@update:value="changeSizeHandle"
></n-input-number>
></n-input-number>
</n-form-item>
</n-form>
@ -52,7 +52,7 @@
:showPreview="true"
:swatches="swatchesColors"
v-model:value="canvasConfig.background"
></n-color-picker>
></n-color-picker>
</n-space>
<n-space>
<n-text>使用颜色</n-text>
@ -63,24 +63,12 @@
:round="false"
:disabled="!canvasConfig.backgroundImage"
:onUpdate="switchSelectColorHandle"
></n-switch>
></n-switch>
</n-space>
<n-space>
<n-text>背景</n-text>
<n-button
size="small"
:disabled="!canvasConfig.backgroundImage"
@click="clearImage"
>
清除背景图
</n-button>
<n-button
size="small"
:disabled="!canvasConfig.background"
@click="clearColor"
>
清除颜色
</n-button>
<n-button size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">清除背景图</n-button>
<n-button size="small" :disabled="!canvasConfig.background" @click="clearColor">清除颜色</n-button>
</n-space>
</n-space>
@ -110,6 +98,7 @@
<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { backgroundImageSize } from '@/settings/designSetting'
import { FileTypeEnum } from '@/enums/fileTypeEnum'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { UploadCustomRequestOptions } from 'naive-ui'
@ -175,7 +164,7 @@ const beforeUploadHandle = async ({ file }) => {
)
return false
}
if (type !== 'image/png' && type !== 'image/jpeg' && type !== 'image/gif') {
if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
window['$message'].warning('文件格式不符合,请重新上传!')
return false
}
@ -224,16 +213,7 @@ const switchSelectColorHandle = () => {
//
const customRequest = (options: UploadCustomRequestOptions) => {
const {
file,
data,
headers,
withCredentials,
action,
onFinish,
onError,
onProgress
} = options
const { file } = options
nextTick(() => {
if (file.file) {

View File

@ -1,16 +1,7 @@
<template>
<div class="go-chart-configurations-setting" v-if="targetData">
<!-- 名称 -->
<setting-item-box name="名称">
<n-input
type="text"
maxlength="6"
show-count
placeholder="请输入图表名称"
size="small"
v-model:value="targetData.chartConfig.title"
></n-input>
</setting-item-box>
<name-setting :chartConfig="targetData.chartConfig"></name-setting>
<!-- 尺寸 -->
<size-setting :chartAttr="targetData.attr"></size-setting>
<!-- 位置 -->
@ -25,10 +16,8 @@
</template>
<script setup lang="ts">
import { GlobalSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
import { SettingItemBox } from '@/components/ChartItemSetting/index'
import { GlobalSetting, NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
import { useTargetData } from '../hooks/useTargetData.hook'
const { targetData, chartEditStore } = useTargetData()
</script>