<template>
|
<div class="user-management">
|
<!-- 搜索和操作区域 -->
|
<el-form :inline="true" class="demo-form-inline" style="background-color: white;padding-top: 20px; padding-left: 10px;">
|
<el-form-item label="">
|
<el-input v-model="search.userNameOrMobile" placeholder="请输入用户名/手机号"></el-input>
|
</el-form-item>
|
<el-form-item label="用户状态">
|
<el-select v-model="search.isValid" placeholder="请选择用户状态" style="width: 100px;">
|
<el-option label="全部" value=""></el-option>
|
<el-option label="启用" :value="1"></el-option>
|
<el-option label="禁用" :value="0"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSearch"> <el-icon><Search /></el-icon>查询</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onAddUser"><el-icon><Plus /></el-icon>新增用户</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 用户列表 -->
|
<el-table :data="tableData" style="width: 100%;background-color: white; min-height: 700px;">
|
<el-table-column prop="userName" label="用户姓名"></el-table-column>
|
<el-table-column prop="userNo" label="登录名"></el-table-column>
|
<el-table-column prop="userMobile" label="手机号"></el-table-column>
|
<el-table-column prop="createTime" label="注册时间"></el-table-column>
|
<el-table-column label="用户状态">
|
<template #default="scope">
|
<el-tag :type="scope.row.isValid === 1 ? 'success' : 'danger'">{{ scope.row.isValid === 1 ? '启用' : '禁用' }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="所属医院">
|
<template #default="scope">
|
<el-tag v-for="hospital in scope.row.clientInfos" :key="hospital" size="small" style="margin-right: 5px;">{{ hospital.clientName }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template #default="scope">
|
<el-button @click="onEdit(scope.$index, scope.row)"><el-icon><Edit /></el-icon></el-button>
|
|
<el-button @click="onDelete(scope.$index, scope.row)" style="color: red;"><el-icon><Delete /></el-icon></el-button>
|
<el-button @click="onRefresh(scope.$index, scope.row)" style="color: red;"><el-icon><Refresh /></el-icon></el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 分页 -->
|
<el-pagination style="margin-top: 20px;"
|
background
|
layout="prev, pager, next"
|
:total="total"
|
@current-change="handleCurrentChange"
|
></el-pagination>
|
<EditUser ref="editUserRef" @update:Search="onSearch" />
|
</div>
|
</template>
|
|
<script>
|
import { onMounted, ref } from 'vue';
|
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
|
import {listForNutrition,deleteId,apiResetPwd} from '/@/api/register'
|
import EditUser from './component/editUser.vue';
|
export default {
|
components: { EditUser },
|
setup() {
|
const search = ref({
|
userNameOrMobile: '',
|
isValid: '',
|
page:1,
|
size:10
|
});
|
const editUserRef=ref()
|
const tableData = ref([]);
|
|
const total = ref(1);
|
|
const onSearch = () => {
|
// 实现搜索逻辑
|
getDatas()
|
};
|
|
const onAddUser = () => {
|
// 实现新增用户逻辑
|
editUserRef.value.openDialog({
|
id:0,
|
userName:'',
|
userNo:'',
|
userMobile:'',
|
userGender:'',
|
isValid:1,
|
clientCodes:[],
|
remark:''
|
})
|
};
|
|
const onEdit = (index, row) => {
|
const pasm={
|
id:row.id,
|
userName:row.userName,
|
userNo:row.userNo,
|
userMobile:row.userMobile,
|
userGender:row.userGender,
|
isValid:row.isValid,
|
clientCodes:row.clientInfos.map(item=>item.code),
|
remark:row.remark
|
}
|
console.log(pasm)
|
// 实现编辑逻辑
|
editUserRef.value.openDialog(pasm)
|
|
};
|
|
const onDelete = (index, row) => {
|
// 实现删除逻辑
|
console.log(row)
|
ElMessageBox.confirm(`确定删除 "${row.userName}"？`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
deleteId({id:row.id}).then(res=>{
|
getDatas()
|
})
|
}).catch(() => {
|
// 用户取消删除
|
});
|
};
|
const onRefresh=(index,row)=>{
|
// 实现刷新逻辑
|
console.log(row)
|
const userCode = row.code; // 用户code
|
ElMessageBox.confirm(`确定重置 "${row.userName}" 的密码？`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(() => {
|
apiResetPwd(userCode).then(res=>{
|
ElMessage({
|
message: '密码已重置为123456',
|
type: 'success',
|
});
|
})
|
}).catch(() => {
|
// 用户取消删除
|
});
|
}
|
|
const handleCurrentChange = (currentPage) => {
|
search.value.page = currentPage;
|
getDatas()
|
// 实现分页逻辑
|
};
|
onMounted(async()=>{
|
getDatas()
|
|
})
|
const getDatas=()=>{
|
const loading = ElLoading.service({
|
lock: true,
|
text: 'Loading',
|
background: 'rgba(0, 0, 0, 0.7)',
|
})
|
listForNutrition(search.value).then(res=>{
|
tableData.value=res.data.list
|
total.value=res.data.total
|
console.log(res)
|
|
}).finally(()=>{
|
loading.close()
|
})
|
}
|
return {
|
search,
|
tableData,
|
total,
|
onSearch,
|
editUserRef,
|
onAddUser,
|
onEdit,
|
onDelete,
|
onRefresh,
|
handleCurrentChange
|
};
|
}
|
};
|
</script>
|
|
<style scoped>
|
body {
|
background-color: #8c3e3e;
|
}
|
.user-management {
|
padding: 50px;
|
}
|
.demo-form-inline {
|
margin-bottom: 20px;
|
}
|
</style>
|
