xiaodou-ai-admin/src/pages/schedule/APICenter/index.vue

<template>
<a-card title="API服务中心" >
  <a-row>
    <a-col>
      <a-card title="分组" ></a-card>
    </a-col>
    <a-col>
      <a-row>
        <a-col>
          <a-space>
            <a-button>
              <a-input-search
                v-model:value="queryState.searchValue"
                @search="getAPiList"
              >
                <template #addonBefore>
                  <select-tsx
                    :request="async () => await searchKeys"
                    v-model:value="queryState.searchKey"
                  />
                </template>
              </a-input-search>
            </a-button>
          </a-space>
        </a-col>
        <a-col>
          <a-space>
            <a-button>新建API</a-button>
            <a-button>批量导出</a-button>
            <a-button>删除</a-button>
            <a-button>批量删除</a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</a-card>

<modal-pro
  :open="state.visible"
  height="300px"
  style="height: 300px"
  @cencal="state.visible = false"
  @ok="ok"
>
  <a-form  :labelCol="{span: 6}" :wrapperCol="{span: 14}" >
    <info-accordion title="API" >
      <a-row>
        <a-col>
          <a-form-item label="API标题" v-bind="validateInfos.serviceName"  >
            <a-input allowClear v-model:value="apiState.serviceName" />
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="API标识" v-bind="validateInfos.serviceId"  >
            <a-input allowClear v-model:value="apiState.serviceId" />
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="API说明" v-bind="validateInfos.serviceDesc"  >
            <a-input allowClear v-model:value="apiState.serviceDesc" />
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="请求方法" v-bind="validateInfos.requestMethod"  >
            <select-tsx :request="async () => await methodKeys"  v-model:value="apiState.requestMethod" />
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="API类型" v-bind="validateInfos.serviceType"  >
            <a-radio-group v-model:value="apiState.serviceType" button-style="solid">
              <a-radio-button :value="11">API</a-radio-button>
              <a-radio-button :value="12">服务编排</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item label="请求TOKEN" v-bind="validateInfos.permanentToken"  >
            <a-input v-model:value="apiState.permanentToken" />
          </a-form-item>
        </a-col>
      </a-row>
    </info-accordion>
    <info-accordion title="基本信息" v-if="apiState.serviceType === 11">

    </info-accordion>
    <info-accordion title="节点配置" >

    </info-accordion>
    </a-form>

</modal-pro>
</template>

<script setup  lang="ts">
import { reactive } from 'vue'
import { SelectTsx } from '@/components/MicroComponents/index'
import InfoAccordion from '@/components/InfoAccordion/index'
import { Form } from 'ant-design-vue'

const searchKeys = [
  {
    name: '标识',
    key: '',
    value: ''
  },
  {
    name: 'API标题',
    key: '',
    value: ''
  }
]

const methodKeys = [
  {
    name: 'get',
    key: 'GET',
    value: 'GET'
  },
  {
    name: 'post',
    key: 'POST',
    value: 'POST'
  }
]

const defaultApiData = {
  serviceName: '',
  serviceId: '',
  serviceDesc: '',
  requestMethod: '',
  permanentToken: '',
  groupKey: '',
  serviceType: 11,
  sourceName: '',
  targetName: '',
  title: '',
  url: '',
  method: 'GET',
  contentType: 'JSON',
  retry: 0,
  authType: 'NONE',
  basicUsername: '',
  basicPassword: '',
  jwtMethod: 'HS256',
  jwtKey: '',
  enableCustomInput: false,
  customInputMerge: false,
  inputMap: [],
  enableCustomQuery: false,
  customQueryMerge: false,
  queryMap: [],
  enableCustomHeader: false,
  customHeaderMerge: false,
  headerMap: [],
  isDownload: false,
  transformMerge: false,
  enableCustomOutput: false,
  outputTransform: [],
  enableResponseAdaptor: false,
  responseAdaptor: `// 支持ES6，
 // 仅支持原生js, 不支持导入第三方包
 // state: 全局根变量
 // js 代码里面每一行结束 要么添加换行符 要么添加 ;
  // 外部变量中的数组需要经过JSON.parse()处理，才可使用Map等方法，代码中自定义数组不需要JSON.parse()
 return responseData;`,
  enableCustomCa: false,
  httpsKey: '',
  httpsCert: '',
  reqParam: [],
  respParam: []
}

const queryState = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  searchKey: '',
  searchValue: ''
})

const state = reactive({
  loading: false,
  visible: false,
  dataSource: []
})

const apiState = reactive({ ...defaultApiData })

const useForm = Form.useForm

const { resetFields, validate, validateInfos } = useForm(apiState, reactive({

}))

const ok = () => {

}

const getAPiList = () => {

}

</script>

<style>
</style>