数据字典

src/assets/styles/base.css

@@ -13,12 +13,10 @@ html {
   --themeColor2: #fddb77;
   --boxBcaColor: #f7efed;
 }
-
 body {
-  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
-    'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
-  color: var(--themeColor) !important;
+  color: #002c15 !important;
 }
 i {
   font-style: normal;
@@ -41,7 +39,6 @@ textarea {
   resize: none !important;
   min-height: 100px !important;
 }
-
 /* 找不到页面 */
 .noFindPage {
   opacity: 0;

src/assets/styles/base.less

@@ -10,11 +10,18 @@ html {
   // user-select: none;
 }
 
+/* 主题色 */
+:root {
+  --themeColor: #002c15;
+  --themeColor2: #fddb77;
+  --boxBcaColor: #f7efed;
+}
+
 body {
   font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
     'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
-  color: #fff !important;
+  color: #002c15 !important;
 }
 
 i {
@@ -43,13 +50,6 @@ textarea {
   min-height: 100px !important;
 }
 
-/* 主题色 */
-:root {
-  --themeColor: #002c15;
-  --themeColor2: #fddb77;
-  --boxBcaColor: #f7efed;
-}
-
 /* 找不到页面 */
 .noFindPage {
   opacity: 0;

src/components/MyPopconfirm.tsx

@@ -6,9 +6,10 @@ type Props = {
   onConfirm: () => void
   Dom?: React.ReactNode
   loc?: 'bottom'
+  disabled?: boolean
 }
 
-function MyPopconfirm({ txtK, onConfirm, Dom, loc }: Props) {
+function MyPopconfirm({ txtK, onConfirm, Dom, loc, disabled }: Props) {
   const txt = useMemo(() => {
     const obj = {
       删除: ['删除后无法恢复，是否删除?', '删除'],
@@ -34,7 +35,7 @@ function MyPopconfirm({ txtK, onConfirm, Dom, loc }: Props) {
       {Dom ? (
         Dom
       ) : txtK === '删除' ? (
-        <Button size='small' type='text' danger>
+        <Button disabled={disabled} size='small' type='text' danger={!disabled}>
           {txtK}
         </Button>
       ) : (

src/pages/Isystem/I2dict/I2add.tsx

@@ -5,30 +5,23 @@ import MyPopconfirm from '@/components/MyPopconfirm'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import { MessageFu } from '@/utils/message'
+import TextArea from 'antd/es/input/TextArea'
 import { I2AddInfoType, TypeI2dict } from './data'
 import { I2_APIgetInfo, I2_APIsave } from '@/store/action/Isystem/I2dict'
 
 type Props = {
-  acShuTxt: string
   addInfo: I2AddInfoType
   addFu: () => void
   closeFu: () => void
-  isNoAcIds: string[] //没有数据或者删除了的时候-既右侧没有操作的时候用到
 }
 
-function I2add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
-  const { dictList: treeData } = useSelector((state: RootState) => state.I2dict)
+function I2add({ addInfo, addFu, closeFu }: Props) {
+  const treeData = useSelector((state: RootState) => state.I2dict.dictAll)
 
   // 级联选择器改变的时候 筛选当前级联的 信息出来
   const [acCardInfo, setAcCardInfo] = useState({} as TypeI2dict)
   const [parentIdArr, setParentIdArr] = useState<string[] | null>(null)
 
-  // useEffect(() => {
-  //   console.log(acCardInfo, parentIdArr)
-  // }, [acCardInfo, parentIdArr])
-
-  const saveIdsRef = useRef<string[]>([])
-
   useEffect(() => {
     setAcCardInfo(addInfo.acInfo)
 
@@ -41,12 +34,7 @@ function I2add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
       ids.pop()
     }
 
-    if (idsRes) {
-      // 保存的时候需要补前面3个级别
-      saveIdsRef.current = idsRes.filter((v, i) => i <= 2)
-      // 去掉0和前2级
-      idsRes = idsRes.filter((v, i) => i > 2)
-    }
+    if (idsRes) idsRes = idsRes.filter((v, i) => v !== '0')
 
     setParentIdArr(idsRes)
   }, [addInfo.acInfo, addInfo.txt])
@@ -70,7 +58,7 @@ function I2add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
     if (addInfo.txt === '编辑') getInfoFu(addInfo.id)
     else {
       FormBoxRef.current?.setFieldsValue({
-        sort: 50000
+        sort: 999
       })
     }
   }, [addInfo.id, addInfo.txt, getInfoFu])
@@ -93,37 +81,32 @@ function I2add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
         return MessageFu.warning('最多支持五级!')
 
       if (acCardInfo) parentId = addInfo.txt === '编辑' ? acCardInfo.parentId : acCardInfo.id
-      if (parentIdArr && parentId) {
-        let arrTemp = [...saveIdsRef.current, ...parentIdArr.filter(v => v !== addInfo.id)]
-        ancestor = arrTemp.join(',')
-      }
-
-      // 新增并且没有父级
-      if (addInfo.txt === '新增' && !parentId && !ancestor) {
-        // console.log('xxx', saveIdsRef.current)
+      if (parentIdArr && parentId) ancestor = parentIdArr.filter(v => v !== addInfo.id).join(',')
 
-        parentId = saveIdsRef.current[saveIdsRef.current.length - 1]
-        ancestor = saveIdsRef.current.join(',')
-        // console.log(123, parentId, ancestor)
+      let level = 1
+      if (parentIdArr) {
+        level = addInfo.txt === '新增' ? acCardInfo.level + 1 : acCardInfo.level
+      }
 
-        // 外层没有选中
-        if (!addInfo.acInfo.id) {
-          parentId = isNoAcIds[isNoAcIds.length - 1]
-          ancestor = isNoAcIds.join(',')
-        }
+      // 补0
+      if (addInfo.id === '-1') {
+        // 新增
+        if (!parentId && !ancestor) {
+          ancestor = '0'
+          parentId = '0'
+        } else ancestor = '0,' + ancestor
+      } else {
+        // 编辑
+        if (!ancestor) ancestor = '0'
+        else ancestor = '0,' + ancestor
       }
 
-      // let level = 1
-      // if (parentIdArr) {
-      //   level = addInfo.txt === '新增' ? acCardInfo.level + 1 : acCardInfo.level
-      // }
       const obj = {
         ...values,
-        id: addInfo.txt === '编辑' ? addInfo.id : null,
+        id: addInfo.id === '-1' ? null : addInfo.id,
         ancestor,
-        // level,
-        parentId,
-        type: 'dict'
+        level,
+        parentId
       }
       // console.log(123, obj)
       // if (1 + 1 === 2) {
@@ -138,8 +121,9 @@ function I2add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
         closeFu()
       }
     },
-    [acCardInfo, addFu, addInfo.acInfo.id, addInfo.id, addInfo.txt, closeFu, isNoAcIds, parentIdArr]
+    [acCardInfo, addFu, addInfo.id, addInfo.txt, closeFu, parentIdArr]
   )
+
   return (
     <Modal
       wrapClassName={styles.I2add}
@@ -160,7 +144,7 @@ function I2add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
           autoComplete='off'
         >
           <div className='fromRow'>
-            <div className='fromRowll'>上级字典：</div>
+            <div className='fromRowll'>上级名称：</div>
             <div className='fromRowrr'>
               <Cascader
                 style={{ width: 658 }}
@@ -168,8 +152,7 @@ function I2add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
                 changeOnSelect
                 fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                 options={treeData}
-                // placeholder={addInfo.txt === '编辑' ? '空' : '请选择'}
-                placeholder={acShuTxt}
+                placeholder={addInfo.txt === '编辑' ? '空' : '请选择'}
                 value={parentIdArr ? [...parentIdArr] : []}
                 onChange={cardChange}
               />
@@ -177,12 +160,16 @@ function I2add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
           </div>
 
           <Form.Item
-            label='字典值'
+            label='字典名称'
             name='name'
-            rules={[{ required: true, message: '请输入字典值!' }]}
+            rules={[{ required: true, message: '请输入字典名称' }]}
             getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
           >
-            <Input maxLength={30} showCount placeholder='请输入内容' />
+            <Input maxLength={20} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <Form.Item label='说明' name='intro'>
+            <TextArea maxLength={500} showCount placeholder='请输入内容' />
           </Form.Item>
 
           <div className='fromRow2'>
@@ -191,10 +178,10 @@ function I2add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
               name='sort'
               rules={[{ required: true, message: '请输入排序值!' }]}
             >
-              <InputNumber min={1} max={50000} precision={0} placeholder='请输入' />
+              <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
             </Form.Item>
             <div className='fromRowTit'>
-              请输入1~50000的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
+              请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
             </div>
           </div>
 

src/pages/Isystem/I2dict/data.ts

@@ -4,7 +4,7 @@ export type TypeI2dict = {
   sort: number
   name: string
   num: string
-  description: any
+  intro: any
   ancestor: string
   level: number
   children?: TypeI2dict[]
@@ -18,17 +18,6 @@ export type I2AddInfoType = {
   acInfo: TypeI2dict
 }
 
-// 把所有的字典，只保留前面2级，给下拉框筛选
-export const I2toTowFu = (data: TypeI2dict[]) => {
-  return data.map(item => ({
-    ...item,
-    children: item.children?.map(child => ({
-      ...child,
-      children: undefined // 移除第三层子级
-    }))
-  }))
-}
-
 // 通过id获取 树的obj
 export const treeResIdFu = (list: any, id: string) => {
   // 每次进来使用find遍历一次

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

@@ -1,5 +1,5 @@
 .I2dict {
-  background-color: #fff;
+  background-color: var(--boxBcaColor);
   border-radius: 10px;
   padding: 24px;
   :global {
@@ -17,13 +17,14 @@
       display: flex;
       justify-content: space-between;
       .I2m1ll {
-        width: 70%;
+        width: 60%;
         overflow-y: auto;
         .site-tree-search-value {
           color: red;
           font-weight: 700;
         }
         .ant-tree {
+          background-color: var(--boxBcaColor);
           min-height: 100%;
           padding: 10px;
         }
@@ -62,12 +63,17 @@
         }
       }
       .I2m1rr {
-        width: calc(30% - 24px);
+        width: calc(40% - 24px);
+        overflow-y: auto;
         padding: 20px;
         .I2mr1 {
           font-weight: 700;
           color: var(--themeColor);
           font-size: 24px;
+          & > span {
+            color: #999;
+            font-size: 14px;
+          }
         }
         .I2mr2 {
           margin: 20px 0 40px;

src/pages/Isystem/I2dict/index.tsx

@@ -2,11 +2,11 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { useDispatch, useSelector } from 'react-redux'
 import { RootState } from '@/store'
-import { Button, Cascader, Input, Tree, TreeDataNode } from 'antd'
+import { Button, Input, Tree, TreeDataNode } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import { MessageFu } from '@/utils/message'
 import { I2_APIdel, I2_APIgetDict } from '@/store/action/Isystem/I2dict'
-import { filterTreeByName, I2AddInfoType, I2toTowFu, treeResIdFu, TypeI2dict } from './data'
+import { filterTreeByName, I2AddInfoType, treeResIdFu, TypeI2dict } from './data'
 import I2add from './I2add'
 
 function I2dict() {
@@ -14,71 +14,41 @@ function I2dict() {
 
   const dispatch = useDispatch()
 
-  useEffect(() => {
-    dispatch(I2_APIgetDict())
+  const getInfoFu = useCallback(() => {
+    dispatch(
+      I2_APIgetDict(data => {
+        setLoding(true)
+        // if (data && data.length) setAcShu(data[0].id)
+      })
+    )
   }, [dispatch])
 
-  // 级联改变
-  // 待完善sg-初始id
-  const [topId, setTopId] = useState(['10000', '12000'])
-
-  // 传给新增、编辑子组件（没有数据或者删除了的时候-既右侧没有操作的时候）
-  const isNoAcIds = useRef<string[]>([])
-
   useEffect(() => {
-    isNoAcIds.current = ['0', ...topId]
-
-    if (topId && topId.length)
-      dispatch(
-        I2_APIgetDict(topId[1], data => {
-          setLoding(true)
-          if (data && data.length) {
-            setAcShu(data[0].id)
-            const txtDom: HTMLDivElement = document.querySelector('.ant-select-selection-item')!
-            if (txtDom) {
-              acShuTxtRef.current = txtDom.title
-            }
-          }
-        })
-      )
-  }, [dispatch, topId])
-
-  const onChange = useCallback((value: any) => {
-    // console.log('级联改变', value)
-    setTopId(value)
-  }, [])
+    getInfoFu()
+  }, [getInfoFu])
 
-  const { dictAll, dictList } = useSelector((state: RootState) => state.I2dict)
+  const { dictAll } = useSelector((state: RootState) => state.I2dict)
 
   // 点击重置
   const resetFu = useCallback(
     (flag: boolean) => {
       // 重置 flag为true
       // 新增和编辑 为false
-      if (flag) {
-        setTopId(['10000', '12000'])
-      } else dispatch(I2_APIgetDict(topId[1]))
+      getInfoFu()
 
       setValue('')
       setValue2('')
     },
-    [dispatch, topId]
+    [getInfoFu]
   )
 
   // 当前选中的树节点ID
-  const [acShu, setAcShu] = useState('0')
-  // 树节点文字信息
-  const acShuTxtRef = useRef('')
+  const [acShu, setAcShu] = useState('')
 
   // 点击树节点
   const onSelect = (id: any) => {
     // console.log('点击树节点', id)
-    if (id[0]) {
-      setAcShu(id[0])
-      // const txtDom: HTMLDivElement = document.querySelector('.ant-select-selection-item')!
-      // console.log('-------11', txtDom.title)
-      // if (txtDom) acShuTxtRef.current = txtDom.title
-    }
+    if (id[0]) setAcShu(id[0])
   }
 
   const [value, setValue] = useState('')
@@ -96,9 +66,9 @@ function I2dict() {
   // value变化的时候获取所有dom 设置隐藏
   const treeDataTemp = useMemo(() => {
     if (value2) {
-      return filterTreeByName(dictList, value2)
-    } else return dictList
-  }, [dictList, value2])
+      return filterTreeByName(dictAll, value2)
+    } else return dictAll
+  }, [dictAll, value2])
 
   // 搜索高亮
   const treeData = useMemo(() => {
@@ -140,7 +110,7 @@ function I2dict() {
   // 右侧信息
   const rightData = useMemo(() => {
     let obj = {} as TypeI2dict
-    if (treeDataTemp && treeDataTemp.length) obj = treeResIdFu(treeDataTemp, acShu)
+    if (treeDataTemp && treeDataTemp.length && acShu) obj = treeResIdFu(treeDataTemp, acShu)
 
     return obj || {}
   }, [acShu, treeDataTemp])
@@ -177,19 +147,6 @@ function I2dict() {
       {/* 顶部 */}
       <div className='I2top'>
         <div className='I2topll'>
-          {dictAll.length ? (
-            <Cascader
-              style={{ width: 240 }}
-              value={topId}
-              options={I2toTowFu(dictAll)}
-              fieldNames={{ label: 'name', value: 'id', children: 'children' }}
-              onChange={onChange}
-              allowClear={false}
-            />
-          ) : (
-            <div style={{ width: 240 }}></div>
-          )}
-          &emsp;
           <Input
             style={{ width: 240 }}
             placeholder='请输入字典值'
@@ -221,7 +178,7 @@ function I2dict() {
           {treeDataTemp && treeDataTemp.length ? (
             <Tree
               // 默认全部展开
-              defaultExpandAll={true}
+              // defaultExpandAll={true}
               // 数据
               treeData={treeData}
               // 自定义字段
@@ -242,13 +199,23 @@ function I2dict() {
         <div className='I2m1rr'>
           {rightData.id ? (
             <>
-              <div className='I2mr1'>操作</div>
+              <div className='I2mr1'>
+                操作 <span>{rightData.parentId === '0' ? '（一级字典不可编辑）' : ''}</span>
+              </div>
               <div className='I2mr2'>
-                <Button type='text' onClick={() => addSonFu(rightData.id)}>
+                <Button
+                  type='text'
+                  onClick={() => addSonFu(rightData.id)}
+                  disabled={rightData.parentId === '0'}
+                >
                   编辑
                 </Button>
                 &emsp;
-                <MyPopconfirm txtK='删除' onConfirm={() => delTree(rightData.id)} />
+                <MyPopconfirm
+                  txtK='删除'
+                  onConfirm={() => delTree(rightData.id)}
+                  disabled={rightData.parentId === '0'}
+                />
               </div>
 
               {/* <div className='I2mr3'>
@@ -263,13 +230,18 @@ function I2dict() {
 
               <div className='I2mr3'>
                 <div className='I2mr3ll'>层级：</div>
-                <div className='I2mr3rr'>{rightData.level - 2}</div>
+                <div className='I2mr3rr'>{rightData.level}</div>
               </div>
 
               <div className='I2mr3'>
                 <div className='I2mr3ll'>排序值：</div>
                 <div className='I2mr3rr'>{rightData.sort}</div>
               </div>
+
+              <div className='I2mr3'>
+                <div className='I2mr3ll'>说明：</div>
+                <div className='I2mr3rr'>{rightData.intro || '（空）'}</div>
+              </div>
             </>
           ) : null}
         </div>
@@ -277,11 +249,9 @@ function I2dict() {
       {/* 新增/编辑页面 中图法分类 */}
       {addInfo.id ? (
         <I2add
-          acShuTxt={acShuTxtRef.current}
           addInfo={addInfo}
           addFu={() => resetFu(false)}
           closeFu={() => setAddInfo({} as I2AddInfoType)}
-          isNoAcIds={isNoAcIds.current}
         />
       ) : null}
     </div>

src/store/action/Isystem/I2dict.ts

@@ -4,20 +4,12 @@ import http from '@/utils/http'
 /**
  * 获取对应表格列表(传id就是列表，从第三级开始)
  */
-export const I2_APIgetDict = (id?: string, backFu?: (data: TypeI2dict[]) => void): any => {
+export const I2_APIgetDict = (backFu?: (data: TypeI2dict[]) => void): any => {
   return async (dispatch: AppDispatch) => {
     let url = 'cms/dict/getTree'
-    if (id) url = url + `?parentId=${id}`
     const res = await http.get(url)
     if (res.code === 0) {
-      const caseStr = id ? 'I2/getList' : 'I2/getDictAll'
-      dispatch({ type: caseStr, payload: res.data })
-
-      // if (!id) {
-      //   // 把字典存在本地，防止下拉框空白问题
-      //   localStorage.setItem('YWGOODS_HT_DICT_ALL', JSON.stringify(res.data))
-      // }
-
+      dispatch({ type: 'I2/getDictAll', payload: res.data })
       backFu && backFu(res.data)
     }
   }
@@ -39,7 +31,7 @@ export const I2_APIgetInfo = (id: string) => {
  * 新增、编辑
  */
 export const I2_APIsave = (data: any) => {
-  return http.post('cms/dict/save', data)
+  return http.post('cms/dict/save', { ...data, type: 'dict' })
 }
 
 /**

src/store/reducer/Isystem/I2dict.ts

@@ -3,21 +3,14 @@ import { TypeI2dict } from '@/pages/Isystem/I2dict/data'
 // 初始化状态
 const initState = {
   // 所有字典数据
-  dictAll: [] as TypeI2dict[],
-  // 列表展示的数据
-  dictList: [] as TypeI2dict[]
+  dictAll: [] as TypeI2dict[]
 }
 
 // 定义 action 类型
-type Props =
-  | {
-      type: 'I2/getDictAll'
-      payload: TypeI2dict[]
-    }
-  | {
-      type: 'I2/getList'
-      payload: TypeI2dict[]
-    }
+type Props = {
+  type: 'I2/getDictAll'
+  payload: TypeI2dict[]
+}
 
 // reducer
 export default function userReducer(state = initState, action: Props) {
@@ -25,9 +18,6 @@ export default function userReducer(state = initState, action: Props) {
     // 获取字典数据
     case 'I2/getDictAll':
       return { ...state, dictAll: action.payload }
-    // 获取展示的数据
-    case 'I2/getList':
-      return { ...state, dictList: action.payload }
     default:
       return state
   }