Blame view

src/pages/ZoNing/components/table.tsx 4.78 KB
PurelzMgnead authored
1
import {
PurelzMgnead authored
2
3
4
5
6
7
8
9
  deleteOrderErpOrderZoNingDelete,
  getOrderErpOrderZoNingSelectAll,
} from '@/services';
import type { ProColumns } from '@ant-design/pro-components';
import { EditableProTable } from '@ant-design/pro-components';
import { Button, Popconfirm, PopconfirmProps, message } from 'antd';
import React, { useRef, useState } from 'react';
import '../index.less';
PurelzMgnead authored
10
11
12
13
14
15
16
17
18
19
20
import { zoningItem, zoningShowItem } from './constant';
import Modal from './modal';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};
PurelzMgnead authored
21
22
23
24
25
26
27
28
29
30
31
32
function changeToShow(array: zoningItem[]) {
  console.log(JSON.parse(localStorage.getItem('userInfo')).username);
  const showArray: zoningShowItem[] = array.map((item) => {
    let orderProvinceShowList = '';
    let orderUserShowList = '';
    let orderUserNumberShowList: number[] = [];
    item.orderProvinceVoList.forEach((element, index) => {
      orderProvinceShowList += element.province;
      if (index < item.orderProvinceVoList.length - 1) {
        orderProvinceShowList += '、';
      }
    });
PurelzMgnead authored
33
PurelzMgnead authored
34
35
36
37
38
39
40
    item.orderUserVoList.forEach((event, index) => {
      orderUserShowList += event.userName;
      orderUserNumberShowList.push(event.uId);
      if (index < item.orderUserVoList.length - 1) {
        orderUserShowList += '、';
      }
    });
PurelzMgnead authored
41
PurelzMgnead authored
42
43
44
    if (orderUserShowList === '') {
      orderUserShowList = '全选';
      orderUserNumberShowList.push(0);
PurelzMgnead authored
45
46
    }
PurelzMgnead authored
47
48
49
50
51
52
53
    return {
      id: item.id,
      zoning: item.zoning,
      orderProvinceShowList,
      orderUserShowList,
      orderUserNumberShowList,
    };
PurelzMgnead authored
54
  });
PurelzMgnead authored
55
56
  return showArray;
}
PurelzMgnead authored
57
58
59
60
61
62

export default () => {
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [dataSource, setDataSource] = useState<readonly zoningItem[]>([]);
  const [position] = useState<'top' | 'bottom' | 'hidden'>('hidden');
PurelzMgnead authored
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
  interface ActionType {
    reload: (resetPageIndex?: boolean) => void;
    reloadAndRest: () => void;
    reset: () => void;
    clearSelected?: () => void;
    startEditable: (rowKey: Key) => boolean;
    cancelEditable: (rowKey: Key) => boolean;
  }

  const ref = useRef<ActionType>({
    reload: () => {},
    reloadAndRest: () => {},
    reset: () => {},
    startEditable: () => {},
    cancelEditable: () => {},
  });

  function reload() {
    ref.current.reload();
  }

  const confirm: PopconfirmProps['onConfirm'] = async (id) => {
    await deleteOrderErpOrderZoNingDelete({
      data: id,
    });
    reload();
    message.success('删除成功');
  };

  const cancel: PopconfirmProps['onCancel'] = () => {
    message.error('取消删除');
  };
PurelzMgnead authored
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
  const columns: ProColumns<zoningItem>[] = [
    {
      title: '区域名称',
      dataIndex: 'zoning',
      width: 200,
    },
    {
      title: '管辖省份',
      dataIndex: 'orderProvinceShowList',
      readonly: true,
      width: 600,
    },
    {
      title: '负责销售',
      key: 'state',
      dataIndex: 'orderUserShowList',
      valueType: 'select',
PurelzMgnead authored
113
      ellipsis: true,
PurelzMgnead authored
114
115
116
117
118
119
      width: 200,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
PurelzMgnead authored
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
      render: (text, record) => [
        <>
          <Modal
            toReload={reload}
            option={'编辑'}
            needEditBody={record}
            key={record.id}
          />
          <Popconfirm
            title="删除此项"
            description="你确定你要删除此项吗?"
            onConfirm={() => {
              confirm(record.id);
            }}
            onCancel={cancel}
            okText="确定"
            cancelText="取消"
          >
            <Button>删除</Button>
          </Popconfirm>
        </>,
PurelzMgnead authored
141
142
143
144
145
      ],
    },
  ];

  return (
PurelzMgnead authored
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
    <EditableProTable<zoningItem>
      rowKey="id"
      className="table-index"
      deletePopconfirmMessage
      actionRef={ref}
      headerTitle={
        <Modal toReload={reload} option={'新增区域'} needEditBody={{}}></Modal>
      }
      maxLength={5}
      scroll={{
        x: 960,
      }}
      recordCreatorProps={
        position !== 'hidden'
          ? {
              position: position as 'top',
              record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
            }
          : false
      }
      loading={false}
      columns={columns}
      request={async () => {
        const res = await getOrderErpOrderZoNingSelectAll();
        if (res) {
          const initDataSource = changeToShow(res.data);
          return { data: initDataSource || [] };
PurelzMgnead authored
173
        }
PurelzMgnead authored
174
175
176
177
178
179
180
181
182
183
184
185
186
      }}
      value={dataSource}
      onChange={setDataSource}
      editable={{
        type: 'multiple',
        editableKeys,
        onSave: async (rowKey, data, row) => {
          console.log(rowKey, data, row);
          await waitTime(2000);
        },
        onChange: setEditableRowKeys,
      }}
    />
PurelzMgnead authored
187
188
  );
};