w-ui-v1 1.0.42 → 1.0.43

package/index.ts

@@ -13,6 +13,7 @@ import wEdit from './w-edit/w-edit.vue'
 import WSelectTable from './w-select-table/w-select-table.vue'
 import WFormMessageBox from './w-form-message-box/w-form-message-box.vue'
 import WAudio from './w-audio/w-audio.vue'
+import WReportTable from './w-report-table/w-report-table.vue'
 const coms: any[] = [
   wTest,
   wLogin,
@@ -27,7 +28,8 @@ const coms: any[] = [
   wEdit,
   WSelectTable,
   WFormMessageBox,
-  WAudio
+  WAudio,
+  WReportTable
 ]
 // 批量组件注册
 function install(Vue: App) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-ui-v1",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "description": "w-ui",
   "author": "wgxshh",
   "license": "ISC",

package/w-menu/w-menu.vue

@@ -33,7 +33,6 @@ onMounted(() => {
 
 // 点击菜单跳转页面
 function gotoPage(item: any) {
-  console.log(item)
   // 跳转页面
   if (goto(item))
     return
@@ -53,13 +52,25 @@ function sheetGotoPage(item: any) {
 
 // 跳转页面
 function goto(item: any) {
-  if (item.pageType) {
-    uni.navigateTo({
-      url: `/pages/table/table?sourceId=${item.id}&pageTitle=${item.title}`,
-    })
-    return true
+console.log(item.pageType)
+  switch (item.pageType) {
+    case "列表":
+      uni.navigateTo({
+        url: `/pages/table/table?sourceId=${item.id}&pageTitle=${item.title}`,
+      })
+      return true
+      break;
+    case "报表":
+      uni.navigateTo({
+        url: `/pages/report-table/report-table?sourceId=${item.id}&pageTitle=${item.title}`,
+      })
+      return true
+      break;
+
+    default:
+      return false
+      break;
   }
-  return false
 }
 
 // 打开wd-action-sheet动作面板

package/w-report-table/w-report-table.vue

@@ -0,0 +1,465 @@
+<template>
+  <view class="w-report-table">
+    <!-- 表格容器 -->
+    <view class="table-container" :style="{height: tableHeight}">
+      <!-- 表格主体 -->
+      <scroll-view scroll-y="true" class="table-body">
+        <!-- 表头 -->
+        <view class="table-header">
+          <view class="table-row">
+            <view v-if="showCheckbox" class="checkbox-col header-cell">
+              <checkbox-group @change="toggleAllSelection">
+                <checkbox :checked="isAllSelected" />
+              </checkbox-group>
+            </view>
+            
+            <template v-for="(col, colIndex) in columns" :key="colIndex">
+              <template v-if="col.children">
+                <view 
+                  :class="['header-cell', 'group-header', col.className]"
+                  :style="{
+                    flex: col.children.reduce((sum, c) => sum + (parseInt(c.width) || 1), 0),
+                    'text-align': 'center'
+                  }"
+                  :colspan="col.children.length"
+                >
+                  {{ col.title }}
+                </view>
+              </template>
+              <template v-else>
+                <view 
+                  :class="['header-cell', col.className]"
+                  :style="{
+                    flex: col.width || 1,
+                    'text-align': col.align || 'center'
+                  }"
+                >
+                  {{ col.title }}
+                </view>
+              </template>
+            </template>
+            
+            <view v-if="showAction" class="action-col header-cell">操作</view>
+          </view>
+        </view>
+        
+        <!-- 表格内容 -->
+        <view class="table-body">
+          <view 
+            v-for="(row, rowIndex) in paginatedData" 
+            :key="rowIndex"
+            class="table-row"
+            :class="{'selected-row': isSelected(row)}"
+          >
+            <view v-if="showCheckbox" class="checkbox-col body-cell">
+              <checkbox-group @change="toggleSelection($event, row)">
+                <checkbox :checked="isSelected(row)" />
+              </checkbox-group>
+            </view>
+            
+            <template v-for="(col, colIndex) in columns" :key="colIndex">
+              <template v-if="col.children">
+                <template v-for="(childCol, childIndex) in col.children" :key="childIndex">
+                  <view 
+                    :class="['body-cell', childCol.className]"
+                    :style="{
+                      flex: childCol.width || 1,
+                      'text-align': childCol.align || 'center',
+                      display: getRowSpan(row, childCol) === 0 ? 'none' : 'flex'
+                    }"
+                    :rowspan="getRowSpan(row, childCol)"
+                    :colspan="getColSpan(row, childCol)"
+                  >
+                    {{ row[childCol.key] }}
+                  </view>
+                </template>
+              </template>
+              <template v-else>
+                <view 
+                  :class="['body-cell', col.className]"
+                  :style="{
+                    flex: col.width || 1,
+                    'text-align': col.align || 'center',
+                    display: getRowSpan(row, col) === 0 ? 'none' : 'flex'
+                  }"
+                  :rowspan="getRowSpan(row, col)"
+                  :colspan="getColSpan(row, col)"
+                >
+                  {{ row[col.key] }}
+                </view>
+              </template>
+            </template>
+            
+            <view v-if="showAction" class="action-col body-cell">
+              <view class="action-btns">
+                <text v-for="(action, i) in actions" :key="i" @tap="handleAction(action, row)">
+                  {{ action.label }}
+                </text>
+              </view>
+            </view>
+          </view>
+        </view>
+        
+        <!-- 合计行 -->
+        <view v-if="showSummary" class="table-footer">
+          <view class="table-row summary-row">
+            <view v-if="showCheckbox" class="checkbox-col"></view>
+            <template v-for="(col, colIndex) in columns" :key="colIndex">
+              <template v-if="col.children">
+                <template v-for="(childCol, childIndex) in col.children" :key="childIndex">
+                  <view 
+                    :class="['summary-cell', childCol.className]"
+                    :style="{
+                      flex: childCol.width || 1,
+                      'text-align': childCol.align || 'center'
+                    }"
+                  >
+                    {{ getSummary(childCol) }}
+                  </view>
+                </template>
+              </template>
+              <template v-else>
+                <view 
+                  :class="['summary-cell', col.className]"
+                  :style="{
+                    flex: col.width || 1,
+                    'text-align': col.align || 'center'
+                  }"
+                >
+                  {{ getSummary(col) }}
+                </view>
+              </template>
+            </template>
+            <view v-if="showAction"></view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    
+    <!-- 分页 -->
+    <view v-if="showPagination" class="pagination">
+      <view class="page-info">
+        共 {{ total }} 条记录
+      </view>
+      <view class="page-controls">
+        <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
+        <text class="page-current">{{ currentPage }}/{{ pageCount }}</text>
+        <button @click="nextPage" :disabled="currentPage === pageCount">下一页</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Column {
+  title: string
+  key: string
+  width?: string
+  align?: string
+  className?: string
+  children?: Column[]
+  /**
+   * 单元格合并规则
+   * @param row 当前行数据
+   * @param index 当前行索引
+   * @returns 返回 true 表示参与合并，false 表示不合并
+   */
+  mergeRule?: (row: any, index: number) => boolean
+  summaryMethod?: (data: any[]) => string | number
+  colspan?: number
+}
+
+interface Action {
+  label: string
+  handler: (row: any) => void
+}
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array as () => Column[],
+    default: () => []
+  },
+  actions: {
+    type: Array as () => Action[],
+    default: () => []
+  },
+  showCheckbox: {
+    type: Boolean,
+    default: false
+  },
+  showSummary: {
+    type: Boolean,
+    default: false
+  },
+  showPagination: {
+    type: Boolean,
+    default: false
+  },
+  showAction: {
+    type: Boolean,
+    default: true
+  },
+  pageSize: {
+    type: Number,
+    default: 10
+  },
+  tableHeight: {
+    type: String,
+    default: '500px'
+  }
+})
+
+const currentPage = ref(1)
+const selectedRows = ref<any[]>([])
+
+const paginatedData = computed(() => {
+  const start = (currentPage.value - 1) * props.pageSize
+  const end = start + props.pageSize
+  return props.data.slice(start, end)
+})
+
+const pageCount = computed(() => {
+  return Math.ceil(props.data.length / props.pageSize)
+})
+
+const total = computed(() => props.data.length)
+
+const isAllSelected = computed(() => {
+  return selectedRows.value.length === props.data.length
+})
+
+const prevPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--
+  }
+}
+
+const nextPage = () => {
+  if (currentPage.value < pageCount.value) {
+    currentPage.value++
+  }
+}
+
+const toggleSelection = (event: any, row: any) => {
+  const checked = event.detail.value.includes(row)
+  if (checked) {
+    selectedRows.value.push(row)
+  } else {
+    const index = selectedRows.value.findIndex(item => item === row)
+    if (index > -1) {
+      selectedRows.value.splice(index, 1)
+    }
+  }
+}
+
+const toggleAllSelection = (event: any) => {
+  if (event.detail.value.length > 0) {
+    selectedRows.value = [...props.data]
+  } else {
+    selectedRows.value = []
+  }
+}
+
+const isSelected = (row: any) => {
+  return selectedRows.value.includes(row)
+}
+
+const getRowSpan = (row: any, col: Column) => {
+  if (!col.mergeRule) return 1
+  
+  const index = props.data.indexOf(row)
+  if (!col.mergeRule(row, index)) return 1
+  
+  // 计算相同内容的连续行数
+  let span = 1
+  const currentValue = row[col.key]
+  
+  for (let i = index + 1; i < props.data.length; i++) {
+    if (props.data[i][col.key] === currentValue && 
+        (!col.mergeRule || col.mergeRule(props.data[i], i))) {
+      span++
+    } else {
+      break
+    }
+  }
+  
+  return span
+}
+
+const getColSpan = (row: any, col: Column) => {
+  if (col.colspan) return col.colspan
+  
+  // 计算相同内容的连续列数
+  if (!col.mergeRule) return 1
+  
+  let index = -1
+  for (let i = 0; i < props.columns.length; i++) {
+    if (props.columns[i] === col) {
+      index = i
+      break
+    }
+  }
+  if (index === -1) return 1
+  
+  let span = 1
+  const currentValue = row[col.key]
+  
+  for (let i = index + 1; i < props.columns.length; i++) {
+    const nextCol = props.columns[i]
+    if (row[nextCol.key] === currentValue && 
+        (!nextCol.mergeRule || nextCol.mergeRule(row, i))) {
+      span++
+    } else {
+      break
+    }
+  }
+  
+  return span
+}
+
+const getSummary = (col: Column) => {
+  if (col.summaryMethod) {
+    return col.summaryMethod(props.data)
+  }
+  
+  if (typeof props.data[0]?.[col.key] === 'number') {
+    return props.data.reduce((sum, row) => sum + (row[col.key] || 0), 0)
+  }
+  
+  return ''
+}
+
+const handleAction = (action: Action, row: any) => {
+  action.handler(row)
+}
+</script>
+
+<style lang="scss" scoped>
+.w-report-table {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  
+  .table-container {
+    width: 100%;
+    overflow: hidden;
+    
+    .table-body {
+      width: 100%;
+      height: 100%;
+      
+      .table-header, .table-body, .table-footer {
+        width: 100%;
+      }
+      
+      .table-row {
+        display: flex;
+        width: 100%;
+        border-bottom: 1px solid #ebeef5;
+      }
+      
+      .header-cell, .body-cell, .summary-cell {
+        padding: 12px 8px;
+        word-break: break-word;
+        border-right: 1px solid #ebeef5;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      
+      .group-header {
+        font-weight: bold;
+        background-color: #eef1f6;
+      }
+      
+      .table-header {
+        background-color: #f5f7fa;
+        
+        .header-cell {
+          font-weight: bold;
+          color: #333;
+        }
+      }
+      
+      .table-body {
+        .table-row:hover {
+          background-color: #f5f7fa;
+        }
+        
+        .selected-row {
+          background-color: #e6f7ff;
+        }
+      }
+      
+      .checkbox-col {
+        flex: 0 0 50px;
+      }
+      
+      .action-col {
+        flex: 0 0 120px;
+        
+        .action-btns {
+          display: flex;
+          justify-content: space-around;
+          
+          text {
+            color: #409eff;
+            cursor: pointer;
+            
+            &:hover {
+              color: #66b1ff;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+    padding: 8px 16px;
+    background-color: #f5f7fa;
+    
+    .page-controls {
+      display: flex;
+      align-items: center;
+      
+      button {
+        margin: 0 8px;
+        padding: 4px 12px;
+        background-color: #fff;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        cursor: pointer;
+        
+        &:disabled {
+          color: #c0c4cc;
+          cursor: not-allowed;
+        }
+      }
+      
+      .page-current {
+        margin: 0 8px;
+      }
+    }
+  }
+  
+  .summary-row {
+    background-color: #f5f7fa;
+    font-weight: bold;
+    
+    .summary-cell {
+      color: #333;
+    }
+  }
+}
+</style>

package/w-select-picker/types.ts

@@ -39,7 +39,7 @@ export const selectPickerProps = {
   /** 设置 picker 内部的选项组尺寸大小 （单/复选框） */
   selectSize: String,
   /** 加载中 */
-  loading: makeBooleanProp(false),
+  // loading: makeBooleanProp(false),
   /** 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 */
   loadingColor: makeStringProp('#4D80F0'),
   /** 点击遮罩是否关闭 */