页面列表与按钮样式调整

2025-07-10 15:38:05 +08:00
parent 42eca55bc1
commit 7049687456
33 changed files with 1525 additions and 1647 deletions
--- a/src/pages/supplier/backend/changeProgressInquiry/index.tsx
+++ b/src/pages/supplier/backend/changeProgressInquiry/index.tsx
@ -2,12 +2,16 @@ import React, { useEffect, useState } from "react";
 import { useIntl } from 'umi';
 import { Form, Button, Table, Select, DatePicker, Input } from 'antd';
 import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
-import { SearchOutlined } from '@ant-design/icons';
-import { getSupplierChangePage } from './services';
+import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
+//时间转换
 import moment from 'moment';
-import DetailView from './components/DetailView'; 
+//查看组件
+import DetailView from './components/DetailView';
+//字典与接口
+import { getSupplierChangePage } from './services';
 import { getDictList } from '@/servers/api/dicts'
-
+//统一列表分页
+import tableProps from '@/utils/tableProps'
 interface Data {
  deptName: string;
  categoryName: string;
@ -87,7 +91,7 @@ const CooperateEnterprise: React.FC = () => {
  //重置
  const handleReset = () => {
    searchForm.resetFields();
-    getList({ pageNo: 1, pageSize: pagination.pageSize ?? 10  });
+    getList({ pageNo: 1, pageSize: pagination.pageSize ?? 10 });
  };
  //搜索
  const handleSearch = () => {
@ -113,7 +117,7 @@ const CooperateEnterprise: React.FC = () => {
      const { changeDesc, createTime, deptNames, enterpriseType } = values;
      const startTime = createTime ? moment(createTime[0]).format('YYYY-MM-DD') : '';
      const endTime = createTime ? moment(createTime[1]).format('YYYY-MM-DD') : '';
-      const { code , data } = await getSupplierChangePage({...params, changeDesc, deptNames, enterpriseType,startTime,endTime});
+      const { code, data } = await getSupplierChangePage({ ...params, changeDesc, deptNames, enterpriseType, startTime, endTime });
      if (code === 200) {
        setData(data.records);
        setPagination({ current: params.pageNo, pageSize: params.pageSize, total: data.total });
@ -127,7 +131,7 @@ const CooperateEnterprise: React.FC = () => {
  //初始化
  useEffect(() => {
    getDictList('approve_type').then((res) => {
-      if(res.code == 200) {
+      if (res.code == 200) {
        setEnterpriseType(res.data)
      }
    })
@ -137,55 +141,61 @@ const CooperateEnterprise: React.FC = () => {

  return (
    <>
-      <Form
-        form={searchForm}
-        layout="inline"
-        onFinish={handleSearch}
-        style={{ marginBottom: 16 }}
-      >
-        <Form.Item name="changeDesc" label="变更内容">
-            <Input style={{ width: 160 }} placeholder="请输入变更内容" allowClear maxLength={50} />
-        </Form.Item>
-        <Form.Item name="deptNames" label="审批单位">
-          <Select style={{ width: 160 }} placeholder="请选择审批单位" allowClear>
-            <Select.Option value="品类1">品类1</Select.Option>
-            <Select.Option value="品类2">品类2</Select.Option>
-            <Select.Option value="品类3">品类3</Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item name="createTime" label="提交时间">
-          <DatePicker.RangePicker placeholder={['开始时间', '结束时间']} allowClear />
-        </Form.Item>
-        <Form.Item name="enterpriseType" label="审批状态">
-          <Select style={{ width: 160 }} placeholder="请选择审批状态" allowClear>
-            {enterpriseType?.map(item => (
-              <Select.Option key={item.code} value={item.code}>{item.dicName}</Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item>
-          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
-            搜索
-          </Button>
-        </Form.Item>
-        <Form.Item>
-          <Button onClick={handleReset}>重置</Button>
-        </Form.Item>
-      </Form>
-      <Table
-        rowKey="id"
-        className="custom-table"
-        columns={columns}
-        dataSource={data}
-        pagination={pagination}
-        loading={loading}
-        onChange={(pagination) => getList({ pageNo: pagination.current!, pageSize: pagination.pageSize! })}
-      />
-      <DetailView
-        visible={detailVisible}
-        onClose={handleDetailClose}
-        detailId={currentDetail}
-      />
+      <div className="common-container">
+        <div className="filter-action-row">
+          <Form
+            form={searchForm}
+            layout="inline"
+            onFinish={handleSearch}
+            className="filter-form"
+          >
+            <Form.Item name="changeDesc" label="变更内容">
+              <Input style={{ width: 160 }} placeholder="请输入变更内容" allowClear maxLength={50} />
+            </Form.Item>
+            <Form.Item name="deptNames" label="审批单位">
+              <Select style={{ width: 160 }} placeholder="请选择审批单位" allowClear>
+                <Select.Option value="品类1">品类1</Select.Option>
+                <Select.Option value="品类2">品类2</Select.Option>
+                <Select.Option value="品类3">品类3</Select.Option>
+              </Select>
+            </Form.Item>
+            <Form.Item name="createTime" label="提交时间">
+              <DatePicker.RangePicker placeholder={['开始时间', '结束时间']} allowClear />
+            </Form.Item>
+            <Form.Item name="enterpriseType" label="审批状态">
+              <Select style={{ width: 160 }} placeholder="请选择审批状态" allowClear>
+                {enterpriseType?.map(item => (
+                  <Select.Option key={item.code} value={item.code}>{item.dicName}</Select.Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item>
+              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />}>
+                搜索
+              </Button>
+            </Form.Item>
+            <Form.Item>
+               <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
+            </Form.Item>
+          </Form>
+        </div>
+        <Table
+          rowKey="id"
+          className="custom-table"
+          columns={columns}
+          dataSource={data}
+          pagination={{...tableProps.pagination, total: pagination.total }}
+          loading={loading}
+          onChange={(pagination) => getList({ pageNo: pagination.current!, pageSize: pagination.pageSize! })}
+          style={{ flex: 1, minHeight: 0 }}
+          scroll={{ y: 'calc(100vh - 350px)' }}
+        />
+        <DetailView
+          visible={detailVisible}
+          onClose={handleDetailClose}
+          detailId={currentDetail}
+        />
+      </div>
    </>
  );
 };
--- a/src/pages/supplier/backend/cooperateEnterprise/index.tsx
+++ b/src/pages/supplier/backend/cooperateEnterprise/index.tsx
@ -1,11 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { useIntl } from 'umi';
-import { Form, Button, Table, Select, DatePicker, TreeSelect } from 'antd';
+import { Form, Button, Table, DatePicker } from 'antd';
 import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
-import { SearchOutlined } from '@ant-design/icons';
+import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
+//接口
 import { getCategoryPage } from './services';
+//组件
 import CategorySelector from '@/components/CategorySelector';
-
+//统一列表分页
+import tableProps from '@/utils/tableProps'


 import moment from 'moment';
@ -38,7 +41,7 @@ const CooperateEnterprise: React.FC = () => {
      const startTime = createTime ? moment(createTime[0]).format('YYYY-MM-DD') : '';
      const endTime = createTime ? moment(createTime[1]).format('YYYY-MM-DD') : '';

-      const { code, data } = await getCategoryPage({...params, categoryId, deptId, startTime, endTime });
+      const { code, data } = await getCategoryPage({ ...params, categoryId, deptId, startTime, endTime });
      if (code === 200) {
        setData(data.records);
        setPagination({ current: params.pageNo, pageSize: params.pageSize, total: data.total });
@ -116,39 +119,45 @@ const CooperateEnterprise: React.FC = () => {
  ];
  return (
    <>
-      <Form
-        form={searchForm}
-        layout="inline"
-        onFinish={handleSearch}
-        style={{ marginBottom: 16 }}
-      >
-        <Form.Item name="deptId" label="准入单位">
-            {/* <CategorySelector multiple={false} style={{ width: 200 }} /> */}
-        </Form.Item>
-        <Form.Item name="categoryId" label="准入品类">
-            <CategorySelector multiple={false} style={{ width: 200 }} />
-        </Form.Item>
-        <Form.Item name="createTime" label="准入时间">
-          <DatePicker.RangePicker placeholder={['开始时间', '结束时间']} />
-        </Form.Item>
-        <Form.Item>
-          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
-            搜索
-          </Button>
-        </Form.Item>
-        <Form.Item>
-          <Button onClick={handleReset}>重置</Button>
-        </Form.Item>
-      </Form>
-      <Table
-        rowKey="id"
-        className="custom-table"
-        columns={columns}
-        dataSource={data}
-        pagination={pagination}
-        loading={loading}
-        onChange={(pagination) => getList({ pageNo: pagination.current!, pageSize: pagination.pageSize!  })}
-      />
+      <div className="common-container">
+        <div className="filter-action-row">
+          <Form
+            form={searchForm}
+            layout="inline"
+            onFinish={handleSearch}
+            className="filter-form"
+          >
+            <Form.Item name="deptId" label="准入单位">
+              {/* <CategorySelector multiple={false} style={{ width: 200 }} /> */}
+            </Form.Item>
+            <Form.Item name="categoryId" label="准入品类">
+              <CategorySelector multiple={false} style={{ width: 200 }} />
+            </Form.Item>
+            <Form.Item name="createTime" label="准入时间">
+              <DatePicker.RangePicker placeholder={['开始时间', '结束时间']} />
+            </Form.Item>
+            <Form.Item>
+              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />} >
+                搜索
+              </Button>
+            </Form.Item>
+            <Form.Item>
+              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
+            </Form.Item>
+          </Form>
+        </div>
+        <Table
+          rowKey="id"
+          className="custom-table"
+          columns={columns}
+          dataSource={data}
+          pagination={{...tableProps.pagination, total: pagination.total }}
+          loading={loading}
+          onChange={(pagination) => getList({ pageNo: pagination.current!, pageSize: pagination.pageSize! })}
+          style={{ flex: 1, minHeight: 0 }}
+          scroll={{ y: 'calc(100vh - 350px)' }}
+        />
+      </div>
    </>
  );
 };
--- a/src/pages/supplier/backend/supplierNews/index.tsx
+++ b/src/pages/supplier/backend/supplierNews/index.tsx
@ -2,9 +2,12 @@ import React, { useEffect, useState } from "react";
 import { useIntl } from 'umi';
 import { Form, Button, Table, Select, Input, Modal } from 'antd';
 import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
-import { SearchOutlined } from '@ant-design/icons';
+import { SearchOutlined, DeleteOutlined } from '@ant-design/icons';
+//字典与接口
 import { page, getExitMge } from './services';
 import { getDictList } from '@/servers/api/dicts'
+//统一列表分页
+import tableProps from '@/utils/tableProps'

 interface Data {
  deptName: string;
@ -93,9 +96,9 @@ const supplierNews: React.FC = () => {
  ];
  //初始化
  useEffect(() => {
-    getDictList('message_type').then((res:any) => {
+    getDictList('message_type').then((res: any) => {
      const { code, data } = res;
-      if(code == 200) {
+      if (code == 200) {
        setCategoryOptions(data)
      }
    })
@ -128,42 +131,48 @@ const supplierNews: React.FC = () => {

  return (
    <>
-      <Form
-        form={searchForm}
-        layout="inline"
-        onFinish={handleSearch}
-        style={{ marginBottom: 16 }}
-      >
-        <Form.Item name="content" label="消息内容">
-          <Input placeholder="请输入消息内容" allowClear maxLength={50} />
-        </Form.Item>
-        <Form.Item name="type" label="业务类型">
-          <Select placeholder="请选择业务类型" allowClear>
-            {categoryOptions.map((option) => (
-              <Select.Option key={option.code} value={option.code}>
-                {option.dicName}
-              </Select.Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item>
-          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
-            搜索
-          </Button>
-        </Form.Item>
-        <Form.Item>
-          <Button onClick={handleReset}>重置</Button>
-        </Form.Item>
-      </Form>
-      <Table
-        rowKey="id"
-        className="custom-table"
-        columns={columns}
-        dataSource={data}
-        pagination={pagination}
-        loading={loading}
-        onChange={(pagination) => getList({ pageNo: pagination.current!, pageSize: pagination.pageSize!, content: '', type: '' })}
-      />
+      <div className="common-container">
+        <div className="filter-action-row">
+          <Form
+            form={searchForm}
+            layout="inline"
+            onFinish={handleSearch}
+            className="filter-form"
+          >
+            <Form.Item name="content" label="消息内容">
+              <Input placeholder="请输入消息内容" allowClear maxLength={50} />
+            </Form.Item>
+            <Form.Item name="type" label="业务类型">
+              <Select placeholder="请选择业务类型" allowClear>
+                {categoryOptions.map((option) => (
+                  <Select.Option key={option.code} value={option.code}>
+                    {option.dicName}
+                  </Select.Option>
+                ))}
+              </Select>
+            </Form.Item>
+            <Form.Item>
+              <Button className="buttonSubmit" type="primary" htmlType="submit" icon={<SearchOutlined />}>
+                搜索
+              </Button>
+            </Form.Item>
+            <Form.Item>
+              <Button className="buttonReset" icon={<DeleteOutlined />} onClick={handleReset} >重置</Button>
+            </Form.Item>
+          </Form>
+        </div>
+        <Table
+          rowKey="id"
+          className="custom-table"
+          columns={columns}
+          dataSource={data}
+          pagination={{...tableProps.pagination, total: pagination.total }}
+          loading={loading}
+          onChange={(pagination) => getList({ pageNo: pagination.current!, pageSize: pagination.pageSize!, content: '', type: '' })}
+          style={{ flex: 1, minHeight: 0 }}
+          scroll={{ y: 'calc(100vh - 350px)' }}
+        />
+      </div>
    </>
  );
 };