fe_service_ebtp_frontend/src/pages/Agency/AgencyManager/index.tsx

import React, { useState, useRef } from 'react';
import {Table,Radio,  message, Modal, Input, Form, PageHeader, Button, Spin, Select, Tree, DatePicker } from 'antd';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { getPage, getDataById, deleteAgency, addAgency, updateAgency,disableAgency } from './service';
// import './styles.less';
import { getSessionRoleData,getDicData,getSessionUserData } from '@/utils/session';
import TextArea from 'antd/lib/input/TextArea';
import SelectProvider from './components/SelectProvider';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import advancedFormat from 'dayjs/plugin/advancedFormat'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import localeData from 'dayjs/plugin/localeData'
import weekday from 'dayjs/plugin/weekday'
import weekOfYear from 'dayjs/plugin/weekOfYear'
import weekYear from 'dayjs/plugin/weekYear'

dayjs.extend(customParseFormat)
dayjs.extend(advancedFormat)
dayjs.extend(weekday)
dayjs.extend(localeData)
dayjs.extend(weekOfYear)
dayjs.extend(weekYear)


dayjs.locale('zh-cn');
const agency: React.FC<{}> = () => {

  let userData: any=getSessionUserData();
  //获取字典
  const getDict: any = getDicData();
  const [form] = Form.useForm();
  const [title, setTitle] = useState<string>('');
  const [open, setOpen] = useState<boolean>(false);

  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
  const [currentRoleId, setCurrentRoleId] = useState<number | null>(null);
  const dictData = JSON.parse(getDict);
  const actionRef = useRef<ActionType>();
  const [spin, spinSet] = useState<boolean>(false);
  const [selectProviderVisible, setSelectProviderVisible] = useState<boolean>(false);
  const [currentRecord, setCurrentRecord] = useState<any>(null);
  const [showEndDate, setShowEndDate] = useState<boolean>(false);
  const [dataSource, setdataSource] = useState<any>();
  //查询分页数据
  const [pageData, pageDataSet] = useState<any>({
    pageNo: 1,
    pageSize: 10
  });
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 13 },
  };
  interface DictType {
    value: string;
    label: string;
  }

    const [date, setDate] = useState<any>(dayjs(new Date()));
  const columnsAgencyInvalidations= [
    { title: '序号', valueType: 'index',},
    {
      title: '有效期开始',
      dataIndex: 'periodBegin',
      key: 'periodBegin',
    },
    {
      title: '有效期结束',
      dataIndex: 'periodEnd',
      key: 'periodEnd',
    },
    {
      title: '失效类型',
      dataIndex: 'invalidType',
      key: 'invalidType',
    },

  ];
  //委托列表
  const columns: ProColumns<any>[] = [
    { title: '序号', valueType: 'index', width: 50, search: false, },
    { title: '代理机构名称', dataIndex: 'providerName', },//, ellipsis: true
    { title: '申请人', dataIndex: 'applyUser', search: false, },//, ellipsis: true//, ellipsis: true
    { title: '开始服务时间', dataIndex: 'createDate', search: false, },//, ellipsis: true
    { title: '准入人', dataIndex: 'accessUser', search: false, },//, ellipsis: true
    { title: '失效时间', dataIndex: 'periodEnd',  search: false,},//, ellipsis: true
    { title: '状态', dataIndex: 'validityStatus', valueType: 'select', 
    valueEnum: {'0': { text: '审批中', status: '0' }, '1': { text: '有效', status: '1' },'2': { text: '失效', status: '2' }, },
    },//, ellipsis: true
    { title: 'id', dataIndex: 'id', search: false,hideInTable:true,},//, ellipsis: true
    // { title: '创建时间', dataIndex: 'createDate', width: '10%', valueType: 'dateTime', search: false },
    { title: 'providerId', dataIndex: 'providerId', search: false,hideInTable:true,},
    {
      title: '操作', width: '9%',
      valueType: 'option',
      render: (_, record) => [
        <Button type='text' onClick={() => { handleUpdate(record.providerId) }}>委托项目信息</Button>,
        <Button type='text' onClick={() => { handleUpdate(record) }}>查看</Button>,
        record.validityStatus === '1' && (
          <Button key="disable" type='text' onClick={() => handleDisable(record.id)}>失效</Button>
        ),
        record.validityStatus === '2' && (
          <Button key="select" type='text' onClick={() => { handleReSelect(record) }}>选择</Button>
        )
        
    ]
    },
  ];
  // 删除操作
  const handleDelete = (id: string) => {
    Modal.confirm({
      title: '确认删除该代理机构？',
      onOk: async () => {
        await deleteAgency(id).then((r: any) => {
          if (r?.code == 200) {
            message.success('删除成功');
          } else {
            message.error('删除失败');
          }
        })
          .finally(() => actionRef.current?.reload());
      },
    });
  };
  
  const handleDisable = (id: string) => {
    Modal.confirm({
      title: '确认失效该代理机构？',
      onOk: async () => {
        await disableAgency(id).then((r: any) => {
          if (r?.code == 200) {
            message.success('操作成功');
          } else {
            message.error('操作失败');
          }
        })
          .finally(() => actionRef.current?.reload());
      },
    });
  };
  
  const handleAdd = async (record: any) => {
    form.resetFields();
    form.setFieldsValue({
      //...record,
      providerId: record.id,
      providerName: record.name,
      id: '',
    });
   
    setOpen(true);
    setTitle('添加招标代理机构');
  };
  const handleReSelect = async (record: any) => {
    form.resetFields();
    const agencyDetail = await getDataById(record.id);
    if(agencyDetail&&(agencyDetail?.code == 200)&&agencyDetail.data&&agencyDetail.data.providerDetail) { 
      setCurrentRecord(agencyDetail.data.providerDetail);
      setShowEndDate(agencyDetail.data.validity === '2');
      form.setFieldsValue({
       // ...currentRecord,
        providerId: agencyDetail.data.providerDetail.id,
        providerName: agencyDetail.data.providerDetail.name,
       
      });
    }
  
   
    setOpen(true);
    setTitle('添加招标代理机构');
  };
  const [menuOptions, setMenuOptions] = useState<any[]>([]);



  const handleUpdate = async (record: any) => {
    form.resetFields();
    const agencyDetail = await getDataById(record.id);

    if(agencyDetail&&(agencyDetail?.code == 200)&&agencyDetail.data) { 
      setCurrentRecord(agencyDetail.data.providerDetail);
      setShowEndDate(agencyDetail.data.validity === '2');
      setdataSource(agencyDetail.data.agencyInvalidations);

      form.setFieldsValue({
        ...agencyDetail.data
      });
     if(agencyDetail.data.providerDetail && agencyDetail.data.periodEnd){
      console.log(agencyDetail.data.periodEnd);
      setDate(dayjs(agencyDetail.data.periodEnd, 'YYYY-MM-DD'));

     }
    }
  

    setOpen(true);
    setTitle('修改代理机构');
  };

  const closeModal = async () => {
    actionRef.current?.reload();
    form.resetFields();
    setCheckedKeys([]);
    setOpen(false);
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      
      // 处理日期，确保只保留日期部分
      if (date && values.validity==='2') {
        values.periodEnd =date.format('YYYY-MM-DD');
      }

      if (values.id) {
        await updateAgency(values).then((r: any) => {
          if (r?.code == 200) {
            message.success('修改成功');
          } else {
            message.error('修改失败');
          }
        });
      } else {
        await addAgency(values).then((r: any) => {
         
          if (r?.code == 200) {
            message.success('新增成功');
          } else {
            message.error('新增失败');
          }
        });
      }
      closeModal();
    } catch (error) {
      console.error(error);
    }
  };
  const checkSupModal = (
    <Modal
      title={title}
      visible={open}
      width="70%"
      centered
      destroyOnClose={true}
      bodyStyle={{ maxHeight: window.innerHeight * 0.96 - 108, overflowY: 'auto', paddingTop: 0 }}
      // footer={<Button onClick={() => setOpen(false)}>关闭</Button>}
      onOk={handleSubmit}
      onCancel={() => closeModal()}
    >
      
    
    
      <div className="info-display" style={{ 
        display: 'flex', 
        flexWrap: 'wrap', 
        margin: '0 -1%',
        marginBottom: '1.5rem' 
      }}>
       
        <div className="info-item" style={{ flex: '0 0 48%', margin: '0 1% 1rem', display: 'flex' }}>
          <span className="info-label" style={{ flex: '0 0 30%', textAlign: 'right', marginRight: '2%' }}>供应商名称：</span>
          <span className="info-content" style={{ flex: '1' }}>{currentRecord?.name || '-'}</span>
        </div>
       
        <div className="info-item" style={{ flex: '0 0 48%', margin: '0 1% 1rem', display: 'flex' }}>
          <span className="info-label" style={{ flex: '0 0 30%', textAlign: 'right', marginRight: '2%' }}>供应商类型名称：</span>
          <span className="info-content" style={{ flex: '1' }}>{currentRecord?.kindName || '-'}</span>
        </div>
        <div className="info-item" style={{ flex: '0 0 48%', margin: '0 1% 1rem', display: 'flex' }}>
          <span className="info-label" style={{ flex: '0 0 30%', textAlign: 'right', marginRight: '2%' }}>准入时间：</span>
          <span className="info-content" style={{ flex: '1' }}>{currentRecord?.accessTime || '-'}</span>
        </div>
        <div className="info-item" style={{ flex: '0 0 48%', margin: '0 1% 1rem', display: 'flex' }}>
          <span className="info-label" style={{ flex: '0 0 30%', textAlign: 'right', marginRight: '2%' }}>商品品类：</span>
          <span className="info-content" style={{ flex: '1' }}>{currentRecord?.goodsTypeName || '-'}</span>
        </div>       
      
      </div>

      <div className="info-display" style={{ 
        display: 'flex', 
        flexWrap: 'wrap', 
        margin: '0 -1%',
        marginBottom: '1.5rem' 
      }}>
        <div className="info-item" style={{ flex: '0 0 48%', margin: '0 1% 1rem', display: 'flex' }}>
          <span className="info-label" style={{ flex: '0 0 30%', textAlign: 'right', marginRight: '2%' }}>姓名：</span>
          <span className="info-content" style={{ flex: '1' }}>{userData?.fullName || '-'}</span>
        </div>
        <div className="info-item" style={{ flex: '0 0 48%', margin: '0 1% 1rem', display: 'flex' }}>
          <span className="info-label" style={{ flex: '0 0 30%', textAlign: 'right', marginRight: '2%' }}>工号：</span>
          <span className="info-content" style={{ flex: '1' }}>{userData?.fullName || '-'}</span>
        </div>
        <div className="info-item" style={{ flex: '0 0 48%', margin: '0 1% 1rem', display: 'flex' }}>
          <span className="info-label" style={{ flex: '0 0 30%', textAlign: 'right', marginRight: '2%' }}>角色：</span>
          <span className="info-content" style={{ flex: '1' }}>{userData?.fullName || '-'}</span>
        </div>
        <div className="info-item" style={{ flex: '0 0 48%', margin: '0 1% 1rem', display: 'flex' }}>
          <span className="info-label" style={{ flex: '0 0 30%', textAlign: 'right', marginRight: '2%' }}>公司：</span>
          <span className="info-content" style={{ flex: '1' }}>{userData?.fullName || '-'}</span>
        </div>
        <div className="info-item" style={{ flex: '0 0 48%', margin: '0 1% 1rem', display: 'flex' }}>
          <span className="info-label" style={{ flex: '0 0 30%', textAlign: 'right', marginRight: '2%' }}>部门：</span>
          <span className="info-content" style={{ flex: '1' }}>{userData?.fullName || '-'}</span>
        </div>
        
      </div>
     

<div className="info-display" style={{ 
display: 'flex', 
flexWrap: 'wrap', 
margin: '0 -1%',
marginBottom: '1.5rem' 
}}>
{
 dataSource && ( <Table dataSource={dataSource} columns={columnsAgencyInvalidations} title={()=>"历史记录"} />)
}


</div>
      <Form form={form} {...layout}>

        <Form.Item label="供应商ID" name="providerId" hidden>
          <Input disabled />
        </Form.Item>
        <Form.Item label="供应商Name" name="providerName" hidden>
          <Input disabled />
        </Form.Item>
        <Form.Item label="ID" name="id" hidden>
          <Input disabled />
 
         </Form.Item>

        <Form.Item label="有效期" name="validity">
        <Radio.Group 
          options={[
            { value: '1', label: '长期' },
            { value: '2', label: '定期' }
          ]}
          onChange={(e) => {
            const value = e.target.value;
            setShowEndDate(value === '2');
            if (value === '1') {
              
            }
          }}
        />
        </Form.Item>
        
        {showEndDate && (
          <Form.Item label="结束日期" >
            <DatePicker value={date} onChange={(date) => setDate(date)} disabledDate={(current) => current && current < moment().startOf('day')} style={{ width: '100%' }} format={'YYYY-MM-DD'}  />
          </Form.Item>
        )}

        
      </Form>
     

    </Modal>
  );
  return (
    <Spin spinning={spin}>
      <PageHeader title="我的招标代理" />
      <div style={{ maxHeight: innerHeight - 130, height: innerHeight - 130 }} className='xsy-entrust bgCWhite'>
        <ProTable<any>
          actionRef={actionRef}//action触发后更新表格
          columns={columns}//表格
          options={false}
          bordered={false}
          className='tableSearch'
          size='small'
          search={{ labelWidth: 'auto', span: 6 }}
          request={(params) =>
            getPage({
              ...params,
              basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
            }).then((res) => {
              const result = {
                data: res.data.records,
                total: res.data.total,
                success: res.success,
                pageSize: res.data.size,
                current: res.data.current
              }
              return result;
            })
          }
          toolBarRender={() => [
            <Button type="primary" onClick={() => { 
            
              setSelectProviderVisible(true);
            }}>新增招标代理</Button>
          //   <Button onClick={() => { handleAdd() }} type="primary">
          //     新增招标代理
          //   </Button>,
          ]
          }
          pagination={{
            defaultPageSize: 10,
            showSizeChanger: false,
            onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
            onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
          }}
          onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
        />
        {checkSupModal}
        <SelectProvider 
          visible={selectProviderVisible}
          onSelect={(provider) => {
            console.log('Selected provider:', provider);
            // 处理选中的供应商数据
            setCurrentRecord(provider); 
           // if (currentRecord && provider) {
              handleAdd(provider);
           // }
            setSelectProviderVisible(false);
           // setCurrentRecord(null);
          }}
          onCancel={() => {
            setSelectProviderVisible(false);
            setCurrentRecord(null);
          }}
        />
      </div>
      {/* 查看 */}
    </Spin >
  )
};
export default agency;