feat: update

zhongnanhuang
1 parent a2a8a660
Showing 1 changed file with 138 additions and 63 deletions
src/pages/OrderReport/components/OrderStatisticCard.tsx
 import { RESPONSE_CODE } from '@/constants/enum';
 import { postServiceOrderUpdateReportFormsTarget } from '@/services';
-import Icon, {
-  CheckCircleTwoTone,
-  CloseCircleTwoTone,
-  EditTwoTone,
-} from '@ant-design/icons';
-import { ProCard } from '@ant-design/pro-components';
-import { Flex, InputNumber, message } from 'antd';
-import { useEffect, useState } from 'react';
+import Icon, { EditTwoTone } from '@ant-design/icons';
+import { ModalForm, ProCard, ProFormDigit } from '@ant-design/pro-components';
+import { Flex, Form, message } from 'antd';
+import { useState } from 'react';
 export default ({ data, statisticsMethod, reFreshData }) => {
   const [edit, setEdit] = useState(false);
+  const [form] = Form.useForm<{
+    statisticsMethod: string;
+    target: number;
+    daysOfMonth: number;
+  }>();
+  const [targetValue, setTargetValue] = useState(0);
   const UpBig = () => (
     <svg width="44" height="auto" fill="#d81e06" viewBox="0 0 1024 1024">
@@ -57,10 +59,11 @@ export default ({ data, statisticsMethod, reFreshData }) =&gt; {
     sameMonthPercentageChange = -1000,
     editable = false,
   }) => {
-    const [targetValue, setTargetValue] = useState(0);
-    useEffect(() => {
+    //如果是可编辑的说明是指标，设置指标值，可用在弹窗中的回显
+    if (editable) {
       setTargetValue(content);
-    }, [content]);
+    }
+
     let trendIcon;
     let trendPercentage;
     if (sameMonthPercentageChange > 0) {
@@ -102,7 +105,28 @@ export default ({ data, statisticsMethod, reFreshData }) =&gt; {
           <Flex align="center">
             <span className="text-base pr-1">{unit}</span>
             <div style={{ width: 'max-content', display: 'flex' }}>
+              <span className="text-2xl">
+                {content}
+                {editable ? (
+                  <span className="text-xs pl-1">
+                    {statisticsMethod === 'YEAR_STATISTICS' ? '每年' : '每月'}
+                  </span>
+                ) : (
+                  ''
+                )}
+              </span>
               {editable ? (
+                <EditTwoTone
+                  style={{ fontSize: '20px' }}
+                  onClick={() => {
+                    setEdit(true);
+                  }}
+                />
+              ) : (
+                ''
+              )}
+
+              {/* {editable ? (
                 edit ? (
                   <InputNumber
                     placeholder="请输入指标（￥）"
@@ -130,9 +154,9 @@ export default ({ data, statisticsMethod, reFreshData }) =&gt; {
                 </span>
               ) : (
                 ''
-              )}
+              )} */}
-              {editable ? (
+              {/* {editable ? (
                 edit ? (
                   [
                     <CheckCircleTwoTone
@@ -171,7 +195,7 @@ export default ({ data, statisticsMethod, reFreshData }) =&gt; {
                 )
               ) : (
                 ''
-              )}
+              )} */}
             </div>
           </Flex>
           {trendIcon}
@@ -183,57 +207,108 @@ export default ({ data, statisticsMethod, reFreshData }) =&gt; {
   };
   return (
-    <ProCard title="" ghost gutter={8}>
-      <ProCard
-        className="order-statictis-card"
-        bordered
-        title={<CardTitle title={'总收入'} />}
-      >
-        <CardContent
-          unit="￥"
-          content={data.totalPayment}
-          sameMonthPercentageChange={data.totalPaymentTrend}
-        />
-      </ProCard>
-      <ProCard
-        className="order-statictis-card"
-        title={<CardTitle title={'指标'} />}
-        bordered
-      >
-        <CardContent unit="￥" content={data.target} editable={true} />
+    <>
+      <ProCard title="" ghost gutter={8}>
+        <ProCard
+          className="order-statictis-card"
+          bordered
+          title={<CardTitle title={'总收入'} />}
+        >
+          <CardContent
+            unit="￥"
+            content={data.totalPayment}
+            sameMonthPercentageChange={data.totalPaymentTrend}
+          />
+        </ProCard>
+        <ProCard
+          className="order-statictis-card"
+          title={<CardTitle title={'指标'} />}
+          bordered
+        >
+          <CardContent unit="￥" content={data.target} editable={true} />
+        </ProCard>
+        <ProCard
+          className="order-statictis-card"
+          title={<CardTitle title={'总订单量'} />}
+          bordered
+        >
+          <CardContent
+            unit="单"
+            content={data.totalOrderNumber}
+            sameMonthPercentageChange={data.totalOrderNumberTrend}
+          />
+        </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={data.unCheckOrderNumber} />
+        </ProCard>
+        <ProCard
+          className="order-statictis-card"
+          title={<CardTitle title={'未发货订单'} />}
+          bordered
+        >
+          <CardContent unit="单" content={data.unSendOrderNumber} />
+        </ProCard>
       </ProCard>
-      <ProCard
-        className="order-statictis-card"
-        title={<CardTitle title={'总订单量'} />}
-        bordered
+
+      <ModalForm<{
+        statisticsMethod: string;
+        target: number;
+        daysOfMonth: number;
+      }>
+        title="编辑指标"
+        width={500}
+        form={form}
+        open={edit}
+        autoFocusFirstInput
+        modalProps={{
+          destroyOnClose: true,
+          onCancel: () => setEdit(false),
+        }}
+        onFinish={async (values) => {
+          values.statisticsMethod = statisticsMethod;
+          let res = await postServiceOrderUpdateReportFormsTarget({
+            data: values,
+          });
+          if (res.result === RESPONSE_CODE.SUCCESS) {
+            message.success(res.message);
+            setEdit(false);
+            reFreshData();
+          }
+        }}
       >
-        <CardContent
-          unit="单"
-          content={data.totalOrderNumber}
-          sameMonthPercentageChange={data.totalOrderNumberTrend}
+        <ProFormDigit
+          width="md"
+          name="target"
+          label="指标（￥）"
+          min={0}
+          initialValue={targetValue}
+          placeholder="请输入指标"
+          rules={[{ required: true, message: '指标必填' }]}
         />
-      </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={data.unCheckOrderNumber} />
-      </ProCard>
-      <ProCard
-        className="order-statictis-card"
-        title={<CardTitle title={'未发货订单'} />}
-        bordered
-      >
-        <CardContent unit="单" content={data.unSendOrderNumber} />
-      </ProCard>
-    </ProCard>
+        <ProFormDigit
+          width="md"
+          name="daysOfMonth"
+          label={
+            statisticsMethod === 'YEAR_STATISTICS'
+              ? '每月工作日天数'
+              : '本月工作日天数'
+          }
+          min={0}
+          placeholder="工作日天数"
+          rules={[{ required: true, message: '工作日天数必填' }]}
+        />
+      </ModalForm>
+    </>
   );
 };