You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

254 lines
6.8 KiB
Vue

<template>
<div class="head">
<el-row>
<el-form-item>
<el-input v-model="searchInfo.name" placeholder="请输入病区名称" style="margin-left: 10px;"/>
</el-form-item>
<el-button @click="InpatientWardGetListAction()" style="margin-left: 10px;">搜索</el-button>
<el-button type="primary" @click="Add()" style="margin-left: 10px;">添加</el-button>
</el-row>
</div>
<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
<el-table-column prop="id" label="Id" width="100" />
<el-table-column prop="name" label="病区名称" />
<el-table-column prop="status" label="状态" >
<template #default="scope">
<el-tag v-if="scope.row.status==1" class="ml-2" type="success">正常</el-tag>
<el-tag v-if="scope.row.status==0" class="ml-2" type="danger">关闭</el-tag>
</template>
</el-table-column>
<el-table-column prop="" label="关联账号" >
<template #default="scope">
<el-button v-if="scope.row.status==1" @click="addUser(scope.row)" size="small">添加账号</el-button>
<div style="color: #00aaff; font-size: 12px; cursor: pointer;" @click="gotoUserList(scope.row)">
已关联{{scope.row.user_list.length}}个</div>
</template>
</el-table-column>
<el-table-column prop="" label="操作">
<template #default="scope">
<el-button type="primary" @click="Edit(scope.row)" size="small" style="margin-left: 10px;">修改</el-button>
<el-button type="danger" @click="Del(scope.row.id)" size="small" style="margin-left: 10px;">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="page">
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
:page-sizes="[15, 50, 100, 200]" layout="total,sizes, prev, pager, next" :total="total"
@size-change="PageSizeChange" @current-change="PageCurrentChange" />
</div>
<el-dialog v-model="dialogVisible" title="病区信息" width="30%">
<el-form :model="Info" label-width="100px" v-loading="loading" style="padding-right: 40px;">
<el-form-item label="病区名称:">
<el-input v-model="Info.name" />
</el-form-item>
<el-form-item label="病区状态:">
<el-switch v-model="Info.status" size="large" active-text="正常" inactive-text="关闭"
:active-value="1" :inactive-value="0" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="Save">
确定
</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="addUserdialogVisible" title="添加用户" width="30%">
<el-form :model="addUserInfo" label-width="100px" v-loading="loading" style="padding-right: 40px;">
<el-form-item label="姓名:">
<el-input v-model="addUserInfo.cname" />
</el-form-item>
<el-form-item label="账号:">
<el-input v-model="addUserInfo.uname" />
</el-form-item>
<el-form-item label="角色:">
<el-select :filterable="true" clearable v-model="addUserInfo.groupId" placeholder="选择角色"
style="margin-left: 10px;">
<el-option v-for="(item ,index) in groupList_new" :label="item.group_name" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="addUserdialogVisible = false">取消</el-button>
<el-button type="primary" @click="addUserSave()">
</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import {
ref,
onMounted,computed
} from 'vue'
import {
InpatientWardGetList,InpatientWardSave,InpatientWardDel,
SaveSystemUserInfo,
getGroupList
} from '@/api/api.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const groupList_new = computed(() => {
return groupList.value.filter(item => (item.id ==2));
});
let loading=ref(false);
let searchInfo=ref({
name:''
})
let Info=ref({
id:null,
name:'',
status:1
})
let dialogVisible=ref(false);
//获取设备list
let tableData = ref([])
let currentPage = ref(1) //当前页码
let pageSize = ref(15) //每页数量
let total = 0 //总数量
const InpatientWardGetListAction=()=>{
loading.value = true
InpatientWardGetList({searchInfo:searchInfo.value,page:currentPage.value,pageSize:pageSize.value}).then(res => {
loading.value = false
if (res.status) {
tableData.value=res.data.list
total=res.data.count
} else {
ElMessage.error(res.msg)
}
})
}
const PageSizeChange = (e) => { // 修改每页数量
pageSize.value = e
InpatientWardGetListAction()
}
const PageCurrentChange = (e) => { //切换页码
currentPage.value = e
InpatientWardGetListAction()
}
//添加账号
let addUserdialogVisible =ref(false);
let addUserInfo=ref({
id:0,
department_id:null,
ward:null,
cname:'',
uname:'',
groupId:'',
status:1
})
const addUser=(row)=>{
addUserdialogVisible.value=true
addUserInfo.value.ward=row.name
}
const addUserSave=()=>{
if(addUserInfo.value.cname=='' || addUserInfo.value.uname=='' ||addUserInfo.value.groupId==''){
ElMessage.error("请填写全部信息")
return false
}
SaveSystemUserInfo({
userInfo: addUserInfo.value,
}).then(res => {
loading.value = false
if (res.status=='ok') {
addUserdialogVisible.value=false
ElMessage({
message: '添加成功',
type: 'success',
})
InpatientWardGetListAction()
} else {
ElMessage.error(res.msg)
}
})
}
const Add=()=>{
dialogVisible.value=true
Info.id=null
searchInfo.name=''
}
const Edit=(row)=>{
Info.value={
id:row.id,
name:row.name,
status:row.status
}
dialogVisible.value=true
}
const Del=(id)=>{
ElMessageBox.confirm(
'确定删除吗?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
InpatientWardDel({id:id}).then(res => {
loading.value = false
if (res.status) {
InpatientWardGetListAction()
} else {
ElMessage.error(res.msg)
}
})
})
}
//保存操作
const Save=()=>{
loading.value = true
InpatientWardSave({Info:Info.value}).then(res => {
loading.value = false
if (res.status) {
dialogVisible.value=false
InpatientWardGetListAction()
} else {
ElMessage.error(res.msg)
}
})
}
let groupList=ref('');
const getGroup=()=>{
getGroupList().then(res => {
loading.value = false
if (res.status=='ok') {
groupList.value=res.list
} else {
ElMessage.error(res.msg)
}
})
}
const gotoUserList=(row)=>{
window.location.href = "./#/adminUserList?ward=" + row.name
}
onMounted(()=>{
getGroup()
InpatientWardGetListAction()
})
</script>
<style scoped>
.page {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
</style>