update

src/hooks/datatable-v2/index.ts

@@ -0,0 +1,113 @@
+import { reactive, ref, shallowRef, computed, UnwrapRef } from 'vue'
+import { FilterValue, FilterOption, DataTableOptions } from './types'
+
+export function useDataTable<T>(options: DataTableOptions = {}) {
+    // 数据源
+    const dataSource = ref<T[]>([])
+    // 总条数
+    const total = shallowRef(0)
+    // 每页条数
+    const pageSize = shallowRef(options.pageSize ?? 20)
+    // 当前页码
+    const pageIndex = shallowRef(options.pageIndex ?? 1)
+    // 总页数
+    const pageCount = computed(() => Math.ceil(total.value / pageSize.value) || 1)
+    // 过滤筛选值
+    const filters = shallowRef<FilterValue<T>[]>([])
+
+    // 数据列表
+    const dataList = computed<UnwrapRef<T[]>>({
+        get() {
+            const result = dataSource.value.filter((row) => {
+                // 过滤所有查询条件
+                return filters.value.every((e) => {
+                    return e.keys.some((key) => {
+                        const value = row[key]
+                        if (typeof value === 'number') {
+                            return e.filteredValue.includes(value as T[keyof T])
+                        }
+                        return e.filteredValue.some((text) => {
+                            return String(value).toLowerCase().indexOf(String(text)) >= 0
+                        })
+                    })
+                })
+            })
+            // 本地分页
+            if (options.localPagination) {
+                total.value = result.length
+                return result.slice((pageIndex.value - 1) * pageSize.value, pageIndex.value * pageSize.value)
+            }
+            return result
+        },
+        set(val) {
+            dataSource.value = val
+        }
+    })
+
+    return {
+        dataList,
+        pageIndex,
+        pageSize,
+        pageCount,
+        total,
+        filters,
+    }
+}
+
+export function useDataFilter<T>() {
+    const queryParams = shallowRef<Partial<T>>({})
+
+    const filterOption: FilterOption<T, keyof T> = reactive({
+        items: [],
+        buttons: [],
+    })
+
+    // 重置所有过滤条件
+    const resetFilters = () => {
+        filterOption.items.forEach((e) => {
+            if (!e.locked) {
+                e.value = undefined
+            }
+        })
+    }
+
+    // 获取过滤参数，支持多条件查询
+    const getFilterParams = (clear = false) => {
+        clear && resetFilters()
+        const options: FilterValue<T>[] = []
+
+        // filterOption.items.forEach((e) => {
+        //     const { keys, value } = e
+        //     if (value) {
+        //         options.push({
+        //             keys,
+        //             filteredValue: [value],
+        //         })
+        //     }
+        // })
+
+        return options
+    }
+
+    // 获取查询参数，支持多条件查询
+    const getQueryParams = (clear = false) => {
+        clear && resetFilters()
+        const params: Partial<T> = Object.create({})
+
+        filterOption.items.forEach((e) => {
+            if (e.value !== undefined) {
+                params[e.key] = e.value
+            }
+        })
+
+        return params
+    }
+
+    return {
+        queryParams,
+        filterOption,
+        getFilterParams,
+        getQueryParams,
+        resetFilters
+    }
+}

src/hooks/datatable-v2/types.ts

