Vue3通用页面(表格,页头,分页,编辑,删除)

 

 

<script lang="ts" setup name="Canset-JDfund">
import { AddJDsetAPI, EditJDsetAPI, DelJDsetAPI, GetWLFsetListtAPI } from '@/api/canset/tfset'
// #region *****************XXXX模块****************
// #endregion
const params = {
    pageNo: 1, //当前页数
    pageSize: 5 //一页几条
}
// #region *****************请求表格数据模块****************
const tablelist = ref([])
const tableCount = ref()
const gettabledata = async (obj: any) => {
    const res = await GetWLFsetListtAPI(obj)
    console.log(res)
    tablelist.value = res.lists
    tableCount.value = res.count
}
gettabledata(params)
// #endregion
// #region *****************分页模块****************
const onSizeChange = async (size: number) => {
    params.pageSize = size
    gettabledata(params)
}
// 页码变化事件
const onCurrentChange = (page: number) => {
    params.pageNo = page
    gettabledata(params)
}
// #endregion
// #region *****************新增模块****************
const deposit = ref(0)
const addJDffund = async () => {
    if (!deposit.value) {
        ElMessage.error('请先输入接单押金')
        return
    }
    const res = await AddJDsetAPI(deposit.value).then(() => {
        gettabledata(params)
        ElMessage.success('新增成功！')
        deposit.value = 0
    })
    console.log(res)
}
// #endregion
// #region *****************点击编辑控制输入框显示与关闭模块****************
const showEdit = ref<boolean[]>([])
// 编辑处理
const Edit = (row: any, index: any) => {
    //vue3使用数组添加数据
    showEdit.value[index] = true
}
// #endregion
// #region *****************确认编辑模块****************
const sure = async (row: any, index: any) => {
    console.log(row)

    showEdit.value[index] = false
    // 表单预校验
    // await form.value.validate()
    // 发起修改请求
    await EditJDsetAPI(row).then(() => {
        ElMessage.success('修改成功！')
        showEdit.value = []
    })
    // 重新获取分类数据，渲染页面
    gettabledata(params)
}
// #endregion
// #region *****************删除模块****************
const Delhandle = async (row: any) => {
    console.log(row)
    await ElMessageBox.confirm('你是否需要删除吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        // 确认按钮事件处理
        .then(() => {
            DelJDsetAPI(row.id).then(() => {
                ElMessage({
                    message: '删除成功!',
                    type: 'success'
                })
                gettabledata(params)
            })
        })
}
// #endregion
</script>
<template>
    <el-card class="box-card mt-2">
        <template #header>
            <h4>基础物流费用</h4>
        </template>
        <!-- 新增模块 -->
        <div class="ml-5 flex">
            <el-input-number
                placeholder="请输入内容"
                style="width: 150px"
                v-model="deposit"
                :step="1"
                :min="0"
                :max="500"
            />

            <el-button type="primary" @click="addJDffund" class="ml-2">新增押金</el-button>
        </div>
        <!-- 表格模块 -->
        <div>
            <el-table :data="tablelist" style="width: 100%">
                <el-table-column align="center" prop="logisticsPrice" label="基础物流运费">
                    <template #default="{ row, $index }">
                        <span v-if="!showEdit[$index]">{{ row.logisticsPrice }}</span>
                        <div v-else style="margin-left: 100px; width: 100px">
                            <el-input
                                v-model="row.logisticsPrice"
                                placeholder="请输入基础物流运费"
                            ></el-input>
                        </div> </template
                ></el-table-column>
                <el-table-column align="center" prop="address" label="基础物流运费">
                    <template #default="{ row, $index }">
                        <span v-if="!showEdit[$index]">{{ row.address }}</span>
                        <div v-else style="margin-left: 100px; width: 100px">
                            <el-input v-model="row.address" placeholder="请输入物流地址"></el-input>
                        </div> </template
                ></el-table-column>
                <el-table-column align="center" label="操作">
                    <template #default="{ row, $index }">
                        <!-- 编辑 -->
                        <el-button
                            v-if="!showEdit[$index]"
                            type="primary"
                            @click="Edit(row, $index)"
                            plain
                            >编辑</el-button
                        >
                        <!-- 编辑确认 -->
                        <el-button v-else type="primary" @click="sure(row, $index)" plain
                            >确认</el-button
                        >
                        <!-- 删除 -->
                        <el-button type="primary" @click="Delhandle(row, $index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页模块 -->
        <div>
            <el-pagination
                v-model:current-page="params.pageNo"
                v-model:page-size="params.pageSize"
                :page-sizes="[5, 15, 30, 45, 60]"
                layout="jumper, total, sizes, prev, pager, next"
                :total="tableCount"
                background
                @size-change="onSizeChange"
                @current-change="onCurrentChange"
                style="margin-top: 20px; justify-content: flex-end"
            />
        </div>
    </el-card>
</template>