美多后台添加商品

1. List item

django中 序列化器添加

vue页面

  <el-container>
    <el-header class="md-header">
      <!-- 商品增加 开始 -->
      <div style="text-align: left">

        <el-button type="danger" plain @click="dialogFormVisible = true">增加商品</el-button>

        <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
              <el-input  v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="商品价格" :label-width="formLabelWidth">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品等级" :label-width="formLabelWidth">
              <el-input v-model="form.level" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品等级" :label-width="formLabelWidth">
              <el-input v-model="form.topid" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="商品库存" :label-width="formLabelWidth">
              <el-input v-model="form.store" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品销量" :label-width="formLabelWidth">
              <el-input v-model="form.sales" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品service" :label-width="formLabelWidth">
              <el-input v-model="form.service" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品spu" :label-width="formLabelWidth">
              <el-input v-model="form.spu" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="商品图片" :label-width="formLabelWidth">
              <el-upload
                action="http://up-z1.qiniu.com/"
                :on-success="uploadSuccess"
                :limit="1"
                list-type="picture"
                :data="postData"
                accept=".png, .jpg"
              >
                <el-button type="danger" plain>点击上传</el-button>
              </el-upload>
            </el-form-item>

            <el-form-item label="商品详情" :label-width="formLabelWidth">
              <mavon-editor @imgAdd='imgAdd' ref="md" style="min-height: 600px" @change='change'/>
            </el-form-item>

            <el-form-item label="是否热销" prop="delivery">
              <el-switch v-model="form.is_hot"></el-switch>
            </el-form-item>
            <el-form-item label="是否新品" prop="delivery">
              <el-switch v-model="form.is_new"></el-switch>
            </el-form-item>
            <el-form-item label="是否首页展示" prop="delivery">
              <el-switch v-model="form.is_home"></el-switch>
            </el-form-item>
            <el-form-item label="是否删除" prop="delivery">
              <el-switch v-model="form.is_del"></el-switch>
            </el-form-item>

                            <el-form-item label="商品分类" :label-width="formLabelWidth">
                              <select v-model="form.cate" placeholder="请选择分类">
                                <option v-for='i in list' :label="i.name" :value="i.id">{{i.name}}</option>

                              </select>
                            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="danger" plain @click="submit">确 定</el-button>
          </div>
        </el-dialog>

      </div>
      <!-- 商品增加结束 -->
    </el-header>

    <el-header class="md-header">
      <!-- 商品增加 开始 -->
      <div style="text-align: left">

        <el-dialog title="修改商品" :visible.sync="UpdateGoods">
          <el-form :model="updatelist">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
              <el-input  v-model="updatelist.name" autocomplete="off"></el-input>
            </el-form-item>
            <!--                <el-form-item label="商品评论个数" :label-width="formLabelWidth">-->
            <!--                  <el-input v-model="form.tcomment" autocomplete="off"></el-input>-->
            <!--                </el-form-item>-->
            <el-form-item label="商品价格" :label-width="formLabelWidth">
              <el-input v-model="updatelist.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品等级" :label-width="formLabelWidth">
              <el-input v-model="updatelist.level" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品顶级" :label-width="formLabelWidth">
              <el-input v-model="updatelist.topid" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="商品库存" :label-width="formLabelWidth">
              <el-input v-model="updatelist.store" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品销量" :label-width="formLabelWidth">
              <el-input v-model="updatelist.sales" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品service" :label-width="formLabelWidth">
              <el-input v-model="updatelist.service" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品spu" :label-width="formLabelWidth">
              <el-input v-model="updatelist.spu" autocomplete="off"></el-input>
            </el-form-item>

            <!--                <el-form-item label="商品匪类" :label-width="formLabelWidth">-->
            <!--                  <el-input v-model="form.spu" autocomplete="off"></el-input>-->
            <!--                </el-form-item>-->
            <el-form-item label="商品图片" :label-width="formLabelWidth">
              <el-upload
                action="http://up-z1.qiniu.com/"
                :on-success="updatepic"
                :limit="1"
                list-type="picture"
                :data="postData"
                accept=".png, .jpg"
              >
                <el-button type="danger" plain>点击上传</el-button>
              </el-upload>
            </el-form-item>
            <!--                <el-form-item label="图片地址" :label-width="formLabelWidth">-->
            <!--                  <el-input v-model="form.pic_url" autocomplete="off" readonly></el-input>-->
            <!--                </el-form-item>-->

            <el-form-item label="商品详情" :label-width="formLabelWidth">
              <mavon-editor @imgAdd='updateimgAdd' ref="md" style="min-height: 600px" @change='changes'/>
            </el-form-item>

            <el-form-item label="是否热销" prop="delivery">
              <el-switch v-model="updatelist.is_hot"></el-switch>
            </el-form-item>
            <el-form-item label="是否新品" prop="delivery">
              <el-switch v-model="updatelist.is_new"></el-switch>
            </el-form-item>
            <el-form-item label="是否首页展示" prop="delivery">
              <el-switch v-model="updatelist.is_home"></el-switch>
            </el-form-item>
            <el-form-item label="是否删除" prop="delivery">
              <el-switch v-model="updatelist.is_del"></el-switch>
            </el-form-item>

            <el-form-item label="商品分类" :label-width="formLabelWidth">
              <select v-model="updatelist.cate" placeholder="请选择分类">
                <option v-for='i in list' :label="i.name" :value="i.id">{{i.name}}</option>

              </select>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="danger" plain @click="update">修改确 定</el-button>
          </div>
        </el-dialog>

      </div>
      <!-- 商品增加结束 -->
    </el-header>

    <el-main>
      <!-- 商品展示 -->
      <el-table
        :data="tableData"
        style="width: 100%">

        <el-table-column
          label="id"
          prop="id">
        </el-table-column>
        <el-table-column
          label="名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="价格"
          prop="price">
        </el-table-column>
        <el-table-column
          label="图片"
          prop="">
          <template slot-scope="scope">
            <img :src="scope.row.pic" alt="" width="100px">
          </template>

        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索" @keyup.enter.native="getGoodsList"/>

          </template>

          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

  </el-container>
</el-container>