shalu-bigscreen-desiner/src/components/Charts/Bar/BasicBar/src/Config.vue

<template>
  <div class="chart-config">
    <div class="config-tab">
      <Tabs v-model:activeKey="activeTab" size="small" centered>
        <TabPane key="1">
          <template #tab>
            <DatabaseOutlined />
            <span>数据设置</span>
          </template>
        </TabPane>
        <TabPane key="2">
          <template #tab>
            <SkinOutlined />
            <span>样式设置</span>
          </template>
        </TabPane>
      </Tabs>
    </div>

    <DataConfig v-if="activeTab === '1'" :dataSource="dataSource" @change="handleChange"/>
    <CusForm v-if="activeTab === '2'" :columns=""/>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import { Tabs, TabPane } from 'ant-design-vue';
import { DatabaseOutlined, SkinOutlined } from '@ant-design/icons-vue';
import DataConfig from '@/components/Charts/DataConfig.vue';
import { CusForm, IFormItem } from '@/components/CusForm';
import { basicBarProps } from './props';

const props = defineProps(basicBarProps);
const activeTab = ref('1');
const emit = defineEmits(['change']);

const formItems: IFormItem[] = [
  {
    label: '标题',
    prop: 'title',
    type: 'group',
    children: [
      {
        label: '标题可见',
        prop: 'showTitle',
        type: 'checkbox',
      },
      {
        label: '文本',
        prop: 'titleText',
        type: 'input',
      },
      
    ]
  }
]

const handleChange = (data: any) => {
  emit('change', {
    ...props,
    dataSource: data,
  });
}
</script>

<style lang="less" scoped>
.config-tab {
  text-align: center;
  margin-bottom: 12px;
}
</style>