# 前端开发

# 非常重要的更新

前端模块也需要单独安装自己的组件例如 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 定义了页面之间切换动画，可以根据自己的需求，自行修改转场动画。相关文档。默认提供了fade和fade-transform两个转场动画，具体 css 实现见transition.scss。如果需要调整可在AppMain.vue中调整transition 的 name。

# keep-alive

找到

@/layout/components/AppMain.vue

以下代码

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

去除 include 和 key 即可。

WARNING

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

不使用 keep-alive 的 include 功能，直接是用 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"/>

表格组件