mirror of https://github.com/certd/certd
chore:
xiaojunnuo
parent
f1a168fa53
commit
8e3d699856
|
|
@ -1,74 +1,111 @@
|
|||
<template>
|
||||
<div class="plugin-config flex">
|
||||
<div class="origin-metadata w-50%">
|
||||
<div class="plugin-config">
|
||||
<div class="origin-metadata w-100%">
|
||||
<div class="block-title">
|
||||
插件原始参数配置
|
||||
自定义插件参数配置
|
||||
<div class="helper">1111</div>
|
||||
</div>
|
||||
<div class="p-10">
|
||||
<code-editor id="origin" v-model:model-value="originMetadata" style="height: 60vh" language="yaml" :disabled="true"></code-editor>
|
||||
</div>
|
||||
</div>
|
||||
<div class="template-props w-50%">
|
||||
<div class="block-title">
|
||||
自定义配置
|
||||
<div class="helper">1</div>
|
||||
</div>
|
||||
<div class="p-10">
|
||||
<code-editor id="config" v-model:model-value="pluginMetadata" style="height: 60vh" language="yaml" @save="doSave"></code-editor>
|
||||
<div ref="formRef" class="config-form w-full" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<template v-for="(item, key) in originInputs" :key="key">
|
||||
<div>
|
||||
<div :label="item.title">
|
||||
<label class="flex mt-5">
|
||||
<span class="w-20 flex-shrink-0">默认值</span>
|
||||
<rollbackable :value="configForm[key].value" @set="configForm[key].value = item.value ?? null" @clear="unset(configForm, `${key}.value`)"></rollbackable>
|
||||
</label>
|
||||
<label class="flex mt-5">
|
||||
<span class="w-20 flex-shrink-0">是否显示</span>
|
||||
<rollbackable :value="configForm[key].show" @set="set(configForm, `${key}.show`, item.show ?? null)" @clear="unset(configForm, `${key}.show`)"></rollbackable>
|
||||
</label>
|
||||
<label class="flex mt-5">
|
||||
<span class="w-20 flex-shrink-0">帮助说明</span>
|
||||
{{ configForm[key].helper }}
|
||||
<rollbackable :value="configForm[key].helper" @setter="configForm[key].helper = item.helper" @clear1="delete configForm[key].helper"></rollbackable>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, ref, Ref } from "vue";
|
||||
import { computed, nextTick, onMounted, reactive, ref, Ref, unref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import * as api from "./api";
|
||||
import { usePluginStore } from "/@/store/plugin";
|
||||
import yaml from "js-yaml";
|
||||
import { cloneDeep, get, set } from "lodash-es";
|
||||
import { cloneDeep, get, merge, set, unset } from "lodash-es";
|
||||
import Rollbackable from "./rollbackable.vue";
|
||||
const route = useRoute();
|
||||
const templateId = route.query.templateId as string;
|
||||
|
||||
const router = useRouter();
|
||||
const pluginStore = usePluginStore();
|
||||
const props = defineProps<{
|
||||
plugin: any;
|
||||
}>();
|
||||
|
||||
const pluginMetadata = ref<string>("");
|
||||
const pluginMetadata = ref<any>("");
|
||||
const currentPlugin = ref();
|
||||
const originMetadata = computed(() => {
|
||||
console.log("111111111111111111111");
|
||||
const labelCol = ref({
|
||||
span: null,
|
||||
style: {
|
||||
width: "145px",
|
||||
},
|
||||
});
|
||||
const wrapperCol = ref({ span: 16 });
|
||||
const configForm: any = reactive({});
|
||||
|
||||
function getScope() {
|
||||
return {
|
||||
form: configForm,
|
||||
};
|
||||
}
|
||||
function getScopeFunc() {
|
||||
return getScope;
|
||||
}
|
||||
function getForm() {
|
||||
return configForm;
|
||||
}
|
||||
|
||||
const editableKeys = ref([
|
||||
{ key: "value", label: "默认值" },
|
||||
{ key: "show", label: "是否显示", component: { name: "a-switch", vModel: "checked" } },
|
||||
{ key: "helper", label: "帮助说明", component: { name: "a-textarea", vModel: "value", rows: 4 } },
|
||||
]);
|
||||
|
||||
const originInputs = computed(() => {
|
||||
if (!currentPlugin.value) {
|
||||
return;
|
||||
}
|
||||
const input = cloneDeep(currentPlugin.value.input);
|
||||
const newInputs: any = {};
|
||||
const picks = ["title", "helper", "component.options"];
|
||||
|
||||
for (const key in input) {
|
||||
const value = input[key];
|
||||
const newInput: any = {};
|
||||
value.key = key;
|
||||
const newInput: any = cloneDeep(value);
|
||||
newInputs[key] = newInput;
|
||||
for (const pickKey of picks) {
|
||||
const v = get(value, pickKey);
|
||||
if (v) {
|
||||
set(newInput, pickKey, v);
|
||||
}
|
||||
}
|
||||
}
|
||||
return yaml.dump(newInputs);
|
||||
return newInputs;
|
||||
});
|
||||
|
||||
function clearFormValue(key: string) {
|
||||
unset(configForm, key);
|
||||
console.log(key, configForm);
|
||||
}
|
||||
|
||||
async function loadPluginSetting() {
|
||||
currentPlugin.value = await pluginStore.getPluginDefine(props.plugin.name);
|
||||
|
||||
for (const key in currentPlugin.value.input) {
|
||||
configForm[key] = {};
|
||||
}
|
||||
const setting = props.plugin.sysSetting;
|
||||
if (setting) {
|
||||
const settingJson = JSON.parse(setting);
|
||||
const metadataYaml = yaml.dump(settingJson.metadata);
|
||||
pluginMetadata.value = metadataYaml;
|
||||
merge(configForm, settingJson.metadata);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -76,11 +113,13 @@ onMounted(async () => {
|
|||
await loadPluginSetting();
|
||||
});
|
||||
|
||||
function doSave() {
|
||||
const metadata = yaml.load(pluginMetadata.value);
|
||||
api.savePluginSetting({
|
||||
id: props.plugin.id,
|
||||
metadata: metadata,
|
||||
});
|
||||
}
|
||||
function doSave() {}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.plugin-config {
|
||||
pre {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<script setup lang="ts">
|
||||
import { cloneDeep, get, merge, set, unset } from "lodash-es";
|
||||
import { defineProps } from "vue";
|
||||
const props = defineProps<{ value: any }>();
|
||||
|
||||
const emits = defineEmits(["setter", "clear1"]);
|
||||
function setValue() {
|
||||
console.log("33333");
|
||||
emits("setter");
|
||||
}
|
||||
function clearValue() {
|
||||
console.log("4444");
|
||||
emits("clear1");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rollbackable">
|
||||
<div class="flex">
|
||||
<div>
|
||||
<slot v-if="value === undefined" name="default"></slot>
|
||||
<slot v-else name="edit"></slot>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="value === undefined" type="primary" size="small" @click.stop="setValue">自定义</div>
|
||||
<div v-else style="margin-left: 100px" type="primary" size="small" @click.stop="clearValue">还原</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
|
|
@ -3,45 +3,55 @@ import { useFormWrapper } from "@fast-crud/fast-crud";
|
|||
import { useI18n } from "/@/locales";
|
||||
import { Modal, notification } from "ant-design-vue";
|
||||
import ConfigEditor from "./config-editor.vue";
|
||||
import { useModal } from "/@/use/use-modal";
|
||||
export function usePluginConfig() {
|
||||
const { openCrudFormDialog } = useFormWrapper();
|
||||
const { t } = useI18n();
|
||||
|
||||
const modal = useModal();
|
||||
async function openConfigDialog({ row, crudExpose }) {
|
||||
function createCrudOptions() {
|
||||
return {
|
||||
crudOptions: {
|
||||
columns: {},
|
||||
form: {
|
||||
wrapper: {
|
||||
width: "80%",
|
||||
title: "插件元数据配置",
|
||||
saveRemind: false,
|
||||
slots: {
|
||||
"form-body-top": () => {
|
||||
return (
|
||||
<div>
|
||||
<ConfigEditor plugin={row}></ConfigEditor>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
afterSubmit() {
|
||||
notification.success({ message: t("certd.operationSuccess") });
|
||||
crudExpose.doRefresh();
|
||||
},
|
||||
async doSubmit({ form }: any) {
|
||||
return await api.ImportPlugin({
|
||||
...form,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
const { crudOptions } = createCrudOptions();
|
||||
await openCrudFormDialog({ crudOptions });
|
||||
// function createCrudOptions() {
|
||||
// return {
|
||||
// crudOptions: {
|
||||
// columns: {},
|
||||
// form: {
|
||||
// wrapper: {
|
||||
// width: "80%",
|
||||
// title: "插件元数据配置",
|
||||
// saveRemind: false,
|
||||
// slots: {
|
||||
// "form-body-top": () => {
|
||||
// return (
|
||||
// <div>
|
||||
// <ConfigEditor plugin={row}></ConfigEditor>
|
||||
// </div>
|
||||
// );
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// afterSubmit() {
|
||||
// notification.success({ message: t("certd.operationSuccess") });
|
||||
// crudExpose.doRefresh();
|
||||
// },
|
||||
// async doSubmit({ form }: any) {
|
||||
// return await api.ImportPlugin({
|
||||
// ...form,
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
// }
|
||||
// const { crudOptions } = createCrudOptions();
|
||||
// await openCrudFormDialog({ crudOptions });
|
||||
|
||||
modal.confirm({
|
||||
title: "插件元数据配置",
|
||||
width: "80%",
|
||||
content: () => {
|
||||
return <ConfigEditor plugin={row}></ConfigEditor>;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue