|
|
|
|
@ -1,243 +1,311 @@
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<!-- 元数据定义 -->
|
|
|
|
|
<!-- 设置字符编码为 UTF-8，确保页面能正确显示各种语言字符 -->
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<!-- 响应式视口设置，让页面在不同设备上能自适应显示 -->
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
|
|
<!-- 页面标题，显示在浏览器标签栏 -->
|
|
|
|
|
<title>注册</title>
|
|
|
|
|
|
|
|
|
|
<!-- CSS样式表引入 -->
|
|
|
|
|
<!-- 引入 LayUI 框架样式，用于构建页面布局和组件 -->
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
|
|
|
|
|
<!-- 引入公共样式表，包含一些通用的样式设置 -->
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../xznstatic/css/public.css"/>
|
|
|
|
|
<!-- 引入登录相关样式，可能包含注册页面的特定样式 -->
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../xznstatic/css/login.css"/>
|
|
|
|
|
|
|
|
|
|
<!-- 引入主题样式，设置页面整体的视觉风格 -->
|
|
|
|
|
<link rel="stylesheet" href="../../css/theme.css" />
|
|
|
|
|
|
|
|
|
|
<!-- 内联 CSS 样式 -->
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
/* 注册页面主容器样式 */
|
|
|
|
|
/* 使用弹性布局，让内容在水平和垂直方向上都居中显示 */
|
|
|
|
|
.register {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
/* 背景图片固定，不随页面滚动而移动 */
|
|
|
|
|
background-attachment: fixed;
|
|
|
|
|
/* 背景图片覆盖整个容器 */
|
|
|
|
|
background-size: cover;
|
|
|
|
|
/* 背景图片居中显示 */
|
|
|
|
|
background-position: center;
|
|
|
|
|
/* 设置背景图片 */
|
|
|
|
|
background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 表单样式 */
|
|
|
|
|
/* 使用盒模型计算方式，包含内边距和边框 */
|
|
|
|
|
.register form {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
/* 表单最小高度为 400px */
|
|
|
|
|
min-height: 400px;
|
|
|
|
|
display: flex;
|
|
|
|
|
/* 表单元素垂直排列 */
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
/* 表单元素垂直居中 */
|
|
|
|
|
justify-content: center !important;
|
|
|
|
|
}
|
|
|
|
|
.register .logo, .register .title {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
.register .logo img {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 标题和 logo 样式 */
|
|
|
|
|
/* 标题文字居中显示 */
|
|
|
|
|
.register .title {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 表单项样式 */
|
|
|
|
|
/* 使用弹性布局，让表单项内元素垂直居中 */
|
|
|
|
|
.register .form-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
/* 表单项内元素允许换行 */
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
.register .form-item input, .register .form-label {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 提交按钮样式 */
|
|
|
|
|
/* 提交按钮为块级元素 */
|
|
|
|
|
.register .btn-submit {
|
|
|
|
|
display: block;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
.register form p.txt {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
.layui-unselect{
|
|
|
|
|
margin-left: -5px;
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
border: 0px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Vue.js 应用容器 -->
|
|
|
|
|
<!-- 该容器为 Vue 实例的挂载点 -->
|
|
|
|
|
<div class="register" id="app">
|
|
|
|
|
<form class="layui-form login-form" lay-filter="myForm" :style='{"padding":"20px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"20px","borderWidth":"0","width":"400px","borderStyle":"solid","justifyContent":"center","height":"auto"}'>
|
|
|
|
|
<p class="title" v-if="true" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(247, 247, 247, 0)","color":"red","isshow":true,"borderRadius":"8px","borderWidth":"0","width":"110px","lineHeight":"32px","fontSize":"17px","borderStyle":"solid"}'>医生注册</p>
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
|
|
|
|
|
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">医生工号：</label>
|
|
|
|
|
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="yishengUuidNumber" name="yishengUuidNumber" placeholder="请输入医生工号" autocomplete="off" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
|
|
|
|
|
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">账户：</label>
|
|
|
|
|
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="username" name="username" placeholder="请输入账户" autocomplete="off" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
|
|
|
|
|
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">密码：</label>
|
|
|
|
|
<input type="password" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="password1|required" type="password" id="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
|
|
|
|
|
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">密码：</label>
|
|
|
|
|
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="password2|required" type="password" id="password2" name="password2" placeholder="请重复输入密码" autocomplete="off" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
|
|
|
|
|
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">医生名称：</label>
|
|
|
|
|
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="yishengName" name="yishengName" placeholder="请输入医生名称" autocomplete="off" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}'>
|
|
|
|
|
<div :style='{"margin-top":"10px","padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}'>
|
|
|
|
|
<select name="yishengTypes" id="yishengTypes">
|
|
|
|
|
<option value="">请选择科室</option>
|
|
|
|
|
<option v-for="(item,index) in yishengTypesList" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}'>
|
|
|
|
|
<div :style='{"margin-top":"10px","padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}'>
|
|
|
|
|
<select name="zhiweiTypes" id="zhiweiTypes">
|
|
|
|
|
<option value="">请选择职位</option>
|
|
|
|
|
<option v-for="(item,index) in zhiweiTypesList" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
|
|
|
|
|
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">职称：</label>
|
|
|
|
|
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="yishengZhichneg" name="yishengZhichneg" placeholder="请输入职称" autocomplete="off" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 手机号 -->
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
|
|
|
|
|
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">联系方式：</label>
|
|
|
|
|
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="phone|required" type="text" id="yishengPhone" name="yishengPhone" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
|
|
|
|
|
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">挂号须知：</label>
|
|
|
|
|
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="required" type="text" id="yishengGuahao" name="yishengGuahao" placeholder="请输入挂号须知" autocomplete="off" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 邮箱 -->
|
|
|
|
|
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","width":"80%","borderStyle":"solid","height":"64px"}' class="form-item layui-form-text">
|
|
|
|
|
<label v-if="false" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"#333","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"110px","fontSize":"16px","borderStyle":"solid"}' class="form-label">邮箱：</label>
|
|
|
|
|
<input :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","color":"rgba(59, 46, 126, 1)","borderRadius":"8px","textAlign":"left","borderWidth":"1px","width":"100%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-verify="email|required" type="text" id="yishengEmail" name="yishengEmail" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
<button class="layui-btn layui-btn-fluid layui-btn-danger btn-submit main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"60%","fontSize":"14px","borderStyle":"solid","height":"44px"}' lay-submit lay-filter="register" style="width: 280px;">注册</button>
|
|
|
|
|
<p :style='{"color":"rgba(59, 46, 126, 1)","textAlign":"left","fontSize":"12px"}' class="txt"><a href="javascript:window.location.href='../login/login.html'">已有账号登录</a></p>
|
|
|
|
|
<!-- 注册表单 -->
|
|
|
|
|
<!-- 使用 LayUI 表单，设置表单过滤器为 myForm -->
|
|
|
|
|
<form class="layui-form login-form" lay-filter="myForm">
|
|
|
|
|
<!-- 表单标题 -->
|
|
|
|
|
<p class="title">医生注册</p>
|
|
|
|
|
|
|
|
|
|
<!-- 医生工号输入框 -->
|
|
|
|
|
<!-- 设置输入框为必填项，输入提示为请输入医生工号 -->
|
|
|
|
|
<div class="form-item layui-form-text">
|
|
|
|
|
<input lay-verify="required" type="text" id="yishengUuidNumber" name="yishengUuidNumber" placeholder="请输入医生工号" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 用户名输入框 -->
|
|
|
|
|
<!-- 设置输入框为必填项，输入提示为请输入账户 -->
|
|
|
|
|
<div class="form-item layui-form-text">
|
|
|
|
|
<input lay-verify="required" type="text" id="username" name="username" placeholder="请输入账户" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 密码输入框 -->
|
|
|
|
|
<!-- 设置输入框为必填项，同时进行密码一致性验证，输入提示为请输入密码 -->
|
|
|
|
|
<div class="form-item layui-form-text">
|
|
|
|
|
<input lay-verify="password1|required" type="password" id="password" name="password" placeholder="请输入密码" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 确认密码输入框 -->
|
|
|
|
|
<!-- 设置输入框为必填项，同时进行密码一致性验证，输入提示为请重复输入密码 -->
|
|
|
|
|
<div class="form-item layui-form-text">
|
|
|
|
|
<input lay-verify="password2|required" type="password" id="password2" name="password2" placeholder="请重复输入密码" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 医生姓名输入框 -->
|
|
|
|
|
<!-- 设置输入框为必填项，输入提示为请输入医生名称 -->
|
|
|
|
|
<div class="form-item layui-form-text">
|
|
|
|
|
<input lay-verify="required" type="text" id="yishengName" name="yishengName" placeholder="请输入医生名称" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 科室选择下拉框 -->
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 初始选项为请选择科室 -->
|
|
|
|
|
<select name="yishengTypes" id="yishengTypes">
|
|
|
|
|
<option value="">请选择科室</option>
|
|
|
|
|
<!-- 使用 Vue 的 v-for 指令动态渲染科室选项 -->
|
|
|
|
|
<option v-for="(item,index) in yishengTypesList" :value="item.codeIndex">{{ item.indexName }}</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 职位选择下拉框 -->
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 初始选项为请选择职位 -->
|
|
|
|
|
<select name="zhiweiTypes" id="zhiweiTypes">
|
|
|
|
|
<option value="">请选择职位</option>
|
|
|
|
|
<!-- 使用 Vue 的 v-for 指令动态渲染职位选项 -->
|
|
|
|
|
<option v-for="(item,index) in zhiweiTypesList" :value="item.codeIndex">{{ item.indexName }}</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 职称输入框 -->
|
|
|
|
|
<!-- 设置输入框为必填项，输入提示为请输入职称 -->
|
|
|
|
|
<div class="form-item layui-form-text">
|
|
|
|
|
<input lay-verify="required" type="text" id="yishengZhichneg" name="yishengZhichneg" placeholder="请输入职称" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 联系方式输入框 -->
|
|
|
|
|
<!-- 设置输入框为必填项，同时进行手机号码格式验证，输入提示为请输入联系方式 -->
|
|
|
|
|
<div class="form-item layui-form-text">
|
|
|
|
|
<input lay-verify="phone|required" type="text" id="yishengPhone" name="yishengPhone" placeholder="请输入联系方式" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 挂号须知输入框 -->
|
|
|
|
|
<!-- 设置输入框为必填项，输入提示为请输入挂号须知 -->
|
|
|
|
|
<div class="form-item layui-form-text">
|
|
|
|
|
<input lay-verify="required" type="text" id="yishengGuahao" name="yishengGuahao" placeholder="请输入挂号须知" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 邮箱输入框 -->
|
|
|
|
|
<!-- 设置输入框为必填项，同时进行邮箱格式验证，输入提示为请输入邮箱 -->
|
|
|
|
|
<div class="form-item layui-form-text">
|
|
|
|
|
<input lay-verify="email|required" type="text" id="yishengEmail" name="yishengEmail" placeholder="请输入邮箱" class="layui-input">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 注册按钮 -->
|
|
|
|
|
<!-- 点击按钮提交表单，触发注册事件 -->
|
|
|
|
|
<button class="layui-btn" lay-submit lay-filter="register">注册</button>
|
|
|
|
|
|
|
|
|
|
<!-- 已有账号登录链接 -->
|
|
|
|
|
<!-- 点击链接跳转到登录页面 -->
|
|
|
|
|
<p class="txt"><a href="../login/login.html">已有账号登录</a></p>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- JavaScript 文件引入 -->
|
|
|
|
|
<!-- 引入 LayUI 框架 -->
|
|
|
|
|
<script src="../../layui/layui.js"></script>
|
|
|
|
|
<!-- 引入 Vue.js 框架 -->
|
|
|
|
|
<script src="../../js/vue.js"></script>
|
|
|
|
|
<!-- 引入element组件库 -->
|
|
|
|
|
<!-- 引入 Element UI 组件库 -->
|
|
|
|
|
<script src="../../xznstatic/js/element.min.js"></script>
|
|
|
|
|
<!-- 引入element样式 -->
|
|
|
|
|
<!-- 引入 Element UI 样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
|
|
|
|
|
<!-- 组件配置信息 -->
|
|
|
|
|
<!-- 引入组件配置信息 -->
|
|
|
|
|
<script src="../../js/config.js"></script>
|
|
|
|
|
<!-- 扩展插件配置信息 -->
|
|
|
|
|
<!-- 引入扩展插件配置 -->
|
|
|
|
|
<script src="../../modules/config.js"></script>
|
|
|
|
|
<!-- 工具方法 -->
|
|
|
|
|
<!-- 引入工具方法 -->
|
|
|
|
|
<script src="../../js/utils.js"></script>
|
|
|
|
|
<!-- 校验格式工具类 -->
|
|
|
|
|
<!-- 引入校验工具类 -->
|
|
|
|
|
<script src="../../js/validate.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 创建 Vue 实例
|
|
|
|
|
// 挂载到 id 为 app 的元素上
|
|
|
|
|
var vue = new Vue({
|
|
|
|
|
el: '#app',
|
|
|
|
|
data: {
|
|
|
|
|
// 科室类型列表，用于动态渲染科室下拉框选项
|
|
|
|
|
yishengTypesList : [],
|
|
|
|
|
// 职位类型列表，用于动态渲染职位下拉框选项
|
|
|
|
|
zhiweiTypesList : [],
|
|
|
|
|
},
|
|
|
|
|
updated: function() {
|
|
|
|
|
// 当 Vue 更新 DOM 后，重新渲染 LayUI 表单，确保表单样式正确显示
|
|
|
|
|
layui.form.render(null, 'myForm');
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 使用 LayUI 模块
|
|
|
|
|
layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function() {
|
|
|
|
|
// 获取 LayUI 模块
|
|
|
|
|
// 弹层组件，用于显示提示信息
|
|
|
|
|
var layer = layui.layer;
|
|
|
|
|
// 元素组件，用于操作页面元素
|
|
|
|
|
var element = layui.element;
|
|
|
|
|
// 轮播组件，这里未使用
|
|
|
|
|
var carousel = layui.carousel;
|
|
|
|
|
// 表单组件，用于处理表单相关操作
|
|
|
|
|
var form = layui.form;
|
|
|
|
|
// HTTP 请求组件，用于发送网络请求
|
|
|
|
|
var http = layui.http;
|
|
|
|
|
// jQuery 组件，用于操作 DOM 元素
|
|
|
|
|
var jquery = layui.jquery;
|
|
|
|
|
|
|
|
|
|
// 获取表名参数
|
|
|
|
|
var tablename = http.getParam('tablename');
|
|
|
|
|
//字典表数据容器
|
|
|
|
|
// 科室的查询和初始化
|
|
|
|
|
|
|
|
|
|
// 初始化科室下拉框
|
|
|
|
|
yishengTypesSelect();
|
|
|
|
|
// 职位的查询和初始化
|
|
|
|
|
// 初始化职位下拉框
|
|
|
|
|
zhiweiTypesSelect();
|
|
|
|
|
// 日期效验规则及格式
|
|
|
|
|
// 初始化日期选择器，这里未实现具体逻辑
|
|
|
|
|
dateTimePick();
|
|
|
|
|
// 表单效验规则
|
|
|
|
|
|
|
|
|
|
// 表单验证规则
|
|
|
|
|
form.verify({
|
|
|
|
|
// 正整数效验规则
|
|
|
|
|
// 正整数验证
|
|
|
|
|
integer: [
|
|
|
|
|
/^[1-9][0-9]*$/
|
|
|
|
|
,'必须是正整数'
|
|
|
|
|
]
|
|
|
|
|
// 小数效验规则
|
|
|
|
|
,double: [
|
|
|
|
|
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
|
|
|
|
|
,'最大整数位为6为,小数最大两位'
|
|
|
|
|
]
|
|
|
|
|
,password1: function(value, item){ //value：表单的值、item：表单的DOM对象
|
|
|
|
|
var password2 = jquery("#password2").val();
|
|
|
|
|
if(password2 != null && password2 != "" && password2 != "null"){
|
|
|
|
|
if(value != password2){
|
|
|
|
|
return '密码的两次密码不一致';
|
|
|
|
|
}
|
|
|
|
|
/^[1-9][0-9]*$/,
|
|
|
|
|
'必须是正整数'
|
|
|
|
|
],
|
|
|
|
|
// 小数验证
|
|
|
|
|
double: [
|
|
|
|
|
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/,
|
|
|
|
|
'最大整数位为 6 位，小数最大两位'
|
|
|
|
|
],
|
|
|
|
|
// 密码一致性验证 1
|
|
|
|
|
password1: function(value, item) {
|
|
|
|
|
var password2 = jquery("#password2").val();
|
|
|
|
|
if(password2 && value != password2){
|
|
|
|
|
return '密码的两次输入不一致';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
,password2: function(value, item){ //value：表单的值、item：表单的DOM对象
|
|
|
|
|
var password1 = jquery("#password1").val();
|
|
|
|
|
if(password1 != null && password1 != "" && password1 != "null"){
|
|
|
|
|
if(value != password1){
|
|
|
|
|
return '密码的两次密码不一致';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 密码一致性验证 2
|
|
|
|
|
password2: function(value, item) {
|
|
|
|
|
var password1 = jquery("#password1").val();
|
|
|
|
|
if(password1 && value != password1){
|
|
|
|
|
return '密码的两次输入不一致';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 注册
|
|
|
|
|
// 注册表单提交事件
|
|
|
|
|
form.on('submit(register)', function(data) {
|
|
|
|
|
// 获取表单数据
|
|
|
|
|
data = data.field;
|
|
|
|
|
// 发送注册请求
|
|
|
|
|
http.requestJson(tablename + '/register', 'post', data, function(res) {
|
|
|
|
|
// 注册成功提示
|
|
|
|
|
layer.msg('注册成功', {
|
|
|
|
|
// 2 秒后自动关闭提示框
|
|
|
|
|
time: 2000,
|
|
|
|
|
// 成功图标
|
|
|
|
|
icon: 6
|
|
|
|
|
},function(){
|
|
|
|
|
// 路径访问设置
|
|
|
|
|
}, function(){
|
|
|
|
|
// 跳转到登录页面
|
|
|
|
|
window.location.href = '../login/login.html';
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
return false
|
|
|
|
|
// 阻止表单默认提交
|
|
|
|
|
return false;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 日期框初始化
|
|
|
|
|
// 日期选择器初始化函数
|
|
|
|
|
function dateTimePick(){
|
|
|
|
|
// 可以在这里初始化日期选择器
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 科室的查询
|
|
|
|
|
function yishengTypesSelect() {
|
|
|
|
|
//填充下拉框选项
|
|
|
|
|
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=yisheng_types", "GET", {}, (res) => {
|
|
|
|
|
if(res.code == 0){
|
|
|
|
|
vue.yishengTypesList = res.data.list;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 职位的查询
|
|
|
|
|
function zhiweiTypesSelect() {
|
|
|
|
|
//填充下拉框选项
|
|
|
|
|
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=zhiwei_types", "GET", {}, (res) => {
|
|
|
|
|
if(res.code == 0){
|
|
|
|
|
vue.zhiweiTypesList = res.data.list;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 科室类型查询函数
|
|
|
|
|
function yishengTypesSelect() {
|
|
|
|
|
// 请求科室类型数据
|
|
|
|
|
http.request("dictionary/page?page=1&limit=100&dicCode=yisheng_types", "GET", {}, (res) => {
|
|
|
|
|
if(res.code == 0){
|
|
|
|
|
// 将数据存入 Vue 实例
|
|
|
|
|
vue.yishengTypesList = res.data.list;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 职位类型查询函数
|
|
|
|
|
function zhiweiTypesSelect() {
|
|
|
|
|
// 请求职位类型数据
|
|
|
|
|
http.request("dictionary/page?page=1&limit=100&dicCode=zhiwei_types", "GET", {}, (res) => {
|
|
|
|
|
if(res.code == 0){
|
|
|
|
|
// 将数据存入 Vue 实例
|
|
|
|
|
vue.zhiweiTypesList = res.data.list;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
