certd/packages/ui/certd-client/src/components/plugins/synology/device-id-getter.vue

<template>
  <div>
    <contextHolder />
    <a-input v-bind="attrs" :value="value" :allow-clear="true" @update:value="emit('update:value', $event)">
      <template #suffix>
        <a-tag class="cursor-pointer" @click="getDeviceId">获取设备ID</a-tag>
      </template>
    </a-input>
  </div>
</template>

<script lang="tsx" setup>
import { inject, ref, useAttrs } from "vue";
import { Modal } from "ant-design-vue";
import { ComponentPropsType, doRequest } from "/@/components/plugins/lib";
import { getInputFromForm } from "../common/utils";

defineOptions({
  name: "DeviceIdGetter",
});

const props = defineProps<ComponentPropsType>();
const emit = defineEmits<{
  "update:value": any;
}>();

const attrs = useAttrs();

const otpCodeRef = ref("");
const getScope: any = inject("get:scope");
const getPluginType: any = inject("get:plugin:type", () => {
  return "access";
});

async function loginWithOTPCode(otpCode: string) {
  const { form } = getScope();
  const pluginType = getPluginType();
  const { input, record } = getInputFromForm(form, pluginType);
  return await doRequest({
    type: pluginType,
    typeName: form.type,
    action: "LoginWithOPTCode",
    data: {
      otpCode,
    },
    input: input,
    record,
  });
}

const [modal, contextHolder] = Modal.useModal();
async function getDeviceId() {
  //打开对话框
  modal.confirm({
    title: "请输入OTP验证码",
    maskClosable: true,
    content: () => {
      return (
        <a-form-item-rest>
          <a-input v-model:value={otpCodeRef.value} placeholder="请输入OTP验证码" />
        </a-form-item-rest>
      );
    },
    onOk: async () => {
      const res = await loginWithOTPCode(otpCodeRef.value);
      console.log("did返回", res);
      emit("update:value", res.did);
    },
  });
}
</script>