1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import RegionCascader from '@/components/RegionCascader';
| import { PlusOutlined } from '@ant-design/icons';
| import { history, useAccess } from '@umijs/max';
| import { Button, Descriptions, Form, Input, Modal, Pagination, Space, Table, message } from 'antd';
| import React, { useEffect, useState } from 'react';
| import { createAgent, deleteAgent, getAgentDetail, getAgentPage, updateAgent } from './service';
|
| type Region={regionCode:string|string[];regionName?:string;regionLevel?:number}; type Item={id:number;agentName:string;province:string;contactInfo?:string;address?:string;regionNames?:string[];regionCount:number;createdAt?:string};
| const AgentPage:React.FC=()=>{const access=useAccess();const [search]=Form.useForm();const [form]=Form.useForm();const [list,setList]=useState<Item[]>([]);const [pagination,setPagination]=useState({page:1,pageSize:10,total:0});const [loading,setLoading]=useState(false);const [open,setOpen]=useState(false);const [detail,setDetail]=useState<any>();const [editing,setEditing]=useState<number>();const canView=access['member:agent:view'];
| const load=async(page=1,pageSize=pagination.pageSize)=>{setLoading(true);try{const r=await getAgentPage({page,pageSize,...search.getFieldsValue()});setList(r.data?.list||[]);setPagination({page:Number(r.data?.page||page),pageSize:Number(r.data?.pageSize||pageSize),total:Number(r.data?.total||0)});}finally{setLoading(false);}};useEffect(()=>{if(!canView){history.replace('/Welcome');return;}load();},[canView]);
| const edit=async(id?:number)=>{setEditing(id);setOpen(true);if(id){const r=await getAgentDetail(id);const d=r.data;setDetail(d);form.setFieldsValue({...d,regions:d.regions||[]});}else{setDetail(undefined);form.resetFields();form.setFieldsValue({regions:[{}]});}};
| const submit=async()=>{const v=await form.validateFields();const regions=(v.regions||[]).filter((x:Region)=>x?.regionCode).map((x:Region)=>{const path=Array.isArray(x.regionCode)?x.regionCode:[x.regionCode];return {...x,regionCode:path[path.length-1],regionName:x.regionName||path[path.length-1],regionLevel:path.length};});const data={...v,regions};try{if(editing)await updateAgent(editing,data);else await createAgent(data);message.success(editing?'保存成功':'新增成功');setOpen(false);load(editing?pagination.page:1);}catch(e){message.error((e as Error).message||'保存失败');}};
| const columns=[{title:'序号',width:70,render:(_:any,__ :any,i:number)=>(pagination.page-1)*pagination.pageSize+i+1},{title:'代理负责人',dataIndex:'agentName'},{title:'负责省份',dataIndex:'province'},{title:'负责区域',render:(_:any,r:Item)=>(r.regionNames||[]).join('、')||'-'},{title:'联系信息',dataIndex:'contactInfo',render:(v:string)=>v||'-'},{title:'创建时间',dataIndex:'createdAt',width:180},{title:'操作',render:(_:any,r:Item)=><Space><Button type="link" onClick={()=>{getAgentDetail(r.id).then(x=>{setDetail(x.data);setOpen(true);setEditing(undefined);});}}>详情</Button>{access['member:agent:edit']&&<Button type="link" onClick={()=>edit(r.id)}>编辑</Button>}{access['member:agent:delete']&&<Button type="link" danger onClick={()=>Modal.confirm({title:'确定删除该省代理吗？',onOk:async()=>{await deleteAgent(r.id);message.success('删除成功');load();}})}>删除</Button>}</Space>}];
| return <div style={{padding:24}}><h2>省代理管理</h2><Form form={search} layout="inline" onFinish={()=>load(1)}><Form.Item name="agentName" label="代理负责人"><Input allowClear placeholder="请输入"/></Form.Item><Form.Item name="province" label="负责省份"><Input allowClear placeholder="请输入"/></Form.Item><Button onClick={()=>{search.resetFields();load(1)}}>重置</Button><Button type="primary" htmlType="submit" style={{marginLeft:8}}>查询</Button></Form><div style={{margin:'16px 0'}}>{access['member:agent:add']&&<Button type="primary" icon={<PlusOutlined/>} onClick={()=>edit()}>新增</Button>}</div><Table rowKey="id" columns={columns as any} dataSource={list} loading={loading} pagination={false}/><Pagination style={{marginTop:16,textAlign:'right'}} current={pagination.page} pageSize={pagination.pageSize} total={pagination.total} showSizeChanger onChange={load}/>
| <Modal open={open} title={detail&&!editing?'省代理详情':editing?'编辑省代理':'新增省代理'} width={760} onCancel={()=>{setOpen(false);setDetail(undefined)}} footer={detail&&!editing?null:<><Button onClick={()=>setOpen(false)}>取消</Button><Button type="primary" onClick={submit}>确定</Button></>}>
| {detail&&!editing?<Descriptions bordered column={2} items={[['代理负责人',detail.agentName],['负责省份',detail.province],['负责区域',(detail.regionNames||[]).join('、')||'-'],['开户银行',detail.bankName],['银行账号',detail.accountNumber],['账户名称',detail.accountHolder],['开户支行',detail.branchName],['联系信息',detail.contactInfo],['详细地址',detail.address]].map(([label,children])=>({label,children:children||'-'}))}/>:<Form form={form} labelCol={{span:5}}><Form.Item name="agentName" label="代理负责人" rules={[{required:true,message:'请输入代理负责人'}]}><Input maxLength={50}/></Form.Item><Form.Item name="province" label="负责省份" rules={[{required:true,message:'请输入负责省份'}]}><Input maxLength={20}/></Form.Item><Form.List name="regions">{(fields,{add,remove})=><>{fields.map(({key,name,...rest})=><Space key={key} align="baseline"><Form.Item {...rest} name={[name,'regionCode']} rules={[{required:true,message:'请选择区域'}]}><RegionCascader/></Form.Item><Form.Item {...rest} name={[name,'regionName']} hidden><Input/></Form.Item><Button onClick={()=>remove(name)}>删除</Button></Space>)}<Button type="dashed" onClick={()=>add({})}>添加区域</Button></>}</Form.List><Form.Item name="bankName" label="开户银行"><Input/></Form.Item><Form.Item name="accountNumber" label="银行账号"><Input/></Form.Item><Form.Item name="accountHolder" label="账户名称"><Input/></Form.Item><Form.Item name="branchName" label="开户支行"><Input/></Form.Item><Form.Item name="contactInfo" label="联系信息"><Input/></Form.Item><Form.Item name="address" label="详细地址"><Input.TextArea rows={3}/></Form.Item></Form>}
| </Modal></div>};export default AgentPage;
|
|
