字典管理

后台管理/src/pages/D1dict/D1add/index.module.scss

@@ -0,0 +1,23 @@
+.D1add {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+    }
+
+    .D1aMain {
+      padding-top: 15px;
+
+      .fromRowTit {
+        position: relative;
+        left: 13px;
+        top: -2px;
+        color: #999;
+        font-size: 12px;
+      }
+    }
+  }
+}

后台管理/src/pages/D1dict/D1add/index.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import { Button, Form, FormInstance, Input, InputNumber, Modal } from 'antd'
+import { D1listType } from '../data'
+import { D1_APIsave } from '@/store/action/D1dict'
+import { MessageFu } from '@/utils/message'
+import MyPopconfirm from '@/components/MyPopconfirm'
+
+type Props = {
+  info: D1listType
+  upTableFu: () => void
+  closeFu: () => void
+}
+
+function D1add({ info, upTableFu, closeFu }: Props) {
+  useEffect(() => {
+    FormBoxRef.current?.setFieldsValue({ ...info, sort: info.id === '-1' ? 999 : info.sort })
+  }, [info])
+
+  // 设置表单ref
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    // return MessageFu.warning("有表单不符号规则!");
+  }, [])
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      const res = await D1_APIsave({
+        ...values,
+        id: info.id === '-1' ? null : info.id,
+        type: 'dict',
+        parentId: info.parentId
+      })
+      if (res.code === 0) {
+        MessageFu.success(`${info.id === '-1' ? '新增' : '编辑'}成功`)
+        upTableFu()
+        closeFu()
+      }
+    },
+    [closeFu, info, upTableFu]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.D1add}
+      open={true}
+      title={info.id === '-1' ? '新增' : '编辑'}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='D1aMain'>
+        <Form
+          scrollToFirstError={true}
+          ref={FormBoxRef}
+          name='basic'
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+        >
+          <Form.Item
+            label='字典值'
+            name='name'
+            getValueFromEvent={e => e.target.value.trim()}
+            rules={[{ required: true, message: '请输入字典值' }]}
+          >
+            <Input maxLength={30} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <Form.Item
+            label='排序值'
+            name='sort'
+            initialValue={999}
+            rules={[{ required: true, message: '请输入排序值' }]}
+          >
+            <InputNumber min={1} max={999} placeholder='请输入' />
+          </Form.Item>
+          <div className='fromRowTit'>
+            请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
+          </div>
+
+          {/* 确定和取消按钮 */}
+          <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 MemoD1add = React.memo(D1add)
+
+export default MemoD1add

后台管理/src/pages/D1dict/data.ts

@@ -0,0 +1,15 @@
+export type D1listType = {
+  id: string
+  parentId: string
+  sort: number
+  name: string
+  intro?: any
+  ancestor?: any
+  level?: any
+}
+
+export type D1listTypeAll = {
+  id: string
+  name: string
+  children: D1listType[]
+}[]

后台管理/src/pages/D1dict/index.module.scss

@@ -1,4 +1,24 @@
 .D1dict {
+  overflow: auto;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
   :global {
+    .D1row {
+      margin-bottom: 20px;
+      .D1row1 {
+        & > h3 {
+          font-size: 16px;
+          color: var(--themeColor);
+        }
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+      }
+      .ant-table-cell {
+        padding: 8px !important;
+      }
+    }
   }
 }

后台管理/src/pages/D1dict/index.tsx

@@ -1,9 +1,93 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import { useDispatch, useSelector } from 'react-redux'
+import { D1_APIdel, D1_APIgetlist } from '@/store/action/D1dict'
+import { RootState } from '@/store'
+import { Button } from 'antd'
+import MyTable from '@/components/MyTable'
+import { D1listType } from './data'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { MessageFu } from '@/utils/message'
+import D1add from './D1add'
 function D1dict() {
+  const dispatch = useDispatch()
+
+  const getListFu = useCallback(
+    (id?: string) => {
+      dispatch(D1_APIgetlist(id))
+    },
+    [dispatch]
+  )
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu])
+
+  const tableList = useSelector((state: RootState) => state.D1dict.list)
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: string) => {
+      const res: any = await D1_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: D1listType) => (
+          <>
+            <Button size='small' type='text' onClick={() => setAddInfo(item)}>
+              编辑
+            </Button>
+            <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+          </>
+        )
+      }
+    ]
+  }, [delTableFu])
+
+  // 新增和编辑
+  const [addInfo, setAddInfo] = useState({} as D1listType)
+
   return (
     <div className={styles.D1dict}>
       <div className='pageTitle'>字典管理</div>
+
+      {tableList.map(item => (
+        <div key={item.id} className='D1row'>
+          <div className='D1row1'>
+            <h3>{item.name}</h3>
+            <Button
+              type='primary'
+              onClick={() => setAddInfo({ id: '-1', parentId: item.id } as D1listType)}
+            >
+              新增
+            </Button>
+          </div>
+
+          <MyTable
+            list={item.children}
+            columnsTemp={[
+              ['txt', '字典值', 'name'],
+              ['txt', '排序值', 'sort']
+            ]}
+            lastBtn={tableLastBtn}
+            pagingInfo={false}
+          />
+        </div>
+      ))}
+
+      {/* 新增和编辑 */}
+      {addInfo.id ? (
+        <D1add info={addInfo} upTableFu={getListFu} closeFu={() => setAddInfo({} as D1listType)} />
+      ) : null}
     </div>
   )
 }

