mirror of https://github.com/certd/certd
perf: 优化通知格式
parent
27a8a57cf5
commit
c3c5006daa
|
@ -0,0 +1,99 @@
|
||||||
|
<template>
|
||||||
|
<div class="remote-input">
|
||||||
|
<a-input v-bind="attrs" :value="modelValue" @update:value="onInputChange"></a-input>
|
||||||
|
<fs-button class="ml-1" v-bind="button" :text="button?.text || title" @click="openDialog"></fs-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { doRequest } from "/@/components/plugins/lib";
|
||||||
|
import { inject, ref, useAttrs } from "vue";
|
||||||
|
import { useFormWrapper } from "@fast-crud/fast-crud";
|
||||||
|
import { notification } from "ant-design-vue";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "RemoteInput",
|
||||||
|
});
|
||||||
|
const { openCrudFormDialog } = useFormWrapper();
|
||||||
|
const props = defineProps<{
|
||||||
|
modelValue: string;
|
||||||
|
title: string;
|
||||||
|
action: string;
|
||||||
|
form: any;
|
||||||
|
button?: any;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
"update:modelValue": any;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const getScope: any = inject("get:scope");
|
||||||
|
const getPluginType: any = inject("get:plugin:type");
|
||||||
|
|
||||||
|
const attrs = useAttrs();
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
function onInputChange(value: string) {
|
||||||
|
emit("update:modelValue", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openDialog() {
|
||||||
|
function createCrudOptions() {
|
||||||
|
return {
|
||||||
|
crudOptions: {
|
||||||
|
columns: {
|
||||||
|
...props.form.columns,
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
wrapper: {
|
||||||
|
title: props.title,
|
||||||
|
saveRemind: false,
|
||||||
|
},
|
||||||
|
afterSubmit() {
|
||||||
|
notification.success({ message: "操作成功" });
|
||||||
|
},
|
||||||
|
async doSubmit({ form }: any) {
|
||||||
|
return await doPluginFormSubmit(form);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
const { crudOptions } = createCrudOptions();
|
||||||
|
await openCrudFormDialog({ crudOptions });
|
||||||
|
}
|
||||||
|
|
||||||
|
const doPluginFormSubmit = async (data: any) => {
|
||||||
|
if (loading.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
const pluginType = getPluginType();
|
||||||
|
const { form } = getScope();
|
||||||
|
const res = await doRequest({
|
||||||
|
type: pluginType,
|
||||||
|
typeName: form.type,
|
||||||
|
action: props.action,
|
||||||
|
input: pluginType === "plugin" ? form.input : form,
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
//获取返回值 填入到input中
|
||||||
|
emit("update:modelValue", res);
|
||||||
|
return res;
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.remote-input {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.a-input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,16 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="remote-select">
|
<div class="remote-select">
|
||||||
<div class="flex flex-row">
|
<div class="flex flex-row">
|
||||||
<a-select
|
<a-select class="remote-select-input" show-search :filter-option="filterOption" :options="optionsRef" :value="value" v-bind="attrs" @click="onClick" @update:value="emit('update:value', $event)" />
|
||||||
class="remote-select-input"
|
|
||||||
show-search
|
|
||||||
:filter-option="filterOption"
|
|
||||||
:options="optionsRef"
|
|
||||||
:value="value"
|
|
||||||
v-bind="attrs"
|
|
||||||
@click="onClick"
|
|
||||||
@update:value="emit('update:value', $event)"
|
|
||||||
/>
|
|
||||||
<div class="ml-5">
|
<div class="ml-5">
|
||||||
<fs-button :loading="loading" title="刷新选项" icon="ion:refresh-outline" @click="refreshOptions"></fs-button>
|
<fs-button :loading="loading" title="刷新选项" icon="ion:refresh-outline" @click="refreshOptions"></fs-button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -26,7 +17,7 @@ import { inject, ref, useAttrs, watch } from "vue";
|
||||||
import { PluginDefine } from "@certd/pipeline";
|
import { PluginDefine } from "@certd/pipeline";
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "RemoteSelect"
|
name: "RemoteSelect",
|
||||||
});
|
});
|
||||||
|
|
||||||
const props = defineProps<
|
const props = defineProps<
|
||||||
|
@ -87,14 +78,14 @@ const getOptions = async () => {
|
||||||
type: pluginType,
|
type: pluginType,
|
||||||
typeName: form.type,
|
typeName: form.type,
|
||||||
action: props.action,
|
action: props.action,
|
||||||
input: pluginType === "plugin" ? form.input : form
|
input: pluginType === "plugin" ? form.input : form,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
onError(err: any) {
|
onError(err: any) {
|
||||||
hasError.value = true;
|
hasError.value = true;
|
||||||
message.value = `获取选项出错:${err.message}`;
|
message.value = `获取选项出错:${err.message}`;
|
||||||
},
|
},
|
||||||
showErrorNotify: false
|
showErrorNotify: false,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
if (res && res.length > 0) {
|
if (res && res.length > 0) {
|
||||||
|
@ -129,14 +120,14 @@ watch(
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
form: props.form,
|
form: props.form,
|
||||||
watched: values
|
watched: values,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async () => {
|
async () => {
|
||||||
await getOptions();
|
await getOptions();
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true
|
immediate: true,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import SynologyIdDeviceGetter from "./synology/device-id-getter.vue";
|
import SynologyIdDeviceGetter from "./synology/device-id-getter.vue";
|
||||||
import RemoteSelect from "./common/remote-select.vue";
|
import RemoteSelect from "./common/remote-select.vue";
|
||||||
|
import RemoteInput from "./common/remote-input.vue";
|
||||||
import CertDomainsGetter from "./common/cert-domains-getter.vue";
|
import CertDomainsGetter from "./common/cert-domains-getter.vue";
|
||||||
import OutputSelector from "/@/components/plugins/common/output-selector/index.vue";
|
import OutputSelector from "/@/components/plugins/common/output-selector/index.vue";
|
||||||
import DnsProviderSelector from "/@/components/plugins/cert/dns-provider-selector/index.vue";
|
import DnsProviderSelector from "/@/components/plugins/cert/dns-provider-selector/index.vue";
|
||||||
|
@ -21,6 +22,7 @@ export default {
|
||||||
|
|
||||||
app.component("SynologyDeviceIdGetter", SynologyIdDeviceGetter);
|
app.component("SynologyDeviceIdGetter", SynologyIdDeviceGetter);
|
||||||
app.component("RemoteSelect", RemoteSelect);
|
app.component("RemoteSelect", RemoteSelect);
|
||||||
|
app.component("RemoteInput", RemoteInput);
|
||||||
app.component("CertDomainsGetter", CertDomainsGetter);
|
app.component("CertDomainsGetter", CertDomainsGetter);
|
||||||
app.component("InputPassword", InputPassword);
|
app.component("InputPassword", InputPassword);
|
||||||
},
|
},
|
||||||
|
|
|
@ -15,7 +15,7 @@ import { Modal } from "ant-design-vue";
|
||||||
import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
|
import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: "DeviceIdGetter"
|
name: "DeviceIdGetter",
|
||||||
});
|
});
|
||||||
|
|
||||||
const props = defineProps<ComponentPropsType>();
|
const props = defineProps<ComponentPropsType>();
|
||||||
|
@ -38,9 +38,9 @@ async function loginWithOTPCode(otpCode: string) {
|
||||||
typeName: form.type,
|
typeName: form.type,
|
||||||
action: "LoginWithOPTCode",
|
action: "LoginWithOPTCode",
|
||||||
data: {
|
data: {
|
||||||
otpCode
|
otpCode,
|
||||||
},
|
},
|
||||||
input: form
|
input: form,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -61,7 +61,7 @@ async function getDeviceId() {
|
||||||
const res = await loginWithOTPCode(otpCodeRef.value);
|
const res = await loginWithOTPCode(otpCodeRef.value);
|
||||||
console.log("did返回", res);
|
console.log("did返回", res);
|
||||||
emit("update:value", res.did);
|
emit("update:value", res.did);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue