vue项目记录锁定和解锁功能实现
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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>三、测试效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
