电商后台管理4-商品列表及添加商品(list.vue和add.vue)

1、商品列表页面
商品列表的页面如图：这个页面其实比较简单，面包屑导航、搜索框、添加商品按钮，以及下面的表格，代码如图：

基本比较容易，就一个过滤器需要实现，本身的创建时间是以毫秒显示出来，这里需要格式化为年月日时分秒的格式。

首先在main.js中注册了全局过滤器（以下出自vue.js官网）

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{{ message | capitalize }}

< div v-bind:id=“rawId | formatId”>

你可以在一个组件的选项中定义本地的过滤器

filters: {
capitalize: function (value) {
if (!value) return ‘’
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter(‘capitalize’, function (value) { if (!value) return ‘’
value = value.toString() return value.charAt(0).toUpperCase() +
value.slice(1) })

new Vue({ // … })

也就是说在对文本格式化式，定义一个过滤器，可以对文本实现过滤的效果。
这里我们考虑定义一个全局的格式化时间的过滤器，以便多次用到。以下为我的代码：
dataFormat为过滤器的名字，originVal为传进的值，首先需要将毫秒数据转换成Data型，获取月份时记得加1，因为它本身获取的是0-11，月份只比本身的少1，要了解es2017的padStart的可以看这里
就是说要将字符串不足2位的在前面补0，但是由于该函数只接收字符串，所以+‘’将Number转换成String才可以。

Vue.filter('dataFormat', function(originVal) {const dt = new Date(originVal)const y = dt.getFullYear()const m = (dt.getMonth() + 1 + '').padStart(2, '0')const d = (dt.getDay() + '').padStart(2, '0')const hh = (dt.getHours() + '').padStart(2, '0')const mm = (dt.getMinutes() + '').padStart(2, '0')const ss = (dt.getSeconds() + '').padStart(2, '0')return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

然后添加到需要格式化的数据身上即可

2、点击添加商品的按钮，出现下面的添加页面

通过编程式导航可跳转到商品添加页面，首先为该按钮添加事件。

<el-button type="primary" @click="goAddpage">添加商品</el-button>

然后利用vue-router的push操作

      //通过编程式导航跳转到商品添加页面goAddpage(){this.$router.push('/goods/add')}

此时，需要在router.js中配置该路由指向的组件，这里是跳转到/good/add
3、在可以跳转之后，商品添加页面的创建
渲染2添加页面的结构，如下，分别包括步骤栏组件，tab栏区域

首先需要注册组件el-steps和el-step（含状态步骤条
每一步骤显示出该步骤的状态。）

      <el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center><el-step title="基本信息"></el-step><el-step title="商品参数"></el-step><el-step title="商品属性"></el-step><el-step title="商品图片"></el-step><el-step title="商品内容"></el-step><el-step title="完成"></el-step></el-steps>

active表示设置当前激活步骤，其数据类型为number，当激活对应序号时，出现激活步骤。

tab栏怎么渲染出来呢？这里，将tab的标签labels在左边显示，可以通过 tab-position 设置标签的位置,对不同标签复制不同名字。
接下来，需要首先步骤条和tab栏的数据联动效果，可可看到，tabs栏标签通过v-model来指定激活的面板(绑定值，选中选项卡的 name),与每个tab的name绑定，那么如果，我们将步骤栏的索引值与tab的值设为同一组[0,1,2,3,4]，即设置公用的一个 activeIndex实现数据联动效果,但是这里绑定的值是字符串类型，而步骤栏确实数值型，这怎么办呢？我们考虑到将activeIndex本身设置为0，在步骤栏的:active上-0，实现隐式转换。
为什么在外层加了个e–form表单呢，刚开始没想明白，后来听老师说，我们这里将页面拆分成了5个不同的pane面板（el-tab-pane），每个tab上只维护当前数据的部分数据，所以用一个form表单将其包裹。在element ui中粘贴带有表单验证的el-form。

<el-form :model="addForm" status-icon :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top"><el-tabs :tab-position="'left'" v-model="activeIndex" :before-leave="beforeTabLeave"@tab-click="tabClicked"><el-tab-pane label="基本信息" name="0"><el-form-item label="商品名称" prop="goods_name"><el-input v-model="addForm.goods_name"></el-input></el-form-item><el-form-item label="商品价格" prop="goods_price"><el-input v-model="addForm.goods_price" type="number"></el-input></el-form-item><el-form-item label="商品重量" prop="goods_weight"><el-input v-model="addForm.goods_weight"></el-input></el-form-item><el-form-item label="商品数量" prop="goods_number" type="number"><el-input v-model="addForm.goods_number"></el-input></el-form-item><el-form-item label="商品分类" prop="goods_cat">   <el-cascader v-model="addForm.goods_cat" :options="cateList" :props="{ expandTrigger: 'hover', value:'cat_id',label:'cat_name',children:'children'}"  @change="handleChange"></el-cascader></el-form-item>     </el-tab-pane><el-tab-pane label="商品参数" name="1"><!-- 渲染表单的Item项 --><el-form-item v-for="item in manyTabData" :label="item.attr_name" :key="item.attr_id"><!-- 复选框组 --><el-checkbox-group v-model="item.attr_vals"><el-checkbox :label="cb" v-for="(cb,i) in item.attr_vals" :key="i" border></el-checkbox></el-checkbox-group></el-form-item></el-tab-pane><el-tab-pane label="商品属性" name="2"><el-form-item :label="item.attr_name" v-for="item in onlyTabData"  :key="item.attr_id"><!-- 复选框组 --><el-input v-model="item.attr_vals"></el-input></el-form-item></el-tab-pane> <el-tab-pane label="商品图片" name="3"><!-- action 图片要上传的API地址 --><el-upload :action="uploadURL" :on-preview="handlePreview" :headers="headerObj" :on-remove="handleRemove" list-type="picture" :on-success="handleSuccess"><el-button size="small" type="primary">点击上传</el-button></el-upload></el-tab-pane><el-tab-pane label="商品内容" name="4"><!-- //富文本编辑器组件 --><quill-editor v-model="addForm.goods_introduce"></quill-editor><!-- 添加商品按钮 --><el-button type="primary" class="btnAdd" @click="add">添加商品</el-button></el-tab-pane></el-tabs></el-form>

在第一个tab栏，因为这里是提交商品，我们需要使用post提交数据，而且通过v-model将输入的值都传到后台，实现添加和保存。首先看这里的api文档，有对键入的值的类型和名称进行说明，所以，在data里面定义一个addForm，通过:prop（表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的）绑定到表单上，在每个form-item中通过v-model将addForm数组中的value与input:text双向绑定。还添加了自定义规则，当没有填入信息时检错。

注意：最下行实现了一个级联框，前面文章已经提过。

当基本信息填完后，需要实现一个效果，如果所选商品分类不是三级标签，如何阻止页签跳转。
在el-tabs上绑定:before-leave=“beforeTabLeave”，可以监听标签页的切换事件。在事件的处理函数中判断是否处于第一个标签且选中级联框的三级种类，允许或阻止跳转，弹出error message。

首先级联框不能选中一级和二级一下分类，选中则清空。
切换事件是通过before-leave属性，其接受一个function，参数包括新的标签页name（前往的）和旧的标签页（所在），判断if(oldActiveName===‘0’ && this.addForm.goods_cat.length!==3),如果不符合条件，返回false，reject，阻止切换。

 beforeTabLeave(activeName,oldActiveName){//console.log(activeName);if(oldActiveName==='0' && this.addForm.goods_cat.length!==3)//当不符合条件(在第一栏，且级联选择器没有选中）时，不允许切换{this.$message.error("请先选择商品分类")return false}  }

当基本信息填完，进入动态参数面板，渲染下一栏（未完待续）

电商后台管理4-商品列表及添加商品(list.vue和add.vue)相关推荐

scrm电商后台管理、公司管理、店铺管理、特卖活动、营销活动、订单管理、优惠券管理、商品管理、会员管理、标签管理、会员卡、签到配置、积分、拼团、砍价、快递配置、短信配置、充值、运营活动
scrm电商后台管理.公司管理.店铺管理.特卖活动.营销活动.订单管理.优惠券管理.商品管理.会员管理.标签管理.会员卡.签到配置.积分.拼团.砍价.快递配置.短信配置.充值.运营活动 Axure原型 ...
超市百货电商app移动端原型+通用模块全局规则说明+超市电商后台管理web端原型+超市电商产品原型及需求文档+业务后台（商品管理+广告管理+活动管理）
作品介绍:Axure原型内容主要包括:超市百货电商app移动端原型+文档变更记录+名词术语说明+产品业务功能框架+通用模块和全局规则说明(消息推送机制+输入提交规则+图片加载机制+权限类提示说明+搜索 ...
电商项目总结java_Vue 电商后台管理项目阶段性总结(推荐)
一.阶段总结该项目偏向前端更多一点,后端 API 服务是已经搭建好了的,我们只需要用既可以,(但是作为一个全栈开发人员,它的数据库的表设计,Restful API 的设计是我们要着重学习的!!!) ...
电商后台管理---Vue实战
1. 项目概述 1.1 电商项目基本业务概述根据不同的应用场景,电商系统一般都提供了 PC 端.移动 APP.移动 Web.微信小程序等多种终端访问方式. 1.2 电商后台管理系统的功能电商后台管 ...
电商后台管理---Vue项目运行问题记录
初学vue项目的小白,记录在github下载电商管理项目运行过程中碰到的问题. mysql数据库安装推荐使用Navicat Premium,可以管理大部分的数据库,推荐使用. 配好mysql数据库环 ...
10.4 Vue电商后台管理完善订单模块--用Tab切换对订单进行分类
1. 效果如下: 2. 实现代码四个el-tab-pane中,< el-table >是一样的: <el-tab-pane name="all" label=& ...
Vue项目实战项目记录（电商后台管理系统）
学习视频:本站Vue实战项目:电商管理系统(Element-UI) 项目的实现效果前言时间:2021/10/5--2021/10/20 断断续续的完成了这个项目 gitte完整项目地址后台项目文 ...
Vue+Element-UI 电商后台管理系统详细总结
一.概述基于 Vue 和 Element-UI 的电商后台管理系统 1.1 实现功能用户登录/退出用户管理用户列表实现用户的增删改查.分页查询以及分配角色功能权限管理角色列表实现角色的 ...
基于Vue实现智慧社区电商后台管理系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Java项目.前端项目.小程序开发.Python开发.大数据和 ...
计算机毕业设计SSM电商后台管理系统【附源码数据库】
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...

电商后台管理4-商品列表及添加商品(list.vue和add.vue)

电商后台管理4-商品列表及添加商品(list.vue和add.vue)相关推荐

最新文章

热门文章