shalu-bigscreen-desiner/packages/shalu-dashboard-ui/components/charts/DataConfig.vue

<template>
  <Form
    size="small"
    layout="horizontal"
    :model="formModel"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
  >
    <Form.Item label="类型" name="sourceType">
      <Select v-model:value="formModel.sourceType">
        <SelectOption :value="DataSourceType.STATIC">静态数据</SelectOption>
        <SelectOption :value="DataSourceType.API">动态数据</SelectOption>
      </Select>
    </Form.Item>
    <!-- 静态数据 -->
    <template v-if="formModel.sourceType === DataSourceType.STATIC">
      <Form.Item label="数据" name="data">
        <Button type="default" size="small" @click="handleEditData('data')"
          >编辑</Button
        >
      </Form.Item>
    </template>
    <!-- 接口 -->
    <template v-else-if="formModel.sourceType === DataSourceType.API">
      <Form.Item label="接口地址" name="url">
        <Input.TextArea
          :auto-size="{ minRows: 5 }"
          placeholder="请输入接口地址"
          v-model:value="formModel.url"
        ></Input.TextArea>
      </Form.Item>
      <Form.Item label="请求方式" name="method">
        <RadioGroup v-model:value="formModel.method">
          <Radio value="GET">GET</Radio>
          <Radio value="POST">POST</Radio>
        </RadioGroup>
      </Form.Item>
      <Form.Item label="刷新时间" name="refreshTime">
        <InputNumber
          v-model:value="formModel.refreshTime"
          :step="1"
          style="width: 100%"
          @change="handleRefreshTimeChange"
        >
          <template #addonAfter>
            <span class="text-gray-500">秒</span>
          </template>
        </InputNumber>
      </Form.Item>
      <Form.Item label="请求参数" name="params">
        <Button type="default" size="small" @click="handleEditData('params')"
          >编辑</Button
        >
      </Form.Item>
      <Form.Item label="请求头" name="headers">
        <Button type="default" size="small" @click="handleEditData('headers')"
          >编辑</Button
        >
      </Form.Item>
      <Form.Item label="数据处理" name="dataProcess">
        <Button
          type="default"
          size="small"
          @click="handleEditData('dataProcess')"
          >编辑</Button
        >
      </Form.Item>
    </template>
  </Form>
  <CodeEditorModal ref="codeEditorRef" title="编辑数据" @ok="handleCodeSave" />
</template>

<script setup lang="ts">
import type { DataSource } from "./types";
import type { Ref } from "vue";
import { ref, defineProps, watch, defineEmits } from "vue";
import {
  Form,
  Input,
  Button,
  InputNumber,
  Select,
  SelectOption,
  RadioGroup,
  Radio
} from "ant-design-vue";
import { DataSourceType } from "./chartEnum";
import {
  CodeEditorModal,
  type CodeEditorModalInstance,
} from "../codeEditor";

/**
 * 通用数据data约定内容结构
 * {
 *  xData: ['x轴标签A', 'x轴标签B', 'x轴标签C', 'x轴标签D'],
 *  yData: ['y轴数据A', 'y轴数据B', 'y轴数据C', 'y轴数据D'],
 *  // 根据不同类型的图表配置不同的series
 *  series: [
 *    {
 *      name: '系列A',
 *      data: [10, 20, 30, 40]
 *    },
 *    {
 *      name: '系列B',
 *      data: [10, 20, 30, 40]
 *    }
 *  ]
 * }
 */
const emit = defineEmits(["change"]);
const props = defineProps<{
  dataSource: DataSource;
}>();
const formModel = ref({
  sourceType: DataSourceType.STATIC,
  // 静态数据相关
  data: "",
  // 接口相关
  url: '',
  method: "",
  params: {},
  headers: {},
  refreshTime: 0,
  // 数据处理
  dataProcess: "",
});

const handleRefreshTimeChange = (val: unknown) => {
  formModel.value.refreshTime = val === 0 || val as number >= 60 ? val as number : 60;
};

/* =====================编辑代码======================= */
let pathKey: "data" | "params" | "headers" | "dataProcess";
const codeEditorRef = ref<Ref<CodeEditorModalInstance> | null>(null);
const handleEditData = (key: "data" | "params" | "headers" | "dataProcess") => {
  pathKey = key;
  codeEditorRef.value?.open(JSON.stringify(formModel.value[key]));
};
const handleCodeSave = (code: string) => {
  formModel.value[pathKey] = JSON.parse(code);
};

watch(
  () => props.dataSource,
  (val) => {
    Object.assign(formModel.value, val || {});
  },
  { immediate: true }
);

watch(
  () => formModel.value,
  (val) => {
    emit("change", val);
  },
  { deep: true }
);
</script>

<style scoped></style>