后台管理/src/store/action/D1dict.ts

@@ -0,0 +1,30 @@
+import http from '@/utils/http'
+import { AppDispatch } from '..'
+/**
+ * 字典管理-获取列表
+ */
+export const D1_APIgetlist = (parentId?: string): any => {
+  return async (dispatch: AppDispatch) => {
+    let url = 'cms/dict/getTree'
+    if (parentId) url += `/parentId=${parentId}`
+
+    const res = await http.get(url)
+    if (res.code === 0) {
+      dispatch({ type: 'D1/getList', payload: res.data })
+    }
+  }
+}
+
+/**
+ * 删除字典
+ */
+export const D1_APIdel = (id: string) => {
+  return http.get(`cms/dict/remove/${id}`)
+}
+
+/**
+ * 新增/修改
+ */
+export const D1_APIsave = (data: any) => {
+  return http.post('cms/dict/save', data)
+}

后台管理/src/store/reducer/D1dict.ts

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

后台管理/src/store/reducer/index.ts

@@ -3,6 +3,7 @@ import { combineReducers } from 'redux'
 
 // 导入 登录 模块的 reducer
 import A0Layout from './layout'
+import D1dict from './D1dict'
 
 import Z1user from './Z1user'
 import Z2log from './Z2log'
@@ -10,7 +11,7 @@ import Z2log from './Z2log'
 // 合并 reducer
 const rootReducer = combineReducers({
   A0Layout,
-
+  D1dict,
   Z1user,
   Z2log
 })

后台管理/src/utils/http.ts

@@ -27,7 +27,7 @@ declare module 'axios' {
 // 创建 axios 实例
 const http = axios.create({
   baseURL: `${baseURL}${baseFlag ? '/api/' : ''}`,
-  timeout: 10000
+  timeout: 30000
 })
 
 let axajInd = 0
@@ -59,7 +59,7 @@ http.interceptors.response.use(
     if (axajInd === 0) {
       domShowFu('#AsyncSpinLoding', false)
     }
-    if (response.data.code === 5001 || response.data.code === 5002) {
+    if (response.data.code === 401) {
       removeTokenInfo()
       history.push('/login')
       clearTimeout(timeId)
@@ -90,7 +90,7 @@ http.interceptors.response.use(
         ) {
           MessageFu.error(err.response.data.msg)
           // 没有权限
-          if (err.response.data.code === 5003) {
+          if (err.response.data.code === 401) {
             removeTokenInfo()
             history.push('/login')
           }

后台管理/src/utils/storage.ts

@@ -1,7 +1,7 @@
 // ------------------------------------token的本地存储------------------------------------
 
 // 用户 Token 的本地缓存键名，自己定义
-const TOKEN_KEY = 'YunNan_BiJiangGuQiang_HOUTAI_USETINFO'
+const TOKEN_KEY = 'JILINGGOODS_HOUTAI_USETINFO'
 
 /**
  * 从本地缓存中获取 用户 信息

后台管理/src/utils/tableData.ts

@@ -14,28 +14,6 @@
 //     ["text", "创建日期",'description', 50,A],
 //   ];
 
-export const A1tableC = [
-  ['txt', '古桥名称', 'name'],
-  ['img', '封面图1', 'thumb'],
-  ['img2', '封面图2', 'thumb2'],
-  ['txt', '建造年代', 'age'],
-  ['txt', '结构形式', 'type'],
-  ['txt', '所属乡镇', 'villageName'],
-  ['txt', '所属村委会', 'village'],
-  ['text', '场景链接', 'sceneLink', 30, 'A'],
-  ['text', '模型链接', 'moduleLink', 30, 'A'],
-  ['txt', '编辑时间', 'updateTime'],
-  ['txt', '编辑人', 'creatorName']
-  // ['cityAll', '所属乡镇', 'province', 'city', 'region', 'address'],
-
-  //
-]
-
-export const A3tableC = [
-  ['txt', '字典值', 'name'],
-  ['txt', '排序值', 'sort']
-]
-
 export const Z1tableC = [
   ['txt', '用户名', 'userName'],
   ['txtChange', '角色', 'isAdmin', { 1: '管理员', 0: '普通成员' }],