sone-ui-component-3.2.4 2.1.32 → 2.1.34

package/package.json

@@ -1,6 +1,6 @@
   {
   "name": "sone-ui-component-3.2.4",
-  "version": "2.1.32",
+  "version": "2.1.34",
   "private": false,
   "main": "lib/sone-ui.common.js",
   "files": [

package/packages/normalTable/src/columnTransferNew.vue

@@ -7,11 +7,7 @@
 	<el-dropdown-menu slot="dropdown">
 		<div class="dropdown_box">
 			<div class="dropdown_title">
-				<el-checkbox
-					v-model="columnsCheckAll"
-					:indeterminate="isIndeterminate"
-					@change="handleColumnsCheckListChange"
-				>列展示</el-checkbox>
+				<el-checkbox v-model="columnsCheckAll" :indeterminate="isIndeterminate"	@change="checkAll">列展示</el-checkbox>
 				<div>
 					<el-button class="rigth_button"	type="text" @click="save">保存</el-button>
 					<el-button class="rigth_button"	type="text" @click="resetList">重置</el-button>
@@ -80,7 +76,7 @@
 				</div>
 				<div v-show="noColumns.length">
 					<p class="title">不固定</p>
-					<el-checkbox-group class="item" v-model="columnsCheckList"	@change="handleCheckedColumnChange">
+					<el-checkbox-group class="item" v-model="columnsCheckList" @change="handleCheckedColumnChange">
 						<div
 							class="hover_label"
 							v-for="(item,index) in noColumns"
@@ -221,7 +217,7 @@
 				this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length;
 			},
 			//事件-是否勾选-列展示
-			handleColumnsCheckListChange(value) {
+			checkAll(value) {
 				this.columnsCheckList = value ? this.columns.map(item => item.label) : [];
 				this.isIndeterminate = false;
 			},

package/packages/table/index.js

@@ -5,7 +5,8 @@
  * @LastEditTime: 2021-08-27 16:11:37
  * @LastEditors: songlin
  */
-import Table from './src/main';
+// import Table from './src/main';
+import Table from './src/mainNew';
 
 Table.install = function(Vue) {
   Vue.component(Table.name, Table);

package/packages/table/src/columnTransferNew.vue

@@ -0,0 +1,326 @@
+<!--
+ * @Description: 
+ * @Author:xjl
+ * @Date:2021-09-14 13:03
+-->
+<template>
+	<div>
+		<el-dropdown-menu slot="dropdown">
+			<div class="dropdown_box">
+				<div class="dropdown_title">
+					<el-checkbox
+						:indeterminate="isIndeterminate"
+						v-model="columnsCheckAll"
+						@change="handleColumnsCheckListChange"
+					>列展示</el-checkbox>
+					<div>
+						<el-button class="rigth_button"	type="text" @click="save">保存</el-button>
+						<el-button class="rigth_button"	type="text" @click="resetList">重置</el-button>
+					</div>
+				</div>
+				<div class="dropdown_content" :class="[dragTarClass]">
+					<div v-show="leftColumns.length">
+						<p class="title">固定在左侧</p>
+						<el-checkbox-group
+							v-model="columnsCheckList"
+							@change="handleCheckedColumnChange"
+							class="item1"
+						>
+							<div
+								class="hover_label"
+								v-for="(item,index) in leftColumns"
+								:key="item.prop+'#'+item.istrue + index"
+							>
+								<label class="el-checkbox is-checked">
+									<el-checkbox :label="item.label"></el-checkbox>
+								</label>
+								<span class="icon_display">
+									<el-tooltip
+										placement="top"
+										content="不固定"
+										effect="light"
+									>
+										<i
+											class="iconfont iconfont-action icon-close"
+											@click="selectFixed('leftColumns', index, item)"
+										></i>
+									</el-tooltip>
+									<el-tooltip
+										placement="top"
+										content="固定在右侧"
+										effect="light"
+									>
+										<i
+											class="iconfont iconfont-action icon-down1"
+											@click="selectFixed('leftColumns', index, item, 'right')"
+										></i>
+									</el-tooltip>
+								</span>
+							</div>
+						</el-checkbox-group>
+					</div>
+					<div v-show="rightColumns.length">
+						<p class="title">固定在右侧</p>
+						<el-checkbox-group
+							v-model="columnsCheckList"
+							@change="handleCheckedColumnChange"
+							class="item2"
+						>
+							<div
+								class="hover_label"
+								v-for="(item,index) in rightColumns"
+								:key="item.prop+'#'+item.istrue + index"
+							>
+								<label class="el-checkbox is-checked">
+									<el-checkbox :label="item.label"></el-checkbox>
+								</label>
+								<span class="icon_display">
+									<el-tooltip
+										placement="top"
+										content="不固定"
+										effect="light"
+									>
+										<i
+											class="iconfont iconfont-action icon-close"
+											@click="selectFixed('rightColumns', index, item)"
+										></i>
+									</el-tooltip>
+									<el-tooltip
+										placement="top"
+										content="固定在左侧"
+										effect="light"
+									>
+										<i
+											class="iconfont iconfont-action icon-up1"
+											@click="selectFixed('rightColumns', index, item,'left')"
+										></i>
+									</el-tooltip>
+								</span>
+							</div>
+						</el-checkbox-group>
+					</div>
+					<div v-show="noColumns.length">
+						<p class="title">不固定</p>
+						<el-checkbox-group
+							v-model="columnsCheckList"
+							@change="handleCheckedColumnChange"
+							class="item"
+						>
+							<div
+								class="hover_label"
+								v-for="(item,index) in noColumns"
+								:key="item.prop+'#'+item.istrue + index"
+							>
+								<label class="el-checkbox is-checked">
+									<el-checkbox :label="item.label"></el-checkbox>
+								</label>
+								<span class="icon_display">
+									<el-tooltip
+										placement="top"
+										content="固定在左侧"
+										effect="light"
+									>
+										<i
+											class="iconfont iconfont-action icon-up1"
+											@click="selectFixed('noColumns', index, item,'left')"
+										></i>
+									</el-tooltip>
+									<el-tooltip
+										placement="top"
+										content="固定在右侧"
+										effect="light"
+									>
+										<i
+											class="iconfont iconfont-action icon-down1"
+											@click="selectFixed('noColumns', index, item,'right')"
+										></i>
+									</el-tooltip>
+								</span>
+							</div>
+						</el-checkbox-group>
+					</div>
+
+				</div>
+			</div>
+		</el-dropdown-menu>
+	</div>
+</template>
+
+<script>
+	import { deepClone } from 'sone-ui-component/src/utils/util'
+	import Sortable from 'sortablejs'
+	export default {
+		name: "columnTransfer",
+		props: {
+			columns: {
+				type: Array,
+			},
+		},
+		data() {
+			return {
+				dragTarClass: 'drag' + Math.random().toString(36).slice(10),
+				columnsCheckList: this.columns.map(item => { if (item.istrue) { return item.label } }).filter(v => v),
+
+				leftColumns: [],
+				rightColumns: [],
+				noColumns: [], //不定位的数组
+				copyColumns: [],
+
+				columnsCheckAll: false,
+				isIndeterminate: false,
+				dialogVisible: false,
+			}
+		},
+		watch: {
+			columns: {
+				deep: true,
+				handler(){
+					this.columnsCheckList = this.columns.map(item => { if (item.istrue) { return item.label } }).filter(v => v);
+					this.copyColumns = deepClone(this.columns);
+					this.handleCheckedColumns()
+					this.int(this.copyColumns)
+				}
+			}
+		},
+		created() {
+			this.copyColumns = deepClone(this.columns);
+			this.handleCheckedColumns()
+			this.int(this.copyColumns)
+		},
+		mounted() {
+			this.rowDrop()
+			this.rowDrop1()
+			this.rowDrop2()
+		},
+		methods: {
+			int(columns) {
+				let data = deepClone(columns)
+				this.leftColumns = data.filter(item => ["left", true].includes(item.fixed))
+				this.rightColumns = data.filter(item => item.fixed == 'right')
+				this.noColumns = data.filter(item => !item.fixed)
+			},
+			rowDrop() {
+				const item = document.querySelector(`.${this.dragTarClass} .item`)
+				const _this = this
+				Sortable.create(item, {
+					ghostClass: 'table-drag-ghost',
+					onEnd({ newIndex, oldIndex }) {
+						const currRow = _this.noColumns.splice(oldIndex, 1)[0]
+						_this.noColumns.splice(newIndex, 0, currRow)
+						// _this.handleColumnsDrag()
+					}
+				})
+			},
+			rowDrop1() {
+				const item = document.querySelector(`.${this.dragTarClass} .item1`)
+				const _this = this
+				Sortable.create(item, {
+					ghostClass: 'table-drag-ghost',
+					onEnd({ newIndex, oldIndex }) {
+						const currRow = _this.leftColumns.splice(oldIndex, 1)[0]
+						_this.leftColumns.splice(newIndex, 0, currRow)
+						// _this.handleColumnsDrag()
+					}
+				})
+			},
+			rowDrop2() {
+				const item = document.querySelector(`.${this.dragTarClass} .item2`)
+				const _this = this
+				Sortable.create(item, {
+					ghostClass: 'table-drag-ghost',
+					onEnd({ newIndex, oldIndex }) {
+						const currRow = _this.rightColumns.splice(oldIndex, 1)[0]
+						_this.rightColumns.splice(newIndex, 0, currRow)
+						// _this.handleColumnsDrag()
+					}
+				})
+			},
+
+			//type为false的时候为不固定，left为固定左侧，right为右侧
+			selectFixed(parentName, index, column, type = 'none') {
+				// let aTemp = [...this.leftColumns, ...this.noColumns, ...this.rightColumns];
+				// let aTemp = deepClone(this.columns);
+				// aTemp.some(item => {
+				// 	if (item.label === column.label) {
+				// 		if (this.columnsCheckList.includes(item.label)) {
+				// 			this.$set(item, 'istrue', true)
+				// 		} else {
+				// 			this.$set(item, 'istrue', false)
+				// 		}
+				// 		this.$set(item, 'fixed', type)
+				// 		return true
+				// 	}
+				// })
+				// this.$emit('selectFixed', aTemp)
+				this[parentName].splice(index, 1);
+				if(type === 'left'){ //固定左侧
+					this.leftColumns.push({ ...column, fixed: 'left' })
+				}else if(type === 'right'){ //固定右侧
+					this.rightColumns.push({ ...column, fixed: 'right' })
+				}else{ //不固定
+					this.noColumns[column.fixed === 'left' ? 'unshift' : 'push']({ ...column, fixed: false });
+				}
+			},
+
+			handleCheckedColumns() { // 初始化 - 判断是否默认全部选中
+				let checkedCount = this.columnsCheckList.length;
+				this.columnsCheckAll = checkedCount === this.columns.length;
+				this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length;
+			},
+			//事件-是否勾选-列展示
+			handleColumnsCheckListChange(value) {
+				this.columnsCheckList = value ? this.columns.map(item => item.label) : [];
+				this.isIndeterminate = false;
+				// let returnColumns = this.columns.map(column => {
+				// 	this.$set(column, 'istrue', value);
+				// 	return column
+				// })
+				// this.$emit('handleCheckedColumnChange', this.columnsCheckList, null)
+			},
+			handleCheckedColumnChange(value) {
+				let filteredValues = value.filter(v => v);
+				let checkedCount = filteredValues.length;
+				this.columnsCheckAll = checkedCount === this.copyColumns.length;
+				this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.map(item => item.label).length;
+
+				let returnColumns = deepClone(this.columns);
+				returnColumns.forEach(column => {
+					if (filteredValues.includes(column.label)) {
+						this.$set(column, 'istrue', value);
+					}
+				})
+				// this.$emit('handleCheckedColumnChange', filteredValues, null)
+			},
+			save(){
+				let newColumns = [...this.leftColumns, ...this.noColumns, ...this.rightColumns];
+				newColumns.forEach(d => {
+					if(!this.columnsCheckList.includes(d.label)){
+						this.$set(d, 'istrue', false)
+					}else{
+						this.$set(d, 'istrue', true)
+					}
+				})
+				this.$emit('save', newColumns)
+			},
+			//列显隐 重置
+			resetList() {
+				// this.columnsCheckList = this.copyColumns.map(item => { if (item.istrue) { return item.label } }).filter(v => v);
+				// let checkedCount = this.columnsCheckList.length;
+				// this.columnsCheckAll = checkedCount === this.columns.length;
+				// this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length;
+
+				// this.leftColumns = []
+				// this.rightColumns = []
+				// this.noColumns = deepClone(this.copyColumns)
+				// this.$emit('handleCheckedColumnChange', null, this.copyColumns)
+				this.$emit('resetColumnTransfer')
+			},
+			/* 处理列拖动 */
+			handleColumnsDrag(newVal) {
+				let newColumns = [...this.leftColumns, ...this.noColumns, ...this.rightColumns];
+				// this.$emit('dropdownList', newColumns)
+			}
+		}
+	}
+</script>
+