feat: 完善请款单流程规则

config/routes/authConfigRoute.ts

@@ -111,18 +111,72 @@ const AuthConfigRoute: RouterChild = {
     },
     // 流程引擎
     {
-      path: '/memberCenter/systemSetting/processEng',
+      path: '/memberCenter/systemSetting/processManagement',
       name: '流程引擎',
       routes: [
         {
+          // 交易流程规则配置
+          path: '/memberCenter/systemSetting/processManagement/transactionRules',
+          name: '交易流程规则配置',
+          component: '@/pages/transaction/transactionRules',
+        },
+        {
+          // 新增交易流程规则
+          path: '/memberCenter/systemSetting/processManagement/transactionRules/add',
+          name: '新增交易流程规则',
+          component: '@/pages/transaction/transactionRules/addRule',
+          hideInMenu: true,
+        },
+        {
+          // 编辑交易流程规则
+          path: '/memberCenter/systemSetting/processManagement/transactionRules/edit',
+          name: '编辑交易流程规则',
+          component: '@/pages/transaction/transactionRules/addRule',
+          hideInMenu: true,
+        },
+        {
+          // 交易流程规则详情
+          path: '/memberCenter/systemSetting/processManagement/transactionRules/detail',
+          name: '交易流程规则详情',
+          component: '@/pages/transaction/transactionRules/addRule',
+          hideInMenu: true,
+        },
+        {
+          // 采购流程规则配置
+          path: '/memberCenter/systemSetting/processManagement/purchaseRules',
+          name: '采购流程规则配置',
+          component: '@/pages/transaction/purchaseRules',
+        },
+        {
+          // 新增交易流程规则
+          path: '/memberCenter/systemSetting/processManagement/purchaseRules/add',
+          name: '新增采购流程规则',
+          component: '@/pages/transaction/purchaseRules/addRule',
+          hideInMenu: true,
+        },
+        {
+          // 编辑采购流程规则
+          path: '/memberCenter/systemSetting/processManagement/purchaseRules/edit',
+          name: '编辑采购流程规则',
+          component: '@/pages/transaction/purchaseRules/addRule',
+          hideInMenu: true,
+        },
+        {
+          // 采购流程规则详情
+          path: '/memberCenter/systemSetting/processManagement/purchaseRules/detail',
+          name: '采购流程规则详情',
+          component: '@/pages/transaction/purchaseRules/addRule',
+          hideInMenu: true,
+        },
+        {
           // 请款单流程规则配置
-          path: '/memberCenter/systemSetting/processEng/invoiceProcessEng',
+          path: '/memberCenter/systemSetting/processManagement/invoiceProcessEng',
           name: '请款单流程规则配置',
           component: '@/pages/systemSetting/processEng/invoiceProcessEng',
         },
         {
           // 新增请款单流程规则
-          path: '/memberCenter/systemSetting/processEng/invoiceProcessEng/add',
+          path: '/memberCenter/systemSetting/processManagement/invoiceProcessEng/add',
           name: '新增请款单流程规则',
           component: '@/pages/systemSetting/processEng/invoiceProcessEng/add',
           hideInMenu: true,

src/components/FormProgress/index.tsx

@@ -25,7 +25,7 @@ const COLOR: ColorType = {
   success: { bg: '#E4F7EF', text: '#00A98F' },
 }
 
-const getColor = (scale: number) => {
+export const getColor = (scale: number) => {
   if (scale < 60) {
     return COLOR.error
   }

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

@@ -5,6 +5,7 @@ import { SaveOutlined } from '@ant-design/icons';
 import ProcessEngLayout from './components/processEng';
 import ProcessSelectLayout from './components/processSelect';
 import InvoiceTypeLayout from './components/invoiceType';
+import { getColor } from '@/components/FormProgress';
 
 export const layout: any = {
   colon: false,
@@ -12,25 +13,45 @@ export const layout: any = {
   labelAlign: "left"
 };
 
+const progress = {
+  display: 'flex',
+  alignItems: 'center',
+  width: '240px',
+  height: '16px',
+  marginLeft: '8px',
+  padding: '0 8px',
+  borderRadius: '8px',
+  fontSize: '12px',
+  fontWeight: 'normal',
+}
+
 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) + '%')
-}
+  const [percent, setPercent] = useState<number>(0);
+  /**计算输入框输入了百分之多少 */
+  const onFieldsChange = (allValues) => {
+    const values = Object.values(allValues);
+    let num = 0;
+    values.forEach(_item => {
+      if (_item) {
+        num += 1
+      }
+    })
+    setPercent(Number(((num / values.length) * 100)))
+
+  }
   return (
     <Fragment>
       <PeripheralLayout
         hideBreak
         detail='新增请款单流程规则'
+        no={
+          <div
+            style={{ ...progress, backgroundColor: getColor(percent).bg, color: getColor(percent).text }}
+          >
+            信息完整度 {percent.toFixed(0)}%
+          </div>
+        }
         tabLink={[
           { title: '流程规则', id: 'processEng' },
           { title: '流程选择', id: 'processSelect' },
@@ -45,7 +66,7 @@ const onValuesChange = (allValues) => {
           </Button>
         }
         components={
-          <Form {...layout} onValuesChange={(_, allValues) => onValuesChange(allValues) }>
+          <Form {...layout} onFieldsChange={(_, allValues) => onFieldsChange(allValues)}>
             <ProcessEngLayout />
             <ProcessSelectLayout />
             <InvoiceTypeLayout />

src/pages/transaction/components/detailLayout/index.less

@@ -16,6 +16,8 @@
         font-size: 16px;
         font-weight: 500;
         margin-left: 8px;
+        display: flex;
+        align-items: center;
       }
     }
   }