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

config/routes/authConfigRoute.ts

@@ -128,6 +128,36 @@ const AuthConfigRoute: RouterChild = {
           hideInMenu: true,
           noMargin: true,
         },
+        {
+          /** 请购单流程规则配置列表 */
+          path: '/memberCenter/systemSetting/processEng/buyingRequisitionProcess',
+          name: '请购单流程规则配置',
+          component: '@/pages/systemSetting/processEng/buyingRequisitionProcess'
+        },
+        {
+          /** 查看请购单流程规则配置 */
+          path: '/memberCenter/systemSetting/processEng/buyingRequisitionProcess/detail',
+          name: '查看请购单流程规则配置',
+          component: '@/pages/systemSetting/processEng/buyingRequisitionProcess/detail',
+          hideInMenu: true,
+          noMargin: true,
+        },
+        {
+          /** 新增请购单流程规则配置 */
+          path: '/memberCenter/systemSetting/processEng/buyingRequisitionProcess/add',
+          name: '新增请购单流程规则配置',
+          component: '@/pages/systemSetting/processEng/buyingRequisitionProcess/add',
+          hideInMenu: true,
+          noMargin: true,
+        },
+        {
+          /** 编辑请购单流程规则配置 */
+          path: '/memberCenter/systemSetting/processEng/buyingRequisitionProcess/edit',
+          name: '编辑请购单流程规则配置',
+          component: '@/pages/systemSetting/processEng/buyingRequisitionProcess/edit',
+          hideInMenu: true,
+          noMargin: true,
+        },
       ]
     },
     /** 密钥管理 */

config/routes/index.ts

@@ -26,6 +26,7 @@ import ProcurementRoute from './procurementRoute';
 // import contracRoute from './contracRoute';
 // export const routes = [CommodityRoute, MemberRoute, ShopRoute, ChannelRoute, TranactionRoute, AfterService, PayandSettleRoute, LogisticsRoute, AuthConfigRoute, HandlingRoute, BalaceRoute]
 
+// const isDev = process.env.NODE_ENV === 'development'
 const isDev = false
 
 const homeRoute = {

package.json

@@ -58,7 +58,7 @@
     "start:v2-220418": "cross-env PRO_ENV=v2-220418 yarn start",
     "start:v2-220518": "cross-env PRO_ENV=v2-220518 yarn start",
     "start-fast": "cross-env NODE_OPTIONS=--max_old_space_size=4096 UMI_ENV=local umi dev",
-    "start-fast:v2-220418": "cross-env PRO_ENV=v2-220418 yarn start-fast",
+    "start-fast:v2-220518": "cross-env PRO_ENV=v2-220518 yarn start-fast",
     "start:ali": "cross-env PRO_ENV=v2-ali-demo yarn start"
   },
   "lint-staged": {

src/pages/systemSetting/constants/buyingRequisitionProcess.ts

+export const buyingRequisitionTypeOptions = [{ label: '所有请购单', value: 1 }]

src/pages/systemSetting/constants/index.ts

+export const formItemLayout = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 18 }
+}

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

+/**
+ * 系统能力 - 流程引擎 - 新增请购单流程规则配置
+ * @author: Crayon
+ */
+ import React from 'react'
+ import AddEditContent from './components/AddEditContent'
+
+ const Add: React.FC = () => {
+
+   return (
+     <AddEditContent
+       title='新增请购单流程规则'
+       btnCode='buyingRequisitionProcess.submit'
+     />
+   )
+ }
+
+ export default Add

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

