fix: 修复access选择类型trigger

pull/21/merge
xiaojunnuo 2023-06-25 16:25:23 +08:00
parent 937e3fac19
commit 2851a33eb2
5 changed files with 99 additions and 72 deletions

View File

@ -31,6 +31,12 @@ export type PluginDefine = Registrable & {
autowire?: {
[key: string]: any;
};
reference?: {
src: string;
dest: string;
type: "computed";
}[];
};
export type ITaskPlugin = {

View File

@ -73,6 +73,13 @@ export class CertApplyPlugin extends AbstractTaskPlugin {
},
required: true,
helper: "请选择dns解析提供商授权",
reference: [
{
src: "form.dnsProviderType",
dest: "component.type",
type: "computed",
},
],
})
dnsProviderAccess!: string;

View File

@ -84,11 +84,12 @@
</a-drawer>
</template>
<script lang="jsx">
<script lang="tsx">
import { message, Modal } from "ant-design-vue";
import { inject, ref } from "vue";
import { computed, inject, Ref, ref } from "vue";
import _ from "lodash";
import { nanoid } from "nanoid";
import { compute } from "@fast-crud/fast-crud";
export default {
name: "PiStepForm",
props: {
@ -98,21 +99,21 @@ export default {
}
},
emits: ["update"],
setup(props, context) {
setup(props: any, context: any) {
/**
* step drawer
* @returns
*/
function useStepForm() {
const stepPluginDefineList = inject("plugins");
const stepPluginDefineList: any = inject("plugins");
const mode = ref("add");
const callback = ref();
const currentStep = ref({ title: undefined, input: {} });
const currentPlugin = ref({});
const stepFormRef = ref(null);
const stepDrawerVisible = ref(false);
const rules = ref({
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({
name: [
{
type: "string",
@ -122,7 +123,7 @@ export default {
]
});
const stepTypeSelected = (item) => {
const stepTypeSelected = (item: any) => {
currentStep.value.type = item.name;
currentStep.value.title = item.title;
console.log("currentStepTypeChanged:", currentStep.value);
@ -155,13 +156,14 @@ export default {
stepDrawerVisible.value = false;
};
const stepDrawerOnAfterVisibleChange = (val) => {
const stepDrawerOnAfterVisibleChange = (val: any) => {
console.log("stepDrawerOnAfterVisibleChange", val);
};
const stepOpen = (step, emit) => {
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);
@ -169,9 +171,9 @@ export default {
stepDrawerShow();
};
const stepAdd = (emit) => {
const stepAdd = (emit: any) => {
mode.value = "add";
const step = {
const step: any = {
id: nanoid(),
title: "新任务",
type: undefined,
@ -182,31 +184,49 @@ export default {
stepOpen(step, emit);
};
const stepEdit = (step, emit) => {
const stepEdit = (step: any, emit: any) => {
mode.value = "edit";
stepOpen(step, emit);
};
const stepView = (step, emit) => {
const stepView = (step: any, emit: any) => {
mode.value = "view";
stepOpen(step, emit);
};
const changeCurrentPlugin = (step) => {
const changeCurrentPlugin = (step: any) => {
const stepType = step.type;
const pluginDefine = stepPluginDefineList.value.find((p) => {
const pluginDefine = stepPluginDefineList.value.find((p: any) => {
return p.name === stepType;
});
if (pluginDefine) {
step.type = stepType;
step._isAdd = false;
currentPlugin.value = pluginDefine;
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);
})
);
}
}
}
}
console.log("currentStepTypeChanged:", currentStep.value);
console.log("currentStepPlugin:", currentPlugin.value);
};
const stepSave = async (e) => {
const stepSave = async (e: any) => {
console.log("currentStepSave", currentStep.value);
try {
await stepFormRef.value.validate();

View File

@ -1,12 +1,5 @@
<template>
<a-drawer
v-model:visible="taskDrawerVisible"
placement="right"
:closable="true"
width="600px"
class="pi-task-form"
:after-visible-change="taskDrawerOnAfterVisibleChange"
>
<a-drawer v-model:visible="taskDrawerVisible" placement="right" :closable="true" width="600px" class="pi-task-form" :after-visible-change="taskDrawerOnAfterVisibleChange">
<template #title>
编辑任务
<a-button v-if="editMode" @click="taskDelete()">
@ -15,13 +8,7 @@
</template>
<template v-if="currentTask">
<pi-container>
<a-form
ref="taskFormRef"
class="task-form"
:model="currentTask"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form ref="taskFormRef" class="task-form" :model="currentTask" :label-col="labelCol" :wrapper-col="wrapperCol">
<fs-form-item
v-model="currentTask.title"
:item="{
@ -37,13 +24,7 @@
/>
<div class="steps">
<a-form-item
:value="currentTask.steps"
name="steps"
label=""
:wrapper-col="{ span: 24 }"
:rules="[{ required: true, message: '至少需要一个步骤,或者你可以点击标题右边删除按钮删除此任务' }]"
>
<a-form-item :value="currentTask.steps" name="steps" label="" :wrapper-col="{ span: 24 }" :rules="[{ required: true, message: '至少需要一个步骤,或者你可以点击标题右边删除按钮删除此任务' }]">
<a-descriptions title="任务步骤" size="small">
<template #extra>
<a-button type="primary" @click="stepAdd(currentTask)"></a-button>
@ -100,14 +81,14 @@ export default {
}
},
emits: ["update"],
setup(props, ctx) {
setup(props: any, ctx: any) {
function useStep() {
const stepFormRef: Ref<any> = ref(null);
const currentStepIndex = ref(0);
provide("currentStepIndex", currentStepIndex);
const stepAdd = (task) => {
const stepAdd = (task: any) => {
currentStepIndex.value = task.steps.length;
stepFormRef.value.stepAdd((type, value) => {
stepFormRef.value.stepAdd((type: any, value: any) => {
if (type === "save") {
task.steps.push(value);
if (!task.title || task.title === "新任务") {
@ -116,12 +97,12 @@ export default {
}
});
};
const stepEdit = (task, step, stepIndex) => {
const stepEdit = (task: any, step: any, stepIndex: any) => {
currentStepIndex.value = stepIndex;
console.log("step.edit start", task, step, props.editMode);
if (props.editMode) {
console.log("step.edit", task, step);
stepFormRef.value.stepEdit(step, (type, value) => {
stepFormRef.value.stepEdit(step, (type: any, value: any) => {
console.log("step.save", step, type, value);
if (type === "delete") {
task.steps.splice(stepIndex, 1);
@ -131,11 +112,11 @@ export default {
console.log("task.steps", task.steps);
});
} else {
stepFormRef.value.stepView(step, (type, value) => {});
stepFormRef.value.stepView(step, (type: any, value: any) => {});
}
};
const stepDelete = (task, stepIndex) => {
const stepDelete = (task: any, stepIndex: any) => {
Modal.confirm({
title: "确认",
content: `确定要删除此步骤吗?`,
@ -176,34 +157,34 @@ export default {
taskDrawerVisible.value = false;
};
const taskDrawerOnAfterVisibleChange = (val) => {
const taskDrawerOnAfterVisibleChange = (val: any) => {
console.log("taskDrawerOnAfterVisibleChange", val);
};
const taskOpen = (task, emit) => {
const taskOpen = (task: any, emit: any) => {
callback.value = emit;
currentTask.value = _.merge({ steps: {} }, task);
console.log("currentTaskOpen", currentTask.value);
taskDrawerShow();
};
const taskAdd = (emit) => {
const taskAdd = (emit: any) => {
mode.value = "add";
const task = { id: nanoid(), title: "新任务", steps: [], status: null };
const task: any = { id: nanoid(), title: "新任务", steps: [], status: null };
taskOpen(task, emit);
};
const taskEdit = (task, emit) => {
const taskEdit = (task: any, emit: any) => {
mode.value = "edit";
taskOpen(task, emit);
};
const taskView = (task, emit) => {
const taskView = (task: any, emit: any) => {
mode.value = "view";
taskOpen(task, emit);
};
const taskSave = async (e) => {
const taskSave = async (e: any) => {
console.log("currentTaskSave", currentTask.value);
try {
await taskFormRef.value.validate();

View File

@ -113,18 +113,7 @@
<div class="task">
<a-button shape="round" type="dashed" @click="stageAdd()">
<fs-icon icon="ion:add-circle-outline"></fs-icon>
新任务
</a-button>
</div>
</div>
<div v-for="(item, ii) of pipeline.notifications" :key="ii" class="task-container">
<div class="line">
<div class="flow-line"></div>
</div>
<div class="task">
<a-button shape="round" @click="notificationEdit(item, ii as number)">
<fs-icon icon="ion:notifications"></fs-icon>
通知 {{ item.type }}
添加任务
</a-button>
</div>
</div>
@ -140,13 +129,24 @@
</a-button>
</div>
</div>
<div v-for="(item, ii) of pipeline.notifications" :key="ii" class="task-container">
<div class="line">
<div class="flow-line"></div>
</div>
<div class="task">
<a-button shape="round" @click="notificationEdit(item, ii as number)">
<fs-icon icon="ion:notifications"></fs-icon>
通知 {{ item.type }}
</a-button>
</div>
</div>
</div>
</div>
<div v-else class="stage last-stage">
<div class="title">
<pi-editable model-value="" :disabled="true" />
</div>
<div class="tasks">
<div v-if="pipeline.notifications?.length > 0" class="tasks">
<div v-for="(item, index) of pipeline.notifications" :key="index" class="task-container" :class="{ 'first-task': index == 0 }">
<div class="line">
<div class="flow-line"></div>
@ -160,6 +160,19 @@
</div>
</div>
</div>
<div v-else class="tasks">
<div class="task-container first-task">
<div class="line">
<div class="flow-line"></div>
</div>
<div class="task">
<a-button shape="round" type="dashed">
<fs-icon icon="ion:notifications"></fs-icon>
通知未设置
</a-button>
</div>
</div>
</div>
</div>
</div>
</div>
@ -414,7 +427,7 @@ export default defineComponent({
};
function isLastStage(index: number) {
return !props.editMode && index === pipeline.value.stages.length - 1 && pipeline.value.notifications?.length < 1;
return false;
}
return {
stageAdd,