提交本地代码

src/pages/member/memberImport/index.tsx

-import React, { useState, useRef } from 'react';
+import React, { ReactNode, useState, useEffect, useRef } from 'react';
 import { history } from 'umi';
-import { Space, Dropdown, Button, Card, Menu, Popconfirm } from 'antd';
-import { DeleteOutlined, PlusOutlined, DownOutlined } from '@ant-design/icons';
+import {
+  Row,
+  Col,
+  Tooltip,
+  Input,
+  Select,
+  Button,
+  Card,
+  Dropdown,
+  Menu,
+  Popconfirm,
+  Modal,
+} from 'antd';
+import {
+  PlusOutlined,
+  DeleteOutlined,
+  EyeOutlined,
+  ClockCircleOutlined,
+  UpOutlined,
+  DownOutlined,
+} from '@ant-design/icons';
 import { StandardTable } from 'god';
 import { ColumnType } from 'antd/lib/table/interface';
-import { createFormActions } from '@formily/antd';
-import EyePreview from '@/components/EyePreview';
-import NiceForm from '@/components/NiceForm';
-import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
-import { FORM_FILTER_PATH } from '@/formSchema/const';
-import { importSchema } from './schema';
-import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
-import UploadModal from '@/components/UploadModal';
+import {
+  SchemaForm,
+  SchemaMarkupField as Field,
+  createFormActions,
+  Submit,
+  Reset,
+} from '@formily/antd';
+import { FormMegaLayout, Input as oInput } from '@formily/antd-components';
+import moment from 'moment';
 import { PublicApi } from '@/services/api';
+import style from './index.less';
+import UploadModal from '@/components/UploadModal';
+import { timeRange } from '@/utils/index';
 
-const formActions = createFormActions();
+const { Option } = Select;
 
-// 模拟请求
-const fetchData = async (params: any) => {
-  const res = await PublicApi.getMemberMaintenancePage(params);
-  return res.data;
-};
+const actions = createFormActions();
 
