5 changed files with 234 additions and 27 deletions
-
2src/App.vue
-
59src/components/ServiceConfiguration.vue
-
25src/components/ServiceConfigurationActionLog.vue
-
54src/components/ServiceConfigurationParamValueEdit.vue
-
121src/components/ServiceConfigurationParamValueObjectEdit.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> |
|||
@ -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> |
|||
@ -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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue