vue项目记录锁定和解锁功能
chengqiuming 人气:0一、定义 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>
三、测试效果
加载全部内容