shalu-dashboard-ui/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="handleDataSourceChange"/>
    <CusForm v-if="activeTab === '2'" :columns="formItems" @change="handleFormChange"/>
  </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 '../../../DataConfig.vue';
import { CusForm, IFormItem } from '../../../../cusForm';
import { basicBarProps } from './props';
import { chartFormItemsMap } from '../../../config/chartFormItemsMap';

const props = defineProps(basicBarProps);
const activeTab = ref('1');
const emit = defineEmits(['change']);
const formItems = [
  chartFormItemsMap.title,
  chartFormItemsMap.legend,
  // chartFormItemsMap.label,
  {
    ...chartFormItemsMap.series,
    children: [
      ...(chartFormItemsMap.serie.children as IFormItem[]),
      {
        label: "样式",
        prop: "",
        type: "divider",
      },
      {
        label: "固定柱宽",
        prop: "serieBarFixedWidth",
        type: "radioGroup",
        fieldProps: {
          options: [
            { label: "是", value: true },
            { label: "否", value: false },
          ],
        },
        defaultValue: false,
      },
      {
        label: "系列间隔",
        prop: "serieGap",
        type: "slider",
        defaultValue: 20,
      },
      {
        label: "分类间隔",
        prop: "categoryGap",
        type: "slider",
        defaultValue: 20,
      },
      {
        label: "边框",
        prop: "",
        type: "divider",
      },
      {
        label: "线宽",
        prop: "serieBorderWidth",
        type: "inputNumber",
        fieldProps: {
          addonAfter: "px",
        },
        defaultValue: 0,
      },
      {
        label: "颜色",
        prop: "serieBorderColor",
        type: "colorSelect",
        defaultValue: "#ccc",
      },
      {
        label: "圆角",
        prop: "serieBorderRadius",
        type: "inputNumber",
        fieldProps: {
          addonAfter: "px",
        },
        defaultValue: 0,
      },
    ]
  },
  chartFormItemsMap.xAxis,
  chartFormItemsMap.yAxis,
  chartFormItemsMap.tooltip,
  chartFormItemsMap.background
]

const handleDataSourceChange = (data: any) => {
  emit('change', {
    ...props,
    dataSource: data,
  });
}
const handleFormChange = (data: any) => {
  console.log('form change:', data);
  emit('change', {
    ...props,
    ...data
  });
}
</script>

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