feat(contract): 合同系统增加就餐白名单菜单功能

徐欣
1 parent 96ee8bdc
Showing 6 changed files with 277 additions and 2 deletions
config/routers/contract.ts
src/pages/contract/ExpressLogisticsArticleSetting/components/UserAddModal.tsx
src/pages/contract/FoodWhiteList/api.ts
src/pages/contract/FoodWhiteList/components/AddModal/index.tsx
src/pages/contract/FoodWhiteList/components/Filter/index.tsx
src/pages/contract/FoodWhiteList/index.tsx
@@ -99,4 +99,8 @@ export default [
     path: '/contract/kt/stampmatter', //盖章事项
     component: './contract/StampMatter',
   },
+  {
+    path: '/contract/foodWhiteList', // 就餐白名单
+    component: './contract/FoodWhiteList',
+  },
 ];
@@ -40,7 +40,7 @@ export default function UserAddModal({ visible, value, onCancel, onChange }: Pro
           name="userName"
           rules={[
             { required: true, message: '请填写姓名' },
-            { max: 20, message: '输入长度应该小于20' },
+            { max: 32, message: '输入长度应该小于32' },
             { whitespace: true, message: '不能输入空白字符' },
           ]}
         >
@@ -55,7 +55,7 @@ export default function UserAddModal({ visible, value, onCancel, onChange }: Pro
               pattern: /^((\+86)|(86))?(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
               message: '请输入有效的电话号码',
             },
-            { max: 20, message: '输入长度应该小于20' },
+            { max: 16, message: '输入长度应该小于16' },
             { whitespace: true, message: '不能输入空白字符' },
           ]}
         >
