element-ui-flow

介绍

利用element ui 的框架进行一个搭建后端项目：https://gitee.com/yxs2615/springboot-apply

动态加载菜单项 + 自定义设置 + 国际化 + 可配置项 + 百度地图可视化 + echart图表 + tinymce富文本编辑器

Doc

项目目录介绍： 2
项目目录介绍：

  |-- main.js -------- 项目入口文件
  |-- setting.js -------- 全局设置
  |-- pages -------- 页面
  |-- lang -------- 国际化
  |-- router -------- 动态路由
  |-- store -------- 全局参数
  |-- api -------- 服务接口
  |-- assets -------- 静态文件
  |-- components -------- 组件
  |-- utils -------- 工具类

2.1. main.js :

2.1.1.引入element-ui

  import Element from 'element-ui'

  import 'element-ui/lib/theme-chalk/index.css'

  不使用国际化

  Vue.use(ElementUI)

  使用国际化

  import i18n from './lang/index'

  Vue.use(Element, {

        i18n: (key, value) => i18n.t(key, value)

  })

2.1.2.引入百度地图全局组件 vue-baidu-map

  import BaiduMap from 'vue-baidu-map'

  Vue.use(BaiduMap, {

        // ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apiconsole/key */

        ak: '84fENVlS0UYtSNQD4e3C9WKy7tDuec8H'

  })

2.1.3.引入动态路由、全局参数、权限

  import router from './router'

  import store from './store'

  import FPermission from '@/components/f-permission'

  import checkPermission from '@/utils/permission'

  Vue.prototype.checkPermission = checkPermission

  Vue.use(FPermission)

2.2. setting.js :

2.3. pages:

2.4. lang:

参照项目lang/index.js文件中的配置和其他配置一致，这里略...

2.5. router:

说明： constantRouterMap 这个为默认初始化的路由地址，如404、error、login等；主要是配置 router.beforeEach 中的动态路由配置，调用 **loadMenus（）**方法获取后台的菜单数据，返回的数据利用 filterAsyncRouter（） 方法处理成想要的格式，返回结果 router.addRoutes 添加到路由中，这是必须向

2.6. store:

说明：全局参数设置和获取store,

输入图片说明
state： Vue 组件中展示状态

Getter：Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Action：在组件中使用 this.$store.dispatch(‘xxx’) 分发 action

Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)

Module：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

2.6. api:

调取后台的服务接口，get,post,put,delete等接口服务，统一管理，

2.7. assets:

静态文件的存储路径，图片，css,js等都可。

2.8. components:(结合element-ui总结的)

2.8.1 f-box: 方块元素

输入图片说明

/**
说明：
   span: 占据12分之几等分,默认6；
   bgColor: 背景色，默认‘#FFFFFF’；
   height: 高度，默认100；
   icon: 图标，默认‘el-icon-s-promotion’；
   iconColor: 图标颜色，默认‘rgb(64, 158, 255)’；
   title: 标题，默认‘’；
   count: 数值，默认0；
   prefix: 数值前缀，默认‘’；
   suffix: 数值后缀，默认‘’；
*/
/**引入*/
import FBOX from '@/components/f-box/f-box'
/**使用*/
 <FBOX :span="6" :height="100" title="价格"  :count="10000" prefix="$"  icon="el-icon-camera-solid" iconColor="red"/>

2.8.2 f-breadcrumb: 面包屑导航

输入图片说明

在本项目中自动和动态路由绑定

2.8.3 f-echarts: echart图表

2.8.3.1 f-bar: 柱形图

输入图片说明

/**
说明:
   height: 高度，默认200;
   title: 标题，默认‘’;
   subText: 副标题，默认‘’;
   yName: y坐标名称，默认‘’;
   chartData：数据 必填项;
   max:最大值 （true/fasle）默认false;
   mix:最小值 （true/fasle）默认false;
   average：平均值（true/fasle）默认false;
   showTitle：显示标题和副标题（true/fasle）默认true;
   showLegend：显示图例（true/fasle）默认true;
   stack：堆叠（true/fasle）默认false;
   barGap：轴间距（true/fasle）默认false;
*/
/**引入*/
import FBar from '@/components/f-echarts/f-bar'
/**使用*/
  <FBar :height="300" title="柱形图" subText="副标题" :chartData="LineData" :max="true" :min="true" :average="true" :showLegend="true" :stack="false"/>
/**
 LineData: [
        { group: '类型1', name: '1月', value: 10 },
        { group: '类型2', name: '1月', value: 15 },
        { group: '类型1', name: '2月', value: 25 },
        { group: '类型2', name: '2月', value: 12 },
        { group: '类型1', name: '3月', value: 22 },
        { group: '类型2', name: '3月', value: 12 }
       ],
*/

