Merge branch 'master' of http://192.168.31.240:3000/MTP2.0_New/MTP2.0_NEWMANAGE_WEB

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

@@ -2,9 +2,38 @@
 <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="cycletime">
+                    <el-date-picker :type="dateType" v-model="queryParams.cycletime" :format="dateFormat"
+                    :value-format="dateFormat" />
+                </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="isson">
+                    <el-checkbox :v-model="queryParams.isson" size="small" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="onSearch">查询</el-button>
+                    <el-button type="danger" @click="onSearch(true)"> 重置</el-button>
+                </el-form-item>
+            </el-form>
         </template>
         <app-table :data="dataList" showIndex v-model:columns="tableColumns" :loading="loading">
+            <template #headerLeft>
+                <app-operation :data-list="getFilteredButtons(['query_order_institutionsumm_export'])"
+                    @click="openComponentOnClick" />
+            </template>
             <template #footer>
                 <app-pagination :total="total" v-model:page-size="pageSize" v-model:page-index="pageIndex"
                     @change="onSearch" />
@@ -16,23 +45,29 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
-import { ElMessage } from 'element-plus'
+import { shallowRef, reactive, computed } from 'vue'
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
 import { useRequest } from '@/hooks/request'
-import { useDataFilter } from '@/hooks/datatable'
+import { formatDate } from '@/filters'
 import { shareAmountQuery } from '@/services/api/report'
 import { useOperation } from '@/hooks/operation'
 import { useUserStore } from '@/stores'
-import { getReportTypeList } from '@/constants/report'
+import { getReportTypeList, ReportType, getQuarterList } from '@/constants/report'
 import AppTable from '@pc/components/base/table/index.vue'
-import AppFilter from '@pc/components/base/table-filter/index.vue'
 import AppPagination from '@pc/components/base/pagination/index.vue'
+import AppOperation from '@pc/components/base/operation/index.vue'
 
-const queryParams = shallowRef<Model.ShareAmountQueryReq>()
-const { filterOptons, getQueryParams } = useDataFilter<Model.ShareAmountQueryReq>()
+const formRef = shallowRef<FormInstance>()
+const dateValue = shallowRef<string[]>([])
 const userStore = useUserStore()
 
-const { componentMap, componentId, record, closeComponent } = useOperation<Model.ShareAmountQueryReq>({
+const queryParams = reactive<Model.ShareAmountQueryReq>({
+    isson: 0,
+    orgztypes: userStore.userInfo.orgztypes,
+    cycletype: 0
+})
+
+const { componentMap, componentId, record, openComponent, closeComponent, getFilteredButtons } = useOperation<Model.InvestorOrderRsp>({
     onClose: () => onSearch()
 })
 
@@ -47,6 +82,52 @@ const { dataList, total, pageSize, pageIndex, loading, run } = useRequest(shareA
     }
 })
 
+// 日期类型
+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.cycletime
+    if (dateValue) {
+        switch (value) {
+            case ReportType.Month:
+            queryParams.cycletime = formatDate(dateValue, 'YYYY-MM')
+                break
+            case ReportType.Quarter:
+            case ReportType.Year:
+            queryParams.cycletime = formatDate(dateValue, 'YYYY')
+                break
+            default:
+            queryParams.cycletime = formatDate(dateValue, 'YYYY-MM-DD')
+        }
+    }
+}
+
 const tableColumns = shallowRef<Model.TableColumn[]>([
     { field: 'areatype', label: '角色' },
     { field: 'areaaccountid', label: '结算资金账户' },
@@ -57,24 +138,44 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { field: 'divideamount', label: '分润金额' }
 ])
 
-filterOptons.selectList = [
-    {
-        key: 'cycletype',
-        label: '报表类型',
-        selectedValue: 0,
-        locked: true,
-        options: getReportTypeList(),
-    }
-]
-
-filterOptons.buttonList = [
-    { lable: '查询', className: 'el-button--primary', onClick: () => onSearch() },
-    { lable: '重置', className: 'el-button--primary', onClick: () => onSearch(true) }
-]
+// 表单验证规则
+const formRules: FormRules = {
+    goodsid: [{ required: true }],
+    date: [{
+        required: true,
+        validator: (rule, value, callback) => {
+            if (dateValue.value.length === 2) {
+                callback()
+            } else {
+                callback(new Error('请选择日期'))
+            }
+        },
+    }],
+}
 
 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.ShareAmountQueryReq) => void, clear = false) => {
+    if (clear) {
+        queryParams.cycletime = ''
+        queryParams.cycletype = 0
+        queryParams.isson = 0
+        return
+    }
+    formRef.value?.validate((valid) => {
+        if (valid) {
+            const [startDate] = dateValue.value
+            queryParams.tradedate = startDate
+            callback(queryParams)
+        }
+    })
 }
 
 </script>