2017做淘宝客网站还有吗,Wordpress主题里的幻灯片怎么设置,外贸网站策划,重庆百度关键词优化软件提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 1.组织架构-编辑部门-弹出层获取数据2.组织架构-编辑部门-编辑表单校验3.组织架构-编辑部门-确认取消4.组织架构-删除部门5.角色管理-搭建页面结构6.角色管理-获取数… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 1.组织架构-编辑部门-弹出层获取数据2.组织架构-编辑部门-编辑表单校验3.组织架构-编辑部门-确认取消4.组织架构-删除部门5.角色管理-搭建页面结构6.角色管理-获取数据7.角色管理-表格自定义结构8.角色管理-分页功能9.角色管理-新增10.角色管理-表单数据校验11.角色管理-新增角色-确定取消 1.组织架构-编辑部门-弹出层获取数据
编辑部门和新增部门会共用一个组件也就是add-dept组件要支持两种场景-新增场景-编辑场景 获取部门详情的API-代码位置(src/api/department.js)
//获取部门详情
export function getDepartmentDetail(id){return request({url:/company/department/${id}})
}点击编辑时弹出层通过ref获取组件实例调用获取详情的方法-代码位置(src/views/department/index.vue) addDept refaddDept :current-node-idcurrentNodeId :show-dialog.syncshowDialog updateDepartmentgetDepartment /调用子组件方法-代码位置(src/views/department/index.vue) //操作部门方法operateDept(type,id){// this.$message(click type)if(type add){//添加子部门this.showDialog true;//显式弹窗this.currentNodeId id}else if(type edit){//编辑部门this.showDialog true;this.currentNodeId id;//记录id 用它获取数据//更新props-异步动作//直接调用了子组件的方法同步的方法//要在子组件获取数据 父组件调用子组件的方法来获取数据this.$nextTick((){this.$refs.addDept.getDepartmentDetail();//this.$refs.addDept等同于子组件的this})}}子组件提供方法-位置(src/views/department/components/add-dept.vue) async getDepartmentDetail(){this.formData await getDepartmentDetail(this.currentNodeId)}2.组织架构-编辑部门-编辑表单校验 编辑部门表单校验和新增部门表单校验的区别就是编辑的数据已经在数据库存在了必然是存在重复的 编辑场景下排除自身检查部门编码-代码位置(src/views/department/components/add-dept.vue) //部门编码code:[{required:true,message:部门编码不能为空,trigger:blur},{min:2,max:10,message:部门编码的长度为2-10个字符,trigger:blur,//自定义校验模式validator:async(rule,value,callback){//value是输入的编码let result await getDepartment();console.log(result)//判断是否是编辑模式if(this.formData.id){//编辑场景result result.filter(itemitem.id ! this.formData.id)console.log(result)}//result数组中是否存在value值if(result.some(itemitem.code value)){callback(new Error(部门中已经有该编码了))}else{callback()}}}],部门名称-位置(src/views/department/components/add-dept.vue) //部门名称name:[{required:true,message:部门名称不能为空,trigger:blur,validator:async(rule,value,callback){//value就是输入的名称let result await getDepartment();if(this.formData.id){//编辑 排除自身 id不相等说明不是自身result result.filter(item{return item.id ! this.formData.id})}//result 数组中是否存在value值if(result.some(itemitem.name value)){callback(new Error(部门中已经有该名称了))}else{callback()}}}]3.组织架构-编辑部门-确认取消 更新部门的API-代码位置(src/api/department.js)
//更新部门
export function updateDepartment(data){return request({method:put,url:/company/department/${data.id},data})
}确认时区分当前是编辑还是新增-代码位置(src/views/department/components/add-dept.vue) btnOk(){this.$refs.addDept.validate(async isOK{if(isOK){let msg 新增//通过formData中的idif(this.formData.id){//编辑msg 更新await updateDepartment(this.formData)}else{//新增await addDepartment({...this.formData,pid:this.currentNodeId})}//通知父组件更新this.$emit(updateDepartment)//提示消息this.$message.success(${msg}部门成功)this.close()}})},使用计算属性生成当前显示的弹层标题-代码位置(src/views/department/components/add-dept.vue)
el-dialog :titleshowTitle :visibleshowDialog closeclosecomputed:{
showTitle(){return this.formData.id ?编辑部门:新增部门}
}4.组织架构-删除部门 删除部门的API-代码位置(src/api/department.js)
//删除部门
export function delDepartment(id){return request({method:delete,url:/company/department/${id}})
}在删除场景下调用API删除-代码位置(src/views/department/index.vue)
operateDept(type,id){if(type add){//添加子部门this.showDialog true;//显式弹窗this.currentNodeId id;}else if(type edit){//编辑部门场景this.showDialog true;this.currentNodeId id;//记录id this.$nextTick((){this.$refs.addDept.getDepartmentDetail();//this.$refs.addDept等同于子组件的this }) }else{//删除部门this.$confirm(确认要删除该部门吗?).then(async(){await delDepartment(id)//提示信息this.$message.success(删除部门成功)this.getDepartment()})}
}5.角色管理-搭建页面结构 角色管理对应的路由-位置(src/router/modules/role.js)
import layout from /layout
export default{path:/role,component:layout,children:[{path:,name:role,component:()import(/views/role),meta:{title:角色,icon:tree}}]
}根路由文件(src/router/index.js)
import roleRouter from /router/modules/role
export const constantRoutes [departmentRouter,roleRouter,
]搭建角色管理的页面结构-代码位置(src/views/role/index.vue)
templatediv classcontainerdiv classapp-container!-- 角色管理内容 --div classrole-operateel-button sizemini typeprimary添加角色/el-button/div!-- 放置table组件 --el-table!-- 列 --el-table-column aligncenter width200 label角色 /el-table-column aligncenter width200 label启用 /el-table-column aligncenter label描述 /el-table-column aligncenter label操作 //el-table!-- 放置分页组件 --el-row typeflex styleheight:60px; alignmiddle justifyend!-- 放置分页组件 --el-pagination layoutprev,pager,next //el-row/div/div
/template
style scoped.role-operate{padding:10px;}
/style6.角色管理-获取数据 封装获取角色API-代码位置(src/api/role.js)
import request from /utils/request
export function getRoleList(params){return request({url:/sys/role,params//查询参数})
}在初始化时调用API-赋值给数据-代码位置(src/views/role/index.vue)
import {getRoleList} from /api/role
data() {return {list:[]}},components: {},created(){this.getRoleList()},methods:{async getRoleList(){const {rows} await getRoleList()this.list rows;//赋值}}绑定表格属性-代码位置(src/views/role/index.vue) !-- 放置table组件 --el-table :datalist!-- 列 --el-table-column propname aligncenter width200 label角色 /el-table-column propstate aligncenter width200 label启用 /el-table-column propdescription aligncenter label描述 /el-table-column aligncenter label操作 //el-table7.角色管理-表格自定义结构 自定义启用列和操作列的结构-代码位置(src/views/role/index.vue) el-table-column propstate aligncenter width200 label启用 template v-slot{row}span{{ row.state 1 ?已启用:row.state 0 ?未启用:无 }}/span/template/el-table-column自定义操作列结构-代码位置(src/views/role/index.vue) el-table-column aligncenter label操作 !-- 操作按钮 --templateel-button sizemini typetext分配权限/el-buttonel-button sizemini typetext编辑/el-buttonel-button sizemini typetext删除/el-button/template/el-table-column8.角色管理-分页功能
分页展示页面切换分页获取数据分页组件属性当前页码每页条数总数 定义分页信息-代码位置(src/views/role/index.vue) pageParams:{page:1,//第几页pagesize:5,//每页多少条total:0}绑定分页信息-(src/views/role/index.vue) el-pagination :page-sizepageParams.pagesize :current-pagepageParams.page :totalpageParams.total current-changechangePage layoutprev,pager,next //el-row初始化时将总数赋值-(src/views/role/index.vue)
async getRoleList(){const {rows,total} await getRoleList(this.pageParams);this.list rows;//赋值this.pageParams.total total
}切换分页时获取对应页码的数据-代码位置(src/views/role/index.vue)
//切换分页时请求新的数据
changePage(newPage){this.pageParams.page newPage;this.getRoleList()
}9.角色管理-新增 放置弹层组件-代码位置(src/views/role/index.vue)
el-dialog width500px title新增角色 :visible.syncshowDialog!-- 表单 --el-form label-width120pxel-form-item label角色名称el-input stylewidth:300px sizemini/el-input/el-form-itemel-form-item label启用el-switch sizemini/el-switch/el-form-itemel-form-item label角色描述el-input typetextarea :rows3 stylewidth:300px; sizemini/el-input/el-form-itemel-form-itemel-row typeflex justifycenterel-col :span12el-button typeprimary sizemini确定/el-buttonel-button sizemini取消/el-button/el-col/el-row/el-form-item/el-form/el-dialog变量控制弹窗
showDialog:false10.角色管理-表单数据校验 声明数据和规则(src/views/role/index.vue)
export default{data(){roleForm:{name:,description:,state:0 //默认未启用 1 关闭0},rules:{name:[{required:true,message:角色名称不能为空,trigger:blur } ],description:[{required:true,message:角色描述不能为空,trigger:blur } ]}}
}绑定表单校验和数据 el-form refroleForm :modelroleForm :rulesrules label-width120pxel-form-item propname label角色名称el-input v-modelroleForm.name stylewidth:300px sizemini/el-input/el-form-itemel-form-item prop label启用!-- 如果不需要校验 就不需要写prop属性 --el-switch v-modelroleForm.state :active-value1 :inactive-value0 sizemini/el-switch/el-form-itemel-form-item propdescription label角色描述el-input typetextarea v-modelroleForm.description :rows3 stylewidth:300px; sizemini/el-input/el-form-itemel-form-itemel-row typeflex justifycenterel-col :span12el-button typeprimary sizemini确定/el-buttonel-button sizemini取消/el-button/el-col/el-row/el-form-item/el-form11.角色管理-新增角色-确定取消 新增角色的api-(src/api/role.js)
export function addRole{data}{return request({url:/sys/role,method:post,data })
}确定和取消
btnOK(){this.$refs.roleForm.validate(async valid{if(valid){await addRole(this.roleForm) this.$message.success(新增角色成功)this.getRoleList()this.btnCancel()}})
},
btnCancel(){this.$refs.roleForm.resetFields();this.showDialog false;
}
