新增了服务开发页面

src/views/dataService/serviceDevelopment/AddTypeModal.vue

+<template>
+  <BasicModal  width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import {ref, computed, unref, reactive} from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { addTypeFormSchema } from './api.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import {TreeData} from "@/views/dataStandards/basicStandards/basicStandardsData";
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const rowId = ref('');
+  const getTitle = computed(() => ('新增类别'));
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+  //初始化表单
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    baseColProps: { lg: 12, md: 24 },
+    schemas: addTypeFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 23,
+    },
+  });
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    resetFields();
+    setModalProps({ confirmLoading: false });
+    const isUpdate = data?.isUpdate;
+    if (unref(isUpdate)){
+      //修改
+      setFieldsValue({
+        ...data.record
+      })
+    }else {
+      //新增
+
+    }
+  });
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    createMessage.success('新增成功');
+    closeModal()
+  }
+
+</script>

src/views/dataService/serviceDevelopment/ApiTestDrawer.vue

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="50%"
+    @ok="handleSubmit"
+  >
+    <div>
+       <BasicTable @register="registerTable"/>
+    </div>
+    <div>
+      <a-button type="primary" style="margin-bottom: 20px" @click="testButton">测试</a-button>
+      <div style="margin-bottom: 10px;font-weight: bold;font-size: 16px">请求报文</div>
+      <CodeEditor v-model:value="value1" :mode="modeValue" style="margin-bottom: 20px"/>
+      <div style="margin-bottom: 10px;font-weight: bold;font-size: 16px">返回结果源码</div>
+      <CodeEditor v-model:value="value2" :mode="modeValue" />
+    </div>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  import { BasicTree, TreeItem } from '@/components/Tree';
+  import {useMessage} from "@/hooks/web/useMessage";
+  import { Divider } from 'ant-design-vue';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { CodeEditor, JsonPreview, MODE } from '@/components/CodeEditor';
+  import { apiDocColumns } from './api.data';
+  import { apiDocColumnsData } from './apiData';
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const modeValue = ref<MODE>(MODE.JSON);
+  const jsonData1 =
+    '{"API_CONF_TEST_DATA_VALUE":{"id":"32e71d1a05eb42cca38a55438561a6af"}}';
+  const jsonData2 =
+    {
+      "data": {
+        "valueSize": 20,
+        "columnNames": [
+          "status",
+          "create_time"
+        ],
+        "value": [
+          {
+            "create_time": "2023-07-19 17:15:23",
+            "status": "1"
+          }
+        ]
+      },
+      "code": 200,
+      "message": "success"
+    }
+  const value1 = ref('');
+  const value2 = ref('');
+  //初始化列表
+  const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
+    title: '请求参数',
+    api: async (params) => {
+      const response = {
+        pageNu: "1",
+        pageSize: "10",
+        pages: "1",
+        total: apiDocColumnsData.length,
+        code:'',
+        message:'',
+        data: [],
+      };
+      return { ...response,data: apiDocColumnsData };
+    },
+    columns:apiDocColumns,
+    useSearchForm: false,
+    showTableSetting: false,
+    showIndexColumn:false,
+    bordered: true,
+    scroll: { y: 300 },
+  });
+
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    setDrawerProps({ confirmLoading: false });
+
+  });
+
+  /**测试 按钮*/
+  function testButton() {
+    value1.value = jsonData1
+    value2.value = jsonData2
+  }
+
+  /**确定按钮*/
+  async function handleSubmit() {
+    closeDrawer()
+  }
+
+</script>

src/views/dataService/serviceDevelopment/BasicInfoDrawer.vue

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="30%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm"/>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { guideModeFormSchema2 } from './api.data';
+  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
+  import { BasicTree, TreeItem } from '@/components/Tree';
+  import { roleDetailApi,roleUpdataApi,addRoleApi } from "@/api/system/role/role";
+  import { getMenuSelect,getRoleMenuSelected } from "@/api/system/menu/menu";
+  import {encryptTwo} from "@/utils/jsencrypt";
+  import {useMessage} from "@/hooks/web/useMessage";
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const isUpdate = ref(true);
+  const roleId = ref('');
+  const getTitle = computed(() => ('基本信息'));
+  const treeData = ref<TreeItem[]>([]);
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 24 },
+    schemas: guideModeFormSchema2,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    resetFields();
+    setDrawerProps({ confirmLoading: false });
+
+  });
+
+
+  async function handleSubmit() {
+
+  }
+</script>

