feat: 新增请款单规则配置

config/routes/index.ts

@@ -53,7 +53,8 @@ const router = [
       //   component: '@/pages/home',
       //   // icon: 'BarChartOutlined'
       // },
-      ...asyncRoutes,
+      systemManageRoute,
+      // ...asyncRoutes,
       // ...refactorRoutes,
       {
         path: '/noAuth',

config/routes/refactorRoutes/systemManageRoute.ts

@@ -16,6 +16,17 @@ const router = {
       name: '平台规则',
       routes:[
         {
+          path: '/system/ruleSettingManager/invoiceProcessEng',
+          name: '请款单流程规则配置',
+          component: '@/pages/systemManage/invoiceProcessEng',
+        },
+        {
+          path: '/system/ruleSettingManager/invoiceProcessEng/add',
+          name: '新增请款单流程规则',
+          hideInMenu: true,
+          component: '@/pages/systemManage/invoiceProcessEng/add',
+        },
+        {
           path: '/system/ruleSettingManager/payStrategyList',
           name: '会员支付策略配置',
           noMargin: true,

src/pages/systemManage/invoiceProcessEng/add.tsx

+import React, { Fragment, useState } from 'react';
+import PeripheralLayout from '@/components/DetailLayout';
+import { Button, Form } from 'antd';
+import { SaveOutlined } from '@ant-design/icons';
+import ProcessEngLayout from './components/processEng';
+import ProcessSelectLayout from './components/processSelect';
+import InvoiceTypeLayout from './components/invoiceType';
+
+export const layout: any = {
+  colon: false,
+  labelCol: { style: { width: "144px" } },
+  labelAlign: "left"
+};
+
+const AddInvoiceProcessEng: React.FC<{}> = () => {
+const [form] = Form.useForm();
+const [percent, setPercent] = useState<number>(0);
+/**计算输入框输入了百分之多少 */
+const onValuesChange = (allValues) => {
+  const values = Object.values(allValues);
+  let num = 0;
+  values.forEach(_item => {
+    if (_item) {
+      num += 1
+    }
+  })
+  console.log(((num/values.length) * 100).toFixed(0) + '%')
+  console.log(form.getFieldsValue())
+}
+  return (
+    <Fragment>
+      <PeripheralLayout
+        hideBreak
+        detail='新增请款单流程规则'
+        tabLink={[
+          { title: '流程规则', id: 'processEng' },
+          { title: '流程选择', id: 'processSelect' },
+          { title: '适用会员', id: 'invoiceType' },
+        ]}
+        effect={
+          <Button
+            icon={<SaveOutlined />}
+            type="primary"
+          >
+            保存
+          </Button>
+        }
+        components={
+          <Form form={form} {...layout} onValuesChange={(_, allValues) => onValuesChange(allValues) }>
+            <ProcessEngLayout />
+            <ProcessSelectLayout />
+            <InvoiceTypeLayout />
+          </Form>
+        }
+      />
+    </Fragment>
+  )
+}
+export default AddInvoiceProcessEng

src/pages/systemManage/invoiceProcessEng/columns/index.ts

+import { ColumnType } from 'antd/lib/table/interface';
+
+/** 流程规则ID */
+export const id: ColumnType<any> = {
+  title: '流程规则ID',
+  key: 'id',
+  dataIndex: 'id',
+}
+
+/** 流程规则名称 */
+export const name: ColumnType<any> = {
+  title: '流程规则名称',
+  key: 'name',
+  dataIndex: 'name',
+}
+
+/** 流程名称 */
+export const processName: ColumnType<any> = {
+  title: '流程名称',
+  key: 'processName',
+  dataIndex: 'processName',
+}
+
+/** 操作时间 */
+export const createTime: ColumnType<any> = {
+  title: '操作时间',
+  key: 'createTime',
+  dataIndex: 'createTime',
+}
+
+/** 状态 */
+export const status: ColumnType<any> = {
+  title: '状态',
+  key: 'status',
+  dataIndex: 'status',
+}
+
+/** 操作 */
+export const operation: ColumnType<any> = {
+  title: '操作',
+  key: 'operation',
+  dataIndex: 'operation',
+}

src/pages/systemManage/invoiceProcessEng/components/card/index.less

+.cardLayout {
+  margin-bottom: 24px;
+  border-radius: 8px;
+  background-color: #FFF;
+  .card_title {
+    padding: 12px 16px;
+  }
+  .card_title_weight {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .card_body {
+    padding: 16px;
+  }
+}

src/pages/systemManage/invoiceProcessEng/components/card/index.tsx

+import React, { CSSProperties } from 'react';
+import style from './index.less';
+import cx from 'classnames';
+
+export interface cardProps {
+  /** 瞄点id */
+  id?: string,
+  /** 标题 */
+  title?: string,
+  /** 加粗标题 */
+  weight?: boolean,
+  /** body样式修改 */
+  bodyStyle?: CSSProperties,
+  /** calssName */
+  classNames?: string,
+}
+
+const CardLayout: React.FC<cardProps> = (props: any) => {
+  const { id, title, weight, children, bodyStyle, classNames, click } = props;
+  return (
+    <div id={id} className={cx(style.cardLayout, classNames && classNames)}>
+      {title && (
+        <div className={cx(style.card_title, weight && style.card_title_weight)}>{title}</div>
+      )}
+      <div className={style.card_body} style={bodyStyle && bodyStyle}>
+        {children}
+      </div>
+    </div>
+  )
+}
+export default CardLayout;

src/pages/systemManage/invoiceProcessEng/components/invoiceType/index.less

+.invoice-type {
+  :global {
+    .ant-radio-wrapper {
+      padding: 8px 16px;
+      border-radius: 4px;
+      border: 1px solid #F5F6F7;
+      background-color: #F5F6F7;
+      margin-right: 16px;
+    }
+    .ant-radio-wrapper-checked {
+      border: 1px solid #00A98F;
+      background-color: rgba(0, 169, 143, 0.04);
+      span {
+        color: #00A98F;
+      }
+    }
+    .ant-space {
+      width: 100%;
+    }
+  }
+}

src/pages/systemManage/invoiceProcessEng/components/invoiceType/index.tsx

+import React, { useCallback, useState } from 'react';
+import { Button, Form, Radio, Space, Table } from 'antd';
+import { FormInstance } from 'antd/es/form/Form';
+import { ColumnType } from 'antd/lib/table/interface';
+import { PlusOutlined } from '@ant-design/icons';
+import CardLayout from '../card';
+import styles from './index.less';
+import { operation } from '../../columns';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+import TableModal from '@/components/TableModal';
+import { getMemberManageAllProviderPage } from '@/services/MemberV2Api';
+
+interface InvoiceTypeProps {
+  /** FormInstance */
+  form?: FormInstance,
+}
+
+const InvoiceTypeLayout: React.FC<InvoiceTypeProps> = (props: any) => {
+  const { form } = props;
+  const [visible, setVisible] = useState<boolean>(false);
+  const [member, setMember] = useState<any>({})
+  const mock = [
+    { value: 1, label: '所有会员（默认）' },
+    { value: 2, label: '指定会员' },
+  ]
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '会员名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '会员类型',
+      dataIndex: 'memberTypeName',
+      key: 'memberTypeName',
+    },
+    {
+      title: '会员角色',
+      dataIndex: 'roleName',
+      key: 'roleName',
+    },
+    {
+      title: '会员等级',
+      dataIndex: 'levelTag',
+      key: 'levelTag',
+    },
+  ]
+
+  const handleFetchData = useCallback((params: any) => {
+    return new Promise(resolve => {
+      getMemberManageAllProviderPage({ ...params }).then(res => {
+        if (res.code !== 1000) {
+          return
+        }
+        resolve(res.data)
+      }).catch(error => {
+        console.warn(error)
+      })
+    })
+  }, [])
+
+  const toggle = (flag: boolean) => {
+    setVisible(flag)
+  }
+
+  const handleConfirm = (selectRow: number[] | string[], selectedRows: { [key: string]: any }[]) => {
+    console.log(selectRow, 'selectRow');
+    console.log(selectedRows, 'selectedRows');
+  }
+
+  return (
+    <CardLayout
+      id="invoiceType"
+      title='适用会员'
+      weight
+      bodyStyle={{ paddingBottom: '1px' }}
+      classNames={styles['invoice-type']}
+    >
+      <Form.Item
+        name='invoiceType'
+        initialValue={1}
+        rules={[
+          { required: true, message: '请选择适用会员' },
+        ]}
+      >
+        <Radio.Group>
+          {mock.map(_item => (
+            <Radio key={_item.value} value={_item.value}>{_item.label}</Radio>
+          ))}
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item
+        noStyle
+        shouldUpdate={(prevValues, currentValues) => prevValues.invoiceType !== currentValues.invoiceType}
+      >
+        {({ getFieldValue }) =>
+          getFieldValue('invoiceType') === 2 ? (
+            <Space direction='vertical'>
+              <Button block type='dashed' icon={<PlusOutlined />} onClick={() => toggle(true)}>选择</Button>
+              <Form.Item name="menberId" rules={[{ required: true, message: '请选择适用会员' }]}>
+                <Table
+                  columns={[
+                    ...columns,
+                    {
+                      ...operation
+                    }
+                  ]}
+                />
+              </Form.Item>
+            </Space>
+          ) : null
+        }
+      </Form.Item>
+      <TableModal
+        modalType="Drawer"
+        visible={visible}
+        title='选择适用会员'
+        mode='checkbox'
+        tableProps={{
+          rowKey: 'id',
+        }}
+        customKey='id'
+        fetchData={handleFetchData}
+        onClose={() => toggle(false)}
+        onOk={handleConfirm}
+        columns={columns}
+        effects={($, actions) => {
+          actions.reset()
+          useStateFilterSearchLinkageEffect($, actions, "name", FORM_FILTER_PATH)
+        }}
+        schema={{
+          type: "object",
+          properties: {
+            megalayout: {
+              type: "object",
+              "x-component": "mega-layout",
+              properties: {
+                name: {
+                  type: "string",
+                  "x-component": "Search",
+                  "x-mega-props": {},
+                  "x-component-props": {
+                    placeholder: '会员名称',
+                    advanced: false,
+                    align: "flex-left",
+                  }
+                }
+              }
+            },
+            [FORM_FILTER_PATH]: {
+              type: "object",
+              "x-component": "flex-layout",
+              "x-component-props": {
+                rowStyle: {
+                  justifyContent: "flex-start",
+                  flexWrap: "nowrap"
+                },
+                colStyle: {//改变间隔
+                  marginRight: 20
+                }
+              },
+            }
+          }
+        }}
+        value={[member]}
+      />
+    </CardLayout>
+  )
+}
+export default InvoiceTypeLayout;

src/pages/systemManage/invoiceProcessEng/components/processEng/index.tsx

+import React from 'react';
+import { Form, Row, Col, Input } from 'antd';
+import { FormInstance } from 'antd/es/form/Form';
+import CardLayout from '../card';
+import { validatorByte } from '@/utils/regExp';
+
+interface ProcessEngProps {
+  /** FormInstance */
+  form?: FormInstance,
+}
+
+const ProcessEngLayout: React.FC<ProcessEngProps> = (props: any) => {
+
+  const { form } = props;
+
+  return (
+    <CardLayout
+      id="processEng"
+      title='流程规则'
+      weight
+      bodyStyle={{ paddingBottom: '0px' }}
+    >
+      <Row gutter={[24, 24]}>
+        <Col span={12}>
+          <Form.Item
+            label='流程规则名称'
+            name='name'
+            rules={[
+              { required: true, message: '请输入流程规则名称' },
+              { validator: (rule, value, callback) => validatorByte(rule, value, callback, 48) }
+            ]}
+          >
+            <Input placeholder='最长48个字符，24个汉字' />
+          </Form.Item>
+        </Col>
+      </Row>
+    </CardLayout>
+  )
+}
+export default ProcessEngLayout;

src/pages/systemManage/invoiceProcessEng/components/processSelect/index.less

+.select-box {
+  :global {
+    .ant-radio-group {
+      width: 100%;
+
+      .ant-radio-wrapper {
+        width: 100%;
+        padding: 16px 0px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #F5F6F7;
+
+        .ant-radio {
+          width: 16px;
+          height: 16px;
+        }
+
+        span:nth-child(2) {
+          flex: 1;
+          display: inline-block;
+        }
+      }
+      .ant-radio-wrapper:last-child {
+        border-bottom: 0px;
+      }
+    }
+  }
+
+  .box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .box-clerk {
+      padding-left: 8px;
+
+      .box-clerk-name {
+        font-size: 14px;
+        color: #252D37;
+        font-weight: 400;
+        line-height: 20px;
+        padding: 4px 0px
+      }
+
+      .box-clerk-value {
+        font-weight: 400;
+        font-size: 12px;
+        color: #91959B;
+        line-height: 16px;
+        padding: 4px 0px
+      }
+    }
+
+    .box-tag {
+      padding: 4px;
+      border-radius: 2px;
+      color: #4787F0;
+      background-color: #ECF2FE;
+    }
+  }
+}

src/pages/systemManage/invoiceProcessEng/components/processSelect/index.tsx

+import React from 'react';
+import { Form, Radio, Space } from 'antd';
+import { FormInstance } from 'antd/es/form/Form';
+import CardLayout from '../card';
+import styles from './index.less';
+
+interface ProcessSelectProps {
+  /** FormInstance */
+  form?: FormInstance,
+}
+
+const ProcessSelectLayout: React.FC<ProcessSelectProps> = (props: any) => {
+
+  const { form } = props;
+
+  const mock = [
+    { id: 1, name: '请款单流程--0级', value: '-', tag: '请款单流程' },
+    { id: 2, name: '请款单流程--1级', value: '1-待提交请款单', tag: '请款单流程' },
+    { id: 3, name: '请款单流程--2级', value: '1-待审核请款单（一级） —>2-待提交请款单', tag: '请款单流程' },
+    { id: 4, name: '请款单流程--3级', value: '1-待审核请款单（一级） —>2-审核请款单（二级）—>3-待提交请款单', tag: '请款单流程' },
+  ]
+
+  return (
+    <CardLayout
+      id="processSelect"
+      title='流程选择'
+      weight
+      bodyStyle={{ paddingBottom: '1px' }}
+      classNames={styles['select-box']}
+    >
+      <Form.Item
+        name='processSelect'
+        rules={[
+          { required: true, message: '请选择流程' },
+        ]}
+      >
+        <Radio.Group>
+          {mock.map(_item => (
+            <Radio key={_item.id} value={_item.id}>
+              <div className={styles['box']}>
+                <div className={styles['box-clerk']}>
+                  <div className={styles['box-clerk-name']}>{_item.name}</div>
+                  <div className={styles['box-clerk-value']}>{_item.value}</div>
+                </div>
+                <div className={styles['box-tag']}>{_item.tag}</div>
+              </div>
+            </Radio>
+          ))}
+        </Radio.Group>
+      </Form.Item>
+    </CardLayout>
+  )
+}
+export default ProcessSelectLayout;

src/pages/systemManage/invoiceProcessEng/index.tsx

+import React from 'react';
+import { history, Link } from 'umi';
+import { Button, Switch } from 'antd';
+import moment from 'moment';
+import { PlusOutlined } from '@ant-design/icons';
+import TableLayout from '@/components/TableLayout';
+import { ColumnType } from 'antd/lib/table/interface';
+import { createTime, id, name, operation, processName, status } from './columns';
+
+const InvoiceProcessEng: React.FC<{}> = () => {
+
+  const format = (text, fmt?: string) => {
+    return <>{moment(text).format(fmt || "YYYY-MM-DD HH:mm:ss")}</>
+  }
+
+  const mock = [
+    {
+      id: 1,
+      name: '物料对账单请款流程',
+      processName: '请款单流程-2级',
+      createTime: 1650614111890,
+      status: 1,
+    }
+  ]
+
+  const columns: ColumnType<any>[] = [
+    {
+      ...id,
+    },
+    {
+      ...name,
+      render: (_text) => <Link to='#'>{_text}</Link>
+    },
+    {
+      ...processName,
+    },
+    {
+      ...createTime,
+      render: (_text) => format(_text)
+    },
+    {
+      ...status,
+      render: (_text) => <Switch checked={!!_text} />
+    },
+    {
+      ...operation,
+      render: (_text) => <>
+        <Button type='link'>编辑</Button>
+        <Button type='link'>删除</Button>
+      </>
+    },
+  ]
+
+  return (
+    <TableLayout
+      columns={columns}
+      fetch={mock}
+      schema={{
+        type: "object",
+        properties: {
+          megalayout: {
+            type: "object",
+            "x-component": "flex-layout",
+            "x-component-props": {
+              rowStyle: {
+                justifyContent: 'space-between'
+              }
+            },
+            properties: {
+              ctl: {
+                type: "object",
+                "x-component": "controllerBtns",
+              },
+              name: {
+                type: 'string',
+                'x-component': 'Search',
+                'x-component-props': {
+                  placeholder: '流程规则名称',
+                  advanced: false
+                },
+              },
+            }
+          }
+        }
+      }}
+      controllerBtns={<Button type='primary' icon={<PlusOutlined />} onClick={() => history.push('/system/ruleSettingManager/invoiceProcessEng/add')}>新增</Button>}
+    />
+  )
+}
+export default InvoiceProcessEng;