fdb2 1.0.8 → 1.0.10

package/src/components/dataGrid/index.vue

@@ -1,105 +1,105 @@
-<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||''" > 
-                  <slot :name="column.name+'_header'" :column="column">
-                        <span>{{column.text||column.name||''}}</span>
-                    </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;
-    formatter?: (value: any) => 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: []
-    }
-  });
-
-  const emits = defineEmits(['pageChanged', 'rowClicked']);
-
-  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);
-  }
-
-</script>
-  
-<style scoped>
-  .datagrid-inner {
-    overflow: auto;
-    margin-bottom: 10px;
-  }
-  .datagrid-th {
-    min-width: 80px;
-  }
+<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||''" > 
+                  <slot :name="column.name+'_header'" :column="column">
+                        <span>{{column.text||column.name||''}}</span>
+                    </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;
+    formatter?: (value: any) => 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: []
+    }
+  });
+
+  const emits = defineEmits(['pageChanged', 'rowClicked']);
+
+  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);
+  }
+
+</script>
+  
+<style scoped>
+  .datagrid-inner {
+    overflow: auto;
+    margin-bottom: 10px;
+  }
+  .datagrid-th {
+    min-width: 80px;
+  }
 </style>  

package/src/components/dataGrid/pagination.vue

@@ -1,106 +1,106 @@
-<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>
-    
+<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 +1,43 @@
-<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;
-  }
+<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>