src/views/dataService/serviceDevelopment/TypeManageModal.vue

+<template>
+  <BasicModal  width="50%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="addTypeButton">新增</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'ant-design:form-outlined',
+                // label: '修改',
+                onClick: updateButton.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                // label: '删除',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: deleteButton.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+<!--    新增 弹窗-->
+     <AddTypeModal @register="registerAddTypeModal" @success="handleSuccess" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import {ref, computed, unref, reactive} from 'vue';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { BasicForm, useForm } from '@/components/Form';
+  import { addTypeFormSchema,typeManageTableColumn, versionSearchFormSchema } from './api.data';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { typeManageTableData } from "./apiData";
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { useModal } from '@/components/Modal';
+  import AddTypeModal from './AddTypeModal.vue'
+
+  defineOptions({ name: 'AccountModal' });
+
+  const emit = defineEmits(['success', 'register']);
+  const { createMessage } = useMessage();
+  const rowId = ref('');
+  const getTitle = computed(() => ('新增类别'));
+  const [registerAddTypeModal, { openModal: openAddTypeModal }] = useModal();
+  //获取接口数据并放在下拉框里（这里是打开了一个弹框）
+   const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
+    title: '类别列表',
+    api: async (params) => {
+      var data = [];
+      const response = {
+        pageNu: "1",
+        pageSize: "10",
+        pages: "1",
+        total: typeManageTableData.length,
+        code:'',
+        message:'',
+        data: [],
+      };
+      //过滤data中的数据，取出等于params.deptId的数据
+      return { ...response,data: typeManageTableData };
+    },
+    columns:typeManageTableColumn,
+    formConfig: {
+      labelWidth: 120,
+      schemas: versionSearchFormSchema,
+      autoSubmitOnEnter: true,
+    },
+    useSearchForm: true,
+    showTableSetting: false,
+    showIndexColumn:false,
+    bordered: true,
+    actionColumn: {
+      width: 150,
+      title: '操作',
+      dataIndex: 'action',
+    },
+  });
+
+
+  //初始化弹框
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false,showOkBtn:false,showCancelBtn:false });
+
+  });
+
+  /**修改 按钮*/
+  function updateButton(record) {
+    openAddTypeModal(true,{
+      record,
+      isUpdate:true
+    })
+  }
+
+  /**删除 按钮*/
+  function deleteButton() {
+    createMessage.success('删除成功!')
+  }
+
+
+
+  /**新增 按钮*/
+  function addTypeButton() {
+    openAddTypeModal(true,{
+      isUpdate:false
+    })
+  }
+
+  /**确定按钮*/
+  function handleSubmit() {
+    closeModal()
+  }
+
+</script>

src/views/dataService/serviceDevelopment/VersionModal.vue

@@ -33,7 +33,8 @@
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
-  import { searchFormSchema, versionColumns, versionData } from './apiData';
+  import { versionColumns,versionSearchFormSchema} from './api.data'
+  import { versionData } from './apiData';
   import { useGo } from '@/hooks/web/usePage';
   import { useRoute } from 'vue-router';
   import { useFilterStore } from '@/store/modules/filterData';
@@ -76,7 +77,7 @@ const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,get
   columns:versionColumns,
   formConfig: {
     labelWidth: 100,
-    schemas: searchFormSchema,
+    schemas: versionSearchFormSchema,
     autoSubmitOnEnter: true,
   },
   useSearchForm: true,

src/views/dataService/serviceDevelopment/apiData.ts

@@ -220,37 +220,127 @@ export const guideModelTableData6: any[] = [
     comment: '',
   },
 ];
