xxxxx

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

@@ -2,9 +2,55 @@
 <template>
     <app-view>
         <template #header>
-            <app-filter :options="filterOptons" />
+            <el-form ref="formRef" class="el-form--filter" :model="queryParams" :rules="formRules"
+            :show-message="false">
+            <el-form-item label="报表类型" prop="cycletype">
+                    <el-select v-model="queryParams.cycletype" @change="onTypeChange">
+                        <el-option v-for="item in getReportTypeList()" :key="item.value" :label="item.label"
+                            :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="开始日期" prop="reckondate">
+                    <el-date-picker :type="dateType" v-model="queryParams.reckondate" :format="dateFormat"
+                    :value-format="dateFormat" placeholder="请选择日期"/>
+                </el-form-item>
+                <el-form-item label="结束日期" prop="reckondateend">
+                    <el-date-picker :type="dateType" v-model="queryParams.reckondateend" :format="dateFormat"
+                    :value-format="dateFormat" placeholder="请选择日期"/>
+                </el-form-item>
+                <el-form-item label="开始季度" prop="quarter" v-if="queryParams.cycletype === ReportType.Quarter">
+                    <el-select v-model="queryParams.quarter">
+                        <el-option v-for="item in getQuarterList()" :key="item.value" :label="item.label"
+                            :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="开始季度" prop="quarter" v-if="queryParams.cycletype === ReportType.Quarter">
+                    <el-select v-model="queryParams.quarterend">
+                        <el-option v-for="item in getQuarterList()" :key="item.value" :label="item.label"
+                            :value="item.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="资金账户" prop="accountid">
+                    <app-select-account v-model="queryParams.accountid" @change="onAccountChange" />
+                </el-form-item>
+                <el-form-item label="是否包含子机构" prop="isson">
+                    <el-checkbox v-model="isson" size="small" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="onSearch">查询</el-button>
+                </el-form-item>
+            </el-form>
+            <div class="report-account__info" v-if="selectedAccount">
+                <span>账户：{{ selectedAccount.relatedname }}</span>
+                <span>资金账户：{{ selectedAccount.accountid }}</span>
+                <span>登录账号：{{ selectedAccount.invloginids }}</span>
+            </div>
         </template>
         <app-table :data="dataList" showIndex v-model:columns="tableColumns" :loading="loading">
+            <template #headerLeft>
+                <app-operation :data-list="getFilteredButtons(['query_report_broker_export'])"
+                    @click="openComponentOnClick" />
+            </template>
             <template #footer>
                 <app-pagination :total="total" v-model:page-size="pageSize" v-model:page-index="pageIndex"
                     @change="onSearch" />
@@ -16,28 +62,39 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
-import { ElMessage } from 'element-plus'
+import { shallowRef, reactive, ref, computed } from 'vue'
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
 import { useRequest } from '@/hooks/request'
-import { useDataFilter } from '@/hooks/datatable'
 import { orgReportQuery } from '@/services/api/report'
 import { useOperation } from '@/hooks/operation'
+import { formatDate } from '@/filters'
 import { useUserStore } from '@/stores'
-import { getReportTypeList } from '@/constants/report'
+import { getReportTypeList, ReportType, getQuarterList } from '@/constants/report'
+import { queryCommonFlag } from '@/services/api/account'
 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'
+import AppSelectAccount from '@pc/components/modules/select-account/index.vue'
 
-const queryParams = shallowRef<Model.OrgReportQueryReq>()
-const { filterOptons, getQueryParams } = useDataFilter<Model.OrgReportQueryReq>()
 const userStore = useUserStore()
+const formRef = shallowRef<FormInstance>()
+const isson = ref(true)
+const selectedAccount = shallowRef<Model.TAAccountChildrenSelectRsp>()
+
+const queryParams = reactive<Model.OrgReportQueryReq>({
+    orgztypes: userStore.userInfo.orgztypes,
+    cycletype: 0,
+    reckondate: ''
+})
 
-const { componentMap, componentId, record, closeComponent } = useOperation<Model.OrgReportQueryReq>({
+const { componentMap, componentId, record, openComponent, closeComponent, getFilteredButtons } = useOperation<Model.OrgReportQueryRsp>({
     onClose: () => onSearch()
 })
 
 const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(orgReportQuery, {
     params: {
+        cycletype: 0,
+        reckondate: '',
         pageNum: 1,
         pageSize: 20,
         orgztypes: userStore.userInfo.orgztypes
@@ -47,6 +104,58 @@ const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(orgRep
     }
 })
 
+useRequest(queryCommonFlag, {
+    onSuccess: (res) => {
+        queryParams.reckondate = formatDate(res.data.tradedate, 'YYYY-MM-DD')
+    }
+})
+
+// 日期类型
+const dateType = computed(() => {
+    switch (queryParams.cycletype) {
+        case ReportType.Week:
+            return 'week'
+        case ReportType.Month:
+            return 'month'
+        case ReportType.Quarter:
+        case ReportType.Year:
+            return 'year'
+        default:
+            return 'date'
+    }
+})
+
+
+// 日期格式
+const dateFormat = computed(() => {
+    switch (queryParams.cycletype) {
+        case ReportType.Month:
+            return 'YYYY-MM'
+        case ReportType.Quarter:
+        case ReportType.Year:
+            return 'YYYY'
+        default:
+            return 'YYYY-MM-DD'
+    }
+})
+
+const onTypeChange = (value: ReportType) => {
+    const dateValue = queryParams.reckondate
+    if (dateValue) {
+        switch (value) {
+            case ReportType.Month:
+            queryParams.reckondate = formatDate(dateValue, 'YYYY-MM')
+                break
+            case ReportType.Quarter:
+            case ReportType.Year:
+            queryParams.reckondate = formatDate(dateValue, 'YYYY')
+                break
+            default:
+            queryParams.reckondate = formatDate(dateValue, 'YYYY-MM-DD')
+        }
+    }
+}
+
 const tableColumns = shallowRef<Model.TableColumn[]>([
     { field: 'cycleTime', label: '日期' },
     { field: 'accountName', label: '经纪会员' },
@@ -64,24 +173,32 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { field: 'investorSellHoldQty', label: '卖持仓数量' }
 ])
 
-filterOptons.selectList = [
-    {
-        key: 'cycletype',
-        label: '报表类型',
-        selectedValue: 0,
-        locked: true,
-        options: getReportTypeList(),
-    }
-]
+// 表单验证规则
+const formRules: FormRules = {
+    reckondate: [{ required: true }],
+    reckondateend: [{ required: true }],
+}
 
-filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
-]
+const onAccountChange = (item?: Model.TAAccountChildrenSelectRsp) => {
+    selectedAccount.value = item
+}
 
 const onSearch = (clear = false) => {
-    const qs = getQueryParams(clear)
-    run(qs)
+    processRequiredParams((qs) => run(qs), clear)
+}
+
+const openComponentOnClick = (code: string) => {
+    processRequiredParams(() => openComponent(code))
+}
+
+// 处理请求参数
+const processRequiredParams = (callback: (params: Model.OrgReportQueryReq) => void, clear = false) => {
+    queryParams.type = isson.value ? 1 : 0
+    formRef.value?.validate((valid) => {
+        if (valid) {
+            callback(queryParams)
+        }
+    })
 }
 
 </script>

src/types/model/report.d.ts

@@ -22,6 +22,7 @@ declare namespace Model {
         quarter?: number // 开始季度
         quarterend?: number // 结束季度
         reckondate?: string // 开始时间
+        reckondateend?: string // 结束时间
         type?: number // 是否包括子机构 0否 1是
         userid?: number
     }