代码规范

package/component/es/checkboxGroup/index.js

@@ -1,38 +1,5 @@
 import { w as withInstall } from "../badge/index2.js";
-import { defineComponent, ref, provide, watch, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
-const __default__ = {
-  name: "LayCheckboxGroup"
-};
-const _sfc_main = defineComponent({
-  ...__default__,
-  props: {
-    modelValue: { default: () => [] },
-    disabled: { type: Boolean, default: false }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const modelValue = ref(props.modelValue);
-    const disabled = ref(props.disabled);
-    provide("checkboxGroup", {
-      name: "LayCheckboxGroup",
-      modelValue,
-      disabled
-    });
-    watch(() => modelValue, (val) => {
-      emit("change", modelValue.value);
-      emit("update:modelValue", modelValue.value);
-    }, { deep: true });
-    watch(() => props.modelValue, (val) => modelValue.value = val);
-    watch(() => props.disabled, (val) => disabled.value = val);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["layui-checkbox-group", { "layui-checkbox-group-disabled": disabled.value }])
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
-  }
-});
+import { _ as _sfc_main } from "../index2.js";
+import "vue";
 const component = withInstall(_sfc_main);
 export { component as default };

package/component/es/index.js

@@ -179,6 +179,7 @@ import "./_chunks/@vue/index.js";
 import "./_chunks/@vueuse/index.js";
 import "./useLevel/index.js";
 import "./utils/index.js";
+import "./index2.js";
 import "./_chunks/@ctrl/index.js";
 import "./_chunks/async-validator/index.js";
 import "./_chunks/evtd/index.js";

package/component/es/index2.js

@@ -0,0 +1,36 @@
+import { defineComponent, ref, provide, watch, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
+const __default__ = {
+  name: "LayCheckboxGroup"
+};
+const _sfc_main = defineComponent({
+  ...__default__,
+  props: {
+    modelValue: { default: () => [] },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const modelValue = ref(props.modelValue);
+    const disabled = ref(props.disabled);
+    provide("checkboxGroup", {
+      name: "LayCheckboxGroup",
+      modelValue,
+      disabled
+    });
+    watch(() => modelValue, (val) => {
+      emit("change", modelValue.value);
+      emit("update:modelValue", modelValue.value);
+    }, { deep: true });
+    watch(() => props.modelValue, (val) => modelValue.value = val);
+    watch(() => props.disabled, (val) => disabled.value = val);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["layui-checkbox-group", { "layui-checkbox-group-disabled": disabled.value }])
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+export { _sfc_main as _ };

package/component/src/component/table/TableRow.vue

@@ -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);
 };
 

package/component/src/component/table/index.less

@@ -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;
 }

package/component/src/component/table/index.vue

@@ -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;
@@ -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,35 @@ 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 +431,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 +446,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 +736,74 @@ 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>
@@ -867,6 +974,20 @@ onBeforeUnmount(() => {
                               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>
                     </template>
@@ -884,7 +1005,7 @@ onBeforeUnmount(() => {
         >
           <table
             class="layui-table"
-            v-if="tableDataSource.length > 0 && loading == false"
+            v-if="datalist.length > 0 && loading == false"
             :class="{ 'layui-table-even': props.even }"
             :lay-size="size"
             :lay-skin="skin"
@@ -906,10 +1027,7 @@ onBeforeUnmount(() => {
             </colgroup>
             <tbody>
               <!-- 渲染 -->
-              <template
-                v-for="(children, index) in tableDataSource"
-                :key="index"
-              >
+              <template v-for="(children, index) in datalist" :key="index">
                 <table-row
                   :id="id"
                   :index="index"
@@ -971,7 +1089,7 @@ onBeforeUnmount(() => {
               </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>
@@ -1006,5 +1124,22 @@ onBeforeUnmount(() => {
         </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>

package/component/src/component/table/soultable.less

@@ -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);
+}

package/component/src/component/table/soultable.vue

@@ -0,0 +1,146 @@
+<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>

package/component/src/css/soultable.less

@@ -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;
+}