boluo-admin-main/src/pages/table-list/city-operation/index.tsx

import { PlusOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProFormInstance, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { ModalForm, PageContainer, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Button, message } from 'antd';
import { Select } from 'antd';
import { createStyles } from 'antd-style';
import dayjs from 'dayjs';
import React, { useEffect, useMemo, useRef, useState } from 'react';

import { CITY_OPTIONS } from '@/constants/city';
import { TIME_FORMAT } from '@/constants/global';
import { deleteCityOperator, getAllStaffList, getCityOpratorList, updateCityOperator } from '@/services/list';

const useStyles = createStyles(({ token }) => {
  return {
    img: {
      width: 100,
      height: 100,
    },
    delete: {
      color: token.colorError,
    },
    button: {
      marginRight: '8px',
    },
  };
});

const TableList: React.FC = () => {
  const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.CityOperatorListItem>();
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  const [staffOptions, setStaffOptions] = useState<Array<{ label: string; value: number; isDefault: boolean }>>([]);
  const defaultStaff = useMemo(() => {
    return staffOptions.find(it => it.isDefault) || staffOptions[0];
  }, [staffOptions]);
  const { styles } = useStyles();

  const getAllStaffOptions = async () => {
    try {
      const results = await getAllStaffList();
      setStaffOptions(
        results.map(it => ({
          label: `${it.staffName}${it.isDefault ? ' （默认）' : ''}`,
          isDefault: Boolean(it.isDefault),
          value: it.id,
        })),
      );
    } catch (e) {
    } finally {
    }
  };

  const handleDelete = async (id: number) => {
    await deleteCityOperator(id);
    message.success('操作成功');
    actionRef.current?.reload();
  };

  useEffect(() => {
    getAllStaffOptions();
  }, []);

  const columns: ProColumns<API.CityOperatorListItem>[] = [
    {
      title: '城市',
      dataIndex: 'cityCode',
      valueType: 'textarea',
      render: (_text, record) => record.cityName,
      renderFormItem() {
        return (
          <Select
            showSearch
            allowClear
            options={CITY_OPTIONS}
            filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
          />
        );
      },
    },
    {
      title: '运营',
      dataIndex: 'staffName',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'created',
      valueType: 'dateTime',
      renderText(created: string) {
        return dayjs(created).format(TIME_FORMAT);
      },
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            key="config"
            className={styles.button}
            onClick={() => {
              handleUpdateModalOpen(true);
              setCurrentRow(record);
              formRef.current?.setFieldsValue({
                ...record,
                city: {
                  label: record.cityName,
                  value: record.cityCode,
                },
              });
            }}
          >
            修改
          </a>
          <a key="delete" className={styles.delete} onClick={() => handleDelete(record.id)}>
            删除
          </a>
        </>
      ),
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.CityOperatorListItem, API.PageParams>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="key"
        search={{ labelWidth: 120, collapsed: false, collapseRender: false }}
        request={getCityOpratorList}
        columns={columns}
        toolBarRender={() => [
          <Button
            type="primary"
            key="add"
            icon={<PlusOutlined />}
            onClick={() => {
              handleUpdateModalOpen(true);
              setCurrentRow(undefined);
              formRef.current?.resetFields();
            }}
          >
            新增
          </Button>,
        ]}
      />
      <ModalForm
        title={`${currentRow ? '修改' : '新增'}城市`}
        width="400px"
        formRef={formRef}
        initialValues={{ staffId: defaultStaff?.value }}
        open={updateModalOpen}
        onOpenChange={handleUpdateModalOpen}
        onFinish={async formData => {
          const params: API.UpdateCityOperator = {
            id: currentRow?.id,
            staffId: formData.staffId,
            cityCode: formData.city.value,
            cityName: formData.city.label,
            groupLink: formData.groupLink,
          };
          console.log('update confirm', formData, params);
          try {
            await updateCityOperator(params);
            actionRef.current?.reload();
            formRef.current?.resetFields();
          } catch (e) {}
          handleUpdateModalOpen(false);
        }}
      >
        <ProFormSelect.SearchSelect
          name="city"
          mode="single"
          label="所属城市"
          options={CITY_OPTIONS}
          rules={[{ required: true, message: '必填项' }]}
        />
        <ProFormSelect
          mode="single"
          name="staffId"
          showSearch
          label="运营"
          options={staffOptions}
          rules={[{ required: true, message: '必填项' }]}
        />
        <ProFormText name="groupLink" label="进群链接" rules={[{ message: '请输入链接', type: 'url' }]} />
      </ModalForm>
    </PageContainer>
  );
};
export default TableList;