132 lines
3.6 KiB
TypeScript
132 lines
3.6 KiB
TypeScript
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;
|