day04 |
您所在的位置：网站首页 › 商品三级分类是什么意思 › day04 |
day04
|
目录
今日目标1.商品分类A.新建分支goods_cateB.创建子级路由D.请求分类数据E.使用插件展示数据F.自定义数据列G.完成分页功能H.完成添加分类I.推送代码
2.参数管理A.添加子级组件B.完成组件基本布局C.完成级联选择框D.展示参数E.添加参数F.编辑参数G.删除参数
今日目标
1.完成商品分类 2.完成参数管理 1.商品分类
新建分支goods_cate并推送到码云 git checkout -b goods_cate git push -u origin goods_cate B.创建子级路由创建categories子级路由组件并设置路由规则 import Cate from './components/goods/Cate.vue' path: '/home', component: Home, redirect: '/welcome', children: [ { path: "/welcome", component: Welcome }, { path: "/users", component: Users }, { path: "/rights", component: Rights }, { path: "/roles", component: Roles }, { path: "/categories", component: Cate } ]C. 添加组件基本布局 在Cate.vue组件中添加面包屑导航以及卡片视图中的添加分类按钮 商品分类 首页 商品管理 商品分类 添加分类 D.请求分类数据请求分类数据并将数据保存在data中 export default { data() { return { // 商品分类数据列表 cateList: [], //查询分类数据的条件 queryInfo: { type: 3, pagenum: 1, pagesize: 5 }, //保存总数据条数 total: 0 } }, created() { this.getCateList() }, methods: { async getCateList() { //获取商品分类数据 const { data: res } = await this.$http.get('categories', { params: queryInfo }) if (res.meta.status !== 200) { return this.$message.error('获取商品列表数据失败') } //将数据列表赋值给cateList this.cateList = res.data.result //保存总数据条数 this.total = res.data.total // console.log(res.data); } } } E.使用插件展示数据使用第三方插件vue-table-with-tree-grid展示分类数据 1). 在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装 2). 打开main.js，导入vue-table-with-tree-grid import TreeTable from 'vue-table-with-tree-grid' ..... Vue.config.productionTip = false //全局注册组件 Vue.component('tree-table', TreeTable) 3).使用组件展示分类数据 在数据中添加columns: columns: [ {label:'分类名称',prop:'cat_name'} ]使用这个treetable标签来搭建表格了，可以打开github上相应的文档进行查看属性，但github国内限速的原因(打开速度太慢) 官方地址：https://github.com/MisterTaki/vue-table-with-tree-grid,有详细使用示例。 columns 配置 属性类型默认值说明labelstring" "列标题名称propstring" "对应列内容的属性名 ，与data数组中对象key对应typestring" "列类型，默认文本，可选’template’（自定义模板）templatestring" "列类型为 ‘template’(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称完整代码： 一级 二级 三级 编辑 删除 export default { data () { return { // 商品分类数据 cateList: [], // 查询条件 queryInfo: { type: 3, pagenum: 1, pagesize: 5 }, total: 0, // 为table指定列的定义 columns: [ { label: '分类名称', prop: 'cat_name' }, { label: '是否有效', // 当前列 自定义模板 type: 'template', template: 'isOk' }, { label: '排序', // 当前列 自定义模板 type: 'template', template: 'order' }, { label: '操作', // 当前列 自定义模板 type: 'template', template: 'opt' } ], created () { this.getCateList() }, methods: { // 获取商品分类 async getCateList () { const { data: res } = await this.$http.get('categories', { params: this.queryInfo }) if (res.meta.status !== 200) { return this.$message.error('获取商品分类失败！') } // 给数据列表赋值 this.cateList = res.data.result console.log(this.cateList) // 总数据条数 this.total = res.data.total }, // 删除分类 async removeCate (id) { const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(err => err) if (confirmResult !== 'confirm') { return this.$message.info('已取消删除！') } const { data: res } = await this.$http.delete('categories/' + id) if (res.meta.status !== 200) { return this.$message.error('删除商品分类失败！') } this.$message.success('删除商品分类成功！') this.getCateList() }, // 显示编辑对话框 async showEditCateDialog (id) { const { data: res } = await this.$http.get('categories/' + id) if (res.meta.status !== 200) return this.$message.error('获取分类失败！') this.editCateForm = res.data this.editCateDialogVisible = true }, // 编辑分类名 eidtCate () { this.$refs.editCateFormRef.validate(async valid => { if (!valid) return const { data: res } = await this.$http.put('categories/' + this.editCateForm.cat_id, { cat_name: this.editCateForm.cat_name }) if (res.meta.status !== 200) return this.$message.error('更新分类名失败！') this.$message.success('更新分类名成功！') this.getCateList() this.editCateDialogVisible = false }) } } } F.自定义数据列使用vue-table-with-tree-grid定义模板列并添加自定义列 //先在columns中添加一个列 columns: [ {label:'分类名称',prop:'cat_name'}, //type:'template'(将该列设置为模板列)，template:'isok'(设置该列模板的名称为isok) {label:'是否有效',prop:'',type:'template',template:'isok'}, {label:'排序',prop:'',type:'template',template:'order'}, {label:'操作',prop:'',type:'template',template:'opt'} ] 一级 二级 三级 编辑 删除 G.完成分页功能 //添加对应的事件函数 methods:{ ....... handleSizeChange(newSize){ //当pagesize发生改变时触发 this.queryInfo.pagesize = newSize; this.getCateList(); }, handleCurrentChange(newPage){ //当pagenum发生改变时触发 this.queryInfo.pagenum = newPage; this.getCateList(); } } H.完成添加分类
添加级联菜单显示父级分类 先导入Cascader组件，并注册 然后添加使用级联菜单组件： 添加数据 //配置级联菜单中数据如何展示 cascaderProps:{ value:'cat_id', label:'cat_name', children:'children', expandTrigger:'hover' }, //绑定用户选择的分类值 selectedKeys:[] ..... methods:{ ..... parentCateChange(){ //级联菜单中选择项发生变化时触发 console.log(this.selectedKeys) //如果用户选择了父级分类 if(this.selectedKeys.length > 0){ //则将数组中的最后一项设置为父级分类 this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1] //level也要跟着发生变化 this.addCateForm.cat_level = this.selectedKeys.length return }else{ this.addCateForm.cat_pid = 0 this.addCateForm.cat_level = 0 return } }, addCateDialogClosed(){ //当关闭添加分类对话框时，重置表单 this.$refs.addCateFormRef.resetFields() this.selectedKeys = []; this.addCateForm.cat_pid = 0 this.addCateForm.cat_level = 0 }, addCate() { //点击确定，完成添加分类 console.log(this.addCateForm) this.$refs.addCateFormRef.validate(async valid => { if (!valid) return //发送请求完成添加分类 const { data: res } = await this.$http.post( 'categories', this.addCateForm ) if (res.meta.status !== 201) { return this.$message.error('添加分类失败') } this.$message.success('添加分类成功') this.getCateList() this.addCateDialogVisible = false }) } } I.推送代码制作完添加分类之后，将代码提交到仓库，推送到码云,将goods_cate分支合并到master git add . git commit -m ‘完成商品分类’ git push git checkout master git merge goods_cate 2.参数管理
只允许给三级分类内容设置参数，参数分为动态参数和静态参数属性 A.添加子级组件添加Params.vue子组件，并在router.js中引入该组件并设置路由规则 import Params from './components/goods/Params.vue' ...... path: '/home', component: Home, redirect: '/welcome', children: [ { path: "/welcome", component: Welcome }, { path: "/users", component: Users }, { path: "/rights", component: Rights }, { path: "/roles", component: Roles }, { path: "/categories", component: Cate }, { path: "/params", component: Params } ] B.完成组件基本布局完成Params.vue组件的基本布局 其中警告提示信息使用了el-alert，在element.js引入该组件并注册 分类参数 首页 商品管理 分类参数 选择商品分类： C.完成级联选择框完成商品分类级联选择框 选择商品分类： ...... export default { data() { return { //分类列表 cateList:[], //用户在级联下拉菜单中选中的分类id selectedCateKeys:[], //配置级联菜单中数据如何展示 cateProps: { value: 'cat_id', label: 'cat_name', children: 'children' } } }, created() { this.getCateList() }, methods: { async getCateList(){ //获取所有的商品分类列表 const { data: res } = await this.$http.get('categories') if (res.meta.status !== 200) { return this.$message.error('获取分类数据失败') } //将数据列表赋值给cateList this.cateList = res.data // //保存总数据条数 // this.total = res.data.total // console.log(res.data); }, handleChange(){ //当用户在级联菜单中选择内容改变时触发 console.log(this.selectedCateKeys); } } } D.展示参数展示动态参数数据以及静态属性数据 添加参数 编辑 删除 添加属性 编辑 删除 export default { data() { return { ...... //tab页签激活显示的页签项 activeName: 'many', //用来保存动态参数数据 manyTableData: [], //用来保存静态属性数据 onlyTableData: [] } methods: { ....... async handleChange() { //当用户在级联菜单中选择内容改变时触发 console.log(this.selectedCateKeys) //发送请求，根据用户选择的三级分类和面板获取参数数据 const { data: res } = await this.$http.get( `categories/${this.cateId}/attributes`, { params: { sel: this.activeName } } ) if (res.meta.status !== 200) { return this.$message.error('获取参数列表数据失败') } console.log(res.data) if (this.activeName === 'many') { //获取的是动态参数 this.manyTableData = res.data } else if (this.activeName === 'only') { //获取的是静态属性 this.onlyTableData = res.data } }, handleTabClick() { console.log(this.activeName) this.handleChange() } }, computed: { //添加计算属性用来获取按钮禁用与否 isButtonDisabled() { return this.selectedCateKeys.length !== 3 }, //获取选中的三级分类id cateId() { if (this.selectedCateKeys.length === 3) { return this.selectedCateKeys[this.selectedCateKeys.length - 1] } return null } } E.添加参数完成添加参数或属性 取 消 确 定 export default { data() { return { ....... //控制添加参数.属性对话框的显示或隐藏 addDialogVisible: false, //添加参数的表单数据对象 addForm: { attr_name: '' }, //添加表单验证规则 addFormRules: { attr_name: [{ required: true, message: '请输入名称', trigger: 'blur' }] } } },methods: { ....... addParams() { //当用户点击对话框中的确定时，校验表单 this.$refs.addFormRef.validate(async valid => { //校验不通过，return if (!valid) return //校验通过，发送请求完成添加参数或者属性 const { data: res } = this.$http.post(`categories/${this.cateId}/attributes`, { attr_name: this.addForm.attr_name, attr_sel: this.activeName, attr_vals: "a,b,c" } ) console.log(res) if (res.meta.status !== 201) { return this.$message.error('添加' + this.titleText + '数据失败') } this.$message.success('添加' + this.titleText + '数据成功') this.addDialogVisible = false this.getCateList() }) } } F.编辑参数完成编辑参数或属性 取 消 确 定 export default { data() { return { ....... //控制修改参数.属性对话框的显示或隐藏 editDialogVisible:false, //修改参数.属性对话框中的表单 editForm:{ attr_name:'' }, //修改表单的验证规则 editFormRules:{ attr_name:[ { required: true, message: '请输入名称', trigger: 'blur' } ] } } },methods: { ....... async showEditDialog(attr_id){ //发起请求获取需要修改的那个参数数据 const {data:res} = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`, {params:{ attr_sel:this.activeName }}) if (res.meta.status !== 200) { return this.$message.error('获取参数数据失败') } this.editForm = res.data; //显示修改参数.属性对话框 this.editDialogVisible = true; }, editDialogClosed(){ //当关闭修改参数.属性对话框时 this.$refs.editFormRef.resetFields() }, editParams(){ //验证表单 this.$refs.editFormRef.validate(async valid => { if(!valid) return; //发送请求完成修改 const {data:res} = await this.$http.put(`categories/${this.cateId}/attributes/${this.editForm.attr_id}`, {attr_name:this.editForm.attr_name,attr_sel:this.activeName}) if (res.meta.status !== 200) { return this.$message.error('获取参数数据失败') } this.$message.success('修改' + this.titleText + '数据成功') this.editDialogVisible = false this.handleChange(); }) } } G.删除参数删除参数或属性 给两个删除按钮添加事件 删除 删除 添加对应的事件处理函数 async removeParams(attr_id){ //根据id删除对应的参数或属性 //弹窗提示用户是否要删除 const confirmResult = await this.$confirm( '请问是否要删除该'+this.titleText, '删除提示', { confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning' } ).catch(err => err) //如果用户点击确认，则confirmResult 为'confirm' //如果用户点击取消, 则confirmResult获取的就是catch的错误消息'cancel' if (confirmResult != 'confirm') { return this.$message.info('已经取消删除') } //没有取消就是要删除，发送请求完成删除 const {data:res} = await this.$http.delete(`categories/${this.cateId}/attributes/${attr_id}`) if (res.meta.status !== 200) { return this.$message.error('删除参数数据失败') } this.$message.success('删除' + this.titleText + '数据成功') this.handleChange() } |
【本文地址】
今日新闻 |
推荐新闻 |