-
-/**版本管理列表 表头*/
-export const versionColumns: BasicColumn[] = [
+/**版本管理列表 数据*/
+export const versionData: any[] = [
   {
-    title: '版本号',
-    dataIndex: 'versionId',
-    width: 150,
+    "versionId":"1",
+    "versionName":"V1",
+    "submitBy":"admin",
+    "submitDate":"2021/11/15 18:55:06",
+    "remarks":"STANDARD_BASIC添加发布的第一个版"
   },
   {
-    title: '修改人',
-    dataIndex: 'submitBy',
-    width: 150,
+    "versionId":"2",
+    "versionName":"V2",
+    "submitBy":"admin",
+    "submitDate":"2021/11/11 18:55:06",
+    "remarks":"STANDARD_BASIC添加发布的第二个版"
   },
   {
-    title: '更新时间',
-    dataIndex: 'submitDate',
-    width: 150,
+    "versionId":"3",
+    "versionName":"V3",
+    "submitBy":"admin",
+    "submitDate":"2021/11/11 18:55:06",
+    "remarks":"标准导入"
   },
 ];
-/**版本管理弹出框 搜索表头*/
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入版本名称',
-    },
-    colProps: { span: 7 },
+/**首页 新增表单树 数据*/
+export const treeDataListTwo = [
+  {
+    label: '默认工作组',
+    businessId: 1,
+    children: [
+      { label: '默认工作组01', businessId: 2 },
+      { label: '默认工作组02', businessId: 3 },
+      { label: '默认工作组03', businessId: 4 },
+      { label: '默认工作组04', businessId: 5 },
+    ],
+  },
+]
+/**类别管理 列表 数据*/
+export const typeManageTableData: any[] = [
+  {
+    typeId:'1',
+    typeName:'API类别1'
+  },
+  {
+    typeId:'2',
+    typeName:'API类别2'
+  },
+  {
+    typeId:'3',
+    typeName:'API类别3'
+  },
+];
+/**步骤1 sql数据*/
+export const step1SQLData: any[] = [
+  {
+    sql:
+    'SELECT name,birthday,sum(weight) as weight_total from yl_test.yl_table_01 WHERE id< #{id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows};\n' +
+    'SELECT name,birthday from yl_test.yl_table_01 WHERE id<#{id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows}',
+  }
+];
+/**步骤1 列表数据1*/
+export const step1TableData1: any[] = [
+  {
+    parameter:'id',
+    alias:'id',
+    sourceSql:'1',
+    sql:'SELECT name,birthday,sum(weight) as weight_total from yl_test.yl_table_01 WHERE id< #{id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows} SELECT name,birthday from yl_test.yl_table_01 WHERE id<${id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows}',
+    parameterType:'String',
+    comment:'',
+    defaultValue:'默认值'
+  },
+  {
+    parameter:'weight_total',
+    alias:'weight_total',
+    sourceSql:'1',
+    sql:'SELECT name,birthday,sum(weight) as weight_total from yl_test.yl_table_01 WHERE id< #{id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows} SELECT name,birthday from yl_test.yl_table_01 WHERE id<${id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows}',
+    parameterType:'String',
+    comment:'',
+    defaultValue:'默认值'
+  },
+  {
+    parameter:'offset',
+    alias:'offset',
+    sourceSql:'1',
+    sql:'SELECT name,birthday,sum(weight) as weight_total from yl_test.yl_table_01 WHERE id< #{id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows} SELECT name,birthday from yl_test.yl_table_01 WHERE id<${id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows}',
+    parameterType:'String',
+    comment:'',
+    defaultValue:'默认值'
+  }
+];
+/**步骤1 列表数据2*/
+export const step1TableData2: any[] = [
+  {
+    parameter:'id',
+    alias:'id',
+    sourceSql:'2',
+    sql:'SELECT name,birthday,sum(weight) as weight_total from yl_test.yl_table_01 WHERE id< #{id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows} SELECT name,birthday from yl_test.yl_table_01 WHERE id<${id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows}',
+    parameterType:'2',
+    parameterMappingFields:'1'
   },
 ];
