feat: 新增规则引擎-请购单流程规则配置

config/routes/authConfigRoute.ts

@@ -160,6 +160,19 @@ const AuthConfigRoute: RouterChild = {
         },
       ]
     },
+    // 规则引擎
+    {
+      path: '/memberCenter/systemSetting/ruleEng',
+      name: '规则引擎',
+      routes: [
+        {
+          /** 请购单流程规则配置列表 */
+          path: '/memberCenter/systemSetting/ruleEng/buyingRequisitionRule',
+          name: '请购单流程规则配置',
+          component: '@/pages/systemSetting/ruleEng/buyingRequisitionRule'
+        },
+      ]
+    },
     /** 密钥管理 */
     {
       path: '/memberCenter/systemSetting/key',

src/components/FormProgress/index.tsx

@@ -8,6 +8,7 @@ export type HandleType = {
 
 type PropsType = {
   title?: string | ReactNode
+  disabled?: boolean
 }
 
 type ColorItemType = { bg: string, text: string }
@@ -36,7 +37,7 @@ const getColor = (scale: number) => {
   }
 }
 
-const FormProgress = ({ title }: PropsType, ref: any) => {
+const FormProgress = ({ title, disabled }: PropsType, ref: any) => {
   const [scale, setScale] = useState<number>(0)
 
   useImperativeHandle(ref, () => ({
@@ -63,12 +64,16 @@ const FormProgress = ({ title }: PropsType, ref: any) => {
   return (
     <div className={styles.progressBox}>
       {title}
-      <div
-        className={styles.progress}
-        style={{ backgroundColor: getColor(scale).bg, color: getColor(scale).text }}
-      >
-        信息完整度 {scale}%
-      </div>
+      {
+        !disabled && (
+          <div
+            className={styles.progress}
+            style={{ backgroundColor: getColor(scale).bg, color: getColor(scale).text }}
+          >
+            信息完整度 {scale}%
+          </div>
+        )
+      }
     </div>
   )
 }

src/pages/systemSetting/constants/index.ts

@@ -2,3 +2,26 @@ export const formItemLayout = {
   labelCol: { span: 4 },
   wrapperCol: { span: 18 }
 }
+
+export enum STATUS {
+  Effective = 1, // 有效
+  invalid = 2,   // 无效
+}
+
+/**
+ * 状态相关文本
+ */
+ export const STATUS_NAME = {
+  [STATUS.Effective]: '有效',
+  [STATUS.invalid]: '无效',
+}
+
+/**
+ * 状态相关颜色码
+ */
+export const STATUS_COLOR = {
+  // 有效
+  [STATUS.Effective]: { color: '#EBF9F6', fontColor: '#00A98F' },
+  // 无效
+  [STATUS.invalid]: { color: '#FFEBE6', fontColor: '#E34D59' },
+}

src/pages/systemSetting/processEng/buyingRequisitionProcess/add.tsx

@@ -9,6 +9,7 @@
 
    return (
      <AddEditContent
+       type='add'
        title='新增请购单流程规则'
        btnCode='buyingRequisitionProcess.submit'
      />

src/pages/systemSetting/processEng/buyingRequisitionProcess/components/AddEditContent/index.tsx

@@ -16,9 +16,16 @@ import { validatorByte } from '@/utils/regExp'
 import { buyingRequisitionTypeOptions } from '../../../../constants/buyingRequisitionProcess'
 import RadioBlock from '../RadioBlock'
 
+enum TYPE {
+  ADD = 'add',
+  EDIT = 'edit',
+  VIEW = 'view',
+}
+
 type PropsType = {
+  type: 'add' | 'edit' | 'view'
   id?: string;
-  btnCode: string;
+  btnCode?: string;
   title?: string | React.ReactNode
 }
 
@@ -34,7 +41,7 @@ const processOptionsMock = [
   { value: 3, label: '请购单流程-2级', detail: '1.1.待审核请购单(一级) - 2.待审核请购单(二级) - 3.待提交请购单', type: '请购单流程' },
 ]
 
-const DeliveryNoticeManagementAwaitSRMDetails: React.FC<PropsType> = ({ id, btnCode, title }) => {
+const DeliveryNoticeManagementAwaitSRMDetails: React.FC<PropsType> = ({ id, btnCode, title, type }) => {
   const [form] = Form.useForm()
   const { renderPrompt, handleLeave } = usePrompt()
   const [loading, setLoading] = useState<boolean>(false)
@@ -71,12 +78,12 @@ const DeliveryNoticeManagementAwaitSRMDetails: React.FC<PropsType> = ({ id, btnC
 
   return (
     <AnchorPage
-      title={<FormProgress title={title} ref={progressRef} />}
+      title={<FormProgress title={title} ref={progressRef} disabled={type === TYPE.VIEW} />}
       onBack={() => history.goBack()}
       anchors={anchors}
       extra={
         <AuthButton btnCode={btnCode}>
-          <Button icon={<SaveOutlined />} loading={loading} onClick={handleSubmit} type='primary'>保存</Button>
+          { type !== TYPE.VIEW && <Button icon={<SaveOutlined />} loading={loading} onClick={handleSubmit} type='primary'>保存</Button> }
         </AuthButton>
       }
     >
@@ -99,7 +106,7 @@ const DeliveryNoticeManagementAwaitSRMDetails: React.FC<PropsType> = ({ id, btnC
               { validator: (rule, value, callback) => validatorByte(rule, value, callback, 48) }
             ]}
           >
-            <Input maxLength={48} />
+            <Input disabled={type === TYPE.VIEW} maxLength={48} />
           </Form.Item>
         </BaseInfo>
         <BaseInfo cols={1} className='mt-16' title={anchors[1].name} id={anchors[1].key}>
@@ -110,7 +117,7 @@ const DeliveryNoticeManagementAwaitSRMDetails: React.FC<PropsType> = ({ id, btnC
             ]}
             initialValue={processOptionsMock[0].value}
           >
-            <Radio.Group style={{ width: '100%' }}>
+            <Radio.Group style={{ width: '100%' }} disabled={type === TYPE.VIEW}>
               {
                 processOptionsMock.map(item => (
                   <RadioBlock
@@ -130,7 +137,7 @@ const DeliveryNoticeManagementAwaitSRMDetails: React.FC<PropsType> = ({ id, btnC
               { required: true, message: `请选择请购类型` }
             ]}
           >
-            <Checkbox.Group options={buyingRequisitionTypeOptions}/>
+            <Checkbox.Group disabled={type === TYPE.VIEW} options={buyingRequisitionTypeOptions}/>
           </Form.Item>
         </BaseInfo>
       </Form>

src/pages/systemSetting/processEng/buyingRequisitionProcess/detail.tsx

+/**
+ * 系统能力 - 流程引擎 - 查看请购单流程规则配置
+ * @author: Crayon
+ */
+import React from 'react'
+import { useLocation } from 'umi'
+import AddEditContent from './components/AddEditContent'
+
+const Edit: React.FC = () => {
+  const location: any = useLocation()
+  const { id } = location.query
+
+  return (
+    <AddEditContent
+      type='view'
+      id={id}
+      title='查看请购单流程规则'
+      btnCode='buyingRequisitionProcess.submit'
+    />
+  )
+}
+
+export default Edit

src/pages/systemSetting/processEng/buyingRequisitionProcess/edit.tsx

@@ -2,21 +2,22 @@
  * 系统能力 - 流程引擎 - 修改请购单流程规则配置
  * @author: Crayon
  */
- import React from 'react'
- import { useLocation } from 'umi'
- import AddEditContent from './components/AddEditContent'
+import React from 'react'
+import { useLocation } from 'umi'
+import AddEditContent from './components/AddEditContent'
 
- const Edit: React.FC = () => {
+const Edit: React.FC = () => {
   const location: any = useLocation()
   const { id } = location.query
 
-   return (
-     <AddEditContent
-       id={id}
-       title='修改请购单流程规则'
-       btnCode='buyingRequisitionProcess.submit'
-     />
-   )
- }
+  return (
+    <AddEditContent
+      type='edit'
+      id={id}
+      title='修改请购单流程规则'
+      btnCode='buyingRequisitionProcess.submit'
+    />
+  )
+}
 
- export default Edit
+export default Edit

src/pages/systemSetting/ruleEng/buyingRequisitionRule/index.tsx

+/**
+ * 系统能力 - 规则引擎 - 请购单流程规则配置
+ * @author: Crayon
+ */
+ import React, { useRef } from 'react'
+ import { PageHeaderWrapper } from '@ant-design/pro-layout'
+ import { Card, Tag } from 'antd'
+ import StandardTable from '@/components/StandardTable'
+ import { ColumnType } from 'antd/lib/table'
+ import TableOperation from '@/components/TableOperation'
+ import NiceForm from '@/components/NiceForm'
+ import { createFormActions } from '@formily/antd'
+ import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
+ import { FORM_FILTER_PATH } from '@/formSchema/const'
+ import { schema } from './schema'
+ import { getOrderDeliveryNoticeOrderVendorPage } from '@/services/OrderNewV2Api'
+ import { STATUS_COLOR, STATUS_NAME } from '../../constants'
+
+const BuyingRequisitionProcess: React.FC = () => {
+  const ref = useRef<any>({})
+  const formActions = createFormActions()
+
+  const renderOptionButton = (record: any) => {
+    const btnAuthOfOperationTextMap = {
+      '配置': 'buyingRequisitionRule.config',
+    }
+    const buttonGroup = {
+      '配置': true,
+    }
+    const operationHandler = {
+      '配置': () => {},
+    }
+    return (
+      <TableOperation
+        buttonTextFieldMap={buttonGroup}
+        operationHandler={operationHandler}
+        buttonPermissionsMap={btnAuthOfOperationTextMap}
+      />
+    )
+  }
+
+  const fetchData = (params: any) => {
+    return new Promise((resolve) => {
+      getOrderDeliveryNoticeOrderVendorPage({
+        ...params,
+      }).then(({ code, data }) => {
+        if (code === 1000) {
+          resolve(data)
+        }
+      })
+    })
+  }
+
+  const columns: ColumnType<any>[] = [
+    { title: '流程规则ID', dataIndex: 'processId', key: 'processId' },
+    {
+      title: '流程规则名称',
+      dataIndex: 'processRuleName',
+      key: 'processRuleName',
+      width: 160,
+      ellipsis: true,
+    },
+    { title: '流程名称', dataIndex: 'processName', key: 'processName' },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (text: string) => (
+        <Tag color={STATUS_COLOR[text]?.color}>
+          <span style={{ color: STATUS_COLOR[text]?.fontColor }}>{STATUS_NAME[text]}</span>
+        </Tag>
+      )
+    },
+    { title: '操作时间', dataIndex: 'createTime', key: 'createTime' },
+    {
+      title: '操作',
+      align: 'center',
+      render: (record) => renderOptionButton(record)
+    },
+  ]
+
+  return (
+    <PageHeaderWrapper>
+      <Card>
+        <StandardTable
+          currentRef={ref}
+          columns={columns}
+          tableProps={{ rowKey: 'id', }}
+          fetchTableData={(params: any) => fetchData(params)}
+          controlRender={
+            <NiceForm
+              actions={formActions}
+              onSubmit={values => ref.current.reload(values)}
+              effects={($, actions) => {
+                useStateFilterSearchLinkageEffect(
+                  $,
+                  actions,
+                  'name',
+                  FORM_FILTER_PATH,
+                )
+              }}
+              schema={schema}
+            />
+          }
+        />
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+
+export default BuyingRequisitionProcess

src/pages/systemSetting/ruleEng/buyingRequisitionRule/schema/index.tsx

+import { ISchema } from '@formily/antd'
+
+export const schema: ISchema = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      "x-component": "Search",
+      "x-mega-props": {
+
+      },
+      "x-component-props": {
+        placeholder: '流程规则名称',
+        advanced: false,
+        allowClear: true,
+        align: 'flex-left',
+      }
+    }
+  }
+}