前言:该文章作为官方catchadmin的手册补充,支持2021年更新之后的版本操作。
(一)后端准备
1.1 创建模块
1.2 创建表以及模型控制器
(二)前端准备
2.1 创建页面
2.2 前端页面代码
// index.vue文件自定义代码
<template>
<div class="app-container">
<!------------------------- 搜索组件 ------------------------------>
<div class="filter-container">
<el-input v-model="queryParam.title" placeholder="分类名称" clearable class="filter-item form-search-input"/>
<el-button class="filter-item search" icon="el-icon-search" @click="handleSearch">
搜索
</el-button>
<el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
重置
</el-button>
<el-button class="filter-item fr" type="primary" icon="el-icon-plus" @click="handleCreate">
新增
</el-button>
</div>
<!------------------------- 表格组件 ------------------------------>
<el-table
:data="data"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="title" label="标题"/>
<el-table-column prop="sort" label="排序"/>
<el-table-column prop="created_at" label="创建时间"/>
<el-table-column label="操作">
<template slot-scope="cate">
<el-button type="primary" icon="el-icon-plus" @click="beforeHandleCreate(cate.row)"/>
<el-button type="primary" icon="el-icon-edit" @click="handleUpdate(cate.row)"/>
<el-button type="danger" icon="el-icon-delete" @click="handleDelete(cate.row.id)"/>
</template>
</el-table-column>
</el-table>
<!------------------------- 分页组件 ------------------------------>
<el-pagination
background
class="pagination-container"
@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"
/>
<!------------------------- form表单组件 start------------------------------>
<el-dialog :title="title" :visible.sync="formVisible" width="30%" @close="handleCancel">
<el-form :ref="formName" :model="formFieldsData" :rules="rules">
<el-form-item label="分类名称" :label-width="formLabelWidth" prop="title">
<el-input v-model="formFieldsData.title" placeholder="请输入标题" style="width: 92%" autocomplete="off"
clearable
/>
</el-form-item>
<el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
<el-input-number v-model="formFieldsData.sort" :min="1" :max="100000"/>
</el-form-item>
<el-input v-model="formFieldsData.p_id" type="hidden"/>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</div>
</el-dialog>
<!------------------------- form表单组件 end------------------------------>
</div>
</template>
<script>
import formOperate from '@/layout/mixin/formOperate'
export default {
name: 'Index',
mixins: [formOperate],
data() {
return {
// 引用标识---前端添加菜单--**权限标识**保持一致
formName: 'cms',
formLabelWidth: '90px',
// 刷新路由
refreshRoute: true,
// 表单数据
formFieldsData: {
title: '',
sort: 0,
p_id: 0
},
permissions: [],
// 搜索参数
queryParam: { name: '' },
// 后端接口url----前端添加菜单--**菜单Path**保持一致
url: 'cms',
// 验证规则
rules: {
title: [
{ required: true, message: '请输入比搜题名称', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
]
}
}
}
}
</script>
2.3 路由组件注册
// router.js文件
export default {
// 微信管理
cms: () => import('@/views/cms/cms')
}
(三) 菜单添加
3.1 添加一级菜单
3.2 添加子菜单
3.3 添加菜单权限
(四)注意事项
4.2 权限添加
权限添加建议在【+新建】添加,【更新】添加将导致数据出错