+/**步骤1 列表数据3*/
+export const step1TableData3: any[] = [
+  {
+    column:'name',
+    alias:'name',
+    sourceSql:'1',
+    sql:'SELECT name,birthday,sum(weight) as weight_total from yl_test.yl_table_01 WHERE id< #{id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows} SELECT name,birthday from yl_test.yl_table_01 WHERE id<${id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows}',
+    comment:'',
+  },
+  {
+    column:'birthday',
+    alias:'birthday',
+    sourceSql:'1',
+    sql:'SELECT name,birthday,sum(weight) as weight_total from yl_test.yl_table_01 WHERE id< #{id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows} SELECT name,birthday from yl_test.yl_table_01 WHERE id<${id} GROUP BY name,birthday,id HAVING weight_total > #{weight_total} ORDER BY id limit #{offset},#{maxRows}',
+    comment:'',
+  },
+];
+
+
+
 export const fileData: any[] = [
     {
       "delFlag" : "0",
@@ -314,43 +404,6 @@ export const fileData: any[] = [
     },
 
 ];
-/**版本管理列表 数据*/
-export const versionData: any[] = [
-  {
-    "versionId":"1",
-    "versionName":"V1",
-    "submitBy":"admin",
-    "submitDate":"2021/11/15 18:55:06",
-    "remarks":"STANDARD_BASIC添加发布的第一个版"
-  },
-  {
-    "versionId":"2",
-    "versionName":"V2",
-    "submitBy":"admin",
-    "submitDate":"2021/11/11 18:55:06",
-    "remarks":"STANDARD_BASIC添加发布的第二个版"
-  },
-  {
-    "versionId":"3",
-    "versionName":"V3",
-    "submitBy":"admin",
-    "submitDate":"2021/11/11 18:55:06",
-    "remarks":"标准导入"
-  },
-];
-/**首页 新增表单树 数据*/
-export const treeDataListTwo = [
-  {
-    label: '默认工作组',
-    businessId: 1,
-    children: [
-      { label: '默认工作组01', businessId: 2 },
-      { label: '默认工作组02', businessId: 3 },
-      { label: '默认工作组03', businessId: 4 },
-      { label: '默认工作组04', businessId: 5 },
-    ],
-  },
-]
 /**编辑页 选择字典树 数据*/
 export const chooseDictoryTreeData = [
   {

src/views/dataService/serviceDevelopment/createDocument.vue

@@ -11,7 +11,6 @@
   import { useMessage } from '@/hooks/web/useMessage';
   import {TreeData} from "./apiData";
   import {createDocumentFormSchema} from './api.data';
-  import TreeTwo from './treeTwo.vue'
 
   defineOptions({ name: 'AccountModal' });
 

src/views/dataService/serviceDevelopment/guideModeApi.vue

@@ -114,6 +114,10 @@
           <Divider />
         </div>
     </div>
+<!--    基本信息 抽屉-->
+    <BasicInfoDrawer @register="registerDrawer" @success="handleSuccess" />
+<!--    api测试 抽屉-->
+    <ApiTestDrawer @register="registerApiTestDrawer" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -144,6 +148,9 @@
   import { useRoute,onBeforeRouteLeave } from 'vue-router';
   import { Divider } from 'ant-design-vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { useDrawer } from '@/components/Drawer';
+  import BasicInfoDrawer from './BasicInfoDrawer.vue'
+  import ApiTestDrawer from './ApiTestDrawer.vue'
 
   defineOptions({ name: 'Metadata' });
   const route = useRoute();
@@ -156,7 +163,8 @@
     { value: 'V3', label: 'V3 2022-10-25 14:52:50' },
   ]);
   const { createMessage } = useMessage();
-
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerApiTestDrawer, { openDrawer:openApiTestDrawer }] = useDrawer();
   const [registerGuideModeForm] = useForm({
     labelWidth: 100,
     schemas: guideModeFormSchema,
@@ -244,11 +252,6 @@
     pagination:false,
     bordered: true,
     scroll: { y: 300 },
-    actionColumn: {
-      width: 100,
-      title: '操作',
-      dataIndex: 'action',
-    },
   });
   const [registerTable4] = useTable({
     title: '返回参数',
@@ -353,7 +356,9 @@
 
   /**基本信息*/
   function basicInfoButton() {
+    openDrawer(true, {
 
+    });
   }
 
   /**数据预览*/
@@ -363,7 +368,7 @@
 
   /**API测试*/
   function apiTestButton() {
-
+    openApiTestDrawer(true,{})
   }
 
   /**发布*/

src/views/dataService/serviceDevelopment/index.vue

 <template>
   <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
-    <BasicStandardsTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
+    <ApiTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
     <BasicTable @register="registerTable" class="w-3/4 xl:w-4/5" :searchInfo="searchInfo">
       <template #toolbar>
         <a-button type="primary" @click="typeManageButton">类别管理</a-button>
-        <a-button type="primary" @click="exportButton">导出</a-button>
+        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys<=0" @click="exportButton">导出</a-button>
         <a-button type="primary" @click="importButton">导入</a-button>
-        <a-button type="primary" @click="copyButton">复制到</a-button>
-        <a-button type="primary" @click="MoveButton">移动</a-button>
+        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys<=0" @click="copyButton">复制到</a-button>
+        <a-button type="primary" :disabled="getRowSelection().selectedRowKeys<=0" @click="MoveButton">移动</a-button>
         <a-button type="primary" @click="createDocumentButton">新建文件夹</a-button>
         <a-button type="primary" @click="createAPIButton">新建API</a-button>
       </template>
@@ -79,13 +79,15 @@
     <ImportModal @register="registerImportModal" @success="handleSuccess" />
 <!--    版本发布申请 弹窗-->
     <PublishApplicationModal @register="registerPublishApplicationModal" @success="handleSuccess" />
+<!--    类别管理 弹窗-->
+    <TypeManageModal @register="registerTypeManageModal" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
   import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { PageWrapper } from '@/components/Page';
-  import BasicStandardsTree from './ApiTree.vue';
+  import ApiTree from './ApiTree.vue';
   import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
   import CreateDocument from './createDocument.vue';
@@ -103,11 +105,13 @@
   import {downloadByData} from "@/utils/file/download";
   import ImportModal from './ImportModal.vue'
   import PublishApplicationModal from './PublishApplicationModal.vue'
+  import TypeManageModal from './TypeManageModal.vue'
 
   defineOptions({ name: 'AccountManagement' });
   const { createMessage, createConfirm } = useMessage();
   const route = useRoute();
   const go = useGo();
+  const [registerTypeManageModal, { openModal: openTypeManageModal }] = useModal();
   const [registerPublishApplicationModal, { openModal: openPublishApplicationModal }] = useModal();
   const [registerImportModal, { openModal: openImportModal }] = useModal();
   const [registerVersionModal, { openModal: openVersionModal }] = useModal();
@@ -168,6 +172,14 @@
     },
   });
 
