# 前端开发

# 非常重要的更新

前端模块也需要单独安装自己的组件 例如 permissions 模块下面就有 router.js

export default {
  users: () => import('@/views/permission/users'),
  roles: () => import('@/views/permission/roles'),
  rules: () => import('@/views/permission/rules'),
  departments: () => import('@/views/permission/departments'),
  jobs: () => import('@/views/permission/jobs')
}

如果是老项目,那么就需要你切割 config/componentsMap.js 到每个模块下的 router.js。 新项目就按照当前模式开发就可以了

# 去除动画效果

找到

@/layout/components/AppMain.vue

这里在 app-main 外部包了一层 keep-alive 主要是为了缓存 router-view的,配合页面的 tabs-view 标签导航使用,如不需要可自行去除。

其中transition 定义了页面之间切换动画,可以根据自己的需求,自行修改转场动画。相关文档。默认提供了fadefade-transform两个转场动画,具体 css 实现见transition.scss。如果需要调整可在AppMain.vue中调整transitionname

# keep-alive

找到

@/layout/components/AppMain.vue

以下代码

<keep-alive :include="cachedViews">
  <router-view :key="key" />
</keep-alive>

去除 includekey 即可。

WARNING

目前缓存的方案对于某些业务是不适合的,比如文章详情页这种 /article/1 /article/2,他们的路由不同但对应的组件却是一样的,所以他们的组件 name 就是一样的,就如前面提到的,keep-aliveinclude只能根据组件名来进行缓存,所以这样就出问题了。目前有两种解决方案:

不使用 keep-aliveinclude 功能 ,直接是用 keep-alive 缓存所有组件,这样子是支持前面所说的业务情况的。当然直接使用 keep-alive 也是有弊端的,他并不能动态的删除缓存,你最多只能帮它设置一个最大缓存实例的个数 limit

# Diglog 拖拽

引入拖拽指令

import elDragDialog from '@/directive/el-drag-dialog'

export default {
  directives: { elDragDialog },
}

Dialog 上使用指令

<el-dialog
  v-el-drag-dialog
/>

# 表格操作(请采用 catch-table 组件,后期会废除)

下面的操作基于 引入 mixins,

import formOperate from '@/layout/mixin/formOperate'

export default {
  mixins: [formOperate]
}

# 参数

  • formName: string | 表名
  • formFieldsData: object | 表单对象
  • queryParam: object | 搜索参数
    • defaultQueryParam: array | 默认搜索参数
  • refreshRoute: bool | 刷新路由(一般用不到)
  • url: string | 请求的操作的 URL

# 新增

  • beforeCreate: function | 新增前
  • handleCreate: function

# 更新

  • beforeUpdate: function | 更新前
  • handleUpdate: function

# 删除

  • beforeDelete: function | 删除前
  • handleDelete: functio

# 批量删除

  • handleSelectMulti: function | 批量选择
  • beforeMultiDelete: function | 批量删除前
  • handleMultiDelete: function

# 提交

  • beforeSubmit: function | 提交前
  • handleSubmit: function

# 取消

  • handleCancel: function
  • afterCancel: function | 取消后

# 搜索

  • handleSearch

# 刷新

  • handleRefresh

# 分页

<el-pagination
  background
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="paginate.current"
  hide-on-single-page
  :page-sizes="paginate.sizes"
  :page-size="paginate.limit"
  :layout="paginate.layout"
  :total="paginate.total"/>