@@ -0,0 +1,53 @@
+/** 
+ * 数据过滤项
+ */
+export interface FilterValue<T> {
+    keys: (keyof T)[], // 多条件字段
+    filteredValue: (T[keyof T])[], // 多选过滤或模糊查询
+}
+
+/**
+ * 过滤选项
+ */
+export interface FilterOption<T, K extends keyof T> {
+    items: FilterItem<T, K>[];
+    buttons: FilterButton[];
+}
+
+/** 
+ * 过滤项
+ */
+export interface FilterItem<T, K extends keyof T> {
+    key: K;
+    label?: string;
+    value?: T[K];
+    locked?: boolean; // 重置时是否阻止清空当前值
+    placeholder?: string;
+    multiple?: boolean;
+    required?: boolean;
+    width?: number;
+    options?: () => {
+        label: string;
+        value: T[K];
+    }[];
+    onChange?: (value?: T[K]) => void;
+}
+
+/** 
+ * 过滤按钮
+ */
+export interface FilterButton {
+    label: string;
+    className?: string;
+    validateEvent?: boolean; // 是否触发表单验证
+    onClick: () => void;
+}
+
+/** 
+ * 数据表配置项
+ */
+export interface DataTableOptions {
+    localPagination?: boolean; // 是否进行本地分页
+    pageSize?: number; // 每页条数
+    pageIndex?: number; // 当前页码
+}

src/hooks/datatable/types.ts

@@ -48,7 +48,7 @@ export interface FilterInput<T> {
  * 过滤按钮
  */
 export interface FilterButton {
-    lable: string;
+    label: string;
     className?: string;
     onClick: () => void;
 }

src/packages/pc/components/base/table-filter-v2/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-form ref="formRef" class="el-form--filter" :model="queryParams" :rules="formRules" :show-message="false">
+    <slot name="before"></slot>
+    <template v-for="(item, index) in option.items" :key="index">
+      <slot :name="item.key" :item="item">
+        <el-form-item :label="item.label" :prop="item.key">
+          <el-select :placeholder="item.placeholder ?? '请选择'" v-model="item.value" :validate-event="shouldValidateEvent"
+            :multiple="item.multiple" collapse-tags @change="item.onChange" v-if="item.options">
+            <el-option v-for="option in item.options()" :key="option.value" :value="option.value"
+              :label="option.label" />
+          </el-select>
+          <el-input :placeholder="item.placeholder ?? '请输入'" v-model="item.value"
+            :validate-event="shouldValidateEvent" v-else />
+        </el-form-item>
+      </slot>
+    </template>
+    <slot name="after"></slot>
+    <el-form-item>
+      <el-button :class="item.className" v-for="(item, index) in option.buttons" :key="index" :disabled="loading"
+        @click="handleButtonClick(item)">{{ item.label }}
+      </el-button>
+    </el-form-item>
+    <slot name="default"></slot>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, PropType, computed } from 'vue'
+import { FormInstance, FormRules } from 'element-plus'
+import { FilterOption, FilterButton } from '@/hooks/datatable-v2/types'
+
+const props = defineProps({
+  option: {
+    type: Object as PropType<FilterOption<any, any>>,
+    default: () => ({}),
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  rules: {
+    type: Object as PropType<FormRules>,
+    default: () => ({}),
+  }
+})
+
+const formRef = shallowRef<FormInstance>()
+const shouldValidateEvent = shallowRef<boolean>()
+const queryParams = computed(() => Object.fromEntries(props.option.items.map(e => [e.key, e.value])))
+
+// 表单验证规则
+const formRules = computed<FormRules>(() => {
+  const rules = props.option.items.reduce<FormRules>((pre, cur) => {
+    if (cur.required) {
+      pre[cur.key] = [{ required: true }]
+    }
+    return pre
+  }, {})
+
+  return { ...rules, ...props.rules }
+})
+
+const handleButtonClick = ({ validateEvent, onClick }: FilterButton) => {
+  shouldValidateEvent.value = validateEvent ?? false
+  if (validateEvent) {
+    formRef.value?.validate((valid) => {
+      if (valid) {
+        onClick()
+      }
+    })
+  } else {
+    onClick()
+  }
+}
+</script>

src/packages/pc/components/base/table-filter/index.less

@@ -1,17 +0,0 @@
-.app-table-filter {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-
-    .el-form-item {
-        margin: 0;
-    }
-
-    .el-select {
-        width: 180px;
-    }
-
-    .el-input {
-        width: 180px;
-    }
-}

src/packages/pc/components/base/table-filter/index.vue

@@ -1,28 +1,22 @@
 <template>
-  <el-form class="app-table-filter">
-    <el-form-item v-if="$slots.before">
-      <slot name="before"></slot>
-    </el-form-item>
+  <el-form class="el-form--filter">
+    <slot name="before"></slot>
     <el-form-item v-for="item in options.selectList" :key="item.key" :label="item.label">
-      <el-select :placeholder="item.placeholder ?? '请选择'" v-model="item.selectedValue" :multiple="item.multiple" collapse-tags
-        @change="item.onChange">
+      <el-select :placeholder="item.placeholder ?? '请选择'" v-model="item.selectedValue" :multiple="item.multiple"
+        collapse-tags @change="item.onChange">
         <el-option v-for="option in item.options()" :key="option.value" :value="option.value" :label="option.label" />
       </el-select>
     </el-form-item>
     <el-form-item v-for="(item, i) in options.inputList" :key="i" :label="item.label">
       <el-input :type="item.type" :placeholder="item.placeholder ?? '请输入关键字'" v-model="item.value" />
     </el-form-item>
-    <el-form-item v-if="$slots.after">
-      <slot name="after"></slot>
-    </el-form-item>
+    <slot name="after"></slot>
     <el-form-item>
       <el-button :class="item.className" v-for="(item, i) in options.buttonList" :key="i" :disabled="loading"
-        @click="item.onClick">{{ item.lable }}
+        @click="item.onClick">{{ item.label }}
       </el-button>
     </el-form-item>
-    <el-form-item v-if="$slots.default">
-      <slot name="default"></slot>
-    </el-form-item>
+    <slot name="default"></slot>
   </el-form>
 </template>
 
@@ -40,8 +34,4 @@ defineProps({
     default: false
   },
 })
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>
+</script>

