前端删除优化 批量删除和单删

src/api/goods/index.js

@@ -1,7 +1,7 @@
 import axios from '@/utils/request';
 
 /**
- * 登录
+ * 查询
  */
 export async function goodsList(data) {
   const res = await axios.post('/goods/list', data);
@@ -10,3 +10,33 @@ export async function goodsList(data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+/**
+ * 添加
+ */
+export async function goodsAdd(data) {
+  const res = await axios.post('/goods/add', data);
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加
+ */
+export async function goodsDel(data) {
+  const res = await axios.post('/goods/del', data);
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+export async function getType() {
+  const res = await axios.post('/type/getType');
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/goods/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    {{ this.typeList }}
     <el-form :model="GoodsQueryReq">
       <el-form-item label="商品编码">
         <el-input
@@ -11,8 +12,18 @@
         <el-input style="width: 250px" v-model="GoodsQueryReq.title"></el-input>
       </el-form-item>
       <el-button type="primary" @click="showGoodsList">搜索</el-button>
+      <el-button type="primary" @click="dialogVisible = true">新增</el-button>
+      <el-button type="primary" @click="del">删除</el-button>
     </el-form>
-    <el-table :data="GoodsList">
+    {{ this.ids }}
+    <el-table
+      ref="multipleTable"
+      :data="GoodsList"
+      tooltip-effect="dark"
+      style="width: 100%"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55"> </el-table-column>
       <el-table-column prop="id" label="商品ID" />
       <el-table-column prop="goodid" label="商品编码" />
       <el-table-column prop="title" label="商品名称" />
@@ -26,29 +37,63 @@
       <el-table-column prop="price" label="商品价格" />
       <el-table-column label="操作">
         <template slot-scope="scope">
-          <el-button type="primary" @click="del(scope.row.id)">删除</el-button>
-          <el-button type="primary" @click="info(scope.row.id)">修改</el-button>
+          <el-button type="primary" @click="delOne(scope.row.id)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
-    <div class="block">
-      <span class="demonstration">完整功能</span>
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="GoodsQueryReq.pageNum"
-        :page-sizes="[2, 50, 100, 200]"
-        :page-size="GoodsQueryReq.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="GoodsQueryReq.total"
-      >
-      </el-pagination>
-    </div>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="GoodsQueryReq.pageNum"
+      :page-sizes="[10, 50, 100, 200]"
+      :page-size="GoodsQueryReq.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="GoodsQueryReq.total"
+    >
+    </el-pagination>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form :model="GoodsSaveReq">
+        <el-form-item label="商品编码">
+          <input v-model="GoodsSaveReq.goodid" />
+        </el-form-item>
+        <el-form-item label="商品名称">
+          <input v-model="GoodsSaveReq.title" />
+        </el-form-item>
+        <el-form-item label="商品类型">
+          <el-select v-model="GoodsSaveReq.goodtype" placeholder="请选择">
+            <el-option
+              v-for="item in typeList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品价格">
+          <input v-model="GoodsSaveReq.price" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="(dialogVisible = false), add()"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  import { goodsList } from '@/api/goods';
+  import { getType, goodsAdd, goodsDel, goodsList } from '@/api/goods';
 
   export default {
     name: 'Goods',
@@ -59,12 +104,15 @@
       //这里存放数据"
 
       return {
+        GoodsSaveReq: {},
         GoodsQueryReq: {
           pageNum: 1,
-          pageSize: 2
+          pageSize: 10
         },
         GoodsList: [],
-        ids: []
+        ids: [],
+        dialogVisible: false,
+        typeList: []
       };
     },
     //计算属性 类似于data概念",
@@ -73,35 +121,64 @@
     watch: {},
     //方法集合",
     methods: {
+      handleSelectionChange(val) {
+        const idss = val.map((item) => {
+          return item.id;
+        });
+        this.ids = idss;
+      },
+      getTypeList() {
+        getType().then((res) => {
+          this.typeList = res;
+        });
+      },
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(() => {
+            done();
+          })
+          .catch(() => {});
+      },
       showGoodsList() {
         goodsList(this.GoodsQueryReq).then((res) => {
           this.GoodsQueryReq.total = res.count;
           this.GoodsList = res.list;
-          console.log(res);
         });
       },
       handleSizeChange(val) {
         this.GoodsQueryReq.pageSize = val;
         this.showGoodsList();
-        console.log(`每页 ${val} 条`);
       },
       handleCurrentChange(val) {
         this.GoodsQueryReq.pageNum = val;
         this.showGoodsList();
-        console.log(`当前页: ${val}`);
       },
-      del(val) {
-        console.log(val);
-        console.log(this.ids);
+      delOne(val) {
+        this.ids.push(val);
+        goodsDel(this.ids).then((res) => {
+          console.log(res);
+          this.showGoodsList();
+        });
+      },
+      del() {
+        goodsDel(this.ids).then((res) => {
+          console.log(res);
+          this.showGoodsList();
+        });
       },
       info(val) {
         console.log(val);
-        console.log(this.ids);
+      },
+      add() {
+        goodsAdd(this.GoodsSaveReq).then((res) => {
+          console.log(res);
+        });
       }
     },
     //生命周期 - 创建完成（可以访问当前this实例）",
     created() {
       this.showGoodsList();
+      this.getTypeList();
     },
     //生命周期 - 挂载完成（可以访问DOM元素）",
     mounted() {},