Files
dvcp_v2_webapp/packages/bigscreen/designer/components/componentConfig.vue
2024-04-16 18:13:55 +08:00

90 lines
2.7 KiB
Vue

<template>
<section class="componentConfig">
<div class="layout-right__content--wrapper">
<div class="layout-config__group">
<h2>基础设置</h2>
<div class="layout-config__item">
<label>图表尺寸</label>
<div class="layout-config__item--right">
<el-input-number size="mini" :min="0" v-model="config.width" controls-position="right"/>
<el-input-number size="mini" :min="0" v-model="config.height" controls-position="right"/>
</div>
</div>
<div class="layout-config__item">
<label>图表位置</label>
<div class="layout-config__item--right">
<el-input-number size="mini" :min="0" v-model="config.left" controls-position="right"/>
<el-input-number size="mini" :min="0" v-model="config.top" controls-position="right"/>
</div>
</div>
<config-item label="內边距">
<el-input size="mini" v-model="config.padding" clearable placeholder="请输入符合css的padding合法值"/>
</config-item>
</div>
</div>
<div class="layout-right__content--wrapper">
<div class="layout-config__group">
<h2>组件设置</h2>
<config-extra v-model="config"/>
</div>
</div>
<div class="layout-right__content--wrapper">
<div class="layout-config__group">
<h2>弹窗设置</h2>
<config-item label="标题">
<el-input size="mini" clearable placeholder="请输入弹窗标题" v-model="config.dialogTitle"/>
</config-item>
<config-item label="内容" v-if="!['table','AiDvTable','AiDvMap','linkageMap'].includes(config.type)">
<ai-dialog-btn dialog-title="弹窗内容" text="打开编辑器" :modal="false">
<ai-editor clearable placeholder="请输入弹窗内容" v-model="config.dialogContent" :instance="instance"/>
</ai-dialog-btn>
</config-item>
</div>
</div>
</section>
</template>
<script>
import ConfigItem from "./configItem";
import ConfigExtra from "./configExtra.vue";
export default {
name: 'componentConfig',
components: {ConfigExtra, ConfigItem},
props: {
config: {default: () => ({})},
instance: Function,
dict: Object,
},
}
</script>
<style lang="scss" scoped>
.componentConfig {
.table-config {
& > div {
display: flex;
align-items: center;
justify-content: space-between;
width: 232px;
:deep( .el-select ) {
width: 80px;
}
.el-select {
width: 100%;
.el-input {
width: 100%;
:deep( input ) {
width: 80px
}
}
}
}
}
}
</style>