fe_service_ebtp_frontend/src/pages/Tender/ProjectsInvolved/index.tsx

import React, { useState, useRef } from 'react';
import { Button, Tabs, Form, Input, Modal, Space, Checkbox, message, PageHeader } from 'antd';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { queryingPagingData } from '@/utils/PageUtils';
import { personListItem } from './data';
import { getSection, exitProject, changePerson, getProject, getOther } from './service';
import '@/assets/ld_style.less';
import { Link } from 'umi';
import { getDicData } from '@/utils/session';
import { proTableValueEnum } from '@/utils/CommonUtils';

const { TabPane } = Tabs;
const { Search } = Input;
const { TextArea } = Input;
const CheckboxGroup = Checkbox.Group;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const personData: personListItem[] = [
  {
    name: '刘德华',
    loginNum: 'sfsddfd',
    phone: '13625141412',
    email: 'sdsf@123.com',
  }, {
    name: '刘德华',
    loginNum: 'sfsddfd',
    phone: '13625141412',
    email: 'sdsf@123.com',
  }, {
    name: '刘德华',
    loginNum: 'sfsddfd',
    phone: '13625141412',
    email: 'sdsf@123.com',
  }, {
    name: '刘德华',
    loginNum: 'sfsddfd',
    phone: '13625141412',
    email: 'sdsf@123.com',
  },
]

const plainOptions: any[] = [];
const defaultCheckedList: any[] = [];

