开发中

src/components/StandardTable/index.tsx

+import React from 'react';
+import { Table } from 'antd';
+import classNames from 'classnames';
+import { TableProps, TablePaginationConfig, ColumnType } from 'antd/lib/table';
+import { PaginationProps } from 'antd/lib/pagination';
+import styles from './index.less';
+
+
+export interface StandardTableProps extends TableProps<any> {
+  pagination: TablePaginationConfig;
+  onPaginationChange?: (page: number, size: number) => void;
+};
+
+export default class StandardTable extends React.PureComponent<StandardTableProps> {
+
+  state = {
+    page: 1,
+    size: 0,
+  };
+
+  handlePaginationChange = (page: number, size: number) => {
+    const { pagination = {}, onPaginationChange } = this.props;
+    const { current, pageSize } = pagination;
+
+    // 单独控制当前页 或 当前页数
+    // if (!('current' in pagination)) {
+    //   this.setState({ current });
+    // }
+    // if (!('pageSize' in pagination)) {
+    //   this.setState({ pageSize });
+    // }
+
+     if (onPaginationChange) {
+      onPaginationChange(page, size);
+     }
+  };
+
+  render() {
+    const { page, size } = this.state; 
+    const { 
+      columns, 
+      dataSource,
+      rowKey = 'id', 
+      pagination = {}, 
+      loading, 
+      className, 
+      ...restProps
+    } = this.props;
+
+    const newPagination: any = pagination ? {
+      current: page, 
+      pageSize: size,
+      showSizeChanger: true,
+      showQuickJumper: true,
+      onChange: this.handlePaginationChange,
+      onShowSizeChange: this.handlePaginationChange,
+      size: 'small', 
+      showTotal: () => `共 ${pagination.total || 0} 条`,
+      ...pagination, 
+    } : false;
+
+    return (
+      <div className={classNames(className)}>
+        <Table 
+          rowKey={rowKey}
+          columns={columns}
+          dataSource={dataSource}
+          loading={loading}
+          pagination={newPagination}
+          {...restProps}
+        />
+      </div>
+    )
+  }
+}
\ No newline at end of file

src/constants/index.ts

@@ -19,4 +19,9 @@ export const Environment_Status = {
 }
 
 // 1是阿里云oss服务器, 2是本地文件服务器
-export const UPLOAD_TYPE = isDev ? 2 : 1
\ No newline at end of file
+export const UPLOAD_TYPE = isDev ? 2 : 1
+
+// 会员规则类型
+export const VIP_RULE_TRANSACTION = 1;         // 交易
+export const VIP_RULE_LOGIN = 2;               // 登录
+export const VIP_RULE_COMMENT = 3;             // 评论

src/global/styles/global.less

@@ -239,4 +239,28 @@ h6 {
       margin-right: 0;
     }
   }
+}
+
+// 可编辑表格项公用样式
+.editable-cell {
+  position: relative;
+}
+
+.editable-cell-value-wrap {
+  padding: 5px 12px;
+  min-height: 32px;
+  cursor: pointer;
+}
+
+.editable-row:hover 
+.editable-cell-value-wrap {
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 4px 11px;
+}
+
+.editable-row .ant-form-explain {
+  position: absolute;
+  font-size: 12px;
+  margin-top: -4px;
 }
\ No newline at end of file

src/pages/member/memberUpgradeRule/index.tsx

-import React, { useState, useRef, ReactNode } from 'react';
-import { history } from 'umi';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Card, Input, Button } from 'antd';
-import { ContainerOutlined } from '@ant-design/icons';
-import { StandardTable } from 'god';
+import React, { useContext, useState, useEffect, useRef } from 'react';
+import { 
+  Card, 
+  Input, 
+  Button, 
+  Form, 
+} from 'antd';
 import { ColumnType } from 'antd/lib/table/interface';
 import { PublicApi } from '@/services/api';