+
+  /**类别管理 按钮*/
+  function typeManageButton() {
+    openTypeManageModal(true, {
+
+    });
+  }
+
   /**版本管理 按钮*/
   function versionButton() {
     openVersionModal(true, {

src/views/dataService/serviceDevelopment/sqlModeApi.vue

 <template>
-  <PageWrapper title="SQL模式" contentFullHeight contentBackground>
-    <div>
-       <BasicTable @register="registerTable"/>
+  <PageWrapper title="SQL模式" class="content-padding" contentBackground @back="goBack">
+    <div style="display: flex; justify-content: flex-end;margin-bottom: 10px">
+      <a-button type="primary" @click="basicInfoButton" style="margin-right: 10px">基本信息</a-button>
+      <a-button type="primary" @click="dataPreviewButton" style="margin-right: 10px">数据预览</a-button>
+      <a-button type="primary" @click="apiTestButton" style="margin-right: 10px">API测试</a-button>
+      <a-button type="primary" @click="publishButton" style="margin-right: 10px">发布</a-button>
+      <a-button type="primary" @click="saveButton" style="margin-right: 10px">保存</a-button>
     </div>
-    <div>
-      <a-button type="primary" style="margin-bottom: 20px" @click="testButton">测试</a-button>
-      <div style="margin-bottom: 10px;font-weight: bold;font-size: 16px">请求报文</div>
-      <CodeEditor v-model:value="value1" :mode="modeValue" style="margin-bottom: 20px"/>
-      <div style="margin-bottom: 10px;font-weight: bold;font-size: 16px">返回结果源码</div>
-      <CodeEditor v-model:value="value2" :mode="modeValue" />
+    <div class="step-form-form">
+      <Steps :current="current">
+        <Steps.Step title="原始参数配置" />
+        <Steps.Step title="请求参数处理" />
+        <Steps.Step title="返回参数处理" />
+      </Steps>
     </div>
+    <Step1 @next="handleStep1Next" v-show="current === 0" />
+    <Step2 @prev="handleStepPrev" @next="handleStep1Next" v-show="current === 1"/>
+    <Step3 @prev="handleStepPrev"  v-show="current === 2"/>
   </PageWrapper>
 </template>
+
 <script lang="ts" setup>
+  import { reactive, ref } from 'vue';
   import { PageWrapper } from '@/components/Page';
-  import { Divider } from 'ant-design-vue';
-  import {ref, computed, unref, reactive} from 'vue';
-  import { BasicModal, useModalInner } from '@/components/Modal';
-  import { apiDocColumns } from './api.data';
-  import { apiDocColumnsData } from './apiData';
-  import { useMessage } from '@/hooks/web/useMessage';
-  import { BasicTable, useTable, TableAction } from '@/components/Table';
-  import { CodeEditor, JsonPreview, MODE } from '@/components/CodeEditor';
-  defineOptions({ name: 'AccountModal' });
-
-  const emit = defineEmits(['success', 'register']);
-  const { createMessage } = useMessage();
-  const modeValue = ref<MODE>(MODE.JSON);
-  const jsonData1 =
-    '{"API_CONF_TEST_DATA_VALUE":{"id":"32e71d1a05eb42cca38a55438561a6af"}}';
-  const jsonData2 =
-    {
-      "data": {
-        "valueSize": 20,
-        "columnNames": [
-          "status",
-          "create_time"
-        ],
-        "value": [
-          {
-            "create_time": "2023-07-19 17:15:23",
-            "status": "1"
-          }
-        ]
-      },
-      "code": 200,
-      "message": "success"
-    }
-  const value1 = ref('');
-  const value2 = ref('');
-  //初始化列表
-  const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
-    title: '请求参数',
-    api: async (params) => {
-      const response = {
-        pageNu: "1",
-        pageSize: "10",
-        pages: "1",
-        total: apiDocColumnsData.length,
-        code:'',
-        message:'',
-        data: [],
-      };
-      return { ...response,data: apiDocColumnsData };
-    },
-    columns:apiDocColumns,
-    useSearchForm: false,
-    showTableSetting: false,
-    showIndexColumn:false,
-    bordered: true,
-    scroll: { y: 300 },
-  });
+  import { Steps } from 'ant-design-vue';
+  import Step1 from './sqlModeStep1.vue';
+  import Step2 from './sqlModeStep2.vue';
+  import Step3 from './sqlModeStep3.vue';
+  import { useGo } from '@/hooks/web/usePage';
 
-  //初始化弹框
-  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-    setModalProps({ confirmLoading: false,showCancelBtn:false,showOkBtn:false });
+  defineOptions({ name: 'AccountDetail' });
 
-  });
+  const current = ref(0);
+  const go = useGo();
 
