项目笔记-基于VUE2.0的电商后台管理系统（三）

第三部分：商品管理

首先，与人员列表相同，需要构建用来展示商品的form表单组件。

接下来，创建添加商品组件，该组件不是在本页面利用dialog进行添加，而是利用路由转到对应的ADD组件进行。

首先，用el-alert在页面上方加入警告栏。

 <el-alert
          title="添加商品信息"
          type="info"
          show-icon
          :closable=false
           center>
        </el-alert>

接下来，引入el-steps组件，实现阶段图。

<el-steps :space="300" :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>

然后，引入el-tabs组件，其中包括el-tab-pane子组件，可在该子组件中设置input框，级联选择器等。

<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">
              <el-input v-model="addForm.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <el-cascader
                class="jilian"
                v-model="addForm.goods_cat"
                :options="catelist"
                :props="cateProps"
                @change="handleChange" clearable></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">
            <el-form-item :label="item.attr_name" v-for="item in manyTableData" :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 onlyTableData" :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">
            <el-upload
              :action="uploadURL"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              list-type="picture"
              :headers="headerObj"
              :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="btAdd" @click="add">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>

其中，级联选择器内的数据来自于catelist，该数据通过getCateList方法，在方法里面发送get请求得到，将得到的数据保存在catelist内，该方法在created钩子内调用，再通过el-cascader组件内的options属性取得。

 created () {
      this.getCateList()
    },
    methods:{
      async getCateList(){
        const { data: res } = await this.$http.get('categories')
        if (res.meta.status !== 200) {
          return this.$message.error('获取商品分类失败！')
        }
        this.catelist = res.data

      },
<------------------------------------------>
 <el-cascader
                class="jilian"
                v-model="addForm.goods_cat"
                :options="catelist"
                :props="cateProps"
                @change="handleChange" clearable></el-cascader>

接下来，就可以依次定义商品信息，完成添加。