sone-ui-component-3.2.4 2.1.16 → 2.1.18

package/packages/normalTable/src/main.vue

@@ -0,0 +1,520 @@
+<!--
+ * @Description:  直接copy的table 删掉了一些树的逻辑
+ * @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 :hide-on-click="false"	v-if="showColumnHandleBtn" @visible-change="onColumnVisibleMenu">
+				<icon-button
+					:iconfont="false"
+				  :tooltipDisabled="tooltipDisabled"
+					class="sort-btn"
+					content="列展示"
+					icon="el-icon-s-operation"
+				></icon-button>
+				<ColumnTransfer
+					ref="column-transfer"
+					:columns.sync="internalColumns"
+					@dropdownList="dropdownList"
+					@handleCheckedColumnChange="handleCheckedColumnChange"
+					@selectFixed="selectFixed"
+					@resetColumnTransfer="$emit('resetColumnTransfer')"
+				></ColumnTransfer>
+			</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"
+			@selection-change="handleSelectionChange">
+			<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">
+					<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>
+			</el-table-column>
+			<el-table-column
+				:width="option.indexWidth||50"
+				fixed
+				:label="option.indexLabel ? option.indexLabel : '序号'"
+				type="index"
+				:index="indexMethod"
+				:resizable="option.hasOwnProperty('indexResizable') ? option.indexResizable : true"
+				v-if="option.index"
+			></el-table-column>
+			<el-table-column
+				v-if="option.hasOwnProperty('selection') ? option.selection : false"
+				type="selection"
+				: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="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>
+							<el-tooltip :content="String(scope.row[column.prop])" placement="top" effect="light" popper-class="over_popper">
+								<span class="over_title">{{ scope.row[column.prop] }}</span>
+							</el-tooltip>
+						</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'
+	export default {
+		name: "SoneNormalTable",
+		components: { ColumnTransfer },
+		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',
+
+					}
+				}
+			},
+			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);
+				}
+			},
+			internalColumns: {
+				deep: true,
+				handler() {
+					this.isShow = false
+					this.$nextTick(() => {  //不放在这里面会导致视图不刷新
+						this.isShow = true;
+					})
+					this.$refs[this.tabelRef] && this.$refs[this.tabelRef].doLayout();
+				}
+			},
+		},
+		methods: {
+			columnsCheckList(valArr) {
+				this.internalColumns.forEach(i => {
+					if (valArr.includes(i.label)) {
+						this.$set(i, 'istrue', true)
+					} else {
+						this.$set(i, 'istrue', false)
+					}
+				});
+				this.$nextTick(() => {
+					this.$refs[this.tabelRef] && this.$refs[this.tabelRef].doLayout();
+				});
+			},
+			selectFixed(items) {
+				this.internalColumns = deepClone(items);
+				this.$nextTick(() => {
+					this.$refs[this.tabelRef] && this.$refs[this.tabelRef].doLayout();
+				});
+
+			},
+			handleCheckedColumnChange(data, internalColumns) {
+				if(data){
+					this.columnsCheckList(data)
+				}
+				if(internalColumns && internalColumns.length){
+					this.$nextTick(() => {
+						this.internalColumns = deepClone(internalColumns);
+					});
+				}
+			},
+			dropdownList(itemset) {
+				this.internalColumns = deepClone(itemset);
+				this.isTable = false
+				this.$nextTick(() => {
+					this.isTable = true
+				})
+			},
+			// 下拉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)
+				}
+			},
+			handleSelectionChange(val){
+				this.$emit('handleChecked', val);
+			},
+			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.indexCheck || this.option.index ) {
+					!!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 }) {
+				let rowClass = ''
+				if (this.option.rowClassName) {
+					rowClass = this.option.rowClassName({ row, rowIndex })
+				}
+				if(this.option.indexCheck === true && row.checked === true && !this.option['clickRowNoCheck']){
+					return `current-row ${rowClass}`;
+				}
+				return rowClass;
+			},
+			handButton(functionName, scope, id) {
+				this.$emit(functionName, scope, id)
+			},
+			doLayout() {
+				this.$refs[this.tabelRef].doLayout();
+			},
+			/* 表格-列显隐-下拉菜单 */
+			onColumnVisibleMenu(flag){
+        let arr = [
+          ...this.$refs['column-transfer'].leftColumns, 
+          ...this.$refs['column-transfer'].noColumns,
+          ...this.$refs['column-transfer'].rightColumns
+        ]
+				// this.$emit('columnsVisibleMenu', flag, this.internalColumns );
+				this.$emit('columnsVisibleMenu', flag, arr );
+			},
+			/* 当拖动表头改变了列的宽度的时候会触发该事件 */
+			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);
+			},
+			/* 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 */
+			setCurrentRow(row){
+				this.$refs[this.tabelRef] && this.$refs[this.tabelRef].setCurrentRow(row);
+				this.$emit('setCurrentRow', row);
+			},
+		},
+	}
+</script>

package/packages/table/src/main.vue

@@ -41,9 +41,6 @@
 			<slot name="transferRight"></slot>
 		</div>
 		<el-table
-			:useVirtual="option.useVirtual"
-			:rowHeight="option.rowHeight"
-			:excessRows="option.excessRows"
 			:cell-class-name="option.cellClassName"
 			:cell-style="option.cellStyle"
 			:data="tableData"

package/src/index.js

@@ -9,6 +9,7 @@ import Watermark from '../packages/watermark/index.js';
 import Form from '../packages/form/index.js';
 import Dialog from '../packages/dialog/index.js';
 import Table from '../packages/table/index.js';
+import NormalTable from '../packages/normalTable/index.js';
 import Select from '../packages/select/index.js';
 import DatePicker from '../packages/datePicker/index.js';
 import DatePickerRange from '../packages/datePickerRange/index.js';
@@ -28,6 +29,7 @@ const components = [
   Form,
   Dialog,
   Table,
+  NormalTable,
   Select,
   DatePicker,
   DatePickerRange,
@@ -55,7 +57,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.1.16',
+  version: '2.1.18',
   locale: locale.use,
   i18n: locale.i18n,
   install,
@@ -68,6 +70,7 @@ export default {
   Form,
   Dialog,
   Table,
+  NormalTable,
   Select,
   DatePicker,
   DatePickerRange,

package/src/styles/table.scss

@@ -47,6 +47,13 @@
     right: 10px;
     top: -5px;
   }
+  .el-table-column--selection{
+    .cell{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
 
   /**/
   .caret-wrapper.active i{