fix: 111

src/pages/Business/RulesSet/index.tsx

@@ -7,7 +7,6 @@ import { queryRuleCodeList, updateRuleCode } from '@/services/api/business'
 import { useRequest } from '@umijs/max'
 
 const { TabPane } = Tabs
-const { Option } = Select
 const contentHeight = document.body.clientHeight - 122
 
 const connectorOption = [
@@ -16,13 +15,31 @@ const connectorOption = [
   { label: '_', value: '_' }
 ]
 
-export enum ruleOptionEunm {
-  REVIEWTYPE = '1',
-  YEAR = '2',
-  MONTH = '3',
-  NUMBER = '4',
-  TEXT = '5'
+enum ruleOptionEunm {
+  APPROVALTYPE = 'approvalType',
+  CURRENTYEAR = 'currentYear',
+  CURRENTMONTH = 'currentMonth',
+  AUTOCODE = 'autoCode',
+  FIXEDTEXT = 'fixedText'
 }
+
+enum ruleOptionLabel {
+  approvalType = '审核类型',
+  currentYear = '当前年份',
+  currentMonth = '当前月份',
+  autoCode = '自动编号',
+  fixedText = '固定文本'
+}
+
+const ruleOption = [
+  { label: ruleOptionLabel.approvalType, value: ruleOptionEunm.APPROVALTYPE },
+  { label: ruleOptionLabel.currentYear, value: ruleOptionEunm.CURRENTYEAR },
+  { label: ruleOptionLabel.currentMonth, value: ruleOptionEunm.CURRENTMONTH },
+  { label: ruleOptionLabel.autoCode, value: ruleOptionEunm.AUTOCODE },
+  { label: ruleOptionLabel.fixedText, value: ruleOptionEunm.FIXEDTEXT }
+]
+
+const approvalTypeOption = [{ label: '预算', value: '01' }]
 interface iTags {
   ruleArr: ruleOption[]
   setRuleArr: (arr: ruleOption[]) => void
@@ -46,7 +63,7 @@ const RenderTags: React.FC<iTags> = ({ ruleArr, setRuleArr }) => {
         appear={false}>
         {ruleArr.map((tag, idx) => {
           return (
-            <span key={idx} style={{ display: 'inline-block' }}>
+            <span key={idx} style={{ display: 'inline-block', marginBottom: '4px' }}>
               {tag?.label ? (
                 <Tag
                   closable
@@ -68,7 +85,7 @@ const RenderTags: React.FC<iTags> = ({ ruleArr, setRuleArr }) => {
 const RulesSet = () => {
   const [form] = Form.useForm()
   const [state, setState] = useState({
-    ruleTypeValue: ruleOptionEunm.REVIEWTYPE,
+    ruleTypeValue: ruleOptionEunm.APPROVALTYPE,
     tabId: 'yuS',
     connector: '-'
   })
@@ -102,8 +119,8 @@ const RulesSet = () => {
   })
 
   useEffect(() => {
-    if (state.ruleTypeValue === ruleOptionEunm.NUMBER) {
-      form.setFieldsValue({ ruleType: ruleOptionEunm.NUMBER, digits: '5', autoCode: '00001', ruleText: '' })
+    if (state.ruleTypeValue === ruleOptionEunm.AUTOCODE) {
+      form.setFieldsValue({ ruleType: ruleOptionEunm.AUTOCODE, digits: '5', autoCode: '00001', ruleText: '' })
     }
   }, [state.ruleTypeValue])
 
@@ -118,49 +135,46 @@ const RulesSet = () => {
   }, [])
 
   // 添加规则
-  const ruleHandel = () => {
+  const ruleHandle = () => {
+    // const rule = { id: createUid() }
     switch (state.ruleTypeValue) {
-      case ruleOptionEunm.REVIEWTYPE:
+      case ruleOptionEunm.APPROVALTYPE:
         setRuleArr([
           ...ruleArr,
           {
             type: 'approvalType',
             value: form.getFieldValue('approvalType'),
-            label: '审核类型',
-            pid: createUid()
+            label: '审核类型'
           }
         ])
         break
-      case ruleOptionEunm.YEAR:
+      case ruleOptionEunm.CURRENTYEAR:
         setRuleArr([
           ...ruleArr,
           {
             type: 'currentYear',
             value: dayjsFormat(new Date(), 'YYYY'),
-            label: '当前年份',
-            pid: createUid()
+            label: '当前年份'
           }
         ])
         break
-      case ruleOptionEunm.MONTH:
+      case ruleOptionEunm.CURRENTMONTH:
         setRuleArr([
           ...ruleArr,
           {
             type: 'currentMonth',
             value: dayjsFormat(new Date(), 'M'),
-            label: '当前月份',
-            pid: createUid()
+            label: '当前月份'
           }
         ])
         break
-      case ruleOptionEunm.NUMBER:
+      case ruleOptionEunm.AUTOCODE:
         setRuleArr([
           ...ruleArr,
           {
             type: 'autoCode',
             value: form.getFieldValue('autoCode'),
-            label: '自动编号',
-            pid: createUid()
+            label: '自动编号'
           }
         ])
         break
@@ -176,37 +190,42 @@ const RulesSet = () => {
         ])
         break
     }
+    // setRuleArr([
+    //   ...ruleArr,
+    //   {
+    //     ruleId: ruleId,
+    //     type:,
+    //     label:
+    //   }
+    // ])
   }
   return (
     <PageContainer title={false}>
       <div className="p-4 bg-white" style={{ height: `${contentHeight}px` }}>
-        <div className="flex justify-between w-full pb-2 border-b border-[bg-[#00ffcc]]">
-          <div className="text-xl">编号规则设置</div>
-          <div>
-            <Button
-              type="primary"
-              onClick={() => {
-                tryUpdateRuleCode({
-                  tab: state.tabId,
-                  rules: ruleArr.map(item => ({
-                    rule: item.type,
-                    value: item.value,
-                    label: item.label,
-                    pid: item.pid
-                  })),
-                  connector: state.connector
-                })
-              }}>
-              保存
-            </Button>
-          </div>
+        <div className="flex flex-row-reverse">
+          <Button
+            type="primary"
+            onClick={() => {
+              tryUpdateRuleCode({
+                tab: state.tabId,
+                rules: ruleArr.map(item => ({
+                  rule: item.type,
+                  value: item.value,
+                  label: item.label,
+                  pid: item.pid
+                })),
+                connector: state.connector
+              })
+            }}>
+            保存
+          </Button>
         </div>
         <Form
           form={form}
           initialValues={{
             approvalType: '01',
             Connector: state.connector,
-            ruleType: ruleOptionEunm.REVIEWTYPE
+            ruleType: ruleOptionEunm.APPROVALTYPE
           }}>
           <Tabs
             defaultActiveKey="yuS"
@@ -216,16 +235,16 @@ const RulesSet = () => {
                 tabId: key
               })
             }}>
-            <TabPane key="yuS" tab="预算">
-              <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 24 }} label="编号预览">
+            <TabPane key="yuS" tab="预算编号规则">
+              <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 15 }} label="编号预览">
                 {ruleArr.map(item => item?.value).join(state.connector)}
               </Form.Item>
-              <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 24 }} label="编号规则">
-                <div className="w-full min-h-32px border-1 border-[#d9d9d9] border-solid rounded-2px py-1 px-3">
+              <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 15 }} label="编号规则">
+                <div className="w-full min-h-32px border-1 border-[#d9d9d9] border-solid rounded-2px pt-1 px-1">
                   <RenderTags ruleArr={ruleArr} setRuleArr={setRuleArr} />
                 </div>
               </Form.Item>
-              <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 5 }} label="连接符" name="Connector">
+              <Form.Item labelCol={{ span: 3 }} wrapperCol={{ span: 3 }} label="连接符" name="Connector">
                 <Select
                   options={connectorOption}
                   onSelect={value =>
@@ -237,22 +256,17 @@ const RulesSet = () => {
                 />
               </Form.Item>
               <Row>
-                <Col span={8}>
-                  <Form.Item labelCol={{ span: 9 }} wrapperCol={{ span: 24 }} label="规则" name="ruleType">
+                <Col span={6}>
+                  <Form.Item labelCol={{ span: 12 }} wrapperCol={{ span: 24 }} label="规则" name="ruleType">
                     <Select
+                      options={ruleOption}
                       onSelect={value =>
                         setState({
                           ...state,
                           ruleTypeValue: value
                         })
-                      }>
-                      <Option value="0">请选择</Option>
-                      <Option value="1">审核类型</Option>
-                      <Option value="2">当前年份</Option>
-                      <Option value="3">当前月份</Option>
-                      <Option value="4">自动编号</Option>
-                      <Option value="5">固定文本</Option>
-                    </Select>
+                      }
+                    />
                   </Form.Item>
                 </Col>
                 <Col span={16}>
@@ -261,17 +275,15 @@ const RulesSet = () => {
                       <Form.Item
                         label="类型"
                         name="approvalType"
-                        hidden={state.ruleTypeValue === ruleOptionEunm.REVIEWTYPE ? false : true}>
-                        <Select style={{ width: 180 }}>
-                          <Option value="01">预算</Option>
-                        </Select>
+                        hidden={state.ruleTypeValue === ruleOptionEunm.APPROVALTYPE ? false : true}>
+                        <Select style={{ width: 180 }} options={approvalTypeOption} />
                       </Form.Item>
                     </div>
                     <div className="pr-2">
                       <Form.Item
                         label="数位"
                         name="digits"
-                        hidden={state.ruleTypeValue === ruleOptionEunm.NUMBER ? false : true}>
+                        hidden={state.ruleTypeValue === ruleOptionEunm.AUTOCODE ? false : true}>
                         <InputNumber style={{ width: 180 }} min={1} onChange={value => digitHandler(value)} />
                       </Form.Item>
                     </div>
@@ -279,7 +291,7 @@ const RulesSet = () => {
                       <Form.Item
                         label="规则"
                         name="fixedText"
-                        hidden={state.ruleTypeValue === ruleOptionEunm.TEXT ? false : true}>
+                        hidden={state.ruleTypeValue === ruleOptionEunm.FIXEDTEXT ? false : true}>
                         <Input style={{ width: 180 }} />
                       </Form.Item>
                     </div>
@@ -287,12 +299,12 @@ const RulesSet = () => {
                       <Form.Item
                         label="起始编号"
                         name="autoCode"
-                        hidden={state.ruleTypeValue === ruleOptionEunm.NUMBER ? false : true}>
+                        hidden={state.ruleTypeValue === ruleOptionEunm.AUTOCODE ? false : true}>
                         <Input type="number" style={{ width: 180 }} />
                       </Form.Item>
                     </div>
                     <div>
-                      <Button type="primary" ghost onClick={() => ruleHandel()}>
+                      <Button type="primary" ghost onClick={() => ruleHandle()}>
                         添加
                       </Button>
                     </div>