2.8.3.2 f-line: 折现图

输入图片说明

/**
说明:
   height: 高度，默认200;
   title: 标题，默认‘’;
   subText: 副标题，默认‘’;
   yName: y坐标名称，默认‘’;
   chartData：数据 必填项;
   max:最大值 （true/fasle）默认false;
   mix:最小值 （true/fasle）默认false;
   average：平均值（true/fasle）默认false;
   area：填充（true/fasle）默认false;
   showTitle：显示标题和副标题（true/fasle）默认true;
   showLegend：显示图例（true/fasle）默认true;
*/
/**引入*/
import FLine from '@/components/f-echarts/f-line'
/**使用*/
   <FLine :height="300" title="折线图" subText="副标题" :chartData="LineData" :max="true" :min="true" :average="true" :area="false" :showTitle="false"/>
/**
 LineData: [
        { group: '类型1', name: '1月', value: 10 },
        { group: '类型2', name: '1月', value: 15 },
        { group: '类型1', name: '2月', value: 25 },
        { group: '类型2', name: '2月', value: 12 },
        { group: '类型1', name: '3月', value: 22 },
        { group: '类型2', name: '3月', value: 12 }
       ],
*/

2.8.3.3 f-pei: 饼图

输入图片说明

/**
说明:
   height: 高度，默认200;
   title: 标题，默认‘’;
   subText: 副标题，默认‘’;
   yName: y坐标名称，默认‘’;
   chartData：数据 必填项;
   roseType:是否锥形（true/fasle）默认false;
   radius：空心圆 （true/fasle）默认false;
   showTitle：显示标题和副标题（true/fasle）默认true;
   showLegend：显示图例（true/fasle）默认true;
*/
/**引入*/
import FPie from '@/components/f-echarts/f-pie'
/**使用*/
  <FPie :height="300" title="饼图" subText="副标题" :chartData="peiData" :roseType="true" :radius="true" :showLegend="false"/>
/**
peiData: [    
        { name: '1月', value: 15 },
        { name: '2月', value: 25 },
        { name: '3月', value: 22 },
        { name: '4月', value: 22 },
        { name: '5月', value: 22 },
        { name: '6月', value: 22 },
        { name: '7月', value: 22 },
        { name: '8月', value: 22 },
        { name: '9月', value: 22 }
      ]
*/

2.8.3.4 f-radar: 雷达图

输入图片说明

/**
说明:
   height: 高度，默认200;
   title: 标题，默认‘’;
   subText: 副标题，默认‘’;
   yName: y坐标名称，默认‘’;
   chartData：数据 必填项
   area:填充（true/fasle）默认true;
   label：文字 （true/fasle）默认true;
   showTitle：显示标题和副标题（true/fasle）默认true;
   showLegend：显示图例（true/fasle）默认true;
*/
/**引入*/
import FRadar from '@/components/f-echarts/f-radar'
/**使用*/
  <FRadar :height="300" title="雷达图" subText="副标题" :chartData="LineData" :showLegend="false" />

/**
 LineData: [
        { group: '类型1', name: '1月', value: 10 },
        { group: '类型2', name: '1月', value: 15 },
        { group: '类型1', name: '2月', value: 25 },
        { group: '类型2', name: '2月', value: 12 },
        { group: '类型1', name: '3月', value: 22 },
        { group: '类型2', name: '3月', value: 12 }
       ],
*/

2.8.4 f-iconSelect: element-ui下拉选择图标

输入图片说明

/**
说明:
   selected: 点击图标后的执行操作;
*/
/**引入*/
  import FIconSelect from '@/components/f-iconSelect/f-iconSelect'
/**使用*/
   <FIconSelect @selected="selectedIcon"></FIconSelect>
/**
    methods: {
        selectedIcon (iconName) {
            this.form.icon = iconName
          }
    }
*/

2.8.5 f-crud: 增删改查

详情查看pages/system/menu页面

输入图片说明

