@10yun/cv-mobile-ui 0.5.44 → 0.5.46

package/uview-plus/components/u-table2/u-table2.vue

@@ -0,0 +1 @@
+<template>
  <view class="u-table2" :class="{ 'u-table-border': border }">
    <scroll-view
      scroll-x
      scroll-y
      class="u-table2-content"
      :style="{ height: height ? addUnit(height) : 'auto' }"
      @scroll="onScroll"
    >
      <!-- 表头 -->
      <view
        v-if="showHeader"
        class="u-table-header"
        :class="{ 'u-table-sticky': fixedHeader }"
        :style="{ minWidth: scrollWidth }"
      >
        <view class="u-table-row">
          <view
            v-for="(col, colIndex) in columns"
            :key="col.key"
            class="u-table-cell"
            :class="[
              col.headerAlign ? 'u-text-' + col.headerAlign : col.align ? 'u-text-' + col.align : '',
              headerCellClassName ? headerCellClassName(col) : '',
              getFixedClass(col)
            ]"
            :style="headerColStyle(col)"
            @click="handleHeaderClick(col)"
          >
            <slot name="header" :column="col" :columnIndex="colIndex" :level="1"></slot>
            <text v-if="!$slots['header']">{{ col.title }}</text>
            <template v-if="col.sortable">
              <slot name="headerSort" :sortStatus="getSortValue(col.key)" :column="col" :columnIndex="colIndex" :level="1"></slot>
              <view v-if="!$slots['headerSort']">
                {{ getSortIcon(col.key) }}
              </view>
            </template>
          </view>
        </view>
      </view>
      <!-- 表体 -->
      <view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
        <template v-if="data && data.length > 0">
          <table-row
            v-for="(row, rowIndex) in sortedData"
            :key="row[rowKey] || rowIndex"
            :row="row"
            :rowIndex="rowIndex"
            :parent-row="null"
            :columns="columns"
            :tree-props="treeProps"
            :row-key="rowKey"
            :expanded-keys="expandedKeys"
            :cell-style-inner="cellStyleInner"
            :is-expanded="isExpanded"
            :row-class-name="rowClassName"
            :stripe="stripe"
            :cell-class-name="cellClassName"
            :get-fixed-class="getFixedClass"
            :highlight-current-row="highlightCurrentRow"
            :current-row="currentRow"
            :handle-row-click="handleRowClick"
            :toggle-expand="toggleExpand"
            :level="1"
            :rowHeight="rowHeight"
            :hasTree="hasTree"
            :selectedRows="selectedRows"
            :expandWidth="expandWidth"
            :computedMainCol="computedMainCol"
            :span-method="spanMethod"
            @toggle-select="toggleSelect"
            @row-click="handleRowClick"
            @toggle-expand="toggleExpand"
          >
            <template v-slot:cellChild="scope">
              <slot
                name="cell"
                :row="scope.row"
                :column="scope.column"
                :prow="scope.prow"
                :rowIndex="scope.rowIndex"
                :columnIndex="scope.columnIndex"
                :level="scope.level"
              ></slot>
            </template>
          </table-row>
        </template>
        <template v-else>
          <slot name="empty"></slot>
          <view v-if="!$slots['empty']" class="u-table-empty">{{ emptyText }}</view>
        </template>
      </view>
    </scroll-view>
    <!-- 固定列浮动视图 -->
    <view v-if="showFixedColumnShadow" class="u-table-fixed-shadow" :style="{ height: tableHeight }">
      <!-- 表头 -->
      <view
        v-if="showHeader"
        class="u-table-header"
        :class="{ 'u-table-sticky': fixedHeader }"
        :style="{ minWidth: scrollWidth }"
      >
        <view class="u-table-row" :style="{ height: headerHeight }">
          <view
            v-for="(col, colIndex) in visibleFixedLeftColumns"
            :key="col.key"
            class="u-table-cell"
            :style="headerColStyle(col)"
            :class="[
              col.align ? 'u-text-' + col.align : '',
              headerCellClassName ? headerCellClassName(col) : '',
              getFixedClass(col)
            ]"
            @click="handleHeaderClick(col)"
          >
            <slot name="header" :column="col" :columnIndex="colIndex" :level="1"></slot>
            <text v-if="!$slots['header']">{{ col.title }}</text>
            <template v-if="col.sortable">
              <slot name="headerSort" :sortStatus="getSortValue(col.key)" :column="col" :columnIndex="colIndex" :level="1"></slot>
              <view v-if="!$slots['headerSort']">
                {{ getSortIcon(col.key) }}
              </view>
            </template>
          </view>
        </view>
      </view>
      <!-- 表体 -->
      <view class="u-table-body" :style="{ minWidth: scrollWidth, maxHeight: maxHeight ? maxHeight + 'px' : 'none' }">
        <template v-if="data && data.length > 0">
          <template v-for="(row, rowIndex) in sortedData" :key="row[rowKey] || rowIndex">
            <!-- 子级渲染 (递归组件) -->
            <table-row
              :row="row"
              :rowIndex="rowIndex"
              :parent-row="null"
              :columns="visibleFixedLeftColumns"
              :tree-props="treeProps"
              :row-key="rowKey"
              :expanded-keys="expandedKeys"
              :cell-style-inner="cellStyleInner"
              :is-expanded="isExpanded"
              :row-class-name="rowClassName"
              :stripe="stripe"
              :cell-class-name="cellClassName"
              :get-fixed-class="getFixedClass"
              :highlight-current-row="highlightCurrentRow"
              :current-row="currentRow"
              :handle-row-click="handleRowClick"
              :toggle-expand="toggleExpand"
              :level="1"
              :rowHeight="rowHeight"
              :hasTree="hasTree"
              :selectedRows="selectedRows"
              :expandWidth="expandWidth"
              :computedMainCol="computedMainCol"
              :span-method="spanMethod"
              @toggle-select="toggleSelect"
              @row-click="handleRowClick"
              @toggle-expand="toggleExpand"
            >
              <template v-slot:cellChild="scope">
                <slot
                  name="cell"
                  :row="scope.row"
                  :column="scope.column"
                  :prow="scope.prow"
                  :rowIndex="scope.rowIndex"
                  :columnIndex="scope.columnIndex"
                  :level="scope.level"
                ></slot>
              </template>
            </table-row>
          </template>
        </template>
      </view>
    </view>
  </view>
  name: 'u-table2',
  components: {
    tableRow // 注册递归组件
  },
  props: {
    data: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    },
    columns: {
      type: Array,
      required: true,
      default: () => {
        return [];
      },
      validator: (cols) => cols.every((col) => ['default', 'selection', 'expand'].includes(col.type || 'default'))
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    height: {
      type: [String, Number],
      default: null
    },
    maxHeight: {
      type: [String, Number],
      default: null
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    currentRowKey: {
      type: [String, Number],
      default: null
    },
    rowStyle: {
      type: Object,
      default: () => ({})
    },
    cellClassName: {
      type: Function,
      default: null
    },
    cellStyle: {
      type: Function,
      default: null
    },
    headerCellClassName: {
      type: Function,
      default: null
    },
    rowClassName: {
      type: Function,
      default: null
    },
    context: {
      type: Object,
      default: null
    },
    showOverflowTooltip: {
      type: Boolean,
      default: false
    },
    lazy: {
      type: Boolean,
      default: false
    },
    load: {
      type: Function,
      default: null
    },
    treeProps: {
      type: Object,
      default: () => ({
        children: 'children',
        hasChildren: 'hasChildren'
      })
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    expandRowKeys: {
      type: Array,
      default: () => []
    },
    sortOrders: {
      type: Array,
      default: () => ['ascending', 'descending']
    },
    sortable: {
      type: [Boolean, String],
      default: false
    },
    multiSort: {
      type: Boolean,
      default: false
    },
    sortBy: {
      type: String,
      default: null
    },
    sortMethod: {
      type: Function,
      default: null
    },
    filters: {
      type: Object,
      default: () => ({})
    },
    fixedHeader: {
      type: Boolean,
      default: true
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    // 添加mainCol属性，用于指定树形结构展开控制图标所在的列
    mainCol: {
      type: String,
      default: ''
    },
    expandWidth: {
      type: String,
      default: '25px'
    },
    rowHeight: {
      type: String,
      default: '36px'
    },
    // 添加spanMethod属性，用于合并单元格
    spanMethod: {
      type: Function,
      default: null
    }
  },
  emits: [
    'select',
    'select-all',
    'selection-change',
    'cell-click',
    'row-click',
    'row-dblclick',
    'header-click',
    'sort-change',
    'filter-change',
    'current-change',
    'expand-change'
  ],
  data() {
    return {
      scrollWidth: 'auto',
      // 将setup中的ref转换为data属性
      expandedKeys: [...this.expandRowKeys],
      selectedRows: [],
      sortConditions: [],
      currentRow: null,
      scrollLeft: 0, // 新增滚动位置数据
      showFixedColumnShadow: false, // 是否显示固定列阴影
      fixedLeftColumns: [], // 左侧固定列
      tableHeight: 'auto', // 表格高度
      headerHeight: 'auto', // 新增表头高度属性
      hasTree: false // 新增属性，用于判断是否存在树形结构
    };
  },
  mounted() {
    this.getComponentWidth();
    // 处理currentRowKey初始化
    if (this.currentRowKey !== null) {
      const found = this.data.find((item) => item[this.rowKey] === this.currentRowKey);
      if (found) {
        this.currentRow = found;
      }
    }
    // 获取固定列
    this.fixedLeftColumns = this.columns.filter((col) => col.fixed === 'left');
  },
  computed: {
    // 将setup中的computed转换为computed属性
    filteredData() {
      return this.data.filter((row) => {
        return Object.keys(this.filters).every((key) => {
          const filter = this.filters[key];
          if (!filter) return true;
          return row[key]?.toString().includes(filter.toString());
        });
      });
    },
    sortedData() {
      if (!this.sortConditions.length) return this.filteredData;
      const data = [...this.filteredData];
      return data.sort((a, b) => {
        for (const condition of this.sortConditions) {
          const { field, order } = condition;
          let valA = a[field];
          let valB = b[field];
          if (this.sortMethod) {
            const result = this.sortMethod(a, b, field);
            if (result !== 0) return result * (order === 'ascending' ? 1 : -1);
          }
          if (valA < valB) return order === 'ascending' ? -1 : 1;
          if (valA > valB) return order === 'ascending' ? 1 : -1;
        }
        return 0;
      });
    },
    // 计算当前应该显示的固定左侧列
    visibleFixedLeftColumns() {
      if (this.scrollLeft <= 0) {
        return [];
      }
      let totalWidth = 0;
      let fixedWidth = 0;
      const visibleColumns = [];
      // 遍历所有列，不仅仅是固定列
      for (let i = 0; i < this.columns.length; i++) {
        const col = this.columns[i];
        const colWidth = col.width ? parseInt(col.width) : 100; // 默认宽度100px
        // 如果是固定列且滚动位置足够显示该列
        if (col.fixed === 'left' && this.scrollLeft > totalWidth - fixedWidth) {
          visibleColumns.push(col);
          fixedWidth += colWidth;
        }
        totalWidth += colWidth;
      }
      return visibleColumns;
    },
    // 获取mainCol的值，如果未设置则默认为第一列的key
    computedMainCol() {
      if (this.mainCol) {
        return this.mainCol;
      }
      // 修改为排除有type值的列
      const validColumns = this.columns.filter((col) => !col.type);
      let mainCol = validColumns && validColumns.length > 0 ? validColumns[0].key : '';
      // console.log('mainCol', mainCol)
      return mainCol;
    }
  },
  watch: {
    // 将setup中的watch转换为watch属性
    expandRowKeys: {
      handler(newVal) {
        this.expandedKeys = [...newVal];
      },
      immediate: true
    },
    currentRowKey: {
      handler(newVal) {
        const found = this.data.find((item) => item[this.rowKey] === newVal);
        if (found) {
          this.currentRow = found;
        }
      },
      immediate: true
    },
    columns: {
      handler() {
        // this.fixedLeftColumns = this.columns.filter(col => col.fixed === 'left');
      },
      deep: true,
      immediate: false
    }
  },
  methods: {
    addUnit,
    onScroll(e) {
      this.scrollLeft = e.detail.scrollLeft;
      // 获取所有左侧固定列
      this.fixedLeftColumns = this.columns.filter((col) => col.fixed === 'left');
      // 计算是否需要显示固定列阴影
      if (this.fixedLeftColumns.length > 0) {
        this.showFixedColumnShadow = this.scrollLeft > 0;
      }
    },
    getFixedShadowStyle(col, index) {
      let style = {
        width: col.width ? addUnit(col.width) : 'auto'
      };
      if (col?.style) {
        style = { ...style, ...col?.style };
      }
      return style;
    },
    getFixedClass(col) {
      return ''; // 不再使用原来的固定列样式类
    },
    headerColStyle(col) {
      let style = {
        width: col.width ? addUnit(col.width) : 'auto',
        flex: col.width ? 'none' : 1
      };
      if (col?.style) {
        style = { ...style, ...col?.style };
      }
      return style;
    },
    setCellStyle(e) {
      this.cellStyle = e;
    },
    cellStyleInner(scope) {
      let style = {
        width: scope.column?.width ? addUnit(scope.column.width) : 'auto',
        flex: scope.column?.width ? 'none' : 1
      };
      // 只有展开列设置padding
      if (scope.column.key == this.computedMainCol) {
        style.paddingLeft = 16 * (scope.level - 1) + 2 + 'px';
      }
      if (this.cellStyle != null) {
        let styleCalc = this.cellStyle(scope);
        if (styleCalc != null) {
          style = { ...style, ...styleCalc };
        }
      }
      return style;
    },
    // 获取组件的宽度
    async getComponentWidth() {
      // 延时一定时间，以获取dom尺寸
      await sleep(30);
      this.$uGetRect('.u-table-row').then((size) => {
        this.scrollWidth = size.width + 'px';
      });
      // 获取表头高度并设置
      this.$uGetRect('.u-table-header').then((size) => {
        if (size.height) {
          this.headerHeight = size.height + 'px';
        }
      });
      // 遍历数据列表第一层判断是否存在树形结构
      this.hasTree = this.sortedData.some((item) => {
        return item[this.treeProps.children] && item[this.treeProps.children].length > 0;
      });
    },
    // 将setup中的函数转换为methods
    handleRowClick(row) {
      if (this.highlightCurrentRow) {
        const oldRow = this.currentRow;
        this.currentRow = row;
        this.$emit('current-change', row, oldRow);
      }
      this.$emit('row-click', row);
    },
    handleHeaderClick(column) {
      if (!column.sortable) return;
      const index = this.sortConditions.findIndex((c) => c.field === column.key);
      let newOrder = 'ascending';
      if (index >= 0) {
        if (this.sortConditions[index].order === 'ascending') {
          newOrder = 'descending';
        } else {
          this.sortConditions.splice(index, 1);
          this.$emit('sort-change', this.sortConditions);
          return;
        }
      }
      if (!this.multiSort) {
        this.sortConditions = [{ field: column.key, order: newOrder }];
      } else {
        if (index >= 0) {
          this.sortConditions[index].order = newOrder;
        } else {
          this.sortConditions.push({ field: column.key, order: newOrder });
        }
      }
      this.$emit('sort-change', this.sortConditions);
    },
    getSortIcon(field) {
      const cond = this.sortConditions.find((c) => c.field === field);
      if (!cond) return '';
      return cond.order === 'ascending' ? '↑' : '↓';
    },
    getSortValue(field) {
      const cond = this.sortConditions.find((c) => c.field === field);
      if (!cond) return '';
      return cond.order === 'ascending';
    },
    toggleSelect(row) {
      const index = this.selectedRows.findIndex((r) => r[this.rowKey] === row[this.rowKey]);
      if (index >= 0) {
        // 取消选中当前行及其所有子节点
        this.selectedRows.splice(index, 1);
        // 递归取消所有子节点
        this.unselectChildren(row);
      } else {
        // 选中当前行及其所有子节点
        this.selectedRows.push(row);
        // 递归选中所有子节点
        this.selectChildren(row);
      }
      console.log(this.selectedRows);
      this.$emit('selection-change', this.selectedRows);
      this.$emit('select', row);
    },
    toggleExpand(row) {
      // console.log(row)
      const key = row[this.rowKey];
      const index = this.expandedKeys.indexOf(key);
      if (index === -1) {
        this.expandedKeys.push(key);
      } else {
        this.expandedKeys.splice(index, 1);
      }
      this.$emit('expand-change', this.expandedKeys);
    },
    isExpanded(row) {
      if (!row) {
        return false;
      }
      return this.expandedKeys.includes(row[this.rowKey]);
    },
    // 新增方法：递归选中所有子节点
    selectChildren(row) {
      const children = row[this.treeProps.children];
      if (children && children.length > 0) {
        children.forEach((child) => {
          // 检查是否已选中，避免重复添加
          const childIndex = this.selectedRows.findIndex((r) => r[this.rowKey] === child[this.rowKey]);
          if (childIndex === -1) {
            this.selectedRows.push(child);
          }
          // 递归处理子节点的子节点
          this.selectChildren(child);
        });
      }
    },
    // 新增方法：递归取消选中所有子节点
    unselectChildren(row) {
      const children = row[this.treeProps.children];
      if (children && children.length > 0) {
        children.forEach((child) => {
          const childIndex = this.selectedRows.findIndex((r) => r[this.rowKey] === child[this.rowKey]);
          if (childIndex >= 0) {
            this.selectedRows.splice(childIndex, 1);
          }
          // 递归处理子节点的子节点
          this.unselectChildren(child);
        });
      }
    }
  }

package/uview-plus/components/u-tabs/style.css

@@ -1,29 +1,3 @@
-/* #ifndef APP-NVUE */
-.u-empty,
-.u-empty__wrap,
-.u-tabs,
-.u-tabs__wrapper,
-.u-tabs__wrapper__scroll-view-wrapper,
-.u-tabs__wrapper__scroll-view,
-.u-tabs__wrapper__nav,
-.u-tabs__wrapper__nav__line,
-.up-empty,
-.up-empty__wrap,
-.up-tabs,
-.up-tabs__wrapper,
-.up-tabs__wrapper__scroll-view-wrapper,
-.up-tabs__wrapper__scroll-view,
-.up-tabs__wrapper__nav,
-.up-tabs__wrapper__nav__line {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
 .u-tabs__wrapper {
   /* #ifndef APP-NVUE */
   display: flex;

package/uview-plus/components/u-tabs/style.scss

@@ -1,5 +1,3 @@
-@import '../../libs/css/components.scss';
-
 .u-tabs {
   &__wrapper {
     @include flex;

package/uview-plus/components/u-tabs/tabs.js

@@ -12,7 +12,7 @@ export default {
     tabs: {
         duration: 300,
         list: [],
-        lineColor: '#3c9cff',
+        lineColor: '',
         activeStyle: {
             color: '#303133'
         },