前端单表增删改查 vue3

  前端接口

import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { Form, Query } from '@/api/orderPay/types';

/**
* 分页查询
* @param query
*/
export const page = (query: Query): AxiosPromise<Form[]> => {
return request({
url: '/ota/sys/order-pay/page',
method: 'get',
params: query
});
};

/**
* 详情
* @param id
*/
export const info = (id: number | undefined) => {
return request({
url: '/ota/sys/order-pay/info/' + id,
method: 'post'
});
};

/**
* 新增
* @param data
*/
export const save = (data: Form) => {
return request({
url: '/ota/sys/order-pay/save',
method: 'post',
data: data
});
};

/**
* 修改
* @param data
*/
export const update = (data: Form) => {
return request({
url: '/ota/sys/order-pay/update',
method: 'post',
data: data
});
};

/**
* 删除
* @param id
*/
export const remove = (id: number | undefined) => {
return request({
url: '/ota/sys/order-pay/remove/' + id,
method: 'post'
});
};

前端types

export interface Query extends PageQuery {
/**
* 姓名
*/
name?: string;
}
export interface Form {
id?: number;
/**
* 姓名
*/
name?: string;
/**
* 电话
*/
phone?: string;
/**
* 人数
*/
number?: number;
/**
* 邮箱
*/
email?: string;
/**
* 地址
*/
address?: string;
}

前端单表列表

<template>
<div>
<!-- 查询条件 -->
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
<el-form-item label="姓名: ">
<el-input v-model="queryParams.name" placeholder="请输入姓名" filterable clearable style="width: 200px" @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>

<!-- 按钮 -->
<el-card shadow="hover">
<template #header>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="openAdd">新增</el-button>
</el-col>
</el-row>
</template>

<!-- 表格数据 -->
<el-table v-loading="loading" :data="dataList">
<el-table-column prop="id" label="支付订单号" align="center" width="150px" />
<el-table-column prop="name" label="姓名" align="center" width="150px" />
<el-table-column prop="phone" label="电话" align="center" />
<el-table-column prop="number" label="人数" align="center" />
<el-table-column prop="email" label="邮箱" align="center" />
<el-table-column prop="address" label="地址" align="center" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-tooltip content="详情" placement="top">
<el-button link type="primary" icon="View" @click="openInfo(scope.row)" />
</el-tooltip>
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="openUpdate(scope.row)" />
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
<!-- 详情 -->
<order-pay-edit ref="infoRef" @close="getList" />
<!-- 新增 -->
<order-pay-edit ref="addRef" @close="getList" />
<!-- 修改 -->
<order-pay-edit ref="updateRef" @close="getList" />
</el-card>
</div>
</template>

<script setup name="OrderPay" lang="ts">
import { page, remove } from '@/api/orderPay';
import { Form, Query } from '@/api/orderPay/types';
import OrderPayEdit from '@/views/orderPay/orderPayEdit.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const data = reactive<PageData<Form, Query>>({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10
},
rules: {}
});
const { queryParams } = toRefs<PageData<Form, Query>>(data);
const queryFormRef = ref<ElFormInstance>();
const dataList = ref<Form[]>([]);
const loading = ref(false);
const total = ref(0);
const addRef = ref<InstanceType<typeof OrderPayEdit>>();
const updateRef = ref<InstanceType<typeof OrderPayEdit>>();
const infoRef = ref<InstanceType<typeof OrderPayEdit>>();

/**
* 重置按钮操作
*/
const resetQuery = () => {
queryParams.value.name = undefined;
handleQuery();
};
/**
* 查询菜单列表
*/
const getList = async () => {
loading.value = true;
const res = await page(queryParams.value);
dataList.value = res.rows;
total.value = res.total;
loading.value = false;
};

/**
* 搜索按钮
*/
const handleQuery = () => {
getList();
};

/**
* 打开新增弹窗
*/
const openAdd = () => {
addRef.value?.show({});
};

/**
* 打开修改弹窗
*/
const openUpdate = (row: Form) => {
updateRef.value?.show(row);
};

/**
* 打开详情弹窗
*/
const openInfo = (row: Form) => {
infoRef.value?.showInfo(row);
};

/**
* 删除
*/
const handleDelete = async (row: Form) => {
await proxy?.$modal.confirm('是否确认删除');
loading.value = true;
const res = await remove(row.id);
if (res.code !== 200) {
proxy?.$modal.msgError(res.msg);
return;
}proxy?.$modal.msgSuccess('删除成功');
getList();
};

onMounted(() => {
getList();
});
</script>

前端单表新增

<template>
<el-dialog v-model="visible" :title="title" destroy-on-close append-to-body width="1000px">
<el-form ref="editFormRef" :model="editParams" :inline="true" label-width="120px" :disabled="isDetail">
<el-form-item label="姓名 " prop="name">
<el-input v-model.trim="editParams.name" placeholder="请输入姓名" clearable style="width: 200px" />
</el-form-item>
<el-form-item label="电话: " prop="phone">
<el-input v-model.trim="editParams.phone" placeholder="请输入电话" clearable style="width: 200px" />
</el-form-item>
<el-form-item label="人数: " prop="number">
<el-input v-model.trim="editParams.number" placeholder="请输入人数" clearable style="width: 200px" />
</el-form-item>
<el-form-item label="邮箱: " prop="email">
<el-input v-model.trim="editParams.email" placeholder="请输入邮箱" clearable style="width: 200px" />
</el-form-item>
<el-form-item label="地址: " prop="address">
<el-input v-model.trim="editParams.address" placeholder="请输入地址" clearable style="width: 200px" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="handeleSubmit">确 定</el-button>
<el-button @click="visible = false">取 消</el-button>
</div>
</template>
</el-dialog>
</template>

<script setup name="OrderPayEdit" lang="ts">
import { Form } from '@/api/orderPay/types';
import { info, save, update } from '@/api/orderPay';
import { variables } from '@/utils/selects';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const editFormRef = ref<ElFormInstance>();
const visible = ref(false);
const editParams = ref<Form>({});
const title = ref('新增');
const isDetail = ref(false);
/**
* 提交
*/
const handeleSubmit = async () => {
const res = title.value == '新增' ? await save(editParams.value) : await update(editParams.value);
if (res.code !== 200) {
proxy?.$modal.msgError(res.msg);
}proxy?.$modal.msgSuccess(res.msg);
visible.value = false;
};

/**
* 显示
*/
const show = (params: Form) => {
editParams.value = {};
if (Object.keys(params).length > 0) {
title.value = '修改';
editParams.value = params;
}visible.value = true;
};

/**
* 详情
*/
const showInfo = async (params: Form) => {
editParams.value = {};
// 请求结果获取详情结果
const res = await info(params.id);
if (res != null && res.code !== 200) {
proxy?.$modal.msgError('订单查询失败, 原因: ' + res.msg);
return;
}title.value = '详情';
editParams.value = res.data;
isDetail.value = true;
visible.value = true;
};

// 暴露
defineExpose({
show,
showInfo
});
</script>