+import type { http } from '@/typing/http';
+import request from '@/utils/request';
+import { OA_HOST } from '@/utils/host';
+import type { Pagination } from '@/typing/common';
+
+export interface Item {
+  id?: number;
+  name: string;
+  mobile: string;
+  remark: string;
+}
+
+export interface PageParams extends Pagination {
+  name?: string;
+  mobile?: string;
+  remark?: string;
+}
+
+/**
+ * 分页查询
+ */
+export function getFoodWhitePage(params?: PageParams): http.PromisePageResp<Item> {
+  return request.get(`${OA_HOST}/contract/erp/repast/white/page`, { params });
+}
+
+/**
+ * 新增/编辑
+ */
+export function addFoodWhite(data?: Item): http.PromiseResp<void> {
+  return request.post(`${OA_HOST}/contract/erp/repast/white/save`, data);
+}
+
+/**
+ * 删除
+ */
+export function delFoodWhite(id: number): http.PromisePageResp<void> {
+  return request.post(`${OA_HOST}/contract/erp/repast/white/delete`, { id });
+}
+import React, { useEffect, memo } from 'react';
+import { Modal, Form, message, Input } from 'antd';
+import * as API from '../../api';
+import { useRequest } from 'umi';
+
+interface Props {
+  visible: boolean;
+  row?: API.Item;
+  onCancel: () => void;
+  onRefresh: () => void;
+}
+
+function AddModal({ visible, row, onCancel, onRefresh }: Props) {
+  const { id } = row ?? {};
+  const [form] = Form.useForm();
+
+  const saveHook = useRequest(API.addFoodWhite, {
+    manual: true,
+    throwOnError: true,
+  });
+
+  useEffect(() => {
+    if (visible) {
+      if (row) {
+        form.setFieldsValue(row);
+      }
+    } else {
+      form.resetFields();
+    }
+  }, [visible, row]);
+
+  const handleSave = (feildValue: any) => {
+    saveHook
+      .run(feildValue)
+      .then(() => {
+        message.success('操作成功');
+        onCancel();
+        onRefresh();
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  return (
+    <Modal title={`${id ? '编辑' : '新增'}`} open={visible} confirmLoading={saveHook.loading} onCancel={onCancel} onOk={form.submit} width={600}>
+      <Form form={form} onFinish={handleSave} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
+        <Form.Item name="id" hidden />
+        <Form.Item
+          label="姓名"
+          name="name"
+          rules={[
+            { required: true, message: '请填写姓名' },
+            { max: 32, message: '输入长度应该小于32' },
+            { whitespace: true, message: '不能输入空白字符' },
+          ]}
+        >
+          <Input placeholder="请填写" />
+        </Form.Item>
+        <Form.Item
+          label="手机号"
+          name="mobile"
+          rules={[
+            { required: true, message: '请填写联系电话' },
+            {
+              pattern: /^((\+86)|(86))?(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
+              message: '请输入有效的电话号码',
+            },
+            { max: 16, message: '输入长度应该小于16' },
+            { whitespace: true, message: '不能输入空白字符' },
+          ]}
+        >
+          <Input placeholder="请填写" />
+        </Form.Item>
+        <Form.Item label="备注" name="remark" rules={[{ required: true, message: '请填写' }]}>
+          <Input.TextArea placeholder="请填写" maxLength={64} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+export default memo(AddModal);
+import React from 'react';
+import { Input, Row } from 'antd';
+import _ from 'lodash';
+import type { PageParams } from '../../api';
+
+interface Props {
+  innerParams?: any;
+  setParams: (params: PageParams, refreshing: boolean) => void;
+}
+
+function Filter({ innerParams, setParams }: Props) {
+  const onChange = _.debounce((newParams) => {
+    setParams({ ...innerParams, ...newParams }, true);
+  }, 600);
+
+  return (
+    <Row style={{ display: 'flex', flex: 1 }}>
+      <Input
+        style={{ width: 200 }}
+        allowClear
+        placeholder="搜索姓名"
+        onChange={(e) => {
+          onChange({ name: e.target.value });
+        }}
+      />
+      <Input
+        style={{ width: 200, marginLeft: 20 }}
+        allowClear
+        placeholder="搜索手机号"
+        onChange={(e) => {
+          onChange({ mobile: e.target.value });
+        }}
+      />
+    </Row>
+  );
+}
+
+export default Filter;
+import React, { useState } from 'react';
+import { Button, Card, ConfigProvider, Divider, message, Popconfirm, Row, Table } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import zhCN from 'antd/lib/locale-provider/zh_CN';
+import usePagination from '@/hooks/usePagination';
+import { PlusOutlined } from '@ant-design/icons';
+import AddModal from './components/AddModal';
+import Filter from './components/Filter';
+import * as API from './api';
+import _ from 'lodash';
+
+const { Column } = Table;
+
+export default function Index() {
+  // 新增 | 编辑
+  const [addModal, setAddModal] = useState<{
+    visible: boolean;
+    row?: API.Item;
+  }>({
+    visible: false,
+  });
+
+  const { list, paginationConfig, loading, innerParams, setParams } = usePagination<API.Item>(API.getFoodWhitePage);
+
+  const handleDelete = (row: API.Item) => {
+    const { id } = row;
+    API.delFoodWhite(id!)
+      .then((res) => {
+        message.success(res.result);
+        setParams({ ...innerParams }, true);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const handleEdit = (row: API.Item) => {
+    setAddModal({
+      visible: true,
+      row,
+    });
+  };
+
+  return (
+    <PageHeaderWrapper title="就餐白名单">
+      <ConfigProvider locale={zhCN}>
+        <Card>
+          <Row align="middle" justify="space-between" style={{ marginBottom: 20 }}>
+            <Filter innerParams={innerParams} setParams={setParams} />
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => {
+                setAddModal({
+                  visible: true,
+                });
+              }}
+            >
+              新增
+            </Button>
+          </Row>
+          <Table
+            loading={loading}
+            dataSource={list}
+            pagination={paginationConfig}
+            rowKey="id"
+            onChange={(_pagination) => setParams({ ..._pagination }, true)}
+          >
+            <Column title="姓名" dataIndex="name" />
+            <Column title="手机号" dataIndex="mobile" />
+            <Column title="备注" dataIndex="remark" />
+            <Column
+              title="操作"
+              dataIndex="btns"
+              render={(text, row: API.Item) => (
+                <span>
+                  <a
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleEdit(row);
+                    }}
+                  >
+                    编辑
+                  </a>
+                  <Divider type="vertical" />
+                  <Popconfirm title="是否删除?" onConfirm={() => handleDelete(row)}>
+                    <a
+                      onClick={(e) => {
+                        e.preventDefault();
+                      }}
+                      style={{ color: 'red' }}
+                    >
+                      删除
+                    </a>
+                  </Popconfirm>
+                </span>
+              )}
+            />
+          </Table>
+        </Card>
+        <AddModal
+          visible={addModal.visible}
+          row={addModal.row}
+          onCancel={() => {
+            setAddModal({ visible: false });
+          }}
+          onRefresh={() => setParams({ ...innerParams }, true)}
+        />
+      </ConfigProvider>
+    </PageHeaderWrapper>
+  );
+}