ai.touchui-vue 1.30.2 → 1.30.3

package/packages/table/index.js

@@ -1,8 +1,8 @@
-import table from './src/table';
-
-/* istanbul ignore next */
-table.install = function(Vue) {
-	Vue.component(table.name, table);
-};
-
-export default table;
+import table from './src/table';
+
+/* istanbul ignore next */
+table.install = function(Vue) {
+	Vue.component(table.name, table);
+};
+
+export default table;

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

@@ -1,301 +1,301 @@
-<template>
-	<tbody ref="tbody" @click="clickHandle" @mouseover="ToTable.handleTableMouseover" @mouseout="ToTable.handleTableMouseout" @mousedown="ToTable.handleTableMousedown" @touchstart="ToTable.handleTableMousedown" @touchmove="ToTable.handleTableMousemove" @mouseup="ToTable.handleTableMouseup" @touchend="ToTable.handleTableMouseup" @dblclick="dbclickHandle">
-		<tr v-for="(dataItem,dataIndex) in data" v-show="dataItem._show" :key="dataIndex" :class="setTrClass(dataItem)" :style="setTrStyle" :data-index="dataIndex" @contextmenu.prevent="($event) => ToTable.handleTableRowRightClick(dataItem,dataIndex,$event)">
-			<td v-if="ToTable.type === 'v'">
-				<slot name="v" :row="dataItem" :index="dataIndex">
-					<to-grid :space="1.5">
-						<to-grid-item v-if="tableData.some(column => column.type === 'icon')" side>
-							<slot :name="tableData.find(column => column.type === 'icon').prop" :row="dataItem" :index="dataIndex">
-								<to-icon v-size="ToTable.iconSize" :value="dataItem[tableData.find(column => column.type === 'icon').prop] || ToTable.icon" v-bind="ToTable.iconProps"></to-icon>
-							</slot>
-						</to-grid-item>
-						<to-grid-item>
-							<to-card padding="0">
-								<to-card-item main align="center">
-									<template v-if="tableData.some(column => column.type === 'key')" slot="title">
-										<slot :name="tableData.find(column => column.type === 'key').prop" :row="dataItem" :index="dataIndex">
-											{{ dataItem[tableData.find(column => column.type === 'key').prop] }}
-										</slot>
-									</template>
-									<template v-if="tableData.some(column => column.type === 'desc')" slot="content">
-										<slot :name="tableData.find(column => column.type === 'desc').prop" :row="dataItem" :index="dataIndex">
-											{{ dataItem[tableData.find(column => column.type === 'desc').prop] }}
-										</slot>
-									</template>
-								</to-card-item>
-								<to-card-item v-if="tableData.some(column => column.type === 'state')">
-									<slot :name="tableData.find(column => column.type === 'state').prop" :row="dataItem" :index="dataIndex">
-										<to-tag mode="plain" color="primary" fillet="pill">
-											{{ dataItem[tableData.find(column => column.type === 'state').prop] }}
-										</to-tag>
-									</slot>
-								</to-card-item>
-								<template v-if="tableData.some(column => column.type === 'selection')">
-									<to-card-item v-if="ToTable.contextSelection === true || ToTable.contextSelection === null">
-										<to-checkbox v-model="dataItem._checked" :readonly="dataItem.disabled" :on-value="true" :off-value="false" @change="ToTable.handleTableRowChecked($event,dataIndex,dataItem[tableData.find(column => column.type === 'selection').prop])"></to-checkbox>
-									</to-card-item>
-								</template>
-								<template v-if="tableData.some(column => column.type === 'radio')">
-									<to-card-item>
-										<input v-model="ToTable.checkedRadio" type="radio" :value="String(dataIndex)" :disabled="dataItem.disabled" :name="`radio${ToTable.random}`" @click.stop="ToTable.clickRadio(dataItem,dataIndex)" @change="ToTable.handleTableRowRadio(dataItem)" />
-									</to-card-item>
-								</template>
-							</to-card>
-							<to-space v-if="ToTable.hasKey"></to-space>
-							<to-param>
-								<template v-for="(column, index) in tableData">
-									<li v-if="!['key', 'desc', 'icon', 'state', 'selection', 'radio', 'action'].includes(column.type) && showColumn(column)" :key="index">
-										<div class="label">{{ column.label }}</div>
-										<div class="value">
-											<slot :detail="true" :name="column.prop" :row="dataItem" :index="dataIndex">
-												{{ dataItem[column.prop] }}
-											</slot>
-										</div>
-									</li>
-								</template>
-							</to-param>
-							<div v-if="tableData.some(column => column.type === 'action') && !ToTable.contextAction" class="to-table-action" @click.stop>
-								<slot :name="tableData.find(column => column.type === 'action').prop" :row="dataItem" :index="dataIndex">
-									{{ dataItem[tableData.find(column => column.type === 'action').prop] }}
-								</slot>
-							</div>
-						</to-grid-item>
-					</to-grid>
-				</slot>
-			</td>
-			<template v-for="(column,columnIndex) in tableData" v-else>
-				<template v-if="showColumn(column,columnIndex)">
-					<td v-if="column.type === 'selection'" :key="columnIndex" class="checkbox">
-						<to-checkbox v-model="dataItem._checked" :readonly="dataItem.disabled" :on-value="true" :off-value="false" @change="ToTable.handleTableRowChecked($event,dataIndex,column.prop)"></to-checkbox>
-					</td>
-					<td v-else-if="column.type === 'radio'" :key="'radio' + columnIndex" class="checkbox">
-						<input v-model="ToTable.checkedRadio" type="radio" :value="String(dataIndex)" :disabled="dataItem.disabled" :name="`radio${ToTable.random}`" @click.stop="ToTable.checkedRadioHandle(dataItem,dataIndex)" />
-					</td>
-					<td v-else-if="column.type === 'index'" :key="'index' + columnIndex" class="index">
-						{{ dataItem._index }}
-					</td>
-					<td v-else-if="column.type === 'action' && !ToTable.contextAction" :key="'action' + columnIndex" class="action" @click.stop>
-						<slot :name="column.prop" :row="dataItem" :column="column" :index="dataIndex">
-							{{ dataItem[column.prop] }}
-						</slot>
-					</td>
-					<td v-else-if="!(column.type === 'action' && ToTable.contextAction)" :key="'context' + columnIndex" :class="setClass(column)">
-						<template v-if="column._isFirst && dataItem._level">
-							<to-space v-for="spaceIndex in (dataItem._level - 1)" :key="spaceIndex" :value="1.5" type="inline"></to-space>
-						</template>
-						<to-icon v-if="dataItem._hasChild && column._isFirst" class="folder" fillet="normal" :value="dataItem._showChild ? 'unfold':'next'" color="info" mode="none" link @click.stop="toggleFold(dataItem,dataIndex)"></to-icon>
-						<slot :name="column.prop" :row="dataItem" :column="column" :index="dataIndex">
-							<template v-if="typeof column.formatter === 'function'">
-								<div v-html="column.formatter(dataItem,column,dataItem[column.prop],dataIndex)"></div>
-							</template>
-							<template v-else-if="column.tipCount && column.tipCount > 0">
-								<to-ellipsis :count="column.tipCount" tip :data="dataItem[column.prop]"></to-ellipsis>
-							</template>
-							<template v-else>{{ dataItem[column.prop] }}</template>
-						</slot>
-					</td>
-				</template>
-			</template>
-		</tr>
-	</tbody>
-</template>
-<script>
-export default {
-	props: {
-		columnData: {
-			type: Array,
-			default: () => []
-		},
-		data: {
-			type: Array,
-			default: () => []
-		}
-	},
-	data() {
-		return {
-			isClick: false,
-			isDblClick: false,
-			clickTimer: null
-		}
-	},
-	computed: {
-		showColumn() {
-			let that = this
-			return function(column, columnIndex) {
-
-				// 如果明确有隐藏标识，直接隐藏
-				if (column.show === false) {
-					return false
-				} else {
-					if (that.ToTable.type === 'v') {
-						if (['key', 'desc', 'icon', 'state', 'selection', 'radio', 'action'].includes(column.type)) {
-							return false
-						}
-					} else {
-						if (['selection', 'radio', 'action'].includes(column.type)) {
-							return true
-						}
-					}
-					if (that.ToTable.showColumns) {
-
-						// 保留行数
-						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
-					}
-				}
-			}
-		},
-		setClass() {
-			return function(column) {
-				let arr = []
-				if (column.type === 'key') {
-					arr.push('key')
-				}
-				if (column.type === 'action') {
-					arr.push('action')
-				}
-				if (column.type === 'edit') {
-					arr.push('edit')
-				}
-				if (column.type === 'desc') {
-					arr.push('desc')
-				}
-				if (column.wrap) {
-					arr.push('wrap')
-				}
-				if (column.className) {
-					let className = column.className.split(',')
-					arr = arr.concat(className)
-				}
-				return arr
-			}
-		},
-		setTrClass() {
-			return function(dataItem) {
-				let arr = []
-				if (dataItem._on) {
-					arr.push('on')
-				}
-				if (dataItem._hover) {
-					arr.push('hover')
-				}
-				if (dataItem._active) {
-					arr.push('active')
-				}
-				if (dataItem._className) {
-					let className = dataItem._className.split(',')
-					arr = arr.concat(className)
-				}
-				return arr
-			}
-		},
-		setTrStyle() {
-			let obj = {}
-			if (this.ToTable.space) {
-				obj.marginTop = `${this.ToTable.space}em`
-			}
-			return obj
-		},
-		tableData() {
-			const result = [];
-			function traverse(headers) {
-				headers.forEach(header => {
-					if (header.children && !header.children.every(child => child.show === false)) {
-						traverse(header.children);
-					} else {
-						result.push(header);
-					}
-				})
-			}
-			traverse(this.columnData);
-			return result;
-		}
-	},
-	inject: ['ToTable'],
-	methods: {
-		toggleFold(item, index) {
-			let that = this
-			if (!item._showChild) {
-				item._showChild = true
-			} else {
-				item._showChild = false
-			}
-			for (let i = index + 1; i < this.data.length; i++) {
-				const el = this.data[i];
-				if (item._showChild) {
-					if (el._level === item._level + 1) {
-						el._show = true
-					} else if (el._level <= item._level) {
-						break
-					}
-				} else {
-					if (el._level === item._level + 1) {
-						hide(el, i)
-					} else if (el._level <= item._level) {
-						break
-					}
-				}
-			}
-			function hide(tr, index) {
-				tr._show = false
-				tr._showChild = false
-				if (tr._hasChild) {
-					for (let i = index + 1; i < that.data.length; i++) {
-						const el = that.data[i];
-						if (el._level === tr._level + 1) {
-							hide(el, i)
-						} else {
-							break
-						}
-					}
-				}
-			}
-			this.ToTable.adjust()
-		},
-		clickHandle(event) {
-			const path = Array.isArray(event) ? event : (event.composedPath && event.composedPath()) || event.path;
-			if (this.ToTable.$listeners['row-dblclick'] || this.ToTable.$listeners['cell-dblclick']) {
-				this.clickTimer = setTimeout(() => {
-					if (!this.isDblClick) {
-						this.isClick = true
-						this.ToTable.handleTableClick(event, path)
-						let timer = setTimeout(() => {
-							this.isClick = false
-							clearTimeout(timer)
-						}, 300)
-					} else {
-						this.isDblClick = false
-					}
-					clearTimeout(this.clickTimer)
-				}, 300)
-			}
-			// 没有双击事件则不延时处理
-			else {
-				this.ToTable.handleTableClick(event)
-			}
-		},
-		dbclickHandle(event) {
-			if (!this.isClick) {
-				this.isDblClick = true
-				this.ToTable.handleTableDblClick(event)
-			} else {
-				this.isClick = false
-			}
-		}
-	}
-}
-</script>
+<template>
+	<tbody ref="tbody" @click="clickHandle" @mouseover="ToTable.handleTableMouseover" @mouseout="ToTable.handleTableMouseout" @mousedown="ToTable.handleTableMousedown" @touchstart="ToTable.handleTableMousedown" @touchmove="ToTable.handleTableMousemove" @mouseup="ToTable.handleTableMouseup" @touchend="ToTable.handleTableMouseup" @dblclick="dbclickHandle">
+		<tr v-for="(dataItem,dataIndex) in data" v-show="dataItem._show" :key="dataIndex" :class="setTrClass(dataItem)" :style="setTrStyle" :data-index="dataIndex" @contextmenu.prevent="($event) => ToTable.handleTableRowRightClick(dataItem,dataIndex,$event)">
+			<td v-if="ToTable.type === 'v'">
+				<slot name="v" :row="dataItem" :index="dataIndex">
+					<to-grid :space="1.5">
+						<to-grid-item v-if="tableData.some(column => column.type === 'icon')" side>
+							<slot :name="tableData.find(column => column.type === 'icon').prop" :row="dataItem" :index="dataIndex">
+								<to-icon v-size="ToTable.iconSize" :value="dataItem[tableData.find(column => column.type === 'icon').prop] || ToTable.icon" v-bind="ToTable.iconProps"></to-icon>
+							</slot>
+						</to-grid-item>
+						<to-grid-item>
+							<to-card padding="0">
+								<to-card-item main align="center">
+									<template v-if="tableData.some(column => column.type === 'key')" slot="title">
+										<slot :name="tableData.find(column => column.type === 'key').prop" :row="dataItem" :index="dataIndex">
+											{{ dataItem[tableData.find(column => column.type === 'key').prop] }}
+										</slot>
+									</template>
+									<template v-if="tableData.some(column => column.type === 'desc')" slot="content">
+										<slot :name="tableData.find(column => column.type === 'desc').prop" :row="dataItem" :index="dataIndex">
+											{{ dataItem[tableData.find(column => column.type === 'desc').prop] }}
+										</slot>
+									</template>
+								</to-card-item>
+								<to-card-item v-if="tableData.some(column => column.type === 'state')">
+									<slot :name="tableData.find(column => column.type === 'state').prop" :row="dataItem" :index="dataIndex">
+										<to-tag mode="plain" color="primary" fillet="pill">
+											{{ dataItem[tableData.find(column => column.type === 'state').prop] }}
+										</to-tag>
+									</slot>
+								</to-card-item>
+								<template v-if="tableData.some(column => column.type === 'selection')">
+									<to-card-item v-if="ToTable.contextSelection === true || ToTable.contextSelection === null">
+										<to-checkbox v-model="dataItem._checked" :readonly="dataItem.disabled" :on-value="true" :off-value="false" @change="ToTable.handleTableRowChecked($event,dataIndex,dataItem[tableData.find(column => column.type === 'selection').prop])"></to-checkbox>
+									</to-card-item>
+								</template>
+								<template v-if="tableData.some(column => column.type === 'radio')">
+									<to-card-item>
+										<input v-model="ToTable.checkedRadio" type="radio" :value="String(dataIndex)" :disabled="dataItem.disabled" :name="`radio${ToTable.random}`" @click.stop="ToTable.clickRadio(dataItem,dataIndex)" @change="ToTable.handleTableRowRadio(dataItem)" />
+									</to-card-item>
+								</template>
+							</to-card>
+							<to-space v-if="ToTable.hasKey"></to-space>
+							<to-param>
+								<template v-for="(column, index) in tableData">
+									<li v-if="!['key', 'desc', 'icon', 'state', 'selection', 'radio', 'action'].includes(column.type) && showColumn(column)" :key="index">
+										<div class="label">{{ column.label }}</div>
+										<div class="value">
+											<slot :detail="true" :name="column.prop" :row="dataItem" :index="dataIndex">
+												{{ dataItem[column.prop] }}
+											</slot>
+										</div>
+									</li>
+								</template>
+							</to-param>
+							<div v-if="tableData.some(column => column.type === 'action') && !ToTable.contextAction" class="to-table-action" @click.stop>
+								<slot :name="tableData.find(column => column.type === 'action').prop" :row="dataItem" :index="dataIndex">
+									{{ dataItem[tableData.find(column => column.type === 'action').prop] }}
+								</slot>
+							</div>
+						</to-grid-item>
+					</to-grid>
+				</slot>
+			</td>
+			<template v-for="(column,columnIndex) in tableData" v-else>
+				<template v-if="showColumn(column,columnIndex)">
+					<td v-if="column.type === 'selection'" :key="columnIndex" class="checkbox">
+						<to-checkbox v-model="dataItem._checked" :readonly="dataItem.disabled" :on-value="true" :off-value="false" @change="ToTable.handleTableRowChecked($event,dataIndex,column.prop)"></to-checkbox>
+					</td>
+					<td v-else-if="column.type === 'radio'" :key="'radio' + columnIndex" class="checkbox">
+						<input v-model="ToTable.checkedRadio" type="radio" :value="String(dataIndex)" :disabled="dataItem.disabled" :name="`radio${ToTable.random}`" @click.stop="ToTable.checkedRadioHandle(dataItem,dataIndex)" />
+					</td>
+					<td v-else-if="column.type === 'index'" :key="'index' + columnIndex" class="index">
+						{{ dataItem._index }}
+					</td>
+					<td v-else-if="column.type === 'action' && !ToTable.contextAction" :key="'action' + columnIndex" class="action" @click.stop>
+						<slot :name="column.prop" :row="dataItem" :column="column" :index="dataIndex">
+							{{ dataItem[column.prop] }}
+						</slot>
+					</td>
+					<td v-else-if="!(column.type === 'action' && ToTable.contextAction)" :key="'context' + columnIndex" :class="setClass(column)">
+						<template v-if="column._isFirst && dataItem._level">
+							<to-space v-for="spaceIndex in (dataItem._level - 1)" :key="spaceIndex" :value="1.5" type="inline"></to-space>
+						</template>
+						<to-icon v-if="dataItem._hasChild && column._isFirst" class="folder" fillet="normal" :value="dataItem._showChild ? 'unfold':'next'" color="info" mode="none" link @click.stop="toggleFold(dataItem,dataIndex)"></to-icon>
+						<slot :name="column.prop" :row="dataItem" :column="column" :index="dataIndex">
+							<template v-if="typeof column.formatter === 'function'">
+								<div v-html="column.formatter(dataItem,column,dataItem[column.prop],dataIndex)"></div>
+							</template>
+							<template v-else-if="column.tipCount && column.tipCount > 0">
+								<to-ellipsis :count="column.tipCount" tip :data="dataItem[column.prop]"></to-ellipsis>
+							</template>
+							<template v-else>{{ dataItem[column.prop] }}</template>
+						</slot>
+					</td>
+				</template>
+			</template>
+		</tr>
+	</tbody>
+</template>
+<script>
+export default {
+	props: {
+		columnData: {
+			type: Array,
+			default: () => []
+		},
+		data: {
+			type: Array,
+			default: () => []
+		}
+	},
+	data() {
+		return {
+			isClick: false,
+			isDblClick: false,
+			clickTimer: null
+		}
+	},
+	computed: {
+		showColumn() {
+			let that = this
+			return function(column, columnIndex) {
+
+				// 如果明确有隐藏标识，直接隐藏
+				if (column.show === false) {
+					return false
+				} else {
+					if (that.ToTable.type === 'v') {
+						if (['key', 'desc', 'icon', 'state', 'selection', 'radio', 'action'].includes(column.type)) {
+							return false
+						}
+					} else {
+						if (['selection', 'radio', 'action'].includes(column.type)) {
+							return true
+						}
+					}
+					if (that.ToTable.showColumns) {
+
+						// 保留行数
+						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
+					}
+				}
+			}
+		},
+		setClass() {
+			return function(column) {
+				let arr = []
+				if (column.type === 'key') {
+					arr.push('key')
+				}
+				if (column.type === 'action') {
+					arr.push('action')
+				}
+				if (column.type === 'edit') {
+					arr.push('edit')
+				}
+				if (column.type === 'desc') {
+					arr.push('desc')
+				}
+				if (column.wrap) {
+					arr.push('wrap')
+				}
+				if (column.className) {
+					let className = column.className.split(',')
+					arr = arr.concat(className)
+				}
+				return arr
+			}
+		},
+		setTrClass() {
+			return function(dataItem) {
+				let arr = []
+				if (dataItem._on) {
+					arr.push('on')
+				}
+				if (dataItem._hover) {
+					arr.push('hover')
+				}
+				if (dataItem._active) {
+					arr.push('active')
+				}
+				if (dataItem._className) {
+					let className = dataItem._className.split(',')
+					arr = arr.concat(className)
+				}
+				return arr
+			}
+		},
+		setTrStyle() {
+			let obj = {}
+			if (this.ToTable.space) {
+				obj.marginTop = `${this.ToTable.space}em`
+			}
+			return obj
+		},
+		tableData() {
+			const result = [];
+			function traverse(headers) {
+				headers.forEach(header => {
+					if (header.children && !header.children.every(child => child.show === false)) {
+						traverse(header.children);
+					} else {
+						result.push(header);
+					}
+				})
+			}
+			traverse(this.columnData);
+			return result;
+		}
+	},
+	inject: ['ToTable'],
+	methods: {
+		toggleFold(item, index) {
+			let that = this
+			if (!item._showChild) {
+				item._showChild = true
+			} else {
+				item._showChild = false
+			}
+			for (let i = index + 1; i < this.data.length; i++) {
+				const el = this.data[i];
+				if (item._showChild) {
+					if (el._level === item._level + 1) {
+						el._show = true
+					} else if (el._level <= item._level) {
+						break
+					}
+				} else {
+					if (el._level === item._level + 1) {
+						hide(el, i)
+					} else if (el._level <= item._level) {
+						break
+					}
+				}
+			}
+			function hide(tr, index) {
+				tr._show = false
+				tr._showChild = false
+				if (tr._hasChild) {
+					for (let i = index + 1; i < that.data.length; i++) {
+						const el = that.data[i];
+						if (el._level === tr._level + 1) {
+							hide(el, i)
+						} else {
+							break
+						}
+					}
+				}
+			}
+			this.ToTable.adjust()
+		},
+		clickHandle(event) {
+			const path = Array.isArray(event) ? event : (event.composedPath && event.composedPath()) || event.path;
+			if (this.ToTable.$listeners['row-dblclick'] || this.ToTable.$listeners['cell-dblclick']) {
+				this.clickTimer = setTimeout(() => {
+					if (!this.isDblClick) {
+						this.isClick = true
+						this.ToTable.handleTableClick(event, path)
+						let timer = setTimeout(() => {
+							this.isClick = false
+							clearTimeout(timer)
+						}, 300)
+					} else {
+						this.isDblClick = false
+					}
+					clearTimeout(this.clickTimer)
+				}, 300)
+			}
+			// 没有双击事件则不延时处理
+			else {
+				this.ToTable.handleTableClick(event)
+			}
+		},
+		dbclickHandle(event) {
+			if (!this.isClick) {
+				this.isDblClick = true
+				this.ToTable.handleTableDblClick(event)
+			} else {
+				this.isClick = false
+			}
+		}
+	}
+}
+</script>