jeecg-vue3 中实现弹出窗口。a-collapse，a-select，BasicModal语法的简单使用

1.双层弹窗，上图效果

2.单层弹窗，上图效果

3.系统自带的notification弹窗，上图效果

3.1代码实现

  function click(){
    notification.warning({
      message: '温馨提醒',
      description: '这是一段描述' || '',
      duration: 0,
    });
  }

4.弹窗什么支持可修改

title、content、helpMessage、label

centered: true,//TODO 属性没效果，我也不知道为什么（应该支持取消、确认按钮居中）

5.代码实现

5.1智能预审按钮

<div class="footer-style">
      <div style="margin: 0 auto">
        <a-button @click="handleCheckPre" :disabled="isDisabled" class="mr-2 znys-button"> 智能预审 </a-button>
      </div>
    </div>

  //智能预审
  const handleCheckPre = () => {
    openCheckPreModal(true, {
      checkPreList
    })
  }

5.2智能预审调用弹出窗

<template 
 <CheckPreModal @register="registerModal"></CheckPreModal>
</template>
<script lang="ts" setup>
import { useModal } from '/@/components/Modal';
import CheckPreModal from '../../prereview/CheckPreModal.vue';

const [registerModal, { openModal: openCheckPreModal }] = useModal();

  //智能预审
  const handleCheckPre = () => {
    openCheckPreModal(true, {
      checkPreList
    })
  }
</script>

5.3智能预审弹窗实现

<template>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      title="智能预审"
      :helpMessage="['选择预审规则后点击确认，进行预审']"
      @ok="handleCheckPre"
      @cancel="closeModal"
    >
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 13 }">
        <a-form-item label="选择预审规则">
          <a-select
            v-model:value="selectedValue" 
            style="width: 330px;"
          >
            <a-select-option v-for="item in checkPreList" :key="item.ruleCode" :value="item.ruleCode">
              {{ item.ruleDesc }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </BasicModal>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { getCheckPreInfoApi } from './checkPre.api';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicModal, useModalInner } from '/@/components/Modal';


  let checkPreList = [];
  const { createWarningModal, createMessage } = useMessage();
  const selectedValue = ref(checkPreList.length > 0 ? checkPreList[0].value : null);

  const [register, { closeModal }] = useModalInner(async (data) => {
    checkPreList = data.checkPreList;
  });

  const handleCheckPre = () => {
    if (!selectedValue.value) {
      createMessage.warn('预审规则不能为空');
      return;
    }
    getCheckPreInfoApi({ruleCode: selectedValue.value}).then((res)=>{
      // closeModal(); //上一层是否关闭
      
    });
  }

</script>
<style scoped lang="less">
</style>

5.4二层弹窗提示实现

<template>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      title="智能预审"
      :helpMessage="['选择预审规则后点击确认，进行预审']"
      @ok="handleCheckPre"
      @cancel="closeModal"
    >
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 13 }">
        <a-form-item label="选择预审规则">
          <a-select
            v-model:value="selectedValue" 
            style="width: 330px;"
          >
            <a-select-option v-for="item in checkPreList" :key="item.ruleCode" :value="item.ruleCode">
              {{ item.ruleDesc }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </BasicModal>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { getCheckPreInfoApi } from './checkPre.api';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicModal, useModalInner } from '/@/components/Modal';


  let checkPreList = [];
  const { createWarningModal, createMessage } = useMessage();
  const selectedValue = ref(checkPreList.length > 0 ? checkPreList[0].value : null);

  const [register, { closeModal }] = useModalInner(async (data) => {
    checkPreList = data.checkPreList;
  });

  const handleCheckPre = () => {
    if (!selectedValue.value) {
      createMessage.warn('预审规则不能为空');
      return;
    }
    getCheckPreInfoApi({ruleCode: selectedValue.value}).then((res)=>{
      // closeModal(); //上一层是否关闭
      createWarningModal({
        title: '提示',
        centered: true,//TODO 没效果
        content: res,
        style: {
          width: '330px',
        },
      });
    });
  }

</script>
<style scoped lang="less">
</style>

二次弹窗中提示框单独实现

<template>
    <a-button @click="clickTip()" >弹出提示框</a-button>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { getCheckPreInfoApi } from './checkPre.api';
  import { useMessage } from '/@/hooks/web/useMessage';

  const content = '可实现动态效果';
  const { createWarningModal } = useMessage();
function clickTip() {
  createWarningModal({
        title: '提示',
        centered: true,//TODO 没效果
        content: '这是文本实现',//content: content,可实现动态效果
        style: {
          width: '330px',
        },
      });
}

</script>
<style scoped lang="less">
</style>

5.5a-collapse的使用

<template>
<a-collapse v-model:activeKey="activeKey" :bordered="true">
        <a-collapse-panel key="xxlr" header="信息录入" style="font-size: 18px; background-color: white;">
    <a-tab></a-tab>
   </a-collapse-panel>
    </a-collapse>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const activeKey = ref(['xxlr']);
</script>

5.6a-select的使用

<template>
<a-select
    v-model:value="selectedValue" 
     style="width: 330px;"
    >
    <a-select-option v-for="item in checkPreList" :key="item.ruleCode" :value="item.ruleCode">
    {{ item.ruleDesc }}
    </a-select-option>
  </a-select>
</template>
<script lang="ts" setup>
  let checkPreList = [];
</script>

7.BasicModal的使用

<template>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      title="智能预审"
      :helpMessage="['选择预审规则后点击确认，进行预审']"
      @ok="handleCheckPre"
      @cancel="closeModal"
    >
     <span>可以参考智能预审</span>
    </BasicModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicModal, useModalInner } from '/@/components/Modal';


  let checkPreList = [];
  const { createMessage } = useMessage();

  const [register, { closeModal }] = useModalInner(async (data) => {
    checkPreList = data.checkPreList;
  });

  const handleCheckPre = () => {
    if (false) {
      createMessage.warn('预审规则不能为空');
      return;
    }
    
  }

</script>
<style scoped lang="less">
</style>