添加筛选

2023-04-21 14:04:17 +08:00
parent 0e1d469c76
commit d712290847
15 changed files with 2466 additions and 936 deletions
--- a/src/component/table/soultable.vue
+++ b/src/component/table/soultable.vue
@@ -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>