feat:
This commit is contained in:
131
src/pages/table-list/group/index.tsx
Normal file
131
src/pages/table-list/group/index.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
import type { ActionType, ProColumns, ProFormInstance } from '@ant-design/pro-components';
|
||||
import { ModalForm, PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components';
|
||||
import '@umijs/max';
|
||||
import { Select } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
|
||||
import { CITY_CODE_TO_NAME_MAP, CITY_OPTIONS } from '@/constants/city';
|
||||
import { getGroupList, updateGroupInfo } from '@/services/list';
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ label: '正常', value: 0 },
|
||||
{ label: '暂停', value: 1 },
|
||||
];
|
||||
|
||||
const TableList: React.FC = () => {
|
||||
const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
|
||||
const [currentRow, setCurrentRow] = useState<API.GroupListItem>();
|
||||
const actionRef = useRef<ActionType>();
|
||||
const formRef = useRef<ProFormInstance>();
|
||||
|
||||
const columns: ProColumns<API.GroupListItem>[] = [
|
||||
{
|
||||
title: '群名称',
|
||||
dataIndex: 'imGroupNick',
|
||||
valueType: 'textarea',
|
||||
copyable: true,
|
||||
},
|
||||
{
|
||||
title: '群ID',
|
||||
dataIndex: 'id',
|
||||
valueType: 'textarea',
|
||||
copyable: true,
|
||||
},
|
||||
{
|
||||
title: '所属城市',
|
||||
dataIndex: 'city',
|
||||
valueType: 'textarea',
|
||||
renderText(cityCode: string) {
|
||||
return CITY_CODE_TO_NAME_MAP.get(cityCode);
|
||||
},
|
||||
renderFormItem() {
|
||||
return (
|
||||
<Select
|
||||
showSearch
|
||||
allowClear
|
||||
options={CITY_OPTIONS}
|
||||
filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '群状态',
|
||||
dataIndex: 'disable',
|
||||
valueType: 'textarea',
|
||||
renderText(disable: boolean) {
|
||||
return disable ? '暂停' : '正常';
|
||||
},
|
||||
renderFormItem() {
|
||||
return <Select showSearch allowClear options={STATUS_OPTIONS} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '机器人ID',
|
||||
dataIndex: 'robotId',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
{
|
||||
title: '机器人微信昵称',
|
||||
dataIndex: 'robotImNick',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
{
|
||||
title: '机器人微信账号',
|
||||
dataIndex: 'robotImNo',
|
||||
valueType: 'textarea',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
valueType: 'option',
|
||||
render: (_, record) => (
|
||||
<a
|
||||
key="config"
|
||||
onClick={() => {
|
||||
handleUpdateModalOpen(true);
|
||||
setCurrentRow(record);
|
||||
}}
|
||||
>
|
||||
修改
|
||||
</a>
|
||||
),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProTable<API.GroupListItem, API.PageParams>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="key"
|
||||
search={{ labelWidth: 120, collapsed: false, collapseRender: false }}
|
||||
request={getGroupList}
|
||||
columns={columns}
|
||||
/>
|
||||
<ModalForm
|
||||
title="更新群信息"
|
||||
width="400px"
|
||||
formRef={formRef}
|
||||
open={updateModalOpen}
|
||||
onOpenChange={handleUpdateModalOpen}
|
||||
onFinish={async formData => {
|
||||
const params: API.UpdateGroupParams = {
|
||||
id: currentRow!.id,
|
||||
city: formData.city?.value,
|
||||
disable: formData.disable,
|
||||
};
|
||||
console.log('update confirm', formData, params);
|
||||
try {
|
||||
await updateGroupInfo(params);
|
||||
actionRef.current?.reload();
|
||||
formRef.current?.resetFields();
|
||||
} catch (e) {}
|
||||
handleUpdateModalOpen(false);
|
||||
}}
|
||||
>
|
||||
<ProFormSelect.SearchSelect name="city" mode="single" label="所属城市" options={CITY_OPTIONS} />
|
||||
<ProFormSelect name="disable" label="群状态" options={STATUS_OPTIONS} />
|
||||
</ModalForm>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
export default TableList;
|
Reference in New Issue
Block a user