|
@@ -2,31 +2,31 @@
|
|
|
<template>
|
|
<template>
|
|
|
<app-view calss="report-account">
|
|
<app-view calss="report-account">
|
|
|
<template #header>
|
|
<template #header>
|
|
|
- <el-form ref="formRef" class="report-account__filter" :model="params" :rules="formRules"
|
|
|
|
|
- :show-message="false">
|
|
|
|
|
- <el-form-item :label="t('report.account.cycletype')" prop="cycletype">
|
|
|
|
|
- <el-select v-model="params.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="t('report.account.cycletime')" prop="cycletime">
|
|
|
|
|
- <el-date-picker :type="dateType" v-model="params.cycletime" :format="dateFormat"
|
|
|
|
|
- :value-format="dateFormat" :placeholder="t('common.pleasechoice')" />
|
|
|
|
|
- </el-form-item>
|
|
|
|
|
- <el-form-item :label="t('report.account.quarter')" prop="quarter" v-if="params.cycletype === ReportType.Quarter">
|
|
|
|
|
- <el-select v-model="params.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="t('report.account.accountid')" prop="accountid">
|
|
|
|
|
- <app-select-account v-model="params.accountid" @change="onAccountChange" />
|
|
|
|
|
- </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">
|
|
|
|
|
+ <template #cycletime="{ item }">
|
|
|
|
|
+ <el-form-item :label="item.label" prop="cycletime">
|
|
|
|
|
+ <el-date-picker :type="dateType" v-model="item.value" :format="dateFormat"
|
|
|
|
|
+ :value-format="dateFormat" :placeholder="t('common.pleasechoice')" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template #quarter="{ item }">
|
|
|
|
|
+ <el-form-item :label="item.label" prop="quarter"
|
|
|
|
|
+ v-if="queryParams.cycletype === ReportType.Quarter">
|
|
|
|
|
+ <el-select v-model="item.value">
|
|
|
|
|
+ <el-option v-for="item in getQuarterList()" :key="item.value" :label="item.label"
|
|
|
|
|
+ :value="item.value" />
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ {{ (item.value = undefined) }}
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template #accountid="{ item }">
|
|
|
|
|
+ <el-form-item :label="item.label" prop="accountid">
|
|
|
|
|
+ <app-select-account v-model="item.value" @change="onAccountChange" />
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </app-filter>
|
|
|
<div class="report-account__info" v-if="selectedAccount">
|
|
<div class="report-account__info" v-if="selectedAccount">
|
|
|
<span>{{ t('report.account.accountid1') }}{{ selectedAccount.relatedname }}</span>
|
|
<span>{{ t('report.account.accountid1') }}{{ selectedAccount.relatedname }}</span>
|
|
|
<span>{{ t('report.account.accountid') }}{{ selectedAccount.accountid }}</span>
|
|
<span>{{ t('report.account.accountid') }}{{ selectedAccount.accountid }}</span>
|
|
@@ -43,35 +43,71 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, reactive, defineAsyncComponent, computed } from 'vue'
|
|
|
|
|
-import { FormInstance, FormRules } from 'element-plus'
|
|
|
|
|
|
|
+import { shallowRef, defineAsyncComponent, computed } from 'vue'
|
|
|
import { useRoute } from 'vue-router'
|
|
import { useRoute } from 'vue-router'
|
|
|
import { findTreeNodeById, formatDate } from '@/filters'
|
|
import { findTreeNodeById, formatDate } from '@/filters'
|
|
|
|
|
+import { useDataFilter } from '@/hooks/datatable-v2'
|
|
|
import { ReportType, getReportTypeList, getQuarterList } from '@/constants/report'
|
|
import { ReportType, getReportTypeList, getQuarterList } from '@/constants/report'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
import { useRequest } from '@/hooks/request'
|
|
|
import { queryCommonFlag } from '@/services/api/account'
|
|
import { queryCommonFlag } from '@/services/api/account'
|
|
|
import { i18n, useRouterStore } from '@/stores'
|
|
import { i18n, useRouterStore } from '@/stores'
|
|
|
import AppSelectAccount from '@pc/components/modules/select-account/index.vue'
|
|
import AppSelectAccount from '@pc/components/modules/select-account/index.vue'
|
|
|
|
|
+import AppFilter from '@pc/components/base/table-filter-v2/index.vue'
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
const route = useRoute()
|
|
|
const routerStore = useRouterStore()
|
|
const routerStore = useRouterStore()
|
|
|
const { global: { t } } = i18n
|
|
const { global: { t } } = i18n
|
|
|
-const formRef = shallowRef<FormInstance>()
|
|
|
|
|
const componentRef = shallowRef()
|
|
const componentRef = shallowRef()
|
|
|
const componentIndex = shallowRef(0)
|
|
const componentIndex = shallowRef(0)
|
|
|
const selectedAccount = shallowRef<Model.TAAccountChildrenSelectRsp>()
|
|
const selectedAccount = shallowRef<Model.TAAccountChildrenSelectRsp>()
|
|
|
|
|
+const params = shallowRef<Partial<Model.TaaccountReportReq>>({})
|
|
|
|
|
|
|
|
-const params = reactive<Model.TaaccountReportReq>({
|
|
|
|
|
- accountid: 0,
|
|
|
|
|
- cycletime: '',
|
|
|
|
|
- cycletype: 0,
|
|
|
|
|
- pageNum: 1,
|
|
|
|
|
- pageSize: 20
|
|
|
|
|
|
|
+const { children = [] } = findTreeNodeById(routerStore.userRoutes, String(route.name), { id: 'resourceCode' }) ?? {}
|
|
|
|
|
+
|
|
|
|
|
+const loadComponent = () => {
|
|
|
|
|
+ const item = children[componentIndex.value]
|
|
|
|
|
+ if (item) {
|
|
|
|
|
+ const componentString = item.component.replace(/^\/+/, '')
|
|
|
|
|
+ const componentPath = componentString.replace(/\.\w+$/, '')
|
|
|
|
|
+ return defineAsyncComponent(() => import('/' + process.env.VUE_APP_ROOT + componentPath + '.vue'))
|
|
|
|
|
+ }
|
|
|
|
|
+ return undefined
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const { queryParams, filterOption, getQueryParams } = useDataFilter<Model.TaaccountReportReq>({
|
|
|
|
|
+ filters: [
|
|
|
|
|
+ {
|
|
|
|
|
+ field: 'cycletype',
|
|
|
|
|
+ label: t('report.account.cycletype'),
|
|
|
|
|
+ value: 0,
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ options: () => getReportTypeList()
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: 'cycletime',
|
|
|
|
|
+ label: t('report.account.cycletime'),
|
|
|
|
|
+ required: true
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: 'quarter',
|
|
|
|
|
+ label: t('report.account.quarter'),
|
|
|
|
|
+ required: true
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: 'accountid',
|
|
|
|
|
+ label: t('report.account.accountid'),
|
|
|
|
|
+ required: true
|
|
|
|
|
+ }
|
|
|
|
|
+ ],
|
|
|
|
|
+ buttons: [
|
|
|
|
|
+ { label: '查询', className: 'el-button--primary', onClick: () => onSearch() },
|
|
|
|
|
+ //{ label: '重置', className: 'el-button--primary', validateEvent: false, onClick: () => resetFilters() }
|
|
|
|
|
+ ]
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 日期类型
|
|
// 日期类型
|
|
|
const dateType = computed(() => {
|
|
const dateType = computed(() => {
|
|
|
- switch (params.cycletype) {
|
|
|
|
|
|
|
+ switch (queryParams.value.cycletype) {
|
|
|
case ReportType.Week:
|
|
case ReportType.Week:
|
|
|
return 'week'
|
|
return 'week'
|
|
|
case ReportType.Month:
|
|
case ReportType.Month:
|
|
@@ -86,7 +122,7 @@ const dateType = computed(() => {
|
|
|
|
|
|
|
|
// 日期格式
|
|
// 日期格式
|
|
|
const dateFormat = computed(() => {
|
|
const dateFormat = computed(() => {
|
|
|
- switch (params.cycletype) {
|
|
|
|
|
|
|
+ switch (queryParams.value.cycletype) {
|
|
|
case ReportType.Month:
|
|
case ReportType.Month:
|
|
|
return 'YYYY-MM'
|
|
return 'YYYY-MM'
|
|
|
case ReportType.Quarter:
|
|
case ReportType.Quarter:
|
|
@@ -97,72 +133,39 @@ const dateFormat = computed(() => {
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-const { children = [] } = findTreeNodeById(routerStore.userRoutes, String(route.name), { id: 'resourceCode' }) ?? {}
|
|
|
|
|
-
|
|
|
|
|
-useRequest(queryCommonFlag, {
|
|
|
|
|
- onSuccess: (res) => {
|
|
|
|
|
- params.cycletime = formatDate(res.data.tradedate, 'YYYY-MM-DD')
|
|
|
|
|
- }
|
|
|
|
|
-})
|
|
|
|
|
-
|
|
|
|
|
-// 表单验证规则
|
|
|
|
|
-const formRules: FormRules = {
|
|
|
|
|
- cycletype: [{ required: true }],
|
|
|
|
|
- cycletime: [{ required: true }],
|
|
|
|
|
- quarter: [{ required: true }],
|
|
|
|
|
- accountid: [{
|
|
|
|
|
- required: true,
|
|
|
|
|
- validator: (rule, value, callback) => {
|
|
|
|
|
- if (value) {
|
|
|
|
|
- callback()
|
|
|
|
|
- } else {
|
|
|
|
|
- callback(new Error( t('report.account.tips1')))
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- }],
|
|
|
|
|
|
|
+const onAccountChange = (item?: Model.TAAccountChildrenSelectRsp) => {
|
|
|
|
|
+ selectedAccount.value = item
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-const loadComponent = () => {
|
|
|
|
|
- const item = children[componentIndex.value]
|
|
|
|
|
- if (item) {
|
|
|
|
|
- const componentString = item.component.replace(/^\/+/, '')
|
|
|
|
|
- const componentPath = componentString.replace(/\.\w+$/, '')
|
|
|
|
|
- return defineAsyncComponent(() => import('/' + process.env.VUE_APP_ROOT + componentPath + '.vue'))
|
|
|
|
|
- }
|
|
|
|
|
- return undefined
|
|
|
|
|
-}
|
|
|
|
|
|
|
+const onSearch = () => {
|
|
|
|
|
+ const qs = getQueryParams()
|
|
|
|
|
+ qs.pageNum = 1
|
|
|
|
|
+ qs.pageSize = 20
|
|
|
|
|
|
|
|
-const onTypeChange = (value: ReportType) => {
|
|
|
|
|
- const dateValue = params.cycletime
|
|
|
|
|
- if (dateValue) {
|
|
|
|
|
- switch (value) {
|
|
|
|
|
- case ReportType.Month:
|
|
|
|
|
- params.cycletime = formatDate(dateValue, 'YYYY-MM')
|
|
|
|
|
- break
|
|
|
|
|
- case ReportType.Quarter:
|
|
|
|
|
- case ReportType.Year:
|
|
|
|
|
- params.cycletime = formatDate(dateValue, 'YYYY')
|
|
|
|
|
- break
|
|
|
|
|
- default:
|
|
|
|
|
- params.cycletime = formatDate(dateValue, 'YYYY-MM-DD')
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ switch (qs.cycletype) {
|
|
|
|
|
+ case ReportType.Month:
|
|
|
|
|
+ qs.cycletime = formatDate(qs.cycletime, 'YYYY-MM')
|
|
|
|
|
+ break
|
|
|
|
|
+ case ReportType.Quarter:
|
|
|
|
|
+ case ReportType.Year:
|
|
|
|
|
+ qs.cycletime = formatDate(qs.cycletime, 'YYYY')
|
|
|
|
|
+ break
|
|
|
|
|
+ default:
|
|
|
|
|
+ qs.cycletime = formatDate(qs.cycletime, 'YYYY-MM-DD')
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
|
|
|
-const onAccountChange = (item?: Model.TAAccountChildrenSelectRsp) => {
|
|
|
|
|
- selectedAccount.value = item
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ params.value = qs
|
|
|
|
|
|
|
|
-const onSearch = () => {
|
|
|
|
|
- params.pageNum = 1
|
|
|
|
|
- formRef.value?.validate((valid) => {
|
|
|
|
|
- if (valid) {
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- componentRef.value.query?.()
|
|
|
|
|
- }, 20)
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ componentRef.value.query?.()
|
|
|
|
|
+ }, 20)
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+useRequest(queryCommonFlag, {
|
|
|
|
|
+ onSuccess: (res) => {
|
|
|
|
|
+ filterOption.filters[1].value = formatDate(res.data.tradedate, 'YYYY-MM-DD')
|
|
|
|
|
+ }
|
|
|
|
|
+})
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less">
|
|
<style lang="less">
|