编号设置

src/pages/Isystem/I2dict/I2add.tsx

@@ -74,6 +74,8 @@ function I2add({ addInfo, addFu, closeFu }: Props) {
   // 通过校验点击确定
   const onFinish = useCallback(
     async (values: any) => {
+      if (!parentIdArr || parentIdArr.length === 0) return MessageFu.warning('请选择上级名称')
+
       let ancestor = ''
       let parentId: string | null = null
 
@@ -144,7 +146,9 @@ function I2add({ addInfo, addFu, closeFu }: Props) {
           autoComplete='off'
         >
           <div className='fromRow'>
-            <div className='fromRowll'>上级名称：</div>
+            <div className='fromRowll'>
+              <span>* </span> 上级名称：
+            </div>
             <div className='fromRowrr'>
               <Cascader
                 style={{ width: 658 }}
@@ -178,10 +182,10 @@ function I2add({ addInfo, addFu, closeFu }: Props) {
               name='sort'
               rules={[{ required: true, message: '请输入排序值!' }]}
             >
-              <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
+              <InputNumber min={1} max={99999} precision={0} placeholder='请输入' />
             </Form.Item>
             <div className='fromRowTit'>
-              请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
+              请输入1~99999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
             </div>
           </div>
 

src/pages/Isystem/I2dict/index.module.scss

@@ -61,6 +61,9 @@
             justify-content: space-around;
           }
         }
+        .ant-tree-node-selected {
+          background-color: var(--themeColor2) !important;
+        }
       }
       .I2m1rr {
         width: calc(40% - 24px);
@@ -137,6 +140,9 @@
           width: 94px;
           text-align: right;
           position: relative;
+          & > span {
+            color: #ff4d4f;
+          }
         }
         .fromRowrr {
           width: calc(100% - 94px);

src/pages/Isystem/I2dict/index.tsx

@@ -148,11 +148,13 @@ function I2dict() {
       <div className='I2top'>
         <div className='I2topll'>
           <Input
-            style={{ width: 240 }}
+            style={{ width: 300 }}
             placeholder='请输入字典值'
             maxLength={30}
+            showCount
             value={value}
             onChange={e => valueChange(e.target.value)}
+            allowClear
           />
         </div>
         <div className='I2toprr'>
@@ -168,8 +170,8 @@ function I2dict() {
           >
             新增
           </Button>
-          &emsp;
-          <Button onClick={() => resetFu(true)}>重置</Button>
+          {/* &emsp; */}
+          {/* <Button onClick={() => resetFu(true)}>重置</Button> */}
         </div>
       </div>
       {/* 主体 */}

src/pages/Isystem/I3numSet/I3edit.tsx

@@ -0,0 +1,98 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { Button, Form, FormInstance, Input, Modal, Select } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { I3editSelectDate, I3editSelectlength, TypeI3list } from './data'
+import { MessageFu } from '@/utils/message'
+import { I3_APIsave } from '@/store/action/Isystem/I3numSet'
+
+type Props = {
+  editObj: TypeI3list
+  editFu: () => void
+  closeFu: () => void
+}
+
+function I3edit({ editObj, editFu, closeFu }: Props) {
+  useEffect(() => {
+    FormBoxRef.current?.setFieldsValue(editObj)
+  }, [editObj])
+
+  // 设置表单ref
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    // return MessageFu.warning("有表单不符号规则!");
+  }, [])
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      const obj = { ...values, id: editObj.id }
+      const res = await I3_APIsave(obj)
+      if (res.code === 0) {
+        MessageFu.success('编辑成功')
+        editFu()
+        closeFu()
+      }
+    },
+    [closeFu, editFu, editObj.id]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.I3edit}
+      open={true}
+      title='编辑'
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='I3aMain'>
+        <Form
+          scrollToFirstError={true}
+          ref={FormBoxRef}
+          name='basic'
+          labelCol={{ span: 3 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+        >
+          <Form.Item label='编号类型' name='name'>
+            <Input maxLength={30} disabled />
+          </Form.Item>
+
+          <Form.Item
+            label='前缀'
+            name='prefix'
+            rules={[{ pattern: /^[A-Z0-9]*$/, message: '请输入大写英文字母或数字' }]}
+          >
+            <Input maxLength={6} showCount placeholder='请输入大写英文字母或数字' />
+          </Form.Item>
+
+          <Form.Item label='日期方式' name='dateType'>
+            <Select options={I3editSelectDate} />
+          </Form.Item>
+
+          <Form.Item label='流水号位数' name='length' rules={[{ required: true, message: '' }]}>
+            <Select options={I3editSelectlength} />
+          </Form.Item>
+
+          {/* 确定和取消按钮 */}
+          <br />
+          <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+            &emsp;
+            <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoI3edit = React.memo(I3edit)
+
+export default MemoI3edit

src/pages/Isystem/I3numSet/data.ts

@@ -0,0 +1,29 @@
+export const I3editSelectDate = [
+  { value: '', label: '无' },
+  { value: 'yyyyMMdd', label: 'yyyyMMdd' },
+  { value: 'yyMMdd', label: 'yyMMdd' },
+  { value: 'MMdd', label: 'MMdd' }
+]
+
+export const I3editSelectlength = [
+  { value: 2, label: 2 },
+  { value: 3, label: 3 },
+  { value: 4, label: 4 },
+  { value: 5, label: 5 },
+  { value: 6, label: 6 },
+  { value: 7, label: 7 },
+  { value: 8, label: 8 }
+]
+
+export type TypeI3list = {
+  createTime: string
+  creatorName: string
+  dateType: string
+  id: number
+  isEdit: number
+  length: number
+  name: string
+  prefix: string
+  type: string
+  updateTime: string
+}

src/pages/Isystem/I3numSet/index.module.scss

@@ -1,4 +1,39 @@
 .I3numSet {
   :global {
+    .I3top {
+      display: flex;
+      justify-content: space-between;
+      border-radius: 10px;
+      padding: 15px 24px;
+      background-color: var(--boxBcaColor);
+    }
+    .I3tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 15px;
+      height: calc(100% - 77px);
+      background-color: var(--boxBcaColor);
+    }
+  }
+}
+
+// 编辑弹窗页面
+.I3edit {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+    }
+
+    .I3aMain {
+      padding-top: 15px;
+    }
   }
 }

src/pages/Isystem/I3numSet/index.tsx

@@ -1,9 +1,95 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import { Button, Input } from 'antd'
+import { useDispatch, useSelector } from 'react-redux'
+import MyTable from '@/components/MyTable'
+import { RootState } from '@/store'
+import { I3tableC } from '@/utils/tableData'
+import { I3_APIgetList } from '@/store/action/Isystem/I3numSet'
+import { TypeI3list } from './data'
+import I3edit from './I3edit'
+
 function I3numSet() {
+  const dispatch = useDispatch()
+
+  const [value, setValue] = useState('')
+  const valueRef = useRef('')
+
+  const getListFu = useCallback(() => {
+    dispatch(I3_APIgetList(valueRef.current))
+  }, [dispatch])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  // 点击重置
+  const resetFu = useCallback(() => {
+    setValue('')
+    valueRef.current = ''
+    getListFu()
+  }, [getListFu])
+
+  // 从仓库中获取表格数据
+  const tableList = useSelector((state: RootState) => state.I3numSet.tableList)
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: TypeI3list) => {
+          return (
+            <Button size='small' type='text' onClick={() => setEditObj(item)}>
+              编辑
+            </Button>
+          )
+        }
+      }
+    ]
+  }, [])
+
+  // 点击编辑
+  const [editObj, setEditObj] = useState({} as TypeI3list)
+
   return (
     <div className={styles.I3numSet}>
       <div className='pageTitle'>编号设置</div>
+      {/* 顶部 */}
+      <div className='I3top'>
+        <div className='I3topll'>
+          <Input
+            placeholder='请输入编号类型'
+            value={value}
+            onChange={e => {
+              const val = e.target.value.trim()
+              valueRef.current = val
+              setValue(val)
+            }}
+            maxLength={10}
+          />
+        </div>
+        <div className='I3toprr'>
+          <Button type='primary' onClick={getListFu}>
+            查询
+          </Button>
+          &emsp;
+          <Button onClick={resetFu}>重置</Button>
+        </div>
+      </div>
+      {/* 表格 */}
+      <div className='I3tableBox'>
+        <MyTable
+          yHeight={632}
+          list={tableList}
+          columnsTemp={I3tableC}
+          lastBtn={tableLastBtn}
+          pagingInfo={false}
+        />
+      </div>
+
+      {editObj.id ? (
+        <I3edit editObj={editObj} editFu={resetFu} closeFu={() => setEditObj({} as TypeI3list)} />
+      ) : null}
     </div>
   )
 }

