diff --git a/README.zh-CN.md b/README.zh-CN.md index 4fc5ebc..ba85d1b 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,168 +1,346 @@ -

- -

- -

- - vue - - - element-ui - - - Build Status - - - license - - - GitHub release - -

- -简体中文 | [English](./README.md) - -## 简介 - -`vue-element-admin` 是一个后台集成解决方案,它基于 [Vue.js](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈,内置了i18国际化解决方案,动态路由,权限验证等很多功能特性,相信不管你的需求是什么,本项目都能帮助到你。 - -- [在线访问](http://panjiachen.github.io/vue-element-admin) - -- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/) - -- [Gitter讨论组](https://gitter.im/vue-element-admin/discuss) - -- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) - -- [Donate](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/donate) - -**本项目的定位是后台集成方案,不适合当基础模板来开发。** - - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)   - - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) - -**注意:该项目使用 element-ui@2.3.0+ 版本,所以最低兼容 vue@2.5.0+** - -## 前序准备 - -你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element),所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。 - -同时配套一个系列的教程文章,如何从零构建后一个完整的后台项目,建议大家先看完这些文章再来实践本项目 - - [手摸手,带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) - - [手摸手,带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) - - [手摸手,带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) - - [手摸手,带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) - - [手摸手,带你封装一个 vue component](https://segmentfault.com/a/1190000009090836) - - [手摸手,带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09) - - - 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西 - - **如有问题请先看上述使用文档和文章,若不能满足,欢迎 issue 和 pr** - - **本项目并不是一个脚手架,更倾向于是一个集成解决方案** - - **该项目不支持低版本浏览器(如ie),有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** - -

- -

