mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2025-08-23 20:44:58 +08:00
🚧 医院列表
This commit is contained in:
parent
0edba5a83b
commit
cf7584e014
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名" prop="userName">
|
||||
<el-input v-model="formData.userName" placeholder="请输入用户名" :disabled="type === 'edit'"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色" prop="role">
|
||||
<el-select v-model="formData.role" placeholder="请选择角色">
|
||||
<el-option v-for="item in roleOption" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="mailbox">
|
||||
<el-input v-model="formData.mailbox" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入电话"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="启用" prop="time">
|
||||
<el-radio-group v-model="formData.enable">
|
||||
<el-radio :label="true" border>有效</el-radio>
|
||||
<el-radio :label="false" border>禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="text-align: right;padding-top: 80px;">
|
||||
<el-button class="f18" @click="close">取消</el-button>
|
||||
<el-button class="f18" type="primary" @click="saveData">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const props = defineProps({
|
||||
type: String
|
||||
})
|
||||
|
||||
const roleOption = [
|
||||
{ label: '普通用户', value: '普通用户' },
|
||||
{ label: '中级管理员', value: '中级管理员' },
|
||||
{ label: '高级管理员', value: '高级管理员' },
|
||||
]
|
||||
const rules = reactive({
|
||||
userName: [
|
||||
{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] },
|
||||
],
|
||||
role: [
|
||||
{ required: true, message: '请选择角色', trigger: ['blur', 'change'] },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '请输入电话', trigger: ['blur', 'change'] },
|
||||
],
|
||||
})
|
||||
|
||||
const formRef = ref()
|
||||
const formData = ref({
|
||||
id: '',
|
||||
userName: '',
|
||||
name: '',
|
||||
role: '',
|
||||
mailbox: '',
|
||||
phone: '',
|
||||
enable: true,
|
||||
} as any)
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
resetData()
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
formData,
|
||||
resetData,
|
||||
})
|
||||
function close() {
|
||||
emit('close')
|
||||
}
|
||||
function resetData() {
|
||||
formRef.value.resetFields()
|
||||
formData.value = {
|
||||
id: '',
|
||||
userName: '',
|
||||
name: '',
|
||||
role: '',
|
||||
mailbox: '',
|
||||
phone: '',
|
||||
enable: true,
|
||||
}
|
||||
}
|
||||
const saveData = async () => {
|
||||
await formRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
ElMessage.success('保存成功!')
|
||||
close()
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
:deep(.el-form-item) {
|
||||
.el-form-item__label {
|
||||
display: block;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
padding: 0 10px 0 20px;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,14 +1,122 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
<div class="table-page">
|
||||
<div class="search-part">
|
||||
<div class="search-cell">
|
||||
<span class="label">医院名称</span>
|
||||
<el-input v-model="queryParams.userName" placeholder="请输入医院名称"></el-input>
|
||||
</div>
|
||||
<el-button type="primary" icon="Search" @click="queryData(queryParams)">查询</el-button>
|
||||
<el-button icon="Refresh" @click="queryParams = {}">重置</el-button>
|
||||
</div>
|
||||
<div class="button-part">
|
||||
<el-button type="primary" icon="FirstAidKit" @click="addData">新增</el-button>
|
||||
<el-button icon="Delete" @click="removeData()">删除</el-button>
|
||||
<el-button icon="Download" @click="exportData('医生数据', tableData)">导出</el-button>
|
||||
</div>
|
||||
<div class="table-part">
|
||||
<el-table ref="tableRef" :data="tableData" height="100%" border show-overflow-tooltip
|
||||
@row-click="tableRowClick">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column type="index" label="#" width="55" align="center" />
|
||||
<el-table-column property="name" label="姓名" width="120" align="center" />
|
||||
<el-table-column label="手机号" width="220" align="center">
|
||||
<template #default="scope">{{ scope.row.phone.slice(0, 3) + '****' + scope.row.phone.slice(7)
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="role" label="角色" width="220" align="center" />
|
||||
<el-table-column label="启用" width="120" align="center">
|
||||
<template #default="scope">
|
||||
<span @click.stop><el-switch v-model="scope.row.enable" @change="enableChange(scope.row)" /></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<span @click.stop>
|
||||
<el-button link icon="RefreshLeft" @click="resetPassword(scope.row)">密码</el-button>
|
||||
<el-button link icon="EditPen" @click="editData(scope.row)">修改</el-button>
|
||||
<el-button link icon="Delete" @click="removeData(scope.row)">删除</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination-part">
|
||||
<CommonPagination :total="100" @paginationChange="paginationChange" />
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="isFormDialog" :title="formDialogTitle" width="40%"><DoctorForm ref="doctorFormRef" :type="formDialogTitle === '添加' ? 'add' : 'edit'" @close="isFormDialog = false" /></el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { tableRemoveRow, exportData } from '@/utils/table-util'
|
||||
import CommonPagination from '@/components/common-pagination.vue'
|
||||
import DoctorForm from './form/doctor-form.vue'
|
||||
|
||||
const tableRef = ref()
|
||||
const doctorFormRef = ref()
|
||||
const isFormDialog = ref(false)
|
||||
const formDialogTitle = ref('')
|
||||
const queryParams = ref({
|
||||
userName: ''
|
||||
} as any)
|
||||
const tableData = ref([] as any)
|
||||
|
||||
queryData({userName: '测试'})
|
||||
|
||||
function queryData (e: any) {
|
||||
tableData.value = []
|
||||
while (tableData.value.length < 10) {
|
||||
tableData.value.push({
|
||||
userName: 'cscs',
|
||||
name: e.userName,
|
||||
phone: '12312345678',
|
||||
role: '高级管理员',
|
||||
enable: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
const addData = () => {
|
||||
isFormDialog.value = true
|
||||
formDialogTitle.value = '添加'
|
||||
setTimeout(() => {
|
||||
doctorFormRef.value.resetData()
|
||||
}, 0)
|
||||
}
|
||||
const removeData = (e?: any) => {
|
||||
const selectRow = e || tableRef.value.getSelectionRows()
|
||||
tableRemoveRow({ data: selectRow }, (res: boolean) => {
|
||||
if (res) {
|
||||
console.log('调用删除', selectRow)
|
||||
}
|
||||
})
|
||||
}
|
||||
const enableChange = (e: any) => {
|
||||
|
||||
}
|
||||
const resetPassword = (e: any) => {
|
||||
ElMessageBox.confirm('是否确定要重置密码?', '系统提醒', { type: 'warning' }).then(() => {
|
||||
ElMessage.success('重置成功!')
|
||||
}).catch(() => { })
|
||||
}
|
||||
const editData = (e: any) => {
|
||||
isFormDialog.value = true
|
||||
formDialogTitle.value = '修改'
|
||||
setTimeout(() => {
|
||||
doctorFormRef.value.resetData()
|
||||
doctorFormRef.value.formData = e
|
||||
}, 0)
|
||||
}
|
||||
const tableRowClick = (row: any) => {
|
||||
tableRef.value.toggleRowSelection(row)
|
||||
}
|
||||
const paginationChange = (page: number, size: number) => {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue
Block a user