feat: update

zhongnanhuang
1 parent bd6b5f8c
Showing 9 changed files with 353 additions and 146 deletions
src/pages/Order/index.tsx
src/pages/OrderReport/components/OrderDualAxes.tsx
src/pages/OrderReport/components/OrderStatisticCard.tsx
src/pages/OrderReport/components/OrderStatisticSearch.tsx
src/pages/OrderReport/index.less
src/pages/OrderReport/index.tsx
src/services/definition.ts
src/services/request.ts
src/utils/index.ts
@@ -158,11 +158,31 @@ const OrderPage = () =&gt; {
   //   window.addEventListener('resize', resize);
   // });
-  const onCheckboxChange = (itemKey: never) => {
-    const newSelectedItems = selectedItems.includes(itemKey)
-      ? selectedItems.filter((key) => key !== itemKey)
-      : [...selectedItems, itemKey];
-
+  const onCheckboxChange = (record: never) => {
+    let newSelectedItems = [];
+    if (selectedItems.includes(record.id)) {
+      newSelectedItems = selectedItems.filter((key) => key !== record.id);
+      setSelectedRowKeys([]);
+      setSelectedRowObj({
+        ...setSelectedRowObj,
+        [record.id]: [],
+      });
+      selectedRowObj[record.id] = [];
+      setSelectedRows([]);
+    } else {
+      newSelectedItems = [...selectedItems, record.id];
+      //子订单全部自动选中
+      let subIds = record.subOrderInformationLists?.map((item) => {
+        return item.id;
+      });
+      setSelectedRowKeys(subIds);
+      setSelectedRowObj({
+        ...setSelectedRowObj,
+        [record.id]: record.subOrderInformationLists,
+      });
+      selectedRowObj[record.id] = record.subOrderInformationLists;
+      setSelectedRows(record.subOrderInformationLists);
+    }
     setSelectedItems(newSelectedItems);
   };
   const handleTableExpand = (mainOrderIds: any) => {
@@ -592,7 +612,7 @@ const OrderPage = () =&gt; {
             <Flex>
               <Flex>
                 <Checkbox
-                  onChange={() => onCheckboxChange(record.id)}
+                  onChange={() => onCheckboxChange(record)}
                   checked={selectedItems.includes(record.id)}
                 >
                   <Space split={<Divider type="vertical" />}>
@@ -610,7 +630,7 @@ const OrderPage = () =&gt; {
                   </div>
                   <div
                     title={record.institution}
-                    className="whitespace-no-wrap overflow-hidden overflow-ellipsis max-w-[256px]"
+                    className="whitespace-no-wrap overflow-hidden overflow-ellipsis max-w-[150px]"
                   >
                     <span className="text-[#8C8C8C]">单位：</span>
                     <span className="text-slate-700">{record.institution}</span>
 import { DualAxes } from '@ant-design/charts';
-const OrderDualAxes = () => {
-  const uvBillData = [
-    {
-      time: '2019-03',
-      value: 300,
-      type: '指标',
-    },
-    {
-      time: '2019-04',
-      value: 300,
-      type: '指标',
-    },
-    {
-      time: '2019-05',
-      value: 300,
-      type: '指标',
-    },
-    {
-      time: '2019-06',
-      value: 300,
-      type: '指标',
-    },
-    {
-      time: '2019-07',
-      value: 300,
-      type: '指标',
-    },
-    {
-      time: '2019-03',
-      value: 220,
-      type: '营业额',
-    },
-    {
-      time: '2019-04',
-      value: 300,
-      type: '营业额',
-    },
-    {
-      time: '2019-05',
-      value: 250,
-      type: '营业额',
-    },
-    {
-      time: '2019-06',
-      value: 220,
-      type: '营业额',
-    },
-    {
-      time: '2019-07',
-      value: 362,
-      type: '营业额',
-    },
-  ];
-  const transformData = [
-    {
-      time: '2019-03',
-      count: 800,
-      name: '订单量',
-    },
-    {
-      time: '2019-04',
-      count: 600,
-      name: '订单量',
-    },
-    {
-      time: '2019-05',
-      count: 400,
-      name: '订单量',
-    },
-    {
-      time: '2019-06',
-      count: 380,
-      name: '订单量',
-    },
-    {
-      time: '2019-07',
-      count: 220,
-      name: '订单量',
-    },
-  ];
+const OrderDualAxes = ({ data }) => {
   const config = {
-    data: [uvBillData, transformData],
-    xField: 'time',
-    yField: ['value', 'count'],
+    data: [
+      data.targetAndTotalPaymentDtoList === undefined
+        ? []
+        : data.targetAndTotalPaymentDtoList,
+      data.orderNumberDtoList === undefined ? [] : data.orderNumberDtoList,
+    ],
+    xField: 'curTime',
+    yField: ['curDayTotalPayment', 'curDayTotalOrderNumber'],
     geometryOptions: [
       {
         geometry: 'line',
@@ -3,7 +3,7 @@ import { ProCard } from &#39;@ant-design/pro-components&#39;;
 import { Flex, InputNumber } from 'antd';
 import { useState } from 'react';
-export default () => {
+export default ({ data }) => {
   const [edit, setEdit] = useState(false);
   const UpBig = () => (
@@ -85,14 +85,18 @@ export default () =&gt; {
         <Flex>
           <Flex align="center">
             <span className="text-base pr-1">{unit}</span>
-            <div>
+            <div className={editable ? 'w-[120px]' : ''}>
               {editable ? (
                 edit ? (
-                  <InputNumber placeholder="请输入指标（￥）" size="small" />
+                  <InputNumber
+                    placeholder="请输入指标（￥）"
+                    width={200}
+                    max={100000000}
+                  />
                 ) : (
                   <span className="text-2xl">
                     {content}
-                    {editable ? <span className="text-xs pl-1">每月</span> : ''}
+                    {editable ? <span className="text-xs px-1">每月</span> : ''}
                   </span>
                 )
               ) : (
@@ -111,13 +115,14 @@ export default () =&gt; {
               {editable ? (
                 edit ? (
                   <CheckCircleTwoTone
-                    width={200}
+                    style={{ fontSize: '20px', paddingLeft: '5px' }}
                     onClick={() => {
                       setEdit(false);
                     }}
                   />
                 ) : (
                   <EditTwoTone
+                    style={{ fontSize: '20px' }}
                     onClick={() => {
                       setEdit(true);
                     }}
@@ -145,7 +150,7 @@ export default () =&gt; {
       >
         <CardContent
           unit="￥"
-          content={2332222}
+          content={data.totalPayment}
           sameMonthPercentageChange={20}
         />
       </ProCard>
@@ -154,28 +159,39 @@ export default () =&gt; {
         title={<CardTitle title={'指标'} />}
         bordered
       >
-        <CardContent unit="￥" content={50000} editable={true} />
+        <CardContent unit="￥" content={data.target} editable={true} />
       </ProCard>
       <ProCard
         className="order-statictis-card"
         title={<CardTitle title={'总订单量'} />}
         bordered
       >
-        <CardContent unit="单" content={2212} sameMonthPercentageChange={-15} />
+        <CardContent
+          unit="单"
+          content={data.totalOrderNumber}
+          sameMonthPercentageChange={-15}
+        />
+      </ProCard>
+      <ProCard
+        className="order-statictis-card"
+        title={<CardTitle title={'总子订单量'} />}
+        bordered
+      >
+        <CardContent unit="单" content={data.subTotalOrderNumber} />
       </ProCard>
       <ProCard
         className="order-statictis-card"
         title={<CardTitle title={'未审核订单'} />}
         bordered
       >
-        <CardContent unit="￥" content={2212} />
+        <CardContent unit="单" content={data.unCheckOrderNumber} />
       </ProCard>
       <ProCard
         className="order-statictis-card"
         title={<CardTitle title={'未发货订单'} />}
         bordered
       >
-        <CardContent unit="￥" content={212} />
+        <CardContent unit="单" content={data.unSendOrderNumber} />
       </ProCard>
     </ProCard>
   );
-import {
-  ProFormDatePicker,
-  ProFormText,
-  QueryFilter,
-} from '@ant-design/pro-components';
-
-const OrderStatisticSearch = () => {
-  return (
-    <QueryFilter defaultCollapsed split className="!p-0">
-      <ProFormText name="name" label="应用名称" />
-      <ProFormDatePicker name="createDate" label="创建时间" />
-    </QueryFilter>
-  );
-};
-
-export default OrderStatisticSearch;
@@ -5,3 +5,14 @@
 .order-statictis-card {
   height: 100%;
 }
+
+//将报表卡片的extra左边内容调到适中位置
+#order-dual-axes-card .ant-pro-card-extra {
+  width: 60%;
+  max-height: 24px;
+}
+
+//报表卡片中tabs作为单选项，去掉多余的margin
+#order-dual-axes-card .ant-tabs-nav {
+  margin: 0;
+}
+import { postServiceOrderQueryReportFormsInformation } from '@/services';
+import { enumToSelect } from '@/utils';
 import { EllipsisOutlined } from '@ant-design/icons';
-import { PageContainer, ProCard } from '@ant-design/pro-components';
-import { Avatar, Button, Dropdown, Space, Tag } from 'antd';
+import {
+  PageContainer,
+  ProCard,
+  ProFormSelect,
+  QueryFilter,
+} from '@ant-design/pro-components';
+import { history } from '@umijs/max';
+import {
+  Avatar,
+  Button,
+  Dropdown,
+  Flex,
+  Form,
+  Space,
+  Spin,
+  Tabs,
+  TabsProps,
+  Tag,
+} from 'antd';
+import { useEffect, useState } from 'react';
+import {
+  PRODUCT_BELONG_DEPARTMENT_OPTIONS,
+  SALES_CODE_OPTIONS,
+} from '../Order/constant';
 import OrderDualAxes from './components/OrderDualAxes';
 import OrderStatisticCard from './components/OrderStatisticCard';
-import OrderStatisticSearch from './components/OrderStatisticSearch';
 import './index.less';
 const userInfo = JSON.parse(localStorage.getItem('userInfo'));
 const OrderReportPage = () => {
+  const [form] = Form.useForm<{
+    salesCode: '';
+    productBelongBusiness: '';
+    dateRange: '';
+  }>();
+  const [statisticData, setStatisticData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const onChange = (key: string) => {
+    console.log(key);
+  };
+
+  /**
+   * 加载页面数据
+   */
+  const loadData = async () => {
+    setLoading(true);
+    let body = {
+      statisticsMethod: '',
+      salesCode: form.getFieldValue('salesCode'),
+      productBelongBusiness: form.getFieldValue('productBelongBusiness'),
+      // beginTime:"",
+      // endTime:""
+    };
+
+    // if(form.getFieldValue("dateRange")!==undefined){
+    //   body.beginTime=formatDate(form.getFieldValue("dateRange")[0]),
+    //   body.endTime=formatDate(form.getFieldValue("dateRange")[1])
+    // }
+    body.statisticsMethod = 'MONTH_STATISTICS';
+    const { data } = await postServiceOrderQueryReportFormsInformation({
+      data: body,
+    });
+    setStatisticData(data);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const items: TabsProps['items'] = [
+    {
+      key: 'MONTH_STATISTICS',
+      label: '本月统计',
+      children: '',
+    },
+    {
+      key: 'YEAR_STATISTICS',
+      label: '本年统计',
+      children: '',
+    },
+  ];
   return (
     <PageContainer
-      className="order-page-container"
       header={{
         title: '订单汇总',
         extra: [
@@ -46,13 +120,57 @@ const OrderReportPage = () =&gt; {
       }}
     >
       <Space direction="vertical" size="middle" className="flex">
-        <OrderStatisticCard />
+        <Spin spinning={loading}>
+          <OrderStatisticCard data={statisticData} />
+        </Spin>
+
         <ProCard tooltip="这是提示" bordered>
-          <OrderStatisticSearch />
+          <QueryFilter
+            split
+            className="!p-0 order-statistic-search"
+            labelWidth="auto"
+            form={form}
+            onFinish={async () => {
+              loadData();
+              return true;
+            }}
+          >
+            <ProFormSelect
+              name="salesCode"
+              key="salesCode"
+              showSearch
+              label="销售代表"
+              placeholder="请输入销售代表"
+              options={SALES_CODE_OPTIONS}
+            />
+            <ProFormSelect
+              key="productBelongBusiness"
+              placeholder="请输入所属事业部"
+              name="productBelongBusiness"
+              label="所属事业部"
+              options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)}
+            />
+            {/* <ProFormDateRangePicker
+              key="dateRange"
+              name="dateRange"
+              label="时间"
+            /> */}
+          </QueryFilter>
         </ProCard>
-        <ProCard title="带卡片阴影" extra="extra" tooltip="这是提示" bordered>
-          <OrderDualAxes />
+        <ProCard
+          id="order-dual-axes-card"
+          title="统计图表"
+          extra={
+            <Flex>
+              <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+            </Flex>
+          }
+          bordered
+        >
+          <Spin spinning={loading}>
+            <OrderDualAxes data={statisticData} />
+          </Spin>
         </ProCard>
       </Space>
     </PageContainer>
@@ -730,6 +730,40 @@ export interface QueryMainOrderDto {
   customerName?: string;
 }
+export interface QueryReportFormsDto {
+  /**
+   * @description
+   *   开始时间
+   * @format date-time
+   * @example
+   *   2023-12-10 12:55:55
+   */
+  beginTime?: string;
+  /**
+   * @description
+   *   结束时间
+   * @format date-time
+   * @example
+   *   2023-12-10 12:55:55
+   */
+  endTime?: string;
+  /**
+   * @description
+   *   所属部门
+   */
+  productBelongBusiness?: string;
+  /**
+   * @description
+   *   销售代表
+   */
+  salesCode?: string;
+  /**
+   * @description
+   *   统计方式
+   */
+  statisticsMethod?: string;
+}
+
 export interface ResetPwdVO {
   /** @format int64 */
   userId?: number;
@@ -26,7 +26,6 @@ import type {
   DictionaryQueryVO,
   DictionaryVO,
   Dto,
-  ModelAndView,
   OrderAddVO,
   OrderAuditLogQueryVO,
   OrderBaseInfoQueryVO,
@@ -39,6 +38,7 @@ import type {
   QueryAnnexDto,
   QueryHistoryRecordDto,
   QueryMainOrderDto,
+  QueryReportFormsDto,
   ResetPwdVO,
   ServerResult,
   SysLogQueryVO,
@@ -221,7 +221,9 @@ export interface GetErrorResponse {
    * @description
    *   OK
    */
-  200: ModelAndView;
+  200: {
+    [propertyName: string]: any;
+  };
   /**
    * @description
    *   Unauthorized
@@ -242,9 +244,9 @@ export interface GetErrorResponse {
 export type GetErrorResponseSuccess = GetErrorResponse[200];
 /**
  * @description
- *   errorHtml
+ *   error
  * @tags basic-error-controller
- * @produces text/html
+ * @produces *
  */
 export const getError = /* #__PURE__ */ (() => {
   const method = 'get';
@@ -268,7 +270,9 @@ export interface PutErrorResponse {
    * @description
    *   OK
    */
-  200: ModelAndView;
+  200: {
+    [propertyName: string]: any;
+  };
   /**
    * @description
    *   Created
@@ -294,9 +298,9 @@ export interface PutErrorResponse {
 export type PutErrorResponseSuccess = PutErrorResponse[200];
 /**
  * @description
- *   errorHtml
+ *   error
  * @tags basic-error-controller
- * @produces text/html
+ * @produces *
  * @consumes application/json
  */
 export const putError = /* #__PURE__ */ (() => {
@@ -321,7 +325,9 @@ export interface PostErrorResponse {
    * @description
    *   OK
    */
-  200: ModelAndView;
+  200: {
+    [propertyName: string]: any;
+  };
   /**
    * @description
    *   Created
@@ -347,9 +353,9 @@ export interface PostErrorResponse {
 export type PostErrorResponseSuccess = PostErrorResponse[200];
 /**
  * @description
- *   errorHtml
+ *   error
  * @tags basic-error-controller
- * @produces text/html
+ * @produces *
  * @consumes application/json
  */
 export const postError = /* #__PURE__ */ (() => {
@@ -374,7 +380,9 @@ export interface DeleteErrorResponse {
    * @description
    *   OK
    */
-  200: ModelAndView;
+  200: {
+    [propertyName: string]: any;
+  };
   /**
    * @description
    *   No Content
@@ -395,9 +403,9 @@ export interface DeleteErrorResponse {
 export type DeleteErrorResponseSuccess = DeleteErrorResponse[200];
 /**
  * @description
- *   errorHtml
+ *   error
  * @tags basic-error-controller
- * @produces text/html
+ * @produces *
  */
 export const deleteError = /* #__PURE__ */ (() => {
   const method = 'delete';
@@ -421,7 +429,9 @@ export interface OptionsErrorResponse {
    * @description
    *   OK
    */
-  200: ModelAndView;
+  200: {
+    [propertyName: string]: any;
+  };
   /**
    * @description
    *   No Content
@@ -442,9 +452,9 @@ export interface OptionsErrorResponse {
 export type OptionsErrorResponseSuccess = OptionsErrorResponse[200];
 /**
  * @description
- *   errorHtml
+ *   error
  * @tags basic-error-controller
- * @produces text/html
+ * @produces *
  * @consumes application/json
  */
 export const optionsError = /* #__PURE__ */ (() => {
@@ -469,7 +479,9 @@ export interface HeadErrorResponse {
    * @description
    *   OK
    */
-  200: ModelAndView;
+  200: {
+    [propertyName: string]: any;
+  };
   /**
    * @description
    *   No Content
@@ -490,9 +502,9 @@ export interface HeadErrorResponse {
 export type HeadErrorResponseSuccess = HeadErrorResponse[200];
 /**
  * @description
- *   errorHtml
+ *   error
  * @tags basic-error-controller
- * @produces text/html
+ * @produces *
  * @consumes application/json
  */
 export const headError = /* #__PURE__ */ (() => {
@@ -517,7 +529,9 @@ export interface PatchErrorResponse {
    * @description
    *   OK
    */
-  200: ModelAndView;
+  200: {
+    [propertyName: string]: any;
+  };
   /**
    * @description
    *   No Content
@@ -538,9 +552,9 @@ export interface PatchErrorResponse {
 export type PatchErrorResponseSuccess = PatchErrorResponse[200];
 /**
  * @description
- *   errorHtml
+ *   error
  * @tags basic-error-controller
- * @produces text/html
+ * @produces *
  * @consumes application/json
  */
 export const patchError = /* #__PURE__ */ (() => {
@@ -6219,6 +6233,78 @@ export const postServiceOrderQueryProductInformation = /* #__PURE__ */ (() =&gt; {
   return request;
 })();
+/** @description request parameter type for postServiceOrderQueryReportFormsInformation */
+export interface PostServiceOrderQueryReportFormsInformationOption {
+  /**
+   * @description
+   *   dto
+   */
+  body: {
+    /**
+        @description
+          dto */
+    dto: QueryReportFormsDto;
+  };
+}
+
+/** @description response type for postServiceOrderQueryReportFormsInformation */
+export interface PostServiceOrderQueryReportFormsInformationResponse {
+  /**
+   * @description
+   *   OK
+   */
+  200: ServerResult;
+  /**
+   * @description
+   *   Created
+   */
+  201: any;
+  /**
+   * @description
+   *   Unauthorized
+   */
+  401: any;
+  /**
+   * @description
+   *   Forbidden
+   */
+  403: any;
+  /**
+   * @description
+   *   Not Found
+   */
+  404: any;
+}
+
+export type PostServiceOrderQueryReportFormsInformationResponseSuccess =
+  PostServiceOrderQueryReportFormsInformationResponse[200];
+/**
+ * @description
+ *   查询报表
+ * @tags 内部订单
+ * @produces *
+ * @consumes application/json
+ */
+export const postServiceOrderQueryReportFormsInformation =
+  /* #__PURE__ */ (() => {
+    const method = 'post';
+    const url = '/service/order/queryReportFormsInformation';
+    function request(
+      option: PostServiceOrderQueryReportFormsInformationOption,
+    ): Promise<PostServiceOrderQueryReportFormsInformationResponseSuccess> {
+      return requester(request.url, {
+        method: request.method,
+        ...option,
+      }) as unknown as Promise<PostServiceOrderQueryReportFormsInformationResponseSuccess>;
+    }
+
+    /** http method */
+    request.method = method;
+    /** request url */
+    request.url = url;
+    return request;
+  })();
+
 /** @description request parameter type for postServiceOrderQueryServiceOrder */
 export interface PostServiceOrderQueryServiceOrderOption {
   /**
@@ -55,6 +55,17 @@ function formatDateTime(inputDateTime: string) {
   return formattedDateTime;
 }
+function formatdate(inputDateTime: string) {
+  const parsedDateTime = new Date(inputDateTime);
+
+  const year = parsedDateTime.getFullYear();
+  const month = String(parsedDateTime.getMonth() + 1).padStart(2, '0');
+  const day = String(parsedDateTime.getDate()).padStart(2, '0');
+
+  const formattedDate = `${year}-${month}-${day}`;
+  return formattedDate;
+}
+
 function formatSalesCode(salesCode: any) {
   let newSalesCode = salesCode;
   if (newSalesCode.indexOf('_')) {
@@ -143,6 +154,7 @@ export {
   enumValueToLabel,
   formatDateTime,
   formatSalesCode,
+  formatdate,
   getAliYunOSSFileNameFromUrl,
   getUserInfo,
 };