fix: 基础表格新增弹窗例子

src/views/table-demo/components/DemoBaseModal.vue

@@ -0,0 +1,47 @@
+<template>
+  <bs-modal
+    :visible="modalOptions.visible"
+    :width="modalOptions.width"
+    :title="modalOptions.title"
+    :modal-extra-props="modalOptions.modalExtraProps"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <div>1111</div>
+  </bs-modal>
+</template>
+<script setup lang="jsx">
+  import BsModal, { useBsModal } from '/@/components/BsUi/Modal/index.js';
+  const {
+    modalOptions,
+    getModalPropsValue: getMVal,
+    setModalPropsValue: setMVal,
+  } = useBsModal({
+    modalOptions: {
+      width: '70%',
+      title: '标题',
+      visible: false,
+      modalExtraProps: {
+        destroyOnClose: true,
+      },
+    },
+  });
+
+  const showModal = () => {
+    // setMVal("width", "100%")
+    setMVal('title', '自定义标题');
+    setMVal('visible', true);
+  };
+
+  const handleCancel = () => {
+    setMVal('visible', false);
+  };
+
+  const handleOk = ({}) => {
+    setMVal('visible', false);
+  };
+
+  defineExpose({
+    showModal,
+  });
+</script>

src/views/table-demo/index.vue

@@ -14,6 +14,9 @@
       <template #toolbarLeft>
         <a-space>
           <a-button type="primary" size="small" @click="openModal"> 表格选择器弹窗 </a-button>
+
+          <a-button type="primary" size="small" @click="openModalBase"> 弹窗 </a-button>
+
           <a-button type="primary" size="small" @click="handleRefreshTable"> 刷新表格事件 </a-button>
           <span>累计客户：XXX｜黑名单客户：XXX｜S级客户 </span>
         </a-space>
@@ -22,6 +25,7 @@
 
     <add-or-edit-drawer ref="addOrEditDrawerRef" />
     <demo-table-selector-modal ref="demoTableSelectorModal" />
+    <demo-base-modal ref="demoBaseModal"/>
   </div>
 </template>
 
@@ -30,14 +34,23 @@
   import { onMounted, ref } from 'vue';
   import AddOrEditDrawer from '/@/views/table-demo/components/AddOrEditDrawer.vue';
   import DemoTableSelectorModal from "/@/views/table-demo/components/DemoTableSelectorModal.vue";
+  import DemoBaseModal from "/@/views/table-demo/components/DemoBaseModal.vue";
 
   const addOrEditDrawerRef = ref(null);
   const demoTableSelectorModal = ref(null);
+  const demoBaseModal = ref(null)
 
   const openModal = () => {
     demoTableSelectorModal.value.showModal();
   }
 
+  const openModalBase = () => {
+    console.log("demoBaseModal", demoBaseModal)
+
+    demoBaseModal.value.showModal();
+  }
+
+
   const handleRefreshTable = () => {
     fetchTableData({ a: new Date() });
   }