mirror of
https://github.com/dataease/dataease.git
synced 2025-02-24 11:32:57 +08:00
feat(数据源): 分页配置
This commit is contained in:
dataeaseShu
ulleo
parent
6e77aea4c1
commit
e6f3cffec4
@ -67,6 +67,27 @@ export default {
|
||||
template_center: 'Template center',
|
||||
org_center: 'Organization management center'
|
||||
},
|
||||
api_pagination: {
|
||||
paging_ettings: 'Paging Settings',
|
||||
parameter_name: 'Parameter name',
|
||||
built_in_parameter_name: 'Built-in parameter name',
|
||||
request_parameter_name: 'Request parameter name',
|
||||
parameter_default_value: 'Parameter default value',
|
||||
parsing_path: 'Parsing path',
|
||||
total_number: 'Total number',
|
||||
total_number_de: 'Total number de',
|
||||
number_of_pages: 'Total number of pages',
|
||||
number__size: 'Page number + size',
|
||||
cursor__size: 'Cursor + size',
|
||||
page_number: 'Page number',
|
||||
pagination_size: 'Pagination size',
|
||||
cursor: 'Cursor',
|
||||
pagination_method: 'Pagination method',
|
||||
response: 'Response',
|
||||
please_enter_jsonpath: 'Please enter JsonPath',
|
||||
enter_parameter_name: 'Please enter parameter name',
|
||||
enter_default_value: 'Please enter default value'
|
||||
},
|
||||
operate_log: {
|
||||
name: 'Operation log',
|
||||
search_by_operate_info: 'Search by operation details',
|
||||
|
||||
@ -67,6 +67,27 @@ export default {
|
||||
template_center: '模板中心',
|
||||
org_center: '組織管理中心'
|
||||
},
|
||||
api_pagination: {
|
||||
paging_ettings: '分頁設定',
|
||||
parameter_name: '參數名',
|
||||
built_in_parameter_name: '內建參數名',
|
||||
request_parameter_name: '請求參數名',
|
||||
parameter_default_value: '參數預設值',
|
||||
parsing_path: '解析路徑',
|
||||
total_number: '總數',
|
||||
total_number_de: '總數量',
|
||||
number_of_pages: '總頁數',
|
||||
number_plus_size: '頁碼+大小',
|
||||
cursor_plus_size: '遊標+大小',
|
||||
page_number: '頁碼',
|
||||
pagination_size: '分頁大小',
|
||||
cursor: '遊標',
|
||||
pagination_method: '分頁方式',
|
||||
response: '回應',
|
||||
please_enter_jsonpath: '請輸入 JsonPath',
|
||||
enter_parameter_name: '請輸入參數名稱',
|
||||
enter_default_value: '請輸入預設值'
|
||||
},
|
||||
operate_log: {
|
||||
name: '操作日誌',
|
||||
search_by_operate_info: '透過操作詳情搜尋',
|
||||
|
||||
@ -68,6 +68,27 @@ export default {
|
||||
template_center: '模板中心',
|
||||
org_center: '组织管理中心'
|
||||
},
|
||||
api_pagination: {
|
||||
paging_ettings: '分页设置',
|
||||
parameter_name: '参数名',
|
||||
built_in_parameter_name: '内置参数名',
|
||||
request_parameter_name: '请求参数名',
|
||||
parameter_default_value: '参数默认值',
|
||||
parsing_path: '解析路径',
|
||||
total_number: '总数',
|
||||
total_number_de: '总数量',
|
||||
number_of_pages: '总页数',
|
||||
number__size: '页码+大小',
|
||||
cursor__size: '游标+大小',
|
||||
page_number: '页码',
|
||||
pagination_size: '分页大小',
|
||||
cursor: '游标',
|
||||
pagination_method: '分页方式',
|
||||
response: '响应',
|
||||
please_enter_jsonpath: '请输入 JsonPath',
|
||||
enter_parameter_name: '请输入参数名称',
|
||||
enter_default_value: '请输入默认值'
|
||||
},
|
||||
operate_log: {
|
||||
name: '操作日志',
|
||||
search_by_operate_info: '通过操作详情搜索',
|
||||
|
||||
@ -3,6 +3,7 @@ import { ref, watch, onBeforeMount, PropType, toRefs } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import ApiKeyValue from './ApiKeyValue.vue'
|
||||
import ApiBody from './ApiBody.vue'
|
||||
import Pagination from './Pagination.vue'
|
||||
import ApiVariable from './ApiVariable.vue'
|
||||
import ApiAuthConfig from './ApiAuthConfig.vue'
|
||||
import { Body } from './ApiTestModel.js'
|
||||
@ -191,6 +192,9 @@ const emits = defineEmits(['changeId'])
|
||||
</el-tooltip>
|
||||
<api-auth-config :request="apiRequest" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane key="pagination" :label="t('api_pagination.paging_ettings')" name="pagination">
|
||||
<Pagination />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -0,0 +1,174 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
const numberToken = ref('empty')
|
||||
const options = [
|
||||
{
|
||||
value: 'number',
|
||||
label: t('api_pagination.number__size')
|
||||
},
|
||||
{
|
||||
value: 'token',
|
||||
label: t('api_pagination.cursor__size')
|
||||
},
|
||||
{
|
||||
value: 'empty',
|
||||
label: t('chart.line_symbol_none')
|
||||
}
|
||||
]
|
||||
|
||||
const requestData = ref([
|
||||
{
|
||||
parameterName: t('api_pagination.page_number'),
|
||||
builtInParameterName: '${pageToken}',
|
||||
requestParameterName: '',
|
||||
parameterDefaultValue: ''
|
||||
},
|
||||
{
|
||||
parameterName: t('api_pagination.pagination_size'),
|
||||
builtInParameterName: '${pageSize}',
|
||||
requestParameterName: '',
|
||||
parameterDefaultValue: ''
|
||||
}
|
||||
])
|
||||
|
||||
const defaultPathArr = [
|
||||
{
|
||||
value: 'number',
|
||||
label: t('api_pagination.total_number_de')
|
||||
},
|
||||
{
|
||||
value: 'page',
|
||||
label: t('api_pagination.number_of_pages')
|
||||
}
|
||||
]
|
||||
|
||||
const resolutionPathOptions = ref(cloneDeep(defaultPathArr))
|
||||
|
||||
const responseData = ref([
|
||||
{
|
||||
parameterName: t('api_pagination.total_number'),
|
||||
resolutionPath: '',
|
||||
resolutionPathType: 'number'
|
||||
}
|
||||
])
|
||||
|
||||
const handleNumberSizeChange = () => {
|
||||
resolutionPathOptions.value =
|
||||
numberToken.value === 'number' ? cloneDeep(defaultPathArr) : [cloneDeep(defaultPathArr)[0]]
|
||||
responseData.value[0].resolutionPathType = 'number'
|
||||
requestData.value[0].parameterName =
|
||||
numberToken.value === 'number' ? t('api_pagination.page_number') : t('api_pagination.cursor')
|
||||
responseData.value[0].parameterName =
|
||||
numberToken.value === 'number' ? t('api_pagination.total_number') : t('api_pagination.cursor')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="api-pagination">
|
||||
<span class="type">{{ t('api_pagination.pagination_method') }}</span>
|
||||
<el-select v-model="numberToken" @change="handleNumberSizeChange" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<template v-if="numberToken !== 'empty'">
|
||||
<div class="table-title request">{{ t('datasource.request') }}</div>
|
||||
<el-table header-cell-class-name="header-cell" :data="requestData" style="width: 100%">
|
||||
<el-table-column prop="parameterName" :label="t('api_pagination.parameter_name')" />
|
||||
<el-table-column
|
||||
prop="builtInParameterName"
|
||||
:label="t('api_pagination.built_in_parameter_name')"
|
||||
/>
|
||||
<el-table-column :label="t('api_pagination.request_parameter_name')" width="220">
|
||||
<template #default="scope">
|
||||
<el-input
|
||||
v-model="scope.row.requestParameterName"
|
||||
style="width: 100%"
|
||||
:placeholder="t('api_pagination.enter_parameter_name')"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('api_pagination.parameter_default_value')" width="220">
|
||||
<template #default="scope">
|
||||
<el-input
|
||||
v-model="scope.row.parameterDefaultValue"
|
||||
style="width: 100%"
|
||||
:placeholder="t('api_pagination.enter_default_value')"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="table-title response">{{ t('api_pagination.response') }}</div>
|
||||
<el-table header-cell-class-name="header-cell" :data="responseData" style="width: 100%">
|
||||
<el-table-column
|
||||
prop="parameterName"
|
||||
:label="t('api_pagination.parameter_name')"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column prop="resolutionPath" :label="t('api_pagination.parsing_path')">
|
||||
<template #default="scope">
|
||||
<el-input
|
||||
v-model="scope.row.resolutionPath"
|
||||
style="width: 100%"
|
||||
:placeholder="t('api_pagination.please_enter_jsonpath')"
|
||||
><template #prepend>
|
||||
<el-select
|
||||
class="bg-white"
|
||||
v-model="scope.row.resolutionPathType"
|
||||
style="width: 89px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in resolutionPathOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select> </template
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.api-pagination {
|
||||
margin-top: -8px;
|
||||
.type {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.table-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
padding: 4px 12px;
|
||||
|
||||
&.request {
|
||||
background: #ebf1ff;
|
||||
margin-top: 16px;
|
||||
border-top: 1px solid #dddedf;
|
||||
}
|
||||
|
||||
&.response {
|
||||
background: #e6f7f5;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
:deep(.ed-input__wrapper) {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user