theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加筛选

Browse Source
This commit is contained in:
Theluyuan
2023-04-21 14:04:31 +08:00
parent e734ad64f0
commit 0cb74e4f10
15 changed files with 2466 additions and 936 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/src/component/table/TableRow.vue
View File

@@ -116,6 +116,8 @@ props.columns.map((value: any) => {
});
const rowClick = function (data: any, evt: MouseEvent) {
let click = new Event("click")
window.dispatchEvent(click)
emit("row", data, evt);
};

2
package/component/src/component/table/index.less
View File

@@ -3,7 +3,7 @@
@import "../dropdown/index.less";
@import "../page/index.less";
@import "../empty/index.less";
@import "../../css/soultable.less";
.layui-table-col-special {
width: 34px;
}

381
package/component/src/component/table/index.vue
View File

@@ -24,6 +24,7 @@ import LayEmpty from "../empty/index.vue";
import TableRow from "./TableRow.vue";
import TablePage from "./TablePage.vue";
import { nextTick } from "vue";
import soultable from "./soultable.vue";
export interface TableProps {
id?: string;
@@ -70,11 +71,11 @@ const props = withDefaults(defineProps<TableProps>(), {
rowStyle: "",
cellStyle: "",
defaultExpandAll: false,
spanMethod: () => {},
spanMethod: () => { },
expandKeys: () => [],
loading: false,
getCheckboxProps: () => {},
getRadioProps: () => {},
getCheckboxProps: () => { },
getRadioProps: () => { },
});
const emit = defineEmits([
@@ -85,12 +86,15 @@ const emit = defineEmits([
"row-contextmenu",
"row-double",
"row",
"update:page"
]);
const slot = useSlots();
const slots = slot.default && slot.default();
const tableRef = ref();
const datalist = ref([...props.dataSource])
console.log(datalist.value,97)
const s = "";
const allChecked = ref(false);
const hasChecked = ref(false);
@@ -264,6 +268,15 @@ watch(
() => props.dataSource,
() => {
tableDataSource.value = [...props.dataSource];
// if(!props.page){
// datalist.value = [...props.dataSource]
// }else{
// change({
// limit: props.page.limit,
// current: pagecurrent || props.page.current
// })
// }
// 为什么修改数据就要把选中清空？ 我要清空不会自己清吗？
// tableSelectedKeys.value = [];
// tableSelectedKey.value = s;
@@ -310,9 +323,32 @@ watch(
},
{ deep: true, immediate: true }
);
watch(tableDataSource,()=>{
if(!props.page){
datalist.value = tableDataSource.value
}else{
// props.page.count = tableDataSource.value.length
let tmp ={...props.page}
tmp.total = tableDataSource.value.length
emit("update:page",tmp)
// tableDataSource.value = endlist
change({
limit: props.page.limit,
current: pagecurrent || props.page.current
})
}
})
watch(()=>props.page,()=>{
console.log(props.page,342)
})
let pagecurrent:number;
const change = function (page: any) {
emit("change", page);
// emit("change", page);
pagecurrent = page.current
datalist.value = tableDataSource.value.slice(
page.limit * (page.current - 1),
page.limit * page.current
);
};
const rowClick = function (data: any, evt: MouseEvent) {
@@ -392,10 +428,10 @@ function base64(s: string) {
}
// 列排序
const sortTable = (e: any, key: string, sort: string) => {
const sortTable = (e: any, key: string, sort: string, issoul = false) => {
let currentSort = e.target.parentNode.getAttribute("lay-sort");
if (sort === "desc") {
if (currentSort === sort) {
if (currentSort === sort && !issoul) {
e.target.parentNode.setAttribute("lay-sort", "");
tableDataSource.value = [...props.dataSource];
} else {
@@ -407,7 +443,7 @@ const sortTable = (e: any, key: string, sort: string) => {
});
}
} else {
if (currentSort === sort) {
if (currentSort === sort && !issoul) {
e.target.parentNode.setAttribute("lay-sort", "");
tableDataSource.value = [...props.dataSource];
} else {
@@ -697,6 +733,72 @@ const toolbarStyle = (toolbarName: string) => {
onBeforeUnmount(() => {
window.onresize = null;
});
// 模仿soultable
const soulstatus = ref(false);
const soultop = ref(0);
const soulleft = ref(0);
const selcolumn = ref<any>({})
const soulkey = ref("")
const sxlist:any = ref({})
function showsoul(event: MouseEvent, column: any, key: string) {
console.log(event);
soulleft.value = event.pageX;
soultop.value = event.pageY;
soulstatus.value = true;
selcolumn.value = column;
soulkey.value = key
}
const heddin = () => {
soulkey.value = ""
}
function asc(event: any) {
selcolumn.value.soulclass = "soul-icon-filter-asc"
sortTable(event, selcolumn.value.key, "asc", true)
}
function desc(event: any) {
selcolumn.value.soulclass = "soul-icon-filter-desc"
sortTable(event, selcolumn.value.key, "desc", true)
}
function sx(e:any){
sxlist.value[e.key] = e.list
}
watch(sxlist,()=>{
// tableDataSource
let list:any = [...props.dataSource]
let endlist:any = []
for(let i in sxlist.value){
for(let j in list){
if(list[j] != "" && sxlist.value[i].length != 0){
if(!sxlist.value[i].includes(list[j][i])){
list[j] = ""
}
}
}
}
for(let i of list){
if(i != ""){
endlist.push(i)
}
}
if(!props.page){
datalist.value = endlist
}else{
tableDataSource.value = endlist
change({
limit: props.page.limit,
current: pagecurrent || props.page.current
})
}
console.log("筛选",endlist)
},{
deep: true
})
window.addEventListener("click", heddin)
// 将分页移入到组件内
</script>
<template>
@@ -709,50 +811,27 @@ onBeforeUnmount(() => {
</div>
<div v-if="defaultToolbar" class="layui-table-tool-self">
<!-- 筛选 -->
<lay-dropdown
v-if="showToolbar('filter')"
updateAtScroll
:style="toolbarStyle('filter')"
>
<lay-dropdown v-if="showToolbar('filter')" updateAtScroll :style="toolbarStyle('filter')">
<div class="layui-inline" title="筛选" lay-event>
<i class="layui-icon layui-icon-slider"></i>
</div>
<template #content>
<div class="layui-table-tool-checkbox">
<lay-checkbox
v-for="column in tableHeadColumns[0]"
v-model="tableColumnKeys"
skin="primary"
:disabled="column.children"
:key="column.key"
:value="column.key"
>{{ column.title }}</lay-checkbox
>
<lay-checkbox v-for="column in tableHeadColumns[0]" v-model="tableColumnKeys" skin="primary"
:disabled="column.children" :key="column.key" :value="column.key">{{ column.title }}</lay-checkbox>
</div>
</template>
</lay-dropdown>
<!-- 导出 -->
<div
v-if="showToolbar('export')"
class="layui-inline"
title="导出"
lay-event
:style="toolbarStyle('export')"
@click="exportData()"
>
<div v-if="showToolbar('export')" class="layui-inline" title="导出" lay-event :style="toolbarStyle('export')"
@click="exportData()">
<i class="layui-icon layui-icon-export"></i>
</div>
<!-- 打印 -->
<div
v-if="showToolbar('print')"
:style="toolbarStyle('print')"
class="layui-inline"
title="打印"
lay-event
@click="print()"
>
<div v-if="showToolbar('print')" :style="toolbarStyle('print')" class="layui-inline" title="打印" lay-event
@click="print()">
<i class="layui-icon layui-icon-print"></i>
</div>
</div>
@@ -764,47 +843,26 @@ onBeforeUnmount(() => {
<div class="layui-table-box">
<!-- 表头 -->
<div
class="layui-table-header"
:style="[{ 'padding-right': `${scrollWidthCell}px` }]"
>
<div class="layui-table-header" :style="[{ 'padding-right': `${scrollWidthCell}px` }]">
<div class="layui-table-header-wrapper" ref="tableHeader">
<table
class="layui-table"
:lay-size="size"
:lay-skin="skin"
ref="tableHeaderTable"
>
<table class="layui-table" :lay-size="size" :lay-skin="skin" ref="tableHeaderTable">
<colgroup>
<template v-for="column in tableBodyColumns" :key="column">
<template v-if="tableColumnKeys.includes(column.key)">
<col
:width="column.width"
:style="{
minWidth: column.minWidth ? column.minWidth : '50px',
}"
/>
<col :width="column.width" :style="{
minWidth: column.minWidth ? column.minWidth : '50px',
}" />
</template>
</template>
</colgroup>
<thead>
<template
v-for="(
tableHeadColumn, tableHeadColumnIndex
) in tableHeadColumns"
:key="tableHeadColumnIndex"
>
<template v-for="(
tableHeadColumn, tableHeadColumnIndex
) in tableHeadColumns" :key="tableHeadColumnIndex">
<tr>
<template
v-for="(column, columnIndex) in tableHeadColumn"
:key="column"
>
<th
v-if="tableColumnKeys.includes(column.key)"
:colspan="column.colspan"
:rowspan="column.rowspan"
class="layui-table-cell"
:class="[
<template v-for="(column, columnIndex) in tableHeadColumn" :key="column">
<th v-if="tableColumnKeys.includes(column.key)" :colspan="column.colspan" :rowspan="column.rowspan"
class="layui-table-cell" :class="[
renderFixedClassName(column, columnIndex),
column.fixed
? `layui-table-fixed-${column.fixed}`
@@ -818,8 +876,7 @@ onBeforeUnmount(() => {
column.type == 'number'
? 'layui-table-cell-number'
: '',
]"
:style="[
]" :style="[
{
textAlign: column.align,
},
@@ -828,16 +885,10 @@ onBeforeUnmount(() => {
columnIndex,
tableHeadColumn
),
]"
>
]">
<template v-if="column.type == 'checkbox'">
<lay-checkbox
v-model="hasChecked"
:is-indeterminate="!allChecked"
skin="primary"
value="all"
@change="changeAll"
/>
<lay-checkbox v-model="hasChecked" :is-indeterminate="!allChecked" skin="primary" value="all"
@change="changeAll" />
</template>
<template v-else>
<span>
@@ -849,23 +900,20 @@ onBeforeUnmount(() => {
</template>
</span>
<!-- 插槽 -->
<span
v-if="column.sort"
class="layui-table-sort layui-inline"
lay-sort
>
<i
@click.stop="sortTable($event, column.key, 'asc')"
class="layui-edge layui-table-sort-asc"
title="升序"
></i>
<i
@click.stop="
sortTable($event, column.key, 'desc')
"
class="layui-edge layui-table-sort-desc"
title="降序"
></i>
<span v-if="column.sort" class="layui-table-sort layui-inline" lay-sort>
<i @click.stop="sortTable($event, column.key, 'asc')" class="layui-edge layui-table-sort-asc"
title="升序"></i>
<i @click.stop="
sortTable($event, column.key, 'desc')
" class="layui-edge layui-table-sort-desc" title="降序"></i>
</span>
<span v-if="column.soul" class="layui-table-sort layui-inline soul-icon">
<i class="soul-icon soul-box" :class="column.soulclass || 'soul-icon-filter'"
@click.stop="showsoul($event, column, column.key)">
<!-- <div v-show="column.soulshow" @click.stop="" class="soulbox">
11111
</div> -->
</i>
</span>
</template>
</th>
@@ -877,64 +925,29 @@ onBeforeUnmount(() => {
</div>
</div>
<!-- 表身 -->
<div
class="layui-table-body layui-table-main"
:style="{ height: height, maxHeight: maxHeight }"
ref="tableBody"
>
<table
class="layui-table"
v-if="tableDataSource.length > 0 && loading == false"
:class="{ 'layui-table-even': props.even }"
:lay-size="size"
:lay-skin="skin"
>
<div class="layui-table-body layui-table-main" :style="{ height: height, maxHeight: maxHeight }" ref="tableBody">
<table class="layui-table" v-if="datalist.length > 0 && loading == false"
:class="{ 'layui-table-even': props.even }" :lay-size="size" :lay-skin="skin">
<colgroup>
<template
v-for="(column, columnIndex) in tableBodyColumns"
:key="columnIndex"
>
<template v-for="(column, columnIndex) in tableBodyColumns" :key="columnIndex">
<template v-if="tableColumnKeys.includes(column.key)">
<col
:width="column.width"
:style="{
minWidth: column.minWidth ? column.minWidth : '50px',
}"
/>
<col :width="column.width" :style="{
minWidth: column.minWidth ? column.minWidth : '50px',
}" />
</template>
</template>
</colgroup>
<tbody>
<!-- 渲染 -->
<template
v-for="(children, index) in tableDataSource"
:key="index"
>
<table-row
:id="id"
:index="index"
:data="children"
:columns="tableBodyColumns"
:indent-size="indentSize"
:currentIndentSize="currentIndentSize"
:tableColumnKeys="tableColumnKeys"
:expandSpace="childrenExpandSpace"
:expandIndex="expandIndex"
:cellStyle="cellStyle"
:cellClassName="cellClassName"
:rowStyle="rowStyle"
:rowClassName="rowClassName"
:spanMethod="spanMethod"
:defaultExpandAll="defaultExpandAll"
:getCheckboxProps="getCheckboxProps"
:getRadioProps="getRadioProps"
v-model:expandKeys="tableExpandKeys"
v-model:selectedKeys="tableSelectedKeys"
v-model:selectedKey="tableSelectedKey"
@row="rowClick"
@row-double="rowDoubleClick"
@row-contextmenu="rowContextmenu"
>
<template v-for="(children, index) in datalist" :key="index">
<table-row :id="id" :index="index" :data="children" :columns="tableBodyColumns" :indent-size="indentSize"
:currentIndentSize="currentIndentSize" :tableColumnKeys="tableColumnKeys"
:expandSpace="childrenExpandSpace" :expandIndex="expandIndex" :cellStyle="cellStyle"
:cellClassName="cellClassName" :rowStyle="rowStyle" :rowClassName="rowClassName"
:spanMethod="spanMethod" :defaultExpandAll="defaultExpandAll" :getCheckboxProps="getCheckboxProps"
:getRadioProps="getRadioProps" v-model:expandKeys="tableExpandKeys"
v-model:selectedKeys="tableSelectedKeys" v-model:selectedKey="tableSelectedKey" @row="rowClick"
@row-double="rowDoubleClick" @row-contextmenu="rowContextmenu">
<template v-for="name in slotsData" #[name]="{ data }">
<slot :name="name" :data="data"></slot>
</template>
@@ -944,42 +957,33 @@ onBeforeUnmount(() => {
</table-row>
</template>
<tr v-if="hasTotalRow" class="layui-table-total">
<template
v-for="(column, columnIndex) in columns"
:key="columnIndex"
>
<template v-for="(column, columnIndex) in columns" :key="columnIndex">
<template v-if="tableColumnKeys.includes(column.key)">
<td
:style="[
{
textAlign: column.align,
whiteSpace: column.ellipsisTooltip
? 'nowrap'
: 'normal',
},
renderFixedStyle(column, columnIndex),
]"
:class="[
'layui-table-cell',
renderFixedClassName(column, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
v-html="renderTotalRowCell(column)"
></td>
<td :style="[
{
textAlign: column.align,
whiteSpace: column.ellipsisTooltip
? 'nowrap'
: 'normal',
},
renderFixedStyle(column, columnIndex),
]" :class="[
'layui-table-cell',
renderFixedClassName(column, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]" v-html="renderTotalRowCell(column)"></td>
</template>
</template>
</tr>
</tbody>
</table>
<template v-if="tableDataSource.length == 0 && loading == false">
<template v-if="datalist.length == 0 && loading == false">
<lay-empty></lay-empty>
<div :style="{ width: tableBodyEmptyWidth }"></div>
</template>
<template v-if="loading == true">
<div class="layui-table-loading">
<i
class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"
></i>
<i class="layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
</div>
</template>
</div>
@@ -988,23 +992,22 @@ onBeforeUnmount(() => {
</div>
</div>
<div v-if="page && page.total > 0" class="layui-table-page">
<table-page
:total="page.total"
:pages="page.pages"
:theme="page.theme"
:limits="page.limits"
:showSkip="page.showSkip"
:show-page="page.showPage"
:showRefresh="page.showRefresh"
:showLimit="page.showLimit"
:showCount="page.showCount"
:count="page.count"
v-model:current="page.current"
v-model:limit="page.limit"
@change="change"
>
<table-page :total="page.total" :pages="page.pages" :theme="page.theme" :limits="page.limits"
:showSkip="page.showSkip" :show-page="page.showPage" :showRefresh="page.showRefresh" :showLimit="page.showLimit"
:showCount="page.showCount" :count="page.count" v-model:current="page.current" v-model:limit="page.limit"
@change="change">
</table-page>
</div>
</div>
<div v-for="(
tableHeadColumn, tableHeadColumnIndex
) in tableHeadColumns" :key="tableHeadColumnIndex">
<div v-for="(column, columnIndex) in tableHeadColumn" :key="column">
<soultable :top="soultop" :left="soulleft" v-show="soulkey == column.key" @asc="asc" @desc="desc" :list="props.dataSource"
:soulkey="column.key" @sx="sx"></soultable>
</div>
</div>
</div>
</template>

14
package/component/src/component/table/soultable.less Normal file
View File

@@ -0,0 +1,14 @@
.soulbox{
position: absolute;
background-color: #333333;
color: #fff;
display: inline-block;
position: absolute;
z-index: 2147483647;
min-width: 160px;
max-width: 300px;
overflow-y: auto;
border: 1px solid #e6e6e6;
border-radius: 5px;
box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
}

120
package/component/src/component/table/soultable.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<div class="soulbox" :style="`top: ${props.top}px;left:${props.left}px`" @click.stop="">
<ul>
<li @click="asc" class="soul-sort" data-value="asc" style=""><i class="soul-icon soul-icon-asc"></i> 升序排列 </li>
<li @click="desc" class="soul-sort" data-value="desc" style="border-bottom: 1px solid rgb(230, 230, 230);"><i
class="soul-icon soul-icon-desc"></i> 降序排列 </li>
<!-- <li class="soul-column" style=""><i class="layui-icon layui-icon-table"></i> 表格列 <i
class="layui-icon layui-icon-right" style="float: right"></i></li> -->
<li class="soul-dropList" style="" @mouseover="selshow = true"><i class="soul-icon soul-icon-drop-list"></i> 筛选数据 <i
class="layui-icon layui-icon-right" style="float: right"></i></li>
<!-- <li class="soul-condition" style=""><i class="soul-icon soul-icon-query"></i> 筛选条件 <i
class="layui-icon layui-icon-right" style="float: right"></i></li>
<li class="soul-edit-condition" style=""><i class="layui-icon layui-icon-edit"></i> 编辑筛选条件 </li>
<li class="soul-export" style=""><i class="soul-icon soul-icon-download"></i> 导出excel </li> -->
</ul>
<div class="soulbox" style="left: 100%;top:65px" v-show="selshow">
<lay-input prefix-icon="layui-icon-search" v-model="seltext" size="sm" placeholder="关键字搜索">
</lay-input>
<div class="check" style="min-width: 180px;">
<div class="multiOption" data-type="all" @click="select(1)"><i class="soul-icon"></i> 全选</div>
<div class="multiOption" data-type="none" @click="select(2)"><i class="soul-icon"></i> 清空</div>
<div class="multiOption" data-type="reverse" @click="select(3)"><i class="soul-icon"></i>反选</div>
</div>
<ul>
<LayCheckboxGroup v-model="sel">
<li v-for="i, j in list">
<LayCheckbox skin="primary" :value="i"></LayCheckbox>{{ i }}
</li>
</LayCheckboxGroup>
</ul>
</div>
</div>
</template>
<script lang="ts" setup>
import "./soultable.less"
import { ref, watch, withDefaults } from "vue";
import layInput from "../input/index.vue"
import LayCheckbox from "../checkbox/index.vue";
import LayCheckboxGroup from "../checkboxGroup/index.vue";
export interface SoulTableProps {
left: number,
top: number,
list: any,
soulkey: string,
}
const props = withDefaults(defineProps<SoulTableProps>(), {
top: 10,
left: 10,
list: [],
soulkey: ""
})
const emit = defineEmits(["asc", "desc","sx"])
function asc(event: any) {
emit("asc", event)
}
function desc(event: any) {
emit("desc", event)
}
const sel:any = ref([])
const list: any = ref([])
const alllist:any = ref([])
watch(() => [props.list,props.soulkey], () => {
let set = new Set()
for (let i of props.list) {
set.add(i[props.soulkey])
console.log(i, i[props.soulkey])
}
alllist.value = Array.from(set)
list.value = alllist.value
console.log(list.value)
},
{ deep: true })
// watch(alllist,()=>{
// list.value = []
// for(let i of list){
// }
// })
const seltext = ref("")
watch(seltext,()=>{
let l = []
if(seltext.value){
for(let i of alllist.value){
if(i.indexOf(seltext.value) != -1){
l.push(i)
}
}
}else{
l = alllist.value
}
list.value = l
})
watch(sel,()=>{
emit("sx",{key:props.soulkey,list:sel.value})
})
function select(type: number){
if(type == 1){
sel.value = []
let t = []
for(let i of list.value){
t.push(i)
}
sel.value = t
}else if(type == 3){
let t = []
for(let i of list.value){
if(!sel.value.includes(i)){
t.push(i)
}
}
sel.value = t
}else if(type == 2){
sel.value = []
}
}
const selshow = ref(false)
</script>

795
package/component/src/css/soultable.less Normal file
View File

@@ -0,0 +1,795 @@
/** 自定义字体 **/
/** 这里使用在线字体，如果需要离线包，请看 font/README.md **/
@font-face {
font-family: 'soul-icon'; /* project id 677836 */
src: url('//at.alicdn.com/t/font_677836_jwq362m0tt.eot');
src: url('//at.alicdn.com/t/font_677836_jwq362m0tt.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_677836_jwq362m0tt.woff2') format('woff2'),
url('//at.alicdn.com/t/font_677836_jwq362m0tt.woff') format('woff'),
url('//at.alicdn.com/t/font_677836_jwq362m0tt.ttf') format('truetype'),
url('//at.alicdn.com/t/font_677836_jwq362m0tt.svg#iconfont') format('svg');
}
.soul-icon {
font-family:"soul-icon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.soul-icon-filter:before { content: "\e60b"; }
.soul-icon-filter-asc:before { content: "\e768"; }
.soul-icon-filter-desc:before { content: "\e767"; }
.soul-icon-asc:before { content: "\e6af"; }
.soul-icon-desc:before { content: "\e6ae"; }
.soul-icon-all-check:before { content: "\e670"; }
.soul-icon-invert-check:before { content: "\e614"; }
.soul-icon-fold:before { content: "\e760"; }
.soul-icon-unfold:before { content: "\e611"; }
.soul-icon-delete:before { content: "\e600"; }
.soul-icon-download:before { content: "\e601"; }
.soul-icon-drop-list:before { content: "\e6a3"; }
.soul-icon-query:before { content: "\e66d"; }
/* 全选*/
.soul-icon-quanxuan:before { content: "\e623"; }
.soul-icon-qingkong:before { content: "\e63e"; }
.soul-icon-autoColumnWidth
:before { content: "\e614"; }
/*最大化*/
.soul-icon-min:before { content: "\e656"; }
.soul-icon-max:before { content: "\e61b"; }
/* 配色方案*/
.layui-red {
color: #FF5722
}
.layui-orange {
color: #FFB800
}
.layui-green {
color: #009688
}
.layui-cyan {
color: #2F4056
}
.layui-blue {
color: #1E9FFF
}
.layui-black {
color: #393D49
}
.layui-gray {
color: #eee
}
.layui-firebrick {
color: firebrick;
}
.layui-deeppink {
color: deeppink;
}
.layui-blueviolet {
color: blueviolet;
}
.soul-condition [class*="layui-col-"] {
margin-top: 10px;
}
/* 表格排序样式*/
.soul-edge {
display: inline-block;
width: 0;
height: 0;
border-width: 6px;
border-style: dashed;
border-color: transparent;
overflow: hidden
}
.soul-table-sort {
width: 10px;
height: 20px;
margin-left: 5px;
cursor: pointer !important;
position: relative;
display: inline-block;
}
.soul-table-sort .soul-edge {
position: absolute;
left: 5px;
border-width: 5px
}
.soul-table-sort .soul-table-sort-asc {
top: 10px;
border-top: none;
border-bottom-style: solid;
border-bottom-color: #b2b2b2
}
.soul-table-sort .soul-table-sort-asc:hover {
border-bottom-color: #666
}
.soul-table-sort .soul-table-sort-desc {
bottom: -2px;
border-bottom: none;
border-top-style: solid;
border-top-color: #b2b2b2
}
.soul-table-sort .soul-table-sort-desc:hover {
border-top-color: #666
}
.soul-table-sort[soul-sort=asc] .soul-table-sort-asc {
border-bottom-color: #000
}
.soul-table-sort[soul-sort=desc] .soul-table-sort-desc {
border-top-color: #000
}
.multiOption {
display: inline-block;
padding: 0 5px;
cursor: pointer;
color: #999;
}
/*表格筛选*/
.soul-table-filter {
line-height: 20px;
color: #b2b2b2;
cursor: pointer;
margin-left: 5px;
}
.soul-table-filter .soul-icon-filter-asc,.soul-table-filter .soul-icon-filter-desc {
display: none;
}
.soul-table-filter[lay-sort="asc"] .soul-icon-filter-asc{
display: block;
color: #000000;
}
.soul-table-filter[lay-sort="asc"] .soul-icon-filter,.soul-table-filter[lay-sort="asc"] .soul-icon-filter-desc{
display: none;
}
.soul-table-filter[lay-sort="desc"] .soul-icon-filter-desc{
display: block;
color: #000000;
}
.soul-table-filter[lay-sort="desc"] .soul-icon-filter,.soul-table-filter[lay-sort="desc"] .soul-icon-filter-asc{
display: none;
}
.soul-table-filter[soul-filter="true"] i {
color: #009688!important;
}
.soulbox,[id^=main-list], [id^=soul-columns], [id^=soul-dropList], [id^=soul-condition], [id^=soul-bf-prefix], [id^=soul-bf-column], [id^=soul-bf-type], [id^=soul-bf-cond2] {
display: inline-block;
position: absolute;
z-index: 2147483647;
background-color: white;
max-height: 200px;
min-width: 160px;
max-width: 300px;
overflow-y: visible !important;
border: 1px solid #e6e6e6;
border-radius: 5px;
box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
}
.soulbox{
max-height: initial;
min-width: initial;
}
[id^=main-list] {
max-height: initial;
}
[id^=soul-condition] {
overflow-y: visible;
max-height: initial;
min-width: 285px;
padding: 5px;
}
[id^=soul-condition] .layui-laydate-header {
padding: 4px 70px 5px
}
[id^=soul-condition] hr{
margin: 5px 0;
}
[id^=soul-condition].soul-bf{
min-width: 150px;
}
.soulbox ul li {
padding: 3px 10px;
cursor: pointer;
}
.soulbox ul li:hover {
background-color: deepskyblue;
}
.soulbox i.layui-icon {
display: inline-block;
width: 16px;
}
[id^=soul-dropList] ul {
border: 0;
max-height: 116px;
overflow-y: auto;
}
[id^=soul-dropList] ul li, .soulbox [id^=soul-columns]>li{
padding: 2px 10px;
}
[id^=soul-dropList] .check {
padding: 5px 10px;
}
.filter-search {
padding: 5px 10px 0 10px;
}
[id^=soul-condition] .layui-inline {
width: 100px;
}
[id^=soul-condition] table.condition-table tr>td {
padding: 0 3px;
}
[id^=soul-condition] table.condition-table tr>td:first-child {
min-width: 60px;
}
[id^=soul-condition] .layui-form-switch {
background-color: #1E9FFF;
border: 1px solid #1E9FFF;
width: 35px;
margin-top: 0px;
}
[id^=soul-condition] .layui-form-switch.layui-form-onswitch {
background-color: #5FB878;
border: 1px solid #5FB878;
}
[id^=soul-condition] .layui-form-switch em {
color: #fff!important;
}
[id^=soul-condition] .layui-form-switch i {
background-color: #fff;
}
[data-type^=date][class$=Condition] {
width: 273px;
}
/*表格筛选*/
[id^=soul-condition]>div{
width: 270px;
}
.soul-condition-title {
text-align: center;
font-weight: bolder;
}
/*底部筛选*/
.soul-bottom-contion {
height: 31px;
/*line-height: 29px;*/
border-top: solid 1px #e6e6e6;
position: relative;
}
.soul-bottom-contion .condition-items {
display: inline-block;
width: calc(100vw - 100px);
height: 30px;
float: left;
overflow: hidden;
white-space: nowrap;
}
.soul-bottom-contion .condition-item>div {
display: inline-block;
height: 28px;
line-height: 28px;
cursor: pointer;
}
.soul-bottom-contion .condition-items .condition-item>div[class^='item-']:hover{
text-decoration: underline;
}
.soul-bottom-contion .condition-items .condition-item{
padding: 0 10px;
margin: 0 2px;
font-weight: bold;
border: solid 1px darkslateblue;
border-radius: 10px;
display: inline-block;
height: 28px;
position: relative;
}
.soul-bottom-contion .editCondtion {
height: 30px;
float: right;
position: absolute;
right: 0;
}
.soul-bottom-contion .item-value {
min-width: 20px;
display: inline-block;
}
.soul-bottom-contion .editCondtion a {
border: hidden;
border-left: solid 1px #e6e6e6;
height: 28px;
line-height: 29px;
}
.soul-bottom-contion .condition-items .condition-item .condition-item-close {
position: absolute;
cursor: pointer;
margin-top: -8px;
}
.soul-bottom-contion .condition-items>.condition-item>.condition-item-close {
margin-top: -2px;
}
.soul-bottom-contion .condition-items .condition-item .condition-item-close:hover{
color: red
}
.soul-bottom-contion .condition-items .condition-item .condition-item-close:before {
background: white;
border-radius: 10px;
}
.soul-edit-out {
padding: 10px;
}
[id^=soul-bf] li {
padding: 0px 10px;
height: 22px;
line-height: 22px;
color: #000;
cursor: pointer;
}
[id^=soul-bf] li.soul-bf-selected {
background-color: deepskyblue;
}
[id^=soul-bf] li:hover {
background-color: deepskyblue;
}
.soul-edit-out .tempValue {
height: 25px;
}
.soul-bf-condition-value {
display: inline;
width: 100px;
}
/*子表格*/
.layui-table tbody tr.noHover:hover {
background-color: white;
}
/*编辑筛选*/
.soul-edit-out .layui-form-radio {
margin: 0;
}
.soul-edit-out ul li > div {
display: inline-block;
margin-right: 10px;
height: 25px;
vertical-align: top;
cursor: pointer;
}
.soul-edit-out ul.group {
padding-left: 50px;
}
.soul-edit-out ul.group.line {
border-left: 1px dashed grey;
}
.soul-edit-out ul li {
line-height: 25px;
}
.soul-edit-out table {
display: inline-block;
}
.soul-edit-out table td[data-type='top'] {
width: 12px;
height: 12px;
border-left: dashed 1px grey;
border-bottom: dashed 1px grey;
}
.soul-edit-out table td[data-type='bottom'] {
width: 12px;
height: 12px;
border-left: dashed 1px grey;
}
.soul-edit-out li.last>div>table td[data-type='bottom'] {
border-left: none;
}
.soul-edit-out .layui-form-switch {
background-color: #1E9FFF;
border: 1px solid #1E9FFF;
width: 35px;
margin-top: 0px;
}
.soul-edit-out .layui-form-switch em {
color: #fff!important;
}
.soul-edit-out .layui-form-switch i {
background-color: #fff;
}
.soul-edit-out .layui-form-switch.layui-form-onswitch {
background-color: #5FB878;
border: 1px solid #5FB878;
}
.soul-edit-out .delete-item {
display: none;
}
.soul-edit-out li:hover>.delete-item {
display: inline-block;
}
/* 拖拽相关 */
#column-remove {
position: absolute;
z-index: 2147483647;
}
.layui-table-box.no-left-border td.isDrag, .layui-table-box.no-left-border th.isDrag {
border-left: inherit!important;
}
.soul-drag-bar {
position: absolute;
top: 100px;
z-index: 200;
left: 50%;
font-weight: 900;
color: white;
box-shadow: 0 1px 20px rgba(0,0,0,.15);
text-align: center;
transform: translateX(100vw);
/*transition: transform .3s;*/
}
.soul-drag-bar.active {
transform: translateX(-98px);
}
.soul-drag-bar > div {
display: inline-block;
padding: 10px;
cursor: crosshair;
width: 62px;
background-color: rgba(0, 150, 136, 0.5);
}
.soul-drag-bar > div.active, .soul-drag-bar[data-type='left']>div[data-type='left'], .soul-drag-bar[data-type='right']>div[data-type='right'], .soul-drag-bar[data-type='none']>div[data-type='none'] {
background-color: rgb(0, 150, 136);
}
/* 动画 */
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animated.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-20px);
}
}
@-o-keyframes fadeOutLeft {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.animated.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-o-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-o-transform: translateX(20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.animated.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
}
}
@-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(20px);
}
}
@-o-keyframes fadeOutDown {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.animated.fadeOutDown {
-webkit-animation-name: fadeOutDown;
-moz-animation-name: fadeOutDown;
-o-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
#soul-table-contextmenu-wrapper {
width: 0;
}
.soul-table-contextmenu {
position: absolute;
z-index: 2147483647;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #ebeef5;
box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
background: white;
}
.soul-table-contextmenu li {
line-height: 26px;
padding: 0 30px;
cursor: pointer;
word-break: keep-all;
}
.soul-table-contextmenu li:hover {
background: #c5c5c5;
}
.soul-table-contextmenu li i.prefixIcon{
position: absolute;
left: 8px;
}
.soul-table-contextmenu li i.endIcon{
position: absolute;
right: 8px;
}
/*拖拽相关*/
.layui-table-sort-invalid {
width: 10px;
height: 20px;
margin-left: 5px;
cursor: pointer!important;
}
.layui-table-sort-invalid .layui-table-sort-asc {
top: 3px;
border-top: none;
border-bottom-style: solid;
border-bottom-color: #b2b2b2;
}
.layui-table-sort-invalid .layui-edge {
position: absolute;
left: 5px;
border-width: 5px;
}
.layui-table-sort-invalid .layui-table-sort-desc {
bottom: 5px;
border-bottom: none;
border-top-style: solid;
border-top-color: #b2b2b2;
}
.layui-table-sort-invalid .layui-edge {
position: absolute;
left: 5px;
border-width: 5px;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently */
}
/* 固定列滚动 */
.soul-fixed-scroll::-webkit-scrollbar{
display: none
}
.soul-fixed-scroll{
overflow-y: auto!important;
-ms-overflow-style:none;
overflow:-moz-scrollbars-none;
}