-   /**测试 按钮*/
-  function testButton() {
-    value1.value = jsonData1
-    value2.value = jsonData2
+  function handleStep1Next(step1Values: any) {
+    current.value++;
   }
 
-  /**确定按钮*/
-  async function handleSubmit() {
-    closeModal()
+  function handleStepPrev() {
+    current.value--;
+  }
+  // 页面左侧点击返回链接时的操作
+  function goBack() {
+    // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
+    go('/kinship/kinshipParse/index');
   }
-
 </script>
+<style lang="less" scoped>
+  .step-form-content {
+    padding: 24px;
+    background-color: @component-background;
+  }
+
+  .step-form-form {
+    width: 750px;
+    margin: 0 auto;
+  }
+</style>

src/views/dataService/serviceDevelopment/sqlModeStep1.vue

+<template>
+  <PageWrapper contentClass="content-padding">
+    <div style="display: flex;justify-content: space-between;margin-top: 10px;margin-bottom: 10px">
+      <div>
+        数据源&nbsp;&nbsp;<Select
+          width="60%"
+          v-model:value="optionValue"
+          show-search
+          placeholder="input search text"
+          :options="options"
+          @search="handleSearch"
+        />
+      </div>
+      <div>
+        <a-button type="primary" @click="">元数据预览</a-button>
+      </div>
+    </div>
+    <div>
+      <Alert message="请求参数以 #{参数} 在sql中占位，行权限参数以 {参数} 在SQL中占位； SQL示例： select name,age from t_user where sex = #{sex} and deleted = #{deleted} and organid = {organid} limit #{offset},#{maxRows}" show-icon />
+    </div>
+    <div class="editor">
+      <CodeEditor v-model:value="sql" />
+    </div>
+    <div style="display: flex; justify-content: flex-start;">
+      <a-button type="primary" @click="" style="margin-right: 10px">解析</a-button>
+      <a-button type="primary" @click="" style="margin-right: 10px">SQL设置</a-button>
+      <a-button type="primary" @click="" style="margin-right: 10px">从SQL文件获取SQL</a-button>
+    </div>
+    <div class="w-full">
+      <Tabs defaultActiveKey="原始入参" @change="handleChangeTab">
+        <TabPane tab="原始入参" key="原始入参">
+           <BasicTable @register="registerTable1" />
+        </TabPane>
+        <TabPane tab="行权限参数" key="行权限参数">
+           <BasicTable @register="registerTable2" />
+        </TabPane>
+        <TabPane tab="原始出参" key="原始出参">
+          <BasicTable @register="registerTable3">
+            <template #toolbar>
+              <a-button type="primary" @click="addParameterButton">添加参数</a-button>
+            </template>
+          </BasicTable>
+        </TabPane>
+      </Tabs>
+    </div>
+    <div style="display:flex;justify-content: flex-end">
+      <a-button style="margin-top: 20px" type="primary" @click="customSubmitFunc">下一步</a-button>
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted } from 'vue';
+  import { PageWrapper } from '@/components/Page';
+  import { Card, Tabs, TabPane } from 'ant-design-vue';
+  import { BasicForm, FormSchema, useForm } from '@/components/Form';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { useTable } from '@/components/Table';
+  import { useModal } from '@/components/Modal';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import CodeEditor from "@/components/CodeEditor/src/CodeEditor.vue";
+  import {step1TableColumns1,step1TableColumns2,step1TableColumns3} from './api.data'
+  import {step1SQLData,step1TableData1,step1TableData2,step1TableData3} from './apiData'
+  import { Alert, Space } from 'ant-design-vue';
+  import { Select } from 'ant-design-vue';
+
+  const [registerRunModal, { openModal: openRunModal }] = useModal();
+  const [registerSelectDatasourceModal, { openModal: openSelectDatasourceModal }] = useModal();
+  const businessId = ref();
+  const emit = defineEmits(['next']);
+  const sql = ref(step1SQLData[0].sql);
+  const options = ref([
+    {
+      label: 'mysql-36',
+      value: '1'
+    },
+    {
+      label: 'mysql2',
+      value: '2'
+    },
+  ])
+  const optionValue = ref('')
+  const { createMessage, createConfirm } = useMessage();
+  const [registerTable1] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: step1TableData1.length,
+        code: '',
+        message: '',
+        data: step1TableData1,
+      };
+      return { ...response };
+    },
+    rowKey: 'key',
+    columns:step1TableColumns1,
+    showIndexColumn: false,
+    showTableSetting: false,
+    scroll: { y: 300 },
+  });
+  const [registerTable2] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: step1TableData2.length,
+        code: '',
+        message: '',
+        data: step1TableData2,
+      };
+      return { ...response };
+    },
+    rowKey: 'key',
+    columns:step1TableColumns2,
+    showIndexColumn: false,
+    showTableSetting: false,
+    scroll: { y: 300 },
+  });
+  const [registerTable3] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: step1TableData3.length,
+        code: '',
+        message: '',
+        data: step1TableData3,
+      };
+      return { ...response };
+    },
+    rowKey: 'key',
+    columns:step1TableColumns3,
+    showIndexColumn: false,
+    showTableSetting: false,
+    scroll: { y: 300 },
+  });
+
+  function handleChangeTab(key: string) {
+    // 处理标签页切换逻辑...
+  }
+
+  function customSubmitFunc() {
+    try {
+      emit('next', '');
+    } catch (error) {
+      //
+    }
+  }
+
+  /**初始化*/
+  onMounted(() => {
+    optionValue.value = '1'
+  });
+</script>
+<style scoped>
+  .sql-editor {
+    font-family: Arial, sans-serif;
+  }
+  .navbar {
+    margin-bottom: 20px;
+  }
+  .container {
+    max-width: 800px;
+  }
+  pre {
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+  }
+  .toolbar {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    background-color: white;
+    margin-top: 10px;
+    padding: 0 16px;
+  }
+
+  .tools {
+    display: flex;
+    align-items: center;
+  }
+
+  .tools label {
+    margin-right: 20px;
+    font-size: 18px;
+  }
+
+  .editor {
+    background-color: white;
+    height: 300px;
+    border: 1px solid #d9d9d9;
+    padding: 16px;
+    margin-bottom: 8px;
+  }
+
+  .editor textarea {
+    width: 100%;
+    height: 100%;
+    border: none;
+    outline: none;
+    font-size: 16px;
+    resize: none;
+  }
+</style>

