perf: 任务配置不需要的字段可以自动隐藏

This commit is contained in:
xiaojunnuo
2024-09-04 15:49:00 +08:00
parent d0d3c2b588
commit 192d9dc7e3
12 changed files with 216 additions and 95 deletions
@@ -70,6 +70,7 @@ const onError = (error: any) => {
}
.vcron-select-input {
min-height: 22px;
background-color: #fff;
}
.vcron-select-container {
display: flex;
@@ -1,17 +0,0 @@
import _ from "lodash-es";
import { compute } from "@fast-crud/fast-crud";
export function useReference(form: any) {
if (!form.reference) {
return;
}
for (const reference of form.reference) {
_.set(
form,
reference.dest,
compute<any>((scope) => {
return _.get(scope, reference.src);
})
);
}
}
@@ -0,0 +1,40 @@
import _ from "lodash-es";
import { compute } from "@fast-crud/fast-crud";
export function useReference(formItem: any) {
if (formItem.reference) {
for (const reference of formItem.reference) {
_.set(
formItem,
reference.dest,
compute<any>((scope) => {
return _.get(scope, reference.src);
})
);
}
delete formItem.reference;
}
if (formItem.mergeScript) {
const ctx = {
compute
};
const script = formItem.mergeScript;
const func = new Function("ctx", script);
const merged = func(ctx);
_.merge(formItem, merged);
delete formItem.mergeScript;
}
//helper
if (formItem.helper && typeof formItem.helper === "string") {
//正则表达式替换 [name](url) 成 <a href="url" >
let helper = formItem.helper.replace(/\[(.*)\]\((.*)\)/g, '<a href="$2" target="_blank">$1</a>');
helper = helper.replace(/\n/g, "<br/>");
formItem.helper = {
render: () => {
return <div innerHTML={helper}></div>;
}
};
}
}
@@ -1,4 +1,4 @@
import { ColumnCompositionProps, dict } from "@fast-crud/fast-crud";
import { ColumnCompositionProps, dict, compute } from "@fast-crud/fast-crud";
// @ts-ignore
import * as api from "./api";
// @ts-ignore
@@ -32,11 +32,25 @@ export function getCommonColumnDefine(crudExpose: any, typeRef: any) {
...value,
key
};
const column = _.merge({ title: key }, defaultPluginConfig, field);
let column = _.merge({ title: key }, defaultPluginConfig, field);
//eval
if (column.mergeScript) {
const ctx = {
compute
};
const script = column.mergeScript;
delete column.mergeScript;
const func = new Function("ctx", script);
const merged = func(ctx);
column = _.merge(column, merged);
}
//设置默认值
if (column.value != null && _.get(form, key) == null) {
//设置默认值
_.set(form, key, column.value);
}
//字段配置赋值
columnsRef.value[key] = column;
console.log("form", columnsRef.value);
});
@@ -55,7 +69,12 @@ export function getCommonColumnDefine(crudExpose: any, typeRef: any) {
},
form: {
component: {
disabled: false
disabled: false,
showSearch: true,
filterOption: (input: string, option: any) => {
input = input?.toLowerCase();
return option.value.toLowerCase().indexOf(input) >= 0 || option.label.toLowerCase().indexOf(input) >= 0;
}
},
rules: [{ required: true, message: "请选择类型" }],
valueChange: {
@@ -22,12 +22,17 @@ export default function (certPluginGroup: PluginGroup, formWrapperRef: any): Cre
form: {
...inputDefine,
show: compute((ctx) => {
console.log(formWrapperRef);
const form = formWrapperRef.value.getFormData();
if (!form) {
return false;
}
return form?.certApplyPlugin === plugin.name;
let inputDefineShow = true;
if (inputDefine.show != null) {
const computeShow = inputDefine.show as any;
inputDefineShow = computeShow.computeFn({ form });
}
return form?.certApplyPlugin === plugin.name && inputDefineShow;
})
}
};
@@ -60,8 +65,8 @@ export default function (certPluginGroup: PluginGroup, formWrapperRef: any): Cre
render: () => {
return (
<ul>
<li>Lego-ACMELego实现DNS提供商</li>
<li>JS-ACMEDNS属于阿里云Cloudflare可以选择用它来申请</li>
<li>JS-ACMEDNS属于阿里云Cloudflare西</li>
<li>Lego-ACMELego实现DNS提供商LEGO的用户可以使用</li>
</ul>
);
}
@@ -78,7 +83,7 @@ export default function (certPluginGroup: PluginGroup, formWrapperRef: any): Cre
vModel: "modelValue",
placeholder: "0 0 4 * * *"
},
helper: "请输入cron表达式, 例如:0 0 4 * * *,每天凌晨4点触发",
helper: "点击上面的按钮,选择每天几点几分定时执行, 例如:0 0 4 * * *,每天凌晨4点0分0秒触发",
order: 100
}
},
@@ -1,5 +1,5 @@
<template>
<a-drawer v-model:open="stepDrawerVisible" placement="right" :closable="true" width="700px" @after-open-change="stepDrawerOnAfterVisibleChange">
<a-drawer v-model:open="stepDrawerVisible" placement="right" :closable="true" width="700px">
<template #title>
编辑步骤
<a-button v-if="editMode" @click="stepDelete()">
@@ -59,7 +59,7 @@
:get-context-fn="blankFn"
/>
<template v-for="(item, key) in currentPlugin.input" :key="key">
<fs-form-item v-model="currentStep.input[key]" :item="item" :get-context-fn="blankFn" />
<fs-form-item v-if="item.show !== false" v-model="currentStep.input[key]" :item="item" :get-context-fn="blankFn" />
</template>
<fs-form-item v-model="currentStep.strategy.runStrategy" :item="runStrategyProps" :get-context-fn="blankFn" />
@@ -83,9 +83,12 @@ import { nanoid } from "nanoid";
import { CopyOutlined } from "@ant-design/icons-vue";
import { PluginGroups } from "/@/views/certd/pipeline/pipeline/type";
import { useUserStore } from "/@/store/modules/user";
import { compute, useCompute } from "@fast-crud/fast-crud";
import { useReference } from "/@/use/use-refrence";
export default {
name: "PiStepForm",
// eslint-disable-next-line vue/no-unused-components
components: { CopyOutlined },
props: {
editMode: {
@@ -106,7 +109,6 @@ export default {
const mode: Ref = ref("add");
const callback: Ref = ref();
const currentStep: Ref = ref({ title: undefined, input: {} });
const currentPlugin: Ref = ref({});
const stepFormRef: Ref = ref(null);
const stepDrawerVisible: Ref = ref(false);
const rules: Ref = ref({
@@ -150,15 +152,10 @@ export default {
stepDrawerVisible.value = false;
};
const stepDrawerOnAfterVisibleChange = (val: any) => {
console.log("stepDrawerOnAfterVisibleChange", val);
};
const stepOpen = (step: any, emit: any) => {
callback.value = emit;
currentStep.value = _.merge({ input: {}, strategy: {} }, step);
console.log("currentStepOpen", currentStep.value);
if (step.type) {
changeCurrentPlugin(currentStep.value);
}
@@ -189,33 +186,41 @@ export default {
stepOpen(step, emit);
};
const currentPluginDefine = ref();
function getContext() {
return {
form: currentStep.value.input
};
}
const { doComputed } = useCompute();
const currentPlugin = doComputed(() => {
return currentPluginDefine.value;
}, getContext);
const changeCurrentPlugin = (step: any) => {
const stepType = step.type;
const pluginDefine = pluginGroups.get(stepType);
if (pluginDefine) {
step.type = stepType;
step._isAdd = false;
currentPlugin.value = _.cloneDeep(pluginDefine);
for (let key in currentPlugin.value.input) {
const input = currentPlugin.value.input[key];
if (input?.reference) {
for (const reference of input.reference) {
_.set(
input,
reference.dest,
computed<any>(() => {
const scope = {
form: currentStep.value.input
};
return _.get(scope, reference.src);
})
);
}
}
//设置初始值
if ((input.default != null || input.value != null) && currentStep.value.input[key] == null) {
currentStep.value.input[key] = input.default ?? input.value;
}
step.type = stepType;
step._isAdd = false;
let pluginDefine = pluginGroups.get(stepType);
if (pluginDefine == null) {
console.log("插件未找到", stepType);
return;
}
pluginDefine = _.cloneDeep(pluginDefine);
const columns = pluginDefine.input;
for (let key in columns) {
const column = columns[key];
useReference(column);
}
currentPluginDefine.value = pluginDefine;
for (let key in pluginDefine.input) {
const column = pluginDefine.input[key];
//设置初始值
if ((column.default != null || column.value != null) && currentStep.value.input[key] == null) {
currentStep.value.input[key] = column.default ?? column.value;
}
}
@@ -269,7 +274,6 @@ export default {
stepView,
stepDrawerShow,
stepDrawerVisible,
stepDrawerOnAfterVisibleChange,
currentStep,
currentPlugin,
stepSave,
@@ -56,7 +56,7 @@
name: 'cron-editor',
vModel: 'modelValue'
},
helper: 'cron表达式,例如: 0 0 3 * * * ,表示每天凌晨3点触发',
helper: '点击上面的按钮,选择每天几点几分定时执行, 例如:0 0 4 * * *,每天凌晨4点0分0秒触发',
rules: [{ required: true, message: '此项必填' }]
}"
/>
@@ -1,5 +1,5 @@
import type { Pipeline } from "@certd/pipeline";
import { FormItemProps } from "@fast-crud/fast-crud";
import { DynamicType, FormItemProps } from "@fast-crud/fast-crud";
export type PipelineDetail = {
pipeline: Pipeline;
};
@@ -24,7 +24,7 @@ export type PluginDefine = {
title: string;
desc?: string;
input: {
[key: string]: FormItemProps;
[key: string]: DynamicType<FormItemProps>;
};
output: {
[key: string]: any;