ai.touchui-vue 1.31.3 → 1.32.0

package/packages/table/src/table-head.vue

@@ -1,242 +1,242 @@
-<template>
-	<thead ref="row">
-		<tr v-for="(titem,tindex) in tableData" :key="tindex">
-			<template v-for="(item, index) in titem">
-				<template v-if="showColumn(item, index)">
-					<th
-						v-if="ToTable.isNeedSelectAll && item.type === 'selection'"
-						:key="index"
-						class="selection"
-						:rowspan="item.rowspan || 1"
-						:colspan="item.colspan || 1"
-						:class="[item.sortable === true ? 'sort':'','checkbox']"
-						>
-						<to-checkbox
-							:value="ToTable.isSelectAll && ToTable.iData.length > 0"
-							@change="checkAllChange"
-							></to-checkbox>
-					</th>
-					<th
-						v-else-if="item.type === 'radio'"
-						:key="index"
-						class="radio"
-						:rowspan="item.rowspan || 1"
-						:colspan="item.colspan || 1"
-						:class="[item.sortable === true ? 'sort':'','index']"
-						>
-						{{ t('to.common.select') }}
-					</th>
-					<th
-						v-else-if="item.type === 'index'"
-						:key="index"
-						:rowspan="item.rowspan || 1"
-						:colspan="item.colspan || 1"
-						:class="[item.sortable === true ? 'sort':'','index']"
-						@click="($event) =>ToTable.handleTableHeadCellClick(item, index, $event)"
-						>
-						<template v-if="item.sortable === true">
-							<!-- <to-icon value="fold" type="fill"></to-icon> -->
-							<to-icon v-if="item.orderType == 'asc'" value="fold"></to-icon>
-							<to-icon v-if="item.orderType == 'desc'" value="unfold"></to-icon>
-						</template>
-						<span>{{ ToTable.indexColumnName || item.label }}111</span>
-					</th>
-					<th
-						v-else-if="item.type === 'action' && configurable && ToTable.hasAction"
-						:key="index"
-						:rowspan="item.rowspan || 1"
-						:colspan="item.colspan || 1"
-						class="configTh action"
-						>
-						<table-config :data="ToTable.columns" @change="configChange"></table-config>
-					</th>
-					<th
-						v-else-if="!(item.type === 'action' && ToTable.contextAction)"
-						:key="index"
-						:rowspan="item.rowspan || 1"
-						:colspan="item.colspan || 1"
-						:class="[item.sortable === true ? 'sort':'', item.type === 'action' ? 'action':'']"
-						@click="($event) => ToTable.handleTableHeadCellClick(item, index, $event)"
-						>
-						<span v-if="item.sortable === true" class="to-table-sorticon" :class="`type-${item.orderType}`">
-							<to-icon value="fold" type="fill"></to-icon>
-							<to-icon value="unfold" type="fill"></to-icon>
-							<!-- <to-icon v-if="item.orderType == 'asc'" value="fold"></to-icon> -->
-							<!-- <to-icon v-if="item.orderType == 'desc'" value="unfold"></to-icon> -->
-						</span>
-						<slot :name="item.prop + '_th'" :column="item" :index="index">
-							<span>{{ item.label }}</span>
-						</slot>
-					</th>
-				</template>
-			</template>
-		</tr>
-	</thead>
-</template>
-<script>
-import Locale from 'ai.touchui-vue/src/mixins/locale';
-import tableConfig from './table-config'
-export default {
-	components: {
-		tableConfig
-	},
-	mixins: [Locale],
-	props: {
-		name: {
-			type: String,
-			default: ''
-		},
-		start: {
-			type: Number,
-			default: null
-		},
-		end: {
-			type: Number,
-			default: null
-		},
-		data: {
-			type: Array,
-			default: () => []
-		},
-		configurable: Boolean
-	},
-	data() {
-		return {
-		}
-	},
-	inject: ['ToTable'],
-	computed: {
-		showColumn() {
-			let that = this;
-			return function(column, columnIndex) {
-				if (column.show === false) {
-					return false;
-				} else {
-					if (['selection', 'radio', 'action'].includes(column.type)) {
-						return true;
-					}
-					if (that.ToTable.showColumns || that.ToTable.showColumns === 0) {
-						// 保留行数
-						if (!isNaN(that.ToTable.showColumns)) {
-							const index = this.ToTable.normalColumn.findIndex(item => column.prop === item.prop);
-							if (index !== -1 && index < Number(that.ToTable.showColumns)) {
-								return true;
-							} else {
-								return false;
-							}
-						} else {
-							if (that.ToTable.showColumns.split(',').includes(column.prop)) {
-								return true;
-							} else {
-								return false;
-							}
-						}
-					} else {
-						return true;
-					}
-				}
-			}
-		},
-		tableData() {
-			const result = [];
-			let maxDepth = 0;
-
-			// 计算最大深度
-			function calculateMaxDepth(heads, depth = 1) {
-				heads.forEach(head => {
-					if (head.children) {
-						calculateMaxDepth(head.children, depth + 1);
-					}
-				});
-				maxDepth = Math.max(maxDepth, depth);
-			}
-
-			calculateMaxDepth(this.data);
-
-			/**
-			 * 计算树结构中叶子节点的数量
-			 * @param {Array} tree - 表示树结构的数组
-			 * @returns {number} - 叶子节点的数量
-			 */
-			function countLeafNodes(tree) {
-				// 如果树为空，返回 0
-				if (!tree || tree.length === 0) {
-					return 0;
-				}
-
-				let leafCount = 0;
-
-				// 遍历树的每个节点
-				for (let i = 0; i < tree.length; i++) {
-					// 如果当前节点没有子节点，是叶子节点
-					if (tree[i].show !== false) {
-						if (!tree[i].children || tree[i].children.length === 0 || tree[i].children.every(child => child.show === false)) {
-							leafCount += 1;
-						} else {
-						// 如果有子节点，递归计算子节点中的叶子节点数量
-							leafCount += countLeafNodes(tree[i].children);
-						}
-					}
-				}
-
-				// 返回叶子节点的总数
-				return leafCount;
-			}
-
-			/**
-			 * 递归生成表格数据
-			 * @param {Array} heads - 表头数据，包含每一列的标签和属性。
-			 * @param {number} depth - 当前处理的深度，默认为0。
-			 * @param {number} rowIndex - 当前处理的行索引，默认为0。
-			 */
-			function generateTableData(heads, depth = 0, rowIndex = 0) {
-				// 确保当前行已经初始化
-				if (!result[rowIndex]) {
-					result[rowIndex] = [];
-				}
-
-				// 遍历每一个表头
-				heads.forEach((head, index) => {
-					// 创建单元格数据结构
-					const cell = Object.assign(head, {
-						rowspan: 1,
-						colspan: 1
-					})
-
-					// 如果当前表头有子节点计算列跨度
-					if (head.children && !head.children.every(child => child.show === false)) {
-						// 计算当前单元格的列跨度
-						cell.colspan = countLeafNodes(head.children);
-
-						// 将单元格添加到当前行
-						result[rowIndex].push(cell);
-
-						// 递归
-						generateTableData(head.children, depth + 1, rowIndex + 1);
-					}
-
-					// 如果当前表头有子节点计算行跨度
-					else {
-						cell.rowspan = maxDepth - depth;
-
-						// 将单元格添加到当前行
-						result[rowIndex].push(cell);
-					}
-				});
-			}
-
-			generateTableData(JSON.parse(JSON.stringify(this.data)))
-
-			return result
-		}
-	},
-	methods: {
-		checkAllChange(checked) {
-			this.$emit('select-all', checked)
-		},
-		configChange(data) {
-			this.$emit('column-change', data)
-		}
-	}
-};
-</script>
+<template>
+	<thead ref="row">
+		<tr v-for="(titem,tindex) in tableData" :key="tindex">
+			<template v-for="(item, index) in titem">
+				<template v-if="showColumn(item, index)">
+					<th
+						v-if="ToTable.isNeedSelectAll && item.type === 'selection'"
+						:key="index"
+						class="selection"
+						:rowspan="item.rowspan || 1"
+						:colspan="item.colspan || 1"
+						:class="[item.sortable === true ? 'sort':'','checkbox']"
+						>
+						<to-checkbox
+							:value="ToTable.isSelectAll && ToTable.iData.length > 0"
+							@change="checkAllChange"
+							></to-checkbox>
+					</th>
+					<th
+						v-else-if="item.type === 'radio'"
+						:key="index"
+						class="radio"
+						:rowspan="item.rowspan || 1"
+						:colspan="item.colspan || 1"
+						:class="[item.sortable === true ? 'sort':'','index']"
+						>
+						{{ t('to.common.select') }}
+					</th>
+					<th
+						v-else-if="item.type === 'index'"
+						:key="index"
+						:rowspan="item.rowspan || 1"
+						:colspan="item.colspan || 1"
+						:class="[item.sortable === true ? 'sort':'','index']"
+						@click="($event) =>ToTable.handleTableHeadCellClick(item, index, $event)"
+						>
+						<template v-if="item.sortable === true">
+							<!-- <to-icon value="fold" type="fill"></to-icon> -->
+							<to-icon v-if="item.orderType == 'asc'" value="fold"></to-icon>
+							<to-icon v-if="item.orderType == 'desc'" value="unfold"></to-icon>
+						</template>
+						<span>{{ ToTable.indexColumnName || item.label }}111</span>
+					</th>
+					<th
+						v-else-if="item.type === 'action' && configurable && ToTable.hasAction"
+						:key="index"
+						:rowspan="item.rowspan || 1"
+						:colspan="item.colspan || 1"
+						class="configTh action"
+						>
+						<table-config :data="ToTable.columns" @change="configChange"></table-config>
+					</th>
+					<th
+						v-else-if="!(item.type === 'action' && ToTable.contextAction)"
+						:key="index"
+						:rowspan="item.rowspan || 1"
+						:colspan="item.colspan || 1"
+						:class="[item.sortable === true ? 'sort':'', item.type === 'action' ? 'action':'']"
+						@click="($event) => ToTable.handleTableHeadCellClick(item, index, $event)"
+						>
+						<span v-if="item.sortable === true" class="to-table-sorticon" :class="`type-${item.orderType}`">
+							<to-icon value="fold" type="fill"></to-icon>
+							<to-icon value="unfold" type="fill"></to-icon>
+							<!-- <to-icon v-if="item.orderType == 'asc'" value="fold"></to-icon> -->
+							<!-- <to-icon v-if="item.orderType == 'desc'" value="unfold"></to-icon> -->
+						</span>
+						<slot :name="item.prop + '_th'" :column="item" :index="index">
+							<span>{{ item.label }}</span>
+						</slot>
+					</th>
+				</template>
+			</template>
+		</tr>
+	</thead>
+</template>
+<script>
+import Locale from 'ai.touchui-vue/src/mixins/locale';
+import tableConfig from './table-config'
+export default {
+	components: {
+		tableConfig
+	},
+	mixins: [Locale],
+	props: {
+		name: {
+			type: String,
+			default: ''
+		},
+		start: {
+			type: Number,
+			default: null
+		},
+		end: {
+			type: Number,
+			default: null
+		},
+		data: {
+			type: Array,
+			default: () => []
+		},
+		configurable: Boolean
+	},
+	data() {
+		return {
+		}
+	},
+	inject: ['ToTable'],
+	computed: {
+		showColumn() {
+			let that = this;
+			return function(column, columnIndex) {
+				if (column.show === false) {
+					return false;
+				} else {
+					if (['selection', 'radio', 'action'].includes(column.type)) {
+						return true;
+					}
+					if (that.ToTable.showColumns || that.ToTable.showColumns === 0) {
+						// 保留行数
+						if (!isNaN(that.ToTable.showColumns)) {
+							const index = this.ToTable.normalColumn.findIndex(item => column.prop === item.prop);
+							if (index !== -1 && index < Number(that.ToTable.showColumns)) {
+								return true;
+							} else {
+								return false;
+							}
+						} else {
+							if (that.ToTable.showColumns.split(',').includes(column.prop)) {
+								return true;
+							} else {
+								return false;
+							}
+						}
+					} else {
+						return true;
+					}
+				}
+			}
+		},
+		tableData() {
+			const result = [];
+			let maxDepth = 0;
+
+			// 计算最大深度
+			function calculateMaxDepth(heads, depth = 1) {
+				heads.forEach(head => {
+					if (head.children) {
+						calculateMaxDepth(head.children, depth + 1);
+					}
+				});
+				maxDepth = Math.max(maxDepth, depth);
+			}
+
+			calculateMaxDepth(this.data);
+
+			/**
+			 * 计算树结构中叶子节点的数量
+			 * @param {Array} tree - 表示树结构的数组
+			 * @returns {number} - 叶子节点的数量
+			 */
+			function countLeafNodes(tree) {
+				// 如果树为空，返回 0
+				if (!tree || tree.length === 0) {
+					return 0;
+				}
+
+				let leafCount = 0;
+
+				// 遍历树的每个节点
+				for (let i = 0; i < tree.length; i++) {
+					// 如果当前节点没有子节点，是叶子节点
+					if (tree[i].show !== false) {
+						if (!tree[i].children || tree[i].children.length === 0 || tree[i].children.every(child => child.show === false)) {
+							leafCount += 1;
+						} else {
+						// 如果有子节点，递归计算子节点中的叶子节点数量
+							leafCount += countLeafNodes(tree[i].children);
+						}
+					}
+				}
+
+				// 返回叶子节点的总数
+				return leafCount;
+			}
+
+			/**
+			 * 递归生成表格数据
+			 * @param {Array} heads - 表头数据，包含每一列的标签和属性。
+			 * @param {number} depth - 当前处理的深度，默认为0。
+			 * @param {number} rowIndex - 当前处理的行索引，默认为0。
+			 */
+			function generateTableData(heads, depth = 0, rowIndex = 0) {
+				// 确保当前行已经初始化
+				if (!result[rowIndex]) {
+					result[rowIndex] = [];
+				}
+
+				// 遍历每一个表头
+				heads.forEach((head, index) => {
+					// 创建单元格数据结构
+					const cell = Object.assign(head, {
+						rowspan: 1,
+						colspan: 1
+					})
+
+					// 如果当前表头有子节点计算列跨度
+					if (head.children && !head.children.every(child => child.show === false)) {
+						// 计算当前单元格的列跨度
+						cell.colspan = countLeafNodes(head.children);
+
+						// 将单元格添加到当前行
+						result[rowIndex].push(cell);
+
+						// 递归
+						generateTableData(head.children, depth + 1, rowIndex + 1);
+					}
+
+					// 如果当前表头有子节点计算行跨度
+					else {
+						cell.rowspan = maxDepth - depth;
+
+						// 将单元格添加到当前行
+						result[rowIndex].push(cell);
+					}
+				});
+			}
+
+			generateTableData(JSON.parse(JSON.stringify(this.data)))
+
+			return result
+		}
+	},
+	methods: {
+		checkAllChange(checked) {
+			this.$emit('select-all', checked)
+		},
+		configChange(data) {
+			this.$emit('column-change', data)
+		}
+	}
+};
+</script>