const Index: React.FC<{}> = () => {
  const [personList] = useState<any>([personData]); // 负责人列表
  const [plainList, setPlainList] = useState(plainOptions); // 选择标段
  const [quitVisible, setQuitVisible] = useState<boolean>(false); // 退出项目弹窗按钮
  const [personVisible, setPersonVisible] = useState<boolean>(false); // 修改负责人弹窗按钮
  const [indeterminate, setIndeterminate] = useState<boolean>(false); // 复选框全选
  const [checkAll, setCheckAll] = useState<boolean>(false); // 复选框全选
  const [checkedList, setCheckedList] = useState(defaultCheckedList); // 全选选中数组
  const [sectionsVal, setSectionsVal] = useState<any>([]); // 选中数组id
  const [quitForm] = Form.useForm();

  //获取字典
  const getDict: any = getDicData();
  const dictData = JSON.parse(getDict);

  const actionRef = useRef<ActionType>();
  const personColumns: any[] = [  // 修改项目负责人 
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '登录号',
      dataIndex: 'loginNum',
      key: 'loginNum',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      align: 'center',
      render: (text: any, record: any) => (
        <Space size="middle">
          <Button type="link" size="middle">选择</Button>
        </Space>
      ),
    },
  ];
  const columns: any[] = [  // 我参与的项目
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      search: false
    },
    {
      title: '采购方式',
      dataIndex: 'bidMethodDict',
      search: false,
      valueEnum: proTableValueEnum(dictData['procurement_mode=entrust'])
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
    },
    {
      title: '项目编号',
      dataIndex: 'projectBizNum',
      search: false
    },
    {
      title: '采购人',
      dataIndex: 'ownerContactName',
      search: false
    },
    {
      title: '采购类型',
      dataIndex: 'procurementType',
      valueEnum: proTableValueEnum(dictData['procurement_type=entrust'])
    },
    {
      title: '所属区域',
      dataIndex: 'regionDictName',
      search: false
    },
    {
      title: '操作',
      width: 100,
      render: (text: any, record: any) => (
        <Space>
          <Button type="link" onClick={() => saveProject(record)} danger><Link to={`/ProjectLayout/Tender/supplier/IParticipate?id=${record.id}`}>项目跟进</Link></Button>
          <Button type="link" danger onClick={() => setPersonVisible(true)} >修改负责人</Button>
          <Button type="link" danger onClick={() => quitProject(record.id)} >退出项目</Button>
        </Space>
      ),
    },
  ];
  const otherColumns: any[] = [  // 公司其他项目
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      search: false
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
    },
    {
      title: '采购类型',
      dataIndex: 'procurementTypeDict',
      search: false,
      valueEnum: proTableValueEnum(dictData['procurement_type=entrust'])
    },
    {
      title: '采购方式',
      dataIndex: 'bidMethodDict',
      search: false,
      valueEnum: proTableValueEnum(dictData['procurement_mode=entrust'])
    },
    {
      title: '已报名标段名称',
      dataIndex: 'bidSectName',
      search: false
    },
    {
      title: '已报名标段编号',
      dataIndex: 'bidSectBizNum',
      search: false
    },
    {
      title: '项目负责人',
      dataIndex: 'projectBidUser',
      search: false
    },
  ];

  const saveProject = (val: any) => { // 点击项目跟进存储项目信息
    sessionStorage.setItem('projectData', JSON.stringify(val));
  }

  const onFinish = (val: any) => { // 校验成功确认提交
    let date = {
      packageIdList: val.checkbox,
      remark: val.reason
    }
    exitProject(date).then((res: any) => {
      if (res.code == 200) {
        setQuitVisible(false)
        message.success('退出成功')
        setCheckedList([])
        setIndeterminate(false)
      } else {
        setQuitVisible(false)
        message.warning(res.message)
      }
    })
  };

  const onCheckAllChange = (e: any) => { // 全选
    setCheckedList(e.target.checked ? sectionsVal : []);
    setIndeterminate(false)
    setCheckAll(e.target.checked)
    console.log(e.target.checked)
  };

  const onChange = (checkedList: any) => { // 多选单点
    setCheckedList(checkedList)
    setIndeterminate(!!checkedList.length && checkedList.length < sectionsVal.length)
    setCheckAll(checkedList.length === sectionsVal.length)
    console.log(checkedList)
  };

  const quitProject = (id: any) => { // 退出项目
    setQuitVisible(true)
    quitForm.resetFields()
    getSection(id).then((res: any) => {
      let secVals = [];
      if (res.success) {
        secVals = res.data.map((item: any) => { return item.id })
      }
      setPlainList(res.data)
      setSectionsVal(secVals)
    })
  }

  const submitQuit = (val: any) => { // 确定并进行校验
    if (checkedList.length > 0) {
      quitForm.getFieldValue().checkbox = checkedList
    }
    quitForm.submit()
  }

  const onSearch = () => { // 确认选择负责人
    // alert(0)
  }

  return (
    <>
      <PageHeader
        title="我参与的项目"
      />
      <div className="bidContent projectsInvolved">
        <Tabs defaultActiveKey="1">
          <TabPane tab="我参与的项目" key="1">
            <ProTable
              columns={columns}
              // request={params => queryingPagingData('/api/biz-service-ebtp-tender/v1/supplier_register/get_register_project', 'post', params)}
              request={async (params) =>
                await getProject(params).then((res) => {
                  if (res.code == 200) {
                    let data = res.data;
                    return Promise.resolve({
                      data: data.records,
                      success: res.success,
                      total: res.data.total,
                      current: res.data.current,
                    });
                  }
                  return Promise.resolve({
                    data: [],
                    success: false,
                    total: 0,
                    current: 1,
                  });
                })
              }
              pagination={{ defaultPageSize: 10 }}//默认显示条数
              toolBarRender={false}
              bordered
            />
            <Modal // 修改负责人
              title="选择负责人"
              width={800}
              visible={personVisible}
              onCancel={() => setPersonVisible(false)}
              footer={null}
            >
              <Search
                placeholder="请输入关键词"
                allowClear
                enterButton="查询"
                size="middle"
                onSearch={onSearch}
                className="mb10"
              />
              <ProTable<any>
                actionRef={actionRef}//action触发后更新表格
                columns={personColumns}
                pagination={{ defaultPageSize: 10 }}//默认显示条数
                dataSource={personList}
                toolBarRender={false}
                search={false}
                bordered
              />
            </Modal>
            <Modal // 退出项目
              title="退出项目"
              width={800}
              visible={quitVisible}
              onCancel={() => setQuitVisible(false)}
              onOk={submitQuit}
            >
              <Form
                {...formItemLayout}
                onFinish={onFinish}
                form={quitForm}
              >
                <Form.Item
                  label="退出原因"
                  name="reason"
                  rules={[{ required: true, message: '请输入退出原因' }]}
                >
                  <TextArea rows={4} />
                </Form.Item>
                <Form.Item
                  name="checkbox"
                  label="选择标段"
                  rules={[{ required: true, message: '请选择标段', type: 'array' }]}
                >
                  <Checkbox
                    indeterminate={indeterminate}
                    onChange={onCheckAllChange}
                    checked={checkAll}
                  >全选</Checkbox>
                  <CheckboxGroup
                    // options={plainList}
                    value={checkedList}
                    onChange={onChange}
                  >
                    {
                      plainList.map((item: any, index: any) => {
                        return (
                          <Checkbox value={item.id} key={index}>{item.bidSectName}</Checkbox>
                        )
                      })
                    }
                  </CheckboxGroup>
                </Form.Item>
              </Form>
            </Modal>
          </TabPane>
          <TabPane tab="公司其他项目" key="2">
            <ProTable
              columns={otherColumns}
              // request={params => queryingPagingData('/api/biz-service-ebtp-tender/v1/supplier_register/company_other_project', 'post', params)}
              request={async (params) =>
                await getOther(params).then((res) => {
                  if (res.code == 200) {
                    let data = res.data;
                    return Promise.resolve({
                      data: data.records,
                      success: res.success,
                      total: res.data.total,
                      current: res.data.current,
                    });
                  }
                  return Promise.resolve({
                    data: [],
                    success: false,
                    total: 0,
                    current: 1,
                  });
                })
              }
              pagination={{ defaultPageSize: 10 }}//默认显示条数
              toolBarRender={false}
              bordered
            />
          </TabPane>
        </Tabs>
      </div>
    </>
  )
}
export default Index