fix: BsUi-组件逻辑修改

src/components/BsUi/Form/Form.vue

@@ -23,9 +23,11 @@
             </template>
 
             <template #label v-else>{{ item.label }}</template>
-            <component :is="item.component" v-model:value="props.formData[item.field]"
-              v-model:checked="props.formData[item.field]" v-bind="item.componentProps"
-              @change="handleFieldChange(item, $event)">
+            <component :is="item.component"
+                       v-model:value="props.formData[item.field]"
+                       v-model:selected-data="props.formData[item.field]"
+                       v-model:checked="props.formData[item.field]" v-bind="item.componentProps"
+                       @change="handleFieldChange(item, $event)">
               <slot>{{ item.componentProps?.buttonText || '' }}</slot>
               <template v-for="slot in item.componentProps.slots" #[slot.slotName]>
                 <component :is="slot.customRender()" v-bind="slot.slotProps"></component>

src/components/BsUi/Modal/index.js

@@ -1,7 +1,8 @@
 import BsModal from './Modal.vue';
-import {h, onBeforeMount, onMounted, reactive, toRaw} from 'vue';
+import { Modal } from 'ant-design-vue';
+import { createApp, h, onBeforeMount, onMounted, reactive, toRaw } from 'vue';
 import { set, get } from 'lodash';
-import { CheckCircleOutlined, CloseCircleOutlined  } from "@ant-design/icons-vue"
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
 
 export const useBsModal = (options, modalRef) => {
   const modalOptions = reactive(options.modalOptions);
@@ -15,23 +16,50 @@ export const useBsModal = (options, modalRef) => {
   };
 
   const initModalOptions = () => {
-    setModalPropsValue("modalExtraProps.okButtonProps", {
+    const sizeMap = {
+      small: '500px',
+      middle: "1000px",
+      large: "1500px",
+    };
+
+    setModalPropsValue('modalExtraProps.okButtonProps', {
       icon: h(CheckCircleOutlined),
-      ...options.modalOptions?.modalExtraProps?.okButtonProps
-    })
+      ...options.modalOptions?.modalExtraProps?.okButtonProps,
+    });
 
-    setModalPropsValue("modalExtraProps.cancelButtonProps", {
+    setModalPropsValue('modalExtraProps.cancelButtonProps', {
       icon: h(CloseCircleOutlined),
-      ...options.modalOptions?.modalExtraProps?.cancelButtonProps
-    })
-  }
+      ...options.modalOptions?.modalExtraProps?.cancelButtonProps,
+    });
+
+    if (options.modalOptions?.size) {
+      setModalPropsValue('width', sizeMap[options.modalOptions?.size]);
+    }
+  };
 
   onMounted(() => {
-    initModalOptions()
+    initModalOptions();
   });
 
+  const showBsModal = (options = {}) => {
+    const modal = Modal.confirm({
+      class: 'bs-modal-confirm',
+      closable: true,
+      centered: true,
+      icon: () => h(null),
+      okText: '确认',
+      cancelText: '取消',
+      ...modalOptions,
+      ...modalOptions?.modalExtraProps,
+      ...options,
+    });
+
+    return modal;
+  };
+
   return {
     modalOptions,
+    showBsModal,
     setModalPropsValue,
     getModalPropsValue,
   };

src/components/BsUi/styles/index.less

@@ -6,7 +6,7 @@
     padding: 0 20px;
   }
   .ant-modal-body {
-    padding: 0 20px;
+    padding: 10px 20px;
   }
   .ant-modal-footer {
     border-top: 1px solid rgba(#888888, 0.2);
@@ -14,3 +14,36 @@
     padding: 10px;
   }
 }
+
+.bs-modal-confirm {
+  .ant-modal-content {
+    padding: 0;
+  }
+  .ant-modal-header {
+    padding: 0 20px;
+  }
+  .ant-modal-body {
+    padding: 20px 0 0 0;
+  }
+
+  .ant-modal-confirm-body {
+    padding: 0 20px;
+  }
+  .ant-modal-confirm-btns {
+    border-top: 1px solid rgba(#888888, 0.2);
+    margin: 0;
+    padding: 10px;
+  }
+  .ant-modal-confirm-content {
+    width: 100%;
+    padding: 10px 0;
+    max-width: 100%!important;
+    margin: 0!important;
+  }
+}
+
+#app {
+  .ant-tabs-nav {
+    margin: 0;
+  }
+}