+import { VIP_RULE_TRANSACTION, VIP_RULE_LOGIN, VIP_RULE_COMMENT } from '@/constants';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { ContainerOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
+
+const EditableContext = React.createContext<any>({});
+
+interface EditableRowProps {
+  index: number;
+}
+
+const EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {
+  const [form] = Form.useForm();
+  return (
+    <Form form={form} component={false}>
+      <EditableContext.Provider value={form}>
+        <tr {...props} />
+      </EditableContext.Provider>
+    </Form>
+  );
+};
+
+interface EditableCellProps {
+  title: React.ReactNode;
+  editable: boolean;
+  children: React.ReactNode;
+  dataIndex: string; 
+  index: number; 
+  record: any; 
+  rules: any; 
+  handleSave: (record: any) => void;
+  addonAfter: React.ReactNode, 
+}
+
+const EditableCell: React.FC<EditableCellProps> = ({
+  title,
+  editable,
+  children,
+  dataIndex, 
+  index, 
+  record, 
+  rules = [], 
+  addonAfter = null, 
+  handleSave,
+  ...restProps
+}) => {
+  const [editing, setEditing] = useState(true);
+  const inputRef = useRef();
+  const form = useContext(EditableContext);
+  const inputId = `${dataIndex}-${index}`;          // 拼接 name-index，不然全部展示输入框会警告 id 不唯一的问题
+
+  useEffect(() => {
+    if (editing) {
+      // inputRef.current.focus();
+    }
+  }, [editing]);
+
+  const toggleEdit = () => {
+    setEditing(!editing);
+    form.setFieldsValue({ [dataIndex]: record[dataIndex] });
+  };
+
+  const save = async e => {
+    try {
+      const values = await form.validateFields();
+
+      console.log('values', values)
+
+      // toggleEdit();
+      handleSave({ 
+        ...record, 
+        [dataIndex]: values[inputId],  
+      });
+    } catch (errInfo) {
+      console.log('Save failed:', errInfo);
+    }
+  };
+
+  let childNode = children;
+
+  if (editable) {
+    childNode = editing ? (
+      <Form.Item
+        style={{ margin: 0 }}
+        name={inputId}
+        rules={rules}
+        initialValue={record[dataIndex]}
+      >
+        <Input 
+          ref={inputRef} 
+          onPressEnter={save} 
+          onBlur={save} 
+          addonAfter={addonAfter}
+        />
+      </Form.Item>
+    ) : (
+      <div 
+        className="editable-cell-value-wrap" 
+        style={{ paddingRight: 24 }} onClick={toggleEdit}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  return <td {...restProps}>{childNode}</td>;
+};
+
+interface Columns extends ColumnType<any> {
+  editable?: boolean;
+  rules?: Array<any>;
+}
 
 const fetchData = async (params: any) => {
   const res = await PublicApi.getMemberManageLevelRulePage(params);
@@ -13,55 +126,117 @@ const fetchData = async (params: any) => {
 };
 
 const MemberUpgradeRule: React.FC<[]> = () => {
-  const ref = useRef({});
+  
+  const [total, setTotal] = useState(0);
+  const [dataSource, setDataSource] = useState([]);
+  const [listLoading, setListLoading] = useState(true);
+
+  const getRuleList = async (params) => {
+    const res = await PublicApi.getMemberManageLevelRulePage(params);
 
-  const columns: ColumnType<any>[] = [
+    if (res.code === 1000) {
+      const { data, totalCount } = res.data; 
+      setDataSource(data);
+      setTotal(totalCount);
+    }
+    setListLoading(false);
+  };
+
+  useEffect(() => {
+    getRuleList({
+      current: 1, 
+      pageSize: 1, 
+    });
+  }, []);
+
+  const columns: Columns[] = [
     {
       title: 'ID',
       dataIndex: 'id',
       align: 'center',
-      key: 'id',
     },
     {
       title: '项目',
       dataIndex: 'ruleName',
       align: 'center',
-      key: 'ruleName',
       render: (text: any, record: any) => <span>{text}</span>,
     },
     {
       title: '项目说明',
       dataIndex: 'remark',
       align: 'center',
-      key: 'remark',
     },
     {
       title: '可获取的分值',
       dataIndex: 'point',
-      align: 'center',
-      key: 'point',
-      render: (text: any, record: any) => {
-        let component: ReactNode = null;
-        component =
-          record.id === 1 ? (
-            <Input
-              addonAfter="%"
-              value={record.point}
-              onChange={e => {
-                e.preventDefault();
-                record.point = e.target.value;
-              }}
-            />
-          ) : (
-            <Input value={record.point} />
-          );
-        return component;
-      },
+      width: '30%',
+      editable: true, 
     },
   ];
 
+  const handlePaginationChange = (page: number, size: number) => {
+    console.log(page, size)
+  };
+
+  const handleSave = row => {
+    console.log('new row', row)
+  };
+
   const handleSubmit = () => {};
 
+  const components = {
+    body: {
+      row: EditableRow,
+      cell: EditableCell,
+    },
+  };
+
+  const rulesMap = {
+    [VIP_RULE_TRANSACTION]: [
+      {
+        pattern: /^([0]|[1-9]+[0-9]*)(\.[0-9]+)?$/,
+        message: '请输入正确的格式',
+      },
+    ],
+    [VIP_RULE_LOGIN]: [
+      {
+        pattern: /^[0]$|^[1-9]+[0-9]*$/,
+        message: '请输入正确的格式',
+      },
+    ],
+    [VIP_RULE_COMMENT]: [
+      {
+        pattern: /^[0]$|^[1-9]+[0-9]*$/,
+        message: '请输入正确的格式',
+      },
+    ],
+  };
+  
+  const newColumns:any = columns.map(col => {
+    if (!col.editable) {
+      return col;
+    }
+    return {
+      ...col,
+      onCell: (record, index) => ({
+        handleSave,
+        record, 
+        index, 
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editable: col.editable || false,
+        rules: [
+          {
+            required: true,
+            message: '请输入相应值',
+          }, 
+          ...(rulesMap[record.ruleTypeEnum] || []), 
+        ], 
+        addonAfter: record.ruleTypeEnum === VIP_RULE_TRANSACTION ? '%' : null, 
+      }),
+    };
+  });
+
   return (
     <PageHeaderWrapper
       extra={
@@ -75,11 +250,22 @@ const MemberUpgradeRule: React.FC<[]> = () => {
       }
     >
       <Card>
+        <div className="editable-row">
+          <div className="ant-form-explain">
+            123
+          </div>
+        </div>
+
         <StandardTable
-          tableProps={{ rowKey: 'id' }}
-          columns={columns}
-          currentRef={ref}
-          fetchTableData={(params: any) => fetchData(params)}
+          dataSource={dataSource}
+          columns={newColumns}
+          components={components}
+          rowClassName={() => 'editable-row'} 
+          loading={listLoading}
+          pagination={{
+            total,
+          }}
+          onPaginationChange={handlePaginationChange}
         />
       </Card>
     </PageHeaderWrapper>