src/packages/pc/views/account/tradeacct/components/bankstatement/index.vue

@@ -83,8 +83,8 @@ filterOptons.selectList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/account/tradeacct/components/sign/index.vue

@@ -93,8 +93,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const showComponent = (code: string, row?: Model.AccountSignRsp) => {

src/packages/pc/views/account/tradeacct/index.vue

@@ -75,8 +75,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/admin/user/index.vue

@@ -105,8 +105,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 // 处理操作按钮

src/packages/pc/views/investor/custom/group/components/user/index.vue

@@ -86,8 +86,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/investor/custom/group/index.vue

@@ -70,8 +70,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/investor/custom/riskcfg/index.vue

@@ -72,8 +72,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/investor/custom/tradecfg/components/edit/index.vue

@@ -104,7 +104,7 @@
 <script lang="ts" setup>
 import { ref, PropType, computed, onMounted } from 'vue'
 import { ElMessage, FormInstance, FormRules } from 'element-plus'
-import { parseTenThousand, handleNoneValue } from '@/filters'
+import { handleNoneValue } from '@/filters'
 import { useEnum } from '@/hooks/enum'
 import { useRequest } from '@/hooks/request'
 import { traderPersonAdd, getInvestorTree, initInvestorPerson } from '@/services/api/investor'

src/packages/pc/views/investor/manage/modification/index.vue

@@ -69,8 +69,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/investor/manage/user/index.vue

@@ -97,8 +97,8 @@ filterOptons.selectList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 // 处理操作按钮

src/packages/pc/views/investor/user/initreview/index.vue

@@ -77,8 +77,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/investor/user/open/index.vue

@@ -75,8 +75,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 // 处理操作按钮

src/packages/pc/views/investor/user/rereview/index.vue

@@ -77,8 +77,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/marketrun/monitor/user/index.vue

@@ -71,8 +71,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/member/institution/open/index.vue

@@ -84,8 +84,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 // 处理操作按钮

src/packages/pc/views/member/subinstitution/user/index.vue

@@ -93,8 +93,8 @@ filterOptons.selectList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 // 处理操作按钮

src/packages/pc/views/profitshare/institution/group/index.vue

@@ -71,8 +71,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/query/order/accountsumm/index.vue

@@ -6,7 +6,8 @@
                 :show-message="false">
                 <el-form-item label="市场" prop="marketid">
                     <el-select v-model="queryParams.marketid">
-                        <template v-for="item in getMarketOptions([15, 40, 41, 48, 51, 71, 97, 99], true)" :key="item.value">
+                        <template v-for="item in getMarketOptions([15, 40, 41, 48, 51, 71, 97, 99], true)"
+                            :key="item.value">
                             <el-option :label="item.label" :value="item.value" />
                         </template>
                     </el-select>
@@ -66,7 +67,7 @@ import AppOperation from '@pc/components/base/operation/index.vue'
 const { getMarketOptions } = useMarket()
 
 const formRef = ref<FormInstance>()
-const dateValue = ref<string[]>([])
+const dateValue = ref<string[] | null>([])
 
 const queryParams = ref<Partial<Model.AccountTransactionsReq>>({
     summode: 1
@@ -103,7 +104,7 @@ const formRules: FormRules = {
     date: [{
         required: true,
         validator: (rule, value, callback) => {
-            if (dateValue.value.length === 2) {
+            if (dateValue.value && dateValue.value.length === 2) {
                 callback()
             } else {
                 callback(new Error('请选择日期'))
@@ -114,7 +115,7 @@ const formRules: FormRules = {
 
 // 选择日期
 const onDateChange = () => {
-    const [startDate, endDate] = dateValue.value
+    const [startDate, endDate] = dateValue.value || []
     queryParams.value.startdate = startDate
     queryParams.value.enddate = endDate
 }

src/packages/pc/views/query/order/order/index.vue

@@ -95,7 +95,7 @@ const buildtypeEnum = useEnum('buildtype')
 const orderstatusEnum = useEnum('orderstatus')
 
 const formRef = ref<FormInstance>()
-const dateValue = ref<string[]>([])
+const dateValue = ref<string[] | null>([])
 
 const queryParams = ref<Partial<Model.CommissionSheetReq>>({
     isHis: 0
@@ -137,7 +137,7 @@ const formRules: FormRules = {
     date: [{
         required: true,
         validator: (rule, value, callback) => {
-            if (dateValue.value.length === 2) {
+            if (dateValue.value && dateValue.value.length === 2) {
                 callback()
             } else {
                 callback(new Error('请选择日期'))
@@ -162,7 +162,7 @@ const onTypeChange = (value: number) => {
 
 // 选择日期
 const onDateChange = () => {
-    const [startDate, endDate] = dateValue.value
+    const [startDate, endDate] = dateValue.value || []
     queryParams.value.startDateHis = startDate
     queryParams.value.endDateHis = endDate
 }

src/packages/pc/views/query/order/position/index.vue

@@ -93,7 +93,7 @@ const { getMarketOptions } = useMarket()
 const usertype2Enum = useEnum('usertype2')
 
 const formRef = ref<FormInstance>()
-const dateValue = ref<string[]>([])
+const dateValue = ref<string[] | null>([])
 
 const queryParams = ref<Partial<Model.PositionSheetReq>>({
     isHis: 0,
@@ -143,7 +143,7 @@ const formRules: FormRules = {
     date: [{
         required: true,
         validator: (rule, value, callback) => {
-            if (dateValue.value.length === 2) {
+            if (dateValue.value && dateValue.value.length === 2) {
                 callback()
             } else {
                 callback(new Error('请选择日期'))
@@ -162,7 +162,7 @@ const onTypeChange = (value: number) => {
 
 // 选择日期
 const onDateChange = () => {
-    const [startDate, endDate] = dateValue.value
+    const [startDate, endDate] = dateValue.value || []
     queryParams.value.startDate = startDate
     queryParams.value.endDate = endDate
 }

src/packages/pc/views/query/order/trade/index.vue

@@ -109,7 +109,7 @@ const buildtypeEnum = useEnum('buildtype') // 单据类型
 const tradetypeEnum = useEnum('tradetype') // 成交类别
 
 const formRef = ref<FormInstance>()
-const dateValue = ref<string[]>([])
+const dateValue = ref<string[] | null>([])
 
 const queryParams = ref<Partial<Model.ContractSheetReq>>({
     isHis: 0
@@ -155,7 +155,7 @@ const formRules: FormRules = {
     date: [{
         required: true,
         validator: (rule, value, callback) => {
-            if (dateValue.value.length === 2) {
+            if (dateValue.value && dateValue.value.length === 2) {
                 callback()
             } else {
                 callback(new Error('请选择日期'))
@@ -174,7 +174,7 @@ const onTypeChange = (value: number) => {
 
 // 选择日期
 const onDateChange = () => {
-    const [startDate, endDate] = dateValue.value
+    const [startDate, endDate] = dateValue.value || []
     queryParams.value.startDateHis = startDate
     queryParams.value.endDateHis = endDate
 }

src/packages/pc/views/query/other/bank_inout/index.vue

@@ -2,7 +2,14 @@
 <template>
     <app-view>
         <template #header>
-            <app-filter :options="filterOptons" />
+            <app-filter :option="filterOption">
+                <template #after>
+                    <el-form-item label="交易日" prop="date">
+                        <el-date-picker type="daterange" v-model="dateValue" value-format="YYYYMMDD"
+                            start-placeholder="开始" end-placeholder="结束" />
+                    </el-form-item>
+                </template>
+            </app-filter>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <!-- 操作 -->
@@ -26,23 +33,29 @@ import { ElMessage } from 'element-plus'
 import { formatDate } from '@/filters'
 import { useEnum } from '@/hooks/enum'
 import { useRequest } from '@/hooks/request'
-import { useDataFilter } from '@/hooks/datatable'
+import { useDataFilter } from '@/hooks/datatable-v2'
 import { useOperation } from '@/hooks/operation'
 import { queryPutOrIn } from '@/services/api/account'
+import { getAllBankCus } from '@/services/api/bank'
 import AppTable from '@pc/components/base/table/index.vue'
-import AppFilter from '@pc/components/base/table-filter/index.vue'
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
 
 const executetypeEnum = useEnum('executetype') // 类型
 const applystatusEnum = useEnum('applystatus') // 状态
+const usertype2Enum = useEnum('usertype2') // 账户类型
 
-const { filterOptons, getQueryParams } = useDataFilter<Model.PutOrInReq>()
+const dateValue = shallowRef<string[] | null>([])
+
+const { filterOption, getQueryParams, resetFilters } = useDataFilter<Model.PutOrInReq>()
 
 const { componentMap, componentId, record, openComponent, closeComponent, getFilteredButtons } = useOperation<Model.PutOrInRsp>({
     onClose: () => onSearch()
 })
 
+const { dataList: bankList } = useRequest(getAllBankCus)
+
 const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(queryPutOrIn, {
     manual: true,
     params: {
@@ -57,7 +70,7 @@ const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(queryP
 const tableColumns = shallowRef<Model.TableColumn[]>([
     { field: 'accountcode', label: '资金账户' },
     { field: 'accountname', label: '用户/机构' },
-    { field: 'usertype', label: '账户类型' },
+    { field: 'usertype', label: '账户类型', formatValue: (val) => usertype2Enum.getEnumTypeName(val) },
     { field: 'parentaccountname', label: '所属机构' },
     { field: 'cusbankname', label: '托管银行' },
     { field: 'tradedate', label: '交易日' },
@@ -70,42 +83,60 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { field: 'operate', label: '操作', fixed: 'right' }
 ])
 
-filterOptons.selectList = [
+filterOption.items = [
     {
         key: 'executetype',
         label: '类型',
-        options: () => executetypeEnum.getEnumOptions(),
+        options: () => executetypeEnum.getEnumOptions()
     },
     {
         key: 'applystatus',
         label: '状态',
-        options: () => [],
+        options: () => applystatusEnum.getEnumOptions()
     },
     {
         key: 'cusbankid',
         label: '托管银行',
-        options: () => [],
+        options: () => bankList.value.map((e) => ({
+            label: e.cusbankname,
+            value: e.cusbankid
+        }))
     },
     {
         key: 'usertype',
         label: '账户类型',
-        options: () => [],
+        options: () => usertype2Enum.getEnumOptions()
+    },
+    {
+        label: '登录账号',
+        key: 'loginid'
+    },
+    {
+        label: '资金账户',
+        key: 'accountcode'
+    },
+    {
+        label: '交易商',
+        key: 'accountname',
+        placeholder: '输入交易商ID',
     }
 ]
 
-filterOptons.inputList = [
-    { label: '登录账号', keys: ['loginid'] },
-    { label: '资金账户', keys: ['accountcode'] },
-    { label: '交易商', keys: ['accountname'] },
-]
-
-filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+filterOption.buttons = [
+    { label: '查询', className: 'el-button--primary', validateEvent: true, onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onReset() }
 ]
 
-const onSearch = (clear = false) => {
-    const qs = getQueryParams(clear)
+const onSearch = () => {
+    const qs = getQueryParams()
+    const [startDate, endDate] = dateValue.value || []
+    qs.tradedatestart = startDate
+    qs.tradedateend = endDate
     run(qs)
 }
+
+const onReset = () => {
+    dateValue.value = []
+    resetFilters()
+}
 </script>

src/packages/pc/views/query/other/bank_statement/index.vue

@@ -2,7 +2,20 @@
 <template>
     <app-view>
         <template #header>
-            <app-filter :options="filterOptons" />
+            <app-filter :option="filterOption" :rules="filterRules">
+                <template #logType="{ item }">
+                    <el-form-item label="查询类型">
+                        <el-select v-model="item.value">
+                            <el-option v-for="(option, i) in item.options?.()" :key="i" :label="option.label"
+                                :value="option.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="日期" prop="date" v-if="item.value === 2">
+                        <el-date-picker type="daterange" v-model="dateValue" value-format="YYYYMMDD"
+                            start-placeholder="开始" end-placeholder="结束" />
+                    </el-form-item>
+                </template>
+            </app-filter>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <template #headerLeft>
@@ -21,21 +34,22 @@
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, FormRules } from 'element-plus'
 import { useEnum } from '@/hooks/enum'
 import { useRequest } from '@/hooks/request'
-import { useDataFilter } from '@/hooks/datatable'
+import { useDataFilter } from '@/hooks/datatable-v2'
 import { useOperation } from '@/hooks/operation'
 import { queryAmountStream } from '@/services/api/account'
 import AppTable from '@pc/components/base/table/index.vue'
-import AppFilter from '@pc/components/base/table-filter/index.vue'
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
 
 const { getEnumOptions } = useEnum('operatetypesearch') // 业务类型
-const queryParams = shallowRef<Model.AmountStreamReq>()
 
-const { filterOptons, getQueryParams } = useDataFilter<Model.AmountStreamReq>()
+const dateValue = shallowRef<string[] | null>([])
+
+const { queryParams, filterOption, getQueryParams, resetFilters } = useDataFilter<Model.AmountStreamReq>()
 
 const { componentMap, componentId, record, openComponent, closeComponent, getFilteredButtons } = useOperation<Model.AmountStreamRsp>({
     onClose: () => onSearch()
@@ -63,49 +77,72 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { field: 'relationOrderId', label: '关联单号' },
 ])
 
-filterOptons.selectList = [
+// 表单验证规则
+const filterRules: FormRules = {
+    date: [{
+        required: true,
+        validator: (rule, value, callback) => {
+            if (dateValue.value && dateValue.value.length === 2) {
+                callback()
+            } else {
+                callback(new Error('请选择日期'))
+            }
+        },
+    }],
+}
+
+filterOption.items = [
     {
         key: 'logType',
         label: '查询类型',
-        selectedValue: 1,
+        value: 1,
         locked: true,
         options: () => [
             { label: '当前', value: 1 },
             { label: '历史', value: 2 },
-        ],
+        ]
     },
     {
         key: 'operatetype',
         label: '业务类型',
-        options: () => getEnumOptions(),
+        options: () => getEnumOptions()
     },
+    {
+        label: '账户',
+        key: 'accountId',
+        placeholder: '输入资金账户ID',
+        required: true
+    }
 ]
 
-filterOptons.inputList = [
-    { label: '账户', keys: ['accountId'], placeholder: '输入资金账户或名称' }
+filterOption.buttons = [
+    { label: '查询', className: 'el-button--primary', validateEvent: true, onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onReset() }
 ]
 
-filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
-]
+// 处理请求参数
+const processRequiredParams = () => {
+    const qs = getQueryParams()
+    if (qs.logType === 2) {
+        const [startDate, endDate] = dateValue.value || []
+        qs.startTime = startDate
+        qs.endTime = endDate
+    }
+    return qs
+}
 
-const onSearch = (clear = false) => {
-    processRequiredParams((qs) => run(qs), clear)
+const onSearch = () => {
+    const qs = processRequiredParams()
+    run(qs)
 }
 
-const openComponentOnClick = (code: string) => {
-    processRequiredParams(() => openComponent(code))
+const onReset = () => {
+    dateValue.value = []
+    resetFilters()
 }
 
-// 处理请求参数
-const processRequiredParams = (callback: (params: Model.AmountStreamReq) => void, clear = false) => {
-    const qs = getQueryParams(clear)
-    if (qs.accountId) {
-        queryParams.value = qs
-        callback(qs)
-    } else {
-        ElMessage.warning('请选择账户')
-    }
+const openComponentOnClick = (code: string) => {
+    queryParams.value = processRequiredParams()
+    openComponent(code)
 }
 </script>

src/packages/pc/views/query/warehouse_receipt/wrsumm/index.vue

@@ -2,7 +2,36 @@
 <template>
     <app-view>
         <template #header>
-            <app-filter :options="filterOptons" />
+            <el-form class="el-form--filter" :model="queryParams">
+                <el-form-item label="查询类型" prop="ishis">
+                    <el-select v-model="queryParams.ishis" @change="onTypeChange">
+                        <el-option label="当前" :value="0" />
+                        <el-option label="历史" :value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="日期" prop="date" v-if="queryParams.ishis === 1">
+                    <el-date-picker type="daterange" v-model="dateValue" value-format="YYYY-MM-DD"
+                        start-placeholder="开始" end-placeholder="结束" @change="onDateChange" />
+                </el-form-item>
+                <el-form-item label="仓库标准" prop="wrsids" v-if="warehouse">
+                    <el-select v-model="wrsids" multiple collapse-tags>
+                        <template v-for="item in warehouse.wrStandardList" :key="item.wrstandardid">
+                            <el-option :label="item.wrstandardname" :value="item.wrstandardid" />
+                        </template>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="仓库" prop="wareids" v-if="warehouse">
+                    <el-select v-model="wareids" multiple collapse-tags>
+                        <template v-for="item in warehouse.warehouseInfoList" :key="item.autoid">
+                            <el-option :label="item.warehousename" :value="item.autoid" />
+                        </template>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="onSearch(false)">查询</el-button>
+                    <el-button type="primary" @click="onSearch(true)">重置</el-button>
+                </el-form-item>
+            </el-form>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <!-- 操作 -->
@@ -24,15 +53,19 @@
 import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useRequest } from '@/hooks/request'
-import { useDataFilter } from '@/hooks/datatable'
 import { useOperation } from '@/hooks/operation'
 import { initWarehouse, summaryQuery } from '@/services/api/order'
 import AppTable from '@pc/components/base/table/index.vue'
-import AppFilter from '@pc/components/base/table-filter/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
 
-const { filterOptons, getQueryParams } = useDataFilter<Model.SummaryQueryReq>()
+const dateValue = ref<string[] | null>([])
+const wrsids = ref<number[]>([])
+const wareids = ref<number[]>([])
+
+const queryParams = ref<Partial<Model.SummaryQueryReq>>({
+    ishis: 0
+})
 
 const { componentMap, componentId, record, openComponent, closeComponent, getFilteredButtons } = useOperation<Model.SummaryQueryRsp>({
     onClose: () => onSearch()
@@ -47,8 +80,7 @@ const { data: warehouse } = useRequest(initWarehouse, {
 const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(summaryQuery, {
     params: {
         pageNum: 1,
-        pageSize: 20,
-        ishis: 0
+        pageSize: 20
     },
     onError: (err) => {
         ElMessage.error(err)
@@ -67,46 +99,33 @@ const tableColumns = ref<Model.TableColumn[]>([
     { field: 'operate', label: '操作', fixed: 'right' }
 ])
 
-filterOptons.selectList = [
-    {
-        key: 'ishis',
-        label: '查询类型',
-        selectedValue: 0,
-        locked: true,
-        options: () => [
-            { label: '当前', value: 0 },
-            { label: '历史', value: 1 },
-        ],
-    },
-    {
-        key: 'wrsids',
-        label: '仓库标准',
-        multiple: true,
-        options: () => warehouse.value?.wrStandardList.map((e) => ({
-            label: e.wrstandardname,
-            value: e.wrstandardid
-        })) || [],
-    },
-    {
-        key: 'wareids',
-        label: '仓库',
-        multiple: true,
-        options: () => warehouse.value?.warehouseInfoList.map((e) => ({
-            label: e.warehousename,
-            value: e.autoid
-        })) || [],
+// 选择查询类型
+const onTypeChange = (value: number) => {
+    if (!value) {
+        dateValue.value = []
+        onDateChange()
     }
-]
+}
 
-filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
-]
+// 选择日期
+const onDateChange = () => {
+    const [startDate, endDate] = dateValue.value || []
+    queryParams.value.hisstartdate = startDate
+    queryParams.value.hisenddate = endDate
+}
 
 const onSearch = (clear = false) => {
-    const qs = getQueryParams(clear)
-    qs.wareids = Array.isArray(qs.wareids) ? qs.wareids.join(',') : qs.wareids
-    qs.wrsids = Array.isArray(qs.wrsids) ? qs.wrsids.join(',') : qs.wrsids
-    run(qs)
+    if (clear) {
+        queryParams.value = {
+            ishis: 0,
+        }
+        dateValue.value = []
+        wareids.value = []
+        wrsids.value = []
+    } else {
+        queryParams.value.wareids = wareids.value.join(',')
+        queryParams.value.wrsids = wrsids.value.join(',')
+    }
+    run(queryParams.value)
 }
 </script>

src/packages/pc/views/query/warehouse_receipt_order/order/index.vue

@@ -107,8 +107,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/query/warehouse_receipt_order/trade/index.vue

@@ -103,8 +103,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {

src/packages/pc/views/settlement/profitsharepay/index.vue

@@ -52,8 +52,8 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 ])
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 // 处理请求参数

src/packages/pc/views/system/login_failed/index.vue

@@ -64,8 +64,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 // 处理请求参数

src/packages/pc/views/system/operation_log/index.vue

@@ -67,8 +67,8 @@ filterOptons.inputList = [
 ]
 
 filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
+    { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
+    { label: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
 ]
 
 const onSearch = (clear = false) => {