/**
   说明: 
        rrOperation ： 查询组件；
        crudOperation ： 头部增删改导出组件；
        udOperation ： 行内修改和删除
        permission： {
          add: ['admin', 'putong'], // 添加按钮的权限
          edit: ['admin', 'putong'],// 修改按钮的权限
          del: ['admin', 'putong']// 删除按钮的权限
            
        }；
        this.crud.optShow = {
              add: true, // 添加按钮显示
              edit: true,// 修改按钮显示
              del: true,// 删除按钮显示
              download: true// 下载按钮显示
            }
        crud.props.searchToggle 是否显示search模块；
        cruds： {//初始化参数
            tree: // 是否是树形表格；
            url ：// 后台请求数据地址
            crudMethod： // 增删改查后台地址
            query： //查询初始化参数
        }
*/
/**引用*/
<template>
  <div>
    <div v-if="crud.props.searchToggle">
      <el-input
        type="text"
        placeholder="输入菜单名称搜索"
        style="width: 200px;"
        size="small"
        class="filter-item"
        v-model="query.menuName"
      />
      <rrOperation :crud="crud" />
    </div>
    <crudOperation :permission="permission" show="" />
    <el-table ref="table" size="small" lazy :load="getMenus" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" v-loading="crud.loading" :data="crud.data" row-key="id" @select="crud.selectChange" @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="menuName" label="名称"></el-table-column>
      <el-table-column prop="type" label="类型">
        <template  slot-scope="scope">
          <el-tag v-if="scope.row.type === 'catalog'" type="info" size="small"><i class="el-icon-folder"></i>目录</el-tag>
          <el-tag v-if="scope.row.type === 'menu'" size="small"><i class="el-icon-menu"></i>菜单</el-tag>
          <el-tag v-if="scope.row.type === 'button'" type="success" size="small"><i class="el-icon-cpu"></i>按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column  prop="sort" label="排序"></el-table-column>
      <el-table-column  prop="permission" label="权限标识"></el-table-column>
      <el-table-column  prop="icon" label="图标">
        <template slot-scope="scope">
          <el-tag>
            <i :class="scope.row.icon"></i>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column  prop="path" label="地址" width="200px"></el-table-column>
      <el-table-column  prop="isValid" label="有效性">
        <template slot-scope="scope">
          <el-switch
            :disabled="!checkPermission(['putong'])"
            v-model="scope.row.isValid"
            active-value="Y"
            inactive-value="N"
            @change="changeIsValid(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column  prop="sysCreateTime" label="创建时间" width="200px">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ parseTime(scope.row.sysCreateTime,'{y}年{m}月{d}日 {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column  prop="sysCreateUserName" label="创建人"></el-table-column>
      <el-table-column
        label="操作"
        width="125"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <udOperation :permission="permission" :data="scope.row"/>
        </template>
      </el-table-column>
    </el-table>

    <crudOption></crudOption>

  </div>
</template>
<script>
import { switchCallback } from '@/utils/index'
import crudAPI from '@/api/system/menu'
import CRUD, {presenter, header, crud} from '@/components/f-crud/f-crud'
import { rrOperation, crudOperation, udOperation } from '@/components/f-crud'
import crudOption from './option/crud-option'

export default {
  mixins: [presenter(), header(), crud()],
  components: {crudOperation, rrOperation, udOperation, crudOption},
  cruds () {
    return CRUD({title: '菜单', tree: true, url: crudAPI.list, crudMethod: { ...crudAPI }, query: {'parentMenuId': '0'}})
  },
  data () {
    return {
      permission: {
        add: ['admin', 'putong'],
        edit: ['admin', 'putong'],
        del: ['admin', 'putong']
      }
    }
  },
  created () {
    // 需要显示的头部按钮
    this.crud.optShow = {
      add: true,
      edit: true,
      del: true,
      download: true
    }
  },
  methods: {
    changeIsValid (data) {
      this.$confirm('此操作将用户有效性状态修改, 是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        crudAPI.edit(data).then(res => {
          if (res.status === 200) {
            this.crud.editSuccessNotify('用户有效性状态修改成功')
          } else {
            data.isValid = switchCallback(data.isValid)
            this.crud.editErrorNotify('用户有效性状态修改失败')
          }
        }).catch(() => {
          data.isValid = switchCallback(data.isValid)
        })
      }).catch(() => {
        data.isValid = switchCallback(data.isValid)
      })
    },
    getMenus (tree, treeNode, resolve) {
      const params = {
        params: JSON.stringify({
          parentMenuId: tree.menuId
        })
      }
      setTimeout(() => {
        crudAPI.getMenus(params).then(res => {
          console.log(res)
          resolve(res.data)
        })
      }, 100)
    }
  }
}
</script>
<style>
</style>

2.9. utils:

auth.js ------ {getToken,setToken,removeToken} 设置token操作
business.js ------ {MessageUtils} 提示操作
index.js ------ 时间等函数
permission.js ------ {checkPermission}检查权限操作，常用于表格行内元素
request.js ------ axios封装，对返回结果处理
validate.js ------ 正则表达式验证

希望可以帮助到你 😁 加油 👊

闫先生/element-ui-flow

element-ui-flow

介绍

Doc

简介

发行版

贡献者

近期动态

闫先生/element-ui-flow .gitee-modal { width: 500px !important; }

element-ui-flow

介绍

Doc

简介

发行版

贡献者

近期动态

搜索帮助

闫先生/element-ui-flow