1

src/App.vue

@@ -25,7 +25,7 @@ const menuItems = ref([]);
 /** @var {string} */
 const activeServiceKey = ref(null);
 /** @var {Boolean} */
-const isGuest = ref(true);
+const isGuest = ref(false);
 /** @var {String} */
 const password = ref('');
 // on mounted

src/components/ServiceConfiguration.vue

@@ -8,12 +8,20 @@
     <a-row class="h-0 grow">
       <a-col class="border-r h-full overflow-y-auto" :span="16">
         <div class="p-5 border-t border-b" v-if="0 < params.length">
-          <fieldset class="border my-1" v-for="group in params" :key="group.name">
-            <legend>{{ group.name }}</legend>
-            <div class="p-1 inline-block w-64" v-for="item in group.items" :key="item.key">
-              <a-input v-model:value="item.value" :prefix="`${item.name} : `" />
-            </div>
-          </fieldset>
+          <a-row>
+            <a-col :span="8" v-for="group in params" :key="group.name" class="p-1">
+              <fieldset class="border">
+                <legend>{{ group.name }}</legend>
+                <div class="p-1" v-for="item in group.items" :key="item.key">
+                  <service-configuration-param-value-edit 
+                    :param="item" 
+                    v-model:value="item.value"
+                    @save-request="actionServiceParamSave"  
+                  ></service-configuration-param-value-edit>
+                </div>
+              </fieldset>
+            </a-col>
+          </a-row>
           <div class="p-1">
             <a-button class="mr-1" @click="actionServiceParamReload">刷新</a-button>
             <a-button @click="actionServiceParamSave">保存</a-button>
@@ -22,7 +30,7 @@
         <div class="p-5">
           <fieldset v-for="(group,groupIndex) in actions" :key="groupIndex" class="border my-1 p-1">
             <legend>{{ group.name }}</legend>
-            <div v-for="action in group.items" :key="action.key">
+            <div v-for="action in group.items" :key="action.key" :class="{'inline-block ml-1':0 === action.params.length}">
               <a-button v-if="0 === action.params.length" class="my-1"
                 :loading="action.isExecuting"
                 @click="actionServiceExecute(action)"
@@ -46,8 +54,7 @@
         </div>
       </a-col>
       <a-col :span="8" class="p-5 h-full">
-        <div class="border rounded p-5 whitespace-pre h-full overflow-y-auto bg-white"
-        >{{ logContent }}</div>
+        <service-configuration-action-log :log="actionLog"/>
       </a-col>
     </a-row>
   </div>
@@ -55,6 +62,8 @@
 <script setup>
 import { onUnmounted, ref, watch } from 'vue';
 import ApiClient from '@/utils/ApiClient';
+import ServiceConfigurationParamValueEdit from './ServiceConfigurationParamValueEdit.vue'
+import ServiceConfigurationActionLog from './ServiceConfigurationActionLog.vue'
 /** @var {Object} */
 const props = defineProps({
     serviceKey : String,
@@ -65,8 +74,8 @@ const params = ref([]);
 const actions = ref([]);
 /** @var {Array} */
 const statuses = ref([]);
-/** @var {String} */
-const logContent = ref('');
+/** @var {Object} */
+const actionLog = ref(null);
 /** @var {Integer} */
 let statusRefreshTimer = null;
 // watch service key
@@ -81,7 +90,7 @@ onUnmounted(() => {
 
 // on mounted
 async function handleServiceKeyChange() {
-    logContent.value = '';
+    actionLog.value = null;
     if ( null !== statusRefreshTimer ) {
         clearTimeout(statusRefreshTimer);
         statusRefreshTimer = null;
@@ -121,7 +130,7 @@ async function actionServiceParamReload() {
             }
             group.items.push(item);
         }
-        params.value.sort((a,b) => a.name.localeCompare(b.name));
+        params.value.sort((a,b) => b.items.length - a.items.length);
     } catch ( e ) {/** nothing to do here */}
 }
 
@@ -153,6 +162,7 @@ async function serviceActionReload() {
                 actions.value.push(group);
             }
             group.items.push(item);
+            group.items.sort((a,b) => a.params.length - b.params.length);
         }
         actions.value.sort((a,b) => a.name.localeCompare(b.name));
     } catch ( e ) {/** nothing to do here */}
@@ -176,20 +186,17 @@ async function actionServiceExecute(action) {
             params.paramTypes.push(type);
         }
 
-        var log = [];
-        log.push(`Execute : ${params.action}`);
-        log.push('');
-        log.push(`Params : `);
-        log.push(JSON.stringify(params.params, null, 2));
-        log.push('');
-
-        logContent.value = log.join("\n");
+        actionLog.value = {};
+        actionLog.value.action = params.action;
+        actionLog.value.params = params.params;
+        actionLog.value.response = null;
         action.isExecuting = true;
-        let res = await client.call('service-config/service-action-exec',params);
+        actionLog.value.response = await client.call('service-config/service-action-exec',params);
         action.isExecuting = false;
-        log.push('Result : ');
-        log.push(JSON.stringify(res, null, 2));
-        logContent.value = log.join("\n");
-    } catch ( e ) {/** nothing to do here */}
+    } catch ( e ) {
+        /** nothing to do here */
+    } finally {
+        action.isExecuting = false;
+    }
 }
 </script>

src/components/ServiceConfigurationActionLog.vue