- -## 功能 -``` -- 登录/注销 -- 权限验证 -- 多环境发布 -- 动态侧边栏(支持多级路由) -- 动态面包屑 -- 国际化多语言 -- 多种动态换肤 -- 快捷导航(标签页) -- 富文本编辑器 -- Markdown编辑器 -- JSON编辑器 -- Screenfull全屏 -- 列表拖拽 -- Svg Sprite 图标 -- Dashboard -- 本地mock数据 -- Echarts 图表 -- Clipboard(剪贴复制) -- 401/404错误页面 -- 错误日志 -- 导出excel -- 导出zip -- 前端可视化excel -- 树形table -- Table example -- 动态table example -- 拖拽table example -- 内联编辑table example -- Form example -- 二步登录 -- SplitPane -- 拖拽 Dialog -- Dropzone -- Sticky -- CountTo -- Markdown2html -``` - -## 开发 -```bash -# 克隆项目 -git clone https://github.com/PanJiaChen/vue-element-admin.git +logo + +多功能、高效率、低代码的前后端一体化、智能化的开发工具 + +gitee star github star + +👉 https://maimengcloud.com/#/openCommunity 👈 + +📢 简介 +mdp-sys-ui-web旨在为企业开发管理类的业务系统提供一个模板工程,该模板工程具有高效率、低代码、功能丰富等特点。企业可以在该工程之上,加入更多其它业务功能;也可以以该工程作为模板,创建新的工程,用于开发其它业务。使用该工程构建应用,您不用考虑多租户、登录、统一认证中心、权限、菜单管理、系统管理、公共组件、公共api、代码冗余、数据字典、图片库、文件库、智能表单、工作流、微服务互相调用、全局跟踪定位bug、多主键crud,复杂sql查询等各种问题,这些都内置其中了,轻松搞定。 +如果非要给你一个使用mdp的理由:那就是代码大量减少、开发so easy mdp-sys-ui-web作为独立前端项目,企业可以单独使用该工程,另外单独开发后端系统;也可以直接使用唛盟团队 配套开源的后端系统[mdp-sys-backend](https://gitee.com/qingqinkj/mdp-sys-backend)作为后端服务。 + +唛盟mdp更多内容,请点击👉mdp-core 👈 + +💪 内置功能 +角色权限 +├── 角色管理 => 角色crud、分配菜单、分配权限 +├── 权限定义 => 权限crud +├── 菜单管理 => 菜单(按钮)crud、分配菜单(按钮)给角色、 +├── 模块管理 => 模块crud +├── 已开模块 => 查看企业(个人)已开通的模块 -# 安装依赖 -npm install -    -# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 -npm install --registry=https://registry.npm.taobao.org +组织管理 +├── 机构管理 => 企业信息维护、管理员维护、账户信息维护、企业产品维护、 +├── 用户管理 => 用户的crud、分配岗位、分配部门、重置密码、邀请 +├── 部门管理 => 部门curd、分配岗位到部门、查看部门用户 +├── 公司管理 => 公司curd(超级管理员使用) +├── 岗位管理 => 岗位curd、分配角色到岗位、岗位人员查看 +├── 注销审核 => 审核用户的注销申请 +平台管理 +├── 平台配置 => 配置平台的信息 +├── 个人认证审核 => 审核个人的实名认证请求 +├── 企业认证审核 => 审核企业的实名认证请求 +元数据管理 +├── 字典管理 => 数据字典的crud +├── 列表维护 => 下拉列表数据项的crud +├── 参数定义 => 公共系统参数的crud +审批中心 +├── 待执行 => 我的待执行任务查询、任务执行 +├── 日历任务 => 我的待执行任务查询、任务执行 +├── 发起流程 => 发起流程 +审批监控 +├── 我发起的流程 => 查询我发起的流程 +├── 我监控的流程 => 查询我监控的流程、催办 +├── 我参与的流程 => 查询我参与过的流程 +流程模型 +├── 流程编辑器 => 在线流程编辑器 +├── 模型发布 => 流程模型发布 +├── 模型设置 => 设置流程与智能表单的关联、模型的启动条件、审批人、权限等 +智能表单(低代码) +├── 表单中心 => 智能表单的门户 +├── 表单设计 => 进行智能表单设计、权限设置等 +├── 数据录入、查询 => 查询表单已录入的数据 +组件库mdp-ui +mdp封装了几十个ui组件,使用mdp-ui与不使用mdp-ui的区别:写100行代码还是写1行代码的区别,代码量的减少立竿见影 -# 启动服务 -npm run dev -``` -浏览器访问 http://localhost:9527 +mdp-ui +mdp的核心组件,该组件库为纯前端页面组件,无须配置任何后端api接口即可正确运行 +mdp-ui-ext +基于mdp-ui扩展的带有对接后台api业务加载能力的业务组件 +⚠️注意:mdp-ui组件效果预览 -## 发布 -```bash -# 构建测试环境 -npm run build:sit +⚙快速开始 +找到main.js 添加下面代码 + +//mdp-ui 基础组件 +import MdpComponents from '@/components/mdp-ui/index.js' +Vue.use(MdpComponents) + +//mdp-ui-ext拓展的组件 +import MdpUiExtComponents from '@/components/mdp-ui-ext/index.js' +Vue.use(MdpUiExtComponents) + +// 公共api +import mdp from "@/api/mdp_pub"; +Vue.prototype.$mdp = mdp; + +mdp-dialog +弹框,可以把任意页面装配成弹框,无须定义多余的变量及函数 + +相对于el-dialog来说,要使用弹窗,事情还真不少。需要定义visible变量,定义showDialog,closeDialog两个函数,最关键一点是如果要父页面传递参数到窗口内组件,还得在父页面定义一个变量,通过props属性传递。相当麻烦。如果某个功能弹窗特别多,会有一堆的控制弹窗的变量及函数,非常恶心。mdp-dialog则完全解决上述问题。 +mdp-table +表格,内置了增、删、改、查、高级查询、重置查询、导出、列配置、分页、批量编辑等功能、内置了对按钮权限的控制机制 +功能非常强大,懂的都懂。 + +综合管理 + +可编辑表格 + +可编辑-树状表格 + +mdp-select +下拉列表,支持对数据字典、元数据的引用,支持对任意小表表格数据的引用,支持参数化加载后台数据,对后台加载的数据进行缓存 +mdpselect + +mdp-select-table +超大表格下拉列表,与mdp-select相比,该组件具有分页查询功能 + + +mdp-select-user +用户选择下拉列表,与mdp-select-table组件类似,仅仅针对用户的头像做了特殊处理 + + +mdp-input +输入框 + +mdp-date +日期 + +mdp-date-range +区间日期 + +mdp-number +数字输入 + +mdp-hi-query +高级查询,可以由用户自定义任意复杂的查询条件 -# 构建生成环境 -npm run build:prod -``` -## 其它 -```bash -# --report to build with bundle size analytics -npm run build:prod --report +mdp-table-configs +表格配置,用于控制表格的列显示与否 -# --preview to start a server in local to preview -npm run build:prod --preview -# lint code -npm run lint +mdp-transfer +穿梭框 -# auto fix -npm run lint -- --fix -``` +mdp-cate-tree +文档、文章目录树 -更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/deploy) +mdp-expand +智能表单相关组件 -## Changelog -Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). +mdp-ext-infos +自动扩展字段信息 -## Online Demo -[在线 Demo](http://panjiachen.github.io/vue-element-admin) +mdp-image +图片库,图片的增删改查、上传、下载 -## Donate -如果你觉得这个项目帮助到了你,你可以帮作者买一杯果汁表示鼓励 :tropical_drink: -![donate](https://panjiachen.github.io/donate/donation.png) +mdp-select-image +图片选择器,支持图片的上传下载、上传后的统一管理、共享 -[Paypal Me](https://www.paypal.me/panfree23) +mdp-select-dept +部门选择,支持树状机构,异步加载,支持分页查询,任意大数据量 -## License +mdp-select-att +附件库,支持附件的上传下载、上传后的统一管理、共享 -[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) +mdp-select-cate +文档、文章目录树选择器 -Copyright (c) 2017-present PanJiaChen +mdp-select-tag +标签库,支持标签的统一管理、共享 + +mdp-meta-item +元数据管理库、支持元数据的crud + +mdp-meta-option +元数据管理库-列表数据组件、支持列表数据的crud + +mdp-rich-text +富文本编辑器,整合了mdp-select-image作为插件 + +🔃 api +api +业务api,哪里用到哪里就单独引入 +api/mdp_pub/index.js +公共api总入口,注册到vue全局函数中,可以在页面中任意地方直接使用,公共api总入口,如需要添加公共api,请在此文件添加 + +mdp_api_base.js +为mdp框架核心的与后端交互的api,自动注册为全局公共函数,可通过$mdp.xxx调用,可改,但不要新增,删除任何一个api. + +mdp_api_ext.js +为mdp扩展的组件与后端交互的api,自动注册为全局公共函数,可通过$mdp.xxx调用,可改,但不要新增,删除任何一个api. + +mdp_api_biz.js +为mdp扩展的组件与后端交互的api,自动注册为全局公共函数,可通过$mdp.xxx调用,可改,可新增必要的api. + + +this.$mdp.xxxApi() +login +登录相关api +↕️ 指令 +v-adaptive 让表格自动适应,表格底部始终保持距离视窗底部一定距离(默认 30px) + +⌨ 技术栈 +vue全家桶 + element-ui + axios + +💻 样例项目 +[系统管理] (https://maimengcloud.com/sys/m1/) +[协同办公] (https://maimengcloud.com/oa/m1/) +[项目管理] (https://maimengcloud.com/xm/m1/) +[流程管理] (https://maimengcloud.com/workflow/m1/) +⚙ 快速开始 +⚠️注意:该项目使用 element-ui@2.3.0+ 版本,所以最低兼容 vue@2.5.0+ + +前序准备 +你的本地环境需要安装 node 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element),提前了解和学习这些知识会对使用本项目有很大的帮助。 + +该项目属于网页版前端项目,所有api由 [mdp-sys-backend](https://gitee.com/qingqinkj/mdp-sys-backend)提供,请下载该项目 + +代码生成器下载 mdp-code-generator + +开发 +# 克隆项目 +git clone https://gitee.com/qingqinkj/mdp-sys-ui-web.git + +# 安装依赖 +npm install + +# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# 启动服务 +npm run dev +浏览器访问 http://localhost:8015 + +登录相关 +登录api,对接后台接口有两种方式,分别为对接统一认证中心、对接mdp-sys-backend 默认对接mdp-sys-backend中的登录模块,如果想切换,更改mdp_config.js中的getOauth2LoginContext函数即可 + +对接统一认证中心进行登录 +getOauth2LoginContext:function(){ +return "oauth2client" +} +对接mdp-sys-backend进行登录 +getOauth2LoginContext:function(){ +return "sys" +} +发布 +# 构建测试环境 +npm run build:sit + +# 构建生成环境 +npm run build:prod +🔔️ 特别提醒 +mdp 3.0 版本已经开始规划更新了,尽请期待新版本的诞生吧 + +🗒️ 版本更新日志 +升级前必看:CHANGELOG.md + +🚀 基于mdp框架拓展的开源项目 +⚠️ 注意:以下拓展的框架或者子系统,由mdp开源团队基于项目经验进行总结抽取,可用可不用,可以以jar包方式合并到现有工程进行发布,也可单独发布成单体应用、微服务应用 + +第三方支付框架,整合了微信支付、支付宝支付、paypal支付 + +mdp-tpa-pay-backend 后端 +即时通讯框架 + +mdp-im-uniapp 前端app +mdp-im-web 前端浏览器 +mdp-im-backend 后端 +统一认证中心框架 + +mdp-sys-ui-web 前端 +mdp-oauth2-backend 后端 +mdp-sys-backend 后端 +微服务框架 + +mdp-cloud-backend 后端 +工作流管理子系统 + +mdp-workflow-ui-web 前端 +mdp-workflow-backend 后端 +智能表单子系统 + +mdp-form-ui-web 前端 +mdp-form-backend 后端 +内容管理子系统 + +mdp-arc-ui-web 前端 +mdp-arc-backend 后端 +短信子系统 + +mdp-sms-ui-web 前端 +mdp-sms-backend 后端 +项目管理子系统 + +xm-crowd-ui-web 前端众包 +xm-ui-web 前端管理端 +xm-backend 后端 +财务管理子系统 + +ac-core-ui-web 前端管理端 +ac-backend 后端 +📝 常见问题、操作说明 +前端基础组件 +前端扩展组件 +前端公共api +后端公共api +文档主页 +FQA +💯 实践案例 +系统管理 +协同办公 +唛盟众包-网页 +项目管理-网页 +项目管理-小程序 +drawing +流程管理 +🔨贡献指南 +贡献须知 +mdp 作为开源项目,离不开社区的支持,欢迎任何人修改和提出建议。贡献无论大小,你的贡献会帮助背后成千上万的使用者以及开发者,你做出的贡献也会永远的保留在项目的贡献者名单中,这也是开源项目的意义所在! + +为了保证项目代码的质量与规范,以及帮助你更快的了解项目的结构,请在贡献之前阅读: + +mdp 贡献说明 +贡献步骤 +Fork 本仓库。 + +Fork 后会在你的帐号下多了一个和本仓库一模一样的仓库,把你帐号的仓库 clone 到本地。 + +注意替换掉链接中的分支名和用户名。 + +如果是贡献代码,分支名填 dev;如果是贡献文档,分支名填 docs + +git clone -b 分支名 https://gitee.com/用户名/mdp-sys-ui-web.git +修改代码/文档,修改后提交上来。 + +# 把修改的文件添加到暂存区 +git add . +# 提交到本地仓库,说明你具体做了什么修改 +git commit -m '填写你做了什么修改' +# 推送到远程仓库,分支名替换成 dev 或者 docs +git push origin 分支名 +登录你的仓库,然后会看到一条 PR 请求,点击请求合并,等待管理员把你的代码合并进来。 + +项目分支说明 +分支 说明 +master 主分支,受保护分支,此分支不接受 PR。在 dev 分支后经过测试没问题后会合并到此分支。 +dev 开发分支,接受 PR,PR 请提交到 dev 分支。 +🐞 交流讨论 、反馈 BUG、提出建议等 +快扫描下方左侧微信二维码和我们一起交流讨论吧!(备注 唛盟-mdp 进群) drawing + +唛盟微信公众号查看一些基础教程 +drawing + +反馈 BUG、提出建议,欢迎新建:[issues](https://gitee.com/qingqinkj/mdp-sys-ui-web/issues),开发人员会不定时查看回复。 + +参与贡献,请查看贡献指南。 + +💲 打赏 +感谢所有赞赏以及参与贡献的小伙伴,你们的支持是我们不断更新前进的动力!微信扫一扫,赏杯咖啡呗! +drawing + +🔔 精品项目推荐 +项目名称 项目地址 项目介绍 +SpringBoot_v2 https://gitee.com/bdj/SpringBoot_v2 - 基于springboot的一款纯净脚手架 \ No newline at end of file