APP.vue

APP.vue

<script setup lang="ts">

  import { onMounted } from 'vue'

  import NavbarItem from './components/NavbarItem.vue'

  import TelopItem from './components/TelopItem.vue'

  import MenuItem from './components/MenuItem.vue'

  import type NavbarModel from '@/models/NavbarModel'

  const navbarModel: NavbarModel = ({

    // 現在日付の表示

    nowDate: `${(new Date).toLocaleDateString()}`,

    // ユーザー名（漢字）の表示

    userName: '野村 太郎'

  });

  onMounted(() => {

    console.log(`App Component Mounted.`)

    // コンテンツの表示

    let targetElement = document.getElementById('loading');

    if (targetElement) {

      targetElement.style.display = 'none';

    }

    targetElement = document.getElementById('showing');

    if (targetElement) {

      targetElement.style.display = 'block';

    }

  })

</script>

<template>

  <NavbarItem :navbarModel="navbarModel"/>

  <!-- Load Content-->

  <div class="container px-4 px-lg-5" id="loading" style="display: block;">

    <!-- Heading Row-->

    <div class="row gx-4 gx-lg-5 align-items-center my-5">

      <div class="card my-5 py-4" style="background-color:seashell">

        <div class="card-body">

          <h3 class="font-weight-light">処理中です。しばらくお待ちください。</h3>

        </div>

      </div>

    </div>

    <!-- Content Row-->

    <div class="row gx-4 gx-lg-5"></div>

  </div>

  <!-- Page Content-->

  <div class="container px-4 px-lg-5" id="showing" style="display: none;">

    <!-- Heading Row-->

    <TelopItem />

    <!-- Content Row-->

    <MenuItem />

  </div>

  <!-- Footer-->

  <footer class="py-5 bg-dark">

    <div class="container px-4 px-lg-5"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2023</p></div>

  </footer>

</template>

NavbarItem.vue:

<script setup lang="ts">

  import {openModal} from '@kolirt/vue-modal'

  import { computed, defineAsyncComponent, type Ref } from 'vue'

  import type NavbarModel from '@/models/NavbarModel'

  import { onMounted, ref } from 'vue';  

  import SimpleModal from './SimpleModal.vue';  

  // 定义响应式数据  

  const authenticationData = ref(null);  

  const navbarData = ref<NavbarModel>({} as NavbarModel); // 新的响应式数据对象

  const props = defineProps<{

    navbarModel: NavbarModel

  }>()

  // 初始化navbarData为props.navbarModel的值  

  onMounted(() => {  

    navbarData.value = { ...props.navbarModel };  

  });  

  const navbarModel: Ref<NavbarModel> = computed(() => ({ ...props.navbarModel }));

  function runModal() {

    openModal(

      defineAsyncComponent(() => import('./SimpleModal.vue')),

      {

        test: 'modal1'

      },

      {

        modalStyle: {

          align: 'top'

        }

      })

      // runs when modal is closed via confirmModal

      .then((data) => {

        console.log('success', data)

      })

      // runs when modal is closed via closeModal or esc

      .catch(() => {

        console.log('catch')

      })

  }

  // 定义方法，用于处理从SimpleModal组件发送的事件  

  function handleAuthenticationSuccess(data) {  

    authenticationData.value = data;

    // 更新userName  

    navbarData.value.userName = authenticationData.value.name;    

  }  

</script>

<template>

  <!-- Responsive navbar-->

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <div class="container px-5">

      <a class="navbar-brand" href="#!">{{ navbarModel.nowDate }}</a>

      <div class="dropdown">

        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">

          {{ navbarModel.userName }}

        </button>

        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">

          <li><a class="dropdown-item" id="userProfile:244409" href="javascript:onProfileClick(244409);">プロファイル１*</a></li>

          <li><a class="dropdown-item" id="userProfile:244410" href="javascript:onProfileClick(244410);">プロファイル２</a></li>

          <li><a class="dropdown-item" id="userProfileOther" href="#">

            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test-modal" @click=runModal>

              他のアカウントで再認証

            </button>

          </a></li>

        </ul>

      </div>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#!">Home</a></li>

          <li class="nav-item"><a class="nav-link" href="#!">About</a></li>

          <li class="nav-item"><a class="nav-link" href="#!">Contact</a></li>

          <li class="nav-item"><a class="nav-link" href="#!">Services</a></li>

        </ul>

      </div>

    </div>

  </nav>

  <ModalTarget />

</template>

./SimpleModal.vue'；

<script setup lang="ts">

import { closeModal, confirmModal } from '@kolirt/vue-modal'

import axios from 'axios'

import { ref } from 'vue'

import { defineEmits } from 'vue'  

const userID = ref('');  

const password = ref('');  

const props = defineProps({

  test: {}

})

const emit = defineEmits(['authenticationSuccess'])

async function confirmAuthentication() {

  try {

    const response = await axios.post('http://localhost:20181/soap', {

      userID: userID.value,  

      password: password.value  

    });

    console.log(response.data);  

    // 如果成功接收到正确的数据，关闭模态窗口

    if (response.data) {

      emit('authenticationSuccess', response.data);  

      confirmModal()

    }

  } catch (error) {

    console.error(error);

  }

}

 

function handleAuthentication() {

  confirmAuthentication();  

}

</script>

<template>

  <SimpleModal title="再認証" size="sm">

    <!-- <pre>props: {{ props }}</pre> -->

    <div class="row gx-md-5">

      <div class="col-md-4">

        <img class="" src="/image.png" />

      </div>

      <div class="col-md-8">

        <form>

          <div class="mb-3">

            <label for="exampleFormControlInput1" class="form-label">ユーザーID</label>

            <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="NRI1234567">

          </div>

          <div class="mb-3">

            <label for="inputPassword5" class="form-label">パスワード</label>

            <input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">

            <!-- <div id="passwordHelpBlock" class="form-text">

              Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

            </div>

          //@click="confirmModal({ value: 'some values' })"-->

          </div>

        </form>

      </div>

    </div>

    <template #footer>

      <button @click="handleAuthentication"  class="btn btn-primary">

        認証

      </button>

      <button @click="closeModal()" class="btn btn-secondary">閉じる</button>

    </template>

  </SimpleModal>

</template>