feat(#242):
Feature about application config page
diff --git a/ui-vue3/src/components/ConfigPage.vue b/ui-vue3/src/components/ConfigPage.vue
index 2fb3c0a..af57303 100644
--- a/ui-vue3/src/components/ConfigPage.vue
+++ b/ui-vue3/src/components/ConfigPage.vue
@@ -49,6 +49,9 @@
<a-card>
<template #title>
{{ $t(currentOption.title) }}
+ <div v-if="currentOption?.ext" style="float: right">
+ <a-button type="primary" @click="currentOption?.ext?.fun">{{currentOption?.ext?.title}}</a-button>
+ </div>
</template>
<a-spin :spinning="waitResponse">
<a-form
@@ -60,7 +63,7 @@
layout="horizontal"
>
<slot :name="'form_' + currentOption.key" :current="currentOption"></slot>
- <a-form-item style="margin-left: 100px">
+ <a-form-item style="margin: 20px 0 0 100px">
<a-button type="primary" @click="submit">{{ $t('submit') }}</a-button>
<a-button style="margin-left: 10px" @click="reset">{{ $t('reset') }}</a-button>
</a-form-item>
@@ -108,7 +111,7 @@
waitResponse.value = false
})
- let cur = currentOption.value
+ let cur = props.options.list[props.options.current[0]];
await cur.submit(cur.form).catch((e: any) => {
message.error('submit failed [server error]: ' + e)
})
diff --git a/ui-vue3/src/views/resources/applications/tabs/config.vue b/ui-vue3/src/views/resources/applications/tabs/config.vue
index 080cbc1..86e7047 100644
--- a/ui-vue3/src/views/resources/applications/tabs/config.vue
+++ b/ui-vue3/src/views/resources/applications/tabs/config.vue
@@ -22,15 +22,131 @@
<a-switch v-model:checked="current.form.logFlag"></a-switch>
</a-form-item>
</template>
- <template v-slot:form_flow="{ current }"> 2 </template>
- <template v-slot:form_gray="{ current }"> 3 </template>
+ <template v-slot:form_flow="{ current }">
+ <a-space>
+ <a-card v-for="(item, i) in current.form.rules">
+
+ <template #title>
+ {{ $t('applicationDomain.flowWeight') }} {{ i + 1 }}
+ <div style="float: right">
+ <a-space>
+ <a-button type="dashed" @click="">
+ <Icon
+ style="font-size: 20px"
+ icon="material-symbols-light:contract-edit"></Icon>
+ </a-button>
+ <a-button danger type="dashed" @click="">
+ <Icon
+ style="font-size: 20px"
+ icon="fluent:delete-12-filled"></Icon>
+ </a-button>
+ </a-space>
+ </div>
+ </template>
+
+ <a-form-item :name="'rules[' + i + '].weight'" label="权重">
+ <a-input-number v-model:value="item.weight"></a-input-number>
+ </a-form-item>
+ <a-form-item label="作用范围">
+ <a-table
+ style="width: 40vw"
+ :pagination="false"
+ :columns="[
+ {key: 'label', title:'label'},
+ {key: 'condition', title:'condition'},
+ {key: 'value', title:'value'},
+ ]"
+ :data-source="[item.scope]">
+ <template #bodyCell="{column, record, index}">
+ <a-form-item
+ v-if="column.key === 'condition'"
+ :name="'rules[' + i + '].scope.condition'" label="">
+ <a-select v-model:value="item.scope.condition">
+ <a-select-option value="=">=</a-select-option>
+ <a-select-option value="!=">!=</a-select-option>
+ <a-select-option value=">">></a-select-option>
+ <a-select-option value="<">{{ '<' }}</a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item
+ v-else
+ :name="'rules[' + i + '].scope.condition.' + column.key" label="">
+ <a-input v-model:value="item.scope[column.key]"></a-input>
+ </a-form-item>
+ </template>
+ </a-table>
+ </a-form-item>
+ </a-card>
+ </a-space>
+
+ </template>
+ <template v-slot:form_gray="{ current }">
+ <a-space>
+ <a-card v-for="(item, i) in current.form.rules">
+
+ <template #title>
+ {{ $t('applicationDomain.gray') }} {{ i + 1 }}
+ <div style="float: right">
+ <a-space>
+ <a-button type="dashed" @click="">
+ <Icon
+ style="font-size: 20px"
+ icon="material-symbols-light:contract-edit"></Icon>
+ </a-button>
+ <a-button danger type="dashed" @click="">
+ <Icon
+ style="font-size: 20px"
+ icon="fluent:delete-12-filled"></Icon>
+ </a-button>
+ </a-space>
+ </div>
+ </template>
+
+ <a-form-item :name="'rules[' + i + '].name'" label="环境名称">
+ <a-input v-model:value="item.name"></a-input>
+ </a-form-item>
+ <a-form-item label="作用范围">
+ <a-table
+ style="width: 40vw"
+ :pagination="false"
+ :columns="[
+ {key: 'label', title:'label'},
+ {key: 'condition', title:'condition'},
+ {key: 'value', title:'value'},
+ ]"
+ :data-source="[item.scope]">
+ <template #bodyCell="{column, record, index}">
+ <a-form-item
+ v-if="column.key === 'condition'"
+ :name="'rules[' + i + '].scope.condition'" label="">
+ <a-select v-model:value="item.scope.condition">
+ <a-select-option value="=">=</a-select-option>
+ <a-select-option value="!=">!=</a-select-option>
+ <a-select-option value=">">></a-select-option>
+ <a-select-option value="<">{{ '<' }}</a-select-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item
+ v-else
+ :name="'rules[' + i + '].scope.condition.' + column.key" label="">
+ <a-input v-model:value="item.scope[column.key]"></a-input>
+ </a-form-item>
+ </template>
+ </a-table>
+ </a-form-item>
+ </a-card>
+ </a-space>
+
+ </template>
</config-page>
</div>
</template>
<script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue'
+import {onMounted, reactive} from 'vue'
import ConfigPage from '@/components/ConfigPage.vue'
+import {Icon} from "@iconify/vue";
+
let options: any = reactive({
list: [
{
@@ -52,20 +168,64 @@
},
{
title: 'applicationDomain.flowWeight',
- form: {},
key: 'flow',
+ ext: {
+ title: '添加权重配置',
+ fun() {
+
+ }
+ },
+ form: {
+ rules: [
+ {
+ weight: '100',
+ scope: {
+ label: 'key1',
+ condition: '=',
+ value: 'value1'
+ }
+ }
+ ]
+ },
submit(form: {}) {
- console.log(form)
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(1)
+ }, 1000)
+ })
}
},
+
{
title: 'applicationDomain.gray',
- form: {},
key: 'gray',
+ ext: {
+ title: '添加灰度环境',
+ fun() {
+
+ }
+ },
+ form: {
+ rules: [
+ {
+ name: '100',
+ scope: {
+ label: 'key1',
+ condition: '=',
+ value: 'value1'
+ }
+ }
+ ]
+ },
submit(form: {}) {
- console.log(form)
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(1)
+ }, 1000)
+ })
}
- }
+ },
+
],
current: [0]
})
