- 代码
<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="商品分类1" prop="GTId"> <el-select v-model="ruleForm.GTId" placeholder="请选择" @change="loadTypeTwo"> <el-option v-for="(item,index) in TypeOne" :key="index" :label="item.GTName" :value="item.GTId" > </el-option> </el-select> </el-form-item> <el-form-item label="商品分类2" prop="GPId"> <el-select v-model="ruleForm.GPId" placeholder="请选择"> <el-option v-for="(item,index) in TypeTwo" :key="index" :label="item.GTName" :value="item.GTId" > </el-option> </el-select> </el-form-item> <el-form-item label="商品品牌" prop="GBId"> <el-select v-model="ruleForm.GBId" placeholder="请选择"> <el-option v-for="(item,index) in Brand" :key="index" :label="item.GBName" :value="item.GBId" > </el-option> </el-select> </el-form-item> <el-form-item label="商品名称" prop="GoodsName"> <el-input v-model="ruleForm.GoodsName"></el-input> </el-form-item> <el-form-item label="副标题" prop="SubHead"> <el-input v-model="ruleForm.SubHead"></el-input> </el-form-item> <el-form-item label="商品货号" prop="GoodsCode"> <el-input v-model="ruleForm.GoodsCode"></el-input> </el-form-item> <el-form-item label="商品售价" prop="GoodsPrice"> <el-input v-model="ruleForm.GoodsPrice"></el-input> </el-form-item> <el-form-item label="市场价" prop="MarketPrice"> <el-input v-model="ruleForm.MarketPrice"></el-input> </el-form-item> <el-form-item label="商品库存" prop="GoodsInventory"> <el-input v-model="ruleForm.GoodsInventory"></el-input> </el-form-item> <el-form-item label="商品预警值" prop="GoodsInventoryWarningValue"> <el-input v-model="ruleForm.GoodsInventoryWarningValue"></el-input> </el-form-item> <el-form-item label="商品图片" prop="GoodsPriture"> <el-upload class="avatar-uploader" action="http://localhost:54935/api/Goods/UpLoad" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" > <img v-if="imageUrl" :src="imageUrl" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> <el-form-item label="商品介绍"> <div id="demo1"></div> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(‘ruleForm‘)" >立即创建</el-button > <el-button @click="resetForm(‘ruleForm‘)">重置</el-button> <el-button type="success" @click="loadData">取消</el-button> </el-form-item> </el-form> </div> </template> - 效果
二、删除
- 代码
//删除 handleDelete(index, row) { this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.$axios .get("http://localhost:54935/api/Goods/Del?id=" + row.GoodsId) .then((res) => { if (res.data > 0) { this.$message.success("删除成功"); this.loadData(); } else { this.$message.error("删除失败"); } }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); console.log(index, row); }, //全选 handleSelectionChange(val) { this.multipleSelection = val //清空 this.ids = [] for (let index = 0; index < val.length; index++) { this.ids.push(val[index].GoodsId) } }, //批量删除 handleDelAll() { if(this.ids.length===0){ this.$message.error(‘至少选择一条数据‘); return; } this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", }) .then(() => { this.$axios .get( `http://localhost:54935/api/Goods/DelAll?ids=${this.ids.toString()}` ) .then((res) => { if (res.data > 0) { this.$message.success("批量删除成功"); this.$router.push(‘/index‘); } else { this.$message.error("批量删除失败"); } }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); }, }
三、修改
- 代码
//修改 submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.ruleForm.GoodsIntroduce=this.editor.txt.html();//获取文本编辑器的值 //获取图片 this.ruleForm.GoodsPicture=this.ruleForm.GoodsPicture.split(‘/‘)[this.ruleForm.GoodsPicture.split(‘/‘).length-1] this.$axios .post( "http://localhost:54935/api/Goods/Edit", this.ruleForm ) .then((res) => { if (res.data > 0) { this.$message.success(‘修改成功‘); this.$router.push(‘/index‘); } else { this.$message.error(‘修改失败‘); } }); } else { console.log("error submit!!"); return false; } }); } //函数 mounted() { const editor = new wangEditor(`#demo1`) // 配置 onchange 回调函数，将数据同步到 vue 中 editor.config.onchange = (newHtml) => { this.editorData = newHtml } // 创建编辑器 editor.create() this.editor = editor //接收穿过来的数据 this.ruleForm=this.$route.query; //接收富文本编辑器的数据 editor.txt.html(this.ruleForm.GoodsIntroduce) //接收图片 this.imageUrl=this.ruleForm.GoodsPicture //接收品牌 // this.ruleForm.GBId=this.$route.query.GBName let gbid=this.$route.query.GBId this.ruleForm.GBId=Number(gbid); //接收分类 // this.ruleForm.GTId=this.$route.query.GTName // this.ruleForm.GPId=this.$route.query.GPName let gtid=this.$route.query.GTId this.ruleForm.GTId=Number(gtid); let gpid=this.$route.query.GPId this.ruleForm.GPId=Number(gpid); }, };
- 效果
四、显示
- 代码
<template> <div> <div> <el-input type="text" v-model="goodsname" style="width: 200px; height: 50px" placeholder="请输入商品名称" ></el-input> <el-select v-model="gbid" placeholder="请选择"> <el-option v-for="item in select" :key="item.value" :label="item.GBName" :value="item.GBId" > </el-option> </el-select> <el-button type="success" @click="loadData">查询</el-button> <el-button type="primary" @click="loadAdd">添加</el-button> <el-button type="danger" @click="handleDelAll">批量删除</el-button> </div> <div> <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="GoodsId" label="编号" width="180"> </el-table-column> <el-table-column label="商品图片" width="180"> <template slot-scope="scope"> <img :src="scope.row.GoodsPicture" width="100" height="100" alt="" /> </template> </el-table-column> <el-table-column label="商品名称" width="180"> <template slot-scope="scope"> <p>{{scope.row.GoodsName}}</p> <p>品牌：{{scope.row.GBName}}</p> </template> </el-table-column> <el-table-column label="价格/货号" width="180"> <template slot-scope="scope"> <p>价格：￥{{scope.row.GoodsPrice.toFixed(2)}}</p> <p>货号：{{scope.row.GoodsCode}}</p> </template> </el-table-column> <el-table-column label="状态" width="180"> <template slot-scope="scope"> <span>{{scope.row.Status?"上架":"下架"}}</span> </template> </el-table-column> <el-table-column label="操作"> <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 > <el-button size="mini" type="success" @click="handleStatus(scope.$index, scope.row)" >下架</el-button > </template> </el-table-column> </el-table> </div> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageindex" :page-sizes="[1, 3, 5, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totalcount" > </el-pagination> </div> </template> - 效果