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"
      :formModel="props"
      @change="handleFormChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed } 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";
import { set, cloneDeep } from "lodash-es";

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

const baseSeries: IFormItem[] = [
  {
    label: "样式",
    prop: "",
    type: "divider",
  },
  {
    label: "固定柱宽",
    prop: "series.bar.fixedBarWidth",
    type: "radioGroup",
    fieldProps: {
      options: [
        { label: "是", value: true },
        { label: "否", value: false },
      ],
    },
    defaultValue: false,
    format: (formatModel, value) => {
      formatModel.value["series.bar.barWidth"] =
        value && formatModel.value?.["series.bar.barWidth"] !== "auto"
          ? formatModel.value?.["series.bar.barWidth"] || 20
          : "auto";
    },
  },
  {
    label: "",
    prop: "",
    type: "dependency",
    name: ["series.bar.fixedBarWidth"],
    children: (model) => {
      return model["series.bar.fixedBarWidth"]
        ? [
            {
              label: "柱宽",
              prop: "series.bar.barWidth",
              type: "inputNumber",
              fieldProps: {
                addonAfter: "px",
              },
              defaultValue: 20,
            },
          ]
        : [];
    },
  },
  {
    label: "系列间隔",
    prop: "series.bar.barGap",
    type: "slider",
    defaultValue: 30,
    format: (formatFormatModel, value) => {
      formatFormatModel.value['series.bar.barGap'] = value + "%";
    },
    valueToForm: (value) => {
      return +(value?.replace("%", "") || 0);
    },
  },
  {
    label: "分类间隔",
    prop: "series.bar.barCategoryGap",
    type: "slider",
    defaultValue: 20,
    format: (formatFormatModel, value) => {
      formatFormatModel.value['series.bar.barCategoryGap'] = value + "%";
    },
    valueToForm: (value) => {
      return +(value?.replace("%", "") || 0);
    },
  },
  {
    label: "边框",
    prop: "",
    type: "divider",
  },
  {
    label: "线宽",
    prop: "series.bar.itemStyle.borderWidth",
    type: "inputNumber",
    fieldProps: {
      addonAfter: "px",
    },
    defaultValue: 0,
  },
  {
    label: "颜色",
    prop: "series.bar.itemStyle.borderColor",
    type: "colorSelect",
    defaultValue: "#ccc",
  },
  {
    label: "圆角",
    prop: "series.bar.itemStyle.borderRadius",
    type: "inputNumber",
    fieldProps: {
      addonAfter: "px",
    },
    defaultValue: 0,
  },
];
const formItems: IFormItem[] = [
  chartFormItemsMap.title,
  chartFormItemsMap.legend,
  chartFormItemsMap.label,
  {
    ...chartFormItemsMap.series,
    children: (chartFormItemsMap.series.children as IFormItem[]).concat(
      baseSeries
    ),
  },
  chartFormItemsMap.xAxis,
  chartFormItemsMap.yAxis,
  chartFormItemsMap.tooltip,
];

const handleDataSourceChange = (data: any) => {
  emit("change", {
    ...props,
    dataSource: data,
  });
};
const handleFormChange = (formatData: any) => {
  const obj = cloneDeep(props);
  Object.keys(formatData).forEach((key) => {
    set(obj, key, formatData[key]);
  });
  emit("change", obj);
};
</script>

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