qc-bookManage/src/pages/distribution/book/shortBook/index.tsx

import { useAjax } from '@/Hook/useAjax';
import { apiDistributorInfoList } from '@/services/distribution/info';
import {
  apiShortBookInfoAllList,
  apiShortBookInfoBookConfig,
  apiShortBookInfoConfigDetail,
  apiShortBookInfoList,
} from '@/services/distribution/shortBook';
import {
  ActionType,
  BetaSchemaForm,
  PageContainer,
  ProFormInstance,
  ProTable,
} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { message } from 'antd';
import { useEffect, useRef, useState } from 'react';
import formConfig from './formConfig';
import { columns } from './tableConfig';

type DataItem = {
  name: string;
  state: string;
};
const Page: React.FC = () => {
  let { state, getLabelAndClassList } = useModel('global');
  const formRef = useRef<ProFormInstance>();
  const actionRef = useRef<ActionType>();
  let [workDirection, setWorkDirection] = useState<any>(null);
  let [open, setOpen] = useState<any>(null); //新增作者
  let [editValues, setEditValues] = useState<any>({});
  // ======================API=======================
  let DistributorInfoList = useAjax((params) => apiDistributorInfoList(params)); //分销商列表
  let BookInfoList = useAjax((params) => apiShortBookInfoList(params), { type: 'table' }); //获取书籍列表
  let BookInfoBookConfig = useAjax((params) => apiShortBookInfoBookConfig(params)); //小说信息配置
  let BookInfoChapterAllList = useAjax((id) => apiShortBookInfoAllList(id)); //全部列表无分页
  let BookInfoConfigDetail = useAjax((id) => apiShortBookInfoConfigDetail(id)); //小说配置详情

  // 获取标签和分类
  useEffect(() => {
    getLabelAndClassList({ workDirection });
  }, [workDirection]);
  // 编辑
  const edit = (item: any) => {
    DistributorInfoList.run();
    BookInfoChapterAllList.run(item.bookId).then((res) => {
      setOpen(true);
      BookInfoConfigDetail.run(item.bookId).then((dres) => {
        console.log(dres.data, item);
        setEditValues(dres.data);
        formRef?.current?.setFieldsValue({ ...dres.data });
      });
    });
  };
  //编辑
  const submit = async (values: any) => {
    if (editValues?.id) {
      values.id = editValues?.id;
    }
    if (values.bookDistributorConfig) {
      values.bookDistributorConfig = values.bookDistributorConfig?.map((item: any) => {
        return { ...item, bookId: editValues.bookId };
      });
    }
    if (!values?.bookId) {
      values.bookId = editValues.bookId
    }
    BookInfoBookConfig.run(values).then((res) => {
      if (res.code === 200) {
        actionRef?.current?.reload();
        message.success('操作成功!');
        closeForm(false);
      }
    });
    console.log(values);
  };
  // 关闭表单弹窗和重置表单内容
  const closeForm = (b: boolean, values?: any) => {
    if (!b) {
      setEditValues({});
      formRef?.current?.resetFields?.();
      setOpen(b);
    } else {
    }
  };
  return (
    <PageContainer>
      <ProTable<any, any>
        headerTitle={'短篇小说配置信息列表'}
        actionRef={actionRef}
        rowKey={(r) => r.bookId}
        // 搜索的配置
        search={{
          labelWidth: 90,
          searchGutter: [10, 15],
        }}
        request={async (params) => {
          return await BookInfoList.run(params);
        }}
        scroll={{ x: 'auto' }}
        columns={columns({
          authList: state?.authList,
          labelList: state.labelList,
          categoryList: state.categoryList,
          enumList: state?.enumList,
          setWorkDirection,
          edit,
        })}
      // bordered
      />
      <BetaSchemaForm<DataItem>
        title={"信息配置"}
        formRef={formRef}
        width={900}
        open={open}
        onOpenChange={(b) => {
          !b && closeForm(b);
        }}
        layoutType={'ModalForm'}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 14 }}
        grid={true}
        layout="horizontal"
        onFinish={submit}
        columns={formConfig({
          enumList: state?.enumList,
          bookList: BookInfoChapterAllList?.data?.data,
          distributorInfoList: DistributorInfoList?.data?.data,
        })}
        loading={BookInfoBookConfig?.loading}
      />
    </PageContainer>
  );
};
export default Page;