sone-ui-component-3.2.4 2.1.29 → 2.1.30

package/packages/normalTable/src/mainNew.vue

@@ -0,0 +1,496 @@
+<!--
+ * @Description:  直接copy的table 优化代码 硬是让我删掉了800行。。。
+ * @Author:xjl
+ * @Date:2021-09-10 11:03
+-->
+<template>
+	<div class="sone_table_box" >
+		<div class="table-menu-left" v-if="showMenuLeft">
+			<slot name="menuLeft"></slot>
+		</div>
+		<div class="table-menu-right"	v-if="showMenuRight">
+			<slot name="menuRight"></slot>
+			<el-dropdown trigger="click" :hide-on-click="false"	v-if="showColumnHandleBtn">
+				<IconButton
+					:iconfont="false"
+				  :tooltipDisabled="tooltipDisabled"
+					class="sort-btn"
+					content="列展示"
+					icon="el-icon-s-operation" />
+				<ColumnTransfer
+					ref="column-transfer"
+					:columns.sync="internalColumns"
+					@save="save"
+					@resetColumnTransfer="$emit('resetColumnTransfer')" />
+			</el-dropdown>
+			<slot name="transferRight"></slot>
+		</div>
+		<el-table
+			v-if="isTable"
+			v-loading="loading"
+			style="width: 100%"
+			:ref="tabelRef"
+			:class="'sone-table ' + className"
+			:cell-class-name="option.cellClassName"
+			:cell-style="option.cellStyle"
+			:data="tableData"
+			:header-cell-class-name="option.headerCellClassName"
+			:header-cell-style="option.headerCellStyle"
+			:header-row-class-name="option.headerRowClassName"
+			:header-row-style="option.headerRowStyle"
+			:height="option.height"
+			:highlight-current-row="option.highlightRow"
+			:max-height="option.maxHeight"
+			:row-class-name="tableRowClassName"
+			:row-key="option.rowKey"
+			:row-style="option.rowStyle"
+			:show-summary="option.showSummary"
+			:render-header="option.renderHeader"
+			:span-method="spanMethod"
+			:show-header="showHeader"
+			:stripe="stripe"
+			:border="border"
+			:sum-text="option.sumText"
+			:summary-method="summaryMethod"
+			@filter-change="filterChange"
+			@row-click="rowClick"
+			@header-dragend="onHeaderDragend"
+			@select="selectChange"
+			@select-all="selectAll">
+			<el-table-column
+				v-if="operation"
+				fixed
+				type="index"
+				:width="operation.width"
+				:label="operation.label ? operation.label : '操作'"
+				:resizable="operation.hasOwnProperty('resizable') ? operation.resizable : true">
+				<template slot-scope="scope">
+					<template v-if="!hideButtonMode">
+						<div class="sone-table-buttonList" v-if="scope.row.buttonShow&&scope.row.buttonShow.filter(d=>d.isShow).length<=3">
+							<template v-for="(item,index) in operation.buttonList">
+								<el-tooltip	:content="item.label"	:key="index" effect="light"	placement="top"	v-show="scope.row.buttonShow.find(i=>i.id===item.id).isShow">
+									<el-button
+										:icon="item.icon"
+										:style="{color:item.color}"
+										:disabled="scope.row.buttonShow.find(i=>i.id===item.id).isDisabled || false"
+										@click.native.stop="handButton(item.function, scope, item.id)"
+										circle
+										type="text"
+									></el-button>
+								</el-tooltip>
+							</template>
+						</div>
+
+						<div class="sone-table-buttonList" v-if="!scope.row.buttonShow&&operation.buttonList.length<=3">
+							<template v-for="(item,index) in operation.buttonList">
+								<el-tooltip	:content="item.label" :key="index" effect="light" placement="top">
+									<el-button
+										:icon="item.icon"
+										:style="{color:item.color}"
+										@click.native.stop="handButton(item.function,scope, item.id)"
+										circle
+										type="text"
+									></el-button>
+								</el-tooltip>
+							</template>
+						</div>
+					</template>
+					<template v-else>
+						<el-dropdown v-if="scope.row.buttonShow" class="dropdown_box_button sone-table-buttonList">
+							<span	class="el-dropdown-link color-span menu-more"	v-show="scope.row.buttonShow.filter(d=>d.isShow).length > 0">
+								<el-button type="text">
+									<i :style="{color:operation.moreIconColor}"	class="el-icon-more more-handel"></i>
+								</el-button>
+							</span>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item	class="sone-table-dropdown"	command="copy" v-for="(item, i) in scope.row.buttonShow.filter(d=>d.isShow)"	:key="i">
+									<el-button
+										:icon="operation.buttonList.find(d=>d.id===item.id).icon"
+										:disabled="item.hasOwnProperty('isDisabled') ? item.isDisabled : false"
+										:style="{color:operation.buttonList.find(d=>d.id===item.id).color}"
+										type="text"
+										:title="operation.buttonList.find(d=>d.id === item.id).label"
+										@click.native.stop="handButton(operation.buttonList.find(d=>d.id===item.id).function, scope, item.id)"
+									>{{operation.buttonList.find(d=>d.id===item.id).label}}</el-button>
+								</el-dropdown-item>
+							</el-dropdown-menu>
+						</el-dropdown>
+						<el-dropdown v-else	@command.stop="(command)=>{handleCommand(command,row)}"	class="dropdown_box_button sone-table-buttonList">
+							<span	class="el-dropdown-link color-span menu-more"	v-show="operation.buttonList.length > 0">
+								<el-button type="text">
+									<i :style="{color:operation.moreIconColor}"	class="el-icon-more more-handel"></i>
+								</el-button>
+							</span>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item
+									class="sone-table-dropdown"
+									command="copy"
+									v-for="(item, i) in operation.buttonList"
+									:key="i">
+									<el-button
+										:icon="item.icon"
+										:style="{color:item.color}"
+										:title="item.label"
+										type="text"
+										@click.native.stop="handButton(item.function, scope, item.id)"
+									>{{item.label}}</el-button>
+								</el-dropdown-item>
+							</el-dropdown-menu>
+						</el-dropdown>
+					</template>
+				</template>
+			</el-table-column>
+			<el-table-column
+				v-if="option.index"
+				fixed
+				type="index"
+				:width="option.indexWidth||50"
+				:label="option.indexLabel ? option.indexLabel : '序号'"
+				:index="indexMethod"
+			></el-table-column>
+			<el-table-column
+				v-if="option.selection"
+				fixed
+				type="selection"
+				:show-overflow-tooltip="false"
+				:width="option.selectionWidth || 45">
+			</el-table-column>
+			<template v-for="(column, index) in internalColumns">
+				<!-- 自定义列 -->
+				<slot v-if="column.slot && column.istrue" :name="column.slot"></slot>
+				<el-table-column
+					v-else-if="column.hasOwnProperty('istrue')?column.istrue:true"
+					:filter-method="column.filters ? filterHandler : null"
+					:filters="column.filters"
+					:fixed="column.fixed"
+					:key="`col_${column.prop}_${column.label}`"
+					:label="column.label"
+					:min-width="column.minWidth"
+					:prop="column.prop"
+					:width="column.width"
+					:align="column.hasOwnProperty('align') ? column.align : 'left'"
+					:show-overflow-tooltip="column.hasOwnProperty('showOverflowTooltip') ? column.showOverflowTooltip : false"
+					filter-placement="bottom-end"
+					:header-align="column.hasOwnProperty('headerAlign') ? column.headerAlign : 'left'"
+					:column-key="column.hasOwnProperty('elementId')? column.elementId:column.prop"
+					:resizable="column.hasOwnProperty('resizable') ? column.resizable : true">
+					<!-- 表头 -->
+					<template	slot="header"	slot-scope="scope">
+						<slot
+							v-if="column.slotColumnHeader && isShow"
+							:header="{column: scope.column, $index:scope.$index }"
+							:name="column.slotColumnHeader"
+						></slot>
+						<template v-if="!column.slotColumnHeader && isShow">
+							<div class="slot_header_class">
+								<span	class="table-header-isRequire" v-if="column.isRequire">*</span>
+								<span>{{ column.label }}</span>
+								<span class="hide">
+									<i
+										class="iconfont icon-help icon_describe"
+										:title="column.headerDescribe"
+										v-if="column.headerDescribe"
+									></i>
+									<span
+										:class="{ 'ascending': sortVal === column.prop + 'ascending', 'descending': sortVal === column.prop + 'descending' }"
+										class="caret-wrapper"
+										v-if="column.headerFilterSort">
+										<i
+											@click="handleCommand(column.prop, index, { command: 'ascending' })"
+											class="sort-caret ascending"
+											title="升序"
+										></i>
+										<i
+											@click="handleCommand(column.prop, index, { command: 'descending' })"
+											class="sort-caret descending"
+											title="降序"
+										></i>
+									</span>
+								</span>
+							</div>
+						</template>
+					</template>
+					<!--表体-->
+					<template slot-scope="scope">
+						<slot	:index="scope.$index"	:name="column.slotCell"	:row="scope.row" v-if="column.slotCell"></slot>
+						<template v-else>{{ scope.row[column.prop] }}</template>
+					</template>
+				</el-table-column>
+			</template>
+		</el-table>
+		<div class="pagination-box"	v-if="page && page.total > 0">
+			<el-pagination
+				:current-page="page.current"
+				:layout="page.layout ? page.layout : 'total, sizes, prev, pager, next, jumper'"
+				:page-size="page.size"
+				:page-sizes="page.pageSizes"
+				:total="page.total"
+				:page-count="page.pageCount"
+				:pager-count="page.pagerCount"
+				@current-change="currentChange"
+				@size-change="sizeChange"
+				background
+			></el-pagination>
+		</div>
+	</div>
+</template>
+
+<script>
+	import { deepClone } from 'sone-ui-component/src/utils/util'
+	import ColumnTransfer from './columnTransfer.vue'
+	import IconButton from "sone-ui-component/packages/IconButton/index.vue";
+	export default {
+		name: "SoneNormalTable",
+		components: { ColumnTransfer, IconButton },
+		props: {
+			showMenuLeft: {
+				type: Boolean,
+				default: false
+			},
+			showMenuRight: {
+				type: Boolean,
+				default: true
+			},
+			showColumnHandleBtn: {
+				type: Boolean,
+				default: true
+			},
+			hideButtonMode: {
+				type: Boolean,
+				default: false 
+			},
+			tabelRef: {
+				type: String,
+				default: 'tableDataRef'
+			},
+			loading: {
+				type: Boolean,
+				default: false,
+			},
+			showHeader: {
+				type: Boolean,
+				default: true,
+			},
+			stripe: {
+				type: Boolean,
+				default: true,
+			},
+			border: {
+				type: Boolean,
+				default: true,
+			},
+			option: {
+				type: Object,
+				default: () => {
+					return {
+						index: true,
+						indexWidth: 70,
+						height: 'auto',
+						maxHeight: 'auto',
+						showSummary: false,
+					}
+				}
+			},
+			operation: {
+				type: [Object, Boolean],
+				default: () => {
+					return {
+						width: 82,
+						label: '操作',
+						buttonList: [
+							{
+								label: '删除',
+								icon: 'el-icon-remove-outline',
+								function: 'handDetele',
+								tooltipContent: '删除',
+								color: 'red'
+							}, {
+								label: '添加',
+								icon: 'el-icon-circle-plus-outline',
+								function: 'hand',
+								tooltipContent: '删除',
+								color: 'red'
+							}
+						]
+					}
+				}
+			},
+			page: {
+				type: Object,
+			},
+			columns: {
+				type: Array,
+				default: () => []
+			},
+			tableData: {
+				type: Array,
+				default: () => []
+			},
+			// 表格className
+			className:{
+				type:String,
+				default:''
+			},
+			// 合计小数位数
+			summaryToFixed:{
+				type:[Number, String],
+				default:''
+			},
+			spanMethod: Function,
+			indexMethod: Function,
+			// 默认显示按钮图标加提示，
+			tooltipDisabled: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		data() {
+			return {
+				internalColumns: deepClone(this.columns).filter(d => d && !d.isHidden),
+				sortVal: '', // 排序
+				isShow: true,
+				isTable: true
+			}
+		},
+		watch: {
+			columns: {
+				deep: true,
+				handler() {
+					this.internalColumns = deepClone(this.columns).filter(d => d && !d.isHidden);
+				}
+			},
+		},
+		methods: {
+			// 下拉button
+			handleCommand(columnName, columnIndex, data) {
+				let tableData = deepClone(this.tableData)
+				if (data.command === "ascending" || data.command === "descending") {
+					if (this.sortVal && this.sortVal.indexOf(data.command) > -1) {
+						this.sortVal = ''
+					} else {
+						this.sortVal = columnName + data.command
+					}
+					if (this.option.defineSort) {
+						this.$emit('handleColumnFilter', columnName, columnIndex, data, !!!this.sortVal)
+					} else {
+						let isIncludeNaN = tableData.some(item => isNaN(Number(item[columnName])))
+						if ( isIncludeNaN ) { // 数据非纯数字使用原生ele方法
+							if(this.sortVal){
+								this.$refs[this.tabelRef].sort(columnName, data.command);
+							} else {
+								this.$refs[this.tabelRef].clearSort();
+							}
+						} else { // 纯数字使用sort排序
+							tableData.sort((a, b) => {
+								return data.command === 'ascending' ? a[columnName] - b[columnName] :  b[columnName] - a[columnName]
+							})
+							this.$emit('update:tableData', tableData)
+						}
+					}
+				} else {
+					this.$emit('handleColumnFilter', columnName, columnIndex, data)
+				}
+			},
+			selectChange(selection, row){
+				this.$emit('handleChecked', selection, row);
+			},
+			selectAll(selection){
+				this.$emit('selectAll', selection);
+			},
+			toggleSelection(rows, selected = true) {
+        if (rows) {
+          rows.forEach(row => {
+            this.$refs[this.tabelRef].toggleRowSelection(row, selected);
+          });
+        } else {
+          this.$refs[this.tabelRef].clearSelection();
+        }
+      },
+			// 翻页
+			sizeChange(val) {
+				this.$emit('sizeChange', val)
+			},
+			currentChange(val) {
+				this.$emit('currentChange', val)
+			},
+			// 合计
+			summaryMethod({ columns, data }) {
+				if (this.option.summaryMethod) {
+					return this.option.summaryMethod({ columns, data })
+				}
+				let _columns = deepClone(this.internalColumns);
+				const sums = [];
+				// 固定列会导致窜行 待改
+				if (!!this.operation ) sums.push(this.option.sumText || '合计')
+				if (this.option.selection) {
+					!!this.operation ? sums.push('') : sums.push('合计')
+				} 
+				_columns.forEach((column, index) => {
+					if ( column.istrue ) {
+						let num = 0
+						data.forEach(item => num += Number(item[column.prop]))
+						if ( isNaN(num) || !column.summary ) {
+							sums.push('')
+						} else if ( String(num).indexOf('.') != -1 && this.summaryToFixed ) {
+							sums.push(num.toFixed(this.summaryToFixed))
+						} else {
+							sums.push(num)
+						}
+					}
+				});
+				return sums;
+			},
+			// 行点击
+			rowClick(row, column, event) {
+				this.$emit('rowClick', row, column, event)
+			},
+			filterChange(filters) {
+				let data = deepClone(this.tableData)
+				// 判断是哪一列筛选
+				if (filters.name) {
+					data.name = filters.name[0]
+				}
+				this.$emit('update:tableData', data)
+			},
+			//过滤
+			filterHandler(value, row, column) {
+				const property = column['property'];
+				return row[property] === value;
+			},
+			// class
+			tableRowClassName({ row, rowIndex }) {
+				if (this.option.rowClassName) {
+					return this.option.rowClassName({ row, rowIndex })
+				}else return ''
+			},
+			handButton(functionName, scope, id) {
+				this.$emit(functionName, scope, id)
+			},
+			doLayout() {
+				this.$refs[this.tabelRef].doLayout();
+			},
+			/* 当拖动表头改变了列的宽度的时候会触发该事件 */
+			onHeaderDragend(newWidth, oldWidth, column, event){
+				let arr = [
+          ...this.$refs['column-transfer'].leftColumns, 
+          ...this.$refs['column-transfer'].noColumns,
+          ...this.$refs['column-transfer'].rightColumns
+        ]
+				this.$emit('headerDragend', newWidth, oldWidth, column, arr, event);
+			},
+			save(arr){
+				this.internalColumns = deepClone(arr);
+				this.isTable = false
+				this.$nextTick(() => {
+					this.isTable = true
+				})
+				this.$emit('save', arr);
+			},
+			/* 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 */
+			setCurrentRow(row){
+				this.$refs[this.tabelRef] && this.$refs[this.tabelRef].setCurrentRow(row);
+				this.$emit('setCurrentRow', row);
+			},
+		},
+	}
+</script>

package/src/index.js

@@ -57,7 +57,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.1.29',
+  version: '2.1.30',
   locale: locale.use,
   i18n: locale.i18n,
   install,

package/src/styles/table.scss

@@ -299,8 +299,9 @@
       color: $--color-primary;
       cursor: pointer;
       font-size: 12px;
+      margin: 0;
+      padding: 0 0 0 10px;
     }
-
   }
   .table-drag-ghost {
     border-bottom: 1px dashed $--color-primary;