feat: 1

src/pages/Project/Verification/Detail/Flow/components/Drawer/index.less

@@ -0,0 +1,24 @@
+.participantCard {
+  :global(.ant-formily-item-feedback-layout-loose) {
+    margin-bottom: 12px;
+  }
+  :global(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header) {
+    height: 24px;
+    padding: 0;
+  }
+  :global(.ant-collapse-ghost
+      > .ant-collapse-item
+      > .ant-collapse-content
+      > .ant-collapse-content-box) {
+    padding: 4px 16px;
+  }
+  :global(.ant-collapse-icon-position-right
+      > .ant-collapse-item
+      > .ant-collapse-header
+      .ant-collapse-arrow) {
+    right: 0;
+  }
+  :global(.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow) {
+    font-size: 14px;
+  }
+}

src/pages/Project/Verification/Detail/Flow/components/Drawer/index.tsx

@@ -1,8 +1,8 @@
 import { useState, useEffect, useContext, useMemo } from 'react'
-import { Button, Drawer, Radio, Tabs, Tooltip, Row, Col } from 'antd'
+import { Button, Drawer, Radio, Tabs, Tooltip, Row, Col, Switch, Collapse } from 'antd'
 import { Actions, FlowContext } from '../../context'
 import type { RadioChangeEvent } from 'antd'
-import { ApprovalWay, ParticipantMode } from '../../enum'
+import { ApprovalWay, ConfigureType, ParticipantMode } from '../../enum'
 import { QuestionCircleFilled } from '@ant-design/icons'
 import { createForm, onFieldMount, onFieldReact, onFieldValueChange } from '@formily/core'
 import { createSchemaField, FormProvider } from '@formily/react'
@@ -11,14 +11,45 @@ import { participantSchema } from '../../utils'
 import { queryAccountList, queryInstitutionList } from '@/services/api/institution'
 import consts from '@/utils/consts'
 import { action } from '@formily/reactive'