src/views/dataService/serviceDevelopment/sqlModeStep2.vue

+<template>
+  <div class="step1">
+     <div style="display: flex;justify-content: space-between;margin-top: 10px;margin-bottom: 10px">
+      <div>
+        数据源&nbsp;&nbsp;<Select
+          width="60%"
+          v-model:value="optionValue"
+          show-search
+          placeholder="input search text"
+          :options="options"
+          @search="handleSearch"
+        />
+      </div>
+    </div>
+    <div style="display: flex;justify-content: flex-end">
+      <a-button style="margin-right: 20px" type="primary" @click="customResetFunc">上一步</a-button>
+      <a-button style="margin-right: 10px" type="primary" @click="customSubmitFunc">下一步</a-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form';
+  import { Description } from '@/components/Description';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import {  } from './api.data';
+  import { ref, reactive, onMounted } from 'vue';
+  import { Select } from 'ant-design-vue';
+
+  const { createMessage } = useMessage();
+  const emit = defineEmits(['next']);
+  const optionValue = ref('')
+  const options = ref([
+    {
+      label: 'mysql-36',
+      value: '1'
+    },
+    {
+      label: 'mysql2',
+      value: '2'
+    },
+  ])
+
+  function customSubmitFunc() {
+    try {
+      emit('next', '');
+    } catch (error) {
+
+    }
+  }
+
+  function customResetFunc() {
+    emit('prev');
+  }
+
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/dataService/serviceDevelopment/sqlModeStep3.vue

