stellar-ui-v2 1.35.3

package/components/ste-table-column/checkbox-icon.vue

@@ -0,0 +1,65 @@
+<template>
+	<view class="ste-table-checkbox-icon">
+		<ste-icon
+			code="&#xe6ae;"
+			:color="iconColorConfig.disabled || selectionColor.disabled"
+			:size="checkIconSize"
+			v-if="disabled"
+		/>
+		<ste-icon
+			code="&#xe6ac;"
+			:color="iconColorConfig.readonly || selectionColor.readonly"
+			:size="checkIconSize"
+			v-else-if="readonly"
+		/>
+		<template v-else>
+			<ste-icon
+				code="&#xe6ac;"
+				:color="iconColorConfig.main || selectionColor.main"
+				:size="checkIconSize"
+				v-if="checked"
+			/>
+			<ste-icon
+				code="&#xe6af;"
+				:color="iconColorConfig.unSelected || selectionColor.unSelected"
+				:size="checkIconSize"
+				v-else
+			/>
+		</template>
+	</view>
+</template>
+
+<script>
+import { selectionColorConfig } from '../ste-table/common';
+export default {
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		checked: {
+			type: [Boolean, null],
+			default: false,
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: false,
+		},
+		readonly: {
+			type: [Boolean, null],
+			default: false,
+		},
+		iconColorConfig: {
+			type: [Object, null],
+			default: () => selectionColorConfig,
+		},
+	},
+	data() {
+		return {
+			checkIconSize: 36,
+			selectionColor: selectionColorConfig,
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped></style>

package/components/ste-table-column/common.scss

@@ -0,0 +1,65 @@
+@mixin cell {
+	flex: 1;
+	// padding: 24rpx 32rpx;
+	border-bottom: $default-border;
+	text-align: left;
+	min-height: 80rpx;
+	font-size: 24rpx;
+	// vertical-align: middle;
+	display: flex;
+	align-items: center;
+}
+
+&.popover {
+	overflow-x: hidden;
+	.cell-box {
+		// overflow: hidden;
+		max-width: 100%;
+		// white-space: nowrap;
+		// text-overflow: ellipsis;
+		// /* 防止文本被选中，提升移动端体验 */
+		// user-select: none;
+		// -webkit-user-select: none;
+	}
+}
+
+.cell-box {
+	// display: flex;
+	// align-items: center;
+	padding: 24rpx 32rpx;
+}
+
+&.border {
+	border-right: $default-border;
+}
+
+&.selection {
+}
+
+&.align-text-center {
+	text-align: center;
+	.cell-box {
+		text-align: center;
+	}
+}
+
+&.align-text-right {
+	text-align: right;
+	.cell-box {
+		text-align: right;
+	}
+}
+
+&.align-center {
+	justify-content: center;
+	.cell-box {
+		text-align: center;
+	}
+}
+
+&.align-right {
+	justify-content: flex-end;
+	.cell-box {
+		text-align: right;
+	}
+}

package/components/ste-table-column/radio-icon.vue

@@ -0,0 +1,110 @@
+<template>
+	<view class="radio-icon-root" :class="[cmpRootClass]" :style="[comRootStyle]">
+		<view class="icon-1"></view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import { selectionColorConfig } from '../ste-table/common';
+export default {
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		checked: {
+			type: [Boolean, null],
+			default: false,
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: false,
+		},
+		readonly: {
+			type: [Boolean, null],
+			default: false,
+		},
+		iconColorConfig: {
+			type: [Object, null],
+			default: () => selectionColorConfig,
+		},
+	},
+	data() {
+		return {
+			selectionColor: selectionColorConfig,
+		};
+	},
+	computed: {
+		cmpRootClass() {
+			let classArr = [];
+			if (this.checked) {
+				classArr.push('checked');
+			}
+			if (this.disabled) {
+				classArr.push('disabled');
+			}
+			if (this.readonly) {
+				classArr.push('readonly');
+			}
+
+			return classArr.join(' ');
+		},
+		comRootStyle() {
+			let tmpCorloConfig = selectionColorConfig;
+			if (this.iconColorConfig) {
+				tmpCorloConfig = this.iconColorConfig;
+			}
+			return {
+				'--main-color': tmpCorloConfig.main,
+				'--main-outer-color': utils.Color.formatColor(tmpCorloConfig.main, 0.2),
+				'--disabled-color': tmpCorloConfig.disabled,
+				'--un-selected-color': tmpCorloConfig.unSelected,
+				'--readonly-color': tmpCorloConfig.readonly,
+				'--readonly-outer-color': utils.Color.formatColor(tmpCorloConfig.readonly, 0.2),
+			};
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.radio-icon-root {
+	width: 32rpx;
+	height: 32rpx;
+
+	border-radius: 50%;
+	border: 2rpx solid var(--un-selected-color);
+	position: relative;
+
+	&.checked {
+		border: none;
+		background-color: var(--main-outer-color);
+		.icon-1 {
+			background-color: var(--main-color);
+		}
+	}
+
+	&.readonly {
+		border: none;
+		background-color: var(--readonly-outer-color);
+		.icon-1 {
+			background-color: var(--readonly-color);
+		}
+	}
+
+	&.disabled {
+		border: none;
+		background-color: var(--disabled-color);
+	}
+	.icon-1 {
+		width: 16rpx;
+		height: 16rpx;
+		border-radius: 50%;
+
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+}
+</style>

package/components/ste-table-column/ste-table-column.vue

@@ -0,0 +1,255 @@
+<template>
+	<view class="ste-table-cell" :class="[cmpRootClass]" :style="[cmpRootStyle, cmpCellStyle]" @click="cellClick">
+		<template v-if="type">
+			<view class="cell-box" v-if="type == 'checkbox'" @click.stop="changeCheck">
+				<check-box-icon
+					:disabled="cmpDisableCheck"
+					:readonly="cmpReadonlyCheck"
+					:checked="cmpShowCheck"
+					:iconColorConfig="cmpSelectionIconColor"
+				/>
+			</view>
+			<view class="cell-box" v-if="type == 'radio'" @click.stop="changeCheck">
+				<radio-icon
+					:disabled="cmpDisableCheck"
+					:readonly="cmpReadonlyCheck"
+					:checked="cmpShowCheck"
+					:iconColorConfig="cmpSelectionIconColor"
+				/>
+			</view>
+			<view class="cell-box" v-if="type == 'index'">
+				{{ row.rowIndex + 1 }}
+			</view>
+		</template>
+		<template v-else>
+			<slot v-if="row[prop] || !$slots.empty">
+				<sub-table :rows="row[prop]" v-if="rowSpan" :border="cmpBorder" />
+				<view class="cell-box" v-else>
+					<!-- <text>{{ cellText() }}</text> -->
+					<table-popover :text="cellText()"></table-popover>
+				</view>
+			</slot>
+			<view class="cell-box" v-else>
+				<slot name="empty"><text>暂无数据</text></slot>
+			</view>
+		</template>
+	</view>
+</template>
+
+<script>
+import RadioIcon from './radio-icon.vue';
+import CheckBoxIcon from './checkbox-icon.vue';
+import TablePopover from './table-popover.vue';
+import SubTable from './sub-table.vue';
+import utils from '../../utils/utils.js';
+import { getStyleOrClass } from '../ste-table/utils';
+import { childMixin } from '../../utils/mixin.js';
+/**
+ * ste-table-column 表格列
+ * @description 表格列组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-table
+ * @property {String} type 对应列的类型
+ * @property {String} label 显示的标题
+ * @property {String} prop 对应列内容的字段名
+ * @property {String} width 对应列的宽度
+ * @property {String} minWidth 对应列的最小宽度
+ * @property {String} align 对齐方式
+ * @property {String} textAlign 文字对齐方式，对应到css的text-align属性
+ * @property {String} headerAlign，表头对齐方式，若不设置该项，则使用表格的对齐方式
+ * @property {String} headerTextAlign，表头对齐方式，若不设置该项，则使用表格的对齐方式，对应到css的text-align属性
+ */
+export default {
+	name: 'ste-table-column',
+	mixins: [childMixin('ste-table')],
+	components: { RadioIcon, CheckBoxIcon, SubTable, TablePopover },
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		// 列类型：checkbox 可多选、radio 单选、index 从1开始展示索引
+		type: {
+			type: [String, null],
+			default: '',
+		},
+		customKey: {
+			type: [String, null],
+			default: '',
+		},
+		label: {
+			type: [String, null],
+			default: '',
+		},
+		prop: {
+			type: [String, null],
+			default: '',
+		},
+		width: {
+			type: [String, Number, null],
+			default: '',
+		},
+		minWidth: {
+			type: [String, null],
+			default: '',
+		},
+		align: {
+			type: [String, null],
+			default: 'left',
+		},
+		textAlign: {
+			type: [String, null],
+			default: 'left',
+		},
+		headerAlign: {
+			type: [String, null],
+			default: 'left',
+		},
+		headerTextAlign: {
+			type: [String, null],
+			default: 'left',
+		},
+	},
+	data() {
+		return {
+			row: {},
+			rowIndex: 0,
+			colIndex: 0,
+			rowSpan: false,
+		};
+	},
+	created() {},
+	watch: {
+		row: {
+			handler(val) {
+				if (Array.isArray(val[this.prop])) {
+					this.rowSpan = true;
+				}
+			},
+			immediate: true,
+		},
+	},
+	computed: {
+		cmpSelectionIconColor() {
+			return this.parent.selectionIconColor;
+		},
+		cmpRootStyle() {
+			let style = {};
+			if (this.width) {
+				// style.width = utils.addUnit(this.width);
+				// style.flexBasis = utils.addUnit(this.width);
+				style.flex = `0 1 ${utils.addUnit(this.width)}`;
+			}
+			if (this.minWidth) {
+				style.minWidth = utils.addUnit(this.minWidth);
+			}
+			return style;
+		},
+		cmpCellStyle() {
+			const cellClassParam = {
+				column: this.props,
+				columnIndex: this.row.colIndex,
+				row: this.row,
+				rowIndex: this.row.rowIndex,
+			};
+			return getStyleOrClass(this.parent.cellStyle, cellClassParam);
+		},
+		cmpRootClass() {
+			let classArr = [];
+			classArr.push(this.type);
+
+			if (this.align && this.align !== 'left') {
+				classArr.push('align-' + this.align);
+			}
+
+			if (this.textAlign && this.textAlign !== 'left') {
+				classArr.push('align-text-' + this.align);
+			}
+
+			if (this.parent.border) {
+				classArr.push('border');
+			}
+
+			if (this.parent.isPopover) {
+				classArr.push('popover');
+			}
+
+			if (this.rowSpan) {
+				classArr.push('row-span');
+			}
+
+			const cellClassParam = {
+				column: this.props,
+				columnIndex: this.row.colIndex,
+				row: this.row,
+				rowIndex: this.row.rowIndex,
+			};
+			classArr.push(getStyleOrClass(this.parent.cellClassName, cellClassParam, false));
+
+			return classArr.join(' ');
+		},
+		cmpShowCheck() {
+			if (!this.parent.checkStates || this.parent.checkStates.length == 0) return false;
+			let item = this.parent.checkStates.find((e) => e == this.row.rowIndex);
+			if (item != undefined) {
+				return true;
+			}
+			return false;
+		},
+		cmpDisableCheck() {
+			if (this.parent.selectable && this.type) {
+				return !this.parent.selectable(this.row, this.row.rowIndex);
+			}
+			return false;
+		},
+		cmpReadonlyCheck() {
+			if (this.parent.readable && this.type) {
+				return this.parent.readable(this.row, this.row.rowIndex);
+			}
+			return false;
+		},
+		cmpBorder() {
+			return this.parent.border;
+		},
+	},
+	methods: {
+		changeCheck() {
+			if (!this.cmpDisableCheck && !this.cmpReadonlyCheck) {
+				this.parent.handleCheck(this.row);
+			}
+		},
+		cellText(e) {
+			if (this.parent.formatter) {
+				let text = this.parent.formatter(this.row, this.customKey);
+				if (!text) {
+					text = this.row[this.prop];
+				}
+				return text;
+			} else {
+				if (this.row[this.prop]) {
+					return this.row[this.prop];
+				} else {
+					return this.parent.emptyText || '-';
+				}
+			}
+		},
+		cellClick(event) {
+			this.parent.cellClick(this.row, this._props, event);
+			// 扩大选中热区
+			if (this.type == 'checkbox' || this.type == 'radio') {
+				this.changeCheck();
+			}
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+.ste-table-cell {
+	@import './var.scss';
+	@import './common.scss';
+	@include cell;
+
+	&.row-span {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+}
+</style>

package/components/ste-table-column/sub-table.vue

@@ -0,0 +1,116 @@
+<template>
+	<view class="sub-table-root" :class="[cmpRootClass]">
+		<view class="row" v-for="(v, i) in rows" :key="i" :style="[cmpRowStyle]">
+			<view class="cell">
+				{{ v }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+
+function findMaxInRange(tolerance, numbers = []) {
+	if (numbers.length === 0) return 0;
+
+	let max = Math.max(...numbers);
+	let min = Math.min(...numbers);
+
+	// 如果最大值和最小值的差值在浮动范围内，返回 0
+	if (max - min <= tolerance) {
+		return 0;
+	}
+
+	// 返回最大值
+	return max;
+}
+export default {
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		rows: {
+			type: [Array, null],
+			default: () => [],
+		},
+		border: {
+			type: [Boolean, null],
+			default: false,
+		},
+	},
+	data() {
+		return {
+			rowEls: [],
+		};
+	},
+	mounted() {
+		utils.querySelector('.sub-table-root .row', this, true).then((rec) => {
+			this.rowEls = rec;
+		});
+	},
+	computed: {
+		cmpRootClass() {
+			let classArr = [];
+			if (this.border) {
+				classArr.push('border');
+			}
+			return classArr.join(' ');
+		},
+		cmpRowStyle() {
+			let style = {};
+			if (this.rowEls.length > 0) {
+				let maxHeight = findMaxInRange(
+					0.5,
+					this.rowEls.map((e) => e.height)
+				);
+				if (maxHeight > 0) {
+					style.flexBasis = maxHeight + 'px';
+					style.flexGrow = 0;
+				}
+			}
+			return style;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './var.scss';
+.sub-table-root {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+
+	&.border {
+		.row {
+			.cell {
+				border-bottom: $default-border;
+			}
+		}
+	}
+
+	.row {
+		// margin-left: -32rpx;
+		// width: calc(100% + 64rpx);
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		flex: 1;
+		.cell {
+			@import './common.scss';
+			@include cell;
+			// padding-right: 0;
+
+			border-bottom: none;
+			padding: 24rpx 32rpx;
+		}
+		&:nth-last-child(1) {
+			.cell {
+				border-bottom: none;
+			}
+		}
+	}
+}
+</style>