Blame view

src/pages/pms/setting/FreightTarget/index.tsx 4.54 KB
796981fb   jiangwei   绩效目标绩效运费目标配置
1
2
3
4
5
6
7
8
9
10
  import React, { useState } from 'react';
  import { PageHeaderWrapper } from '@ant-design/pro-layout';
  import { Card, InputNumber, Button, message } from 'antd';
  import useInitial from '@/hooks/useInitail';
  import { getDetail, saveApi, Item} from './api';
  import ConfirmBnt from '../components/ConfirmBnt';
  import { DeleteOutlined } from '@ant-design/icons';
  
  const Index = () => {
    const [disable, setDisable] = useState(false);
3d314356   jiangwei   fix
11
    const { data, setData, loading, setLoading } = useInitial<Item[], object>(getDetail, [{ startDays: 1, endDays: null, amount: null }, { startDays: null, endDays: null, amount: null }], {});
796981fb   jiangwei   绩效目标绩效运费目标配置
12
13
  
    const handleAdd = () => {
074821f1   jiangwei   运费目标设置fix
14
      setData([...data, { startDays: null, endDays: null, amount: null }]);
796981fb   jiangwei   绩效目标绩效运费目标配置
15
16
17
    };
  
    const handleInputChange = (index: number, p: any) => {
fc47a064   jiangwei   fix
18
19
20
21
22
      let arr = data;
      if (p.endDays) {
        arr[index + 1].startDays = p.endDays + 1;
      }
      setData(arr.map((it, i) => {
796981fb   jiangwei   绩效目标绩效运费目标配置
23
24
25
26
27
28
29
30
31
32
33
34
        if (index == i) { 
          return { ...it, ...p};
        } else {
          return it;
        }
      }
      ));
    };
  
    const handleDel = (event: any, index: number) => {
      let arr = data;
      arr.splice(index, 1);
074821f1   jiangwei   运费目标设置fix
35
      arr[arr.length -1].startDays = arr[arr.length-2].endDays+1;
796981fb   jiangwei   绩效目标绩效运费目标配置
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
      setData(arr);
    };
  
    const svae = () => {
      saveApi({list: data}).then(() => {
        message.success('保存成功');
        setLoading(true);
        setDisable(false);
      }).catch(e => message.error(e.message));
    };
  
    return (
      <PageHeaderWrapper title="运费目标设置">
        <Card loading={loading}>
          {!!data?.length && data.map((it, index) => (
074821f1   jiangwei   运费目标设置fix
51
52
53
54
55
56
57
58
59
            index < data.length-1 ? (
              <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
                <span style={{ marginRight: 10 }}>{index + 1}、</span>
                <>
                  缺件起始天数
                  <InputNumber 
                    disabled 
                    min={index > 0 ? data[index - 1].endDays : 1} 
                    value={index > 0 ? data[index - 1].endDays+1 : 1} 
fc47a064   jiangwei   fix
60
                    style={{ width: 100, marginLeft: 10, marginRight: 20 }}
074821f1   jiangwei   运费目标设置fix
61
62
63
64
65
66
67
68
                  />
                </>
                <>
                  缺件结束天数
                  <InputNumber 
                    disabled={!disable} 
                    min={0} 
                    value={it.endDays} 
fc47a064   jiangwei   fix
69
70
71
                    onChange={value => {
                      handleInputChange(index, { startDays: index > 0 ? data[index - 1].endDays + 1 : it.startDays, endDays: value });
                    }} 
074821f1   jiangwei   运费目标设置fix
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
                    style={{ width: 100, marginLeft: 10, marginRight: 20 }} 
                  />
                </>
                <>
                  运费统计增加
                  <InputNumber 
                    disabled={!disable}
                    addonAfter="元"
                    value={it.amount} 
                    min={0} 
                    onChange={value => handleInputChange(index, { amount: value })} 
                    style={{ width: 100, marginLeft: 10, marginRight: 20 }} 
                  />
                </>
                {(index == data.length - 2 && disable && index != 0) ? <Button onClick={(event: any) => handleDel(event, index)} shape="circle" icon={<DeleteOutlined />} /> : ''}
              </div>
          ) : 
              (
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 10 }}>
                  <span style={{ marginRight: 10 }}>{data.length}、</span>
                  <div style={{ marginRight: 20 }}>
                    <InputNumber disabled min={0} value={data[data.length - 2].endDays + 1} style={{ width: 100, marginRight: 10 }} />
                    天及以上
                  </div>
                  <>
                    运费统计增加
                    <InputNumber 
                      disabled={!disable} 
                      addonAfter="元"
                      value={it.amount} 
                      min={0} 
                      onChange={value => handleInputChange(data.length - 1, { startDays: index > 0 ? data[index - 1].endDays + 1 : it.startDays, endDays: null, amount: value })} 
                      style={{ width: 100, marginLeft: 10, marginRight: 20 }} 
                    />
                  </>
                </div>
              )
796981fb   jiangwei   绩效目标绩效运费目标配置
109
110
111
112
113
          ))}
          <Button type="default" disabled={!disable} onClick={() => handleAdd()}>添加梯度</Button>
          <ConfirmBnt
            disable={disable}
            onOk={() => svae()}
074821f1   jiangwei   运费目标设置fix
114
            onCancel={() => { setDisable(false); setLoading(true); }}
796981fb   jiangwei   绩效目标绩效运费目标配置
115
116
117
118
119
120
121
122
123
124
            onEdit={() => {
              setDisable(true);
              setData(data);
            }}
          />
        </Card>
      </PageHeaderWrapper>
    );
  };
  export default Index;