+<template>
+  <div class="step1">
+    333
+     <a-button style="margin-right: 20px" type="primary" @click="customResetFunc">上一步</a-button>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '@/components/Form';
+  import { Description } from '@/components/Description';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import {  } from './api.data';
+
+
+  const { createMessage } = useMessage();
+  const emit = defineEmits(['next']);
+
+  function customSubmitFunc() {
+    try {
+      emit('next', '');
+    } catch (error) {
+
+    }
+  }
+
+  function customResetFunc() {
+    emit('prev');
+  }
+
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/dataService/serviceDevelopment/treeTwo.vue

-<template>
-  <div class="m-4 mr-0 overflow-hidden bg-white">
-    <BasicTree
-      title="工作组"
-      ref="treeRef"
-      toolbar
-      search
-      treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
-      :clickRowToExpand="true"
-      :checkable="true"
-      :defaultExpandAll="true"
-      :treeData="treeData"
-      :fieldNames="{ key: 'businessId', title: 'label' }"
-      @select="handleSelect"
-    />
-  </div>
-</template>
-<script lang="ts" setup>
-import {nextTick, onMounted, ref, unref} from 'vue';
-  import {BasicTree, TreeActionType, TreeItem} from '@/components/Tree';
-  import { getDeptList } from '@/api/system/dept/dept';
-  import {Nullable} from "packages/types/src/index";
-  import {treeDataListTwo} from "./apiData";
-  defineOptions({ name: 'DeptTree' });
-
-  const emit = defineEmits(['select']);
-
-  const treeData = ref<TreeItem[]>([]);
-  const treeRef = ref<Nullable<TreeActionType>>(null);
-
-
-async function fetch() {
-    treeData.value = treeDataListTwo
-  await nextTick(() => {
-    getTree().expandAll(true)
-  })
-  }
-function getTree() {
-  const tree = unref(treeRef);
-  if (!tree) {
-    throw new Error('tree is null!');
-  }
-  return tree;
-}
-
-
-  function handleSelect(keys) {
-    emit('select', keys[0]);
-  }
-
-  onMounted(() => {
-    fetch();
-  });
-</script>
-<style lang="scss" scoped>
-.bg-white{
-  width: 97%;
-}
-::v-deep(.vben-tree){
-  background-color:  #E8ECF7!important;
-}
-</style>