111

src/components/RuleModal/index.tsx

@@ -16,7 +16,7 @@ interface iTags {
   ruleArr: ruleOption[]
   setRuleArr: (arr: ruleOption[]) => void
 }
-const RenderTags:React.FC<iTags> = ({ ruleArr, setRuleArr }) => {
+const RenderTags: React.FC<iTags> = ({ ruleArr, setRuleArr }) => {
   const handleClose = (removedTag: ruleOption) => {
     const tags = ruleArr.filter(tag => tag.value !== removedTag.value)
     setRuleArr(tags)
@@ -24,30 +24,30 @@ const RenderTags:React.FC<iTags> = ({ ruleArr, setRuleArr }) => {
   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={(e: MouseEvent) => {e.preventDefault();handleClose(tag)}}>
-                      {tag.value}
-                    </Tag>
-                  </span>
-                )
-              })
-            }
-          </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={(e: MouseEvent) => { e.preventDefault(); handleClose(tag) }}>
+                  {tag.value}
+                </Tag>
+              </span>
+            )
+          })
+        }
+      </TweenOneGroup>
     </div>
   )
 }
@@ -72,9 +72,13 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
   positionTab
 }) => {
   const [ form ] = Form.useForm()
-  const [ ruleType, setRuleType ] = useState<string>('3')
+  const [ ruleType, setRuleType ] = useState<string>()
   const [ ruleArr, setRuleArr ] = useState<ruleOption[]>([])
   useEffect(() => {
+    if (visible) {
+      setRuleType('3')
+      form.setFieldsValue({ ruleType: '3', digits: '3', initCode: '001', ruleText: '' })
+    }
     form.setFieldsValue({ bidsectionId: tenderStore.tender.bidsectionId })
   }, [ visible, type ])
   const ruleHandler = () => {
@@ -146,7 +150,9 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
       onOk={() => {
         form
           .validateFields()
-          .then(() => {
+          .then((values) => {
+            console.log(values)
+
             form.resetFields()
             onCreate(ruleArr)
           })
@@ -156,48 +162,39 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
       }}
     >
       <Form form={form} layout="vertical" size="middle" className={styles.SafeModalForm}>
-      <Tabs defaultActiveKey="1" type="card" size="small">
-              <TabPane tab="编号规则设置" key="1">
-              <div className={styles.ruleContaniner}>
-                <h5 className={styles.ruleText}>当前规则：{ruleArr.map(item => item.value).join('-')}</h5>
-                <div><RenderTags ruleArr={ruleArr} setRuleArr={setRuleArr} /></div>
-              </div>
-                <Form.Item label="添加新组建规则" name="ruleType" initialValue="3">
-                  <Select onChange={(value: string) => setRuleType(value)}>
-                    <Option value="0">标段名</Option>
-                    <Option value="1">文本</Option>
-                    <Option value="2">当前年月</Option>
-                    <Option value="3">自动编号</Option>
-                  </Select>
-                </Form.Item>
-                {
-                  ruleType === '3' ?
-                    <>
-                      <Form.Item label="自动编号位数" name="digits" initialValue="3">
-                        <InputNumber size="small" min={1} style={{ width: '100%' }} onChange={(value) => digitHandler(value)} />
-                      </Form.Item>
-                      <Form.Item label="起始编号" name="initCode" initialValue="001">
-                        <Input type="number" />
-                      </Form.Item>
-                    </>
-                  : ''
-                }
-                {
-                  ruleType === '1' ?
-                  <>
-                    <Form.Item label="规则文本" name="ruleText">
-                      <Input />
-                    </Form.Item>
-                  </>
-                  : ''
-                }
-                <ZhButton size="small" onClick={() => ruleHandler()}>添加组件</ZhButton>
-              </TabPane>
-              {
-                positionTab ? { positionTab } : ''
-              }
-              {/* <TabPane tab="部位设置" key="2"></TabPane> */}
-            </Tabs>
+        <Tabs defaultActiveKey="1" type="card" size="small">
+          <TabPane tab="编号规则设置" key="1">
+            <div className={styles.ruleContaniner}>
+              <h5 className={styles.ruleText}>当前规则：{ruleArr.map(item => item.value).join('-')}</h5>
+              <div><RenderTags ruleArr={ruleArr} setRuleArr={setRuleArr} /></div>
+            </div>
+            <Form.Item label="添加新组建规则" name="ruleType">
+              <Select onChange={(value: string) => setRuleType(value)}>
+                <Option value="0">标段名</Option>
+                <Option value="1">文本</Option>
+                <Option value="2">当前年月</Option>
+                <Option value="3">自动编号</Option>
+              </Select>
+            </Form.Item>
+
+            <Form.Item label="自动编号位数" name="digits" hidden={ruleType === '3' ? false : true}>
+              <InputNumber size="small" min={1} style={{ width: '100%' }} onChange={(value) => digitHandler(value)} />
+            </Form.Item>
+            <Form.Item label="起始编号" name="initCode"  hidden={ruleType === '3' ? false : true}>
+              <Input type="number" />
+            </Form.Item>
+
+            <Form.Item label="规则文本" name="ruleText" hidden={ruleType === '1' ? false : true}>
+              <Input />
+            </Form.Item>
+
+            <ZhButton size="small" onClick={() => ruleHandler()}>添加组件</ZhButton>
+          </TabPane>
+          {
+            positionTab ? { positionTab } : ''
+          }
+          {/* <TabPane tab="部位设置" key="2"></TabPane> */}
+        </Tabs>
       </Form>
     </Modal>
   )