From 477986c61a9c21239de6d70b6307bcfdf91c09b4 Mon Sep 17 00:00:00 2001 From: expressgy Date: Sun, 25 Jun 2023 19:01:37 +0800 Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 3 +- package.json | 3 +- src/main.jsx | 11 +- src/pages/Edit/index.jsx | 332 ++++++++++++++++++++++++++++++- src/pages/Edit/index.module.scss | 77 +++++-- src/request/api/edit.js | 47 +++++ src/request/index.js | 45 +++++ vite.config.js | 25 +++ 8 files changed, 516 insertions(+), 27 deletions(-) create mode 100644 src/request/api/edit.js create mode 100644 src/request/index.js diff --git a/package-lock.json b/package-lock.json index 4e250b9..82388c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "myamis", "version": "0.0.0", "dependencies": { + "@ant-design/icons": "^5.1.4", "@fortawesome/fontawesome-free": "^5.15.3", "amis": "3.1.1", "amis-core": "3.1.1", @@ -16,7 +17,7 @@ "amis-formula": "3.1.1", "amis-ui": "3.1.1", "antd": "^5.6.2", - "axios": "0.21.1", + "axios": "^0.21.1", "copy-to-clipboard": "^3.2.0", "mobx": "4.15.7", "mobx-react": "6.3.1", diff --git a/package.json b/package.json index 0fa55ba..336eeb3 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@ant-design/icons": "^5.1.4", "@fortawesome/fontawesome-free": "^5.15.3", "amis": "3.1.1", "amis-core": "3.1.1", @@ -18,7 +19,7 @@ "amis-formula": "3.1.1", "amis-ui": "3.1.1", "antd": "^5.6.2", - "axios": "0.21.1", + "axios": "^0.21.1", "copy-to-clipboard": "^3.2.0", "mobx": "4.15.7", "mobx-react": "6.3.1", diff --git a/src/main.jsx b/src/main.jsx index 9997426..d102b9d 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -23,12 +23,17 @@ import './scss/style.scss'; import {setDefaultTheme} from 'amis'; import 'antd/dist/reset.css'; import { BrowserRouter } from "react-router-dom"; +import zhCN from 'antd/locale/zh_CN'; +import {ConfigProvider} from 'antd' setDefaultTheme('cxd'); // react < 18 ReactDOM.render( - - - , document.getElementById('root')); + + + + + + , document.getElementById('root')); // node -v 18.16.0 diff --git a/src/pages/Edit/index.jsx b/src/pages/Edit/index.jsx index 47f3c4d..ca7f5e0 100644 --- a/src/pages/Edit/index.jsx +++ b/src/pages/Edit/index.jsx @@ -1,10 +1,252 @@ import {Editor} from 'amis-editor' -import { useEffect } from 'react'; -import css from './index.module.scss' +import { useEffect, useState } from 'react'; +import css from './index.module.scss'; +import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons' +import { Modal, Form, Input, Button, message, Menu, Popconfirm } from 'antd' +import api from '../../request/api/edit' + + export default function Edit(){ + // 刷新 + const [reflush, setReflush] = useState(true) + // 菜单列表，树 + const [menuTree, setMenuTree] = useState([]) + // 菜单列表 + const [menuList, setMenuList] = useState([]) + // 原始菜单 + const [atomMenuList, setAtomMenuList] = useState([]) + + const [nowMenuItemId, setNowMenuItemId] = useState('') useEffect(() => { - console.log('EDIT') - }) + api.getMenu().then( + resd => { + if(resd.data.code == 200){ + setMenuList(formateMenuToList([...resd.data.data])) + setAtomMenuList([...resd.data.data]) + }else{ + messageApi.open({ + type: 'error', + content: '获取菜单失败!', + }); + } + + } + ) + }, [reflush]) + useEffect(() => { + const list = formateMenuList(atomMenuList) + setMenuTree(list) + }, [atomMenuList]) + // 消息 + const [messageApi, contextHolder] = message.useMessage(); + // 菜单的打开状态 + const [openKeys, setOpenKeys] = useState([]); + // 父菜单 + const [ menuParentId, setMenuParentId] = useState(null) + + // 添加菜单弹窗状态 + const [isModalOpenForCreateMneu, setIsModalOpenForCreateMneu] = useState(false); + // 编辑菜单弹窗状态 + const [isModalOpenForEditMneu, setIsModalOpenForEditMneu] = useState(false); + // 添加菜单数据 + const [ createMenuForm ] = Form.useForm(); + const [ editMenuForm ] = Form.useForm(); + + + + // 打开添加菜单弹窗 + const showModalForCreateMneu = () => { + setIsModalOpenForCreateMneu(true); + }; + // 确认添加菜单弹窗 + const handleOkForCreateMneu = () => { + createMenuForm.submit() + }; + // 关闭添加菜单弹窗 + const handleCancelForCreateMneu = () => { + setIsModalOpenForCreateMneu(false); + setMenuParentId(null) + }; + + // 打开编辑菜单 + const editMenu = key => { + console.log(key) + console.log(menuList, menuTree) + const data = menuList.find(item => { + // console.log(item) + return item.id == key + }) + setNowMenuItemId(data.id) + editMenuForm.setFieldsValue({ + name : data.name, + value: data.value + }) + setIsModalOpenForEditMneu(true) + + } + // 确认编辑菜单弹窗 + const handleOkForEditMneu = () => { + editMenuForm.submit() + }; + // 关闭编辑菜单弹窗 + const handleCancelForEditMneu = () => { + setIsModalOpenForEditMneu(false); + }; + + + // 切换菜单 + const onOpenChange = (keys) => { + const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1); + setOpenKeys(latestOpenKey ? [latestOpenKey] : []); + // console.log(keys) + // if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) { + // setOpenKeys(keys); + // } else { + // + // } + }; + // 选中菜单 + function onSelectMenu(val){ + // console.log(val) + setNowMenuItemId(val.key) + }; + // 删除菜单 + function deleteMenuItem(id){ + api.deleteMenuItem(id).then( + resd => { + if(resd.data.code == 200){ + + messageApi.open({ + type: 'success', + content: '删除菜单成功!', + }); + }else{ + messageApi.open({ + type: 'error', + content: '删除菜单失败!', + }); + } + setReflush(!reflush) + } + ) + }; + + // 新建子菜单 + function createSonMenu(key){ + showModalForCreateMneu() + setMenuParentId(key) + }; + // 格式化菜单数据 + function formateMenuList(list){ + const newList = [] + for(let i in list){ + const item = list[i]; + const newItem = { + key: item.id.toString(), + label:
+
{item.name}
+
+ createSonMenu(item.id.toString())}> +
, + data: item + } + if(item.childrenList){ + newItem.children = formateMenuList(item.childrenList) + } + newList.push(newItem) + } + return newList + }; + function formateMenuToList(list){ + const newList = [] + list.map(item => { + const now = {...item} + if(item.childrenList){ + const sonList = formateMenuToList(item.childrenList) + newList.push(...sonList) + delete now.childrenList + } + newList.push(now) + }) + return newList + } + + // 完成添加菜单 + const onFinishForCreateMenu = (values ) => { + const { name, value} = values + api.createMenu({ + name, value, parentId: menuParentId ? menuParentId : 0 + }).then( + resd => { + console.log(resd.data) + if(resd.data.code == 200){ + console.log('添加成功') + messageApi.open({ + type: 'success', + content: '添加菜单成功!', + }); + handleCancelForCreateMneu(); + createMenuForm.resetFields(); + setReflush(!reflush) + }else{ + messageApi.open({ + type: 'error', + content: resd.data.msg, + }); + } + } + ) + }; + // 取消添加菜单 + const onFinishFailedForCreateMenu = (errorInfo ) => { + // console.log('Failed:', errorInfo); + }; + + // 完成编辑菜单 + const onFinishForEditMenu = (values ) => { + const { name, value} = values + const nowMenuItem = menuList.find(item => item.id == nowMenuItemId) + const parentId = nowMenuItem.parentId + const id = nowMenuItemId + api.editMenu({ + name, value, parentId, id + }).then( + resd => { + if(resd.data.code == 200){ + messageApi.open({ + type: 'success', + content: '编辑菜单成功!', + }); + setIsModalOpenForEditMneu(false); + editMenuForm.resetFields(); + setReflush(!reflush) + }else{ + messageApi.open({ + type: 'error', + content: resd.data.msg, + }); + } + } + ) + }; + // 取消编辑菜单 + const onFinishFailedForEditMenu = (errorInfo ) => { + // console.log('Failed:', errorInfo); + }; + const data = { value:{}, onChange: (value ) => { @@ -13,13 +255,91 @@ export default function Edit(){ } return (
-
+
+
+
添加主菜单
+
+
+ +
+
+ {contextHolder} + +
+
+ + + + + + +
+
+ + +
+
+ + + + + + +
+
+
) -} \ No newline at end of file +} + diff --git a/src/pages/Edit/index.module.scss b/src/pages/Edit/index.module.scss index a531a37..f940b79 100644 --- a/src/pages/Edit/index.module.scss +++ b/src/pages/Edit/index.module.scss @@ -1,19 +1,64 @@ -.main{ - position: relative; - height: 100%; - display: flex; - overflow: hidden; - & > div{ +.main { position: relative; - } - & > div.left{ height: 100%; - flex-shrink: 0; - width: 200px; - border-right: 1px solid #cdcdcd; - } - & > div.right{ - height: 100%; - flex:1; - } + display: flex; + overflow: hidden; + + & > div { + position: relative; + } + + & > div.left { + height: 100%; + flex-shrink: 0; + width: 220px; + border-right: 1px solid #cdcdcd; + display: flex; + flex-direction: column; + padding: 10px; + + & > header { + position: relative; + flex-shrink: 0; + height: 40px; + & > div{ + position: relative; + border-radius: 10px; + background: #2468f2; + padding: 0.5em 1em; + color: #fefefe; + text-align: center; + cursor: pointer; + &:hover{ + + } + } + } + & > div.menu{ + position: relative; + flex: 1; + overflow: auto; + } + } + + & > div.right { + height: 100%; + flex: 1; + } +} + +.menuItem{ + position: relative; + display: flex; + overflow: hidden; + & > div:first-child{ + flex:1; + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + & > div:last-child{ + flex-shrink: 0; + } } \ No newline at end of file diff --git a/src/request/api/edit.js b/src/request/api/edit.js new file mode 100644 index 0000000..dc9d517 --- /dev/null +++ b/src/request/api/edit.js @@ -0,0 +1,47 @@ +// 合同管理和合同审批相关 接口文件 +import request from '../index' + +const agreementApi = { + // 添加菜单 + createMenu: data => request({ + url: '/jiaSheng/homeMenu/add', + method: 'post', + data: data + }), + getMenu: () => request({ + url: '/jiaSheng/homeMenu/getList', + method: 'get' + }), + deleteMenuItem: id => request({ + url: `/jiaSheng/homeMenu/${id}`, + method: 'delete', + }), + // 编辑菜单 + editMenu: data => request({ + url: '/jiaSheng/homeMenu/update', + method: 'put', + data: data + }), + + // 获取 可发起 流程列表 + getApproveListPage: data => request({ + url: `/flowable/process/list`, + method: 'get', + params: data + }), + + //保存合同 /agreement/agreement/add + addAgreement: data => request({ + url: `/flowable/agreement/add`, + method: 'post', + data: data + }), + // 删除流程 + deleteProcessPage: data => request({ + url: `/flowable/task/delete`, + method: 'delete', + data: data + }), + +} +export default agreementApi \ No newline at end of file diff --git a/src/request/index.js b/src/request/index.js new file mode 100644 index 0000000..dd61209 --- /dev/null +++ b/src/request/index.js @@ -0,0 +1,45 @@ +import axios from "axios"; + +/* axios默认配置*/ +const instance = axios.create({ + timeout: 20000, + baseURL: "/api", // 服务器请求地址 +}); + +/* 请求方式 默认请求头的 Content-Type */ +instance.defaults.headers.post["Content-Type"] = + "application/json;charset=UTF-8"; +instance.defaults.headers.delete["Content-Type"] = + "application/json;charset=UTF-8"; +instance.defaults.headers.put["Content-Type"] = + "application/json;charset=UTF-8"; + + +/* 整理数据,序列化为 JSON*/ +instance.defaults.transformRequest = function (data) { + if (data && data.NOSERI) { + return data.data; + } else { + return JSON.stringify(data); + } +}; + +/* Request 拦截器*/ +instance.interceptors.request.use((config) => { + // 加载动画 + /* 添加token */ + if(config.url.split('/')[1] && config.url.split('/')[1] == 'source'){ + config.baseURL = '/api/resource' + } + if(config.url.split('/')[1] && config.url.split('/')[1] == 'work'){ + config.baseURL = '/api/works' + } + if (config.url=='/system/user/getInfo'){ + config.baseURL = '/api' + } + const token=window.localStorage.getItem('token')||window.sessionStorage.getItem('token') + config.headers["Authorization"] ="Bearer "+token; + + return config; +}); +export default instance; diff --git a/vite.config.js b/vite.config.js index 5a33944..11cba68 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,32 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' +import { + fileURLToPath, + URL +} from 'node:url' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', + import.meta.url)) + } + }, + server: { + host: "0.0.0.0", + proxy: { + '/api': { + // target: "http://10.10.10.107:9208",// 目标地址 + target: `http://10.10.10.168:8080`,// sar目标地址 + // target: `http://10.10.10.200/api/`,// 测试服务器址 + // target: "http://10.10.10.146:9309",// Rock目标地址 + // target: `http://togy.top:18080/api/`,// sar目标地址 + ws: true,// 开始ws代理 + changeOrigin: true, // 开发模式 + rewrite: (path) => path.replace(/^\/api/, "") + }, + } + }, })