BomWeb/src/pages/List/ClassifyModal.js

import { Button, List, Modal, Select, Table } from 'antd';
import TreeSelect from 'rc-tree-select';
import React, { useEffect, useMemo } from 'react';

const ClassifyModal = ({ data, visible, userList, onClose, handleChange, loading }) => {
  const { classify = [], project_id } = data;
  const list = useMemo(() => {
    return userList.map(item => {
      return { label: `${item.CName}(${item.UserName})`, value: item.ID };
    });
  }, [userList]);

  const onChange = (e, item) => {
    console.log(e, item);
    const idx = classify.findIndex(cur => cur.classify_id == item.classify_id);
    if (idx > -1) {
      const curClassifyItem = { ...classify[idx], uid: e.join(',') };
      classify[idx] = curClassifyItem;
      handleChange({ project_id, classify });
    }
  };

  const columns = [
    {
      title: '分类名称',
      width: '50%',
      render: item => item.name,
    },
    {
      title: '选择操作人',
      width: '50%',
      render: item => {
        return (
          <Select
            showSearch
            mode="multiple"
            allowClear
            style={{ width: '100%' }}
            placeholder="选择操作人"
            defaultValue={item.uid ? item.uid.split(',').map(item => Number(item)) : []}
            onChange={e => onChange(e, item)}
            options={list}
            filterOption={(input, option) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            }
          />
        );
      },
    },
  ];

  return (
    <Modal
      width="60%"
      // confirmLoading={loading}
      maskClosable={false}
      destroyOnClose
      title="编辑分类"
      visible={visible}
      onCancel={onClose}
      onOk={onClose}
      footer={[
        <Button key="submit" type="primary" onClick={onClose}>
          确定
        </Button>,
      ]}
    >
      <Table
        loading={loading}
        columns={columns}
        dataSource={classify}
        pagination={{ position: ['none', 'none'], pageSize: 999 }}
        scroll={{ y: 500 }}
      />
    </Modal>
  );
};
export default ClassifyModal;