FrontendLearning/src/views/couponUsers.vue

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from 'vue-router';
import couponApi from '@/api/coupon';
const couponId = ref()
const route = useRoute();
const Id = Number(route.query.id);


console.log("卡券id:" + Id);
onMounted(() => {


    // 这样就能正确打印出数字了

})


const list = ref([
    {
        "name": "彭梦",
        "jwcode": 30005251,
        "deptName": "总部",
        "shopName": "研发部"
    }

])
const couponQuery = reactive({
    couponId: 0,
    pageNo: 1,
    pageSize: 20

})
const total = ref(0)
function loadData() {

    couponQuery.couponId = Id
    couponApi.selectcouponUsers(couponQuery).then(result => {
        list.value = result.data
        total.value = result.data.total
        console.log('======' + list.value);
    })
}
loadData()

const deleteId = reactive({})
function deleteByCoupinAndUserId(jwcode,couponId = Id) {
    ElMessageBox.confirm(
        '确定删除该用户卡券吗？',
        '警告',
        {
            confirmButtonCText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            lockScroll: false
        }
    ).then(() => {
      couponApi.deleteByCoupinAndUserId(jwcode,couponId = Id).then(result=>{
        if(result.code==200){
            ElMessage.success(result.message)
            loadData()
        }else{
            ElMessage.error(result.message)
        }
      })
    })
}
</script>
<template>
    <el-card>
        <el-form :inline="true">
            <el-form-item label="名字">
                <el-input v-model="couponQuery.name" placeholder="请输入名字" clearable />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="couponQuery.jwcode" placeholder="请输入精网号" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadData">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table style="width: 100%;" :data="list">
            <el-table-column type="index" label="序号" width="100px"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="jwcode" sortable label="精网号"></el-table-column>
            <el-table-column prop="deptName" label="分部"></el-table-column>
            <el-table-column prop="shopName" label="门店"></el-table-column>
            <el-table-column align="center" width="200px" fixed="right" label="操作">
                <template #default="{ row }">
                    <!-- 删除按钮 -->
                    <el-button type="danger" plain
                        @click="deleteByCoupinAndUserId(row.jwcode)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="couponQuery.page" v-model:page-size="couponQuery.limit"
            :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @change="loadData" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
</template>
<style></style>