修复了admin后台bug
This commit is contained in:
张乐
@@ -74,209 +74,184 @@ utils 自定义工具js 独立命名，一般不用新建文件夹
|
||||
│ ├── api # 所有请求
|
||||
│ │ └──user.js # 有关登录/用户的接口
|
||||
│ │ └──article.js # 有关内容的接口
|
||||
│ │ └──categoryApi.js # 有关分类的接口
|
||||
│ │ └──configApi.js # 有关配置分类的接口
|
||||
|
||||
|
||||
|
||||
│ │ └──cms.js # 有关内容（文章管理、分类）的接口
|
||||
│ │ └──common.js # 表格删除、获取消息提醒的接口
|
||||
│ │ └──finance.js # 有关财务的接口
|
||||
│ │ └──index.js # 有关首页的接口
|
||||
│ │ └──marketing.js # 有关营销的接口
|
||||
│ │ └──order.js # 有关订单的接口
|
||||
│ │ └──product.js # 有关商品的接口
|
||||
│ │ └──setting.js # 有关设置的接口
|
||||
│ │ └──system.js # 有关维护（开发配置、安全维护）的接口
|
||||
│ │ └──systemAdmin.js # 有关管理员的接口（设置--管理权限--管理员列表）
|
||||
│ │ └──systemMenus.js # 有关权限规则的接口（设置--管理权限--权限规则）
|
||||
│ │ └──uploadPictures.js # 有关上传图片附件的接口
|
||||
│ │ └──user.js # 有关会员的接口
|
||||
│ │ └──categoryApi.js # 有关配置的接口
|
||||
│ │ └──configTabApi.js # 有关配置分类的接口
|
||||
│ │ └──dashboard.js # 有关统计的接口
|
||||
│ │ └──distribution.js # 有关分销的接口
|
||||
│ │ └──logistics.js # 有关城市数据、物流配置的接口
|
||||
│ │ └──marketing.js # 有关优惠券的接口
|
||||
│ │ └──order.js # 有关订单的接口
|
||||
│ │ └──role.js # 有关权限的接口
|
||||
│ │ └──roleApi.js # 有关菜单的接口
|
||||
│ │ └──sms.js # 有关短信的接口
|
||||
│ │ └──store.js # 有关商品的接口
|
||||
│ │ └──storePoint.js # 有关提货点的接口
|
||||
│ │ └──productCreateApi.js # 有关附件上传的接口
|
||||
│ │ └──systemadmin.js # 有关管理员的接口
|
||||
│ │ └──systemConfig.js # 有关系统配置的接口
|
||||
│ │ └──systemFormConfig.js # 有关表单配置的接口
|
||||
│ │ └──systemGroup.js # 有关组合数据的接口
|
||||
│ │ └──systemSetting.js # 有关上传文件的接口
|
||||
│ │ └──user.js # 有关用户的接口
|
||||
│ │ └──wxApi.js # 有关微信的接口
|
||||
│ ├── assets # 图片、svg 等静态资源
|
||||
│ ├── components # 公共组件
|
||||
│ │ └──cards # 统计
|
||||
│ │ └──copyright # 页面footer的底部声明
|
||||
│ │ └──customerInfo # 选择用户
|
||||
│ ├── components # 公共组件
|
||||
│ │ └──articleList # 文章列表
|
||||
│ │ └──attrFrom # 商品规格
|
||||
│ │ └──Breadcrumb # 头部标题标签
|
||||
│ │ └──cards # 统计小方块
|
||||
│ │ └──echarts # 统计图
|
||||
│ │ └──freightTemplate # 运费模板
|
||||
│ │ └──from # 生成表单
|
||||
│ │ └──Category # 分类
|
||||
│ │ └──customerInfo # 用户列表
|
||||
│ │ └──FormGenerator # 表单配置
|
||||
│ │ └──couponList # 优惠劵列表
|
||||
│ │ └──goodsList # 商品列表
|
||||
│ │ └──Hamburger # 导航收缩组件
|
||||
│ │ └──HeaderSearch # 导航搜索组件
|
||||
│ │ └──iconFrom # 导航添加图标
|
||||
│ │ └──link # a连接
|
||||
│ │ └──mde # 多文本框
|
||||
│ │ └──modelSure # 确认模态框
|
||||
│ │ └──newsCategory # 图文管理页
|
||||
│ │ └──publicSearchFrom # 头部搜索（没用到）
|
||||
│ │ └──quill # 编辑器（没用到）
|
||||
│ │ └──referrerInfo # 推荐人信息
|
||||
│ │ └──searchFrom # 订单页的搜索
|
||||
│ │ └──sendCoupons # 发送优惠券
|
||||
│ │ └──systemStore # 添加提货点
|
||||
│ │ └──ueditorFrom # 编辑器组件（供参考，没用到，主要用安装组件--vue-ueditor-wrap）
|
||||
│ │ └──uploadPictures # 上传图片
|
||||
│ │ └──uploadVideo # 上传视频（用于商品编辑器里面）
|
||||
│ ├── i18n # 多语言
|
||||
│ ├── layouts # 布局
|
||||
│ │ └──header-breadcrumb # 头部面包屑样式
|
||||
│ │ └──header-collapse # 头部控制折叠面板的图标
|
||||
│ │ └──header-fullscreen # 头部控制是否全屏的图标
|
||||
│ │ └──header-i18n # 头部控制多语言
|
||||
│ │ └──header-log # 头部控制日志异常图标
|
||||
│ │ └──header-logo # 头部logo
|
||||
│ │ └──header-notice # 头部提示消息
|
||||
│ │ └──header-reload # 头部控制刷新的图标
|
||||
│ │ └──header-search # 头部搜索
|
||||
│ │ └──header-setting # 设置页面风格
|
||||
│ │ └──header-user # 我的（个人中心、退出登录）
|
||||
│ │ └──menu-head #
|
||||
│ │ └──menu-side # 侧边导航栏
|
||||
│ │ └──tabs # 头部的横向导航标签
|
||||
│ │ └──mixins # 用于横向滚动获取title的一个js
|
||||
│ ├── libs # 公共方法
|
||||
│ ├── menu # 菜单配置
|
||||
│ ├── mixins # 通用混合
|
||||
│ ├── mock # 数据模拟
|
||||
│ ├── pages # 所有页面
|
||||
│ │ └──account # 有关登录页
|
||||
│ │ └──login # 登录
|
||||
│ │ └──register # 注册
|
||||
│ │ └──agent # 分销
|
||||
│ │ └──agentManage # 分销员管理
|
||||
│ │ └──app # 应用
|
||||
│ │ └──routine # 小程序模板消息
|
||||
│ │ └──wechat # 公众号
|
||||
│ │ └──menus # 微信菜单
|
||||
│ │ └──newsCategory # 图文管理
|
||||
│ │ └──save # 图文添加
|
||||
│ │ └──reply # 自动回复
|
||||
│ │ └──follow # 微信关注回复/无效关键词回复
|
||||
│ │ └──keyword # 关键字回复
|
||||
│ │ └──user # 用户
|
||||
│ │ └──tag # 用户标签
|
||||
│ │ └──user # 微信用户
|
||||
│ │ └──message # 用户行为记录
|
||||
│ │ └──cms # 内容
|
||||
│ │ └──addArticle # 添加文章/编辑文章
|
||||
│ │ └──article # 文章管理
|
||||
│ │ └──articleCategory # 文章分类
|
||||
│ │ └──finance # 财务
|
||||
│ │ └──commission # 佣金记录
|
||||
│ │ └──financialRecords # 财务记录
|
||||
│ │ └──bill # 资金记录
|
||||
│ │ └──recharge # 充值记录
|
||||
│ │ └──userExtract # 提现申请
|
||||
│ │ └──index # 主页
|
||||
│ │ └──marketing # 营销
|
||||
│ │ └──storeBargain # 砍价商品
|
||||
│ │ └──storeCombination # 拼团管理
|
||||
│ │ └──combinaList # 拼团列表
|
||||
│ │ └──create # 添加拼团商品
|
||||
│ │ └──index # 拼团商品
|
||||
│ │ └──storeCoupon # 优惠券制作
|
||||
│ │ └──storeCouponIssue # 优惠券列表
|
||||
│ │ └──storeCouponUser # 会员领取记录
|
||||
│ │ └──storeSeckill # 秒杀管理
|
||||
│ │ └──index # 秒杀商品
|
||||
│ │ └──create # 添加秒杀商品
|
||||
│ │ └──userPoint # 积分日志
|
||||
│ │ └──notify # 短信设置
|
||||
│ │ └──smsConfig # 短信账户
|
||||
│ │ └──smsPay # 短信购买
|
||||
│ │ └──smsTemplateApply # 短信模板
|
||||
│ │ └──RightPanel # 右侧设置按钮，设置导航相关
|
||||
│ │ └──Screenfull # 全屏
|
||||
│ │ └──SvgIcon # svg图标
|
||||
│ │ └──Tinymce # 颜色选择
|
||||
│ │ └──ThemePicker # 右侧设置按钮，设置组题颜色
|
||||
│ │ └──templatesFrom # 运费模板
|
||||
│ │ └──ueditorFrom # 富文本编辑器
|
||||
│ │ └──uploadPicture # 上传图片组件
|
||||
│ │ └──Upload # 上传文件组件
|
||||
│ │ └──UploadExcel # 下载Excel
|
||||
│ │ └──userList # 用户列表
|
||||
│ ├── layouts # 导航布局
|
||||
│ │ ├──index # 主页面
|
||||
│ │ ├──components # 导航组件
|
||||
│ │ └──Settings # 右边小按钮，设置导航等
|
||||
│ │ └──Sidebar # 侧边导航
|
||||
│ │ └──TagsView # tab标签页导航
|
||||
│ │ └──Navbar # 头部导航
|
||||
│ │ └──AppMain # 导航路由
|
||||
│ │ └──index.js # 组件引用
|
||||
│ │ └──mixins # 自适应大小
|
||||
│ ├── libs # 公共js方法
|
||||
│ │ └──settingMer # 配置请求地址
|
||||
│ ├── views # 所有页面
|
||||
│ │ └──login # 登录
|
||||
│ │ └──index # 登录
|
||||
│ │ └──dashboard # 首页
|
||||
│ │ └──store # 商品
|
||||
│ │ └──creatStore # 添加商品
|
||||
│ │ └──storeAttr # 商品规格
|
||||
│ │ └──sort # 商品分类
|
||||
│ │ └──taoBao # 复制商品
|
||||
│ │ └──storeComment # 商品评论
|
||||
│ │ └──order # 订单管理
|
||||
│ │ └──product # 商品
|
||||
│ │ └──productAdd # 添加商品
|
||||
│ │ └──productAttr # 商品规格
|
||||
│ │ └──productClassify # 商品分类
|
||||
│ │ └──productList # 商品管理
|
||||
│ │ └──productReply # 商品评论管理
|
||||
│ │ └──setting # 设置
|
||||
│ │ └──cityDada # 城市数据
|
||||
│ │ └──clerkList # 核销员管理
|
||||
│ │ └──freight # 物流公司
|
||||
│ │ └──setSystem # 系统设置
|
||||
│ │ └──shippingTemplates # 运费模板
|
||||
│ │ └──storeList # 提货点列表
|
||||
│ │ └──storeService # 客服管理
|
||||
│ │ └──systemAdmin # 管理员列表
|
||||
│ │ └──systemMenus # 权限规则
|
||||
│ │ └──systemRole # 身份管理
|
||||
│ │ └──systemStore # 门店设置
|
||||
│ │ └──user # 个人中心
|
||||
│ │ └──verifyOrder # 核销订单
|
||||
│ │ └──system # 维护
|
||||
│ │ └──auth # 商业授权
|
||||
│ │ └──clear # 刷新缓存
|
||||
│ │ └──configTab # 配置
|
||||
│ │ └──index # 配置分类
|
||||
│ │ └──list # 配置列表
|
||||
│ │ └──error # 错误页
|
||||
│ │ └──403 # 403
|
||||
│ │ └──404 # 404
|
||||
│ │ └──500 # 500
|
||||
│ │ └──group # 组合数据
|
||||
│ │ └──maintain
|
||||
│ │ └──systemCleardata # 清除数据
|
||||
│ │ └──systemDatabackup # 数据备份
|
||||
│ │ └──systemFile # 文件校验
|
||||
│ │ └──opendir # 文件管理
|
||||
│ │ └──systemLog # 系统日志
|
||||
│ │ └──user # 会员
|
||||
│ │ └──group # 会员分组
|
||||
│ │ └──label # 会员标签
|
||||
│ │ └──level # 会员等级
|
||||
│ │ └──list # 会员管理
|
||||
│ ├── plugins # 插件
|
||||
│ ├── router # 路由配置
|
||||
│ │ └──modules # 页面路由模块
|
||||
│ │ └──agent.js # 有关分销
|
||||
│ │ └──app.js # 有关应用（小程序、公众号）
|
||||
│ │ └──cms.js # 有关内容（文章管理、文章分类）
|
||||
│ │ └──echarts.js # 有关统计
|
||||
│ │ └──finance.js # 有关财务
|
||||
│ │ └──index.js # 有关主页
|
||||
│ │ └──marketing.js # 有关营销
|
||||
│ │ └──order.js # 有关订单
|
||||
│ │ └──product.js # 有关商品
|
||||
│ │ └──setting.js # 有关设置
|
||||
│ │ └──system.js # 有关维护
|
||||
│ │ └──user.js # 有关会员
|
||||
│ │ └──index.js # 路由的导出以及拦截处理
|
||||
│ │ └──routes.js # 路由的汇总
|
||||
│ ├── store # Vuex 状态管理
|
||||
│ ├── utils # js工具
|
||||
│ │ └──authLapse.js # 授权提示框
|
||||
│ │ └──modalForm.js # 表单模态框
|
||||
│ │ └──videoCloud.js # 上传云储存视频（七牛、腾讯、阿里）
|
||||
│ │ └──validate.js # 将时间戳转化成时间；
|
||||
│ │ └──public.js # 询问模态框；
|
||||
│ ├── styles # 样式管理
|
||||
│ ├── setting.env.js # 开发配置文件
|
||||
│ ├── setting.js # 业务配置文件
|
||||
│ ├── main.js # 入口文件 加载组件 初始化等
|
||||
│ └── App.vue # 入口页面
|
||||
├── tests # 测试管理
|
||||
├── alias.config.js # 别名，仅用于配置 WebStorm 识别别名，无实际用处
|
||||
├── babel.config.js # babel 配置
|
||||
├── jest.config.js # jest 配置
|
||||
├── package.json # package.json
|
||||
└── vue.config.js # Vue CLI 3 配置
|
||||
~~~
|
||||
## 开发打包项目
|
||||
│ │ └──marketing # 营销
|
||||
│ │ └──coupon # 优惠劵
|
||||
│ │ └──systemSetting # 设置
|
||||
│ │ └──administratorAuthority # 管理权限
|
||||
│ │ └──adminList # 管理员列表
|
||||
│ │ └──identityManager# 身份管理
|
||||
│ │ └──permissionRules# 权限规则
|
||||
│ │ └──logistics # 物流设置
|
||||
│ │ └──cityList # 城市数据
|
||||
│ │ └──companyList # 物流公司
|
||||
│ │ └──config # 物流配置
|
||||
│ │ └──shippingTemplates # 运费模板
|
||||
│ │ └──setting # 系统设置
|
||||
│ │ └──systemStore # 提货点设置
|
||||
│ │ └──appSetting # 应用 小程序 公众号设置
|
||||
│ │ └──content # 内容
|
||||
│ │ └──article # 文章管理
|
||||
│ │ └──articleclass # 文章分类
|
||||
│ │ └──datas # 统计数据
|
||||
│ │ └──user # 用户
|
||||
│ │ └──list # 用户管理
|
||||
│ │ └──grade # 用户等级/标签
|
||||
│ │ └──group # 用户分组
|
||||
│ │ └──distribution # 分销设置
|
||||
│ │ └──maintain # 维护
|
||||
│ │ └──devconfig # 组合数据
|
||||
│ │ └──formConfig # 表单配置
|
||||
│ │ └──financial # 财务
|
||||
│ │ └──error-page # 错误页
|
||||
│ │ └──404 # 错误页404
|
||||
│ │ └──403 # 错误页403
|
||||
│ ├── filters # 过滤器
|
||||
│ ├── router # 路由配置
|
||||
│ │ └──modules # 页面路由模块
|
||||
│ │ └──content.js # 有关内容 文章
|
||||
│ │ └──user.js # 有关用户
|
||||
│ │ └──appSetting.js # 有关应用
|
||||
│ │ └──marketing.js # 有关优惠券
|
||||
│ │ └──distribution.js # 有关分销
|
||||
│ │ └──order.js # 有关订单
|
||||
│ │ └──financial.js # 有关财务
|
||||
│ │ └──store.js # 有关商品
|
||||
│ │ └──maintain.js # 有关维护
|
||||
│ │ └──operation.js # 有关设置
|
||||
│ │ └──index.js # 路由的汇总
|
||||
│ ├── store # Vuex 状态管理
|
||||
│ ├── utils # 全局公用方法
|
||||
│ │ └──request.js # 请求封装
|
||||
│ │ └──settingMer.js # 请求地址配置
|
||||
│ ├── styles # 样式管理
|
||||
│ ├── permission.js # 路由拦截
|
||||
│ ├── main.js # 入口文件 加载组件 初始化等
|
||||
│ └── App.vue # 入口页面
|
||||
├── tests # 测试
|
||||
├── .env.xxx # 环境变量配置
|
||||
├── .eslintrc.js # eslint 配置项
|
||||
├── .babelrc # babel-loader 配置
|
||||
├── .travis.yml # 自动化CI配置
|
||||
├── vue.config.js # vue-cli 配置
|
||||
├── postcss.config.js # postcss 配置
|
||||
└── package.json # package.json
|
||||
|
||||
|
||||
~~~
|
||||
## 开发
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://gitee.com/ZhongBangKeJi/crmeb_java/
|
||||
|
||||
# 进入项目目录
|
||||
$ cd admin-iView
|
||||
cd ##
|
||||
|
||||
# 安装依赖
|
||||
$ npm install
|
||||
npm install
|
||||
|
||||
# 启动项目(本地开发环境)
|
||||
$ npm run dev
|
||||
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
|
||||
npm install --registry=https://registry.npm.taobao.org
|
||||
|
||||
# 打包项目
|
||||
$ npm run build
|
||||
~~~
|
||||
# 启动服务
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 配置
|
||||
浏览器访问 http://localhost:9527
|
||||
|
||||
## 发布
|
||||
|
||||
```bash
|
||||
# 构建测试环境
|
||||
npm run build:stage
|
||||
|
||||
# 构建生产环境
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
## 其它
|
||||
|
||||
```bash
|
||||
# 预览发布环境效果
|
||||
npm run preview
|
||||
|
||||
# 预览发布环境效果 + 静态资源分析
|
||||
npm run preview -- --report
|
||||
|
||||
# 代码格式检查
|
||||
npm run lint
|
||||
|
||||
# 代码格式检查并自动修复
|
||||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -1,213 +1,257 @@
|
||||
<p align="center">
|
||||
<img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
|
||||
</p>
|
||||
# CRMEB Admin
|
||||
## 开发规范
|
||||
统一使用ES6 语法
|
||||
方法注释
|
||||
/*
|
||||
* th => 表头
|
||||
* data => 数据
|
||||
* fileName => 文件名
|
||||
* fileType => 文件类型
|
||||
* sheetName => sheet页名
|
||||
*/
|
||||
export default function toExcel ({ th, data, fileName, fileType, sheetName })
|
||||
行注释 //
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/vuejs/vue">
|
||||
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
|
||||
</a>
|
||||
<a href="https://github.com/ElemeFE/element">
|
||||
<img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
|
||||
</a>
|
||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
||||
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||
</a>
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||
</a>
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
||||
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
||||
</a>
|
||||
<a href="https://gitter.im/vue-element-admin/discuss">
|
||||
<img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
|
||||
</a>
|
||||
<a href="https://panjiachen.gitee.io/vue-element-admin-site/zh/donate">
|
||||
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
|
||||
</a>
|
||||
</p>
|
||||
### 命名
|
||||
|
||||
日本語 | [English](./README.md) | [简体中文](./README.zh-CN.md) | [Spanish](./README.es.md)
|
||||
页面目录 文件夹命名格式骆驼式命名法,例如：用户列表 userList
|
||||
例如：商品模块
|
||||
store 商品
|
||||
├─ store 商品管理
|
||||
├─index.vue 首页
|
||||
├─ creatStore 新建商品
|
||||
├─ index.vue
|
||||
├─ sort 商品分类
|
||||
├─ index.vue
|
||||
├─storeAttr 商品规格
|
||||
├─ index.vue
|
||||
├─storeComment 商品评论
|
||||
├─ index.vue
|
||||
|
||||
## 概要
|
||||
页面命名、组建、文件夹 命名格式小驼峰命名法,例如：用户列表 userList
|
||||
|
||||
[vue-element-admin](https://panjiachen.github.io/vue-element-admin) は管理画面のフロントエンドのインタフェースで、[vue](https://github.com/vuejs/vue) と [element-ui](https://github.com/ElemeFE/element)を使っています。i18nの多言語対応、可変ルート、権限、典型的なビジネスアプリテンプレートであり、豊富なコンポーネントを提供しています。素早くビジネス用の管理画面の現型を構築に役立ちます。
|
||||
类名函数命名 大驼峰式 例如：addUser
|
||||
变量命名 小驼峰式 例如：user 或者 userInfo
|
||||
常量 采用全大些下划线命名 例如：VUE_APP_API_URl
|
||||
|
||||
- [デモページ](https://panjiachen.github.io/vue-element-admin)
|
||||
### 文件管理规范
|
||||
views 页面模块必须件文件夹区分
|
||||
api 接口一个模块一个文件
|
||||
组建 一个组建一个文件夹
|
||||
plugins 插件一个插件一个文件夹
|
||||
vuex 路由状态管理，一个模块在modules 中建一个文件夹
|
||||
router 一个模块一个模块在modules 中建一个文件夹
|
||||
style 样式尽量采用iView自带组建，common.less 系统通用样式不要轻易动
|
||||
自定义通用样式 style.less,每次添加必须加注释，页面独立样式在在页面内写，后缀less 格式
|
||||
组建样式 styles 中添加文件夹 composents 对应components 目录新建样式文件
|
||||
utils 自定义工具js 独立命名，一般不用新建文件夹
|
||||
|
||||
- [ドキュメント](https://panjiachen.github.io/vue-element-admin-site/)
|
||||
## 模块命名
|
||||
~~~
|
||||
├─ login 登录
|
||||
├─ dashboard 首页
|
||||
├─ store 商品管理
|
||||
├─ order 系统订单管理
|
||||
├─ distribution 分销
|
||||
├─ user 用户管理
|
||||
├─ content 内容管理
|
||||
├─ appSetting 各个应用模块功能管理公众号、小程序、支付宝、百度小程序、今日头条小程序
|
||||
├─ marketing 营销管理 优惠劵 积分
|
||||
├─ sms 设置 短信设置
|
||||
├─ systemSetting 设置 管理员权限 系统设置 物流设置
|
||||
├─ maintain 维护 配置分类 组合数据 表单配置
|
||||
├─ error-page 错误页
|
||||
|
||||
- [Gitter](https://gitter.im/vue-element-admin/discuss)
|
||||
~~~
|
||||
## 目录结构
|
||||
主要目录结构及说明：
|
||||
~~~
|
||||
├── public # 静态资源
|
||||
│ ├── favicon.ico # favicon图标
|
||||
│ └── index.html # html 模板
|
||||
│ └── UEditor # 富文本编辑器插件
|
||||
├── src # 源代码
|
||||
│ ├── api # 所有请求
|
||||
│ │ └──user.js # 有关登录/用户的接口
|
||||
│ │ └──article.js # 有关内容的接口
|
||||
│ │ └──categoryApi.js # 有关配置的接口
|
||||
│ │ └──configTabApi.js # 有关配置分类的接口
|
||||
│ │ └──dashboard.js # 有关统计的接口
|
||||
│ │ └──distribution.js # 有关分销的接口
|
||||
│ │ └──logistics.js # 有关城市数据、物流配置的接口
|
||||
│ │ └──marketing.js # 有关优惠券的接口
|
||||
│ │ └──order.js # 有关订单的接口
|
||||
│ │ └──role.js # 有关权限的接口
|
||||
│ │ └──roleApi.js # 有关菜单的接口
|
||||
│ │ └──sms.js # 有关短信的接口
|
||||
│ │ └──store.js # 有关商品的接口
|
||||
│ │ └──storePoint.js # 有关提货点的接口
|
||||
│ │ └──productCreateApi.js # 有关附件上传的接口
|
||||
│ │ └──systemadmin.js # 有关管理员的接口
|
||||
│ │ └──systemConfig.js # 有关系统配置的接口
|
||||
│ │ └──systemFormConfig.js # 有关表单配置的接口
|
||||
│ │ └──systemGroup.js # 有关组合数据的接口
|
||||
│ │ └──systemSetting.js # 有关上传文件的接口
|
||||
│ │ └──user.js # 有关用户的接口
|
||||
│ │ └──wxApi.js # 有关微信的接口
|
||||
│ ├── assets # 图片、svg 等静态资源
|
||||
│ ├── components # 公共组件
|
||||
│ │ └──articleList # 文章列表
|
||||
│ │ └──attrFrom # 商品规格
|
||||
│ │ └──Breadcrumb # 头部标题标签
|
||||
│ │ └──cards # 统计小方块
|
||||
│ │ └──echarts # 统计图
|
||||
│ │ └──Category # 分类
|
||||
│ │ └──customerInfo # 用户列表
|
||||
│ │ └──FormGenerator # 表单配置
|
||||
│ │ └──couponList # 优惠劵列表
|
||||
│ │ └──goodsList # 商品列表
|
||||
│ │ └──Hamburger # 导航收缩组件
|
||||
│ │ └──HeaderSearch # 导航搜索组件
|
||||
│ │ └──iconFrom # 导航添加图标
|
||||
│ │ └──RightPanel # 右侧设置按钮，设置导航相关
|
||||
│ │ └──Screenfull # 全屏
|
||||
│ │ └──SvgIcon # svg图标
|
||||
│ │ └──Tinymce # 颜色选择
|
||||
│ │ └──ThemePicker # 右侧设置按钮，设置组题颜色
|
||||
│ │ └──templatesFrom # 运费模板
|
||||
│ │ └──ueditorFrom # 富文本编辑器
|
||||
│ │ └──uploadPicture # 上传图片组件
|
||||
│ │ └──Upload # 上传文件组件
|
||||
│ │ └──UploadExcel # 下载Excel
|
||||
│ │ └──userList # 用户列表
|
||||
│ ├── layouts # 导航布局
|
||||
│ │ ├──index # 主页面
|
||||
│ │ ├──components # 导航组件
|
||||
│ │ └──Settings # 右边小按钮，设置导航等
|
||||
│ │ └──Sidebar # 侧边导航
|
||||
│ │ └──TagsView # tab标签页导航
|
||||
│ │ └──Navbar # 头部导航
|
||||
│ │ └──AppMain # 导航路由
|
||||
│ │ └──index.js # 组件引用
|
||||
│ │ └──mixins # 自适应大小
|
||||
│ ├── libs # 公共js方法
|
||||
│ │ └──settingMer # 配置请求地址
|
||||
│ ├── views # 所有页面
|
||||
│ │ └──login # 登录
|
||||
│ │ └──index # 登录
|
||||
│ │ └──dashboard # 首页
|
||||
│ │ └──store # 商品
|
||||
│ │ └──creatStore # 添加商品
|
||||
│ │ └──storeAttr # 商品规格
|
||||
│ │ └──sort # 商品分类
|
||||
│ │ └──taoBao # 复制商品
|
||||
│ │ └──storeComment # 商品评论
|
||||
│ │ └──order # 订单管理
|
||||
│ │ └──marketing # 营销
|
||||
│ │ └──coupon # 优惠劵
|
||||
│ │ └──systemSetting # 设置
|
||||
│ │ └──administratorAuthority # 管理权限
|
||||
│ │ └──adminList # 管理员列表
|
||||
│ │ └──identityManager# 身份管理
|
||||
│ │ └──permissionRules# 权限规则
|
||||
│ │ └──logistics # 物流设置
|
||||
│ │ └──cityList # 城市数据
|
||||
│ │ └──companyList # 物流公司
|
||||
│ │ └──config # 物流配置
|
||||
│ │ └──shippingTemplates # 运费模板
|
||||
│ │ └──setting # 系统设置
|
||||
│ │ └──systemStore # 提货点设置
|
||||
│ │ └──appSetting # 应用 小程序 公众号设置
|
||||
│ │ └──content # 内容
|
||||
│ │ └──article # 文章管理
|
||||
│ │ └──articleclass # 文章分类
|
||||
│ │ └──datas # 统计数据
|
||||
│ │ └──user # 用户
|
||||
│ │ └──list # 用户管理
|
||||
│ │ └──grade # 用户等级/标签
|
||||
│ │ └──group # 用户分组
|
||||
│ │ └──distribution # 分销设置
|
||||
│ │ └──maintain # 维护
|
||||
│ │ └──devconfig # 组合数据
|
||||
│ │ └──formConfig # 表单配置
|
||||
│ │ └──financial # 财务
|
||||
│ │ └──error-page # 错误页
|
||||
│ │ └──404 # 错误页404
|
||||
│ │ └──403 # 错误页403
|
||||
│ ├── filters # 过滤器
|
||||
│ ├── router # 路由配置
|
||||
│ │ └──modules # 页面路由模块
|
||||
│ │ └──content.js # 有关内容 文章
|
||||
│ │ └──user.js # 有关用户
|
||||
│ │ └──appSetting.js # 有关应用
|
||||
│ │ └──marketing.js # 有关优惠券
|
||||
│ │ └──distribution.js # 有关分销
|
||||
│ │ └──order.js # 有关订单
|
||||
│ │ └──financial.js # 有关财务
|
||||
│ │ └──store.js # 有关商品
|
||||
│ │ └──maintain.js # 有关维护
|
||||
│ │ └──operation.js # 有关设置
|
||||
│ │ └──index.js # 路由的汇总
|
||||
│ ├── store # Vuex 状态管理
|
||||
│ ├── utils # 全局公用方法
|
||||
│ │ └──request.js # 请求封装
|
||||
│ │ └──settingMer.js # 请求地址配置
|
||||
│ ├── styles # 样式管理
|
||||
│ ├── permission.js # 路由拦截
|
||||
│ ├── main.js # 入口文件 加载组件 初始化等
|
||||
│ └── App.vue # 入口页面
|
||||
├── tests # 测试
|
||||
├── .env.xxx # 环境变量配置
|
||||
├── .eslintrc.js # eslint 配置项
|
||||
├── .babelrc # babel-loader 配置
|
||||
├── .travis.yml # 自动化CI配置
|
||||
├── vue.config.js # vue-cli 配置
|
||||
├── postcss.config.js # postcss 配置
|
||||
└── package.json # package.json
|
||||
|
||||
- [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
|
||||
|
||||
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
|
||||
|
||||
- おすすめシンプルテンプレート: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
|
||||
- デスクトップバージョン: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||
- Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (感謝: [@Armour](https://github.com/Armour))
|
||||
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
|
||||
|
||||
**バージョン`v4.1.0+`以降について、デフォルトのmasterブランチではi18nをサポートしていません。masterブランチと共にアップデートされる[i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)を使用してください。 **
|
||||
|
||||
**現在のバージョン `v4.0+` は `vue-cli` で構築していて、バグ報告は[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)のissueでお願いします。旧バージョン[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)もあります。こちらは`vue-cli`に依存しないです。**
|
||||
|
||||
**低いバージョンのブラウザはサーポートしないです(例えば ie)，必要があれば polyfill を追加してください。 [詳細はこちら](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
|
||||
|
||||
## 前準備
|
||||
|
||||
ローカル環境に [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/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) と [element-ui](https://github.com/ElemeFE/element)で開発しています。Requestは[Mock.js](https://github.com/nuysoft/Mock)のモックデータを使っています。
|
||||
|
||||
**バグ修正や新規機能追加のissue と pull requestは大歓迎です。**
|
||||
|
||||
<p align="center">
|
||||
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
|
||||
</p>
|
||||
|
||||
## Sponsors
|
||||
|
||||
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
|
||||
|
||||
<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
|
||||
|
||||
## 機能一覧
|
||||
|
||||
```
|
||||
- ログイン / ログアウト
|
||||
|
||||
- Auth認証
|
||||
- ページ権限
|
||||
- 権限パーミッション
|
||||
- 権限設定
|
||||
- 外部IDでログイン
|
||||
|
||||
- 複数環境デプロイ
|
||||
- dev sit stage prod
|
||||
|
||||
- 共通機能
|
||||
- 多言語切替
|
||||
- テーマ切替
|
||||
- サイトメニュー（ルートから生成）
|
||||
- パンくずリストナビゲーション
|
||||
- タブナビゲーション
|
||||
- Svg Sprite アイコン
|
||||
- ローカル/バックエンド モック データ
|
||||
- Screenfull
|
||||
|
||||
- WYSIWYG
|
||||
- TinyMCE
|
||||
- Markdown
|
||||
- JSON
|
||||
|
||||
- Excel
|
||||
- エクスポート
|
||||
- インポート
|
||||
- リード
|
||||
- Zip
|
||||
|
||||
- テーブル
|
||||
- ダイナミックテーブル
|
||||
- ドラッグアンドドロップテーブル
|
||||
- インラインエディットテーブル
|
||||
|
||||
- エラーページ
|
||||
- 401
|
||||
- 404
|
||||
|
||||
- コンポーネント
|
||||
- アバターアップロード
|
||||
- トップに戻る
|
||||
- ドラッグダイアログ
|
||||
- ドラッグ選択
|
||||
- ドラッグKanban
|
||||
- ドラッグリスト
|
||||
- ペインの分割
|
||||
- Dropzone
|
||||
- スティッキー
|
||||
- CountTo
|
||||
|
||||
- 高度なサンプル
|
||||
- エラーログ
|
||||
- ダッシュボード
|
||||
- ガイドページ
|
||||
- ECharts
|
||||
- クリップボード
|
||||
- Markdown to html
|
||||
```
|
||||
|
||||
## Getting started
|
||||
~~~
|
||||
## 开发
|
||||
|
||||
```bash
|
||||
# clone the project
|
||||
git clone https://github.com/PanJiaChen/vue-element-admin.git
|
||||
# 克隆项目
|
||||
git clone https://gitee.com/ZhongBangKeJi/crmeb_java/
|
||||
|
||||
# enter the project directory
|
||||
cd vue-element-admin
|
||||
# 进入项目目录
|
||||
cd ##
|
||||
|
||||
# install dependency
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# develop
|
||||
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
|
||||
npm install --registry=https://registry.npm.taobao.org
|
||||
|
||||
# 启动服务
|
||||
npm run dev
|
||||
```
|
||||
|
||||
http://localhost:9527 が自動的に開きます。
|
||||
浏览器访问 http://localhost:9527
|
||||
|
||||
## Build
|
||||
## 发布
|
||||
|
||||
```bash
|
||||
# build for test environment
|
||||
# 构建测试环境
|
||||
npm run build:stage
|
||||
|
||||
# build for production environment
|
||||
# 构建生产环境
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
## Advanced
|
||||
## 其它
|
||||
|
||||
```bash
|
||||
# preview the release environment effect
|
||||
# 预览发布环境效果
|
||||
npm run preview
|
||||
|
||||
# preview the release environment effect + static resource analysis
|
||||
# 预览发布环境效果 + 静态资源分析
|
||||
npm run preview -- --report
|
||||
|
||||
# code format check
|
||||
# 代码格式检查
|
||||
npm run lint
|
||||
|
||||
# code format check and auto fix
|
||||
# 代码格式检查并自动修复
|
||||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
詳細は [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) を参照してください。
|
||||
|
||||
## Changelog
|
||||
|
||||
各リリースの詳細は [release notes](https://github.com/PanJiaChen/vue-element-admin/releases) にあります。
|
||||
|
||||
## Online Demo
|
||||
|
||||
[Preview](https://panjiachen.github.io/vue-element-admin)
|
||||
|
||||
## Donate
|
||||
|
||||
If you find this project useful, you can buy author a glass of juice :tropical_drink:
|
||||
|
||||
|
||||
|
||||
[Paypal Me](https://www.paypal.me/panfree23)
|
||||
|
||||
[Buy me a coffee](https://www.buymeacoffee.com/Pan)
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers and Internet Explorer 10+.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
|
||||
|
||||
Copyright (c) 2017-present PanJiaChen
|
||||
|
||||
399
admin/README.md
399
admin/README.md
@@ -1,217 +1,256 @@
|
||||
<p align="center">
|
||||
<img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
|
||||
</p>
|
||||
# CRMEB Admin
|
||||
## 开发规范
|
||||
统一使用ES6 语法
|
||||
方法注释
|
||||
/*
|
||||
* th => 表头
|
||||
* data => 数据
|
||||
* fileName => 文件名
|
||||
* fileType => 文件类型
|
||||
* sheetName => sheet页名
|
||||
*/
|
||||
export default function toExcel ({ th, data, fileName, fileType, sheetName })
|
||||
行注释 //
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/vuejs/vue">
|
||||
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
|
||||
</a>
|
||||
<a href="https://github.com/ElemeFE/element">
|
||||
<img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
|
||||
</a>
|
||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
||||
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||
</a>
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||
</a>
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
||||
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
||||
</a>
|
||||
<a href="https://gitter.im/vue-element-admin/discuss">
|
||||
<img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
|
||||
</a>
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/donate">
|
||||
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
|
||||
</a>
|
||||
</p>
|
||||
### 命名
|
||||
|
||||
English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Spanish](./README.es.md)
|
||||
页面目录 文件夹命名格式骆驼式命名法,例如：用户列表 userList
|
||||
例如：商品模块
|
||||
store 商品
|
||||
├─ store 商品管理
|
||||
├─index.vue 首页
|
||||
├─ creatStore 新建商品
|
||||
├─ index.vue
|
||||
├─ sort 商品分类
|
||||
├─ index.vue
|
||||
├─storeAttr 商品规格
|
||||
├─ index.vue
|
||||
├─storeComment 商品评论
|
||||
├─ index.vue
|
||||
|
||||
## Introduction
|
||||
页面命名、组建、文件夹 命名格式小驼峰命名法,例如：用户列表 userList
|
||||
|
||||
[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It is based on [vue](https://github.com/vuejs/vue) and uses the UI Toolkit [element-ui](https://github.com/ElemeFE/element).
|
||||
类名函数命名 大驼峰式 例如：addUser
|
||||
变量命名 小驼峰式 例如：user 或者 userInfo
|
||||
常量 采用全大些下划线命名 例如：VUE_APP_API_URl
|
||||
|
||||
[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is based on the newest development stack of vue and it has a built-in i18n solution, typical templates for enterprise applications, and lots of awesome features. It helps you build large and complex Single-Page Applications. I believe whatever your needs are, this project will help you.
|
||||
### 文件管理规范
|
||||
views 页面模块必须件文件夹区分
|
||||
api 接口一个模块一个文件
|
||||
组建 一个组建一个文件夹
|
||||
plugins 插件一个插件一个文件夹
|
||||
vuex 路由状态管理，一个模块在modules 中建一个文件夹
|
||||
router 一个模块一个模块在modules 中建一个文件夹
|
||||
style 样式尽量采用iView自带组建，common.less 系统通用样式不要轻易动
|
||||
自定义通用样式 style.less,每次添加必须加注释，页面独立样式在在页面内写，后缀less 格式
|
||||
组建样式 styles 中添加文件夹 composents 对应components 目录新建样式文件
|
||||
utils 自定义工具js 独立命名，一般不用新建文件夹
|
||||
|
||||
- [Preview](https://panjiachen.github.io/vue-element-admin)
|
||||
## 模块命名
|
||||
~~~
|
||||
├─ login 登录
|
||||
├─ dashboard 首页
|
||||
├─ store 商品管理
|
||||
├─ order 系统订单管理
|
||||
├─ distribution 分销
|
||||
├─ user 用户管理
|
||||
├─ content 内容管理
|
||||
├─ appSetting 各个应用模块功能管理公众号、小程序、支付宝、百度小程序、今日头条小程序
|
||||
├─ marketing 营销管理 优惠劵 积分
|
||||
├─ sms 设置 短信设置
|
||||
├─ systemSetting 设置 管理员权限 系统设置 物流设置
|
||||
├─ maintain 维护 配置分类 组合数据 表单配置
|
||||
├─ error-page 错误页
|
||||
|
||||
- [Documentation](https://panjiachen.github.io/vue-element-admin-site/)
|
||||
~~~
|
||||
## 目录结构
|
||||
主要目录结构及说明：
|
||||
~~~
|
||||
├── public # 静态资源
|
||||
│ ├── favicon.ico # favicon图标
|
||||
│ └── index.html # html 模板
|
||||
│ └── UEditor # 富文本编辑器插件
|
||||
├── src # 源代码
|
||||
│ ├── api # 所有请求
|
||||
│ │ └──user.js # 有关登录/用户的接口
|
||||
│ │ └──article.js # 有关内容的接口
|
||||
│ │ └──categoryApi.js # 有关配置的接口
|
||||
│ │ └──configTabApi.js # 有关配置分类的接口
|
||||
│ │ └──dashboard.js # 有关统计的接口
|
||||
│ │ └──distribution.js # 有关分销的接口
|
||||
│ │ └──logistics.js # 有关城市数据、物流配置的接口
|
||||
│ │ └──marketing.js # 有关优惠券的接口
|
||||
│ │ └──order.js # 有关订单的接口
|
||||
│ │ └──role.js # 有关权限的接口
|
||||
│ │ └──roleApi.js # 有关菜单的接口
|
||||
│ │ └──sms.js # 有关短信的接口
|
||||
│ │ └──store.js # 有关商品的接口
|
||||
│ │ └──storePoint.js # 有关提货点的接口
|
||||
│ │ └──productCreateApi.js # 有关附件上传的接口
|
||||
│ │ └──systemadmin.js # 有关管理员的接口
|
||||
│ │ └──systemConfig.js # 有关系统配置的接口
|
||||
│ │ └──systemFormConfig.js # 有关表单配置的接口
|
||||
│ │ └──systemGroup.js # 有关组合数据的接口
|
||||
│ │ └──systemSetting.js # 有关上传文件的接口
|
||||
│ │ └──user.js # 有关用户的接口
|
||||
│ │ └──wxApi.js # 有关微信的接口
|
||||
│ ├── assets # 图片、svg 等静态资源
|
||||
│ ├── components # 公共组件
|
||||
│ │ └──articleList # 文章列表
|
||||
│ │ └──attrFrom # 商品规格
|
||||
│ │ └──Breadcrumb # 头部标题标签
|
||||
│ │ └──cards # 统计小方块
|
||||
│ │ └──echarts # 统计图
|
||||
│ │ └──Category # 分类
|
||||
│ │ └──customerInfo # 用户列表
|
||||
│ │ └──FormGenerator # 表单配置
|
||||
│ │ └──couponList # 优惠劵列表
|
||||
│ │ └──goodsList # 商品列表
|
||||
│ │ └──Hamburger # 导航收缩组件
|
||||
│ │ └──HeaderSearch # 导航搜索组件
|
||||
│ │ └──iconFrom # 导航添加图标
|
||||
│ │ └──RightPanel # 右侧设置按钮，设置导航相关
|
||||
│ │ └──Screenfull # 全屏
|
||||
│ │ └──SvgIcon # svg图标
|
||||
│ │ └──Tinymce # 颜色选择
|
||||
│ │ └──ThemePicker # 右侧设置按钮，设置组题颜色
|
||||
│ │ └──templatesFrom # 运费模板
|
||||
│ │ └──ueditorFrom # 富文本编辑器
|
||||
│ │ └──uploadPicture # 上传图片组件
|
||||
│ │ └──Upload # 上传文件组件
|
||||
│ │ └──UploadExcel # 下载Excel
|
||||
│ │ └──userList # 用户列表
|
||||
│ ├── layouts # 导航布局
|
||||
│ │ ├──index # 主页面
|
||||
│ │ ├──components # 导航组件
|
||||
│ │ └──Settings # 右边小按钮，设置导航等
|
||||
│ │ └──Sidebar # 侧边导航
|
||||
│ │ └──TagsView # tab标签页导航
|
||||
│ │ └──Navbar # 头部导航
|
||||
│ │ └──AppMain # 导航路由
|
||||
│ │ └──index.js # 组件引用
|
||||
│ │ └──mixins # 自适应大小
|
||||
│ ├── libs # 公共js方法
|
||||
│ │ └──settingMer # 配置请求地址
|
||||
│ ├── views # 所有页面
|
||||
│ │ └──login # 登录
|
||||
│ │ └──index # 登录
|
||||
│ │ └──dashboard # 首页
|
||||
│ │ └──store # 商品
|
||||
│ │ └──creatStore # 添加商品
|
||||
│ │ └──storeAttr # 商品规格
|
||||
│ │ └──sort # 商品分类
|
||||
│ │ └──taoBao # 复制商品
|
||||
│ │ └──storeComment # 商品评论
|
||||
│ │ └──order # 订单管理
|
||||
│ │ └──marketing # 营销
|
||||
│ │ └──coupon # 优惠劵
|
||||
│ │ └──systemSetting # 设置
|
||||
│ │ └──administratorAuthority # 管理权限
|
||||
│ │ └──adminList # 管理员列表
|
||||
│ │ └──identityManager# 身份管理
|
||||
│ │ └──permissionRules# 权限规则
|
||||
│ │ └──logistics # 物流设置
|
||||
│ │ └──cityList # 城市数据
|
||||
│ │ └──companyList # 物流公司
|
||||
│ │ └──config # 物流配置
|
||||
│ │ └──shippingTemplates # 运费模板
|
||||
│ │ └──setting # 系统设置
|
||||
│ │ └──systemStore # 提货点设置
|
||||
│ │ └──appSetting # 应用 小程序 公众号设置
|
||||
│ │ └──content # 内容
|
||||
│ │ └──article # 文章管理
|
||||
│ │ └──articleclass # 文章分类
|
||||
│ │ └──datas # 统计数据
|
||||
│ │ └──user # 用户
|
||||
│ │ └──list # 用户管理
|
||||
│ │ └──grade # 用户等级/标签
|
||||
│ │ └──group # 用户分组
|
||||
│ │ └──distribution # 分销设置
|
||||
│ │ └──maintain # 维护
|
||||
│ │ └──devconfig # 组合数据
|
||||
│ │ └──formConfig # 表单配置
|
||||
│ │ └──financial # 财务
|
||||
│ │ └──error-page # 错误页
|
||||
│ │ └──404 # 错误页404
|
||||
│ │ └──403 # 错误页403
|
||||
│ ├── filters # 过滤器
|
||||
│ ├── router # 路由配置
|
||||
│ │ └──modules # 页面路由模块
|
||||
│ │ └──content.js # 有关内容 文章
|
||||
│ │ └──user.js # 有关用户
|
||||
│ │ └──appSetting.js # 有关应用
|
||||
│ │ └──marketing.js # 有关优惠券
|
||||
│ │ └──distribution.js # 有关分销
|
||||
│ │ └──order.js # 有关订单
|
||||
│ │ └──financial.js # 有关财务
|
||||
│ │ └──store.js # 有关商品
|
||||
│ │ └──maintain.js # 有关维护
|
||||
│ │ └──operation.js # 有关设置
|
||||
│ │ └──index.js # 路由的汇总
|
||||
│ ├── store # Vuex 状态管理
|
||||
│ ├── utils # 全局公用方法
|
||||
│ │ └──request.js # 请求封装
|
||||
│ │ └──settingMer.js # 请求地址配置
|
||||
│ ├── styles # 样式管理
|
||||
│ ├── permission.js # 路由拦截
|
||||
│ ├── main.js # 入口文件 加载组件 初始化等
|
||||
│ └── App.vue # 入口页面
|
||||
├── tests # 测试
|
||||
├── .env.xxx # 环境变量配置
|
||||
├── .eslintrc.js # eslint 配置项
|
||||
├── .babelrc # babel-loader 配置
|
||||
├── .travis.yml # 自动化CI配置
|
||||
├── vue.config.js # vue-cli 配置
|
||||
├── postcss.config.js # postcss 配置
|
||||
└── package.json # package.json
|
||||
|
||||
- [Gitter](https://gitter.im/vue-element-admin/discuss)
|
||||
|
||||
- [Donate](https://panjiachen.github.io/vue-element-admin-site/donate/)
|
||||
|
||||
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
|
||||
|
||||
- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 国内用户可访问该地址在线预览
|
||||
|
||||
- Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
|
||||
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||
- Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
|
||||
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
|
||||
|
||||
**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
|
||||
|
||||
**The current version is `v4.0+` build on `vue-cli`. If you find a problem, please put [issue](https://github.com/PanJiaChen/vue-element-admin/issues/new). If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0), it does not rely on `vue-cli`**
|
||||
|
||||
**This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.**
|
||||
|
||||
## Preparation
|
||||
|
||||
You need to install [node](https://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](https://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/), [vue-cli](https://github.com/vuejs/vue-cli) , [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
|
||||
Understanding and learning this knowledge in advance will greatly help the use of this project.
|
||||
|
||||
<p align="center">
|
||||
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
|
||||
</p>
|
||||
|
||||
## Sponsors
|
||||
|
||||
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
|
||||
|
||||
<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
|
||||
|
||||
## Features
|
||||
|
||||
```
|
||||
- Login / Logout
|
||||
|
||||
- Permission Authentication
|
||||
- Page permission
|
||||
- Directive permission
|
||||
- Permission configuration page
|
||||
- Two-step login
|
||||
|
||||
- Multi-environment build
|
||||
- dev sit stage prod
|
||||
|
||||
- Global Features
|
||||
- I18n
|
||||
- Multiple dynamic themes
|
||||
- Dynamic sidebar (supports multi-level routing)
|
||||
- Dynamic breadcrumb
|
||||
- Tags-view (Tab page Support right-click operation)
|
||||
- Svg Sprite
|
||||
- Mock data
|
||||
- Screenfull
|
||||
- Responsive Sidebar
|
||||
|
||||
- Editor
|
||||
- Rich Text Editor
|
||||
- Markdown Editor
|
||||
- JSON Editor
|
||||
|
||||
- Excel
|
||||
- Export Excel
|
||||
- Upload Excel
|
||||
- Visualization Excel
|
||||
- Export zip
|
||||
|
||||
- Table
|
||||
- Dynamic Table
|
||||
- Drag And Drop Table
|
||||
- Inline Edit Table
|
||||
|
||||
- Error Page
|
||||
- 401
|
||||
- 404
|
||||
|
||||
- Components
|
||||
- Avatar Upload
|
||||
- Back To Top
|
||||
- Drag Dialog
|
||||
- Drag Select
|
||||
- Drag Kanban
|
||||
- Drag List
|
||||
- SplitPane
|
||||
- Dropzone
|
||||
- Sticky
|
||||
- CountTo
|
||||
|
||||
- Advanced Example
|
||||
- Error Log
|
||||
- Dashboard
|
||||
- Guide Page
|
||||
- ECharts
|
||||
- Clipboard
|
||||
- Markdown to html
|
||||
```
|
||||
|
||||
## Getting started
|
||||
~~~
|
||||
## 开发
|
||||
|
||||
```bash
|
||||
# clone the project
|
||||
git clone https://github.com/PanJiaChen/vue-element-admin.git
|
||||
# 克隆项目
|
||||
git clone https://gitee.com/ZhongBangKeJi/crmeb_java/
|
||||
|
||||
# enter the project directory
|
||||
cd vue-element-admin
|
||||
# 进入项目目录
|
||||
cd ##
|
||||
|
||||
# install dependency
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# develop
|
||||
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
|
||||
npm install --registry=https://registry.npm.taobao.org
|
||||
|
||||
# 启动服务
|
||||
npm run dev
|
||||
```
|
||||
|
||||
This will automatically open http://localhost:9527
|
||||
浏览器访问 http://localhost:9527
|
||||
|
||||
## Build
|
||||
## 发布
|
||||
|
||||
```bash
|
||||
# build for test environment
|
||||
# 构建测试环境
|
||||
npm run build:stage
|
||||
|
||||
# build for production environment
|
||||
# 构建生产环境
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
## Advanced
|
||||
## 其它
|
||||
|
||||
```bash
|
||||
# preview the release environment effect
|
||||
# 预览发布环境效果
|
||||
npm run preview
|
||||
|
||||
# preview the release environment effect + static resource analysis
|
||||
# 预览发布环境效果 + 静态资源分析
|
||||
npm run preview -- --report
|
||||
|
||||
# code format check
|
||||
# 代码格式检查
|
||||
npm run lint
|
||||
|
||||
# code format check and auto fix
|
||||
# 代码格式检查并自动修复
|
||||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
|
||||
|
||||
## Changelog
|
||||
|
||||
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
|
||||
|
||||
## Online Demo
|
||||
|
||||
[Preview](https://panjiachen.github.io/vue-element-admin)
|
||||
|
||||
## Donate
|
||||
|
||||
If you find this project useful, you can buy author a glass of juice :tropical_drink:
|
||||
|
||||
|
||||
|
||||
[Paypal Me](https://www.paypal.me/panfree23)
|
||||
|
||||
[Buy me a coffee](https://www.buymeacoffee.com/Pan)
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers and Internet Explorer 10+.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
|
||||
|
||||
Copyright (c) 2017-present PanJiaChen
|
||||
|
||||
@@ -1,166 +1,220 @@
|
||||
<p align="center">
|
||||
<img width="320" src="https://wpimg.wallstcn.com/ecc53a42-d79b-42e2-8852-5126b810a4c8.svg">
|
||||
</p>
|
||||
# CRMEB Admin
|
||||
## 开发规范
|
||||
统一使用ES6 语法
|
||||
方法注释
|
||||
/*
|
||||
* th => 表头
|
||||
* data => 数据
|
||||
* fileName => 文件名
|
||||
* fileType => 文件类型
|
||||
* sheetName => sheet页名
|
||||
*/
|
||||
export default function toExcel ({ th, data, fileName, fileType, sheetName })
|
||||
行注释 //
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/vuejs/vue">
|
||||
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
|
||||
</a>
|
||||
<a href="https://github.com/ElemeFE/element">
|
||||
<img src="https://img.shields.io/badge/element--ui-2.7.0-brightgreen.svg" alt="element-ui">
|
||||
</a>
|
||||
<a href="https://travis-ci.org/PanJiaChen/vue-element-admin" rel="nofollow">
|
||||
<img src="https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master" alt="Build Status">
|
||||
</a>
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE">
|
||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||
</a>
|
||||
<a href="https://github.com/PanJiaChen/vue-element-admin/releases">
|
||||
<img src="https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg" alt="GitHub release">
|
||||
</a>
|
||||
<a href="https://gitter.im/vue-element-admin/discuss">
|
||||
<img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
|
||||
</a>
|
||||
<a href="https://panjiachen.gitee.io/vue-element-admin-site/zh/donate">
|
||||
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
|
||||
</a>
|
||||
</p>
|
||||
### 命名
|
||||
|
||||
简体中文 | [English](./README.md) | [日本語](./README.ja.md) | [Spanish](./README.es.md)
|
||||
页面目录 文件夹命名格式骆驼式命名法,例如：用户列表 userList
|
||||
例如：商品模块
|
||||
store 商品
|
||||
├─ store 商品管理
|
||||
├─index.vue 首页
|
||||
├─ creatStore 新建商品
|
||||
├─ index.vue
|
||||
├─ sort 商品分类
|
||||
├─ index.vue
|
||||
├─storeAttr 商品规格
|
||||
├─ index.vue
|
||||
├─storeComment 商品评论
|
||||
├─ index.vue
|
||||
|
||||
## 简介
|
||||
页面命名、组建、文件夹 命名格式小驼峰命名法,例如：用户列表 userList
|
||||
|
||||
[vue-element-admin](https://panjiachen.github.io/vue-element-admin) 是一个后台前端解决方案，它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element)实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
|
||||
类名函数命名 大驼峰式 例如：addUser
|
||||
变量命名 小驼峰式 例如：user 或者 userInfo
|
||||
常量 采用全大些下划线命名 例如：VUE_APP_API_URl
|
||||
|
||||
- [在线预览](https://panjiachen.github.io/vue-element-admin)
|
||||
### 文件管理规范
|
||||
views 页面模块必须件文件夹区分
|
||||
api 接口一个模块一个文件
|
||||
组建 一个组建一个文件夹
|
||||
plugins 插件一个插件一个文件夹
|
||||
vuex 路由状态管理，一个模块在modules 中建一个文件夹
|
||||
router 一个模块一个模块在modules 中建一个文件夹
|
||||
style 样式尽量采用iView自带组建，common.less 系统通用样式不要轻易动
|
||||
自定义通用样式 style.less,每次添加必须加注释，页面独立样式在在页面内写，后缀less 格式
|
||||
组建样式 styles 中添加文件夹 composents 对应components 目录新建样式文件
|
||||
utils 自定义工具js 独立命名，一般不用新建文件夹
|
||||
|
||||
- [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
|
||||
## 模块命名
|
||||
~~~
|
||||
├─ login 登录
|
||||
├─ dashboard 首页
|
||||
├─ store 商品管理
|
||||
├─ order 系统订单管理
|
||||
├─ distribution 分销
|
||||
├─ user 用户管理
|
||||
├─ content 内容管理
|
||||
├─ appSetting 各个应用模块功能管理公众号、小程序、支付宝、百度小程序、今日头条小程序
|
||||
├─ marketing 营销管理 优惠劵 积分
|
||||
├─ sms 设置 短信设置
|
||||
├─ systemSetting 设置 管理员权限 系统设置 物流设置
|
||||
├─ maintain 维护 配置分类 组合数据 表单配置
|
||||
├─ error-page 错误页
|
||||
|
||||
- [Gitter 讨论组](https://gitter.im/vue-element-admin/discuss)
|
||||
~~~
|
||||
## 目录结构
|
||||
主要目录结构及说明：
|
||||
~~~
|
||||
├── public # 静态资源
|
||||
│ ├── favicon.ico # favicon图标
|
||||
│ └── index.html # html 模板
|
||||
│ └── UEditor # 富文本编辑器插件
|
||||
├── src # 源代码
|
||||
│ ├── api # 所有请求
|
||||
│ │ └──user.js # 有关登录/用户的接口
|
||||
│ │ └──article.js # 有关内容的接口
|
||||
│ │ └──categoryApi.js # 有关配置的接口
|
||||
│ │ └──configTabApi.js # 有关配置分类的接口
|
||||
│ │ └──dashboard.js # 有关统计的接口
|
||||
│ │ └──distribution.js # 有关分销的接口
|
||||
│ │ └──logistics.js # 有关城市数据、物流配置的接口
|
||||
│ │ └──marketing.js # 有关优惠券的接口
|
||||
│ │ └──order.js # 有关订单的接口
|
||||
│ │ └──role.js # 有关权限的接口
|
||||
│ │ └──roleApi.js # 有关菜单的接口
|
||||
│ │ └──sms.js # 有关短信的接口
|
||||
│ │ └──store.js # 有关商品的接口
|
||||
│ │ └──storePoint.js # 有关提货点的接口
|
||||
│ │ └──productCreateApi.js # 有关附件上传的接口
|
||||
│ │ └──systemadmin.js # 有关管理员的接口
|
||||
│ │ └──systemConfig.js # 有关系统配置的接口
|
||||
│ │ └──systemFormConfig.js # 有关表单配置的接口
|
||||
│ │ └──systemGroup.js # 有关组合数据的接口
|
||||
│ │ └──systemSetting.js # 有关上传文件的接口
|
||||
│ │ └──user.js # 有关用户的接口
|
||||
│ │ └──wxApi.js # 有关微信的接口
|
||||
│ ├── assets # 图片、svg 等静态资源
|
||||
│ ├── components # 公共组件
|
||||
│ │ └──articleList # 文章列表
|
||||
│ │ └──attrFrom # 商品规格
|
||||
│ │ └──Breadcrumb # 头部标题标签
|
||||
│ │ └──cards # 统计小方块
|
||||
│ │ └──echarts # 统计图
|
||||
│ │ └──Category # 分类
|
||||
│ │ └──customerInfo # 用户列表
|
||||
│ │ └──FormGenerator # 表单配置
|
||||
│ │ └──couponList # 优惠劵列表
|
||||
│ │ └──goodsList # 商品列表
|
||||
│ │ └──Hamburger # 导航收缩组件
|
||||
│ │ └──HeaderSearch # 导航搜索组件
|
||||
│ │ └──iconFrom # 导航添加图标
|
||||
│ │ └──RightPanel # 右侧设置按钮，设置导航相关
|
||||
│ │ └──Screenfull # 全屏
|
||||
│ │ └──SvgIcon # svg图标
|
||||
│ │ └──Tinymce # 颜色选择
|
||||
│ │ └──ThemePicker # 右侧设置按钮，设置组题颜色
|
||||
│ │ └──templatesFrom # 运费模板
|
||||
│ │ └──ueditorFrom # 富文本编辑器
|
||||
│ │ └──uploadPicture # 上传图片组件
|
||||
│ │ └──Upload # 上传文件组件
|
||||
│ │ └──UploadExcel # 下载Excel
|
||||
│ │ └──userList # 用户列表
|
||||
│ ├── layouts # 导航布局
|
||||
│ │ ├──index # 主页面
|
||||
│ │ ├──components # 导航组件
|
||||
│ │ └──Settings # 右边小按钮，设置导航等
|
||||
│ │ └──Sidebar # 侧边导航
|
||||
│ │ └──TagsView # tab标签页导航
|
||||
│ │ └──Navbar # 头部导航
|
||||
│ │ └──AppMain # 导航路由
|
||||
│ │ └──index.js # 组件引用
|
||||
│ │ └──mixins # 自适应大小
|
||||
│ ├── libs # 公共js方法
|
||||
│ │ └──settingMer # 配置请求地址
|
||||
│ ├── views # 所有页面
|
||||
│ │ └──login # 登录
|
||||
│ │ └──index # 登录
|
||||
│ │ └──dashboard # 首页
|
||||
│ │ └──store # 商品
|
||||
│ │ └──creatStore # 添加商品
|
||||
│ │ └──storeAttr # 商品规格
|
||||
│ │ └──sort # 商品分类
|
||||
│ │ └──taoBao # 复制商品
|
||||
│ │ └──storeComment # 商品评论
|
||||
│ │ └──order # 订单管理
|
||||
│ │ └──marketing # 营销
|
||||
│ │ └──coupon # 优惠劵
|
||||
│ │ └──systemSetting # 设置
|
||||
│ │ └──administratorAuthority # 管理权限
|
||||
│ │ └──adminList # 管理员列表
|
||||
│ │ └──identityManager# 身份管理
|
||||
│ │ └──permissionRules# 权限规则
|
||||
│ │ └──logistics # 物流设置
|
||||
│ │ └──cityList # 城市数据
|
||||
│ │ └──companyList # 物流公司
|
||||
│ │ └──config # 物流配置
|
||||
│ │ └──shippingTemplates # 运费模板
|
||||
│ │ └──setting # 系统设置
|
||||
│ │ └──systemStore # 提货点设置
|
||||
│ │ └──appSetting # 应用 小程序 公众号设置
|
||||
│ │ └──content # 内容
|
||||
│ │ └──article # 文章管理
|
||||
│ │ └──articleclass # 文章分类
|
||||
│ │ └──datas # 统计数据
|
||||
│ │ └──user # 用户
|
||||
│ │ └──list # 用户管理
|
||||
│ │ └──grade # 用户等级/标签
|
||||
│ │ └──group # 用户分组
|
||||
│ │ └──distribution # 分销设置
|
||||
│ │ └──maintain # 维护
|
||||
│ │ └──devconfig # 组合数据
|
||||
│ │ └──formConfig # 表单配置
|
||||
│ │ └──financial # 财务
|
||||
│ │ └──error-page # 错误页
|
||||
│ │ └──404 # 错误页404
|
||||
│ │ └──403 # 错误页403
|
||||
│ ├── filters # 过滤器
|
||||
│ ├── router # 路由配置
|
||||
│ │ └──modules # 页面路由模块
|
||||
│ │ └──content.js # 有关内容 文章
|
||||
│ │ └──user.js # 有关用户
|
||||
│ │ └──appSetting.js # 有关应用
|
||||
│ │ └──marketing.js # 有关优惠券
|
||||
│ │ └──distribution.js # 有关分销
|
||||
│ │ └──order.js # 有关订单
|
||||
│ │ └──financial.js # 有关财务
|
||||
│ │ └──store.js # 有关商品
|
||||
│ │ └──maintain.js # 有关维护
|
||||
│ │ └──operation.js # 有关设置
|
||||
│ │ └──index.js # 路由的汇总
|
||||
│ ├── store # Vuex 状态管理
|
||||
│ ├── utils # 全局公用方法
|
||||
│ │ └──request.js # 请求封装
|
||||
│ │ └──settingMer.js # 请求地址配置
|
||||
│ ├── styles # 样式管理
|
||||
│ ├── permission.js # 路由拦截
|
||||
│ ├── main.js # 入口文件 加载组件 初始化等
|
||||
│ └── App.vue # 入口页面
|
||||
├── tests # 测试
|
||||
├── .env.xxx # 环境变量配置
|
||||
├── .eslintrc.js # eslint 配置项
|
||||
├── .babelrc # babel-loader 配置
|
||||
├── .travis.yml # 自动化CI配置
|
||||
├── vue.config.js # vue-cli 配置
|
||||
├── postcss.config.js # postcss 配置
|
||||
└── package.json # package.json
|
||||
|
||||
- [Donate](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
|
||||
|
||||
- [Wiki](https://github.com/PanJiaChen/vue-element-admin/wiki)
|
||||
|
||||
- [Gitee](https://panjiachen.gitee.io/vue-element-admin/) 在线预览（国内用户可访问该地址）
|
||||
|
||||
- [国内访问文档](https://panjiachen.gitee.io/vue-element-admin-site/zh/) 文档（方便没翻墙的用户查看）
|
||||
|
||||
- 基础模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
|
||||
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
|
||||
- Typescript 版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
|
||||
- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
|
||||
|
||||
**`v4.1.0+`版本之后默认 master 分支将不支持国际化，有需要的请使用[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支，它会和 master 保持同步更新**
|
||||
|
||||
**该项目不支持低版本浏览器(如 ie)，有需求请自行添加 polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
|
||||
|
||||
**目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若发现问题，欢迎提[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)。若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)，它不依赖 `vue-cli`**
|
||||
|
||||
群主 **[圈子](https://jianshiapp.com/circles/1209)** 群主会经常分享一些技术相关的东西，或者加入 [qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602) 或者关注 [微博](https://weibo.com/u/3423485724?is_all=1)
|
||||
|
||||
## 前序准备
|
||||
|
||||
你需要在本地安装 [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/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [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撸后台 系列五(v4.0新版本)](https://juejin.im/post/5c92ff94f265da6128275a85)
|
||||
- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
|
||||
- [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09)
|
||||
- [手摸手，带你用合理的姿势使用 webpack4（上）](https://juejin.im/post/5b56909a518825195f499806)
|
||||
- [手摸手，带你用合理的姿势使用 webpack4（下）](https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc)
|
||||
|
||||
**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
|
||||
|
||||
<p align="center">
|
||||
<img width="900" src="https://wpimg.wallstcn.com/a5894c1b-f6af-456e-82df-1151da0839bf.png">
|
||||
</p>
|
||||
|
||||
## Sponsors
|
||||
|
||||
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
|
||||
|
||||
<a href="https://flatlogic.com/admin-dashboards?from=vue-element-admin"><img width="150px" src="https://wpimg.wallstcn.com/9c0b719b-5551-4c1e-b776-63994632d94a.png" /></a><p>Admin Dashboard Templates made with Vue, React and Angular.</p>
|
||||
|
||||
## 功能
|
||||
|
||||
```
|
||||
- 登录 / 注销
|
||||
|
||||
- 权限验证
|
||||
- 页面权限
|
||||
- 指令权限
|
||||
- 权限配置
|
||||
- 二步登录
|
||||
|
||||
- 多环境发布
|
||||
- dev sit stage prod
|
||||
|
||||
- 全局功能
|
||||
- 国际化多语言
|
||||
- 多种动态换肤
|
||||
- 动态侧边栏（支持多级路由嵌套）
|
||||
- 动态面包屑
|
||||
- 快捷导航(标签页)
|
||||
- Svg Sprite 图标
|
||||
- 本地/后端 mock 数据
|
||||
- Screenfull全屏
|
||||
- 自适应收缩侧边栏
|
||||
|
||||
- 编辑器
|
||||
- 富文本
|
||||
- Markdown
|
||||
- JSON 等多格式
|
||||
|
||||
- Excel
|
||||
- 导出excel
|
||||
- 导入excel
|
||||
- 前端可视化excel
|
||||
- 导出zip
|
||||
|
||||
- 表格
|
||||
- 动态表格
|
||||
- 拖拽表格
|
||||
- 内联编辑
|
||||
|
||||
- 错误页面
|
||||
- 401
|
||||
- 404
|
||||
|
||||
- 組件
|
||||
- 头像上传
|
||||
- 返回顶部
|
||||
- 拖拽Dialog
|
||||
- 拖拽Select
|
||||
- 拖拽看板
|
||||
- 列表拖拽
|
||||
- SplitPane
|
||||
- Dropzone
|
||||
- Sticky
|
||||
- CountTo
|
||||
|
||||
- 综合实例
|
||||
- 错误日志
|
||||
- Dashboard
|
||||
- 引导页
|
||||
- ECharts 图表
|
||||
- Clipboard(剪贴复制)
|
||||
- Markdown2html
|
||||
```
|
||||
|
||||
~~~
|
||||
## 开发
|
||||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://github.com/PanJiaChen/vue-element-admin.git
|
||||
git clone https://gitee.com/ZhongBangKeJi/crmeb_java/
|
||||
|
||||
# 进入项目目录
|
||||
cd vue-element-admin
|
||||
cd ##
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
@@ -198,43 +252,4 @@ npm run lint
|
||||
|
||||
# 代码格式检查并自动修复
|
||||
npm run lint -- --fix
|
||||
```
|
||||
|
||||
更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
|
||||
|
||||
## Changelog
|
||||
|
||||
Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases).
|
||||
|
||||
## Online Demo
|
||||
|
||||
[在线 Demo](https://panjiachen.github.io/vue-element-admin)
|
||||
|
||||
## Donate
|
||||
|
||||
如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink:
|
||||
|
||||
|
||||
[更多捐赠方式](https://panjiachen.gitee.io/vue-element-admin-site/zh/donate)
|
||||
|
||||
[Paypal Me](https://www.paypal.me/panfree23)
|
||||
|
||||
[Buy me a coffee](https://www.buymeacoffee.com/Pan)
|
||||
|
||||
## 购买贴纸
|
||||
|
||||
你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸，本项目将获得 2 元的捐赠。
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers and Internet Explorer 10+.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
|
||||
|
||||
Copyright (c) 2017-present PanJiaChen
|
||||
```
|
||||
@@ -1,8 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function getToken() {
|
||||
return request({
|
||||
url: '/qiniu/upload/token', // 假地址 自行替换
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function searchUser(name) {
|
||||
return request({
|
||||
url: '/vue-element-admin/search/user',
|
||||
method: 'get',
|
||||
params: { name }
|
||||
})
|
||||
}
|
||||
|
||||
export function transactionList(query) {
|
||||
// return request({
|
||||
// url: '/vue-element-admin/transaction/list',
|
||||
// method: 'get',
|
||||
// params: query
|
||||
// })
|
||||
}
|
||||
@@ -1,16 +1,4 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 新增商品
|
||||
* @param pram
|
||||
*/
|
||||
export function productCreateApi(data) {
|
||||
return request({
|
||||
url: '/admin/product/save',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
/**
|
||||
* @description 附件分类 -- 所有分类
|
||||
*/
|
||||
|
||||
@@ -45,12 +45,9 @@
|
||||
row-key="id"
|
||||
:tree-props="{children: 'child', hasChildren: 'hasChildren'}"
|
||||
>
|
||||
<!-- <el-table-column type="selection"-->
|
||||
<!-- width="55">-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column prop="name" label="名称" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.name }}|{{ scope.row.id }}
|
||||
{{ scope.row.name }} | {{ scope.row.id }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-if="!selectModel">
|
||||
|
||||
@@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
|
||||
const xAxisData = []
|
||||
const data = []
|
||||
const data2 = []
|
||||
for (let i = 0; i < 50; i++) {
|
||||
xAxisData.push(i)
|
||||
data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
|
||||
data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
|
||||
}
|
||||
this.chart.setOption({
|
||||
backgroundColor: '#08263a',
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%'
|
||||
},
|
||||
xAxis: [{
|
||||
show: false,
|
||||
data: xAxisData
|
||||
}, {
|
||||
show: false,
|
||||
data: xAxisData
|
||||
}],
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 50,
|
||||
dimension: 0,
|
||||
inRange: {
|
||||
color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#4a657a'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#08263f'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'back',
|
||||
type: 'bar',
|
||||
data: data2,
|
||||
z: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
opacity: 0.4,
|
||||
barBorderRadius: 5,
|
||||
shadowBlur: 3,
|
||||
shadowColor: '#111'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: 'Simulate Shadow',
|
||||
type: 'line',
|
||||
data,
|
||||
z: 2,
|
||||
showSymbol: false,
|
||||
animationDelay: 0,
|
||||
animationEasing: 'linear',
|
||||
animationDuration: 1200,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#08263a',
|
||||
shadowBlur: 50,
|
||||
shadowColor: '#000'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: 'front',
|
||||
type: 'bar',
|
||||
data,
|
||||
xAxisIndex: 1,
|
||||
z: 3,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}],
|
||||
animationEasing: 'elasticOut',
|
||||
animationEasingUpdate: 'elasticOut',
|
||||
animationDelay(idx) {
|
||||
return idx * 20
|
||||
},
|
||||
animationDelayUpdate(idx) {
|
||||
return idx * 20
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,227 +0,0 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
|
||||
this.chart.setOption({
|
||||
backgroundColor: '#394056',
|
||||
title: {
|
||||
top: 20,
|
||||
text: 'Requests',
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 16,
|
||||
color: '#F1F1F3'
|
||||
},
|
||||
left: '1%'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
icon: 'rect',
|
||||
itemWidth: 14,
|
||||
itemHeight: 5,
|
||||
itemGap: 13,
|
||||
data: ['CMCC', 'CTCC', 'CUCC'],
|
||||
right: '4%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#F1F1F3'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '(%)',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#57617B'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'CMCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(137, 189, 27, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(137, 189, 27, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(137,189,27)',
|
||||
borderColor: 'rgba(137,189,2,0.27)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
},
|
||||
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
|
||||
}, {
|
||||
name: 'CTCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 136, 212, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(0, 136, 212, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(0,136,212)',
|
||||
borderColor: 'rgba(0,136,212,0.2)',
|
||||
borderWidth: 12
|
||||
|
||||
}
|
||||
},
|
||||
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
|
||||
}, {
|
||||
name: 'CUCC',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(219, 50, 51, 0.3)'
|
||||
}, {
|
||||
offset: 0.8,
|
||||
color: 'rgba(219, 50, 51, 0)'
|
||||
}], false),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)',
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(219,50,51)',
|
||||
borderColor: 'rgba(219,50,51,0.2)',
|
||||
borderWidth: 12
|
||||
}
|
||||
},
|
||||
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,271 +0,0 @@
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
const xData = (function() {
|
||||
const data = []
|
||||
for (let i = 1; i < 13; i++) {
|
||||
data.push(i + 'month')
|
||||
}
|
||||
return data
|
||||
}())
|
||||
this.chart.setOption({
|
||||
backgroundColor: '#344b58',
|
||||
title: {
|
||||
text: 'statistics',
|
||||
x: '20',
|
||||
top: '20',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '22'
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#90979c',
|
||||
fontSize: '16'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
borderWidth: 0,
|
||||
top: 150,
|
||||
bottom: 95,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
x: '5%',
|
||||
top: '10%',
|
||||
textStyle: {
|
||||
color: '#90979c'
|
||||
},
|
||||
data: ['female', 'male', 'average']
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
|
||||
},
|
||||
data: xData
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#90979c'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
dataZoom: [{
|
||||
show: true,
|
||||
height: 30,
|
||||
xAxisIndex: [
|
||||
0
|
||||
],
|
||||
bottom: 30,
|
||||
start: 10,
|
||||
end: 80,
|
||||
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||||
handleSize: '110%',
|
||||
handleStyle: {
|
||||
color: '#d3dee5'
|
||||
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff' },
|
||||
borderColor: '#90979c'
|
||||
|
||||
}, {
|
||||
type: 'inside',
|
||||
show: true,
|
||||
height: 15,
|
||||
start: 1,
|
||||
end: 35
|
||||
}],
|
||||
series: [{
|
||||
name: 'female',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barMaxWidth: 35,
|
||||
barGap: '10%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255,144,128,1)',
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
position: 'insideTop',
|
||||
formatter(p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
709,
|
||||
1917,
|
||||
2455,
|
||||
2610,
|
||||
1719,
|
||||
1433,
|
||||
1544,
|
||||
3285,
|
||||
5208,
|
||||
3372,
|
||||
2484,
|
||||
4078
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: 'male',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,191,183,1)',
|
||||
barBorderRadius: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter(p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
327,
|
||||
1776,
|
||||
507,
|
||||
1200,
|
||||
800,
|
||||
482,
|
||||
204,
|
||||
1390,
|
||||
1001,
|
||||
951,
|
||||
381,
|
||||
220
|
||||
]
|
||||
}, {
|
||||
name: 'average',
|
||||
type: 'line',
|
||||
stack: 'total',
|
||||
symbolSize: 10,
|
||||
symbol: 'circle',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(252,230,48,1)',
|
||||
barBorderRadius: 0,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter(p) {
|
||||
return p.value > 0 ? p.value : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
1036,
|
||||
3693,
|
||||
2962,
|
||||
3810,
|
||||
2519,
|
||||
1915,
|
||||
1748,
|
||||
4675,
|
||||
6209,
|
||||
4323,
|
||||
2865,
|
||||
4298
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,56 +0,0 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initListener()
|
||||
},
|
||||
activated() {
|
||||
if (!this.$_resizeHandler) {
|
||||
// avoid duplication init
|
||||
this.initListener()
|
||||
}
|
||||
|
||||
// when keep-alive chart activated, auto resize
|
||||
this.resize()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroyListener()
|
||||
},
|
||||
deactivated() {
|
||||
this.destroyListener()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
initListener() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
this.resize()
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
destroyListener() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
this.$_resizeHandler = null
|
||||
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
resize() {
|
||||
const { chart } = this
|
||||
chart && chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,19 +0,0 @@
|
||||
/**
|
||||
* database64文件格式转换为2进制
|
||||
*
|
||||
* @param {[String]} data dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了
|
||||
* @param {[String]} mime [description]
|
||||
* @return {[blob]} [description]
|
||||
*/
|
||||
export default function(data, mime) {
|
||||
data = data.split(',')[1]
|
||||
data = window.atob(data)
|
||||
var ia = new Uint8Array(data.length)
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
ia[i] = data.charCodeAt(i)
|
||||
}
|
||||
// canvas.toDataURL 返回的默认格式就是 image/png
|
||||
return new Blob([ia], {
|
||||
type: mime
|
||||
})
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
/**
|
||||
* 点击波纹效果
|
||||
*
|
||||
* @param {[event]} e [description]
|
||||
* @param {[Object]} arg_opts [description]
|
||||
* @return {[bollean]} [description]
|
||||
*/
|
||||
export default function(e, arg_opts) {
|
||||
var opts = Object.assign({
|
||||
ele: e.target, // 波纹作用元素
|
||||
type: 'hit', // hit点击位置扩散center中心点扩展
|
||||
bgc: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
|
||||
}, arg_opts)
|
||||
var target = opts.ele
|
||||
if (target) {
|
||||
var rect = target.getBoundingClientRect()
|
||||
var ripple = target.querySelector('.e-ripple')
|
||||
if (!ripple) {
|
||||
ripple = document.createElement('span')
|
||||
ripple.className = 'e-ripple'
|
||||
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
|
||||
target.appendChild(ripple)
|
||||
} else {
|
||||
ripple.className = 'e-ripple'
|
||||
}
|
||||
switch (opts.type) {
|
||||
case 'center':
|
||||
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'
|
||||
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'
|
||||
break
|
||||
default:
|
||||
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'
|
||||
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'
|
||||
}
|
||||
ripple.style.backgroundColor = opts.bgc
|
||||
ripple.className = 'e-ripple z-active'
|
||||
return false
|
||||
}
|
||||
}
|
||||
@@ -1,232 +0,0 @@
|
||||
export default {
|
||||
zh: {
|
||||
hint: '点击，或拖动图片至此处',
|
||||
loading: '正在上传……',
|
||||
noSupported: '浏览器不支持该功能，请使用IE10以上或其他现在浏览器！',
|
||||
success: '上传成功',
|
||||
fail: '图片上传失败',
|
||||
preview: '头像预览',
|
||||
btn: {
|
||||
off: '取消',
|
||||
close: '关闭',
|
||||
back: '上一步',
|
||||
save: '保存'
|
||||
},
|
||||
error: {
|
||||
onlyImg: '仅限图片格式',
|
||||
outOfSize: '单文件大小不能超过 ',
|
||||
lowestPx: '图片最低像素为（宽*高）：'
|
||||
}
|
||||
},
|
||||
'zh-tw': {
|
||||
hint: '點擊，或拖動圖片至此處',
|
||||
loading: '正在上傳……',
|
||||
noSupported: '瀏覽器不支持該功能，請使用IE10以上或其他現代瀏覽器！',
|
||||
success: '上傳成功',
|
||||
fail: '圖片上傳失敗',
|
||||
preview: '頭像預覽',
|
||||
btn: {
|
||||
off: '取消',
|
||||
close: '關閉',
|
||||
back: '上一步',
|
||||
save: '保存'
|
||||
},
|
||||
error: {
|
||||
onlyImg: '僅限圖片格式',
|
||||
outOfSize: '單文件大小不能超過 ',
|
||||
lowestPx: '圖片最低像素為（寬*高）：'
|
||||
}
|
||||
},
|
||||
en: {
|
||||
hint: 'Click or drag the file here to upload',
|
||||
loading: 'Uploading…',
|
||||
noSupported: 'Browser is not supported, please use IE10+ or other browsers',
|
||||
success: 'upload success',
|
||||
fail: 'upload failed',
|
||||
preview: 'Preview',
|
||||
btn: {
|
||||
off: 'Cancel',
|
||||
close: 'Close',
|
||||
back: 'Back',
|
||||
save: 'Save'
|
||||
},
|
||||
error: {
|
||||
onlyImg: 'Image only',
|
||||
outOfSize: 'Image exceeds size limit: ',
|
||||
lowestPx: 'Image\'s size is too low. Expected at least: '
|
||||
}
|
||||
},
|
||||
ro: {
|
||||
hint: 'Atinge sau trage fișierul aici',
|
||||
loading: 'Se încarcă',
|
||||
noSupported: 'Browser-ul tău nu suportă acest feature. Te rugăm încearcă cu alt browser.',
|
||||
success: 'S-a încărcat cu succes',
|
||||
fail: 'A apărut o problemă la încărcare',
|
||||
preview: 'Previzualizează',
|
||||
|
||||
btn: {
|
||||
off: 'Anulează',
|
||||
close: 'Închide',
|
||||
back: 'Înapoi',
|
||||
save: 'Salvează'
|
||||
},
|
||||
|
||||
error: {
|
||||
onlyImg: 'Doar imagini',
|
||||
outOfSize: 'Imaginea depășește limita de: ',
|
||||
loewstPx: 'Imaginea este prea mică; Minim: '
|
||||
}
|
||||
},
|
||||
ru: {
|
||||
hint: 'Нажмите, или перетащите файл в это окно',
|
||||
loading: 'Загружаю……',
|
||||
noSupported: 'Ваш браузер не поддерживается, пожалуйста, используйте IE10 + или другие браузеры',
|
||||
success: 'Загрузка выполнена успешно',
|
||||
fail: 'Ошибка загрузки',
|
||||
preview: 'Предпросмотр',
|
||||
btn: {
|
||||
off: 'Отменить',
|
||||
close: 'Закрыть',
|
||||
back: 'Назад',
|
||||
save: 'Сохранить'
|
||||
},
|
||||
error: {
|
||||
onlyImg: 'Только изображения',
|
||||
outOfSize: 'Изображение превышает предельный размер: ',
|
||||
lowestPx: 'Минимальный размер изображения: '
|
||||
}
|
||||
},
|
||||
'pt-br': {
|
||||
hint: 'Clique ou arraste o arquivo aqui para carregar',
|
||||
loading: 'Carregando…',
|
||||
noSupported: 'Browser não suportado, use o IE10+ ou outro browser',
|
||||
success: 'Sucesso ao carregar imagem',
|
||||
fail: 'Falha ao carregar imagem',
|
||||
preview: 'Pré-visualizar',
|
||||
btn: {
|
||||
off: 'Cancelar',
|
||||
close: 'Fechar',
|
||||
back: 'Voltar',
|
||||
save: 'Salvar'
|
||||
},
|
||||
error: {
|
||||
onlyImg: 'Apenas imagens',
|
||||
outOfSize: 'A imagem excede o limite de tamanho: ',
|
||||
lowestPx: 'O tamanho da imagem é muito pequeno. Tamanho mínimo: '
|
||||
}
|
||||
},
|
||||
fr: {
|
||||
hint: 'Cliquez ou glissez le fichier ici.',
|
||||
loading: 'Téléchargement…',
|
||||
noSupported: 'Votre navigateur n\'est pas supporté. Utilisez IE10 + ou un autre navigateur s\'il vous plaît.',
|
||||
success: 'Téléchargement réussit',
|
||||
fail: 'Téléchargement echoué',
|
||||
preview: 'Aperçu',
|
||||
btn: {
|
||||
off: 'Annuler',
|
||||
close: 'Fermer',
|
||||
back: 'Retour',
|
||||
save: 'Enregistrer'
|
||||
},
|
||||
error: {
|
||||
onlyImg: 'Image uniquement',
|
||||
outOfSize: 'L\'image sélectionnée dépasse la taille maximum: ',
|
||||
lowestPx: 'L\'image sélectionnée est trop petite. Dimensions attendues: '
|
||||
}
|
||||
},
|
||||
nl: {
|
||||
hint: 'Klik hier of sleep een afbeelding in dit vlak',
|
||||
loading: 'Uploaden…',
|
||||
noSupported: 'Je browser wordt helaas niet ondersteund. Gebruik IE10+ of een andere browser.',
|
||||
success: 'upload succesvol',
|
||||
fail: 'upload mislukt',
|
||||
preview: 'Voorbeeld',
|
||||
btn: {
|
||||
off: 'Annuleren',
|
||||
close: 'Sluiten',
|
||||
back: 'Terug',
|
||||
save: 'Opslaan'
|
||||
},
|
||||
error: {
|
||||
onlyImg: 'Alleen afbeeldingen',
|
||||
outOfSize: 'De afbeelding is groter dan: ',
|
||||
lowestPx: 'De afbeelding is te klein! Minimale afmetingen: '
|
||||
}
|
||||
},
|
||||
tr: {
|
||||
hint: 'Tıkla veya yüklemek istediğini buraya sürükle',
|
||||
loading: 'Yükleniyor…',
|
||||
noSupported: 'Tarayıcı desteklenmiyor, lütfen IE10+ veya farklı tarayıcı kullanın',
|
||||
success: 'Yükleme başarılı',
|
||||
fail: 'Yüklemede hata oluştu',
|
||||
preview: 'Önizle',
|
||||
btn: {
|
||||
off: 'İptal',
|
||||
close: 'Kapat',
|
||||
back: 'Geri',
|
||||
save: 'Kaydet'
|
||||
},
|
||||
error: {
|
||||
onlyImg: 'Sadece resim',
|
||||
outOfSize: 'Resim yükleme limitini aşıyor: ',
|
||||
lowestPx: 'Resmin boyutu çok küçük. En az olması gereken: '
|
||||
}
|
||||
},
|
||||
'es-MX': {
|
||||
hint: 'Selecciona o arrastra una imagen',
|
||||
loading: 'Subiendo...',
|
||||
noSupported: 'Tu navegador no es soportado, porfavor usa IE10+ u otros navegadores mas recientes',
|
||||
success: 'Subido exitosamente',
|
||||
fail: 'Sucedió un error',
|
||||
preview: 'Vista previa',
|
||||
btn: {
|
||||
off: 'Cancelar',
|
||||
close: 'Cerrar',
|
||||
back: 'Atras',
|
||||
save: 'Guardar'
|
||||
},
|
||||
error: {
|
||||
onlyImg: 'Unicamente imagenes',
|
||||
outOfSize: 'La imagen excede el tamaño maximo:',
|
||||
lowestPx: 'La imagen es demasiado pequeño. Se espera por lo menos:'
|
||||
}
|
||||
},
|
||||
de: {
|
||||
hint: 'Klick hier oder zieh eine Datei hier rein zum Hochladen',
|
||||
loading: 'Hochladen…',
|
||||
noSupported: 'Browser wird nicht unterstützt, bitte verwende IE10+ oder andere Browser',
|
||||
success: 'upload erfolgreich',
|
||||
fail: 'upload fehlgeschlagen',
|
||||
preview: 'Vorschau',
|
||||
btn: {
|
||||
off: 'Abbrechen',
|
||||
close: 'Schließen',
|
||||
back: 'Zurück',
|
||||
save: 'Speichern'
|
||||
},
|
||||
error: {
|
||||
onlyImg: 'Nur Bilder',
|
||||
outOfSize: 'Das Bild ist zu groß: ',
|
||||
lowestPx: 'Das Bild ist zu klein. Mindestens: '
|
||||
}
|
||||
},
|
||||
ja: {
|
||||
hint: 'クリック・ドラッグしてファイルをアップロード',
|
||||
loading: 'アップロード中...',
|
||||
noSupported: 'このブラウザは対応されていません。IE10+かその他の主要ブラウザをお使いください。',
|
||||
success: 'アップロード成功',
|
||||
fail: 'アップロード失敗',
|
||||
preview: 'プレビュー',
|
||||
btn: {
|
||||
off: 'キャンセル',
|
||||
close: '閉じる',
|
||||
back: '戻る',
|
||||
save: '保存'
|
||||
},
|
||||
error: {
|
||||
onlyImg: '画像のみ',
|
||||
outOfSize: '画像サイズが上限を超えています。上限: ',
|
||||
lowestPx: '画像が小さすぎます。最小サイズ: '
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export default {
|
||||
'jpg': 'image/jpeg',
|
||||
'png': 'image/png',
|
||||
'gif': 'image/gif',
|
||||
'svg': 'image/svg+xml',
|
||||
'psd': 'image/photoshop'
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
<template>
|
||||
<div class="board-column">
|
||||
<div class="board-column-header">
|
||||
{{ headerText }}
|
||||
</div>
|
||||
<draggable
|
||||
:list="list"
|
||||
v-bind="$attrs"
|
||||
class="board-column-content"
|
||||
:set-data="setData"
|
||||
>
|
||||
<div v-for="element in list" :key="element.id" class="board-item">
|
||||
{{ element.name }} {{ element.id }}
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
name: 'DragKanbanDemo',
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
props: {
|
||||
headerText: {
|
||||
type: String,
|
||||
default: 'Header'
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setData(dataTransfer) {
|
||||
// to avoid Firefox bug
|
||||
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
|
||||
dataTransfer.setData('Text', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.board-column {
|
||||
min-width: 300px;
|
||||
min-height: 100px;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
border-radius: 3px;
|
||||
|
||||
.board-column-header {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.board-column-content {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
border: 10px solid transparent;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.board-item {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
margin: 5px 0;
|
||||
background-color: #fff;
|
||||
text-align: left;
|
||||
line-height: 54px;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="handleSetSize">
|
||||
<div>
|
||||
<svg-icon class-name="size-icon" icon-class="size" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size===item.value" :command="item.value">
|
||||
{{
|
||||
item.label }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sizeOptions: [
|
||||
{ label: 'Default', value: 'default' },
|
||||
{ label: 'Medium', value: 'medium' },
|
||||
{ label: 'Small', value: 'small' },
|
||||
{ label: 'Mini', value: 'mini' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
size() {
|
||||
return this.$store.getters.size
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetSize(size) {
|
||||
this.$ELEMENT.size = size
|
||||
this.$store.dispatch('app/setSize', size)
|
||||
this.refreshView()
|
||||
this.$message({
|
||||
message: 'Switch Size Success',
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
refreshView() {
|
||||
// In order to make the cached page re-rendered
|
||||
this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
|
||||
|
||||
const { fullPath } = this.$route
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$router.replace({
|
||||
path: '/redirect' + fullPath
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<a :class="className" class="link--mallki" href="#">
|
||||
{{ text }}
|
||||
<span :data-letters="text" />
|
||||
<span :data-letters="text" />
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'vue-element-admin'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Mallki */
|
||||
|
||||
.link--mallki {
|
||||
font-weight: 800;
|
||||
color: #4dd9d5;
|
||||
font-family: 'Dosis', sans-serif;
|
||||
-webkit-transition: color 0.5s 0.25s;
|
||||
transition: color 0.5s 0.25s;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link--mallki:hover {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.link--mallki::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
margin: -3px 0 0 0;
|
||||
background: #3888fa;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
-webkit-transition: -webkit-transform 0.4s;
|
||||
transition: transform 0.4s;
|
||||
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
|
||||
}
|
||||
|
||||
.link--mallki:hover::before {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
.link--mallki span {
|
||||
position: absolute;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.link--mallki span::before {
|
||||
content: attr(data-letters);
|
||||
color: red;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #3888fa;
|
||||
-webkit-transition: -webkit-transform 0.5s;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
.link--mallki span:nth-child(2) {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.link--mallki span:first-child::before {
|
||||
top: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
.link--mallki span:nth-child(2)::before {
|
||||
bottom: 0;
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
.link--mallki:hover span::before {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
||||
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,4 @@
|
||||
<template>
|
||||
<!--<el-dialog-->
|
||||
<!--title="属性规则"-->
|
||||
<!--:visible.sync="dialogVisible"-->
|
||||
<!--width="800px"-->
|
||||
<!--:before-close="handleCloseModel"-->
|
||||
<!-->-->
|
||||
<div>
|
||||
<el-form ref="formDynamic" size="small" :model="formDynamic" v-loading="loading" :rules="rules" class="attrFrom mb20" label-width="100px" @submit.native.prevent>
|
||||
<el-row :gutter="24">
|
||||
@@ -80,6 +74,10 @@ export default {
|
||||
currentRow: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
keyNum: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -110,9 +108,7 @@ export default {
|
||||
},
|
||||
attrsName: '',
|
||||
attrsVal: '',
|
||||
formDynamicNameData: [],
|
||||
isBtn: false,
|
||||
formDynamicName: [],
|
||||
results: [],
|
||||
result: [],
|
||||
ids: 0
|
||||
@@ -124,6 +120,12 @@ export default {
|
||||
this.formDynamic = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
keyNum: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
if( val>0 ) this.clear()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -215,6 +217,9 @@ export default {
|
||||
this.$emit('getList');
|
||||
this.loading = false
|
||||
this.loadingBtn = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
this.loadingBtn = false
|
||||
}):attrCreatApi(data).then(res => {
|
||||
this.$message.success('提交成功');
|
||||
this.$msgbox.close()
|
||||
@@ -222,6 +227,9 @@ export default {
|
||||
this.clear();
|
||||
this.loading = false
|
||||
this.loadingBtn = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
this.loadingBtn = false
|
||||
})
|
||||
}, 1200);
|
||||
} else {
|
||||
|
||||
@@ -12,10 +12,6 @@
|
||||
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
<el-tooltip content="Global Size" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
|
||||
</template>
|
||||
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||
@@ -54,7 +50,6 @@ import Breadcrumb from '@/components/Breadcrumb'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
import ErrorLog from '@/components/ErrorLog'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
import SizeSelect from '@/components/SizeSelect'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
|
||||
export default {
|
||||
@@ -63,7 +58,6 @@ export default {
|
||||
Hamburger,
|
||||
ErrorLog,
|
||||
Screenfull,
|
||||
SizeSelect,
|
||||
Search
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export default function modalAttr(val, callback) {
|
||||
export default function modalAttr(val, callback, keyNum) {
|
||||
const h = this.$createElement
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$msgbox({
|
||||
@@ -9,7 +9,8 @@ export default function modalAttr(val, callback) {
|
||||
message: h('div', { class: 'common-form-upload' }, [
|
||||
h('attrFrom', {
|
||||
props: {
|
||||
currentRow: val
|
||||
currentRow: val,
|
||||
keyNum: keyNum
|
||||
},
|
||||
on: {
|
||||
getList() {
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
/** When your routing table is too long, you can split it into small modules**/
|
||||
|
||||
import Layout from '@/layout'
|
||||
|
||||
const chartsRouter = {
|
||||
path: '/charts',
|
||||
component: Layout,
|
||||
redirect: 'noRedirect',
|
||||
name: 'Charts',
|
||||
meta: {
|
||||
title: 'Charts',
|
||||
icon: 'chart'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'keyboard',
|
||||
component: () => import('@/views/charts/keyboard'),
|
||||
name: 'KeyboardChart',
|
||||
meta: { title: 'Keyboard Chart', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'line',
|
||||
component: () => import('@/views/charts/line'),
|
||||
name: 'LineChart',
|
||||
meta: { title: 'Line Chart', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'mix-chart',
|
||||
component: () => import('@/views/charts/mix-chart'),
|
||||
name: 'MixChart',
|
||||
meta: { title: 'Mix Chart', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export default chartsRouter
|
||||
@@ -67,7 +67,7 @@ service.interceptors.response.use(
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
|
||||
return Promise.reject()
|
||||
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||
// return Promise.reject(new Error(res.message || 'Error'))
|
||||
} else {
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "routineTemplate"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 6000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'pageA',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [79, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageB',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [80, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageC',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [30, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,118 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card-component" style="margin-left:8px;">
|
||||
<div slot="header" class="box-card-header">
|
||||
<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
|
||||
</div>
|
||||
<div style="position:relative;">
|
||||
<pan-thumb :image="avatar" class="panThumb" />
|
||||
<mallki class-name="mallki-text" text="vue-element-admin" />
|
||||
<div style="padding-top:35px;" class="progress-item">
|
||||
<span>Vue</span>
|
||||
<el-progress :percentage="70" />
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>JavaScript</span>
|
||||
<el-progress :percentage="18" />
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>Css</span>
|
||||
<el-progress :percentage="12" />
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>ESLint</span>
|
||||
<el-progress :percentage="100" status="success" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import PanThumb from '@/components/PanThumb'
|
||||
import Mallki from '@/components/TextHoverEffect/Mallki'
|
||||
|
||||
export default {
|
||||
components: { PanThumb, Mallki },
|
||||
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
success: 'success',
|
||||
pending: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statisticsData: {
|
||||
article_count: 1024,
|
||||
pageviews_count: 1024
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'roles'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card-component{
|
||||
.el-card__header {
|
||||
padding: 0px!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.box-card-component {
|
||||
.box-card-header {
|
||||
position: relative;
|
||||
height: 220px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: all 0.2s linear;
|
||||
&:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
filter: contrast(130%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mallki-text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.panThumb {
|
||||
z-index: 100;
|
||||
height: 70px!important;
|
||||
width: 70px!important;
|
||||
position: absolute!important;
|
||||
top: -45px;
|
||||
left: 0px;
|
||||
border: 5px solid #ffffff;
|
||||
background-color: #fff;
|
||||
margin: auto;
|
||||
box-shadow: none!important;
|
||||
/deep/ .pan-info {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
}
|
||||
.progress-item {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
@media only screen and (max-width: 1510px){
|
||||
.mallki-text{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,135 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
},
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
New Visits
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon icon-class="message" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
Messages
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
Purchases
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
||||
<div class="card-panel-icon-wrapper icon-shopping">
|
||||
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
||||
</div>
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
Shoppings
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-group {
|
||||
margin-top: 18px;
|
||||
|
||||
.card-panel-col {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
height: 108px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: rgba(0, 0, 0, .05);
|
||||
|
||||
&:hover {
|
||||
.card-panel-icon-wrapper {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
background: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
background: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
background: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
background: #34bfa3
|
||||
}
|
||||
}
|
||||
|
||||
.icon-people {
|
||||
color: #40c9c6;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
color: #36a3f7;
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
color: #f4516c;
|
||||
}
|
||||
|
||||
.icon-shopping {
|
||||
color: #34bfa3
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: left;
|
||||
margin: 14px 0 0 14px;
|
||||
padding: 16px;
|
||||
transition: all 0.38s ease-out;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-panel-icon {
|
||||
float: left;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.card-panel-description {
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
margin: 26px;
|
||||
margin-left: 0px;
|
||||
|
||||
.card-panel-text {
|
||||
line-height: 18px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-panel-num {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:550px) {
|
||||
.card-panel-description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-panel-icon-wrapper {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
display: block;
|
||||
margin: 14px auto !important;
|
||||
float: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,79 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
radius: '66%',
|
||||
center: ['50%', '42%'],
|
||||
splitNumber: 8,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: 'rgba(127,95,132,.3)',
|
||||
opacity: 1,
|
||||
shadowBlur: 45,
|
||||
shadowColor: 'rgba(0,0,0,.5)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 10000 },
|
||||
{ name: 'Administration', max: 20000 },
|
||||
{ name: 'Information Technology', max: 20000 },
|
||||
{ name: 'Customer Support', max: 20000 },
|
||||
{ name: 'Development', max: 20000 },
|
||||
{ name: 'Marketing', max: 20000 }
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
shadowBlur: 13,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||
name: 'Expected Spending'
|
||||
},
|
||||
{
|
||||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,81 +0,0 @@
|
||||
<template>
|
||||
<li :class="{ completed: todo.done, editing: editing }" class="todo">
|
||||
<div class="view">
|
||||
<input
|
||||
:checked="todo.done"
|
||||
class="toggle"
|
||||
type="checkbox"
|
||||
@change="toggleTodo( todo)"
|
||||
>
|
||||
<label @dblclick="editing = true" v-text="todo.text" />
|
||||
<button class="destroy" @click="deleteTodo( todo )" />
|
||||
</div>
|
||||
<input
|
||||
v-show="editing"
|
||||
v-focus="editing"
|
||||
:value="todo.text"
|
||||
class="edit"
|
||||
@keyup.enter="doneEdit"
|
||||
@keyup.esc="cancelEdit"
|
||||
@blur="doneEdit"
|
||||
>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Todo',
|
||||
directives: {
|
||||
focus(el, { value }, { context }) {
|
||||
if (value) {
|
||||
context.$nextTick(() => {
|
||||
el.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
todo: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editing: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteTodo(todo) {
|
||||
this.$emit('deleteTodo', todo)
|
||||
},
|
||||
editTodo({ todo, value }) {
|
||||
this.$emit('editTodo', { todo, value })
|
||||
},
|
||||
toggleTodo(todo) {
|
||||
this.$emit('toggleTodo', todo)
|
||||
},
|
||||
doneEdit(e) {
|
||||
const value = e.target.value.trim()
|
||||
const { todo } = this
|
||||
if (!value) {
|
||||
this.deleteTodo({
|
||||
todo
|
||||
})
|
||||
} else if (this.editing) {
|
||||
this.editTodo({
|
||||
todo,
|
||||
value
|
||||
})
|
||||
this.editing = false
|
||||
}
|
||||
},
|
||||
cancelEdit(e) {
|
||||
e.target.value = this.todo.text
|
||||
this.editing = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,320 +0,0 @@
|
||||
.todoapp {
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
color: #4d4d4d;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto ;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.todoapp {
|
||||
background: #fff;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
.todoapp h1 {
|
||||
position: absolute;
|
||||
top: -155px;
|
||||
width: 100%;
|
||||
font-size: 100px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
color: rgba(175, 47, 47, 0.15);
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
border: 1px solid #999;
|
||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.new-todo {
|
||||
padding: 10px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
.toggle-all {
|
||||
text-align: center;
|
||||
border: none;
|
||||
/* Mobile Safari */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.toggle-all+label {
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
top: -52px;
|
||||
left: -13px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.toggle-all+label:before {
|
||||
content: '❯';
|
||||
font-size: 22px;
|
||||
color: #e6e6e6;
|
||||
padding: 10px 27px 10px 27px;
|
||||
}
|
||||
.toggle-all:checked+label:before {
|
||||
color: #737373;
|
||||
}
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.todo-list li.editing {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
.todo-list li.editing .edit {
|
||||
display: block;
|
||||
width: 506px;
|
||||
padding: 12px 16px;
|
||||
margin: 0 0 0 43px;
|
||||
}
|
||||
.todo-list li.editing .view {
|
||||
display: none;
|
||||
}
|
||||
.todo-list li .toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
border: none;
|
||||
/* Mobile Safari */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.todo-list li .toggle {
|
||||
opacity: 0;
|
||||
}
|
||||
.todo-list li .toggle+label {
|
||||
/*
|
||||
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||
*/
|
||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
background-size: 36px;
|
||||
}
|
||||
.todo-list li .toggle:checked+label {
|
||||
background-size: 36px;
|
||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
||||
}
|
||||
.todo-list li label {
|
||||
word-break: break-all;
|
||||
padding: 15px 15px 15px 50px;
|
||||
display: block;
|
||||
line-height: 1.0;
|
||||
font-size: 14px;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
.todo-list li.completed label {
|
||||
color: #d9d9d9;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.todo-list li .destroy {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
font-size: 30px;
|
||||
color: #cc9a9a;
|
||||
transition: color 0.2s ease-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
.todo-list li .destroy:hover {
|
||||
color: #af5b5e;
|
||||
}
|
||||
.todo-list li .destroy:after {
|
||||
content: '×';
|
||||
}
|
||||
.todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
.todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
.todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.footer {
|
||||
color: #777;
|
||||
position: relative;
|
||||
padding: 10px 15px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
.footer:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
.todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
list-style: none;
|
||||
}
|
||||
.filters li {
|
||||
display: inline;
|
||||
}
|
||||
.filters li a {
|
||||
color: inherit;
|
||||
font-size: 12px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.filters li a:hover {
|
||||
border-color: rgba(175, 47, 47, 0.1);
|
||||
}
|
||||
.filters li a.selected {
|
||||
border-color: rgba(175, 47, 47, 0.2);
|
||||
}
|
||||
.clear-completed,
|
||||
html .clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.clear-completed:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.info {
|
||||
margin: 65px auto 0;
|
||||
color: #bfbfbf;
|
||||
font-size: 10px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
.info p {
|
||||
line-height: 1;
|
||||
}
|
||||
.info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
.info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
.toggle-all,
|
||||
.todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
.todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 430px) {
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
.filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<section class="todoapp">
|
||||
<!-- header -->
|
||||
<header class="header">
|
||||
<input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
|
||||
</header>
|
||||
<!-- main section -->
|
||||
<section v-show="todos.length" class="main">
|
||||
<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
|
||||
<label for="toggle-all" />
|
||||
<ul class="todo-list">
|
||||
<todo
|
||||
v-for="(todo, index) in filteredTodos"
|
||||
:key="index"
|
||||
:todo="todo"
|
||||
@toggleTodo="toggleTodo"
|
||||
@editTodo="editTodo"
|
||||
@deleteTodo="deleteTodo"
|
||||
/>
|
||||
</ul>
|
||||
</section>
|
||||
<!-- footer -->
|
||||
<footer v-show="todos.length" class="footer">
|
||||
<span class="todo-count">
|
||||
<strong>{{ remaining }}</strong>
|
||||
{{ remaining | pluralize('item') }} left
|
||||
</span>
|
||||
<ul class="filters">
|
||||
<li v-for="(val, key) in filters" :key="key">
|
||||
<a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
|
||||
Clear completed
|
||||
</button> -->
|
||||
</footer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Todo from './Todo.vue'
|
||||
|
||||
const STORAGE_KEY = 'todos'
|
||||
const filters = {
|
||||
all: todos => todos,
|
||||
active: todos => todos.filter(todo => !todo.done),
|
||||
completed: todos => todos.filter(todo => todo.done)
|
||||
}
|
||||
const defalutList = [
|
||||
{ text: 'star this repository', done: false },
|
||||
{ text: 'fork this repository', done: false },
|
||||
{ text: 'follow author', done: false },
|
||||
{ text: 'vue-element-admin', done: true },
|
||||
{ text: 'vue', done: true },
|
||||
{ text: 'element-ui', done: true },
|
||||
{ text: 'axios', done: true },
|
||||
{ text: 'webpack', done: true }
|
||||
]
|
||||
export default {
|
||||
components: { Todo },
|
||||
filters: {
|
||||
pluralize: (n, w) => n === 1 ? w : w + 's',
|
||||
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibility: 'all',
|
||||
filters,
|
||||
// todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
|
||||
todos: defalutList
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
allChecked() {
|
||||
return this.todos.every(todo => todo.done)
|
||||
},
|
||||
filteredTodos() {
|
||||
return filters[this.visibility](this.todos)
|
||||
},
|
||||
remaining() {
|
||||
return this.todos.filter(todo => !todo.done).length
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setLocalStorage() {
|
||||
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
|
||||
},
|
||||
addTodo(e) {
|
||||
const text = e.target.value
|
||||
if (text.trim()) {
|
||||
this.todos.push({
|
||||
text,
|
||||
done: false
|
||||
})
|
||||
this.setLocalStorage()
|
||||
}
|
||||
e.target.value = ''
|
||||
},
|
||||
toggleTodo(val) {
|
||||
val.done = !val.done
|
||||
this.setLocalStorage()
|
||||
},
|
||||
deleteTodo(todo) {
|
||||
this.todos.splice(this.todos.indexOf(todo), 1)
|
||||
this.setLocalStorage()
|
||||
},
|
||||
editTodo({ todo, value }) {
|
||||
todo.text = value
|
||||
this.setLocalStorage()
|
||||
},
|
||||
clearCompleted() {
|
||||
this.todos = this.todos.filter(todo => !todo.done)
|
||||
this.setLocalStorage()
|
||||
},
|
||||
toggleAll({ done }) {
|
||||
this.todos.forEach(todo => {
|
||||
todo.done = done
|
||||
this.setLocalStorage()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<el-table :data="list" style="width: 100%;padding-top: 15px;">
|
||||
<el-table-column label="Order_No" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.order_no | orderNoFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Price" width="195" align="center">
|
||||
<template slot-scope="scope">
|
||||
¥{{ scope.row.price | toThousandFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Status" width="100" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<el-tag :type="row.status | statusFilter">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { transactionList } from '@/api/remote-search'
|
||||
|
||||
export default {
|
||||
filters: {
|
||||
statusFilter(status) {
|
||||
const statusMap = {
|
||||
success: 'success',
|
||||
pending: 'danger'
|
||||
}
|
||||
return statusMap[status]
|
||||
},
|
||||
orderNoFilter(str) {
|
||||
return str.substring(0, 30)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
transactionList().then(response => {
|
||||
this.list = response.data.items.slice(0, 8)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,55 +0,0 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData" />
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="32">
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="8">
|
||||
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
|
||||
<transaction-table />
|
||||
</el-col>
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
|
||||
<todo-list />
|
||||
</el-col>
|
||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
|
||||
<box-card />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
import TransactionTable from './components/TransactionTable'
|
||||
import TodoList from './components/TodoList'
|
||||
import BoxCard from './components/BoxCard'
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart,
|
||||
TransactionTable,
|
||||
TodoList,
|
||||
BoxCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 32px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.github-corner {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
border: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<div class=" clearfix">
|
||||
<pan-thumb :image="avatar" style="float: left">
|
||||
Your roles:
|
||||
<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
|
||||
</pan-thumb>
|
||||
<div class="info-container">
|
||||
<span class="display_name">{{ name }}</span>
|
||||
<span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="emptyGif" class="emptyGif">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import PanThumb from '@/components/PanThumb'
|
||||
|
||||
export default {
|
||||
name: 'DashboardEditor',
|
||||
components: { PanThumb },
|
||||
data() {
|
||||
return {
|
||||
emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'name',
|
||||
'avatar',
|
||||
'roles'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.emptyGif {
|
||||
display: block;
|
||||
width: 45%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dashboard-editor-container {
|
||||
background-color: #e3e3e3;
|
||||
min-height: 100vh;
|
||||
padding: 50px 60px 0px;
|
||||
.pan-info-roles {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
}
|
||||
.info-container {
|
||||
position: relative;
|
||||
margin-left: 190px;
|
||||
height: 150px;
|
||||
line-height: 200px;
|
||||
.display_name {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
color: #212121;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -13,17 +13,13 @@
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import adminDashboard from './admin'
|
||||
import editorDashboard from './editor'
|
||||
|
||||
|
||||
import baseInfo from './components/baseInfo';
|
||||
import gridMenu from './components/gridMenu';
|
||||
import visitChart from './components/visitChart';
|
||||
import userChart from './components/userChart';
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: { baseInfo, gridMenu, visitChart, userChart, adminDashboard, editorDashboard },
|
||||
components: { baseInfo, gridMenu, visitChart, userChart },
|
||||
data() {
|
||||
return {
|
||||
currentRole: 'adminDashboard'
|
||||
|
||||
@@ -97,7 +97,8 @@ export default {
|
||||
total: 0
|
||||
},
|
||||
listLoading: true,
|
||||
selectionList: []
|
||||
selectionList: [],
|
||||
keyNum: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -120,7 +121,7 @@ export default {
|
||||
const _this = this
|
||||
this.$modalAttr(Object.assign({}, this.formDynamic), function() {
|
||||
_this.getList()
|
||||
})
|
||||
}, this.keyNum += 1)
|
||||
},
|
||||
// 列表
|
||||
getList() {
|
||||
|
||||
@@ -1,33 +1,5 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<!--<el-card shadow style="max-width: 500px;" class="mr20">-->
|
||||
<!--<div slot="header" class="clearfix">-->
|
||||
<!--<span>前端路由</span>-->
|
||||
<!--</div>-->
|
||||
<!--<div v-for="item,index in asyncRoutes">-->
|
||||
<!--<template v-if="!item.hidden">-->
|
||||
<!--<span v-if="item.meta">{{ item.meta.title }}{{ item.path }}</span>-->
|
||||
<!--<!– <span>name:{{ item.name }}</span>–>-->
|
||||
<!--<!– <span>path:{{ item.path }}</span>–>-->
|
||||
<!--<template v-if="item.children">-->
|
||||
<!--<div v-for="item1,iindex in item.children" class="ml20">-->
|
||||
<!--<span v-if="item1.meta">{{ item1.meta.title }}</span>-->
|
||||
<!--<!– <span>name:{{ item1.name }}</span>–>-->
|
||||
<!--<!– <span>path:{{ item1.path }}</span>–>-->
|
||||
<!--<span>allPath:{{ item.path }}/{{ item1.path }}</span>-->
|
||||
<!--<template v-if="item1.children">-->
|
||||
<!--<div v-for="item2,index2 in item1.children" class="ml20">-->
|
||||
<!--<span v-if="item2.meta">{{ item2.meta.title }}</span>-->
|
||||
<!--<!– <span>name:{{ item2.name }}</span>–>-->
|
||||
<!--<!– <span>path:{{ item2.path }}</span>–>-->
|
||||
<!--<span>allPath:{{ item.path }}/{{ item1.path }}/{{ item2.path }}</span>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--</template>-->
|
||||
<!--</div>-->
|
||||
<!--</el-card>-->
|
||||
<category-list :biztype="constants.categoryType[4]" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user