Vue--element實現刪除會員功能

前戲

現在會員管理就差一個功能沒有實現了，那就是刪除會員的功能。

刪除二次確認對話框

實現效果如下

之前我們已經寫好了刪除按鈕，並且定義好了刪除方法 handDelete 現在就來實現這個方法，在實現之前先寫好我們的接口

在 src/api/member.js 里寫delete請求，完整代碼如下

// 會員管理接口

import request from '@/utils/request'
import BASE_URL from '@/utils/common'


export default {
    // 獲取會員列表數據,page 當前頁碼。size，每頁查詢條數,searchMap 搜索的參數
    getList(token,size,page,searchMap){
        return request({
            url: BASE_URL +`/api/manage/search/member?page=${page}&size=${size}`, // 反單引號
            method: 'post',
            data: searchMap,
            headers:{
                "Authorization":"JWT "+token
            }

        })
    },

    // 新增會員
    add(pojo,token){
        return request({
            url: BASE_URL + '/api/manage/member',
            method: 'post',
            data: pojo,
            headers:{
                "Authorization":"JWT "+token
            }
        })
    },

    // 根據會員 id 查詢單條數據
    getById(id,token){
        return request({
            url: BASE_URL + `/api/manage/member?id=${id}`,
            method: 'get',
            headers:{
                "Authorization":"JWT "+token
            }
        })
    },

    // 修改數據
    update(pojo,token){
        return request({
            url: BASE_URL + '/api/manage/member',
            method: 'put',
            data: pojo,
            headers:{
                "Authorization":"JWT "+token
            }
        })
    },

    // 刪除數據
    deleteById(id,token){
        return request({
            url: BASE_URL + `/api/manage/member?id=${id}`,
            method: 'delete',
            headers:{
                "Authorization":"JWT "+token,
                "content-type": "application/json"
            }
        })
    }

    
}

然后再 src/views/member/index.vue 里實現handDelete 方法，只增加下面的方法就可以了

 完整代碼如下