+import { buildUUID } from '@/utils/uuid'
+import styles from './index.less'
+const configureItemTitle = {
+  [ConfigureType.ADDSIGN]: {
+    name: '允许加签',
+    short: '签'
+  },
+  [ConfigureType.ASSISTAUDIT]: {
+    name: '允许协审',
+    short: '协'
+  },
+  [ConfigureType.RETURN]: {
+    name: '允许退回',
+    short: '退'
+  },
+  [ConfigureType.REVOKE]: {
+    name: '允许撤回',
+    short: '撤'
+  },
+  [ConfigureType.SKIP]: {
+    name: '允许跳过',
+    short: '跳'
+  }
+}
+
+const configureArr = [
+  // ConfigureType.ADDSIGN,
+  ConfigureType.ASSISTAUDIT,
+  ConfigureType.RETURN
+  // ConfigureType.REVOKE,
+  // ConfigureType.SKIP
+]
 const FlowDrawer = () => {
   const { flowState, dispatch } = useContext(FlowContext)
   const { drawerConfig } = flowState
 
   const [state, setState] = useState({
     approvalWay: ApprovalWay.ACCOUNT,
-    participantMode: ParticipantMode.ACCOUNT,
-    accounts: []
+    accounts: {}
   })
   useEffect(() => {
     if (drawerConfig.nodeId && drawerConfig.visible) {
@@ -41,9 +72,7 @@ const FlowDrawer = () => {
     const payload = {
       id: drawerConfig.nodeId,
       node: {
-        approvalType: state.approvalType,
-        approvalAccounts: state.staffOptions
-        // approvalMethod: ApprovalMethod.ORDER
+        approvalType: state.approvalType
       }
     }
     dispatch({
@@ -56,14 +85,27 @@ const FlowDrawer = () => {
   // 添加用户-参与者卡片
   const addParticipantInfo = () => {
     setState({
-      ...state
+      ...state,
+      accounts: {
+        ...state.accounts,
+        [buildUUID()]: {
+          participantMode: ParticipantMode.ACCOUNT,
+          ID: null,
+          name: null,
+          institutionID: null,
+          configure: [ConfigureType.ASSISTAUDIT, ConfigureType.RETURN]
+        }
+      }
     })
   }
 
-  const formOptions = useMemo(
-    () => ({
-      instance: createForm({
-        initialValues: {},
+  const renderCard = () => {
+    const keys = Object.keys(state.accounts)
+    return keys.map(key => {
+      const participant = state.accounts?.[key]
+      if (!participant) return null
+      const form = createForm({
+        initialValues: { participant },
         effects() {
           onFieldMount('ID', (field, form) => {
             field.setComponentProps({
@@ -87,8 +129,8 @@ const FlowDrawer = () => {
           })
           onFieldValueChange('ID', (_, form) => console.log(form.getValuesIn()))
         }
-      }),
-      useAsyncDataSource: service => field => {
+      })
+      const useAsyncDataSource = service => field => {
         field.loading = true
         service(field).then(
           action.bound(data => {
@@ -96,8 +138,8 @@ const FlowDrawer = () => {
             field.loading = false
           })
         )
-      },
-      loadInstitutionList: async () => {
+      }
+      const loadInstitutionList = async () => {
         const { code = -1, data: { items = [] } = {} } = await queryInstitutionList({
           current: 1,
           pageSize: 214000
@@ -107,16 +149,95 @@ const FlowDrawer = () => {
         }
         return []
       }
-    }),
-    []
-  )
+      const SchemaField = createSchemaField({
+        components: {
+          FormItem,
+          Select
+        }
+      })
 
-  const SchemaField = createSchemaField({
-    components: {
-      FormItem,
-      Select
-    }
-  })
+      const toggleCheck = (checked, target) => {
+        participant.configure = checked
+          ? [...participant.configure, target]
+          : participant.configure.filter(item => item !== target)
+        setState({ ...state, accounts: { ...state.accounts, [key]: participant } })
+      }
+
+      const delCardItem = id => {
+        const newAccount = { ...state.accounts }
+        delete newAccount[id]
+        setState({ ...state, accounts: newAccount })
+      }
+      return (
+        <div
+          className={[
+            'shadow-card border rounded-md flex flex-col justify-between px-4 py-2 mt-6',
+            styles.participantCard
+          ].join(' ')}
+          key={key}>
+          <div className="flex flex-row justify-between">
+            <div className="text-base font-medium ">参与者</div>
+            <div className="text-primary cursor-pointer" onClick={() => delCardItem(key)}>
+              删除
+            </div>
+          </div>
+          <div className="mt-3">
+            <FormProvider form={form}>
+              <SchemaField
+                schema={participantSchema}
+                scope={{
+                  useAsyncDataSource,
+                  loadInstitutionList
+                }}
+              />
+            </FormProvider>
+          </div>
+          {/* <Button onClick={() => console.log(formOptions.instance.getState().values)}>
+                11111
+              </Button> */}
+
+          <Collapse
+            defaultActiveKey={['1']}
+            ghost
+            expandIcon={({ isActive }) => (
+              <span className="text-primary font-medium">{isActive ? '收叠' : '展开'}</span>
+            )}
+            expandIconPosition="right">
+            <Collapse.Panel
+              header={
+                <div className="flex flex-row justify-between items-center">
+                  <div className="text-md font-midium h-24px leading-24px">配置信息</div>
+                  <div className="children:mx-1 flex flex-row ml-1">
+                    {participant.configure.map(item => (
+                      <div
+                        key={item}
+                        className="w-30px text-center rounded-lg text-primary border border-hex-0089ff bg-hex-e9f5ff">
+                        {configureItemTitle[item]?.short}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              }
+              key="1">
+              <Row>
+                {configureArr.map(item => (
+                  <Col span={8} key={item}>
+                    <div className="p-2 flex flex-row items-center ">
+                      <div className="mr-2">{configureItemTitle[item]?.name}</div>
+                      <Switch
+                        checked={participant.configure.includes(item)}
+                        onChange={checked => toggleCheck(checked, item)}
+                      />
+                    </div>
+                  </Col>
+                ))}
+              </Row>
+            </Collapse.Panel>
+          </Collapse>
+        </div>
+      )
+    })
+  }
 
   return (
     <Drawer
@@ -138,15 +259,15 @@ const FlowDrawer = () => {
             <Tooltip
               title={
                 <div>
-                  <p>指定用户：选择指定的用户或者角色完成审批。</p>
-                  <p>
+                  <div>指定用户：选择指定的用户或者角色完成审批。</div>
+                  {/* <div>
                     会签：指同一个审批节点设置多个人，如ABC三人，三人会同时收到审批，需全部同意之后，审批才可到下一审批节点
-                  </p>
-                  <p>
+                  </div>
+                  <div>
                     或签：指同一个审批节点设置多个人，如ABC三人，三人会同时收到审批，只要其中任意一人审批即可到下一审批节点
-                  </p>
-                  <p>依次审批：按照顺序逐个审批</p>
-                  <p>由上一次审批人设置：由上环节审批人设置下环节流程。</p>
+                  </div>
+                  <div>依次审批：按照顺序逐个审批</div>
+                  <div>由上一次审批人设置：由上环节审批人设置下环节流程。</p> */}
                 </div>
               }>
               <QuestionCircleFilled style={{ color: '#FEA100' }} />
@@ -169,57 +290,7 @@ const FlowDrawer = () => {
               添加用户
             </Button>
           </div>
-          <div className="shadow-xl border rounded-md flex flex-col justify-between px-4 py-2 mt-6">
-            <div className="flex flex-row justify-between">
-              <span className="text-base font-medium">参与者</span>
-              <span className="text-primary">删除</span>
-            </div>
-            <div className="my-2">
-              <FormProvider form={formOptions.instance}>
-                <SchemaField
-                  schema={participantSchema}
-                  scope={{
-                    useAsyncDataSource: formOptions.useAsyncDataSource,
-                    loadInstitutionList: formOptions.loadInstitutionList
-                  }}
-                />
-              </FormProvider>
-              {/* <Button onClick={() => console.log(formOptions.instance.getState().values)}>
-                11111
-              </Button> */}
-            </div>
-            <div className="flex flex-row justify-between items-center">
-              <div className="flex flex-row justify-between items-center">
-                <span className="text-md font-midium">配置信息</span>
-                <div className="children:mx-1 flex flex-row ml-1">
-                  <div className="w-30px text-center rounded-lg text-primary border border-hex-0089ff bg-hex-e9f5ff">
-                    跳
-                  </div>
-                  <div className="w-30px text-center rounded-lg text-primary border border-hex-0089ff bg-hex-e9f5ff">
-                    协
-                  </div>
-                  <div className="w-30px text-center rounded-lg text-primary border border-hex-0089ff bg-hex-e9f5ff">
-                    加
-                  </div>
-                  <div className="w-30px text-center rounded-lg text-primary border border-hex-0089ff bg-hex-e9f5ff">
-                    撤
-                  </div>
-                  <div className="w-30px text-center rounded-lg text-primary border border-hex-0089ff bg-hex-e9f5ff">
-                    退
-                  </div>
-                </div>
-              </div>
-              <span className="text-primary font-medium">收叠</span>
-            </div>
-            <Row>
-              <Col span={8} />
-              <Col span={8} />
-              <Col span={8} />
-              <Col span={8} />
-              <Col span={8} />
-              <Col span={8} />
-            </Row>
-          </div>
+          {renderCard()}
         </Tabs.TabPane>
       </Tabs>
     </Drawer>

src/pages/Project/Verification/Detail/Flow/enum/index.ts

@@ -28,3 +28,11 @@ export enum ParticipantMode {
   /** @name 角色模式 */
   ROLE = 'role'
 }
+
+export enum ConfigureType {
+  SKIP = 'skip',
+  RETURN = 'return',
+  REVOKE = 'revoke',
+  ASSISTAUDIT = 'assistAudit',
+  ADDSIGN = 'addSign'
+}

src/utils/uuid.ts

@@ -6,20 +6,20 @@ for (let i = 0; i <= 15; i++) {
 }
 
 export function buildUUID(): string {
-  let uuid = ''
-  for (let i = 1; i <= 36; i++) {
-    if (i === 9 || i === 14 || i === 19 || i === 24) {
-      uuid += '-'
-    } else if (i === 15) {
-      uuid += 4
-    } else if (i === 20) {
-      uuid += hexList[(Math.random() * 4) | 8]
-    } else {
-      uuid += hexList[(Math.random() * 16) | 0]
-    }
-  }
+  // let uuid = ''
+  // for (let i = 1; i <= 36; i++) {
+  //   if (i === 9 || i === 14 || i === 19 || i === 24) {
+  //     uuid += '-'
+  //   } else if (i === 15) {
+  //     uuid += 4
+  //   } else if (i === 20) {
+  //     uuid += hexList[(Math.random() * 4) | 8]
+  //   } else {
+  //     uuid += hexList[(Math.random() * 16) | 0]
+  //   }
+  // }
   // return uuid.replace(/-/g, '')
-  return uuid
+  return URL.createObjectURL(new Blob()).substr(-36)
 }
 
 let unique = 0

windi.config.ts

@@ -21,7 +21,8 @@ export default defineConfig({
         '2xl': '1600px'
       },
       boxShadow: {
-        card: '0 0 13px 0 rgba(74, 53, 107, 0.08)'
+        card: '0 0 13px 0 rgba(74, 53, 107, 0.08)',
+        base: '1px 1px 1px 1px rgba(0,0,0, 0.15)'
       }
     }
   },