yg-yygl 0.0.1

package/dist/views/sys/data-interface/components/data-interface-form.vue

@@ -0,0 +1,1181 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Form, type FormItemConfig, CodeEditor } from '@udp/component-ui';
+import { InfoFilled, QuestionFilled } from '@element-plus/icons-vue';
+import {
+  DataInterfaceType,
+  DataInterfaceStatus,
+  DataInterfaceAction,
+  RequestMethod,
+} from '../../../../api/data-interface/types';
+
+import SqlDataConfig from './sql-data-config.vue';
+import SqlDataStatistics from './sql-data-statistics.vue';
+import SqlDataDisplay from './sql-data-display.vue';
+import StaticDataConfig from './static-data-config.vue';
+import ApiDataConfig from './api-data-config.vue';
+
+// 导入API和类型
+import type {
+  InterfaceCategory,
+  Parameter,
+  Field,
+  ApiConfig,
+} from '../../../../api/data-interface/types';
+
+// 导入字典API
+import { getDicItemListByDicCode } from '../../../../api/dic';
+import type { DicInfoType } from '../../../../api/dic/types';
+
+// 定义props
+const props = withDefaults(
+  defineProps<{
+    categoryList?: InterfaceCategory[]; // 改为可选
+    editData: any; // 移除ExtendedDataInterface类型引用
+    showStepActions?: boolean; // 控制是否显示步骤按钮
+  }>(),
+  {
+    showStepActions: true,
+    categoryList: () => [],
+  },
+);
+
+// 组件状态
+const activeStep = ref(0);
+const loading = ref(false);
+const formRef = ref();
+
+// 分类数据
+const categoryTreeData = ref<InterfaceCategory[]>([]);
+const loadingCategory = ref(false);
+
+// 将字典项数据转换为分类树数据
+const adaptDicItemToCategory = (dicItems: any[]): InterfaceCategory[] => {
+  if (!Array.isArray(dicItems)) {
+    console.error('adaptDicItemToCategory: dicItems不是数组', dicItems);
+    return [];
+  }
+
+  return dicItems.map((item) => {
+    return {
+      id: item.id?.toString() || '', // 确保ID是字符串类型
+      categoryName: item.itemValue || '未命名',
+      parentId: item.itemParentId?.toString() || '', // 确保parentId是字符串类型
+      children: [],
+      hasChild:
+        item.hasChild === true ||
+        item.hasChild === 'true' ||
+        item.hasChild === '1',
+    };
+  });
+};
+
+// 加载分类树节点
+const loadCategoryNode = async (
+  node: any,
+  resolve: (data: InterfaceCategory[]) => void,
+) => {
+  console.log('loadCategoryNode调用:', node.level, node.data);
+
+  try {
+    // 如果是根节点
+    if (node.level === 0) {
+      loadingCategory.value = true;
+      const res = await getDicItemListByDicCode({
+        dicCode: 'interfaceCategory',
+        dicAttr: 'tree',
+        itemParentId: '0', // 使用字符串类型
+      } as DicInfoType & { itemParentId: string });
+
+      console.log('根节点API返回结果:', res);
+
+      if (Array.isArray(res)) {
+        const adaptedData = adaptDicItemToCategory(res);
+        console.log('转换后的数据:', adaptedData);
+        categoryTreeData.value = adaptedData;
+        resolve(adaptedData);
+      } else {
+        console.error('API返回的数据不是数组:', res);
+        resolve([]);
+      }
+      loadingCategory.value = false;
+    } else {
+      // 加载子节点
+      const res = await getDicItemListByDicCode({
+        dicCode: 'interfaceCategory',
+        dicAttr: 'tree',
+        itemParentId: node.data.id, // 使用节点ID，已经是字符串类型
+      } as DicInfoType & { itemParentId: string });
+
+      console.log(`节点${node.data.id}的API返回:`, res);
+
+      if (Array.isArray(res)) {
+        const children = adaptDicItemToCategory(res);
+        console.log(`节点${node.data.id}的子节点:`, children);
+        resolve(children);
+      } else {
+        console.log(`节点${node.data.id}没有子节点`);
+        resolve([]);
+      }
+    }
+  } catch (error) {
+    console.error('加载分类失败:', error);
+    resolve([]);
+  }
+};
+
+// 定义所有可能的步骤，每个步骤都有显示条件
+const allSteps = [
+  {
+    id: 'basic',
+    title: '基本信息',
+    icon: 'el-icon-document',
+    // 基本信息步骤总是显示
+    visible: () => true,
+  },
+  {
+    id: 'config',
+    title: '数据配置',
+    icon: 'el-icon-setting',
+    // 数据配置步骤总是显示
+    visible: () => true,
+  },
+  {
+    id: 'statistics',
+    title: '数量统计',
+    icon: 'el-icon-data-analysis',
+    // 数量统计步骤仅在SQL操作且动作为查询且开启分页时显示
+    visible: () =>
+      formData.value.type === DataInterfaceType.SQL_OPERATION &&
+      formData.value.action === DataInterfaceAction.QUERY &&
+      formData.value.hasPage === 1,
+  },
+  {
+    id: 'echo',
+    title: '数据回显',
+    icon: 'el-icon-refresh',
+    // 数据回显步骤仅在SQL操作且动作为查询且开启分页时显示
+    visible: () =>
+      formData.value.type === DataInterfaceType.SQL_OPERATION &&
+      formData.value.action === DataInterfaceAction.QUERY &&
+      formData.value.hasPage === 1,
+  },
+  {
+    id: 'processing',
+    title: '数据处理',
+    icon: 'el-icon-cpu',
+    // 数据处理步骤在SQL操作或API操作时显示
+    visible: () =>
+      formData.value.type === DataInterfaceType.SQL_OPERATION ||
+      formData.value.type === DataInterfaceType.API_OPERATION,
+  },
+];
+
+// 获取当前可见步骤
+const visibleSteps = computed(() => {
+  return allSteps.filter((step) => step.visible());
+});
+
+// 表单数据
+const formData = ref<any>({
+  id: '',
+  name: '',
+  code: '',
+  type: DataInterfaceType.STATIC_DATA,
+  sort: 1,
+  status: DataInterfaceStatus.ENABLED,
+  categoryId: '',
+  categoryName: '',
+  description: '',
+  action: DataInterfaceAction.QUERY,
+  hasPage: 0,
+  hasAuth: 0,
+  fieldJson: '[]',
+  parameterJson: '[]',
+  dataConfigJson: `{"staticData":"","sqlData":{"dbLinkId":"0","sql":""},"apiData":{"method":${RequestMethod.GET},"url":"","header":[],"query":[],"body":"","bodyType":0}}`,
+  dataJsJson: '',
+  dataCountJson: '',
+  dataEchoJson: '',
+});
+
+// 字段参数列表 (独立响应式对象，用于解决v-model问题)
+const fieldParams = ref<Field[]>([]);
+
+// 请求参数列表 (独立响应式对象，用于解决v-model问题)
+const requestParams = ref<Parameter[]>([]);
+
+// 监听参数数据同步到formData
+watch(
+  () => requestParams.value,
+  (val) => {
+    formData.value.parameterJson = JSON.stringify(val);
+  },
+  { deep: true },
+);
+
+// 监听字段数据同步到formData
+watch(
+  () => fieldParams.value,
+  (val) => {
+    formData.value.fieldJson = JSON.stringify(val);
+  },
+  { deep: true },
+);
+
+// 监听formData中的参数数据同步到独立响应式对象
+watch(
+  () => formData.value.parameterJson,
+  (val) => {
+    if (val && typeof val === 'string') {
+      try {
+        requestParams.value = JSON.parse(val);
+      } catch (e) {
+        console.error('解析参数JSON失败:', e);
+        requestParams.value = [];
+      }
+    } else {
+      requestParams.value = [];
+    }
+  },
+  { deep: true },
+);
+
+// 监听formData中的字段数据同步到独立响应式对象
+watch(
+  () => formData.value.fieldJson,
+  (val) => {
+    if (val && typeof val === 'string') {
+      try {
+        fieldParams.value = JSON.parse(val);
+      } catch (e) {
+        console.error('解析字段JSON失败:', e);
+        fieldParams.value = [];
+      }
+    } else {
+      fieldParams.value = [];
+    }
+  },
+  { deep: true },
+);
+
+// 监听分类ID变化，更新分类名称
+watch(
+  () => formData.value.categoryId,
+  (newVal) => {
+    if (newVal) {
+      // 递归查找分类名称
+      const findCategoryName = (
+        categories: InterfaceCategory[],
+        id: string,
+      ): string | null => {
+        for (const category of categories) {
+          // 使用严格比较，因为都是字符串类型
+          if (category.id === id) {
+            return category.categoryName;
+          }
+          if (category.children && category.children.length > 0) {
+            const name = findCategoryName(category.children, id);
+            if (name) return name;
+          }
+        }
+        return null;
+      };
+
+      const categoryName = findCategoryName(categoryTreeData.value, newVal);
+      if (categoryName) {
+        formData.value.categoryName = categoryName;
+        console.log('已更新分类名称:', categoryName);
+      } else {
+        console.log('未找到分类名称，ID:', newVal);
+      }
+    }
+  },
+);
+
+// 类型选项
+const typeOptions = [
+  { label: '静态数据', value: DataInterfaceType.STATIC_DATA },
+  { label: 'SQL操作', value: DataInterfaceType.SQL_OPERATION },
+  { label: 'API操作', value: DataInterfaceType.API_OPERATION },
+];
+
+// 动作选项
+const actionOptions = [
+  { label: '查询', value: DataInterfaceAction.QUERY },
+  { label: '增加', value: DataInterfaceAction.ADD },
+  { label: '修改', value: DataInterfaceAction.UPDATE },
+  { label: '删除', value: DataInterfaceAction.DELETE },
+];
+
+// 基本信息表单配置
+const basicFormItems = computed<FormItemConfig[]>(() => [
+  {
+    prop: 'name',
+    label: '名称',
+    type: 'input',
+    placeholder: '请输入名称',
+    props: {
+      maxlength: 20,
+      showWordLimit: true,
+    },
+    rules: [
+      { required: true, message: '请输入名称', trigger: ['blur', 'input'] },
+      {
+        max: 20,
+        message: '名称长度不能超过20个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'code',
+    label: '编码',
+    type: 'input',
+    placeholder: '请输入编码',
+    props: {
+      maxlength: 20,
+      showWordLimit: true,
+    },
+    rules: [
+      { required: true, message: '请输入编码', trigger: ['blur', 'input'] },
+      {
+        max: 20,
+        message: '编码长度不能超过20个字符',
+        trigger: ['blur', 'input'],
+      },
+    ],
+  },
+  {
+    prop: 'categoryId',
+    label: '分类',
+    slot: 'categoryId',
+    rules: [
+      { required: true, message: '请选择分类', trigger: ['blur', 'change'] },
+    ],
+  },
+  {
+    prop: 'type',
+    label: '类型',
+    type: 'radio',
+    options: typeOptions,
+    rules: [
+      { required: true, message: '请选择类型', trigger: ['blur', 'change'] },
+    ],
+  },
+  // 动作字段 - 仅在SQL操作类型时显示
+  {
+    prop: 'action',
+    label: '动作',
+    type: 'radio',
+    options: actionOptions,
+    condition: (values) => values.type === DataInterfaceType.SQL_OPERATION, // 条件显示
+  },
+  {
+    prop: 'sort',
+    label: '排序',
+    type: 'number',
+    placeholder: '1',
+    props: {
+      min: 1,
+      controls: true,
+      controlsPosition: 'right',
+      style: 'width: 100%',
+    },
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    type: 'switch',
+    props: {
+      activeValue: 1,
+      inactiveValue: 0,
+    },
+  },
+  // 分页字段 - 在SQL操作和API操作类型时显示
+  {
+    prop: 'hasPage',
+    label: '分页',
+    type: 'switch',
+    props: {
+      activeValue: 1,
+      inactiveValue: 0,
+    },
+    condition: (values) =>
+      values.type === DataInterfaceType.SQL_OPERATION &&
+      values.action === DataInterfaceAction.QUERY,
+  },
+  {
+    prop: 'hasAuth',
+    label: '鉴权',
+    type: 'switch',
+    props: {
+      activeValue: 1,
+      inactiveValue: 0,
+    },
+    slot: 'hasAuth',
+  },
+  {
+    prop: 'description',
+    label: '说明',
+    type: 'textarea',
+    placeholder: '请输入说明',
+    props: {
+      rows: 3,
+      maxlength: 100,
+      showWordLimit: true,
+    },
+  },
+]);
+
+// 判断是否显示内容区域
+const shouldShowContent = (stepId: string) => {
+  const index = visibleSteps.value.findIndex((step) => step.id === stepId);
+  return index === activeStep.value;
+};
+
+// 监听编辑数据变化
+watch(
+  () => props.editData,
+  (newVal) => {
+    if (newVal) {
+      // 复制编辑数据到表单
+      Object.keys(formData.value).forEach((key) => {
+        if (key in newVal) {
+          formData.value[key] = newVal[key];
+        }
+      });
+
+      // 解析JSON字符串
+      try {
+        if (
+          formData.value.fieldJson &&
+          typeof formData.value.fieldJson === 'string'
+        ) {
+          fieldParams.value = JSON.parse(formData.value.fieldJson);
+        } else {
+          fieldParams.value = [];
+        }
+
+        if (
+          formData.value.parameterJson &&
+          typeof formData.value.parameterJson === 'string'
+        ) {
+          requestParams.value = JSON.parse(formData.value.parameterJson);
+        } else {
+          requestParams.value = [];
+        }
+      } catch (e) {
+        console.error('解析JSON失败:', e);
+        fieldParams.value = [];
+        requestParams.value = [];
+      }
+
+      // 更新步骤
+      activeStep.value = 0;
+    } else {
+      // 保存当前hasAuth状态
+      const hasAuthValue = formData.value.hasAuth;
+
+      // 重置表单
+      formData.value = {
+        id: '',
+        name: '',
+        code: '',
+        type: DataInterfaceType.STATIC_DATA,
+        sort: 1,
+        status: 1,
+        categoryId: '',
+        categoryName: '',
+        description: '',
+        action: DataInterfaceAction.QUERY,
+        hasPage: 0,
+        hasAuth: hasAuthValue, // 保留当前的hasAuth值，而不是重置为0
+        fieldJson: '[]',
+        parameterJson: '[]',
+        dataConfigJson: `{"staticData":"","sqlData":{"dbLinkId":"0","sql":""},"apiData":{"method":${RequestMethod.GET},"url":"","header":[],"query":[],"body":"","bodyType":0}}`,
+        dataJsJson: '',
+        dataCountJson: '',
+        dataEchoJson: '',
+      };
+
+      // 重置独立响应式对象
+      fieldParams.value = [];
+      requestParams.value = [];
+
+      // 更新步骤
+      activeStep.value = 0;
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+// 类型变化时的处理逻辑
+watch(
+  () => formData.value.type,
+  () => {
+    // 重置activeStep到第一步
+    activeStep.value = 0;
+
+    // 根据类型设置默认属性
+    if (formData.value.type === DataInterfaceType.STATIC_DATA) {
+      formData.value.hasPage = 0;
+      // 静态数据可以设置鉴权，保持用户选择的状态
+    } else if (formData.value.type === DataInterfaceType.SQL_OPERATION) {
+      // SQL操作默认设置为查询
+      formData.value.action = DataInterfaceAction.QUERY;
+      // SQL操作下初始不启用分页，但保持用户选择的鉴权状态
+      formData.value.hasPage = 0;
+      // 移除对鉴权的重置，保持用户选择的状态
+    } else if (formData.value.type === DataInterfaceType.API_OPERATION) {
+      // API操作不支持分页
+      formData.value.hasPage = 0;
+      // 保持用户选择的鉴权状态
+    }
+  },
+);
+
+// 监听动作变化，更新步骤和分页状态
+watch(
+  () => formData.value.action,
+  (newVal) => {
+    // 当动作不是"查询"时，强制关闭分页
+    if (newVal !== DataInterfaceAction.QUERY && formData.value.hasPage === 1) {
+      formData.value.hasPage = 0;
+    }
+
+    // 更新步骤
+    activeStep.value = 0;
+  },
+);
+
+// 监听分页变化，更新步骤
+watch(
+  () => formData.value.hasPage,
+  () => {
+    activeStep.value = 0;
+  },
+);
+
+// 监听鉴权变化，更新步骤
+watch(
+  () => formData.value.hasAuth,
+  () => {
+    activeStep.value = 0;
+  },
+);
+
+// 下一步
+const nextStep = async () => {
+  if (!formRef.value) return;
+
+  try {
+    // 验证当前步骤表单
+    const isValid = await formRef.value.validate();
+
+    // 只有在验证通过时才进入下一步
+    if (isValid) {
+      if (activeStep.value < visibleSteps.value.length - 1) {
+        activeStep.value++;
+      }
+    } else {
+      // 验证失败，显示错误消息
+      // 抛出异常，使调用者能够捕获到验证失败的情况
+      throw new Error('表单验证失败');
+    }
+  } catch (error) {
+    // 捕获其他可能的错误
+    throw error; // 继续抛出错误，使调用者能够捕获
+  }
+};
+
+// 上一步
+const prevStep = () => {
+  if (activeStep.value > 0) {
+    activeStep.value--;
+  }
+};
+
+// 提交表单前处理数据
+const prepareFormData = () => {
+  // 确保categoryId存在，这是必填字段
+  if (!formData.value.categoryId) {
+    ElMessage.warning('请选择分类');
+    return false;
+  }
+
+  // 如果从树选择器中获取了分类ID，但没有分类名称，尝试从树数据中获取
+  if (formData.value.categoryId && !formData.value.categoryName) {
+    // 递归查找分类名称
+    const findCategoryName = (
+      categories: InterfaceCategory[],
+      id: string,
+    ): string | null => {
+      for (const category of categories) {
+        // 使用严格比较，因为都是字符串类型
+        if (category.id === id) {
+          return category.categoryName;
+        }
+        if (category.children && category.children.length > 0) {
+          const name = findCategoryName(category.children, id);
+          if (name) return name;
+        }
+      }
+      return null;
+    };
+
+    const categoryName = findCategoryName(
+      categoryTreeData.value,
+      formData.value.categoryId,
+    );
+    if (categoryName) {
+      formData.value.categoryName = categoryName;
+    } else {
+      // 如果找不到分类名称，设置一个默认值，避免提交失败
+      formData.value.categoryName = `分类${formData.value.categoryId}`;
+    }
+  }
+
+  // 返回处理后的表单数据
+  return { ...formData.value };
+};
+
+// 提交表单
+const handleSubmit = async () => {
+  if (!formRef.value) return false;
+
+  try {
+    loading.value = true;
+    await formRef.value.validate();
+
+    // 获取鉴权开关的当前DOM状态
+    const switchElements = document.querySelectorAll(
+      '.hasAuth-switch .el-switch__core',
+    );
+    let isAuthSwitchOn = false;
+
+    // 检查所有可能的鉴权开关元素
+    switchElements.forEach((el) => {
+      // 检查是否有active类或背景为绿色等指示开关打开的迹象
+      const style = window.getComputedStyle(el);
+      const bgColor = style.backgroundColor.toLowerCase();
+      const isGreenish =
+        bgColor.includes('green') || bgColor.includes('rgb(64, 158, 255)');
+      const hasActiveClass = el.classList.contains('is-checked');
+
+      if (hasActiveClass || isGreenish) {
+        isAuthSwitchOn = true;
+      }
+    });
+
+    // 如果UI中开关是开启状态，但数据是0，则修正数据
+    if (isAuthSwitchOn && formData.value.hasAuth === 0) {
+      formData.value.hasAuth = 1;
+    }
+
+    const processedData = prepareFormData();
+    if (!processedData) {
+      return false;
+    }
+
+    // 确保字段列表已同步
+    formData.value.fieldJson = JSON.stringify(fieldParams.value);
+
+    // 确保参数列表已同步
+    formData.value.parameterJson = JSON.stringify(requestParams.value);
+
+    // 最终检查 - 确保鉴权状态与UI一致
+    if (isAuthSwitchOn && formData.value.hasAuth === 0) {
+      formData.value.hasAuth = 1;
+    }
+
+    // 返回解包后的响应式对象
+    const result = { ...formData.value };
+    return result;
+  } catch (error) {
+    ElMessage.error('请检查表单数据');
+    return false;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 重置表单
+const resetForm = () => {
+  formRef.value?.resetFields();
+  activeStep.value = 0;
+};
+
+// 校验表单字段
+const validateField = (field: string) => {
+  formRef.value?.validateField(field);
+};
+
+// 暴露方法给父组件
+defineExpose({
+  handleSubmit,
+  resetForm,
+  formData,
+  nextStep,
+  prevStep,
+  activeStep,
+  validateField,
+  visibleSteps,
+  formRef,
+});
+
+// 处理SQL内容变更
+function handleSqlChange(val: string) {
+  // 更新dataConfigJson中的SQL内容
+  try {
+    const dataConfig = JSON.parse(formData.value.dataConfigJson || '{}');
+    if (!dataConfig.sqlData) {
+      dataConfig.sqlData = { dbLinkId: '0', sql: '' };
+    }
+    dataConfig.sqlData.sql = val;
+    formData.value.dataConfigJson = JSON.stringify(dataConfig);
+  } catch (e) {
+    console.error('解析dataConfigJson失败:', e);
+    // 创建新的dataConfigJson
+    const dataConfig = {
+      staticData: '',
+      sqlData: { dbLinkId: '0', sql: val },
+      apiData: {
+        method: RequestMethod.GET,
+        url: '',
+        header: [],
+        query: [],
+        body: '',
+        bodyType: 0,
+      },
+    };
+    formData.value.dataConfigJson = JSON.stringify(dataConfig);
+  }
+}
+
+// 处理静态数据变更
+function handleStaticDataChange(val: string) {
+  // 更新dataConfigJson中的静态数据
+  try {
+    const dataConfig = JSON.parse(formData.value.dataConfigJson || '{}');
+    dataConfig.staticData = val;
+    formData.value.dataConfigJson = JSON.stringify(dataConfig);
+  } catch (e) {
+    console.error('解析dataConfigJson失败:', e);
+    // 创建新的dataConfigJson
+    const dataConfig = {
+      staticData: val,
+      sqlData: { dbLinkId: '0', sql: '' },
+      apiData: {
+        method: RequestMethod.GET,
+        url: '',
+        header: [],
+        query: [],
+        body: '',
+        bodyType: 0,
+      },
+    };
+    formData.value.dataConfigJson = JSON.stringify(dataConfig);
+  }
+}
+
+// 处理API配置变更
+function handleApiConfigChange(val: ApiConfig) {
+  // 更新dataConfigJson中的API配置
+  try {
+    const dataConfig = JSON.parse(formData.value.dataConfigJson || '{}');
+    dataConfig.apiData = val;
+    formData.value.dataConfigJson = JSON.stringify(dataConfig);
+  } catch (e) {
+    console.error('解析dataConfigJson失败:', e);
+    // 创建新的dataConfigJson
+    const dataConfig = {
+      staticData: '',
+      sqlData: { dbLinkId: '0', sql: '' },
+      apiData: val,
+    };
+    formData.value.dataConfigJson = JSON.stringify(dataConfig);
+  }
+}
+
+// 处理数据处理代码变更
+const handleDataProcessingChange = (val: string) => {
+  formData.value.dataJsJson = val;
+};
+
+// 处理数量统计代码变更：改为通过 handleDataCountSqlChange 写入JSON结构
+
+// 处理数据回显代码变更
+const handleDataEchoChange = (val: string) => {
+  formData.value.dataEchoJson = val;
+};
+
+// 处理API数据处理代码变更
+const handleApiDataProcessingChange = (val: string) => {
+  formData.value.dataJsJson = val;
+};
+
+// （移除未使用的 getter：数据处理/数量统计/数据回显）
+
+// 获取静态数据值
+function getStaticDataValue() {
+  try {
+    const dataConfig = JSON.parse(formData.value.dataConfigJson || '{}');
+    return dataConfig.staticData || '';
+  } catch (e) {
+    console.error('解析dataConfigJson失败:', e);
+    return '';
+  }
+}
+
+// 获取SQL内容值
+function getSqlContentValue() {
+  try {
+    const dataConfig = JSON.parse(formData.value.dataConfigJson || '{}');
+    return dataConfig.sqlData?.sql || '';
+  } catch (e) {
+    console.error('解析dataConfigJson失败:', e);
+    return '';
+  }
+}
+
+// 获取数量统计SQL内容值（兼容纯字符串与JSON结构）
+function getDataCountSqlValue() {
+  const raw = formData.value.dataCountJson;
+  if (!raw) return '';
+  try {
+    const dataCount = JSON.parse(raw || '{}');
+    // 兼容 { sqlData: { sql } } 或 { sql }
+    return dataCount.sqlData?.sql ?? dataCount.sql ?? '';
+  } catch (e) {
+    // 不是JSON，视为纯SQL字符串（历史存量数据）
+    return raw as string;
+  }
+}
+
+// 获取API配置值
+function getApiConfigValue() {
+  try {
+    const dataConfig = JSON.parse(formData.value.dataConfigJson || '{}');
+    return (
+      dataConfig.apiData || {
+        method: RequestMethod.GET,
+        url: '',
+        header: [],
+        query: [],
+        body: '',
+        bodyType: 0,
+      }
+    );
+  } catch (e) {
+    console.error('解析dataConfigJson失败:', e);
+    return {
+      method: RequestMethod.GET,
+      url: '',
+      header: [],
+      query: [],
+      body: '',
+      bodyType: 0,
+    };
+  }
+}
+
+// 处理数量统计SQL内容变更（与 dataConfigJson 类似的拆分式写入）
+function handleDataCountSqlChange(val: string) {
+  try {
+    const dataCount = JSON.parse(formData.value.dataCountJson || '{}');
+    if (!dataCount.sqlData) {
+      dataCount.sqlData = { dbLinkId: '0', sql: '' };
+    }
+    dataCount.sqlData.sql = val;
+    formData.value.dataCountJson = JSON.stringify(dataCount);
+  } catch (e) {
+    // 构建新的JSON结构
+    const dataCount = { sqlData: { dbLinkId: '0', sql: val } };
+    formData.value.dataCountJson = JSON.stringify(dataCount);
+  }
+}
+
+// 处理分类选择变更
+const handleCategoryChange = (value: string) => {
+  console.log('分类选择变更:', value);
+  formData.value.categoryId = value || '';
+};
+</script>
+
+<template>
+  <div class="w-full">
+    <!-- 步骤条 -->
+    <el-steps :active="activeStep" finish-status="success" align-center class="mb-6">
+      <el-step
+        v-for="(step, index) in visibleSteps"
+        :key="index"
+        :title="step.title"
+      />
+    </el-steps>
+
+    <!-- 内容区域 - 基本信息 -->
+    <div v-show="shouldShowContent('basic')" class="step-content">
+      <Form
+        ref="formRef"
+        :items="basicFormItems"
+        v-model="formData"
+        :show-actions="false"
+        label-width="auto"
+      >
+        <!-- 自定义分类选择 -->
+        <template #categoryId="{ model }">
+          <el-tree-select
+            v-model="model.categoryId"
+            :data="categoryTreeData"
+            :props="{
+              label: 'categoryName',
+              children: 'children',
+              value: 'id',
+              isLeaf: (data: any) => data.hasChild === false,
+            }"
+            placeholder="请选择分类"
+            lazy
+            :load="loadCategoryNode"
+            check-strictly
+            default-expand-all
+            filterable
+            :show-arrow="false"
+            style="width: 100%"
+            @change="handleCategoryChange"
+          />
+        </template>
+        <!-- 自定义鉴权字段 -->
+        <template #hasAuth>
+          <div class="flex items-center">
+            <el-switch
+              v-model="formData.hasAuth"
+              :active-value="1"
+              :inactive-value="0"
+              class="hasAuth-switch"
+            />
+            <el-tooltip
+              content="开启后作为鉴权接口"
+              placement="top"
+              effect="dark"
+            >
+              <el-icon class="ml-1 cursor-help text-gray-400">
+                <InfoFilled />
+              </el-icon>
+            </el-tooltip>
+          </div>
+        </template>
+      </Form>
+    </div>
+
+    <!-- 内容区域 - 数据配置 -->
+    <div v-show="shouldShowContent('config')" class="step-content">
+      <!-- API数据配置组件 - 在API操作时显示 -->
+      <div
+        v-if="formData.type === DataInterfaceType.API_OPERATION"
+        class="content-height"
+      >
+        <ApiDataConfig
+          :value="getApiConfigValue()"
+          :pagination="formData.hasPage === 1"
+          :parameter-json="requestParams"
+          :field-json="fieldParams"
+          @change="handleApiConfigChange"
+          @parameter-change="(params: Parameter[]) => (requestParams = params)"
+          @field-change="(fields: Field[]) => (fieldParams = fields)"
+        />
+      </div>
+
+      <!-- SQL数据配置组件 - 在SQL操作时显示 -->
+      <div
+        v-else-if="formData.type === DataInterfaceType.SQL_OPERATION"
+        class="content-height"
+      >
+        <SqlDataConfig
+          :value="getSqlContentValue()"
+          :parameter-json="requestParams"
+          :field-json="fieldParams"
+          @change="handleSqlChange"
+          @parameter-change="(params: Parameter[]) => (requestParams = params)"
+          @field-change="(fields: Field[]) => (fieldParams = fields)"
+        />
+      </div>
+
+      <!-- 静态数据配置组件 - 在静态数据类型时显示 -->
+      <div v-else class="content-height">
+        <StaticDataConfig
+          :value="getStaticDataValue()"
+          :field-json="fieldParams"
+          @change="handleStaticDataChange"
+          @field-change="(fields: Field[]) => (fieldParams = fields)"
+        />
+      </div>
+    </div>
+
+    <!-- 内容区域 - 数量统计 -->
+    <div
+      v-show="shouldShowContent('statistics')"
+      class="step-content content-height"
+    >
+      <SqlDataStatistics
+        :model-value="getDataCountSqlValue()"
+        :parameter-json="requestParams"
+        :field-json="fieldParams"
+        @update:modelValue="handleDataCountSqlChange"
+        @parameter-change="(params: Parameter[]) => (requestParams = params)"
+        @field-change="(fields: Field[]) => (fieldParams = fields)"
+      />
+    </div>
+
+    <!-- 内容区域 - 数据回显 -->
+    <div v-show="shouldShowContent('echo')" class="step-content content-height">
+      <SqlDataDisplay
+        v-model="formData.dataEchoJson"
+        :parameter-json="requestParams"
+        :field-json="fieldParams"
+        @change="handleDataEchoChange"
+        @parameter-change="(params: Parameter[]) => (requestParams = params)"
+        @field-change="(fields: Field[]) => (fieldParams = fields)"
+      />
+    </div>
+
+    <!-- 内容区域 - 数据处理 -->
+    <div
+      v-show="shouldShowContent('processing')"
+      class="step-content content-height"
+    >
+      <!-- SQL操作的数据处理 -->
+      <div
+        v-if="formData.type === DataInterfaceType.SQL_OPERATION"
+        class="flex h-full flex-col overflow-hidden rounded-md border border-gray-200 dark:border-gray-700"
+      >
+        <div
+          class="flex h-10 items-center justify-between border-b border-gray-200 bg-gray-50 px-4 dark:border-gray-700 dark:bg-gray-800"
+        >
+          <div class="flex min-w-[200px] items-center">
+            <span
+              class="mr-3 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300"
+              >数据处理</span
+            >
+            <el-tooltip content="支持JavaScript数据处理函数" placement="top">
+              <div class="flex h-4 w-4 items-center justify-center">
+                <QuestionFilled
+                  class="cursor-help text-xs text-gray-500 dark:text-gray-400"
+                />
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+
+        <!-- 使用CodeEditor组件替换占位符 -->
+        <div class="flex h-full flex-1">
+          <CodeEditor
+            v-model="formData.dataJsJson"
+            language="javascript"
+            height="100%"
+            @change="handleDataProcessingChange"
+          />
+        </div>
+      </div>
+
+      <!-- API操作的数据处理 -->
+      <div
+        v-else-if="formData.type === DataInterfaceType.API_OPERATION"
+        class="flex h-full flex-col overflow-hidden rounded-md border border-gray-200 dark:border-gray-700"
+      >
+        <div
+          class="flex h-10 items-center justify-between border-b border-gray-200 bg-gray-50 px-4 dark:border-gray-700 dark:bg-gray-800"
+        >
+          <div class="flex min-w-[200px] items-center">
+            <span
+              class="mr-3 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300"
+              >API数据处理</span
+            >
+            <el-tooltip content="支持JavaScript数据处理函数" placement="top">
+              <div class="flex h-4 w-4 items-center justify-center">
+                <QuestionFilled
+                  class="cursor-help text-xs text-gray-500 dark:text-gray-400"
+                />
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+
+        <!-- 使用CodeEditor组件替换占位符 -->
+        <div class="flex h-full flex-1">
+          <CodeEditor
+            v-model="formData.dataJsJson"
+            language="javascript"
+            height="100%"
+            @change="handleApiDataProcessingChange"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 步骤导航按钮 -->
+    <div v-if="props.showStepActions" class="mt-6 flex justify-between">
+      <el-button @click="prevStep" :disabled="activeStep === 0"
+        >上一步</el-button
+      >
+      <el-button
+        type="primary"
+        @click="nextStep"
+        :disabled="activeStep === visibleSteps.length - 1"
+      >
+        下一步
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.font-mono {
+  font-family: monospace;
+}
+
+.step-content {
+  min-height: 300px;
+}
+
+.content-height {
+  height: calc(100vh - 250px); /* 视口高度减去头部和底部的高度 */
+  min-height: 400px; /* 设置最小高度，避免在小屏幕上内容区域过小 */
+}
+
+/* 步骤条样式 */
+.el-steps {
+  margin-bottom: 24px;
+}
+
+/* 当前进行中节点 - 蓝色实心图标 */
+:deep(.el-step__head.is-process .el-step__icon) {
+  background-color: #3b82f6;
+  border-color: #3b82f6;
+  color: #ffffff;
+}
+:deep(.el-step__main .el-step__title.is-process) {
+  color: #3b82f6 !important;
+  font-weight: unset;
+}
+
+/* 已完成节点 - 绿色镂空 */
+:deep(.el-step__head.is-success .el-step__icon) {
+  background-color: #ffffff;
+  border-color: #22c55e;
+  color: #22c55e;
+}
+:deep(.el-step__main .el-step__title.is-success) {
+  color: #22c55e !important;
+}
+
+/* 待进行节点 - 灰色 */
+:deep(.el-step__head.is-wait .el-step__icon) {
+  background-color: #ffffff;
+  border-color: #e5e7eb;
+  color: #6b7280;
+}
+:deep(.el-step__main .el-step__title.is-wait) {
+  color: #6b7280 !important;
+}
+</style>