+/**
+ * 系统能力 - 流程引擎 - 新增/编辑请购单流程规则配置
+ * @author: Crayon
+ */
+import React, { useEffect, useState, useRef } from 'react'
+import AnchorPage from '@/components/AnchorPage'
+import { history } from 'umi'
+import BaseInfo from '@/components/BaseInfo/BaseInfo'
+import { Button, Form, Input, Radio, Checkbox } from 'antd'
+import { SaveOutlined } from '@ant-design/icons'
+import AuthButton from '@/components/AuthButton'
+import { postOrderDeliveryNoticeOrderSrmCreate, getOrderDeliveryNoticeOrderDetail, postOrderDeliveryNoticeOrderUpdate } from '@/services/OrderNewV2Api'
+import usePrompt from '@/hooks/usePrompt'
+import FormProgress, { HandleType } from '@/components/FormProgress'
+import { validatorByte } from '@/utils/regExp'
+import { buyingRequisitionTypeOptions } from '../../../../constants/buyingRequisitionProcess'
+import RadioBlock from '../RadioBlock'
+
+type PropsType = {
+  id?: string;
+  btnCode: string;
+  title?: string | React.ReactNode
+}
+
+const anchors = [
+  { key: 'processRule', name: "流程规则" },
+  { key: 'processSelect', name: "流程选择" },
+  { key: 'buyingRequisitionType', name: "请购类型" },
+]
+
+const processOptionsMock = [
+  { value: 1, label: '请购单流程-0级', detail: '1.待提交请购单', type: '请购单流程' },
+  { value: 2, label: '请购单流程-1级', detail: '1.待审核请购单(一级) - 2.待提交请购单', type: '请购单流程' },
+  { value: 3, label: '请购单流程-2级', detail: '1.1.待审核请购单(一级) - 2.待审核请购单(二级) - 3.待提交请购单', type: '请购单流程' },
+]
+
+const DeliveryNoticeManagementAwaitSRMDetails: React.FC<PropsType> = ({ id, btnCode, title }) => {
+  const [form] = Form.useForm()
+  const { renderPrompt, handleLeave } = usePrompt()
+  const [loading, setLoading] = useState<boolean>(false)
+
+  const progressRef = useRef<HandleType>()
+
+  const handleSubmit = () => {
+    form.validateFields().then((values) => {
+      const params: any = {}
+      const requestApi = id ? postOrderDeliveryNoticeOrderUpdate : postOrderDeliveryNoticeOrderSrmCreate
+      setLoading(true)
+      requestApi(params).then(({ code, data }) => {
+        if (code === 1000) {
+          handleLeave(false)
+          history.goBack()
+        }
+      }).finally(() => {
+        setLoading(false)
+      })
+    })
+  }
+
+  const getDetail = async () => {
+    if (id) {
+      const { code, data } = await getOrderDeliveryNoticeOrderDetail({ id });
+      if (code === 1000) {
+      }
+    }
+  }
+
+  useEffect(() => {
+    getDetail()
+  }, [])
+
+  return (
+    <AnchorPage
+      title={<FormProgress title={title} ref={progressRef} />}
+      onBack={() => history.goBack()}
+      anchors={anchors}
+      extra={
+        <AuthButton btnCode={btnCode}>
+          <Button icon={<SaveOutlined />} loading={loading} onClick={handleSubmit} type='primary'>保存</Button>
+        </AuthButton>
+      }
+    >
+      <Form
+        labelAlign='left'
+        form={form}
+        colon={false}
+        onValuesChange={() => {
+          handleLeave()
+          progressRef.current.render(form)
+        }}
+      >
+        <BaseInfo className='mt-0' title={anchors[0].name} id={anchors[0].key}>
+          <Form.Item
+            labelCol={{ span: 5 }}
+            name='name'
+            label='流程规则名称'
+            rules={[
+              { required: true, message: `请填写流程规则名称` },
+              { validator: (rule, value, callback) => validatorByte(rule, value, callback, 48) }
+            ]}
+          >
+            <Input maxLength={48} />
+          </Form.Item>
+        </BaseInfo>
+        <BaseInfo cols={1} className='mt-16' title={anchors[1].name} id={anchors[1].key}>
+          <Form.Item
+            name='process'
+            rules={[
+              { required: true, message: `请选择流程` }
+            ]}
+            initialValue={processOptionsMock[0].value}
+          >
+            <Radio.Group style={{ width: '100%' }}>
+              {
+                processOptionsMock.map(item => (
+                  <RadioBlock
+                    key={item.value}
+                    options={item}
+                  />
+                ))
+              }
+            </Radio.Group>
+          </Form.Item>
+        </BaseInfo>
+        <BaseInfo cols={1} className='mt-16' title={anchors[2].name} id={anchors[2].key}>
+          <Form.Item
+            name='buyingRequisitionType'
+            initialValue={[buyingRequisitionTypeOptions[0].value]}
+            rules={[
+              { required: true, message: `请选择请购类型` }
+            ]}
+          >
+            <Checkbox.Group options={buyingRequisitionTypeOptions}/>
+          </Form.Item>
+        </BaseInfo>
+      </Form>
+      {renderPrompt()}
+    </AnchorPage>
+  )
+}
+
+export default DeliveryNoticeManagementAwaitSRMDetails

src/pages/systemSetting/processEng/buyingRequisitionProcess/components/RadioBlock/index.less

+.radioBlock {
+  display: flex;
+  align-items: center;
+
+  > span:last-child {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 16px;
+    border-bottom: 1px solid #F5F6F7;
+
+    .label {
+      font-size: 14px;
+      color: #252D37;
+      margin-bottom: 8px;
+    }
+
+    .detail {
+      font-size: 12px;
+      color: #91959B;
+    }
+  }
+}
+
+.tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 20px;
+  border-radius: 2px;
+  font-size: 12px;
+  background-color: #ECF2FE;
+  color: #4787F0;
+}

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

