sone-ui-component-3.2.4 2.1.16 → 2.1.17

package/package.json

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

package/packages/normalTable/index.js

@@ -0,0 +1,15 @@
+/*
+ * @Description: 
+ * @Author: songlin
+ * @Date: 2021-08-26 16:39:21
+ * @LastEditTime: 2021-08-27 16:11:37
+ * @LastEditors: songlin
+ */
+import Table from './src/main';
+
+Table.install = function(Vue) {
+  Vue.component(Table.name, Table);
+};
+
+
+export default Table;

package/packages/normalTable/src/columnTransfer.vue

@@ -0,0 +1,314 @@
+<!--
+ * @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>
+					<el-tooltip
+						effect="light"
+						content="重置"
+						placement="top"
+					>
+						<el-button
+							class="rigth_button"
+							@click="resetList"
+							type="text"
+						>重置</el-button>
+					</el-tooltip>
+				</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(item,false)"
+										></i>
+									</el-tooltip>
+									<el-tooltip
+										placement="top"
+										content="固定在右侧"
+										effect="light"
+									>
+										<i
+											class="iconfont iconfont-action icon-down1"
+											@click="selectFixed(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(item, false)"
+										></i>
+									</el-tooltip>
+									<el-tooltip
+										placement="top"
+										content="固定在左侧"
+										effect="light"
+									>
+										<i
+											class="iconfont iconfont-action icon-up1"
+											@click="selectFixed(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(item,'left')"
+										></i>
+									</el-tooltip>
+									<el-tooltip
+										placement="top"
+										content="固定在右侧"
+										effect="light"
+									>
+										<i
+											class="iconfont iconfont-action icon-down1"
+											@click="selectFixed(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(column, type) {
+				// 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)
+			},
+
+			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)
+			},
+			//列显隐 重置
+			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>
+