vue项目记录锁定和解锁功能实现
更新时间:2022年3月7日 16:52 点击:1052 作者:chengqiuming
本文实例为大家分享了vue项目记录锁定和解锁功能实现代码,供大家参考,具体内容如下
一、定义 api 模块
import request from '@/utils/request' export default { // 分页查询 getHospitalList(current, limit, searchObj) { return request({ url: `/admin/hospital/findPageHospital/${current}/${limit}`, method: 'post', data: searchObj // 使用 json 进行参数传递 }) }, // 单条删除医院 deleteHospital(id) { return request({ url: `/admin/hospital/${id}`, method: 'delete' }) }, // 批量删除医院 removeHospitals(idList) { return request({ url: `/admin/hospital/batchRemove`, method: 'delete', data: idList }) }, //锁定和取消锁定 lockHospital(id, status) { return request({ url: `/admin/hospital/lockHospital/${id}/${status}`, method: 'put' }) } }
二、页面部分
<template> <div class="app-container"> <!-- 条件查询 --> <el-form :inline="true" class="demo-form-inline"> <el-form-item> <el-input v-model="searchObj.name" placeholder="医院名称" /> </el-form-item> <el-form-item> <el-input v-model="searchObj.province" placeholder="省" /> </el-form-item> <el-form-item> <el-input v-model="searchObj.city" placeholder="市" /> </el-form-item> <el-form-item> <el-input v-model="searchObj.district" placeholder="区" /> </el-form-item> <el-button type="primary" icon="el-icon-search" @click="getList()">搜索</el-button> </el-form> <!-- 批量删除按钮 --> <div> <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button> </div> <!-- 列表 --> <el-table :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange"> <!-- 复选框 --> <el-table-column type="selection" width="55" /> <el-table-column type="index" width="50" /> <el-table-column prop="name" label="名称" /> <el-table-column prop="province" label="省" /> <el-table-column prop="city" label="市" /> <el-table-column prop="district" label="区" /> <el-table-column label="状态" width="80"> <template slot-scope="scope">{{ scope.row.status === 1 ? '可用' : '不可用' }}</template> </el-table-column> <el-table-column label="操作" width="280" align="center"> <template slot-scope="scope"> <!-- 删除按钮 --> <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)" >删除</el-button> <!-- 锁定按钮 --> <el-button v-if="scope.row.status==1" type="primary" size="mini" icon="el-icon-delete" @click="lockHospital(scope.row.id,0)" >锁定</el-button> <!-- 解锁按钮 --> <el-button v-if="scope.row.status==0" type="danger" size="mini" icon="el-icon-delete" @click="lockHospital(scope.row.id,1)" >解锁</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <el-pagination :current-page="page" :page-size="limit" :total="total" style="padding: 30px 0; text-align: center;" layout="total, prev, pager, next, jumper" @current-change="getList" /> </div> </template> </div> </template> <script> // 引入接口定义的 js 文件 import hospital from "@/api/hospital"; export default { // 定义变量和初始值 data() { return { current: 1, // 当前页 limit: 3, // 每页显示记录数 searchObj: {}, // 条件封装对象 list: [], // 没页数据集合 total: 0, // 总记录数 multipleSelection: [] // 批量选择中选择的记录列表 }; }, // 在页面渲染之前执行,一般调用 methods 中定义的方法,得到数据 created() { this.getList(); }, methods: { // 定义方法,进行请求接口调用 // 锁定和解锁 lockHospital(id, status) { hospital.lockHospital(id, status).then(response => { // 刷新 this.getList(); }); }, // 当表格复选框选项发生变化的时候触发 handleSelectionChange(selection) { this.multipleSelection = selection; }, // 批量删除医院 removeRows() { this.$confirm("此操作将永久删除医院信息, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { // 确定执行 then 方法 var idList = []; // 遍历数组得到每个 id 值,设置到 idList 里面 for (var i = 0; i < this.multipleSelection.length; i++) { var obj = this.multipleSelection[i]; var id = obj.id; idList.push(id); } // 调用接口 hospital.removeHospitals(idList).then(response => { // 提示 this.$message({ type: "success", message: "删除成功!" }); // 刷新页面 this.getList(); }); }); }, // 医院列表 getList(page = 1) { // 添加当前页参数 this.current = page; hospital .getHospitalList(this.current, this.limit, this.searchObj) .then(response => { // response 是接口返回数据 this.list = response.data.records; this.total = response.data.total; }) // 请求成功 .catch(error => {}); }, // 请求失败 // 单条删除医院 removeDataById(id) { this.$confirm("此操作将永久删除医院信息, 是否继续?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { // 确定执行 then 方法 // 调用接口 hospital.deleteHospital(id).then(response => { // 提示 this.$message({ type: "success", message: "删除成功!" }); // 刷新页面 this.getList(1); }); }); } } }; </script>
三、测试效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/chengqiuming/article/details/120686531
上一篇: vue实现导航收缩框
下一篇: Vue自定义省市区三级联动
相关文章
iPhone输错密码导致手机锁定怎么办 iPhone输错密码手机锁定解决方法
如果反复输错屏幕密码,手机就会进入锁定模式,也就是永久停用状态,只能抹掉数据以解除锁定状态和清除锁屏密码...2022-09-14- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20