feat: 新增编号规则tags

package.json

@@ -183,6 +183,7 @@
     "mobx": "^5.15.4",
     "mobx-react": "^6.1.7",
     "nprogress": "^0.2.0",
+    "rc-tween-one": "^2.7.3",
     "react": "^17.0.1",
     "react-activation": "^0.5.6",
     "react-dom": "^16.13.1",

src/components/Button/index.tsx

@@ -1,12 +1,12 @@
 import { Button } from 'antd'
-import { BaseButtonProps } from 'antd/lib/button/button'
+import { ButtonProps } from 'antd/lib/button/button'
 import React from 'react'
 import styles from './index.module.scss'
-const ZhButton:React.FC<BaseButtonProps> = props => {
+const ZhButton:React.FC<ButtonProps> = props => {
   return <div className={styles.primaryButton}><Button {...props}></Button></div>
 }
 
-const ZhCloseButton:React.FC<BaseButtonProps> = props => {
+const ZhCloseButton:React.FC<ButtonProps> = props => {
   return <div className={styles.closeButton}><Button {...props}></Button></div>
 }
 
@@ -14,3 +14,4 @@ export {
   ZhButton,
   ZhCloseButton
 }
+

src/pages/Safe/Content/List/modal.tsx

@@ -1,12 +1,55 @@
 import { ZhButton } from '@/components/Button'
 import DatePicker from '@/components/DatePicker'
 import { tenderStore } from '@/store/mobx'
-import { Form, Input, InputNumber, Modal, Select, Tabs } from 'antd'
+import { dayjsFomrat } from '@/utils/util'
+import { Form, Input, InputNumber, Modal, Select, Tabs, Tag } from 'antd'
 import locale from 'antd/es/date-picker/locale/zh_CN'
+import { TweenOneGroup } from 'rc-tween-one'
 import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 const { TabPane } = Tabs
 const { Option } = Select
+
+interface iTags {
+  ruleArr: any[]
+  setRuleArr: (arr: any[]) => void
+}
+const RenderTags:React.FC<iTags> = ({ ruleArr, setRuleArr }) => {
+  const handleClose = (removedTag: any) => {
+    const tags = ruleArr.filter(tag => tag !== removedTag)
+    setRuleArr(tags)
+  }
+  return (
+    <div>
+      <TweenOneGroup
+            enter={{
+              scale: 0.8,
+              opacity: 0,
+              type: 'from',
+              duration: 100
+              // onComplete: e => {
+              //   e.target.style = ''
+              // }
+            }}
+            leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
+            appear={false}
+          >
+            {
+              ruleArr.map((tag, idx) => {
+                return (
+                  <span key={idx} style={{ display: 'inline-block' }}>
+                    <Tag closable onClose={() => handleClose(tag)}>
+                      {tag}
+                    </Tag>
+                  </span>
+                )
+              })
+            }
+          </TweenOneGroup>
+    </div>
+  )
+}
+
 interface iSafeCreateFormProps {
   visible: boolean;
   type: string;
@@ -24,10 +67,35 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
 }) => {
   const [ form ] = Form.useForm()
   const [ ruleType, setRuleType ] = useState<string>('3')
-
+  const [ ruleArr, setRuleArr ] = useState<any[]>([])
   useEffect(() => {
     form.setFieldsValue({ bidsectionId: tenderStore.bidsectionId })
   }, [ tenderStore.bidsectionId ])
+  const ruleHandler = () => {
+    switch (ruleType) {
+      case '0':
+        setRuleArr([ ...ruleArr, tenderStore.name ])
+        break
+      case '1':
+        setRuleArr([ ...ruleArr, form.getFieldValue('ruleText') ])
+        break
+      case '2':
+        setRuleArr([ ...ruleArr, dayjsFomrat(new Date(), 'YYYYMM') ])
+        break
+      default:
+        setRuleArr([ ...ruleArr, form.getFieldValue('initCode') ])
+        break
+    }
+  }
+  // 处理自动位数编号 -> 联动起始编号
+  const digitHandler = (value: any) => {
+    if (value) {
+      const length = form.getFieldValue('digits')
+      const code = parseInt(form.getFieldValue('initCode'))
+      const newCode = (Array(length).join('0') + code).slice(-length)
+      form.setFieldsValue({ initCode: newCode })
+    }
+  }
   return (
     <Modal
       getContainer={false}
@@ -80,6 +148,8 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
           <>
             <Tabs defaultActiveKey="1" type="card" size="small">
               <TabPane tab="编号规则设置" key="1">
+              <h5>当前规则：{ruleArr.join('-')}</h5>
+              <div><RenderTags ruleArr={ruleArr} setRuleArr={setRuleArr}></RenderTags></div>
                 <Form.Item label="添加新组建规则" name="ruleType" initialValue="3">
                   <Select onChange={(value: string) => setRuleType(value)}>
                     <Option value="0">标段名</Option>
@@ -92,10 +162,10 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
                   ruleType === '3' ?
                     <>
                       <Form.Item label="自动编号位数" name="digits" initialValue="3">
-                        <InputNumber size="small" style={{ width: '100%' }}></InputNumber>
+                        <InputNumber size="small" min={1} style={{ width: '100%' }} onChange={(value) => digitHandler(value)}></InputNumber>
                       </Form.Item>
                       <Form.Item label="起始编号" name="initCode" initialValue="001">
-                        <Input></Input>
+                        <Input type="number"></Input>
                       </Form.Item>
                     </>
                   : ''
@@ -109,7 +179,7 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
                   </>
                   : ''
                 }
-                <ZhButton size="small">添加组件</ZhButton>
+                <ZhButton size="small" onClick={() => ruleHandler()}>添加组件</ZhButton>
               </TabPane>
               <TabPane tab="部位设置" key="2"></TabPane>
             </Tabs>
@@ -120,4 +190,5 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
   )
 }
 
+
 export default SafeCreateForm

src/pages/Safe/Content/Summary/index.tsx

@@ -19,8 +19,9 @@ const Summary:React.FC<RouteProps> = (props) => {
     if (Object.keys(props.location?.state as object).length) {
       console.log(props.location?.state)
 
-      const { id = "" } = props.location?.state as {id: string}
+      const { id = '', name = '' } = props.location?.state as {id: string;name: string}
       id && (tenderStore.saveBidsectionId(id))
+      name && (tenderStore.saveName(name))
     }
   }
   return (

src/pages/Safe/List/index.tsx

@@ -53,7 +53,7 @@ const List: React.FC<{}> = () => {
           return <div style={{ verticalAlign: "baseline" }}><SvgIcon type={record.hasFolder ? "xxh-folder-open" : "xxh-folder"} /><span className="pi-mg-left-2">{text}</span></div>
         } else {
         return <div><span style={{ color: '#6c757d', marginRight: '.5rem' }}>{record.isEnd ? '└' : '├'}</span>
-        <Link to={{ pathname: '/console/safe/content/summary', state: { id: record.bidsectionId } }}>{text}</Link>
+        <Link to={{ pathname: '/console/safe/content/summary', state: { id: record.bidsectionId, name: record.name } }}>{text}</Link>
         </div>
         }
       }

src/store/mobx/tender/index.ts

@@ -2,10 +2,14 @@ import { action, observable } from "mobx"
 
 class Tender {
   @observable bidsectionId:string = ''
+  @observable name:string = ''
 
   @action saveBidsectionId(id: string) {
     this.bidsectionId = id
   }
+  @action saveName(id: string) {
+    this.name = id
+  }
 }
 
 export default new Tender()