Vue增刪改查
阿新 • • 發佈：2021-09-16
- 程式碼
<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> - 效果