front-cli / pc-page-useStore-template

Commit c9a263f8701bea0ad0eaac3d251f9e35cad5aa64

Authored by 王强
0 parents

init

Inline Side-by-side
Showing 7 changed files with 232 additions and 0 deletions
api.ts 0 → 100644
  View file @c9a263f
  1 +++ a/api.ts
  1 +import type { http } from "@/typing/http";
  2 +import { ARCHIVES_HOST } from "@/utils/host";
  3 +import request from "@/utils/request";
  4 +
  5 +/**
  6 + * @description: 分页获取<feewee>替换name</feewee>
  7 + * @param {<feewee>替换name</feewee>.QueryParams} params
  8 + * @return {http.PromisePageResp<<feewee>替换name</feewee>.ListVO>}
  9 + */
  10 +export function get<feewee>替换name</feewee>ListApi(params: <feewee>替换name</feewee>.QueryParams): http.PromisePageResp<<feewee>替换name</feewee>.ListVO> {
  11 + return request.get(`API url`, { params });
  12 +}
  13 +
  14 +/**
  15 + * @description: 保存<feewee>替换name</feewee>
  16 + * @param {<feewee>替换name</feewee>.ListVO} params
  17 + * @return {http.PromiseResp<string>}
  18 + */
  19 +export function save<feewee>替换name</feewee>Api(params: <feewee>替换name</feewee>.ListVO): http.PromiseResp<string> {
  20 + return request.post(`API url`, params);
  21 +}
  22 +
  23 +/**
  24 + * @description: 删除<feewee>替换name</feewee>
  25 + * @param {number} id
  26 + * @return {http.PromiseResp<string>}
  27 + */
  28 +export function delete<feewee>替换name</feewee>Api(id: number): http.PromiseResp<string> {
  29 + return request.get(`API url`, { params: { id } });
  30 +}
components/Filter.tsx 0 → 100644
  View file @c9a263f
  1 +++ a/components/Filter.tsx
  1 +import React from "react";
  2 +import { Button, Row, Input } from "antd";
  3 +import { PlusOutlined } from "@ant-design/icons";
  4 +import { useStore } from "../index";
  5 +import FeeweeFilterOption from "@/pages/notice/components/FeeweeFilterOption";
  6 +
  7 +export default function Filter() {
  8 + const { pagination, setOpen } = useStore();
  9 +
  10 + return (
  11 + <Row justify="space-between" style={{ marginBottom: 10 }}>
  12 + <div
  13 + style={{
  14 + display: "flex",
  15 + flex: 1,
  16 + justifyContent: "start",
  17 + flexWrap: "wrap",
  18 + gap: 10,
  19 + }}
  20 + >
  21 + <FeeweeFilterOption title="关键字">
  22 + <Input.Search
  23 + style={{ minWidth: 260 }}
  24 + allowClear
  25 + placeholder="请输入关键字搜索"
  26 + value={pagination.innerParams.keyWords}
  27 + onChange={(e) => pagination.setParams({ keyWords: e.target.value })}
  28 + onSearch={() => pagination.setParams({ current: 1 }, true)}
  29 + />
  30 + </FeeweeFilterOption>
  31 + </div>
  32 + <Button
  33 + icon={<PlusOutlined />}
  34 + type="primary"
  35 + onClick={() => {
  36 + setOpen(true);
  37 + }}
  38 + >
  39 + 新增
  40 + </Button>
  41 + </Row>
  42 + );
  43 +}
components/List.tsx 0 → 100644
  View file @c9a263f
  1 +++ a/components/List.tsx
  1 +import React from "react";
  2 +import { Divider, message, Popconfirm, Popover, Table } from "antd";
  3 +import { delete<feewee>替换name</feewee>Api } from "../api";
  4 +import { useStore } from "../index";
  5 +
  6 +export default function List() {
  7 + const { pagination, setCurrent, setOpen } = useStore();
  8 +
  9 + function editItem(item: <feewee>替换name</feewee>.ListVO) {
  10 + setCurrent(item);
  11 + setOpen(true);
  12 + }
  13 +
  14 + function deleteItem(id: number) {
  15 + const hide = message.loading('删除中，请稍后...', 0);
  16 + delete<feewee>替换name</feewee>Api(id)
  17 + .then((res) => {
  18 + hide();
  19 + message.success(res.result);
  20 + pagination.setLoading(true);
  21 + })
  22 + .catch((error) => {
  23 + hide();
  24 + message.error(error.message);
  25 + });
  26 + }
  27 +
  28 + return (
  29 + <Table dataSource={pagination.list} rowKey="id" loading={pagination.loading} pagination={pagination.paginationConfig}>
  30 + <Table.Column title="name" align="left" dataIndex="name" />
  31 + <Table.Column
  32 + title="操作"
  33 + align="left"
  34 + render={(record: <feewee>替换name</feewee>.ListVO) => (
  35 + <>
  36 + <a>编辑</a>
  37 + <Divider type="vertical" />
  38 + <Popconfirm title={<span>确定删除？</span>} onConfirm={() => deleteItem(record.id || -1)}>
  39 + <a style={{ color: 'red' }}>删除</a>
  40 + </Popconfirm>
  41 + </>
  42 + )}
  43 + />
  44 + </Table>
  45 + );
  46 +}