@@ -0,0 +1,25 @@
+<template>
+  <div v-if="null !== props.log">
+    <div class="border rounded p-3 whitespace-pre bg-white mb-3">
+      执行动作 : {{ props.log.action }}
+    </div>
+
+    <div class="border rounded p-3 whitespace-pre bg-white mb-3">
+      <div>参数列表：</div>
+      <div v-for="(item,index) of props.log.params" :key="index" class="mr-2">
+        {{ JSON.stringify(item, null, 2) }}
+      </div>
+    </div>
+
+    <div class="border rounded p-3 whitespace-pre bg-white mb-3">
+      <div>响应内容：</div>
+      <div>{{ JSON.stringify(props.log.response, null, 2) }}</div>
+    </div>
+  </div>
+</template>
+<script setup>
+/** @var {Object} */
+const props = defineProps({
+    log: Object,
+});
+</script>

src/components/ServiceConfigurationParamValueEdit.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <!-- integer -->
+    <a-input-number v-if="'java.lang.Integer' === props.param.type" 
+      class="!w-full"
+      v-model:value="value" 
+      :prefix="`${props.param.name} : `" 
+      @change="actionValueUpdate"
+    ></a-input-number>
+    
+    <!-- object -->
+    <template v-else>
+      <div class="border bg-white px-2 py-1 rounded-md">
+        {{ props.param.name }} : 
+        <service-configuration-param-value-object-edit 
+          v-model:value="value"
+          :struct-class-name="props.param.type"
+          @change="actionValueUpdate"
+          @save-request="actionSaveRequest"
+        ></service-configuration-param-value-object-edit>
+      </div>
+    </template>
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+import ServiceConfigurationParamValueObjectEdit from './ServiceConfigurationParamValueObjectEdit.vue'
+/** @var {Function} */
+const emits = defineEmits(['update:value', 'change','save-request']);
+/** @var {Object} */
+const props = defineProps({
+    param : Object,
+});
+/** @var {Object} */
+const value = ref(null);
+// on mounted
+onMounted(mounted);
+
+// on mounted
+function mounted() {
+    value.value = props.param.value;
+}
+
+// update value
+function actionValueUpdate() {
+    emits('update:value', structuredClone(value.value));
+    emits('change');
+}
+
+// save request
+function actionSaveRequest() {
+    emits('save-request')
+}
+</script>

src/components/ServiceConfigurationParamValueObjectEdit.vue

@@ -0,0 +1,121 @@
+<template>
+  <a-button size="small" type="text" @click="actionEditEable">编辑</a-button>
+
+  <a-modal v-model:open="isModalOpen" title="参数编辑" @ok="actionOk">
+    <a-table bordered size="small"
+      v-model:expandedRowKeys="tableExpandedKeys" 
+      :columns="tableColumns" 
+      :data-source="tableData" 
+      :pagination="false" 
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'value'">
+          <!-- Integer -->
+          <a-input-number v-if="'java.lang.Integer' === record.type" 
+            size="small" class="w-full !border-none" 
+            v-model:value="record.value"
+          ></a-input-number>
+        </template>
+      </template>
+    </a-table>
+  </a-modal>
+</template>
+<script setup>
+import { nextTick, onMounted, ref } from 'vue';
+import ApiClient from '@/utils/ApiClient';
+/** @var {Function} */
+const emits = defineEmits(['update:value','change', 'save-request']);
+/** @var {Object} */
+const props = defineProps({
+    structClassName : String,
+    value : Object,
+});
+/** @var {Array} */
+const tableColumns = ref([
+    {key:'title',title:'属性',dataIndex:'title'},
+    {key:'value',title:'取值'},
+]);
+/** @var {Array} */
+const tableData = ref([]);
+/** @var {String} */
+const tableExpandedKeys = ref([]);
+/** @var {Boolean} */
+const isModalOpen = ref(false);
+// on mounted
+onMounted(mounted);
+
+// on mounted
+async function mounted() {
+    tableData.value = await setupTableData(props.structClassName);
+    console.log(tableData.value);
+}
+
+// setup tree data
+async function setupTableData(structClassName, path=[]) {
+    let baseTypes = ['java.lang.Integer'];
+    let client = ApiClient.getClient();
+
+    try {
+        let structInfo = await client.call('service-config/class-struct-info-get', {class:structClassName});
+        let nodes = [];
+        for ( let item of structInfo ) {
+            let itemPath = structuredClone(path);
+            itemPath.push(item.name);
+            tableExpandedKeys.value.push(item.name);
+
+            let node = {};
+            node.key = item.name;
+            node.title = item.name;
+            node.type = item.type;
+            node.info = item;
+            if ( !baseTypes.includes(item.type) ) {
+                node.children = await setupTableData(item.type, itemPath);
+            }
+            node.value = getValueFromJson(itemPath);
+            nodes.push(node);
+        }
+        return nodes;
+    } catch ( e ) { console.error(e); }
+}
+
+// get value from json by path
+function getValueFromJson( path ) {
+    let value = props.value;
+    for ( var item of path ) {
+        if ( null === value || undefined === value[item] ) {
+            return undefined;
+        }
+        value = value[item];
+    }
+    return value;
+}
+
+// generate json data
+function generateJsonData( nodes ) {
+    let obj = {};
+    for ( let node of nodes ) {
+        if ( undefined !== node.children ) {
+            obj[node.key] = generateJsonData(node.children);
+        } else {
+            obj[node.key] = node.value;
+        }
+    }
+    return obj;
+}
+
+// enable edit
+function actionEditEable() {
+    isModalOpen.value = true;
+}
+
+// ok
+async function actionOk() {
+    let newValue = generateJsonData(tableData.value);
+    console.log(newValue);
+    emits('update:value', newValue);
+    emits('change');
+    await nextTick();
+    emits('save-request');
+    isModalOpen.value = true;
+}
+</script>