| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one or more |
| ~ contributor license agreements. See the NOTICE file distributed with |
| ~ this work for additional information regarding copyright ownership. |
| ~ The ASF licenses this file to You under the Apache License, Version 2.0 |
| ~ (the "License"); you may not use this file except in compliance with |
| ~ the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, software |
| ~ distributed under the License is distributed on an "AS IS" BASIS, |
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| ~ See the License for the specific language governing permissions and |
| ~ limitations under the License. |
| --> |
| <template> |
| <div class="__container_services_tabs_scene_config"> |
| <a-tabs v-model:activeKey="activeKey" :tab-position="'left'" animated> |
| <a-tab-pane key="timeout" tab="超时时间"> |
| <a-descriptions layout="vertical"> |
| <a-descriptions-item label="超时时间"> |
| <a-flex v-if="!editForm.timeout.isEdit"> |
| <span class="item-content">1000ms</span> |
| <EditOutlined @click="showEdit('timeout')" style="font-size: 18px" /> |
| </a-flex> |
| <a-flex v-else align="center"> |
| <a-input v-model:value="editForm.timeout.value" style="width: 200px" /> |
| <span style="margin-left: 5px">ms</span> |
| <CheckOutlined @click="hideEdit('timeout')" style="margin-left: 15px; font-size: 18px;" /> |
| <CloseOutlined @click="hideEdit('timeout')" style="margin-left: 15px; font-size: 18px;" /> |
| </a-flex> |
| </a-descriptions-item> |
| </a-descriptions> |
| </a-tab-pane> |
| <a-tab-pane key="retryNum" tab="重试次数"> |
| <a-descriptions layout="vertical"> |
| <a-descriptions-item label="重试次数"> |
| <a-flex v-if="!editForm.retryNum.isEdit"> |
| <span class="item-content">1000次</span> |
| <EditOutlined @click="showEdit('retryNum')" style="font-size: 18px" /> |
| </a-flex> |
| <a-flex v-else align="center"> |
| <a-input v-model:value="editForm.retryNum.value" style="width: 200px" /> |
| <span style="margin-left: 5px">次</span> |
| <CheckOutlined @click="hideEdit('retryNum')" style="margin-left: 15px; font-size: 18px;" /> |
| <CloseOutlined @click="hideEdit('retryNum')" style="margin-left: 15px; font-size: 18px;" /> |
| </a-flex> |
| </a-descriptions-item> |
| </a-descriptions> |
| </a-tab-pane> |
| <a-tab-pane key="sameArea" tab="同区域优先"> |
| <a-descriptions layout="vertical"> |
| <a-descriptions-item label="同区域优先"> |
| <a-radio-group v-model:value="editForm.sameArea.value" button-style="solid"> |
| <a-radio-button value="close">关闭</a-radio-button> |
| <a-radio-button value="open">开启</a-radio-button> |
| </a-radio-group> |
| </a-descriptions-item> |
| </a-descriptions> |
| </a-tab-pane> |
| <a-tab-pane key="paramRoute" tab="参数路由"> |
| <paramRoute v-for="item, index in paramRouteForms" :key="index" :paramRouteForm="item" /> |
| <a-button type="primary" style="margin-top: 20px">增加路由</a-button> |
| </a-tab-pane> |
| </a-tabs> |
| </div> |
| </template> |
| |
| <script setup lang="ts"> |
| import { ref, reactive } from 'vue'; |
| import { EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'; |
| import paramRoute from './paramRoute.vue' |
| |
| const editForm = reactive({ |
| timeout: { |
| isEdit: false, |
| value: '', |
| }, |
| retryNum: { |
| isEdit: false, |
| value: '', |
| }, |
| sameArea: { |
| value: 'close', |
| }, |
| paramRoute: { |
| isEdit: false, |
| value: {}, |
| } |
| }) |
| |
| const activeKey = ref('timeout'); |
| const showEdit = (param: string) => { |
| editForm[param].isEdit = true; |
| } |
| const hideEdit = (param: string) => { |
| editForm[param].isEdit = false; |
| } |
| |
| const paramRouteForms = [ |
| { |
| method: { |
| value: 'getUserInfo', |
| selectArr: [ |
| 'getUserInfo', |
| 'register', |
| 'login' |
| ] |
| }, |
| functionParams: [{ |
| param: '', |
| relation: '', |
| value: '', |
| }], |
| destination: [{ |
| label: '', |
| relation: '', |
| value: '', |
| weight: '', |
| }] |
| } |
| ] |
| </script> |
| |
| <style lang="less" scoped> |
| .__container_services_tabs_scene_config { |
| .item-content { |
| margin-left: 20px; |
| margin-right: 20px; |
| } |
| .handle-form { |
| width: 50px; |
| justify-content: space-between; |
| } |
| } |
| </style> |