<template>
    <div>

        <!-- 搜索框 -->
    <!-- :inline="true" 表單一行顯示 -->
    <!-- :model="searchMap" 綁定到這個參數上 -->
    <el-form ref="searchForm" :inline="true" :model="searchMap" style="margin-top: 20px">
        <!-- 重置會看 el-form-item 組件元素的 prop 上是否指定了字段名，指定了才會重置生效 -->
        <el-form-item prop="member_card">
          <!--prop需要在data里指定，不指定會出現重置不了的問題， placeholder背景文案 -->
          <el-input v-model="searchMap.member_card" placeholder="會員卡號" style="width: 200px"></el-input>
        </el-form-item>
        <!-- prop重置用 -->
        <el-form-item prop="member_name">
          <el-input v-model="searchMap.member_name" placeholder="會員名字" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item prop="pay_type">
          <el-select v-model="searchMap.pay_type" placeholder="支付類型" style="width: 110px">
            <!-- 不要忘記 payTypeOptions 綁定到data中 -->
            <!-- for循環。label就是看到的中文，value提交到后台的值，也就是1，2，3，4 -->
            <el-option
              v-for="option in payTypeOptions"
              :key="option.pay_type"
              :label="option.name"
              :value="option.pay_type"
            ></el-option>
          </el-select>
        </el-form-item>
  
        <!-- 日期搜索框 -->
        <el-form-item prop="member_birthday">
          <!-- value-format 是指定綁定值的格式 -->
          <el-date-picker
            style="width: 200px"
            value-format="yyyy-MM-dd"
            v-model="searchMap.member_birthday"
            type="date"
            placeholder="出生日期"
          ></el-date-picker>
        </el-form-item>
        <!-- 日期搜索框結束 -->
  
        <el-form-item>
          <el-button type="primary" @click="fetchData">查詢</el-button>
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <!-- searchForm 為搜索框上面 ref 綁定的屬性,resetForm 要在methods里面定義-->
          <el-button @click="resetForm('searchForm')">重置</el-button> 
        </el-form-item>
      </el-form>
      <!-- 搜索框結束 -->



      <!-- 列表頁面
      :data綁定渲染的數據，data 里我們定義的上list
      border 表格邊框，表頭最上面的那個邊框
      height 表格高度
    -->
    <el-table :data="list" height="480" border style="width: 100%">
        <!-- type='index'獲取索引值，從1開始，label顯示的標題，prop接口返回數據的字段名，width列寬，不寫就自動 -->
        <el-table-column type="index" label="序號" width="50"></el-table-column>
        <el-table-column prop="member_card" label="會員卡號" width="180"></el-table-column>
        <el-table-column prop="member_name" label="會員姓名"></el-table-column>
        <el-table-column prop="member_birthday" label="會員生日" width="100"></el-table-column>
        <el-table-column prop="phone_number" label="手機號碼" width="120"></el-table-column>
        <el-table-column prop="card_money" label="可用積分"></el-table-column>
        <el-table-column prop="Available_integral" label="開卡余額"></el-table-column>

        <!-- 支付類型開始 -->
        <el-table-column prop="pay_type" label="支付類型">
            <template slot-scope="scope">
                <!-- 使用過濾器,scope.row.pay_type為接口返回的pay_type的值，后面的是作用在哪個過濾器上面，這里作用在 payTypeFilter 上面-->
                <span>{{scope.row.pay_type | payTypeFilter }}</span>
              </template>
        </el-table-column>
        <!-- 支付類型結束 -->

        <el-table-column prop="member_address" label="會員地址" width='180'></el-table-column>

        <!-- 操作開始，scope 可以獲取行數據 ，scope.row.id 獲取該行數據的 id值-->
        <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit( scope.row.id)">編輯</el-button>
          <!-- 根據后端返回該行的id進行編輯和刪除 -->
          <el-button size="mini" type="danger" @click="handleDelete( scope.row.id)">刪除</el-button>
        </template>
      </el-table-column>
      <!-- 操作結束 -->

    </el-table>
      <!-- 列表頁面結束 -->

     <!-- 分頁 -->
     <!--
         handleSizeChange 改變每頁多少條調用這個方法，會傳選擇的條數過去
         handleCurrentChange 點擊頁碼調用這個方法，會傳點擊的頁碼過去
          current-page當前的頁碼，data里定義的1，默認第一頁
          page-sizes 選擇項，每頁顯示多少條
          page-size 每頁顯示多少條，data里定義
          layout="total, sizes, prev, pager, next, jumper"
          total 總共多少條，去掉后不顯示，sizes選擇項，prev上一頁的箭頭，pager頁碼，next下一頁的箭頭，jumper前往多少頁
        -->
    <el-pagination
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange"
    :current-page="currenPage"
    :page-sizes="[10, 15, 20, 30]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    ></el-pagination>
     <!-- 分頁結束 -->


         <!-- 彈出新增窗口 
        title 窗口的標題
        :visible.sync 當它true的時候，窗口會被彈出
    -->
    <!-- :rules="rules"校驗，需要在校驗的字段上指定prop -->
    <!-- 這里都要綁定prop，並且在data里聲明，要不然彈框里的數據不會清空或者不能輸入 -->
    <!-- :closeOnClickModal=false 點擊空白區域不關閉彈框，默認為true -->
    <!-- pojo 就是提交的數據 -->
    <el-dialog title="新增會員" :closeOnClickModal=false :visible.sync="dialogFormVisible" width="500px">
      <!-- 設置彈出框的樣式 label-position="right" 右對齊 -->
      <el-form
        :rules="rules"
        ref="pojoForm"
        label-width="100px"
        label-position="right"
        style="width: 400px;"
        :model="pojo"
      >
        <el-form-item label="會員卡號"  prop="member_card">
          <el-input v-model="pojo.member_card" placeholder="請輸入會員卡號"></el-input>
        </el-form-item>
        <el-form-item label="會員姓名"  prop="member_name">
          <el-input v-model="pojo.member_name" placeholder="請輸入會員姓名"></el-input>
        </el-form-item>
        <el-form-item label="會員生日" prop="member_birthday">
          <!-- value-format 是指定綁定值的格式 -->
          <el-date-picker
            style="width: 200px"
            value-format="yyyy-MM-dd"
            v-model="pojo.member_birthday"
            type="date"
            placeholder="會員生日"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="手機號碼" prop="phone_number">
          <el-input v-model="pojo.phone_number" placeholder="請輸入手機號碼"></el-input>
        </el-form-item>
        <el-form-item label="開卡金額"  prop="card_money">
          <el-input v-model="pojo.card_money" placeholder="請輸入開卡金額"></el-input>
        </el-form-item>
        <el-form-item label="可用積分" prop="Available_integral">
          <el-input v-model="pojo.Available_integral" placeholder="請輸入可用積分"></el-input>
        </el-form-item>
        <el-form-item label="支付類型" prop="pay_type">
          <el-select v-model="pojo.pay_type" placeholder="支付類型" style="width: 110px">
            <!-- 不要忘記 payTypeOptions 綁定到data中 -->
            <el-option
              v-for="option in payTypeOptions"
              :key="option.pay_type"
              :label="option.name"
              :value="option.pay_type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="會員地址" prop="member_address">
          <el-input type="textarea" v-model="pojo.member_address" placeholder="請輸入會員地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- pojoForm 為el-form 的ref屬性值 -->
        <!-- <el-button type="primary" @click="addData('pojoForm')">確 定</el-button> -->
        <!-- 當pojo.id === null時，調用新增接口addData，當不為null，表示有id，則調更新接口updateData -->
        <el-button type="primary" @click="pojo.id === null ? addData('pojoForm'): updateData('pojoForm')">確 定</el-button>
        

        
      </div>
    </el-dialog>
    <!-- 彈出窗口結束 -->

    </div>
