sone-ui-component-3.2.4 2.1.29 → 2.1.30

package/package.json

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

package/packages/normalTable/index.js

@@ -1,11 +1,14 @@
 /*
- * @Description: 
+ * @Description:  
  * @Author: songlin
  * @Date: 2021-08-26 16:39:21
  * @LastEditTime: 2021-08-27 16:11:37
  * @LastEditors: songlin
  */
-import Table from './src/main';
+
+//优化分支发版时packages\normalTable\index.js中请使用mainNew，非优化分支使用main
+// import Table from './src/main';  //原来的表格
+import Table from './src/mainNew';  //带保存的列显隐
 
 Table.install = function(Vue) {
   Vue.component(Table.name, Table);

package/packages/normalTable/src/columnTransferNew.vue

@@ -0,0 +1,251 @@
+<!--
+ * @Description: 
+ * @Author:xjl
+ * @Date:2021-09-14 13:03
+-->
+<template>
+	<el-dropdown-menu slot="dropdown">
+		<div class="dropdown_box">
+			<div class="dropdown_title">
+				<el-checkbox
+					v-model="columnsCheckAll"
+					:indeterminate="isIndeterminate"
+					@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
+						class="item2"
+						v-model="columnsCheckList"
+						@change="handleCheckedColumnChange">
+						<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 class="item" v-model="columnsCheckList"	@change="handleCheckedColumnChange">
+						<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>
+</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)
+					}
+				})
+			},
+			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)
+					}
+				})
+			},
+			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)
+					}
+				})
+			},
+
+			/**
+			 * @description 设置固定
+			 * @param { String } parentName 改动项名
+			 * @param { Number } index 下标
+			 * @param { Object } column 列配置
+			 * @param { String } type left|right|none
+			 */
+			selectFixed(parentName, index, column, type = 'none') {
+				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;
+			},
+			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;
+			},
+			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.$emit('resetColumnTransfer')
+			},
+		}
+	}
+</script>