6.9 KiB
6.9 KiB
Vue3 + TypeScript + Element Plus 页面生成提示词
当需要创建新的前端页面时,按照以下模板生成代码:
API 接口定义模板
// src/api/{module}/{name}.ts
import request from '@/utils/request'
/**
* {业务名称} VO 接口
*/
export interface {Name}VO {
id?: number | string
// ... 其他字段
}
/**
* {业务名称} Form 接口
*/
export interface {Name}Form {
id?: number | string
// ... 其他字段
}
/**
* {业务名称} 查询参数
*/
export interface {Name}Query {
pageNum: number
pageSize: number
// ... 其他查询字段
}
/**
* 查询{业务名称}列表
*/
export const list{Name} = (params: {Name}Query) => {
return request({
url: '/{module}/{path}/list',
method: 'get',
params
})
}
/**
* 查询{业务名称}详情
*/
export const get{Name} = (id: number | string) => {
return request({
url: `/{module}/{path}/${id}`,
method: 'get'
})
}
/**
* 新增{业务名称}
*/
export const add{Name} = (data: {Name}Form) => {
return request({
url: '/{module}/{path}',
method: 'post',
data
})
}
/**
* 修改{业务名称}
*/
export const update{Name} = (data: {Name}Form) => {
return request({
url: '/{module}/{path}',
method: 'put',
data
})
}
/**
* 删除{业务名称}
*/
export const del{Name} = (ids: (number | string)[]) => {
return request({
url: `/{module}/{path}/${ids}`,
method: 'delete'
})
}
列表页面模板
<!-- src/views/{module}/{name}/index.vue -->
<script setup lang="ts" name="{Name}">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { {Name}VO, {Name}Query } from '@/api/{module}/{name}'
import { list{Name}, del{Name} } from '@/api/{module}/{name}'
// 查询参数
const queryParams = reactive<{Name}Query>({
pageNum: 1,
pageSize: 10
})
// 数据
const dataList = ref<{Name}VO[]>([])
const total = ref(0)
const loading = ref(false)
// 对话框
const dialogVisible = ref(false)
const dialogTitle = ref('')
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const res = await list{Name}(queryParams)
dataList.value = res.rows
total.value = res.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNum = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryParams.pageNum = 1
queryParams.pageSize = 10
// 重置其他查询字段
getList()
}
/** 新增按钮操作 */
const handleAdd = () => {
dialogTitle.value = '添加{业务名称}'
dialogVisible.value = true
}
/** 修改按钮操作 */
const handleUpdate = (row: {Name}VO) => {
dialogTitle.value = '修改{业务名称}'
dialogVisible.value = true
}
/** 删除按钮操作 */
const handleDelete = async (row: {Name}VO) => {
try {
await ElMessageBox.confirm(`是否确认删除该{业务名称}?`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
await del{Name}([row.id!])
ElMessage.success('删除成功')
await getList()
} catch (error) {
console.error(error)
}
}
// 初始化
getList()
</script>
<template>
<div class="p-2">
<!-- 搜索栏 -->
<el-form :model="queryParams" :inline="true">
<el-form-item label="关键词" prop="keyword">
<el-input
v-model="queryParams.keyword"
placeholder="请输入关键词"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<i-ep-search /> 搜索
</el-button>
<el-button @click="resetQuery">
<i-ep-refresh /> 重置
</el-button>
</el-form-item>
</el-form>
<!-- 工具栏 -->
<el-row :gutter="10" class="mb-2">
<el-col :span="1.5">
<el-button
type="primary"
plain
@click="handleAdd"
v-hasPermi="['{module}:{function}:add']"
>
<i-ep-plus /> 新增
</el-button>
</el-col>
</el-row>
<!-- 表格 -->
<el-table
v-loading="loading"
:data="dataList"
border
stripe
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="ID" prop="id" width="100" />
<!-- 其他列 -->
<el-table-column label="操作" align="center" width="150" fixed="right">
<template #default="{ row }">
<el-button
link
type="primary"
@click="handleUpdate(row)"
v-hasPermi="['{module}:{function}:edit']"
>
修改
</el-button>
<el-button
link
type="danger"
@click="handleDelete(row)"
v-hasPermi="['{module}:{function}:remove']"
>
删除
</el-button>
</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"
/>
<!-- 表单对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
<!-- 表单内容 -->
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitForm">确定</el-button>
</template>
</el-dialog>
</div>
</template>
表单组件模板
<!-- src/views/{module}/{name}/components/{Name}Form.vue -->
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import type { {Name}Form } from '@/api/{module}/{name}'
import { add{Name}, update{Name} } from '@/api/{module}/{name}'
const props = defineProps<{
id?: number | string
}>()
const emit = defineEmits<{
success: []
cancel: []
}>()
const formRef = ref<FormInstance>()
const formData = reactive<{Name}Form>({})
const rules = reactive<FormRules<{Name}Form>>({
// 字段验证规则
})
const submitForm = async () => {
if (!formRef.value) return
await formRef.value.validate()
try {
if (props.id) {
await update{Name}(formData)
} else {
await add{Name}(formData)
}
emit('success')
} catch (error) {
console.error(error)
}
}
defineExpose({
submitForm
})
</script>
<template>
<el-form
ref="formRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<!-- 表单项 -->
</el-form>
</template>
注意事项
- 所有占位符
{xxx}需要替换为实际值 - 使用 Composition API 和
<script setup>语法 - 权限指令格式:
v-hasPermi="['模块:功能:操作']" - 使用 Element Plus 图标:
<i-ep-icon-name /> - 表单验证规则根据实际需求添加
- 使用 TypeScript 进行类型约束
- 组件命名使用 PascalCase