组件重写

io.sc.platform.core.frontend/src/platform/components/dialog/WDialog.vue

@@ -1,10 +1,16 @@
 <template>
-  <q-dialog v-model="isShowRef" allow-focus-outside v-bind="attrs">
+  <!-- 组件默认带上的官方属性说明
+    allow-focus-outside:  允许对话框外的元素可聚焦（不设置该值会导致luckysheet在窗口中无法编辑）
+    no-esc-dismiss:       用户不能按 ESC 键关闭对话框；如果还设置了 'persistent' 属性，则无需设置它
+    no-backdrop-dismiss:  用户不能通过单击对话框外部来关闭对话框；如果还设置了 'persistent' 属性，则无需设置它
+    no-refocus:           当对话框被隐藏时，不要重新聚焦以前有聚焦过的 DOM 元素
+  -->
+  <q-dialog v-model="dialog.show" :maximized="dialog.maximized" allow-focus-outside no-esc-dismiss no-backdrop-dismiss no-refocus v-bind="attrs">
     <q-card
       :style="{
-        width: maximizedRef ? '100vw' : props.width,
+        width: dialog.maximized ? '100vw' : props.width,
         'max-width': '100vw',
-        height: maximizedRef ? '100vh' : props.height,
+        height: dialog.maximized ? '100vh' : props.height,
         'max-height': '100vh',
       }"
     >
@@ -14,22 +20,17 @@
             <div class="flex justify-between">
               <div class="text-h6">{{ title }}</div>
               <div class="flex justify-end gap-4">
-                <template v-for="(btn, index) in actions as any" :key="index">
+                <template v-if="buttons && buttons.length > 0">
-                  <q-btn
+                  <template v-for="(btn, index) in buttons as any" :key="index">
-                    v-if="typeof btn === 'object'"
+                    <q-btn v-if="typeof btn === 'object'" :loading="false" :color="'primary'" v-bind="btn" @click="btn.click ? btn.click() : () => {}"> </q-btn>
-                    :loading="btn.loading ? btn.loading : false"
+                  </template>
-                    :label="btn.label"
-                    :icon="btn.icon"
-                    color="primary"
-                    @click="btn.click()"
-                  >
-                  </q-btn>
                 </template>
-                <q-btn v-if="canMaximize" dense flat :icon="!maximizedRef ? PlatformIconEnum.全屏 : PlatformIconEnum.退出全屏" @click="maximizeBtnClick">
+                <slot name="buttons"></slot>
-                  <q-tooltip v-if="!maximizedRef">全屏</q-tooltip>
+                <q-btn v-if="canMaximize" dense flat :icon="!dialog.maximized ? IconEnum.全屏 : IconEnum.退出全屏" @click="maximizeBtnClick">
-                  <q-tooltip v-else-if="maximizedRef">退出全屏</q-tooltip>
+                  <q-tooltip v-if="!dialog.maximized">全屏</q-tooltip>
+                  <q-tooltip v-else-if="dialog.maximized">退出全屏</q-tooltip>
                 </q-btn>
-                <q-btn v-close-popup dense flat :icon="PlatformIconEnum.关闭">
+                <q-btn v-close-popup dense flat :icon="IconEnum.关闭">
                   <q-tooltip>关闭</q-tooltip>
                 </q-btn>
               </div>
@@ -38,17 +39,9 @@
           <q-separator />
         </div>
         <div style="height: calc(100% - 69px)">
-          <q-card-section v-if="!splitter" style="height: 100%" class="scroll">
+          <q-card-section style="height: 100%; padding: 0px" class="scroll">
-            <slot name="content"></slot>
+            <slot></slot>
           </q-card-section>
-          <q-splitter v-else style="height: 100%" v-bind="props.splitter">
-            <template #before>
-              <slot name="splitterBefore"></slot>
-            </template>
-            <template #after>
-              <slot name="splitterAfter"></slot>
-            </template>
-          </q-splitter>
         </div>
       </div>
     </q-card>
@@ -56,42 +49,39 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, useAttrs } from 'vue';
+import { reactive, useAttrs } from 'vue';
-import { PlatformIconEnum } from '@/platform/components/utils';
+import { IconEnum } from '@/platform/enums';
-import '@/css/tailwind.css';
 
 const attrs = useAttrs();
-
 const props = defineProps({
-  canMaximize: { type: Boolean, default: true },
   title: { type: String, default: '' },
   width: { type: String, default: '70%' },
   height: { type: String, default: '70%' },
-  actions: { type: Array, default: () => [] },
+  canMaximize: { type: Boolean, default: true },
-  splitter: { type: Object, default: undefined },
+  buttons: { type: Array, default: () => [] },
 });
-
 const emit = defineEmits<{
   (
-    e: 'maximize', // 全屏按钮点击事件
+    e: 'maximized', // 全屏按钮点击事件
     maximized: boolean, // 第一个参数，true:全屏状态,false:退出全屏
   ): void;
 }>();
 
-const isShowRef = ref<boolean>(false);
+const dialog = reactive({
-const maximizedRef = ref<boolean>(attrs.maximized);
+  show: false,
+  maximized: attrs.maximized || false,
+});
 
 const maximizeBtnClick = () => {
-  maximizedRef.value = !maximizedRef.value;
+  dialog.maximized = !dialog.maximized;
-  emit('maximize', attrs.maximized);
+  emit('maximized', dialog.maximized);
 };
 
 const show = () => {
-  isShowRef.value = true;
+  dialog.show = true;
 };
-
 const hide = () => {
-  isShowRef.value = false;
+  dialog.show = false;
 };
 
 defineExpose({