审计列表

src/components/datePicker/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <el-date-picker
+        v-bind='$attrs'
+        type='daterange'
+        unlink-panels
+        range-separator='至'
+        start-placeholder='开始日期'
+        end-placeholder='结束日期'
+        value-format='YYYY-MM-DD'
+        :shortcuts='shortcuts'
+    />
+</template>
+
+<script lang='ts' setup>
+import { ref } from 'vue'
+
+const shortcuts = [
+    {
+        text: '最近一周',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            return [start, end]
+        }
+    },
+    {
+        text: '最近一个月',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            return [start, end]
+        }
+    },
+    {
+        text: '最近3个月',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            return [start, end]
+        }
+    }
+]
+</script>
+
+<style scoped>
+.demo-date-picker {
+    display: flex;
+    width: 100%;
+    padding: 0;
+    flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px var(--el-border-color);
+    flex: 1;
+}
+
+.demo-date-picker .block:last-child {
+    border-right: none;
+}
+
+.demo-date-picker .demonstration {
+    display: block;
+    color: var(--el-text-color-secondary);
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+</style>

src/components/table/header/index.vue

@@ -4,6 +4,9 @@
         <div class='table-com-search' v-if='showSelect'>
             <el-form @submit.prevent='' @keyup.enter='onComSearch' label-position='left' :inline='true'>
                 <slot name='select'></slot>
+                <el-form-item label='日期' v-if='datePicker'>
+                    <DatePicker v-model='date' @change='dateChange'></DatePicker>
+                </el-form-item>
                 <el-form-item>
                     <el-button @click='onComSearch' type='primary'>查询</el-button>
                     <el-button @click='onResetForm'>重置</el-button>
@@ -28,17 +31,25 @@
 <script setup lang='ts'>
 import { inject, ref } from 'vue'
 import type TableStore from '@/utils/tableStore'
+import DatePicker from '@/components/datePicker/index.vue'
 
 const tableStore = inject('tableStore') as TableStore
+const date = ref([window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd'), window.XEUtils.toDateString(new Date(), 'yyyy-MM-dd')])
 
 interface Props {
     // 默认展开
     showSelect?: boolean
+    datePicker?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    showSelect: false
+    showSelect: true,
+    datePicker: false
 })
+if (props.datePicker) {
+    tableStore.table.params.searchBeginTime = date.value[0]
+    tableStore.table.params.searchEndTime = date.value[1]
+}
 const showSelect = ref(props.showSelect)
 const showSelectChange = () => {
     showSelect.value = !showSelect.value
@@ -49,6 +60,10 @@ const onComSearch = () => {
 const onResetForm = () => {
     tableStore.onTableAction('reset', {})
 }
+const dateChange = () => {
+    tableStore.table.params.searchBeginTime = date.value[0]
+    tableStore.table.params.searchEndTime = date.value[1]
+}
 </script>
 
 <style scoped lang='scss'>

src/components/table/index.vue

@@ -7,7 +7,7 @@
         :border="true"
         v-loading="tableStore.table.loading"
         stripe
-        @selection-change="onSelectionChange"
+        @checkbox-change="onSelectionChange"
         v-bind="$attrs"
         :column-config="{resizable: true}"
         :tree-config="{}"