update

src/hooks/datatable-v2/types.ts

@@ -26,6 +26,7 @@ export interface FilterItem<T, K extends keyof T> {
     multiple?: boolean;
     required?: boolean;
     width?: number;
+    visibility?: () => boolean; // 控制元素显示或隐藏
     options?: () => {
         label: string;
         value: T[K];

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

@@ -2,16 +2,20 @@
   <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.filters" :key="index">
-      <slot :name="item.field" :item="item">
-        <el-form-item :label="item.label" :prop="item.field">
-          <el-select :placeholder="item.placeholder ?? t('common.pleasechoice')" v-model="item.value" :multiple="item.multiple"
-            collapse-tags clearable @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 ?? t('common.pleaseenter')" v-model="item.value" v-else />
-        </el-form-item>
-      </slot>
+      <template v-if="item.visibility?.() ?? true">
+        <slot :name="item.field" :item="item">
+          <el-form-item :label="item.label" :prop="item.field">
+            <el-select :placeholder="item.placeholder ?? t('common.pleasechoice')" v-model="item.value"
+              :multiple="item.multiple" collapse-tags clearable @change="item.onChange" :style="handleStyle(item.width)"
+              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 ?? t('common.pleaseenter')" v-model="item.value"
+              :style="handleStyle(item.width)" v-else />
+          </el-form-item>
+        </slot>
+      </template>
     </template>
     <slot name="after"></slot>
     <el-form-item v-if="option.filters.length && option.buttons">
@@ -24,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, PropType, computed } from 'vue'
+import { shallowRef, PropType, computed, StyleHTMLAttributes } from 'vue'
 import { FormInstance, FormRules } from 'element-plus'
 import { FilterOption, ActionButton } from '@/hooks/datatable-v2/types'
 import { i18n } from '@/stores'
@@ -61,6 +65,14 @@ const formRules = computed<FormRules>(() => {
   return { ...rules, ...props.rules }
 })
 
+const handleStyle = (width?: number) => {
+  const style: Partial<CSSStyleDeclaration> = {}
+  if (width) {
+    style.width = width + 'px'
+  }
+  return style
+}
+
 const handleButtonClick = ({ validateEvent = true, onClick }: ActionButton) => {
   if (validateEvent) {
     formRef.value?.validate((isValid) => {
@@ -70,7 +82,7 @@ const handleButtonClick = ({ validateEvent = true, onClick }: ActionButton) => {
     })
   } else {
     onClick()
-    formRef.value?.resetFields()
+    setTimeout(() => formRef.value?.resetFields(), 0)
   }
 }
 </script>

src/packages/pc/components/modules/select-goods/index.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, toRaw, PropType } from 'vue'
+import { computed, toRaw, PropType, nextTick } from 'vue'
 import { useRequest } from '@/hooks/request'
 import { queryGoodsSelect } from '@/services/api/common'
 import AppRemoteSelect from '@pc/components/base/remote-select/index.vue'
@@ -43,22 +43,26 @@ const { dataList, loading, run } = useRequest(queryGoodsSelect, {
 })
 
 const onReset = () => {
-    if (!loading.value) {
-        run(props.params)
-    }
+    nextTick(() => {
+        if (!loading.value) {
+            run(props.params)
+        }
+    })
 }
 
 const remoteMethod = (query: string) => {
-    if (!loading.value) {
-        if (query) {
-            run({
-                ...props.params,
-                searchCode: query
-            })
-        } else if (!dataList.value.length) {
-            onReset()
+    nextTick(() => {
+        if (!loading.value) {
+            if (query) {
+                run({
+                    ...props.params,
+                    searchCode: query
+                })
+            } else if (!dataList.value.length) {
+                onReset()
+            }
         }
-    }
+    })
 }
 
 const onChange = (value?: number) => {

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

@@ -2,41 +2,28 @@
 <template>
     <app-view>
         <template #header>
-            <el-form ref="formRef" class="el-form--filter" :model="queryParams" :rules="formRules"
-                :show-message="false">
-                <el-form-item :label="t('query.internal.accountsumm.marketid')" 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">
-                            <el-option :label="item.label" :value="item.value" />
-                        </template>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.accountsumm.summode')" prop="summode">
-                    <el-select v-model="queryParams.summode">
-                        <el-option :label="t('query.internal.accountsumm.summode1')" :value="1" />
-                        <el-option :label="t('query.internal.accountsumm.summode2')" :value="2" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.accountsumm.date')" prop="date">
-                    <el-date-picker type="daterange" v-model="dateValue" value-format="YYYYMMDD" :start-placeholder="t('common.start')"
-                        :end-placeholder="t('common.end')" @change="onDateChange" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.accountsumm.goodsid')" prop="goodsid">
-                    <el-input type="number" v-model="queryParams.goodsid" :placeholder="t('query.internal.accountsumm.tips1')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.accountsumm.accountid')" prop="accountid">
-                    <el-input type="number" v-model="queryParams.accountid" :placeholder="t('query.internal.accountsumm.tips2')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.accountsumm.excludeaccountidsstr')" prop="excludeaccountidsstr">
-                    <el-input v-model="queryParams.excludeaccountidsstr" :placeholder="t('query.internal.accountsumm.tips3')"
-                        style="width: 260px;" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSearch(false)">{{ t('operation.search') }}</el-button>
-                    <el-button type="primary" @click="onSearch(true)">{{ t('operation.reset') }}</el-button>
-                </el-form-item>
-            </el-form>
+            <app-filter :option="filterOption" :rules="filterRules">
+                <!-- 商品 -->
+                <template #goodsid="{ item }">
+                    <el-form-item :label="item.label" prop="goodsid">
+                        <app-select-goods ref="goodsRef" v-model="item.value"
+                            :params="{ marketId: queryParams.marketid ?? -1, goodsStatusIds: '3,6,7' }" />
+                    </el-form-item>
+                </template>
+                <!-- 日期 -->
+                <template #startdate="{ item }">
+                    <el-form-item :label="item.label" prop="startdate">
+                        <el-date-picker type="daterange" v-model="dateValue" value-format="YYYYMMDD"
+                            :start-placeholder="t('common.start')" :end-placeholder="t('common.end')" />
+                    </el-form-item>
+                </template>
+                <!-- 账户 -->
+                <template #accountid="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-account v-model="item.value" />
+                    </el-form-item>
+                </template>
+            </app-filter>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <template #headerLeft>
@@ -55,26 +42,26 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, FormRules } from 'element-plus'
 import { useMarket } from '@/hooks/market'
 import { useRequest } from '@/hooks/request'
+import { useDataFilter } from '@/hooks/datatable-v2'
 import { useOperation } from '@/hooks/operation'
 import { accountTransactions } from '@/services/api/order'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
+import AppSelectGoods from '@pc/components/modules/select-goods/index.vue'
+import AppSelectAccount from '@pc/components/modules/select-account/index.vue'
 import { i18n } from '@/stores'
 
 const { getMarketOptions } = useMarket()
 
 const { global: { t } } = i18n
-const formRef = ref<FormInstance>()
+const goodsRef = ref() // 商品组件实例
 const dateValue = ref<string[] | null>([])
 
-const queryParams = ref<Partial<Model.AccountTransactionsReq>>({
-    summode: 1
-})
-
 const { componentMap, componentId, record, openComponent, closeComponent, getActionButtons } = useOperation<Model.AccountTransactionsReq>({
     onClose: () => onSearch()
 })
@@ -84,6 +71,9 @@ const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(accoun
     params: {
         pageNum: 1,
         pageSize: 20,
+    },
+    onError: (err) => {
+        ElMessage.error(err)
     }
 })
 
@@ -99,49 +89,74 @@ const tableColumns = ref<Model.TableColumn[]>([
     { field: 'chargesum', label: 'query.internal.accountsumm.chargesum' }
 ])
 
+const { queryParams, filterOption, getQueryParams, resetFilters } = useDataFilter<Model.AccountTransactionsReq>({
+    filters: [
+        {
+            field: 'marketid',
+            label: t('query.internal.accountsumm.marketid'),
+            required: true,
+            options: () => getMarketOptions([15, 40, 41, 48, 51, 71, 97, 99], true),
+            onChange: () => goodsRef.value.onReset()
+        },
+        {
+            field: 'goodsid',
+            label: t('query.internal.accountsumm.goodsid'),
+            required: true
+        },
+        {
+            field: 'summode',
+            label: t('query.internal.accountsumm.summode'),
+            value: 1,
+            options: () => [
+                { label: t('query.internal.accountsumm.summode1'), value: 1 },
+                { label: t('query.internal.accountsumm.summode2'), value: 2 },
+            ]
+        },
+        {
+            field: 'startdate',
+            label: t('query.internal.accountsumm.date'),
+            required: true
+        },
+        {
+            field: 'accountid',
+            label: t('query.internal.accountsumm.accountid')
+        },
+        {
+            field: 'excludeaccountidsstr',
+            label: t('query.internal.accountsumm.excludeaccountidsstr'),
+            placeholder: t('query.internal.accountsumm.tips3'),
+            width: 260
+        },
+    ],
+    buttons: [
+        { label: t('operation.search'), className: 'el-button--primary', onClick: () => onSearch() },
+        { label: t('operation.reset'), className: 'el-button--primary', validateEvent: false, onClick: () => onReset() }
+    ]
+})
+
 // 表单验证规则
-const formRules: FormRules = {
-    marketid: [{ required: true }],
-    //goodsid: [{ required: true }],
-    date: [{
+const filterRules: FormRules = {
+    startdate: [{
         required: true,
-        validator: (rule, value, callback) => {
-            if (dateValue.value && dateValue.value.length === 2) {
-                callback()
-            } else {
-                callback(new Error(t('common.pleasechoicedate')))
-            }
-        },
-    }],
+        validator: () => dateValue.value?.length === 2
+    }]
 }
 
-// 选择日期
-const onDateChange = () => {
+const onSearch = (clear = false) => {
+    const qs = getQueryParams(clear)
     const [startDate, endDate] = dateValue.value || []
-    queryParams.value.startdate = startDate
-    queryParams.value.enddate = endDate
+    qs.startdate = startDate
+    qs.enddate = endDate
+    run(qs)
 }
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        queryParams.value = {
-            summode: 1,
-        }
-        dateValue.value = []
-    } else {
-        formRef.value?.validate((valid) => {
-            if (valid) {
-                run(queryParams.value)
-            }
-        })
-    }
+const onReset = () => {
+    resetFilters()
+    dateValue.value = []
+    goodsRef.value.onReset()
 }
 
 const openComponentOnClick = (code: string) => {
-    formRef.value?.validate((valid) => {
-        if (valid) {
-            openComponent(code)
-        }
-    })
+    //openComponent(code)
 }
 </script>

src/packages/pc/views/query/internal/deliveryorder/index.vue

@@ -85,9 +85,7 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }
 

src/packages/pc/views/query/internal/deliverytrade/components/details/index.vue

@@ -1,7 +1,8 @@
 <!-- 查询管理-内部订单查询-交收成交查询-详情 -->
 <template>
     <app-drawer :title="t('query.internal.deliverytrade.details.title')" width="960" v-model:show="show">
-        <app-table-details :title="t('query.internal.deliverytrade.details.subtitle1')" :data="data" :label-width="200" :cell-props="detailProps1" :column="2">
+        <app-table-details :title="t('query.internal.deliverytrade.details.subtitle1')" :data="data" :label-width="200"
+            :cell-props="detailProps1" :column="2">
             <!-- 会员服务费设置值 -->
             <template #memberchargevalue v-if="data">
                 <template v-if="data.memberchargevalue">
@@ -27,12 +28,14 @@
                 </template>
             </template>
         </app-table-details>
-        <app-table-details :title="t('query.internal.deliverytrade.details.subtitle2')" :data="data" :label-width="200" :cell-props="detailProps2" :column="2" />
-        <app-table-details :title="t('query.internal.deliverytrade.details.subtitle3')" :data="data" :label-width="200" :cell-props="detailProps3" :column="2" />
-        <app-table-details :title="t('query.internal.deliverytrade.details.subtitle4')" :data="data" :label-width="200" :cell-props="detailProps4" :column="2"
-            v-if="!!data?.ppricemode" />
-        <app-table-details :title="t('query.internal.deliverytrade.details.subtitle5')" :data="data" :label-width="200" :cell-props="detailProps5" :column="2"
-            v-if="!!data?.p2pricemode" />
+        <app-table-details :title="t('query.internal.deliverytrade.details.subtitle2')" :data="data" :label-width="200"
+            :cell-props="detailProps2" :column="2" />
+        <app-table-details :title="t('query.internal.deliverytrade.details.subtitle3')" :data="data" :label-width="200"
+            :cell-props="detailProps3" :column="2" />
+        <app-table-details :title="t('query.internal.deliverytrade.details.subtitle4')" :data="data" :label-width="200"
+            :cell-props="detailProps4" :column="2" v-if="!!data?.ppricemode" />
+        <app-table-details :title="t('query.internal.deliverytrade.details.subtitle5')" :data="data" :label-width="200"
+            :cell-props="detailProps5" :column="2" v-if="!!data?.p2pricemode" />
         <template #footer>
             <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
         </template>
@@ -77,7 +80,7 @@ const { data } = useRequest(querySettlementDealDetail, {
 })
 
 const detailProps1 = computed(() => {
-    const { buyorsell, histradedate, tradedate, accountname, accountid, matchaccountname, matchaccountid, feealgorithm } = data.value ?? {}
+    const { buyorsell, histradedate, tradedate, accountname, accountid, matchaccountname, matchaccountid } = data.value ?? {}
     const buyer = buyorsell === BuyOrSell.Buy ? `${accountname}(${accountid})` : `${matchaccountname}(${matchaccountid})`
     const seller = buyorsell === BuyOrSell.Buy ? `${matchaccountname}(${matchaccountid})` : `${accountname}(${accountid})`
 

src/packages/pc/views/query/internal/deliverytrade/index.vue

@@ -89,9 +89,7 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }
 

src/packages/pc/views/query/internal/goodssumm/index.vue

@@ -2,34 +2,22 @@
 <template>
     <app-view>
         <template #header>
-            <el-form ref="formRef" class="el-form--filter" :model="queryParams" :rules="formRules"
-                :show-message="false">
-                <el-form-item :label="t('query.internal.goodssumm.marketid')" prop="marketid">
-                    <el-select v-model="queryParams.marketid">
-                        <el-option v-for="item in getMarketOptions([15, 40, 41, 48, 51, 71, 97, 99], true)" :key="item.value" :label="item.label"
-                            :value="item.value" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.goodssumm.date')" prop="date">
-                    <el-date-picker type="daterange" v-model="dateValue" value-format="YYYYMMDD"
-                        :start-placeholder="t('common.startdate')" :end-placeholder="t('common.enddate')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.goodssumm.summode')" prop="summode">
-                    <el-select v-model="queryParams.summode">
-                        <el-option :label="t('query.internal.goodssumm.summode1')" :value="1" />
-                        <el-option :label="t('query.internal.goodssumm.summode2')" :value="2" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.goodssumm.goodsid')" prop="goodsid">
-                    <app-select-goods v-model="queryParams.goodsid" :params="{ marketId: queryParams.marketid, goodsStatusIds: '3,6,7' }" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.goodssumm.excludeaccountidsstr')" prop="excludeaccountidsstr">
-                    <el-input v-model="queryParams.excludeaccountidsstr" :placeholder="t('query.internal.goodssumm.tips1')" style="width: 260px;" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSearch">{{ t('operation.search') }}</el-button>
-                </el-form-item>
-            </el-form>
+            <app-filter :option="filterOption" :rules="filterRules">
+                <!-- 商品 -->
+                <template #goodsid="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-goods ref="goodsRef" v-model="item.value"
+                            :params="{ marketId: queryParams.marketid ?? -1, goodsStatusIds: '3,6,7' }" />
+                    </el-form-item>
+                </template>
+                <!-- 日期 -->
+                <template #startdate="{ item }">
+                    <el-form-item :label="item.label" prop="startdate">
+                        <el-date-picker type="daterange" v-model="dateValue" value-format="YYYYMMDD"
+                            :start-placeholder="t('common.startdate')" :end-placeholder="t('common.enddate')" />
+                    </el-form-item>
+                </template>
+            </app-filter>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <template #headerLeft>
@@ -47,28 +35,26 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, shallowRef } from 'vue'
-import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import {  shallowRef } from 'vue'
+import { ElMessage,  FormRules } from 'element-plus'
 import { useMarket } from '@/hooks/market'
 import { useRequest } from '@/hooks/request'
+import { useDataFilter } from '@/hooks/datatable-v2'
 import { useOperation } from '@/hooks/operation'
 import { queryGoodsTrade } from '@/services/api/order'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
 import AppSelectGoods from '@pc/components/modules/select-goods/index.vue'
 import { i18n } from '@/stores'
 
 const { global: { t } } = i18n
-const formRef = shallowRef<FormInstance>()
+
+const goodsRef = shallowRef() // 商品组件实例
+const dateValue = shallowRef<string[] | null>([])
 
 const { getMarketOptions } = useMarket()
-const dateValue = shallowRef<string[]>([])
-const queryParams = reactive<Model.GoodsTradeReq>({
-    pageNum: 1,
-    pageSize: 20,
-    summode: 1
-})
 
 const { componentMap, componentId, record, openComponent, closeComponent, getActionButtons } = useOperation<Model.GoodsTradeRsp>({
     onClose: () => onSearch()
@@ -76,6 +62,10 @@ const { componentMap, componentId, record, openComponent, closeComponent, getAct
 
 const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(queryGoodsTrade, {
     manual: true,
+    params: {
+        pageNum: 1,
+        pageSize: 20,
+    },
     onError: (err) => {
         ElMessage.error(err)
     }
@@ -90,38 +80,69 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { field: 'chargesum', label: 'query.internal.goodssumm.chargesum' },
 ])
 
+const { queryParams, filterOption, getQueryParams, resetFilters } = useDataFilter<Model.GoodsTradeReq>({
+    filters: [
+        {
+            field: 'marketid',
+            label: t('query.internal.goodssumm.marketid'),
+            required: true,
+            options: () => getMarketOptions([15, 40, 41, 48, 51, 71, 97, 99], true),
+            onChange: () => goodsRef.value.onReset()
+        },
+        {
+            field: 'goodsid',
+            label: t('query.internal.goodssumm.goodsid')
+        },
+        {
+            field: 'summode',
+            label: t('query.internal.goodssumm.summode'),
+            value: 1,
+            options: () => [
+                { label: t('query.internal.goodssumm.summode1'), value: 1 },
+                { label: t('query.internal.goodssumm.summode2'), value: 2 },
+            ]
+        },
+        {
+            field: 'startdate',
+            label: t('query.internal.goodssumm.date'),
+            required: true
+        },
+        {
+            field: 'excludeaccountidsstr',
+            label: t('query.internal.goodssumm.excludeaccountidsstr'),
+            placeholder: t('query.internal.goodssumm.tips1'),
+            width: 260
+        },
+    ],
+    buttons: [
+        { label: t('operation.search'), className: 'el-button--primary', onClick: () => onSearch() },
+        { label: t('operation.reset'), className: 'el-button--primary', validateEvent: false, onClick: () => onReset() }
+    ]
+})
+
 // 表单验证规则
-const formRules: FormRules = {
-    marketid: [{ required: true }],
-    date: [{
+const filterRules: FormRules = {
+    startdate: [{
         required: true,
-        validator: (rule, value, callback) => {
-            if (dateValue.value.length === 2) {
-                callback()
-            } else {
-                callback(new Error(t('common.pleasechoicedate')))
-            }
-        },
-    }],
+        validator: () => dateValue.value?.length === 2
+    }]
 }
 
 const onSearch = (clear = false) => {
-    processRequiredParams((qs) => run(qs), clear)
+    const qs = getQueryParams(clear)
+    const [startDate, endDate] = dateValue.value || []
+    qs.startdate = startDate
+    qs.enddate = endDate
+    run(qs)
 }
 
-const openComponentOnClick = (code: string) => {
-    processRequiredParams(() => openComponent(code))
+const onReset = () => {
+    resetFilters()
+    dateValue.value = []
+    goodsRef.value.onReset()
 }
 
-// 处理请求参数
-const processRequiredParams = (callback: (params: Model.InvestorOrderReq) => void, clear = false) => {
-    formRef.value?.validate((valid) => {
-        if (valid) {
-            const [startDate, endDate] = dateValue.value
-            queryParams.startdate = startDate
-            queryParams.enddate = endDate
-            callback(queryParams)
-        }
-    })
+const openComponentOnClick = (code: string) => {
+    //openComponent(code)
 }
 </script>

src/packages/pc/views/query/internal/institutionsumm/index.vue

@@ -2,28 +2,34 @@
 <template>
     <app-view>
         <template #header>
-            <el-form ref="formRef" class="el-form--filter" :model="queryParams" :rules="formRules"
-                :show-message="false">
-                <el-form-item :label="t('query.internal.institutionsumm.marketid')">
-                    <el-select v-model="marketId">
-                        <el-option v-for="item in getMarketOptions([15, 40, 41, 48, 51, 71, 97, 99], true)"
-                            :key="item.value" :label="item.label" :value="item.value" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.institutionsumm.goodsid')" prop="goodsid">
-                    <app-select-goods v-model="queryParams.goodsid" :params="{ marketId, goodsStatusIds: '3,6,7' }" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.institutionsumm.date')" prop="date">
-                    <el-date-picker type="daterange" v-model="dateValue" value-format="YYYYMMDD"
-                        :start-placeholder="t('common.startdate')" :end-placeholder="t('common.enddate')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.institutionsumm.parentuserid')" prop="parentuserid">
-                    <app-select-member2 v-model="queryParams.parentuserid" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSearch">{{ t('operation.search') }}</el-button>
-                </el-form-item>
-            </el-form>
+            <app-filter :option="filterOption" :rules="filterRules">
+                <!-- 商品 -->
+                <template #goodsid="{ item }">
+                    <el-form-item :label="t('query.internal.institutionsumm.marketid')">
+                        <el-select v-model="marketId" @change="goodsRef.onReset()">
+                            <el-option v-for="item in getMarketOptions([15, 40, 41, 48, 51, 71, 97, 99], true)"
+                                :key="item.value" :label="item.label" :value="item.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="item.label" prop="goodsid">
+                        <app-select-goods ref="goodsRef" v-model="item.value"
+                            :params="{ marketId, goodsStatusIds: '3,6,7' }" />
+                    </el-form-item>
+                </template>
+                <!-- 日期 -->
+                <template #startdate="{ item }">
+                    <el-form-item :label="item.label" prop="startdate">
+                        <el-date-picker type="daterange" v-model="dateValue" value-format="YYYYMMDD"
+                            :start-placeholder="t('common.startdate')" :end-placeholder="t('common.enddate')" />
+                    </el-form-item>
+                </template>
+                <!-- 所属机构 -->
+                <template #parentuserid="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-member2 v-model="item.value" />
+                    </el-form-item>
+                </template>
+            </app-filter>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <template #headerLeft>
@@ -41,29 +47,27 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, shallowRef } from 'vue'
-import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { shallowRef } from 'vue'
+import { ElMessage, FormRules } from 'element-plus'
 import { useMarket } from '@/hooks/market'
 import { useRequest } from '@/hooks/request'
+import { useDataFilter } from '@/hooks/datatable-v2'
 import { useOperation } from '@/hooks/operation'
 import { queryInvestor } from '@/services/api/order'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
 import AppSelectGoods from '@pc/components/modules/select-goods/index.vue'
 import AppSelectMember2 from '@pc/components/modules/select-member2/index.vue'
 import { i18n } from '@/stores'
 
 const { getMarketOptions } = useMarket()
 const { global: { t } } = i18n
-const formRef = shallowRef<FormInstance>()
+const goodsRef = shallowRef() // 商品组件实例
 
 const marketId = shallowRef<number>()
 const dateValue = shallowRef<string[]>([])
-const queryParams = reactive<Model.InvestorOrderReq>({
-    pageNum: 1,
-    pageSize: 20
-})
 
 const { componentMap, componentId, record, openComponent, closeComponent, getActionButtons } = useOperation<Model.InvestorOrderRsp>({
     onClose: () => onSearch()
@@ -71,6 +75,10 @@ const { componentMap, componentId, record, openComponent, closeComponent, getAct
 
 const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(queryInvestor, {
     manual: true,
+    params: {
+        pageNum: 1,
+        pageSize: 20,
+    },
     onError: (err) => {
         ElMessage.error(err)
     }
@@ -87,38 +95,52 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { field: 'chargesum', label: 'query.internal.institutionsumm.chargesum' },
 ])
 
+const { queryParams, filterOption, getQueryParams, resetFilters } = useDataFilter<Model.InvestorOrderReq>({
+    filters: [
+        {
+            field: 'goodsid',
+            label: t('query.internal.institutionsumm.goodsid'),
+            required: true
+        },
+        {
+            field: 'startdate',
+            label: t('query.internal.institutionsumm.date'),
+            required: true
+        },
+        {
+            field: 'parentuserid',
+            label: t('query.internal.institutionsumm.parentuserid')
+        }
+    ],
+    buttons: [
+        { label: t('operation.search'), className: 'el-button--primary', onClick: () => onSearch() },
+        { label: t('operation.reset'), className: 'el-button--primary', validateEvent: false, onClick: () => onReset() }
+    ]
+})
+
 // 表单验证规则
-const formRules: FormRules = {
-    goodsid: [{ required: true }],
-    date: [{
+const filterRules: FormRules = {
+    startdate: [{
         required: true,
-        validator: (rule, value, callback) => {
-            if (dateValue.value.length === 2) {
-                callback()
-            } else {
-                callback(new Error(t('common.pleasechoicedate')))
-            }
-        },
-    }],
+        validator: () => dateValue.value?.length === 2
+    }]
 }
 
 const onSearch = (clear = false) => {
-    processRequiredParams((qs) => run(qs), clear)
+    const qs = getQueryParams(clear)
+    const [startDate, endDate] = dateValue.value || []
+    qs.startdate = startDate
+    qs.enddate = endDate
+    run(qs)
 }
 
-const openComponentOnClick = (code: string) => {
-    processRequiredParams(() => openComponent(code))
+const onReset = () => {
+    resetFilters()
+    dateValue.value = []
+    goodsRef.value.onReset()
 }
 
-// 处理请求参数
-const processRequiredParams = (callback: (params: Model.InvestorOrderReq) => void, clear = false) => {
-    formRef.value?.validate((valid) => {
-        if (valid) {
-            const [startDate, endDate] = dateValue.value
-            queryParams.startdate = startDate
-            queryParams.enddate = endDate
-            callback(queryParams)
-        }
-    })
+const openComponentOnClick = (code: string) => {
+    //openComponent(code)
 }
 </script>

src/packages/pc/views/query/internal/liquidation/index.vue

@@ -2,7 +2,15 @@
 <template>
     <app-view>
         <template #header>
-            <app-filter :option="filterOption" />
+            <app-filter :option="filterOption">
+                <!-- 商品 -->
+                <template #goodsId="{ item }">
+                    <el-form-item :label="item.label" prop="goodsId">
+                        <app-select-goods ref="goodsRef" v-model="item.value"
+                            :params="{ marketId: queryParams.marketId ?? -1, goodsStatusIds: '3,6,7' }" />
+                    </el-form-item>
+                </template>
+            </app-filter>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <template #headerLeft>
@@ -38,9 +46,11 @@ import AppTable from '@pc/components/base/table/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
 import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
+import AppSelectGoods from '@pc/components/modules/select-goods/index.vue'
 
 const { getMarketOptions } = useMarket()
 const { global: { t } } = i18n
+const goodsRef = ref() // 商品组件实例
 
 const { componentMap, componentId, record, openComponent, closeComponent, getActionButtons } = useOperation<Model.CommissionSheetRsp>({
     onClose: () => onSearch()
@@ -76,7 +86,8 @@ const { queryParams, filterOption, getQueryParams, resetFilters } = useDataFilte
             field: 'marketId',
             label: t('query.internal.liquidation.marketId'),
             required: true,
-            options: () => getMarketOptions()
+            options: () => getMarketOptions([15, 97, 99], true),
+            onChange: () => goodsRef.value.onReset()
         },
         {
             field: 'goodsId',
@@ -99,7 +110,7 @@ const { queryParams, filterOption, getQueryParams, resetFilters } = useDataFilte
     ],
     buttons: [
         { label: t('operation.search'), className: 'el-button--primary', onClick: () => onSearch() },
-        { label: t('operation.reset'), className: 'el-button--primary', validateEvent: false, onClick: () => resetFilters() }
+        { label: t('operation.reset'), className: 'el-button--primary', validateEvent: false, onClick: () => onReset() }
     ]
 })
 
@@ -115,4 +126,9 @@ const onSearch = () => {
     const qs = processRequiredParams()
     run(qs)
 }
+
+const onReset = () => {
+    resetFilters()
+    goodsRef.value.onReset()
+}
 </script>

src/packages/pc/views/query/internal/offlinedelivery/components/cancel/index.vue

@@ -1,6 +1,6 @@
 <!-- 查询管理-内部订单查询-线下交收单查询-失败 -->
 <template>
-    <app-drawer :title="t('query.internal.offlinedelivery.cancel.title')" width="960" v-model:show="show">
+    <app-drawer :title="t('query.internal.offlinedelivery.cancel.title')" width="960" v-model:show="show" :refresh="refresh" :loading="loading">
         <app-table-details :data="data" :label-width="160" :cell-props="detailProps1" :column="2">
             <template #auditremark>
                 <el-input ref="inputRef" type="textarea" :rows="3" :placeholder="t('common.require')" v-model="formData.auditremark" />

src/packages/pc/views/query/internal/offlinedelivery/components/confirm/index.vue

@@ -1,10 +1,12 @@
 <!-- 查询管理-内部订单查询-线下交收单查询-确认 -->
 <template>
-    <app-drawer :title="t('query.internal.offlinedelivery.confirm.title')" width="960" v-model:show="show">
+    <app-drawer :title="t('query.internal.offlinedelivery.confirm.title')" width="960" v-model:show="show"
+        :refresh="refresh" :loading="loading">
         <app-table-details :data="data" :label-width="160" :cell-props="detailProps1" :column="2" />
         <template #footer>
             <el-button @click="onCancel(false)">{{ t('operation.close') }}</el-button>
-            <el-button type="primary" @click="onSubmit">{{ t('query.internal.offlinedelivery.confirm.submit') }}</el-button>
+            <el-button type="primary" @click="onSubmit">{{ t('query.internal.offlinedelivery.confirm.submit')
+            }}</el-button>
         </template>
     </app-drawer>
 </template>

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

@@ -2,57 +2,34 @@
 <template>
     <app-view>
         <template #header>
-            <el-form ref="formRef" class="el-form--filter" :model="queryParams" :rules="formRules"
-                :show-message="false">
-                <el-form-item :label="t('query.internal.order.marketid')" prop="marketId">
-                    <el-select v-model="queryParams.marketId" @change="onMarketChange">
-                        <template v-for="item in getMarketOptions([15, 97, 99], true)" :key="item.value">
-                            <el-option :label="item.label" :value="item.value" />
-                        </template>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.order.isHis')" prop="isHis">
-                    <el-select v-model="queryParams.isHis" @change="onTypeChange">
-                        <el-option :label="t('common.current')" :value="0" />
-                        <el-option :label="t('common.history')" :value="1" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.order.date')" prop="date" v-if="queryParams.isHis === 1">
-                    <el-date-picker type="daterange" v-model="dateValue" value-format="YYYY-MM-DD"
-                    :start-placeholder="t('common.start')" :end-placeholder="t('common.end')" @change="onDateChange" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.order.buildType')" prop="buildType">
-                    <el-select v-model="queryParams.buildType" clearable>
-                        <template v-for="item in buildtypeEnum.getEnumOptions()" :key="item.value">
-                            <el-option :label="item.label" :value="item.value" />
-                        </template>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.order.orderStatus')" prop="orderStatus">
-                    <el-select v-model="queryParams.orderStatus" clearable>
-                        <template v-for="item in orderstatusEnum.getEnumOptions()" :key="item.value">
-                            <el-option :label="item.label" :value="item.value" />
-                        </template>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.order.orderId')" prop="orderId">
-                    <el-input type="number" v-model="queryParams.orderId" :placeholder="t('common.pleaseenter')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.order.goodsId')" prop="goodsId">
-                    <el-input type="number" v-model="queryParams.goodsId" :placeholder="t('query.internal.order.tips3')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.order.accountName')" prop="accountName">
-                    <el-input type="number" v-model="queryParams.accountName" :placeholder="t('query.internal.order.tips2')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.order.excludeAccountIdsStr')" prop="excludeAccountIdsStr">
-                    <el-input v-model="queryParams.excludeAccountIdsStr" :placeholder="t('query.internal.order.tips1')"
-                        style="width: 260px;" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSearch(false)">{{ t('operation.search') }}</el-button>
-                    <el-button type="primary" @click="onSearch(true)">{{ t('operation.reset') }}</el-button>
-                </el-form-item>
-            </el-form>
+            <app-filter :option="filterOption" :rules="filterRules">
+                <!-- 查询类型 -->
+                <template #isHis="{ item }">
+                    <el-form-item :label="item.label">
+                        <el-select v-model="item.value">
+                            <el-option :label="t('common.current')" :value="0" />
+                            <el-option :label="t('common.history')" :value="1" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="t('query.internal.order.date')" prop="date" v-if="item.value === 1">
+                        <el-date-picker type="daterange" v-model="dateValue" value-format="YYYY-MM-DD"
+                            :start-placeholder="t('common.start')" :end-placeholder="t('common.end')" />
+                    </el-form-item>
+                </template>
+                <!-- 商品 -->
+                <template #goodsId="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-goods ref="goodsRef" v-model="item.value"
+                            :params="{ marketId: queryParams.marketId ?? -1, goodsStatusIds: '3,6,7' }" />
+                    </el-form-item>
+                </template>
+                <!-- 账户 -->
+                <template #accountId="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-account v-model="item.value" />
+                    </el-form-item>
+                </template>
+            </app-filter>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <template #headerLeft>
@@ -76,17 +53,21 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { ElMessage, FormRules } from 'element-plus'
 import { formatDate } from '@/filters'
 import { getBuyOrSellName } from '@/constants/order'
 import { useEnum } from '@/hooks/enum'
 import { useMarket } from '@/hooks/market'
 import { useRequest } from '@/hooks/request'
+import { useDataFilter } from '@/hooks/datatable-v2'
 import { useOperation } from '@/hooks/operation'
 import { queryCommissionSheet } from '@/services/api/order'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
+import AppSelectGoods from '@pc/components/modules/select-goods/index.vue'
+import AppSelectAccount from '@pc/components/modules/select-account/index.vue'
 import { i18n } from '@/stores'
 
 const { getMarketOptions, getMarketById } = useMarket()
@@ -96,13 +77,9 @@ const buildtypeEnum = useEnum('buildtype')
 const orderstatusEnum = useEnum('orderstatus')
 
 const { global: { t } } = i18n
-const formRef = ref<FormInstance>()
+const goodsRef = ref() // 商品组件实例
 const dateValue = ref<string[] | null>([])
 
-const queryParams = ref<Partial<Model.CommissionSheetReq>>({
-    isHis: 0
-})
-
 const { componentMap, componentId, record, openComponent, closeComponent, getActionButtons } = useOperation<Model.CommissionSheetRsp>({
     onClose: () => onSearch()
 })
@@ -133,62 +110,83 @@ const tableColumns = ref<Model.TableColumn[]>([
     { field: 'operate', label: 'common.operate', fixed: 'right' }
 ])
 
+const { queryParams, filterOption, getQueryParams, resetFilters } = useDataFilter<Model.CommissionSheetReq>({
+    filters: [
+        {
+            field: 'marketId',
+            label: t('query.internal.order.marketid'),
+            required: true,
+            options: () => getMarketOptions([15, 97, 99], true),
+            onChange: () => goodsRef.value.onReset()
+        },
+        {
+            field: 'goodsId',
+            label: t('query.internal.order.goodsId')
+        },
+        {
+            field: 'isHis',
+            label: t('query.internal.order.isHis'),
+            value: 0
+        },
+        {
+            field: 'buildType',
+            label: t('query.internal.order.buildType'),
+            options: () => buildtypeEnum.getEnumOptions()
+        },
+        {
+            field: 'orderStatus',
+            label: t('query.internal.order.orderStatus'),
+            options: () => orderstatusEnum.getEnumOptions()
+        },
+        {
+            field: 'orderId',
+            label: t('query.internal.order.orderId')
+        },
+        {
+            field: 'accountId',
+            label: t('query.internal.order.accountName')
+        },
+        {
+            field: 'excludeAccountIdsStr',
+            label: t('query.internal.order.excludeAccountIdsStr'),
+            placeholder: t('query.internal.order.tips1'),
+            width: 260
+        }
+    ],
+    buttons: [
+        { label: t('operation.search'), className: 'el-button--primary', onClick: () => onSearch() },
+        { label: t('operation.reset'), className: 'el-button--primary', validateEvent: false, onClick: () => onReset() }
+    ]
+})
+
 // 表单验证规则
-const formRules: FormRules = {
-    marketId: [{ required: true }],
+const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: (rule, value, callback) => {
-            if (dateValue.value && dateValue.value.length === 2) {
-                callback()
-            } else {
-                callback(new Error(t('common.pleasechoicedate')))
-            }
-        },
-    }],
-}
-
-// 选择市场
-const onMarketChange = (value: number) => {
-    const market = getMarketById(value)
-    queryParams.value.tradeMode = market?.trademode
+        validator: () => dateValue.value?.length === 2
+    }]
 }
 
-// 选择查询类型
-const onTypeChange = (value: number) => {
-    if (!value) {
-        dateValue.value = []
-        onDateChange()
-    }
-}
+const onSearch = (clear = false) => {
+    const qs = getQueryParams(clear)
 
-// 选择日期
-const onDateChange = () => {
     const [startDate, endDate] = dateValue.value || []
-    queryParams.value.startDateHis = startDate
-    queryParams.value.endDateHis = endDate
+    qs.startDateHis = startDate
+    qs.endDateHis = endDate
+
+    const market = getMarketById(qs.marketId)
+    qs.tradeMode = market?.trademode
+
+    run(qs)
 }
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        queryParams.value = {
-            isHis: 0,
-        }
-        dateValue.value = []
-    } else {
-        formRef.value?.validate((valid) => {
-            if (valid) {
-                run(queryParams.value)
-            }
-        })
-    }
+const onReset = () => {
+    resetFilters()
+    dateValue.value = []
+    goodsRef.value.onReset()
 }
 
 const openComponentOnClick = (code: string) => {
-    formRef.value?.validate((valid) => {
-        if (valid) {
-            openComponent(code)
-        }
-    })
+    //openComponent(code)
 }
 </script>

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

@@ -2,56 +2,40 @@
 <template>
     <app-view>
         <template #header>
-            <el-form ref="formRef" class="el-form--filter" :model="queryParams" :rules="formRules"
-                :show-message="false">
-                <el-form-item :label="t('query.internal.position.marketid')" 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">
-                            <el-option :label="item.label" :value="item.value" />
-                        </template>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.position.buyOrSell')" prop="buyOrSell">
-                    <el-select v-model="queryParams.buyOrSell" clearable>
-                        <template v-for="item in getBuyOrSellList()" :key="item.value">
-                            <el-option :label="item.label" :value="item.value" />
-                        </template>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.position.isHis')" prop="isHis">
-                    <el-select v-model="queryParams.isHis" @change="onTypeChange">
-                        <el-option :label="t('common.current')" :value="0" />
-                        <el-option :label="t('common.history')" :value="1" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.position.date')" prop="date" v-if="queryParams.isHis === 1">
-                    <el-date-picker type="daterange" v-model="dateValue" value-format="YYYY-MM-DD"
-                    :start-placeholder="t('common.start')" :end-placeholder="t('common.end')" @change="onDateChange" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.position.tradeId')" prop="tradeId">
-                    <el-input type="number" v-model="queryParams.tradeId" :placeholder="t('common.pleaseenter')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.position.goodsId')" prop="goodsId">
-                    <el-input type="number" v-model="queryParams.goodsId" :placeholder="t('query.internal.position.tips1')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.position.loginId')" prop="loginId">
-                    <el-input v-model="queryParams.loginId" :placeholder="t('common.pleaseenter')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.position.accountId')" prop="accountId">
-                    <el-input v-model="queryParams.accountId" :placeholder="t('query.internal.position.tips2')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.position.parentAreaId')" prop="parentAreaId">
-                    <el-input type="number" v-model="queryParams.parentAreaId" :placeholder="t('query.internal.position.tips3')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.position.validHolderQty')" prop="validHolderQty">
-                    <el-switch v-model="queryParams.validHolderQty" active-value="1" inactive-value="0" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSearch(false)">{{ t('operation.search') }}</el-button>
-                    <el-button type="primary" @click="onSearch(true)">{{ t('operation.reset') }}</el-button>
-                </el-form-item>
-            </el-form>
+            <app-filter :option="filterOption" :rules="filterRules">
+                <!-- 查询类型 -->
+                <template #isHis="{ item }">
+                    <el-form-item :label="item.label">
+                        <el-select v-model="item.value">
+                            <el-option :label="t('common.current')" :value="0" />
+                            <el-option :label="t('common.history')" :value="1" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="t('query.internal.order.date')" prop="date" v-if="item.value === 1">
+                        <el-date-picker type="daterange" v-model="dateValue" value-format="YYYY-MM-DD"
+                            :start-placeholder="t('common.start')" :end-placeholder="t('common.end')" />
+                    </el-form-item>
+                </template>
+                <!-- 商品 -->
+                <template #goodsId="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-goods ref="goodsRef" v-model="item.value"
+                            :params="{ marketId: queryParams.marketId ?? -1, goodsStatusIds: '3,6,7' }" />
+                    </el-form-item>
+                </template>
+                <!-- 所属机构 -->
+                <template #parentAreaId="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-member2 v-model="item.value" />
+                    </el-form-item>
+                </template>
+                <!-- 有效持仓 -->
+                <template #validHolderQty="{ item }">
+                    <el-form-item :label="item.label">
+                        <el-switch v-model="item.value" active-value="1" inactive-value="0" />
+                    </el-form-item>
+                </template>
+            </app-filter>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <template #headerLeft>
@@ -75,17 +59,21 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { ElMessage, FormRules } from 'element-plus'
 import { formatDate } from '@/filters'
 import { getBuyOrSellList, getBuyOrSellName } from '@/constants/order'
 import { useEnum } from '@/hooks/enum'
 import { useMarket } from '@/hooks/market'
 import { useRequest } from '@/hooks/request'
+import { useDataFilter } from '@/hooks/datatable-v2'
 import { useOperation } from '@/hooks/operation'
 import { queryPositionSheet } from '@/services/api/order'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
+import AppSelectGoods from '@pc/components/modules/select-goods/index.vue'
+import AppSelectMember2 from '@pc/components/modules/select-member2/index.vue'
 import { i18n } from '@/stores'
 
 const { getMarketOptions } = useMarket()
@@ -94,13 +82,9 @@ const { getMarketOptions } = useMarket()
 const usertype2Enum = useEnum('usertype2')
 
 const { global: { t } } = i18n
-const formRef = ref<FormInstance>()
-const dateValue = ref<string[] | null>([])
 
-const queryParams = ref<Partial<Model.PositionSheetReq>>({
-    isHis: 0,
-    validHolderQty: '1'
-})
+const goodsRef = ref() // 商品组件实例
+const dateValue = ref<string[] | null>([])
 
 const { componentMap, componentId, record, openComponent, closeComponent, getActionButtons } = useOperation<Model.PositionSheetRsp>({
     onClose: () => onSearch()
@@ -139,57 +123,81 @@ const tableColumns = ref<Model.TableColumn[]>([
     { field: 'operate', label: 'common.operate', fixed: 'right' }
 ])
 
+const { queryParams, filterOption, getQueryParams, resetFilters } = useDataFilter<Model.PositionSheetReq>({
+    filters: [
+        {
+            field: 'marketId',
+            label: t('query.internal.position.marketid'),
+            required: true,
+            options: () => getMarketOptions([15, 40, 41, 48, 51, 71, 97, 99], true),
+            onChange: () => goodsRef.value.onReset()
+        },
+        {
+            field: 'goodsId',
+            label: t('query.internal.position.goodsId')
+        },
+        {
+            field: 'buyOrSell',
+            label: t('query.internal.position.buyOrSell'),
+            options: () => getBuyOrSellList()
+        },
+        {
+            field: 'isHis',
+            label: t('query.internal.position.isHis'),
+            value: 0
+        },
+        {
+            field: 'tradeId',
+            label: t('query.internal.position.tradeId')
+        },
+        {
+            field: 'loginId',
+            label: t('query.internal.position.loginId')
+        },
+        {
+            field: 'accountId',
+            label: t('query.internal.position.accountId'),
+            placeholder: t('query.internal.position.tips2')
+        },
+        {
+            field: 'parentAreaId',
+            label: t('query.internal.position.parentAreaId')
+        },
+        {
+            field: 'validHolderQty',
+            label: t('query.internal.position.validHolderQty'),
+            value: '1'
+        },
+    ],
+    buttons: [
+        { label: t('operation.search'), className: 'el-button--primary', onClick: () => onSearch() },
+        { label: t('operation.reset'), className: 'el-button--primary', validateEvent: false, onClick: () => onReset() }
+    ]
+})
+
 // 表单验证规则
-const formRules: FormRules = {
-    marketId: [{ required: true }],
+const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: (rule, value, callback) => {
-            if (dateValue.value && dateValue.value.length === 2) {
-                callback()
-            } else {
-                callback(new Error(t('common.pleasechoicedate')))
-            }
-        },
-    }],
-}
-
-// 选择单据类型
-const onTypeChange = (value: number) => {
-    if (!value) {
-        dateValue.value = []
-        onDateChange()
-    }
+        validator: () => dateValue.value?.length === 2
+    }]
 }
 
-// 选择日期
-const onDateChange = () => {
+const onSearch = (clear = false) => {
+    const qs = getQueryParams(clear)
     const [startDate, endDate] = dateValue.value || []
-    queryParams.value.startDate = startDate
-    queryParams.value.endDate = endDate
+    qs.startDate = startDate
+    qs.endDate = endDate
+    run(qs)
 }
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        queryParams.value = {
-            isHis: 0,
-            validHolderQty: '1'
-        }
-        dateValue.value = []
-    } else {
-        formRef.value?.validate((valid) => {
-            if (valid) {
-                run(queryParams.value)
-            }
-        })
-    }
+const onReset = () => {
+    resetFilters()
+    dateValue.value = []
+    goodsRef.value.onReset()
 }
 
 const openComponentOnClick = (code: string) => {
-    formRef.value?.validate((valid) => {
-        if (valid) {
-            openComponent(code)
-        }
-    })
+    //openComponent(code)
 }
 </script>

src/packages/pc/views/query/internal/positionsumm/index.vue

@@ -2,33 +2,21 @@
 <template>
     <app-view>
         <template #header>
-            <el-form ref="formRef" class="el-form--filter" :model="queryParams" :rules="formRules"
-                :show-message="false">
-                <el-form-item :label="t('query.internal.positionsumm.marketid')" 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">
-                            <el-option :label="item.label" :value="item.value" />
-                        </template>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.positionsumm.goodsid')" prop="goodsid">
-                    <el-input type="number" v-model="queryParams.goodsid" :placeholder="t('query.internal.positionsumm.tips1')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.positionsumm.accname')" prop="accname">
-                    <el-input v-model="queryParams.accname" :placeholder="t('query.internal.positionsumm.tips2')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.positionsumm.areauserid')" prop="areauserid" v-if="userStore.userInfo.releType === 1">
-                    <el-input type="number" v-model="queryParams.areauserid" :placeholder="t('query.internal.positionsumm.tips3')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.positionsumm.loginid')" prop="loginid">
-                    <el-input v-model="queryParams.loginid" :placeholder="t('common.pleaseenter')" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSearch(false)">{{ t('operation.search') }}</el-button>
-                    <el-button type="primary" @click="onSearch(true)">{{ t('operation.reset') }}</el-button>
-                </el-form-item>
-            </el-form>
+            <app-filter :option="filterOption">
+                <!-- 商品 -->
+                <template #goodsid="{ item }">
+                    <el-form-item :label="item.label" prop="goodsid">
+                        <app-select-goods ref="goodsRef" v-model="item.value"
+                            :params="{ marketId: queryParams.marketid ?? -1, goodsStatusIds: '3,6,7' }" />
+                    </el-form-item>
+                </template>
+                <!-- 机构 -->
+                <template #areauserid="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-member v-model="item.value" />
+                    </el-form-item>
+                </template>
+            </app-filter>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <template #headerLeft>
@@ -47,24 +35,26 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { getBuyOrSellName } from '@/constants/order'
 import { useMarket } from '@/hooks/market'
 import { useRequest } from '@/hooks/request'
+import { useDataFilter } from '@/hooks/datatable-v2'
 import { useOperation } from '@/hooks/operation'
 import { queryPositionSumSheet } from '@/services/api/order'
 import { i18n, useUserStore } from '@/stores'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
+import AppSelectGoods from '@pc/components/modules/select-goods/index.vue'
+import AppSelectMember from '@pc/components/modules/select-member/index.vue'
 
 const { getMarketOptions } = useMarket()
 
 const userStore = useUserStore()
 const { global: { t } } = i18n
-const formRef = ref<FormInstance>()
-
-const queryParams = ref<Partial<Model.PositionSumSheetReq>>({})
+const goodsRef = ref() // 商品组件实例
 
 const { componentMap, componentId, record, openComponent, closeComponent, getActionButtons } = useOperation<Model.PositionSumSheetRsp>({
     onClose: () => onSearch()
@@ -98,28 +88,51 @@ const tableColumns = ref<Model.TableColumn[]>([
     { field: 'floatPL', label: 'query.internal.positionsumm.floatPL' }
 ])
 
-// 表单验证规则
-const formRules: FormRules = {
-    marketid: [{ required: true }],
-}
+const { queryParams, filterOption, getQueryParams, resetFilters } = useDataFilter<Model.PositionSumSheetReq>({
+    filters: [
+        {
+            field: 'marketid',
+            label: t('query.internal.positionsumm.marketid'),
+            required: true,
+            options: () => getMarketOptions([15, 40, 41, 48, 51, 71, 97, 99], true),
+            onChange: () => goodsRef.value.onReset()
+        },
+        {
+            field: 'goodsid',
+            label: t('query.internal.positionsumm.goodsid')
+        },
+        {
+            field: 'accname',
+            label: t('query.internal.positionsumm.accname'),
+            placeholder: t('query.internal.positionsumm.tips2')
+        },
+        {
+            field: 'areauserid',
+            label: t('query.internal.positionsumm.areauserid'),
+            visibility: () => userStore.userInfo.releType === 1
+        },
+        {
+            field: 'loginid',
+            label: t('query.internal.positionsumm.loginid')
+        },
+    ],
+    buttons: [
+        { label: t('operation.search'), className: 'el-button--primary', onClick: () => onSearch() },
+        { label: t('operation.reset'), className: 'el-button--primary', validateEvent: false, onClick: () => onReset() }
+    ]
+})
 
 const onSearch = (clear = false) => {
-    if (clear) {
-        queryParams.value = {}
-    } else {
-        formRef.value?.validate((valid) => {
-            if (valid) {
-                run(queryParams.value)
-            }
-        })
-    }
+    const qs = getQueryParams(clear)
+    run(qs)
+}
+
+const onReset = () => {
+    resetFilters()
+    goodsRef.value.onReset()
 }
 
 const openComponentOnClick = (code: string) => {
-    formRef.value?.validate((valid) => {
-        if (valid) {
-            openComponent(code)
-        }
-    })
+    //openComponent(code)
 }
 </script>

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

@@ -2,73 +2,40 @@
 <template>
     <app-view>
         <template #header>
-            <el-form ref="formRef" class="el-form--filter" :model="queryParams" :rules="formRules"
-                :show-message="false">
-                <el-form-item :label="t('query.internal.trade.marketid')" prop="marketId">
-                    <el-select v-model="queryParams.marketId">
-                        <template v-for="item in getMarketOptions([15, 97, 99], true)" :key="item.value">
-                            <el-option :label="item.label" :value="item.value" />
-                        </template>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.trade.isHis')" prop="isHis">
-                    <el-select v-model="queryParams.isHis" @change="onTypeChange">
-                        <el-option :label="t('common.current')" :value="0" />
-                        <el-option :label="t('common.history')" :value="1" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.trade.date')" prop="date" v-if="queryParams.isHis === 1">
-                    <el-date-picker type="daterange" v-model="dateValue" value-format="YYYY-MM-DD"
-                    :start-placeholder="t('common.start')" :end-placeholder="t('common.end')" @change="onDateChange" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.trade.buyOrSell')" prop="buyOrSell">
-                    <el-select v-model="queryParams.buyOrSell" clearable>
-                        <template v-for="item in getBuyOrSellList()" :key="item.value">
-                            <el-option :label="item.label" :value="item.value" />
-                        </template>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.trade.buildType')" prop="buildType">
-                    <el-select v-model="queryParams.buildType" clearable>
-                        <template v-for="item in buildtypeEnum.getEnumOptions()" :key="item.value">
-                            <el-option :label="item.label" :value="item.value" />
-                        </template>
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.trade.tradeTypes')" prop="tradeTypes">
-                    <el-select v-model="queryParams.tradeTypes" clearable>
-                        <el-option :label="t('query.internal.trade.tradeTypes1')" value="1,2,10" />
-                        <el-option :label="t('query.internal.trade.tradeTypes2')" value="3,4" />
-                        <el-option :label="t('query.internal.trade.tradeTypes3')" value="6" />
-                        <el-option :label="t('query.internal.trade.tradeTypes4')" value="7,9,11" />
-                        <el-option :label="t('query.internal.trade.tradeTypes5')" value="29" />
-                        <el-option :label="t('query.internal.trade.tradeTypes6')" value="12" />
-                        <el-option :label="t('query.internal.trade.tradeTypes7')" value="5,8,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.trade.feeSearchType')" prop="feeSearchType">
-                    <el-select v-model="queryParams.feeSearchType" clearable>
-                        <el-option :label="t('query.internal.trade.feeSearchType1')" :value="1" />
-                        <el-option :label="t('query.internal.trade.feeSearchType2')" :value="2" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item :label="t('query.internal.trade.tradeId')" prop="tradeId">
-                    <el-input type="number" v-model="queryParams.tradeId" :placeholder="t('common.pleaseenter')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.trade.goodsId')" prop="goodsId">
-                    <el-input type="number" v-model="queryParams.goodsId" :placeholder="t('query.internal.trade.tips1')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.trade.accountId')" prop="accountId">
-                    <el-input type="number" v-model="queryParams.accountId" :placeholder="t('query.internal.trade.tips2')" />
-                </el-form-item>
-                <el-form-item :label="t('query.internal.trade.areaUserName')" prop="areaUserName">
-                    <el-input v-model="queryParams.areaUserName" :placeholder="t('query.internal.trade.tips3')" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="onSearch(false)">{{ t('operation.search') }}</el-button>
-                    <el-button type="primary" @click="onSearch(true)">{{ t('operation.reset') }}</el-button>
-                </el-form-item>
-            </el-form>
+            <app-filter :option="filterOption" :rules="filterRules">
+                <!-- 查询类型 -->
+                <template #isHis="{ item }">
+                    <el-form-item :label="item.label">
+                        <el-select v-model="item.value">
+                            <el-option :label="t('common.current')" :value="0" />
+                            <el-option :label="t('common.history')" :value="1" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item :label="t('query.internal.order.date')" prop="date" v-if="item.value === 1">
+                        <el-date-picker type="daterange" v-model="dateValue" value-format="YYYY-MM-DD"
+                            :start-placeholder="t('common.start')" :end-placeholder="t('common.end')" />
+                    </el-form-item>
+                </template>
+                <!-- 商品 -->
+                <template #goodsId="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-goods ref="goodsRef" v-model="item.value"
+                            :params="{ marketId: queryParams.marketId ?? -1, goodsStatusIds: '3,6,7' }" />
+                    </el-form-item>
+                </template>
+                <!-- 账户 -->
+                <template #accountId="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-account v-model="item.value" />
+                    </el-form-item>
+                </template>
+                <!-- 所属机构 -->
+                <template #areaUserName="{ item }">
+                    <el-form-item :label="item.label">
+                        <app-select-member2 v-model="item.value" />
+                    </el-form-item>
+                </template>
+            </app-filter>
         </template>
         <app-table :data="dataList" :columns="tableColumns" :loading="loading">
             <template #headerLeft>
@@ -92,17 +59,22 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { ElMessage, FormRules } from 'element-plus'
 import { formatDate } from '@/filters'
 import { getBuyOrSellList, getBuyOrSellName } from '@/constants/order'
 import { useEnum } from '@/hooks/enum'
 import { useMarket } from '@/hooks/market'
 import { useRequest } from '@/hooks/request'
+import { useDataFilter } from '@/hooks/datatable-v2'
 import { useOperation } from '@/hooks/operation'
 import { queryContractSheet } from '@/services/api/order'
 import AppTable from '@pc/components/base/table/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
 import AppOperation from '@pc/components/base/operation/index.vue'
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
+import AppSelectGoods from '@pc/components/modules/select-goods/index.vue'
+import AppSelectAccount from '@pc/components/modules/select-account/index.vue'
+import AppSelectMember2 from '@pc/components/modules/select-member2/index.vue'
 import { i18n } from '@/stores'
 
 const { getMarketOptions } = useMarket()
@@ -111,13 +83,9 @@ const tradetypeEnum = useEnum('tradetype') // 成交类别
 
 const { global: { t } } = i18n
 
-const formRef = ref<FormInstance>()
+const goodsRef = ref() // 商品组件实例
 const dateValue = ref<string[] | null>([])
 
-const queryParams = ref<Partial<Model.ContractSheetReq>>({
-    isHis: 0
-})
-
 const { componentMap, componentId, record, openComponent, closeComponent, getActionButtons } = useOperation<Model.ContractSheetRsp>({
     onClose: () => onSearch()
 })
@@ -152,56 +120,97 @@ const tableColumns = ref<Model.TableColumn[]>([
     { field: 'operate', label: 'common.operate', fixed: 'right' }
 ])
 
+const { queryParams, filterOption, getQueryParams, resetFilters } = useDataFilter<Model.ContractSheetReq>({
+    filters: [
+        {
+            field: 'marketId',
+            label: t('query.internal.trade.marketid'),
+            required: true,
+            options: () => getMarketOptions([15, 97, 99], true),
+            onChange: () => goodsRef.value.onReset()
+        },
+        {
+            field: 'goodsId',
+            label: t('query.internal.trade.goodsId')
+        },
+        {
+            field: 'buyOrSell',
+            label: t('query.internal.trade.buyOrSell'),
+            options: () => getBuyOrSellList()
+        },
+        {
+            field: 'isHis',
+            label: t('query.internal.order.isHis'),
+            value: 0
+        },
+        {
+            field: 'buildType',
+            label: t('query.internal.trade.buildType'),
+            options: () => buildtypeEnum.getEnumOptions()
+        },
+        {
+            field: 'tradeTypes',
+            label: t('query.internal.trade.tradeTypes'),
+            options: () => [
+                { label: t('query.internal.trade.tradeTypes1'), value: '1,2,10' },
+                { label: t('query.internal.trade.tradeTypes2'), value: '3,4' },
+                { label: t('query.internal.trade.tradeTypes3'), value: '6' },
+                { label: t('query.internal.trade.tradeTypes4'), value: '7,9,11' },
+                { label: t('query.internal.trade.tradeTypes5'), value: '29' },
+                { label: t('query.internal.trade.tradeTypes6'), value: '12' },
+                { label: t('query.internal.trade.tradeTypes7'), value: '5,8,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28' },
+            ]
+        },
+        {
+            field: 'feeSearchType',
+            label: t('query.internal.trade.feeSearchType'),
+            options: () => [
+                { label: t('query.internal.trade.feeSearchType1'), value: 1 },
+                { label: t('query.internal.trade.feeSearchType2'), value: 2 },
+            ]
+        },
+        {
+            field: 'tradeId',
+            label: t('query.internal.trade.tradeId')
+        },
+        {
+            field: 'accountId',
+            label: t('query.internal.trade.accountId')
+        },
+        {
+            field: 'areaUserName',
+            label: t('query.internal.trade.areaUserName')
+        }
+    ],
+    buttons: [
+        { label: t('operation.search'), className: 'el-button--primary', onClick: () => onSearch() },
+        { label: t('operation.reset'), className: 'el-button--primary', validateEvent: false, onClick: () => onReset() }
+    ]
+})
+
 // 表单验证规则
-const formRules: FormRules = {
-    marketId: [{ required: true }],
+const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: (rule, value, callback) => {
-            if (dateValue.value && dateValue.value.length === 2) {
-                callback()
-            } else {
-                callback(new Error(t('common.pleasechoicedate')))
-            }
-        },
-    }],
-}
-
-// 选择查询类型
-const onTypeChange = (value: number) => {
-    if (!value) {
-        dateValue.value = []
-        onDateChange()
-    }
+        validator: () => dateValue.value?.length === 2
+    }]
 }
 
-// 选择日期
-const onDateChange = () => {
+const onSearch = (clear = false) => {
+    const qs = getQueryParams(clear)
     const [startDate, endDate] = dateValue.value || []
-    queryParams.value.startDateHis = startDate
-    queryParams.value.endDateHis = endDate
+    qs.startDateHis = startDate
+    qs.endDateHis = endDate
+    run(qs)
 }
 
-const onSearch = (clear = false) => {
-    if (clear) {
-        queryParams.value = {
-            isHis: 0,
-        }
-        dateValue.value = []
-    } else {
-        formRef.value?.validate((valid) => {
-            if (valid) {
-                run(queryParams.value)
-            }
-        })
-    }
+const onReset = () => {
+    resetFilters()
+    dateValue.value = []
+    goodsRef.value.onReset()
 }
 
 const openComponentOnClick = (code: string) => {
-    formRef.value?.validate((valid) => {
-        if (valid) {
-            openComponent(code)
-        }
-    })
+    //openComponent(code)
 }
 </script>

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

@@ -103,9 +103,7 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }
 

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

@@ -102,9 +102,7 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }
 

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

@@ -96,9 +96,7 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }
 

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

@@ -93,9 +93,7 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }
 
@@ -154,7 +152,6 @@ const onReset = () => {
 }
 
 const openComponentOnClick = (code: string) => {
-    queryParams.value = processRequiredParams()
     openComponent(code)
 }
 </script>

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

@@ -85,9 +85,7 @@ const tableColumns = ref<Model.TableColumn[]>([
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }
 

src/packages/pc/views/report/bank/index.vue

@@ -76,9 +76,7 @@ const tableColumns = ref<Model.TableColumn[]>([
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }
 

src/packages/pc/views/report/fee/index.vue

@@ -70,9 +70,7 @@ const tableColumns = ref<Model.TableColumn[]>([
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }
 

src/packages/pc/views/report/institution/index.vue

@@ -194,9 +194,7 @@ const tableColumns = ref<Model.TableColumn[]>([
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }
 

src/packages/pc/views/report/recalculate/index.vue

@@ -58,9 +58,7 @@ useOperation<Model.CommissionSheetRsp>({
 const filterRules: FormRules = {
     date: [{
         required: true,
-        validator: () => {
-            return !!dateValue.value && dateValue.value.length === 2
-        }
+        validator: () => dateValue.value?.length === 2
     }]
 }