-const memberImport: React.FC<{}> = () => {
+const memberMaintain: React.FC<[]> = () => {
   const ref = useRef<any>({});
+  const [isFirst, setIsFirst] = useState(false);
+  const [isSearch, setIsSearch] = useState(false);
+  const [searchName, setSearchName] = useState('');
   const [searchForm, setSearchForm] = useState<any>({
-    innerStatus: 0, // 内部状态
-    outerStatus: 0, // 外部状态
-    status: 0, // 会员状态
+    roleId: 0, // 会员角色
+    memberType: 0, // 会员类型
+    level: 0, // 会员等级
+    source: 0, // 注册来源
+    innerStatus: ['0'], // 内部状态
+    outerStatus: ['0'], // 外部状态
+    status: ['0'], // 会员状态
     timeRange: 0, // 申请时间
     startDate: '', // 申请开始时间
     endDate: '', // 申请结束时间
   });
+  const [searchItem, setSearchItem] = useState<any>({});
   const [visibleModal, setVisibleModal] = useState(false);
-  const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
+  const [modalState, setModalState] = useState({
+    visibleModal: false,
+    title: '',
+  });
+  const [currentItem, setCurrentItem] = useState<any>({});
 
-  const columns: ColumnType<any>[] = [
+  const defaultColumns: ColumnType<any>[] = [
     {
       title: 'ID',
       dataIndex: 'memberId',
@@ -47,67 +78,165 @@ const memberImport: React.FC<{}> = () => {
       dataIndex: 'name',
       align: 'center',
       key: 'name',
-      render: (text: any, record: any) => (
-        <EyePreview
-          url={`/memberCenter/memberAbility/manage/addMember?id=${record.id}&preview=1`}
-        >
-          {text}
-        </EyePreview>
-      ),
+      render: (text: any, record: any) => {
+        return (
+          <div className={style.nameCell}>
+            <div
+              className={style.nameCellTitle}
+              onClick={() =>
+                history.push('/memberAbility/manage/addMember?type=check')
+              }
+            >
+              {text}&nbsp;
+              <EyeOutlined />
+            </div>
+            <div className={style[`levelIcon${record.level}`]}></div>
+          </div>
+        );
+      },
     },
     {
       title: '会员类型',
-      dataIndex: 'type',
+      dataIndex: 'memberTypeName',
       align: 'center',
-      key: 'type',
-      filtered: true,
+      key: 'memberTypeName',
+      render: (text: any, record: any) => <>{text}</>,
     },
     {
       title: '会员角色',
-      dataIndex: 'role',
+      dataIndex: 'roleName',
       align: 'center',
-      key: 'role',
+      key: 'roleName',
+      render: (text: any, record: any) => <>{text}</>,
     },
     {
       title: '申请来源/时间',
-      dataIndex: 'applyTime',
+      dataIndex: 'sourceName',
       align: 'center',
-      key: 'applyTime',
+      key: 'sourceName',
+      render: (text: any, record: any) => {
+        let component: ReactNode = null;
+        component = (
+          <>
+            <div>{text}</div>
+            <div>
+              <ClockCircleOutlined /> {record.registerTime}
+            </div>
+          </>
+        );
+        return component;
+      },
     },
     {
       title: '会员状态',
       dataIndex: 'status',
       align: 'center',
-      filters: [
-        { text: 'Male', value: 'male' },
-        { text: 'Female', value: 'female' },
-      ],
-      key: 'status',
+      key: 'memberStatus',
+      filters: [],
+      filteredValue: searchForm.memberStatus || ['0'],
+      filterMultiple: false,
+      render: (text: any, record: any) => {
+        let component: ReactNode = null;
+        component = (
+          <div
+            style={
+              record.status === 1 ? { color: '#42526E' } : { color: '#00B37A' }
+            }
+          >
+            {record.status === 1 ? '冻结' : '正常'}
+          </div>
+        );
+        return component;
+      },
     },
     {
       title: '外部状态',
-      dataIndex: 'externalStatus',
+      dataIndex: 'outerStatusName',
       align: 'center',
-      filters: [
-        { text: 'Male', value: 'male' },
-        { text: 'Female', value: 'female' },
-      ],
-      key: 'externalStatus',
+      key: 'outerStatus',
+      filters: [],
+      filteredValue: searchForm.outerStatus || ['0'],
+      filterMultiple: false,
+      render: (text: any, record: any) => {
+        let component: ReactNode = null;
+        component = (
+          <div
+            style={
+              record.outerStatusName === 1
+                ? { color: '#FF991F' }
+                : record.outerStatusName === 2
+                ? { color: '#00B37A' }
+                : { color: '#E63F3B' }
+            }
+          >
+            {text}
+          </div>
+        );
+        return component;
+      },
+    },
+    {
+      title: '内部状态',
+      dataIndex: 'innerStatusName',
+      align: 'center',
+      key: 'innerStatus',
+      filters: [],
+      filteredValue: searchForm.innerStatus || ['0'],
+      filterMultiple: false,
+      render: (text: any, record: any) => {
+        let component: ReactNode = null;
+        component = (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <span
+              className={
+                record.innerStatusName === 1
+                  ? 'commonStatusModify'
+                  : record.innerStatusName === 2
+                  ? 'commonStatusInvalid'
+                  : record.innerStatusName === 3
+                  ? 'commonStatusValid'
+                  : 'commonStatusNoPass'
+              }
+            >
+              <span className="commonStatus"></span>
+            </span>
+            {text}
+          </div>
+        );
+        return component;
+      },
     },
     {
       title: '操作',
       dataIndex: 'option',
       align: 'center',
-      render: (record: any) => {
-        return (
+      render: (text: any, record: any) => {
+        let component: ReactNode = null;
+        component = (
           <>
-            <Button type="link">提交审核</Button>
+            <Button
+              type="link"
+              onClick={() => {
+                setCurrentItem(record),
+                  setModalState({
+                    visibleModal: true,
+                    title: record.status === 1 ? '会员解冻' : '会员冻结',
+                  });
+              }}
+              style={{ color: '#00B37A' }}
+            >
+              {record.status === 1 ? '解冻' : '冻结'}
+            </Button>
             <Button
               type="link"
               onClick={() =>
-                history.push(
-                  `/memberCenter/memberAbility/manage/addMember?id=${record.id}`,
-                )
+                history.push('/memberAbility/manage/addMember?type=change')
               }
             >
               编辑
@@ -117,6 +246,7 @@ const memberImport: React.FC<{}> = () => {
             </Popconfirm>
           </>
         );
+        return component;
       },
     },
   ];
@@ -129,83 +259,307 @@ const memberImport: React.FC<{}> = () => {
     </Menu>
   );
 
-  const rowSelection = {
-    selectedRowKeys: selectedRowKeys,
-    onChange: (selectedRowKeys: any, selectedRows: any) => {},
+  const [columns, setColumns] = useState<any[]>(defaultColumns);
+
+  // 模拟请求
+  const fetchData = (params: any) => {
+    return new Promise((resolve, reject) => {
+      PublicApi.getMemberMaintenancePage({
+        ...searchForm,
+        name: params.name || '',
+        current: params.current,
+        pageSize: params.pageSize,
+      }).then(res => {
+        resolve(res.data);
+      });
+    });
   };
 
-  // 初始化高级筛选选项
-  const fetchSelectOptions = async () => {
-    const { data } = await PublicApi.getMemberMaintenancePageitems();
-    return {
-      memberType: fetchSomeOptions(data.memberTypes),
-      roleId: fetchSomeOptions(data.memberRoles),
-      level: fetchSomeOptions(data.memberLevels),
-      source: fetchSomeOptions(data.memberSource),
+  // 初始化表头筛选项接收的数据类型
+  const processData = (data: any) => {
+    for (let elem of data) {
+      elem.value = elem.id;
+    }
+  };
+
+  const handleSearch = (filter: any) => {
+    let obj = {
+      ...searchForm,
+      status: filter.memberStatus || '',
+      outerStatus: filter.outerStatus || '',
+      innerStatus: filter.innerStatus || '',
+    };
+    setSearchForm(obj);
+  };
+
+  useEffect(() => {
+    if (!isFirst) return setIsFirst(true);
+    ref.current.reload();
+  }, [
+    searchForm.memberType,
+    searchForm.roleId,
+    searchForm.level,
+    searchForm.source,
+  ]);
+
+  useEffect(() => {
+    // if (!isFirst) return;
+    //   setIsFirst(false);
+    let timeRanges = timeRange(searchForm.timeRange);
+    setSearchForm({
+      ...searchForm,
+      startDate: timeRanges.st,
+      endDate: timeRanges.et,
+    });
+    ref.current.reload();
+    // console.log(timeRanges);
+  }, [searchForm.timeRange]);
+
+  useEffect(() => {
+    PublicApi.getMemberMaintenancePageitems().then(res => {
+      Promise.all([
+        processData(res.data.memberStatus),
+        processData(res.data.innerStatus),
+        processData(res.data.outerStatus),
+        setSearchItem(res.data),
+      ]).then(() => {
+        defaultColumns.find((target: any) => {
+          if (target.filters) {
+            target.filters = res.data[target.key];
+          }
+        });
+        setColumns([...defaultColumns]);
+      });
+    });
+  }, ['searchItem']);
+
+  const handleReset = () => {
+    let searchKey = {
+      roleId: 0,
+      name: '',
+      memberType: 0,
+      level: 0,
+      source: 0,
+      innerStatus: ['0'],
+      outerStatus: ['0'],
+      status: ['0'],
+      timeRange: 0,
+      startDate: '',
+      endDate: '',
     };
+    setSearchForm({ ...searchKey });
   };
 
-  const fetchSomeOptions = data => {
-    return data.map(v => ({ label: v.text, value: v.id }));
+  const handleSubmit = (values: any, type: string) => {
+    if (type === 'confirm') {
+      PublicApi.postMemberMaintenanceStatus({
+        memberId: currentItem.memberId,
+        validateId: currentItem.validateId,
+        status: currentItem.status,
+        remark: values.remark,
+      }).then(res => {
+        if (res.code === 1000) {
+          ref.current.reload();
+          setModalState({ ...modalState, visibleModal: false });
+        }
+      });
+    } else {
+      setModalState({ ...modalState, visibleModal: false });
+    }
   };
 
   const handleMenuClick = (e: any) => {
     console.log('menu', e);
   };
 
-  const controllerBtns = (
-    <Space>
-      <Button
-        type="primary"
-        icon={<PlusOutlined />}
-        onClick={() =>
-          history.push('/memberCenter/memberAbility/manage/addMember')
-        }
-      >
-        新建
-      </Button>
-      <Button onClick={() => setVisibleModal(true)}>导入</Button>
-      <Dropdown.Button
-        overlay={menu}
-        trigger={['click']}
-        icon={<DownOutlined />}
-      >
-        更多
-      </Dropdown.Button>
-    </Space>
-  );
-
   return (
     <Card>
       <StandardTable
-        tableProps={{ rowKey: 'id' }}
+        tableProps={{
+          rowKey: 'memberId',
+          onChange: (pagination: any, filter: any) => handleSearch(filter),
+        }}
         columns={columns}
         currentRef={ref}
-        rowSelection={rowSelection}
         fetchTableData={(params: any) => fetchData(params)}
         controlRender={
-          <NiceForm
-            actions={formActions}
-            onSubmit={values => ref.current.reload(values)}
-            expressionScope={{
-              controllerBtns,
-            }}
-            effects={($, actions) => {
-              useStateFilterSearchLinkageEffect(
-                $,
-                actions,
-                'name',
-                FORM_FILTER_PATH,
-              );
-              useAsyncInitSelect(
-                ['memberType', 'roleId', 'level', 'source'],
-                fetchSelectOptions,
-              );
-            }}
-            schema={importSchema}
-          />
+          <Row>
+            <Col className={style.col} span={8}>
+              <Button
+                type="primary"
+                onClick={() =>
+                  history.push('/memberAbility/manage/addMember?type=add')
+                }
+              >
+                <PlusOutlined />
+                新建
+              </Button>
+              <Button
+                style={{ margin: '0 16px' }}
+                onClick={() => setVisibleModal(true)}
+              >
+                导入
+              </Button>
+              <Dropdown.Button
+                overlay={menu}
+                trigger={['click']}
+                icon={<DownOutlined />}
+              >
+                更多
+              </Dropdown.Button>
+            </Col>
+            <Col
+              className={style.col}
+              span={12}
+              offset={4}
+              style={{ textAlign: 'right' }}
+            >
+              <Tooltip
+                trigger={['focus']}
+                placement="top"
+                title={<span>输入ID、会员名称&nbsp;&nbsp;进行搜索</span>}
+              >
+                <Input.Search
+                  style={{ width: '232px' }}
+                  value={searchName}
+                  placeholder="搜索"
+                  onChange={e => setSearchName(e.target.value)}
+                  onSearch={val => setSearchForm({ ...searchForm, name: val })}
+                />
+              </Tooltip>
+              <Button
+                style={{ margin: '0 16px' }}
+                onClick={() => setIsSearch(!isSearch)}
+              >
+                高级筛选{isSearch ? <UpOutlined /> : <DownOutlined />}
+              </Button>
+              <Button onClick={() => handleReset()}>重置</Button>
+            </Col>
+            {isSearch ? (
+              <Row className={style.subRow}>
+                <Col className={style.subCol}>
+                  <Select
+                    className={style.select}
+                    value={searchForm.memberType}
+                    onChange={val =>
+                      setSearchForm({ ...searchForm, memberType: val })
+                    }
+                  >
+                    {searchItem.memberTypes &&
+                      searchItem.memberTypes.map((item: any, index: string) => {
+                        return (
+                          <Option value={item.id} key={index}>
+                            {item.text}
+                          </Option>
+                        );
+                      })}
+                  </Select>
+                  <Select
+                    className={style.select}
+                    value={searchForm.roleId}
+                    onChange={val =>
+                      setSearchForm({ ...searchForm, roleId: val })
+                    }
+                  >
+                    {searchItem.memberRoles &&
+                      searchItem.memberRoles.map((item: any, index: string) => {
+                        return (
+                          <Option value={item.id} key={index}>
+                            {item.text}
+                          </Option>
+                        );
+                      })}
+                  </Select>
+                  <Select
+                    className={style.select}
+                    value={searchForm.level}
+                    onChange={val =>
+                      setSearchForm({ ...searchForm, level: val })
+                    }
+                  >
+                    {searchItem.memberLevels &&
+                      searchItem.memberLevels.map(
+                        (item: any, index: string) => {
+                          return (
+                            <Option value={item.id} key={index}>
+                              {item.text}
+                            </Option>
+                          );
+                        },
+                      )}
+                  </Select>
+                  <Select
+                    className={style.select}
+                    value={searchForm.source}
+                    onChange={val =>
+                      setSearchForm({ ...searchForm, source: val })
+                    }
+                  >
+                    {searchItem.memberSource &&
+                      searchItem.memberSource.map(
+                        (item: any, index: string) => {
+                          return (
+                            <Option value={item.id} key={index}>
+                              {item.text}
+                            </Option>
+                          );
+                        },
+                      )}
+                  </Select>
+                  <Select
+                    className={style.select}
+                    value={searchForm.timeRange}
+                    onChange={val =>
+                      setSearchForm({ ...searchForm, timeRange: val })
+                    }
+                  >
+                    <Option value={0}>时间范围(全部)</Option>
+                    <Option value={1}>今天</Option>
+                    <Option value={2}>一周内</Option>
+                    <Option value={3}>一个月内</Option>
+                    <Option value={4}>三个月内</Option>
+                    <Option value={5}>六个月内</Option>
+                    <Option value={6}>一年内</Option>
+                    <Option value={7}>一年前</Option>
+                  </Select>
+                </Col>
+              </Row>
+            ) : (
+              ''
+            )}
+          </Row>
         }
       />
+      <Modal
+        title={modalState.title}
+        visible={modalState.visibleModal}
+        onOk={() => actions.submit()}
+        onCancel={() => handleSubmit(false, 'cancel')}
+        destroyOnClose
+      >
+        <SchemaForm
+          components={{ TextArea: oInput.TextArea }}
+          actions={actions}
+          onSubmit={values => handleSubmit(values, 'confirm')}
+        >
+          <FormMegaLayout labelAlign="top">
+            <Field
+              name="remark"
+              title={`${modalState.title}原因`}
+              x-rules={{
+                required: true,
+                message: `请填写${
+                  currentItem.status === '1' ? '冻结' : '解冻'
+                }的原因`,
+              }}
+              x-component-props={{
+                placeholder: '在此输入你的内容，最长120个字符，60个汉字',
+              }}
+              x-component="TextArea"
+            />
+          </FormMegaLayout>
+        </SchemaForm>
+      </Modal>
       <UploadModal
         visibleModal={visibleModal}
         fileText="会员资料"
@@ -215,4 +569,4 @@ const memberImport: React.FC<{}> = () => {
   );
 };
 
-export default memberImport;
+export default memberMaintain;

src/pages/transaction/stockSellStorage/bills/addBills.tsx

@@ -239,7 +239,7 @@ const AddBills: React.FC<{}> = (props: any) => {
             tableColumns,
             tableAddButton,
           }}
-          effects={$ => {
+          effects={$=> {
             $('onFieldValueChange', 'relevanceInvoices').subscribe(state => {
               setRelevance(state.value);
               setModalColumns(