83 lines
2.9 KiB
JavaScript
83 lines
2.9 KiB
JavaScript
window.PluginConfigDialog = {
|
|
props: {
|
|
visible: Boolean,
|
|
pluginName: String,
|
|
},
|
|
emits: ['update:visible'],
|
|
setup(props, { emit }) {
|
|
const { ref, watch, computed } = Vue;
|
|
const api = useApi();
|
|
|
|
const configData = ref({});
|
|
const configLabels = ref({});
|
|
const saving = ref(false);
|
|
const loading = ref(false);
|
|
|
|
watch(() => props.visible, async (val) => {
|
|
if (val && props.pluginName) {
|
|
loading.value = true;
|
|
const json = await api.getPluginConfig(props.pluginName);
|
|
loading.value = false;
|
|
if (json) {
|
|
configData.value = json.data;
|
|
configLabels.value = json.labels || {};
|
|
} else {
|
|
emit('update:visible', false);
|
|
}
|
|
}
|
|
});
|
|
|
|
function collectSections(obj, prefix) {
|
|
const result = [];
|
|
for (const [key, val] of Object.entries(obj)) {
|
|
if (typeof val !== 'object' || Array.isArray(val)) continue;
|
|
const fullKey = prefix ? prefix + '.' + key : key;
|
|
result.push({
|
|
key: fullKey,
|
|
fields: val,
|
|
label: configLabels.value[fullKey] || fullKey,
|
|
});
|
|
result.push(...collectSections(val, fullKey));
|
|
}
|
|
return result;
|
|
}
|
|
|
|
const sections = computed(() => collectSections(configData.value, ''));
|
|
|
|
async function save() {
|
|
saving.value = true;
|
|
const json = await api.savePluginConfig(props.pluginName, configData.value);
|
|
if (json) {
|
|
ElementPlus.ElMessage.success('插件配置已保存');
|
|
emit('update:visible', false);
|
|
}
|
|
saving.value = false;
|
|
}
|
|
|
|
function close() { emit('update:visible', false); }
|
|
|
|
return { configData, sections, saving, loading, save, close };
|
|
},
|
|
template: `
|
|
<el-dialog :model-value="visible"
|
|
@update:model-value="$emit('update:visible', $event)"
|
|
:title="pluginName + ' 配置'"
|
|
width="720px" top="8vh" destroy-on-close>
|
|
<div v-if="loading" class="panel-loading">
|
|
加载中...
|
|
</div>
|
|
<div v-else class="dialog-body-scroll">
|
|
<ConfigSection v-for="sec in sections" :key="sec.key"
|
|
:section="sec.key"
|
|
:label="sec.label"
|
|
:fields="sec.fields"
|
|
v-model="sec.fields" />
|
|
</div>
|
|
<template #footer>
|
|
<el-button @click="close">取消</el-button>
|
|
<el-button type="primary" @click="save" :loading="saving">保存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
`
|
|
};
|