mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-05 21:28:43 +08:00
fix: 分离配置项里的名称部分数据
This commit is contained in:
parent
c4ff0d24b7
commit
c4e3c34842
26
src/components/ChartItemSetting/NameSetting.vue
Normal file
26
src/components/ChartItemSetting/NameSetting.vue
Normal 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>
|
@ -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
|
||||
}
|
||||
})
|
||||
|
@ -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 }
|
||||
|
@ -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) {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user