后台数据管理系统 - 项目架构设计-Vue3+axios+Element-plus（0926）

ops/2024/10/4 22:30:33/

十四、文章分类添加编辑 [element-plus 弹层]

Git仓库：https://gitee.com/msyycn/vue3-hei-ma.git

点击显示弹层

  1. 准备弹层
const dialogVisible = ref(false)<el-dialog v-model="dialogVisible" title="添加弹层" width="30%"><div>我是内容部分</div><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary"> 确认 </el-button></span></template>
</el-dialog>
  1. 点击事件
<template #extra><el-button type="primary" @click="onAddChannel">添加分类</el-button></template>const onAddChannel = () => {dialogVisible.value = true
}

封装弹层组件 ChannelEdit

添加 和 编辑，可以共用一个弹层，所以可以将弹层封装成一个组件

组件对外暴露一个方法 open, 基于 open 的参数，初始化表单数据，并判断区分是添加 还是 编辑

  1. open({ }) => 添加操作，添加表单初始化无数据
  2. open({ id: xx, … }) => 编辑操作，编辑表单初始化需回显

具体实现：

  1. 封装组件 article/components/ChannelEdit.vue
<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)const open = async (row) => {dialogVisible.value = trueconsole.log(row)
}defineExpose({open
})
</script><template><el-dialog v-model="dialogVisible" title="添加弹层" width="30%"><div>我是内容部分</div><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary"> 确认 </el-button></span></template></el-dialog>
</template>
  1. 通过 ref 绑定
const dialog = ref()<!-- 弹窗 -->
<channel-edit ref="dialog"></channel-edit>
  1. 点击调用方法显示弹窗
const onAddChannel = () => {dialog.value.open({})
}
const onEditChannel = (row) => {dialog.value.open(row)
}

ChannelEdit.vue(封装的组件)

<script setup>
import {ref} from 'vue'const dialogVisible = ref(false) //弹层状态// 组件对外暴露一个方法，open ,基于open 传来的参数，区分添加还是编辑
// open ({}) => 表单无需渲染，说明是添加分
// open ({id, name}) => 表单需要渲染，说明是编辑分类
// open调用后，可以打开弹窗
const open = (row) =>{console.log(row)dialogVisible.value = true}
// 向外暴露一个方法，close，关闭弹窗
defineExpose({open
})
</script><template>//弹层<el-dialogv-model="dialogVisible"title="添加弹层"width="500":before-close="handleClose"><div>渲染表单</div><span>我是内容部分  </span><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="dialogVisible = false">确认</el-button></div></template></el-dialog>
</template>

ArticleChannel.vue