src/store/action/Isystem/I3numSet.ts

@@ -0,0 +1,23 @@
+import { AppDispatch } from '@/store'
+import http from '@/utils/http'
+
+/**
+ * 编码规则-获取列表
+ */
+export const I3_APIgetList = (name: string): any => {
+  return async (dispatch: AppDispatch) => {
+    let url = 'cms/number/getList'
+    if (name) url += `?name=${name}`
+    const res = await http.get(url)
+    if (res.code === 0) {
+      dispatch({ type: 'I3/getList', payload: res.data })
+    }
+  }
+}
+
+/**
+ * 点击编辑
+ */
+export const I3_APIsave = (data: any) => {
+  return http.post('cms/number/edit', data)
+}

src/store/reducer/Isystem/I3numSet.ts

@@ -0,0 +1,25 @@
+import { TypeI3list } from '@/pages/Isystem/I3numSet/data'
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  tableList: [] as TypeI3list[]
+}
+
+// 定义 action 类型
+type Props = {
+  type: 'I3/getList'
+  payload: TypeI3list[]
+}
+
+// reducer
+export default function userReducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case 'I3/getList':
+      return { ...state, tableList: action.payload }
+
+    default:
+      return state
+  }
+}

src/store/reducer/index.ts

@@ -5,6 +5,7 @@ import { combineReducers } from 'redux'
 import A0Layout from './layout'
 
 import I2dict from './Isystem/I2dict'
+import I3numSet from './Isystem/I3numSet'
 import Z1user from './Z1user'
 import Z2log from './Z2log'
 
@@ -12,6 +13,7 @@ import Z2log from './Z2log'
 const rootReducer = combineReducers({
   A0Layout,
   I2dict,
+  I3numSet,
   Z1user,
   Z2log
 })

src/utils/tableData.ts

@@ -14,6 +14,13 @@
 //     ["text", "创建日期",'description', 50,A],
 //   ];
 
+export const I3tableC = [
+  ['txt', '编号类型', 'name'],
+  ['txt', '前缀', 'prefix'],
+  ['txt', '日期方式', 'dateType'],
+  ['txt', '起始流水编号', 'length']
+]
+
 export const Z1tableC = [
   ['txt', '用户名', 'userName'],
   ['txt', '角色', 'roleName'],