fdb2 1.0.12 → 1.0.14

package/src/components/dataGrid/index.vue

@@ -1,163 +0,0 @@
-<template>
-<div class="datagrid-container">
-  <div class="datagrid-inner">
-    <table class="table table-light table-striped table-hover">
-        <thead class="table-light">
-            <tr>
-                <th v-for="column in props.columns" :key="column.name" scope="col" class="datagrid-th" :style="column.headerStyle||''" 
-                    @click="column.sortable !== false && handleSort(column.name)"
-                    :class="{ 'sortable': column.sortable !== false }"> 
-                  <slot :name="column.name+'_header'" :column="column">
-                        <div class="header-content">
-                            <span>{{column.text||column.name||''}}</span>
-                            <span v-if="column.sortable !== false" class="sort-icon">
-                                <i v-if="props.sortField === column.name && props.sortOrder === 'ASC'" class="bi bi-caret-up-fill"></i>
-                                <i v-else-if="props.sortField === column.name && props.sortOrder === 'DESC'" class="bi bi-caret-down-fill"></i>
-                                <i v-else class="bi bi-caret-up text-muted opacity-50"></i>
-                            </span>
-                        </div>
-                    </slot>                    
-                </th>
-            </tr>
-        </thead>
-        <tbody class="table-group-divider">
-            <tr v-for="(row, index) in props.data" :key="index" @click="emits('rowClicked', row, index)" style="cursor: pointer;">
-                <td v-for="column in props.columns" :key="column.name">
-                    <slot :name="column.name||column" :row="row" :column="column">
-                        <component v-if="column.component" :is="column.component"></component>
-                        <span v-else>{{ renderDataItem(row, column) }}</span>
-                    </slot>                    
-                </td>
-            </tr>
-        </tbody>
-        <tfoot>
-            <slot name="footer" :columns="props.columns"></slot>   
-        </tfoot>
-    </table>
-    <Loading :isLoading="props.isLoading" :message="props.loadingMessage"></Loading>
-  </div>
-    <!-- 分页组件 -->
-    <Pagination v-if="props.showPagination" :currentPage="props.currentPage" :totalPages="props.totalPages" @pageChanged="pageChanged"></Pagination>
-</div>
-</template>
-  
-<script setup lang="ts">
-  import { ref, computed, defineComponent, type Component } from 'vue';
-  import Loading from '../loading/index.vue';
-  import Pagination from './pagination.vue';
-
-  type ColumnType = {
-    name: string;
-    text?: string;
-    component?: Component;
-    headerStyle?: string;
-    style?: string;
-    sortable?: boolean;
-    formatter?: (row: any, column: ColumnType) => string;
-  };
-  
-  const props = defineProps({
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    loadingMessage: {
-      type: String,
-      default: '加载中...'
-    },
-    // 总页数
-    totalPages: {
-        type: Number,
-        default: 1
-    },
-    currentPage: {
-        type: Number,
-        default: 1,
-    },
-    showPagination: {
-        type: Boolean,
-        default: true
-    },
-    data: {
-        type: Array<any>,
-        default: []
-    },
-    columns: {
-        type: Array<ColumnType>,
-        default: []
-    },
-    sortField: {
-        type: String,
-        default: ''
-    },
-    sortOrder: {
-        type: String,
-        default: '' // ASC, DESC, ''
-    }
-  });
-
-  const emits = defineEmits(['pageChanged', 'rowClicked', 'sortChanged']);
-
-  function renderDataItem(row: any, column: any) {
-    if(typeof column === 'string') return row[column];
-    if(column.formatter) {
-        return column.formatter(row, column);
-    }
-    return row[column.name];
-  }
-
-  function pageChanged(page: number) {
-    emits('pageChanged', page);
-  }
-
-  function handleSort(field: string) {
-    let order: 'ASC' | 'DESC' | '' = 'ASC';
-    if (props.sortField === field) {
-        if (props.sortOrder === 'ASC') {
-            order = 'DESC';
-        } else if (props.sortOrder === 'DESC') {
-            order = ''; // 取消排序
-        }
-    }
-    emits('sortChanged', { field: order ? field : '', order });
-  }
-
-</script>
-  
-<style scoped>
-  .datagrid-container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-  .datagrid-inner {
-    flex: 1;
-    overflow: auto;
-    margin-bottom: 10px;
-  }
-  .datagrid-th {
-    min-width: 80px;
-    white-space: nowrap;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background-color: #f8f9fa;
-  }
-  .datagrid-th.sortable {
-    cursor: pointer;
-    user-select: none;
-  }
-  .datagrid-th.sortable:hover {
-    background-color: #e9ecef;
-  }
-  .header-content {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  .sort-icon {
-    display: flex;
-    align-items: center;
-    font-size: 0.75rem;
-  }
-</style>  

package/src/components/dataGrid/pagination.vue

@@ -1,106 +0,0 @@
-<template>
-    <!-- 分页组件 -->
-    <nav aria-label="Page navigation" class="px-3">
-        <ul class="pagination">
-            <li class="page-item" :class="{ disabled: currentPage === 1 }">
-                <a class="page-link" href="#" @click.prevent="prevPage">上一页</a>
-            </li>
-            
-            <!-- 生成页码列表 -->
-            <li v-for="page in visiblePages" 
-                :key="page" 
-                class="page-item" 
-                :class="{ disabled: page==='...', active: currentPage===page }">
-                <a class="page-link" 
-                    href="#" 
-                    @click.prevent="goToPage(page)"
-                    :tabindex="page==='...'? -1 : 0">
-                    {{ page }}
-                </a>
-            </li>
-            
-            <li class="page-item" :class="{ disabled: currentPage === totalPages }">
-                <a class="page-link" href="#" @click.prevent="nextPage">下一页</a>
-            </li>
-        </ul>
-    </nav>
-</template>
-    
-<script setup lang="ts">
-import { computed } from 'vue';
-    
-const props = defineProps({
-    // 总页数
-    totalPages: {
-        type: Number,
-        default: 1
-    },
-    currentPage: {
-        type: Number,
-        default: 1,
-    },
-});
-
-const emits = defineEmits(['pageChanged']);
-
-// 可见的页码列表（包括省略号）
-const visiblePages = computed(() => {
-    const pages = [] as Array<any>;
-    const maxVisiblePages = 5; // 最大可见页码数（不包括省略号）
-    const current = props.currentPage;
-    
-    // 总页数较少时，显示所有页码
-    if (props.totalPages <= maxVisiblePages) {
-        for (let i = 1; i <= props.totalPages; i++) {
-            pages.push(i);
-        }
-        return pages;
-    }
-    
-    // 总页数较多时，智能显示部分页码
-    if (current <= 3) {
-        // 当前页在前3页，显示前5页
-        pages.push(1, 2, 3, 4, 5);
-        pages.push('...');
-        pages.push(props.totalPages);
-    } else if (current >= props.totalPages - 2) {
-        // 当前页在后3页，显示后5页
-        pages.push(1);
-        pages.push('...');
-        pages.push(props.totalPages - 4, props.totalPages - 3, props.totalPages - 2, props.totalPages - 1, props.totalPages);
-    } else {
-        // 当前页在中间，显示当前页及其前后2页
-        pages.push(1);
-        pages.push('...');
-        pages.push(current - 2, current - 1, current, current + 1, current + 2);
-        pages.push('...');
-        pages.push(props.totalPages);
-    }
-    return pages;
-});
-
-// 上一页
-const prevPage = () => {
-    if (props.currentPage > 1) {
-        emits('pageChanged', props.currentPage - 1);
-    }
-};
-
-// 下一页
-const nextPage = () => {
-    if (props.currentPage < props.totalPages) {
-        emits('pageChanged', props.currentPage + 1);
-    }
-};
-
-// 跳转到指定页
-const goToPage = (page: number|string) => {
-    if (typeof page === 'number' && page >= 1 && page <= props.totalPages) {
-        emits('pageChanged', page);
-    }
-};
-</script>
-    
-<style scoped>
-    
-</style>  

package/src/components/loading/index.vue

@@ -1,43 +0,0 @@
-<template>
-    <div class="loading-overlay" v-if="isLoading">
-      <div class="loading-spinner">
-        <div class="spinner-border text-primary" role="status">
-          <span class="visually-hidden">Loading...</span>
-        </div>
-      </div>
-        <p v-if="message" class="m-3 text-primary">{{ message }}</p>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  
-  const props = defineProps({
-    isLoading: {
-      type: Boolean,
-      default: false
-    },
-    message: {
-      type: String,
-      default: '加载中...'
-    }
-  })
-  </script>
-  
-  <style scoped>
-  .loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1050;
-  }
-  
-  .loading-spinner {
-    text-align: center;
-  }
-  </style>  