<script setup>
import { artGetChannelsService } from '@/api/article'
import { Delete,Edit } from   '@element-plus/icons-vue'import {ref} from 'vue'
import ChannelEdit from './components/ChannelEdit.vue'
const channelList = ref([]) // 文章分类列表
const loading = ref(false) //加载状态const dialog = ref()
// 获取文章分类列表
const getChannelList = async () => {// 发请求之前先将loading设置为trueloading.value = true// 调用接口const res = await artGetChannelsService()channelList.value = res.data.data// channelList.value = []// 发完请求，关闭loadingloading.value = false// console.log('文章分类列表',channelList.value);}// 调用获取文章分类列表
getChannelList()// 编辑文章分类
const onEditChannel =(row) =>{
// console.log(row,$index)
dialog.value.open({row})
}       // 删除文章分类
const onDelChannel =(row,$index)=>{console.log(row,$index)}
const onAddChannel = () => {dialog.value.open({})
}</script><template><div><!-- 按需引入 --><page-container title="文章分类"> <!-- 右侧按钮 - 添加文章 - 具名插槽 --><template #extra><el-button @click="onAddChannel">添加分类</el-button></template><!-- 主体部分--表格 --><el-table :data="channelList" style="width: 100%" v-loading="loading"><el-table-column   label="序号"    type="index"  width="100" ></el-table-column><el-table-column   label="分类名称" prop="cate_name" ></el-table-column><el-table-column   label="分类别名" prop="cate_alias" ></el-table-column><el-table-column   label="操作"      width="100"><template #default="{row,$index}"><el-button  @click="onEditChannel(row,$index)" plain :icon="Edit" circle type="primary" ></el-button><el-button  @click="onDelChannel(row,$index)" plain :icon="Delete" circle type="danger" ></el-button></template></el-table-column><!-- 没有数据 --><template #empty><el-empty description="暂无数据"></el-empty></template></el-table><!-- 添加分类弹窗 --><channel-edit ref="dialog"> </channel-edit></page-container></div>
</template><style lang="scss" scoped>
</style>

预览视图

请添加图片描述

准备弹层表单

  1. 准备数据 和 校验规则
const formModel = ref({cate_name: '',cate_alias: ''
})
const rules = {cate_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' },{pattern: /^\S{1,10}$/,message: '分类名必须是1-10位的非空字符',trigger: 'blur'}],cate_alias: [{ required: true, message: '请输入分类别名', trigger: 'blur' },{pattern: /^[a-zA-Z0-9]{1,15}$/,message: '分类别名必须是1-15位的字母数字',trigger: 'blur'}]
}
  1. 准备表单
<el-form:model="formModel":rules="rules"label-width="100px"style="padding-right: 30px"
><el-form-item label="分类名称" prop="cate_name"><el-inputv-model="formModel.cate_name"minlength="1"maxlength="10"></el-input></el-form-item><el-form-item label="分类别名" prop="cate_alias"><el-inputv-model="formModel.cate_alias"minlength="1"maxlength="15"></el-input></el-form-item>
</el-form>
  1. 编辑需要回显，表单数据需要初始化
const open = async (row) => {dialogVisible.value = trueformModel.value = { ...row }//不回显的话，需要修改为// formModel.value = {...row.row} 即可
}
  1. 基于传过来的表单数据，进行标题控制，有 id 的是编辑
:title="formModel.id ? '编辑分类' : '添加分类'"

确认提交

  1. api/article.js 封装请求 API
// 添加文章分类
export const artAddChannelService = (data) => request.post('/my/cate/add', data)
// 编辑文章分类
export const artEditChannelService = (data) =>request.put('/my/cate/info', data)
  1. 页面中校验，判断，提交请求
<el-form ref="formRef">

const formRef = ref()
const onSubmit = async () => {await formRef.value.validate()formModel.value.id? await artEditChannelService(formModel.value): await artAddChannelService(formModel.value)ElMessage({type: 'success',message: formModel.value.id ? '编辑成功' : '添加成功'})dialogVisible.value = false
}
  1. 通知父组件进行回显
const emit = defineEmits(['success'])const onSubmit = async () => {...emit('success')
}
  1. 父组件监听 success 事件，进行调用回显
<channel-edit ref="dialog" @success="onSuccess"></channel-edit>const onSuccess = () => {getChannelList()
}

源码

ChannelEdit.vue

<script setup>
import {ref} from 'vue'const dialogVisible = ref(false) //弹层状态// 组件对外暴露一个方法，open ,基于open 传来的参数，区分添加还是编辑
// open ({}) => 表单无需渲染，说明是添加分
// open ({id, name}) => 表单需要渲染，说明是编辑分类
// open调用后，可以打开弹窗
const open = async (row) =>{// console.log(row)dialogVisible.value = trueformModel.value = {...row.row} //添加 =》 重置了表单内容，编辑-> 存储了需要回显的数据
console.log('formModel:',formModel.value)
console.log(formModel.value.row.cate_name)}// 向外暴露一个方法，close，关闭弹窗
defineExpose({open
})const formModel = ref({cate_name:'',cate_alias:'' //别名
})// 表单校验规则
const rules ={cate_name:[{required:true,message:'请输入分类名称',trigger:'blur'},{pattern:/^\S{1,10}$/,message:'分类名称长度在1-10个字符之间',trigger:'blur'}],cate_alias:[{required:true,message:'请输入分类别名',trigger:'blur'},{pattern:/^[a-zA-Z0-9]{1,15}$/,message:'分类名称长度在1-15个字母或数字之间',trigger:'blur'}]}// 表单提交
import { artEditChannelService,artAddChannelService } from '@/api/article'
// import { ElMessage } from 'element-plus';
const formRef = ref()
const emit = defineEmits(['success'])
const onSubmit = async () => {await formRef.value.validate()const isEdit = formModel.value.idif(isEdit){// 编辑await artEditChannelService(formModel.value)ElMessage.success('编辑成功') }else {// 添加await artAddChannelService(formModel.value)ElMessage.success('添加成功')}// 无论编辑成功还是添加成功都需要关闭弹窗dialogVisible.value = falseemit('success',isEdit) // 触发父组件的success事件}
</script><template><el-dialog v-model="dialogVisible":title="formModel.id ? '编辑分类' : '添加分类'"width="500":before-close="handleClose"><!-- 渲染表单 --><el-form   ref="formRef" :model="formModel" :rules="rules" label-width="100px" style="padding-right:30px ;"><el-form-item label="分类名称" prop="cate_name" ><el-input v-model="formModel.cate_name" placeholder="请输入分类名称"></el-input></el-form-item><el-form-item label="分类别名" prop="cate_alias" ><el-input v-model="formModel.cate_alias" placeholder="请输入分类别名"></el-input></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="onSubmit"> 确认 </el-button></div></template></el-dialog>
</template>

ArticleChannel.vue

<script setup>
import { artGetChannelsService } from '@/api/article'
import { Delete,Edit } from   '@element-plus/icons-vue'import {ref} from 'vue'
import ChannelEdit from './components/ChannelEdit.vue'
const channelList = ref([]) // 文章分类列表
const loading = ref(false) //加载状态const dialog = ref()
// 获取文章分类列表
const getChannelList = async () => {// 发请求之前先将loading设置为trueloading.value = true// 调用接口const res = await artGetChannelsService()channelList.value = res.data.data// channelList.value = []// 发完请求，关闭loadingloading.value = false// console.log('文章分类列表',channelList.value);}// 调用获取文章分类列表
getChannelList()// 编辑文章分类
const onEditChannel =(row) =>{
// console.log(row,$index)
dialog.value.open({row})
}       // 删除文章分类
const onDelChannel =(row,$index)=>{console.log(row,$index)}
const onAddChannel = () => {dialog.value.open({})
}const onSuccess =()=>{// 刷新文章分类列表getChannelList()
}</script><template><div><!-- 按需引入 --><page-container title="文章分类"> <!-- 右侧按钮 - 添加文章 - 具名插槽 --><template #extra><el-button @click="onAddChannel">添加分类</el-button></template><!-- 主体部分--表格 --><el-table :data="channelList" style="width: 100%" v-loading="loading"><el-table-column   label="序号"    type="index"  width="100" ></el-table-column><el-table-column   label="分类名称" prop="cate_name" ></el-table-column><el-table-column   label="分类别名" prop="cate_alias" ></el-table-column><el-table-column   label="操作"      width="100"><template #default="{row,$index}"><el-button  @click="onEditChannel(row,$index)" plain :icon="Edit" circle type="primary" ></el-button><el-button  @click="onDelChannel(row,$index)" plain :icon="Delete" circle type="danger" ></el-button></template></el-table-column><!-- 没有数据 --><template #empty><el-empty description="暂无数据"></el-empty></template></el-table><!-- 添加分类弹窗 --><channel-edit ref="dialog" @success="onSuccess"> </channel-edit></page-container></div>
</template><style lang="scss" scoped>
</style>

预览视图
请添加图片描述

文章分类删除

  1. api/article.js封装接口 api
// 删除文章分类
export const artDelChannelService = (id) =>request.delete('/my/cate/del', {params: { id }})
  1. 页面中添加确认框，调用接口进行提示（ArticleChannel.vue)
const onDelChannel = async (row) => {await ElMessageBox.confirm('你确认删除该分类信息吗？', '温馨提示', {type: 'warning',confirmButtonText: '确认',cancelButtonText: '取消'})await artDelChannelService(row.id)ElMessage({ type: 'success', message: '删除成功' })getChannelList()
}

预览视图

请添加图片描述
文章分类模块完结，撒花儿~~***


http://www.ppmy.cn/ops/120128.html

相关文章

解决macOS MySQL安装后不能远程访问的问题

解决macOS MySQL安装后不能远程访问的问题

主要是因为我的后端服务是通过docker部署的, 无法和宿主机的MySQL进行通信. 首先输入 use mysql; 之后输入 update user set host “%” where user “root”; 最后输入 flush privileges; 合起来就是: use mysql;update user set host "%" where user &qu…
阅读更多...
玄机：第二章 日志分析-redis应急响应

玄机：第二章 日志分析-redis应急响应

简介 服务器场景操作系统 Linux 服务器账号密码 root xjredis 任务环境说明 注&#xff1a;样本请勿在本地运行&#xff01;&#xff01;&#xff01;样本请勿在本地运行&#xff01;&#xff01;&#xff01;样本请勿在本地运行&#xff01;&#xff01;&#xff01; 应急…
阅读更多...
【Spine】引入PhotoshopToSpine脚本

【Spine】引入PhotoshopToSpine脚本

引入 右键Photoshop图标&#xff0c;选择属性 打开文件所在位置 找到目录下的\Presets\Scripts文件夹。 找到Spine目录下的\scripts\photoshop文件夹下的PhotoshopToSpine.jsx 复制它&#xff0c;丢到Photoshop刚才找的那个目录下。 使用 打开.psd文件&#xff0c;检查不要…
阅读更多...
基于Hive和Hadoop的图书分析系统

基于Hive和Hadoop的图书分析系统

本项目是一个基于大数据技术的图书分析系统&#xff0c;旨在为用户提供全面的图书信息和深入的图书销售及阅读行为分析。系统采用 Hadoop 平台进行大规模数据存储和处理&#xff0c;利用 MapReduce 进行数据分析和处理&#xff0c;通过 Sqoop 实现数据的导入导出&#xff0c;以…
阅读更多...
PostgreSQL 窗口函数学习指南

PostgreSQL 窗口函数学习指南

PostgreSQL 是一个功能强大的开源关系数据库管理系统&#xff0c;广泛应用于数据分析、Web 应用和企业级解决方案中。窗口函数是 PostgreSQL 中的一项强大特性&#xff0c;允许用户在查询结果中进行复杂的计算和分析&#xff0c;而无需使用子查询或连接。 本文将深入探讨 Post…
阅读更多...
httpsok-v1.17.0-SSL通配符证书自动续签

httpsok-v1.17.0-SSL通配符证书自动续签

&#x1f525;httpsok-v1.17.0-SSL通配符证书自动续签 介绍 httpsok 是一个便捷的 HTTPS 证书自动续签工具&#xff0c;基于全新的设计理念&#xff0c;专为 Nginx 、OpenResty 服务器设计。已服务众多中小企业&#xff0c;稳定、安全、可靠。 一行命令&#xff0c;一分钟轻…
阅读更多...
CSS | CSS中强大的margin负边距

CSS | CSS中强大的margin负边距

css中的负边距(negative margin)是布局中的一个常用技巧&#xff0c;只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距&#xff0c;所以掌握它的用法对于前端的同学来说&#xff0c;那是必须的。本文非常基础&#xff0c;老鸟可以略过。 一、负边距…
阅读更多...
第七章综合实践：JPA+Thymeleaf增删改查

第七章综合实践：JPA+Thymeleaf增删改查

学习目标 7.1 模型开发7.1.1entity7.1.2 repository7.1.3 service 7.2 功能实现7.2.1 新增7.2.2 删除7.2.3 修改 (如果没有了解可以去我主页看看 第一至六章的内容来学习)我们已经对Spring Boot相关知识点进行了系统学习&#xff0c;包括项目构建、数据访问层、表示层等。考虑到…
阅读更多...
最新文章

Copyright @ 2022~2023