</template>

<script>
import memberApi from "@/api/member"
// 支付類型，不能寫在data里面，會報錯，定義好了在下面寫個 filters 方法
// 然后在列表頁面使用過濾器，接口返回的pay_type是數字，不是字符串
const payTypeOptions = [
  { pay_type: 1, name: "現金" },
  { pay_type: 2, name: "微信" },
  { pay_type: 3, name: "支付寶" },
  { pay_type: 4, name: "銀行卡" }
];

export default{
    data(){
        return {
            list: [],  // 數據傳給list,列表渲染的數據
            total: 0, // 總記錄數，在接口返回數據后賦值給total
            currenPage: 1, // 當前頁碼
            pageSize: 10, // 每頁顯示的數據條數
            searchMap: {
                // 條件查詢綁定的條件值,搜索字段有四個
                member_card: "",
                member_name: "",
                pay_type: "",
                member_birthday: ""
            },
            payTypeOptions, // 這里要申明，要不然搜索框里使用的時候會報錯
            dialogFormVisible: false, //控制對話框，默認不彈出
            pojo: {
              // 提交的數據，不寫有時候會導致輸入框輸入不了
              id: null,
              member_card: "",
              member_name: "",
              member_birthday: "",
              phone_number: "",
              card_money: 0, // 輸入框里的默認值
              Available_integral: 0,
              pay_type: "",
              member_address: ""
            },
            rules: {
              // 校驗規則，blur 失去焦點的時候驗證，change 輸入值改變的時候驗證
              member_card: [{ required: true, message: "卡號不能為空", trigger: "blur" }],
              member_name: [{ required: true, message: "姓名不能為空", trigger: "blur" }],
              pay_type: [
                { required: true, message: "支付類型不能為空", trigger: "change" }
              ]
            }
          
        }
    },

    created() {
        // 調接口請求數據，將調接口定義一個方法，在created里調用這個方法
        
        this.fetchData()
    },

    methods: {
        fetchData(){
            // 獲取token
            const token = localStorage.getItem('zz-token')
            console.log(token)
            // this.pageSize,this.currenPage 分頁的條數和頁碼，要this.
            memberApi.getList(token,this.pageSize,this.currenPage,this.searchMap).then( response=>{
                const res = response.data
                this.total = res.total  // 將接口返回的total 覆蓋 data里的total
                this.list = res.data  // 將返回數據的data賦值給list
                // console.log(res)
            })

        },
        
      // 打開編輯窗口
      handleEdit(id) {
        console.log("編輯", id);
        this.handleAdd();  // 要打開窗口，清除數據，直接復用handleAdd就可以了
        // 獲取token
        const token = localStorage.getItem('zz-token')
        memberApi.getById(id,token).then(response => {
          const res = response.data;
          if (res.success) {
            this.pojo = res.data;  // 將數據賦值給pojo顯示在輸入框里
            console.log(this.pojo);  
          }
        });
      },
      // 刪除會員
      handleDelete(id) {
        console.log('刪除', id)
              this.$confirm('該操作將永久性刪除數據，請謹慎操作。', '提示', {
                  confirmButtonText: '確認',
                  cancelButtonText: '取消',
              }).then(() => {
                  // 確認
                  console.log('確認')
                  // 獲取token
                  const token = localStorage.getItem('zz-token')
                  memberApi.deleteById(id,token).then(response => {
                      // console.log(response)
                      const res = response.data
                      // 刪除成功或失敗的提示信息
                      this.$message({
                          message: res.msg,
                          type: res.success ? 'success': 'error'
                      })
                      if(res.success) {
                          // 刪除成功，刷新列表數據
                          this.fetchData()
                      }
                  })
              }).catch(() => {
                  // 取消，不用理會
                  console.log('取消')
              })
      },
        // 彈出新增窗口
      handleAdd() {
        // this.pojo = {}
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          // this.$nextTick()它是一個異步事件，當渲染結束 之后 ，它的回調函數才會被執行
          // 彈出窗口打開之后 ，需要加載Dom, 就需要花費一點時間，我們就應該等待它加載完dom之后，再進行調用resetFields方法，重置表單和清除樣式
          // pojoForm 為 ref 對應的值
          this.$refs["pojoForm"].resetFields();
        });
        },

    // 提交新增數據,formName就是傳過來的pojoForm
    addData(formName) {
      // console.log('數據',formName)
      this.$refs[formName].validate(valid => {
        if (valid) {
          //提交表單
          console.log("addData");
          const token = localStorage.getItem('zz-token')
          // pojo才是提交到后台的數據，不是formName
          memberApi.add(this.pojo,token).then(response => {
            const res = response.data;
            if (res.success) {
              // 新增成功，提示語
              this.$message({
                message: res.msg,
                type: "success"
              })
              //新增成功，刷新列表數據
              this.fetchData();
              this.dialogFormVisible = false; // 關閉窗口
            } else {
              // 失敗，來點提示信息
              this.$message({
                message: res.msg,
                type: "warning"
              });
            }
          });
        } else {  // 沒有校驗通過，返回false
          return false;
        }
      });
    },
      // 更新接口
      updateData(formName) {
          console.log("updateData");
          this.$refs[formName].validate(valid => {
            if (valid) {
              const token = localStorage.getItem('zz-token')
              // 提交更新
              memberApi.update(this.pojo,token).then(response => {
                const res = response.data;
                if (res.success) {
                  // 刷新列表
                  this.fetchData();
                  this.dialogFormVisible = false; // 關閉彈窗
                  // 提示修改成功
                  this.$message({
                    message: res.msg,
                    type: "success"
                  });
                } else {
                  this.$message({
                    message: res.msg,
                    type: "warning"
                  });
                }
              });
            } else {  // 沒有校驗通過，返回false
              return false;
            }
          });
        },
        // 當每頁顯示條數改變后被觸發，val是最新的每頁顯示條數
        handleSizeChange(val) {
            this.pageSize = val;
            this.fetchData();
        },
        // 當頁碼改變后被觸發，val是最新的頁碼
        handleCurrentChange(val) {
            this.currenPage = val;
            this.fetchData();
          },

        // 重置功能,element ui 提供的功能
        resetForm(formName) {
          // 重置要看 el-form-item 組件元素的 prop 上是否指定了字段名，指定了才會重置生效
            this.$refs[formName].resetFields();
            this.fetchData();
          },
        
    },
    filters: {
    // 過濾器，轉換支付類型，type為1，2，3，4
    payTypeFilter(pay_type) {
      const payObj = payTypeOptions.find(obj => {
          // obj 就是上面的一個對象，type和上面對象的type進行對比，在返回
        return obj.pay_type === pay_type;
      });
      // payObj 有值，返回 payObj.name
      return payObj ? payObj.name : null; // 沒找到類型返回null，找到了返回payObj.name
    }
  }
}
</script>

至此，我們的會員管理系統就全部完成了