v2
xiaojunnuo 2025-08-28 00:58:17 +08:00
parent 2ca20be197
commit 3e079e3b80
3 changed files with 37 additions and 22 deletions

View File

@ -5,6 +5,7 @@ import { i18n } from "/src/locales/i18n";
import { cloneDeep } from "lodash-es"; import { cloneDeep } from "lodash-es";
interface PluginState { interface PluginState {
group?: PluginGroups; group?: PluginGroups;
originGroup?: PluginGroups;
} }
export type PluginGroup = { export type PluginGroup = {
@ -55,7 +56,7 @@ export class PluginGroups {
if (this.mergeSetting) { if (this.mergeSetting) {
for (const plugin of groups[key].plugins) { for (const plugin of groups[key].plugins) {
if (plugin.sysSetting) { if (plugin.sysSetting) {
merge(plugin.input, plugin.sysSetting.metadata); merge(plugin.input, plugin.sysSetting.metadata?.input || {});
} }
} }
} }
@ -166,6 +167,7 @@ export const usePluginStore = defineStore({
}, },
async clear() { async clear() {
this.group = null; this.group = null;
this.originGroup = null
}, },
async getList(): Promise<PluginDefine[]> { async getList(): Promise<PluginDefine[]> {
await this.init(); await this.init();

View File

@ -3,7 +3,7 @@
<div class="origin-metadata w-100%"> <div class="origin-metadata w-100%">
<div class="block-title"> <div class="block-title">
自定义插件参数配置 自定义插件参数配置
<div class="helper">1111</div> <div class="helper">可以设置插件选项的配置设置配置默认值修改帮助说明设置是否显示该字段等</div>
</div> </div>
<div class="p-10"> <div class="p-10">
<div ref="formRef" class="config-form w-full" :label-col="labelCol" :wrapper-col="wrapperCol"> <div ref="formRef" class="config-form w-full" :label-col="labelCol" :wrapper-col="wrapperCol">
@ -16,18 +16,18 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<template v-for="(item, key) in originInputs" :key="key"> <template v-for="item in originInputs" :key="item.key">
<template v-for="prop in editableKeys" :key="prop.key"> <template v-for="prop in editableKeys" :key="prop.key">
<tr> <tr>
<td v-if="prop.key === 'value'" class="border-t-2 p-5" rowspan="3" :class="{ 'border-t-2': prop.key === 'value' }">{{ item.title }}</td> <td v-if="prop.key === 'value'" class="border-t-2 p-5" rowspan="3" :class="{ 'border-t-2': prop.key === 'value' }">{{ item.title }}</td>
<td class="border-t p-5" :class="{ 'border-t-2': prop.key === 'value' }">{{ prop.label }}</td> <td class="border-t p-5" :class="{ 'border-t-2': prop.key === 'value' }">{{ prop.label }}</td>
<td class="border-t p-5" :class="{ 'border-t-2': prop.key === 'value' }"> <td class="border-t p-5" :class="{ 'border-t-2': prop.key === 'value' }">
<rollbackable :value="configForm[key][prop.key]" @set="configForm[key][prop.key] = item[prop.key] ?? null" @clear="delete configForm[key][prop.key]"> <rollbackable :value="configForm[item.key][prop.key]" @set="prop.onSet(item)" @clear="delete configForm[item.key][prop.key]">
<template #default> <template #default>
<fs-render :render-func="prop.defaultRender(key, item)"></fs-render> <fs-render :render-func="prop.defaultRender(item)"></fs-render>
</template> </template>
<template #edit> <template #edit>
<fs-render :render-func="prop.editRender(key, item)"></fs-render> <fs-render :render-func="prop.editRender(item)"></fs-render>
</template> </template>
</rollbackable> </rollbackable>
</td> </td>
@ -73,9 +73,7 @@ function getScope() {
form: configForm, form: configForm,
}; };
} }
function getScopeFunc() {
return getScope;
}
function getForm() { function getForm() {
return configForm; return configForm;
} }
@ -84,43 +82,52 @@ const editableKeys = ref([
{ {
key: "value", key: "value",
label: "默认值", label: "默认值",
defaultRender(key: string, item: any) { onSet(item: any) {
configForm[item.key]["value"] = item.value ?? null;
},
defaultRender(item: any) {
return () => { return () => {
return item["value"] ?? ""; return item["value"] ?? "";
}; };
}, },
editRender(key: string, item: any) { editRender(item: any) {
return () => { return () => {
return <fs-component-render {...item.component} vModel:modelValue={configForm[key]["value"]} scope={getScope()} />; return <fs-component-render {...item.component} vModel:modelValue={configForm[item.key]["value"]} scope={getScope()} />;
}; };
}, },
}, },
{ {
key: "show", key: "show",
label: "是否显示", label: "是否显示",
defaultRender(key: string, item: any) { onSet(item: any) {
configForm[item.key]["show"] = item.show ?? true;
},
defaultRender(item: any) {
return () => { return () => {
const value = item["show"]; const value = item["show"];
return value === false ? "不显示" : "显示"; return value === false ? "不显示" : "显示";
}; };
}, },
editRender(key: string, item: any) { editRender(item: any) {
return () => { return () => {
return <a-switch vModel:checked={configForm[key]["show"]} />; return <a-switch vModel:checked={configForm[item.key]["show"]} />;
}; };
}, },
}, },
{ {
key: "helper", key: "helper",
label: "帮助说明", label: "帮助说明",
defaultRender(key: string, item: any) { onSet(item: any) {
configForm[item.key]["helper"] = item.helper ?? "";
},
defaultRender(item: any) {
return () => { return () => {
return <pre class={"helper"}>{item["helper"]}</pre>; return <pre class={"helper"}>{item["helper"]}</pre>;
}; };
}, },
editRender(key: string, item: any) { editRender(item: any) {
return () => { return () => {
return <a-textarea rows={5} vModel:value={configForm[key]["helper"]} />; return <a-textarea rows={5} vModel:value={configForm[item.key]["helper"]} />;
}; };
}, },
}, },
@ -155,7 +162,7 @@ async function loadPluginSetting() {
const setting = props.plugin.sysSetting; const setting = props.plugin.sysSetting;
if (setting) { if (setting) {
const settingJson = JSON.parse(setting); const settingJson = JSON.parse(setting);
merge(configForm, settingJson.metadata); merge(configForm, settingJson.metadata?.input || {});
} }
} }

View File

@ -5,10 +5,12 @@ import { Modal, notification } from "ant-design-vue";
import ConfigEditor from "./config-editor.vue"; import ConfigEditor from "./config-editor.vue";
import { useModal } from "/@/use/use-modal"; import { useModal } from "/@/use/use-modal";
import { ref } from "vue"; import { ref } from "vue";
import { usePluginStore } from "/@/store/plugin";
export function usePluginConfig() { export function usePluginConfig() {
const { openCrudFormDialog } = useFormWrapper(); const { openCrudFormDialog } = useFormWrapper();
const { t } = useI18n(); const { t } = useI18n();
const pluginStore = usePluginStore();
const modal = useModal(); const modal = useModal();
async function openConfigDialog({ row, crudExpose }) { async function openConfigDialog({ row, crudExpose }) {
const configEditorRef = ref(); const configEditorRef = ref();
@ -19,7 +21,7 @@ export function usePluginConfig() {
form: { form: {
wrapper: { wrapper: {
width: "80%", width: "80%",
title: "插件元数据配置", title: "插件参数自定义",
saveRemind: false, saveRemind: false,
slots: { slots: {
"form-body-top": () => { "form-body-top": () => {
@ -44,12 +46,16 @@ export function usePluginConfig() {
newForm[key] = value; newForm[key] = value;
} }
} }
return await api.savePluginSetting({ const res = await api.savePluginSetting({
name: row.name, name: row.name,
sysSetting: { sysSetting: {
metadata: newForm, metadata: {
input: newForm,
},
}, },
}); });
await pluginStore.clear();
return res;
}, },
}, },
}, },