components/Modal.tsx 0 → 100644
  View file @c9a263f
  1 +++ a/components/Modal.tsx
  1 +import React, { useEffect, useState } from "react";
  2 +import { Form, Input, message, Modal as AntdModal, Spin } from "antd";
  3 +import { save<feewee>替换name</feewee>Api } from "../api";
  4 +import { useStore } from "../index";
  5 +
  6 +export default function Modal() {
  7 + const { pagination, current, setCurrent, open, setOpen } = useStore();
  8 + const [form] = Form.useForm();
  9 + const [confirmLoading, setConfirmLoading] = useState(false);
  10 +
  11 + useEffect(() => {
  12 + if (open && current) {
  13 + form.setFieldsValue(current);
  14 + } else {
  15 + form.resetFields();
  16 + }
  17 + }, [open, current]);
  18 +
  19 + function onOk(val: any) {
  20 + const hide = message.loading('提交中，请稍后...', 0);
  21 + setConfirmLoading(true);
  22 + const params: <feewee>替换name</feewee>.ListVO = {
  23 + ...val,
  24 + id: current?.id,
  25 + };
  26 + save<feewee>替换name</feewee>Api(params)
  27 + .then((res) => {
  28 + hide();
  29 + setConfirmLoading(false);
  30 + message.success(res.result);
  31 + onCancel();
  32 + pagination.setLoading(true);
  33 + })
  34 + .catch((error) => {
  35 + hide();
  36 + setConfirmLoading(false);
  37 + message.error(error.message);
  38 + });
  39 + }
  40 +
  41 + function onCancel() {
  42 + setCurrent(undefined);
  43 + setOpen(false);
  44 + }
  45 +
  46 + return (
  47 + <AntdModal
  48 + title={`${current ? '编辑' : '添加'}<feewee>替换name</feewee>`}
  49 + open={open}
  50 + maskClosable={false}
  51 + onOk={form.submit}
  52 + confirmLoading={confirmLoading}
  53 + onCancel={onCancel}
  54 + >
  55 + <Spin spinning={confirmLoading}>
  56 + <Form form={form} onFinish={onOk}>
  57 + <Form.Item label="name" name="name" rules={[{ required: true, message: "请填写name" }]}>
  58 + <Input allowClear placeholder="请填写name" />
  59 + </Form.Item>
  60 + </Form>
  61 + </Spin>
  62 + </AntdModal>
  63 + );
  64 +}
index.tsx 0 → 100644
  View file @c9a263f
  1 +++ a/index.tsx
  1 +import React from "react";
  2 +import { ConfigProvider } from "antd";
  3 +import zhCN from "antd/lib/locale-provider/zh_CN";
  4 +import { PageHeaderWrapper } from "@ant-design/pro-layout";
  5 +import { createStore } from "@/hooks/moz";
  6 +import store from './store';
  7 +import Filter from './components/Filter';
  8 +import List from './components/List';
  9 +import Modal from './components/Modal';
  10 +
  11 +export const { Provider, useStore } = createStore(store);
  12 +
  13 +export default () => <Provider><<feewee>替换name</feewee> /></Provider>;
  14 +
  15 +function <feewee>替换name</feewee>() {
  16 + return (
  17 + <PageHeaderWrapper title="不购买商业险白名单">
  18 + <ConfigProvider locale={zhCN}>
  19 + <Card bordered={false}>
  20 + <Filter />
  21 + <List />
  22 + <Modal />
  23 + </Card>
  24 + </ConfigProvider>
  25 + </PageHeaderWrapper>
  26 + );
  27 +}
interface.d.ts 0 → 100644
  View file @c9a263f
  1 +++ a/interface.d.ts
  1 +declare namespace <feewee>替换name</feewee> {
  2 + interface QueryParams {}
  3 +
  4 + interface ListVO {}
  5 +}
store.ts 0 → 100644
  View file @c9a263f
  1 +++ a/store.ts
  1 +import { useState } from 'react';
  2 +import usePagination from "@/hooks/usePagination";
  3 +import { get<feewee>替换name</feewee>ListApi } from "./api";
  4 +
  5 +export default function useStore() {
  6 + const pagination = usePagination(get<feewee>替换name</feewee>ListApi);
  7 + const [open, setOpen] = useState(false);
  8 + const [current, setCurrent] = useState<<feewee>替换name</feewee>.ListVO>();
  9 +
  10 + return {
  11 + pagination,
  12 + open,
  13 + setOpen,
  14 + current,
  15 + setCurrent,
  16 + };
  17 +}