+/**
+ * 系统能力 - 流程引擎 - 新增/编辑请购单流程规则配置
+ * @author: Crayon
+ */
+import React from 'react'
+import { Radio, Tag } from 'antd'
+import styles from './index.less'
+
+type PropsType = {
+  options: {
+    label: string,
+    value: string | number,
+    detail?: string,
+    type?: string
+  }
+}
+
+const RadioBlock: React.FC<PropsType> = ({ options }) => {
+
+  return (
+    <Radio className={styles.radioBlock} value={options.value}>
+      <div>
+        <div className={styles.label}>{options.label}</div>
+        <div className={styles.detail}>{options.detail}</div>
+      </div>
+      <span className={styles.tag}>{options.type}</span>
+    </Radio>
+  )
+}
+
+export default RadioBlock

src/pages/systemSetting/processEng/buyingRequisitionProcess/edit.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
+       id={id}
+       title='修改请购单流程规则'
+       btnCode='buyingRequisitionProcess.submit'
+     />
+   )
+ }
+
+ export default Edit

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

+/**
+ * 系统能力 - 流程规则管理（流程引擎） - 请购单流程规则配置
+ * @author: Crayon
+ */
+ import React, { useMemo, useRef } from 'react'
+ import { PageHeaderWrapper } from '@ant-design/pro-layout'
+ import { Button, Card, Space, Switch } from 'antd'
+ import StandardTable from '@/components/StandardTable'
+ import { ColumnType } from 'antd/lib/table'
+ import TableOperation from '@/components/TableOperation'
+ import EyePreview from '@/components/EyePreview'
+ import NiceForm from '@/components/NiceForm'
+ import AuthButton from '@/components/AuthButton'
+ 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 { history } from 'umi'
+import { PlusOutlined } from '@ant-design/icons'
+import StatusSwitch from '@/components/StatusSwitch'
+
+const BuyingRequisitionProcess: React.FC = () => {
+  const ref = useRef<any>({})
+  const formActions = createFormActions()
+
+  const controllerBtns = useMemo(() => (
+    <Space>
+      <AuthButton btnCode='buyingRequisitionProcess.add'>
+        <Button
+          type='primary'
+          icon={<PlusOutlined/>}
+          onClick={() => history.push(`/memberCenter/systemSetting/processEng/buyingRequisitionProcess/add`)}
+        >
+          新增
+        </Button>
+      </AuthButton>
+    </Space>
+  ), [])
+
+  const renderOptionButton = (record: any) => {
+    const btnAuthOfOperationTextMap = {
+      '修改': 'buyingRequisitionProcess.edit',
+      '查看': 'buyingRequisitionProcess.see',
+      '删除': 'buyingRequisitionProcess.delete',
+    }
+    const buttonGroup = {
+      '修改': true,
+      '查看': true,
+      '删除': true,
+    }
+    const operationHandler = {
+      '修改': () => { history.push(`/memberCenter/systemSetting/processEng/buyingRequisitionProcess/edit?id=${record.id}`) },
+      '查看': () => { history.push(`/memberCenter/systemSetting/processEng/buyingRequisitionProcess/detail?id=${record.id}`) },
+      '删除': () => {}
+    }
+    return (
+      <TableOperation
+        buttonTextFieldMap={buttonGroup}
+        operationHandler={operationHandler}
+        buttonPermissionsMap={btnAuthOfOperationTextMap}
+      />
+    )
+  }
+
+  const handleModify = (record) => {
+
+  }
+
+  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,
+      render: (text: unknown, record: any) => (
+        <EyePreview url={`/memberCenter/systemSetting/processEng/buyingRequisitionProcess/detail?id=${record.id}`}>{text}</EyePreview>
+      )
+    },
+    { title: '流程名称', dataIndex: 'processName', key: 'processName' },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (text: string, record: any) => (
+        // <AuthButton btnCode='buyingRequisitionProcess.state' >
+        //   <StatusSwitch
+        //     fieldNames="status"
+        //     handleConfirm={() => handleModify(record)}
+        //     record={record}
+        //   />
+        // </AuthButton>
+        <Switch />
+      )
+    },
+    { 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)}
+              expressionScope={{
+                controllerBtns,
+              }}
+              effects={($, actions) => {
+                useStateFilterSearchLinkageEffect(
+                  $,
+                  actions,
+                  'name',
+                  FORM_FILTER_PATH,
+                )
+              }}
+              schema={schema}
+            />
+          }
+        />
+      </Card>
+    </PageHeaderWrapper>
+  )
+}
+
+export default BuyingRequisitionProcess

src/pages/systemSetting/processEng/buyingRequisitionProcess/schema/index.tsx

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