package/src/components/modal/index.ts

@@ -1,181 +0,0 @@
-import { createApp, getCurrentInstance, nextTick } from 'vue';
-import BootstrapModal from './index.vue';
-
-export type ModalType = {
-  show: () => void,
-  hide: () => void,
-  open: () => void,
-  close: () => void,
-};
-
-// modal方法类型定义
-const modalMethods = {
-  alert: {} as (options: ModalOptions | string) => Promise<boolean>,
-  confirm: {} as (options: ModalOptions | string) => Promise<boolean>,
-  success: {} as (content: string) => Promise<boolean>,
-  error: {} as (content: string, details?: any) => Promise<boolean>,
-  warning: {} as (content: string) => Promise<boolean>,
-  info: {} as (content: string) => Promise<boolean>,
-  showModal: {} as (options: ModalOptions) => Promise<boolean>
-};
-
-export type ModalTypeWithMethods = ModalType & typeof modalMethods;
-
-export type ModalOptions = {
-  title?: string;
-  content?: string;
-  type?: 'success' | 'error' | 'warning' | 'info';
-  confirmText?: string;
-  cancelText?: string;
-  showCancel?: boolean;
-  details?: any;
-  onConfirm?: () => void;
-  onCancel?: () => void;
-};
-
-// 全局modal实例
-let globalModalInstance: any = null;
-let modalInstance: ModalTypeWithMethods;
-
-export default {
-  install(app: any) {
-    // 挂载到DOM
-    const mount = document.createElement('div');
-    document.body.appendChild(mount);
-    
-    // 创建实例
-    const modalApp = createApp(BootstrapModal);
-    globalModalInstance = modalApp.mount(mount) as any;
-    
-    // 添加事件监听，确保模态框完全隐藏后重置 isModalActive
-    if (globalModalInstance && globalModalInstance.$el) {
-      const modalElement = globalModalInstance.$el;
-      modalElement.addEventListener('hidden.bs.modal', () => {
-        isModalActive = false;
-        console.log('Modal hidden, isModalActive reset to false');
-        
-        // 处理待显示的modal
-        if (pendingModalOptions) {
-          const pending = pendingModalOptions;
-          pendingModalOptions = null;
-          showModal(pending);
-        }
-      });
-    }
-    
-    // 全局注入
-    app.config.globalProperties.$modal = modalInstance = {
-      show: () => globalModalInstance.show(),
-      hide: () => globalModalInstance.hide(),
-      open: () => globalModalInstance.show(),
-      close: () => globalModalInstance.hide(),
-      // 新增方法
-      alert(options: ModalOptions | string) {
-        const opts = typeof options === 'string' 
-          ? { content: options, type: 'info' as const, showCancel: false }
-          : { ...options, showCancel: false };
-        return showModal(opts);
-      },
-      confirm(options: ModalOptions | string) {
-        const opts = typeof options === 'string'
-          ? { content: options, type: 'warning' as const }
-          : { ...options, showCancel: true };
-        return showModal(opts);
-      },
-      success(content: string) {
-        return this.alert({ content, type: 'success' as const, confirmText: '确定' });
-      },
-      error(content: string, details?: any) {
-        return this.alert({ content, type: 'error' as const, confirmText: '确定', details });
-      },
-      warning(content: string) {
-        return this.alert({ content, type: 'warning' as const, confirmText: '确定' });
-      },
-      info(content: string) {
-        return this.alert({ content, type: 'info' as const, confirmText: '确定' });
-      },
-    } as ModalTypeWithMethods;
-  },
-  get() {
-    const instance  = getCurrentInstance();
-    if(!instance ) return null;
-    // @ts-ignore
-    const modal = instance.appContext.config?.globalProperties?.$modal as ModalTypeWithMethods;
-    return modal;
-  }
-};
-
-export const getModalInstance = (): ModalTypeWithMethods => {
-  return modalInstance;
-}
-
-// 全局modal状态管理
-let isModalActive = false;
-let pendingModalOptions: ModalOptions | null = null;
-
-// 导出便捷函数供非Vue环境使用
-export const showModal = (options: ModalOptions) => {
-  if (!globalModalInstance) return Promise.resolve(false);
-
-  return new Promise<boolean>((resolve) => {
-    const finalOptions = {
-      title: '提示',
-      confirmText: '确定',
-      cancelText: '取消',
-      showCancel: false,
-      type: 'info',
-      ...options,
-      onConfirm: () => {
-        options.onConfirm?.();
-        globalModalInstance.hide();
-        nextTick(() => {
-          resolve(true);
-        });
-      },
-      onCancel: () => {
-        options.onCancel?.();
-        globalModalInstance.hide();
-        nextTick(() => {
-          resolve(false);
-        });
-      }
-    };
-
-    // 如果当前有modal正在显示，将新的请求加入队列
-    if (isModalActive) {
-      console.log('Modal busy, queuing new modal');
-      pendingModalOptions = options;
-      return;
-    }
-
-    // 显示新的modal
-    const showModalInstance = () => {
-      globalModalInstance.setOptions?.(finalOptions);
-      isModalActive = true;
-      
-      // 使用Promise链确保正确的执行顺序
-      return globalModalInstance.show?.() || Promise.resolve();
-    };
-
-    showModalInstance();
-  });
-};
-
-export const showAlert = (content: string, type: 'success' | 'error' | 'warning' | 'info' = 'info', details?: any) => {
-  return showModal({
-    content,
-    type,
-    showCancel: false,
-    details
-  });
-};
-
-export const showConfirm = (content: string, options?: Omit<ModalOptions, 'content' | 'showCancel'>) => {
-  return showModal({
-    title: '确认',
-    content,
-    type: 'warning',
-    showCancel: true,
-    ...options
-  });
-};