feat: 完善流程引擎 - 请款单流程规格配置

config/routes/authConfigRoute.ts

@@ -109,6 +109,27 @@ const AuthConfigRoute: RouterChild = {
         },
       ]
     },
+    // 流程引擎
+    {
+      path: '/memberCenter/systemSetting/processEng',
+      name: '流程引擎',
+      routes: [
+        {
+          // 请款单流程规则配置
+          path: '/memberCenter/systemSetting/processEng/invoiceProcessEng',
+          name: '请款单流程规则配置',
+          component: '@/pages/systemSetting/processEng/invoiceProcessEng',
+        },
+        {
+          // 新增请款单流程规则
+          path: '/memberCenter/systemSetting/processEng/invoiceProcessEng/add',
+          name: '新增请款单流程规则',
+          component: '@/pages/systemSetting/processEng/invoiceProcessEng/add',
+          hideInMenu: true,
+          noMargin: true,
+        },
+      ]
+    },
     /** 密钥管理 */
     {
       path: '/memberCenter/systemSetting/key',

config/routes/index.ts

@@ -11,7 +11,7 @@ import CommodityRoute from './commodityRoute'; // 商品能力路由
 import TranactionRoute from './tranactionRoute'; // 交易能力路由
 // import LogisticsRoute from './logisticsRoutes' // 物流能力路由
 // import PayandSettleRoute from './payandSettle' //支付与结算
-// import AuthConfigRoute from './authConfigRoute'
+import AuthConfigRoute from './authConfigRoute'
 // import AfterService from './afterServiceRoute' // 售后
 // import HandlingRoute from './handlingRoute'; // 加工能力
 // import DealAbilityRoute from './dealAbilityRoute'; //
@@ -46,7 +46,7 @@ const srmPurchaserHomeRoute = {
 
 // isDev ? [ homeRoute, OrderRoute ] :
 // const routes = asyncRoutes;
-const routes = isDev ? [ homeRoute, ProcurementRoute ] : asyncRoutes;
+const routes = isDev ? [ homeRoute, AuthConfigRoute ] : asyncRoutes;
 
 const memberCenterRoute = {
   path: '/memberCenter',

src/pages/systemSetting/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/systemSetting/processEng/invoiceProcessEng/add.tsx

+import React, { Fragment, useState } from 'react';
+import PeripheralLayout from '@/pages/transaction/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 [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) + '%')
+}
+  return (
+    <Fragment>
+      <PeripheralLayout
+        hideBreak
+        detail='新增请款单流程规则'
+        tabLink={[
+          { title: '流程规则', id: 'processEng' },
+          { title: '流程选择', id: 'processSelect' },
+          { title: '请款类型', id: 'invoiceType' },
+        ]}
+        effect={
+          <Button
+            icon={<SaveOutlined />}
+            type="primary"
+          >
+            保存
+          </Button>
+        }
+        components={
+          <Form {...layout} onValuesChange={(_, allValues) => onValuesChange(allValues) }>
+            <ProcessEngLayout />
+            <ProcessSelectLayout />
+            <InvoiceTypeLayout />
+          </Form>
+        }
+      />
+    </Fragment>
+  )
+}
+export default AddInvoiceProcessEng

src/pages/systemSetting/processEng/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/systemSetting/processEng/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/systemSetting/processEng/invoiceProcessEng/components/invoiceType/index.less

+@import '../../../../../../theme/style/colors.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;
+      }
+    }
+  }
+}

src/pages/systemSetting/processEng/invoiceProcessEng/components/invoiceType/index.tsx

+import React from 'react';
+import { Form, Radio } from 'antd';
+import { FormInstance } from 'antd/es/form/Form';
+import CardLayout from '../card';
+import styles from './index.less';
+
+interface InvoiceTypeProps {
+  /** FormInstance */
+  form?: FormInstance,
+}
+
+const InvoiceTypeLayout: React.FC<InvoiceTypeProps> = (props: any) => {
+
+  const { form } = props;
+
+  const mock = [
+    {value: 1, label: '物料对账单'},
+    {value: 2, label: '采购询价合同'},
+    {value: 3, label: '采购招标合同'},
+    {value: 4, label: '采购竞价合同'},
+    {value: 5, label: '请购单合同'},
+    {value: 6, label: '采购请购单'},
+  ]
+
+  return (
+    <CardLayout
+      id="invoiceType"
+      title='请款类型'
+      weight
+      bodyStyle={{ paddingBottom: '1px' }}
+      classNames={styles['invoice-type']}
+    >
+      <Form.Item
+        name='invoiceType'
+        rules={[
+          { required: true, message: '请选择请款类型' },
+        ]}
+      >
+        <Radio.Group>
+          {mock.map(_item => (
+            <Radio key={_item.value} value={_item.value}>{_item.label}</Radio>
+          ))}
+        </Radio.Group>
+      </Form.Item>
+    </CardLayout>
+  )
+}
+export default InvoiceTypeLayout;

src/pages/systemSetting/processEng/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/systemSetting/processEng/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/systemSetting/processEng/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/systemSetting/processEng/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('/memberCenter/systemSetting/processEng/invoiceProcessEng/add')}>新增</Button>}
+    />
+  )
+}
+export default InvoiceProcessEng;