|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<!-- 设置字符编码为UTF-8，确保页面能正确显示各种字符 -->
|
|
|
<meta charset="utf-8">
|
|
|
<!-- 设置页面在不同设备上的显示适配，width=device-width表示宽度与设备宽度一致，initial-scale=1表示初始缩放比例为1，maximum-scale=1表示最大缩放比例为1 -->
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
<!-- 设置页面标题为医生添加 -->
|
|
|
<title>医生添加</title>
|
|
|
<!-- 引入bootstrap样式文件，用于地图插件等相关样式 -->
|
|
|
<link rel="stylesheet" href="../../css/bootstrap.min.css" />
|
|
|
<!-- 引入layui的CSS样式文件，layui是一个前端框架，提供了丰富的组件和样式 -->
|
|
|
<link rel="stylesheet" href="../../layui/css/layui.css">
|
|
|
<!-- 引入自定义的样式文件style.css，用于页面的特定样式设置 -->
|
|
|
<link rel="stylesheet" href="../../css/style.css" />
|
|
|
<!-- 引入主题样式文件theme.css，主要用于设置页面的主要颜色等主题相关样式 -->
|
|
|
<link rel="stylesheet" href="../../css/theme.css" />
|
|
|
<!-- 引入通用的CSS文件common.css，包含一些通用的样式规则 -->
|
|
|
<link rel="stylesheet" href="../../css/common.css" />
|
|
|
</head>
|
|
|
|
|
|
<style>
|
|
|
/* 设置页面背景的伪元素样式，固定在页面上，覆盖整个页面，用于设置背景图片等 */
|
|
|
html::after {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
content: '';
|
|
|
display: block;
|
|
|
background-attachment: fixed;
|
|
|
background-size: cover;
|
|
|
background-position: center;
|
|
|
z-index: -1;
|
|
|
}
|
|
|
|
|
|
/* 轮播图容器样式，设置溢出隐藏，水平居中 */
|
|
|
#swiper {
|
|
|
overflow: hidden;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
/* 轮播图指示器（小圆点）的普通样式，设置大小、边框、背景等 */
|
|
|
#swiper .layui-carousel-ind li {
|
|
|
width: 20px;
|
|
|
height: 10px;
|
|
|
border-width: 0;
|
|
|
border-style: solid;
|
|
|
border-color: rgba(0, 0, 0,.3);
|
|
|
border-radius: 6px;
|
|
|
background-color: #f7f7f7;
|
|
|
box-shadow: 0 0 6px rgba(255, 0, 0,.8);
|
|
|
}
|
|
|
|
|
|
/* 轮播图指示器中当前激活项的样式，与普通样式有区别，这里设置了不同的宽度 */
|
|
|
#swiper .layui-carousel-ind li.layui-this {
|
|
|
width: 30px;
|
|
|
height: 10px;
|
|
|
border-width: 0;
|
|
|
border-style: solid;
|
|
|
border-color: rgba(0, 0, 0,.3);
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
|
|
|
/* 按钮和按钮获得焦点时的样式，去除默认的轮廓 */
|
|
|
button,
|
|
|
button:focus {
|
|
|
outline: none;
|
|
|
}
|
|
|
|
|
|
/* 数据添加容器中选择框的标题样式，设置内边距、高度、字体大小、边框等 */
|
|
|
.data-add-container .add.layui-select-title.layui-unselect {
|
|
|
padding: 0 12px;
|
|
|
height: 40px;
|
|
|
font-size: 15px;
|
|
|
border-radius: 4px;
|
|
|
border-width: 1px;
|
|
|
border-style: solid;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
/* 数据添加容器中表单元素的样式，设置为弹性布局，水平和垂直居中 */
|
|
|
.data-add-container .add.layui-form-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
/* 数据添加容器中特定表单面板的表单元素标签样式，去除默认的外边距、定位、背景和边框 */
|
|
|
.data-add-container.layui-form-pane.layui-form-item[pane].layui-form-label {
|
|
|
margin: 0;
|
|
|
position: inherit;
|
|
|
background: transparent;
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
/* 数据添加容器中输入框容器的样式，设置为弹性布局，占据剩余空间 */
|
|
|
.data-add-container .add.layui-input-block {
|
|
|
margin: 0;
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
/* 数据添加容器中特定表单面板的表单元素内联输入框容器的样式，设置为弹性布局，占据剩余空间 */
|
|
|
.data-add-container.layui-form-pane.layui-form-item[pane].layui-input-inline {
|
|
|
margin: 0;
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<body style="background: #EEEEEE; ">
|
|
|
<!-- Vue实例挂载的根元素 -->
|
|
|
<div id="app">
|
|
|
|
|
|
<!-- 轮播图容器，使用layui的轮播图组件，设置样式属性 -->
|
|
|
<div class="layui-carousel" id="swiper" :style='{"boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
|
|
|
<!-- 轮播图的项目容器，id为swiper-item -->
|
|
|
<div carousel-item id="swiper-item">
|
|
|
<!-- 使用v-for循环渲染轮播图的每一项，根据swiperList数据动态生成 -->
|
|
|
<div v-for="(item, index) in swiperList" :key="index">
|
|
|
<img style="width: 100%; height: 100%; object-fit: cover;" :src="item.img" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 轮播图结束 -->
|
|
|
|
|
|
<!-- 数据添加容器，设置样式属性，用于包裹医生信息添加表单 -->
|
|
|
<div class="data-add-container sub_borderColor" :style='{"padding":"20px","margin":"30px auto","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"10px","borderWidth":"1px","borderStyle":"solid"}'>
|
|
|
|
|
|
<!-- 使用layui的表单组件，设置表单过滤器为myForm，用于表单验证和提交等操作 -->
|
|
|
<form class="layui-form layui-form-pane add" lay-filter="myForm">
|
|
|
<!-- 医生工号输入项的表单元素 -->
|
|
|
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
|
|
|
<!-- 标签，设置宽度、内边距、字体大小、颜色和文本对齐方式 -->
|
|
|
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
|
|
|
医生工号：
|
|
|
</label>
|
|
|
<!-- 输入框容器 -->
|
|
|
<div class="layui-input-block">
|
|
|
<!-- 医生工号输入框，使用v-model双向绑定数据，设置样式、验证规则、只读状态等 -->
|
|
|
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
|
|
|
v-model="detail.yishengUuidNumber" lay-verify="required" type="text" :readonly="ro.yishengUuidNumber" name="yishengUuidNumber" id="yishengUuidNumber" autocomplete="off">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 账户输入项的表单元素，结构和样式设置与医生工号类似 -->
|
|
|
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
|
|
|
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
|
|
|
账户：
|
|
|
</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
|
|
|
v-model="detail.username" type="text" :readonly="ro.username" name="username" id="username" autocomplete="off">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 医生名称输入项的表单元素 -->
|
|
|
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
|
|
|
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
|
|
|
医生名称：
|
|
|
</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
|
|
|
v-model="detail.yishengName" type="text" :readonly="ro.yishengName" name="yishengName" id="yishengName" autocomplete="off">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 职位选择项的表单元素 -->
|
|
|
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
|
|
|
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
|
|
|
职位：
|
|
|
</label>
|
|
|
<div class="layui-input-block">
|
|
|
<!-- 职位选择框，使用select元素，设置lay-filter用于监听选择事件，v-for循环渲染选项 -->
|
|
|
<select name="zhiweiTypes" id="zhiweiTypes" lay-filter="zhiweiTypes">
|
|
|
<option value="">请选择</option>
|
|
|
<option v-for="(item, index) in zhiweiTypesList" v-bind:key="index" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 职称输入项的表单元素 -->
|
|
|
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
|
|
|
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
|
|
|
职称：
|
|
|
</label>
|
|
|
<div class="layui-input-block">
|
|
|
<input class="layui-input main_borderColor" :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(160, 67, 26, 1)","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"15px","borderStyle":"solid","height":"40px"}'
|
|
|
v-model="detail.yishengZhichneg" type="text" :readonly="ro.yishengZhichneg" name="yishengZhichneg" id="yishengZhichneg" autocomplete="off">
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 医生头像相关的表单元素 -->
|
|
|
<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
|
|
|
<label :style='{"width":"110px","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
|
|
|
医生头像：
|
|
|
</label>
|
|
|
<div class="layui-input-block">
|
|
|
<!-- 如果存在医生头像数据，则显示头像图片和隐藏的头像路径输入框 -->
|
|
|
<div v-if="detail.yishengPhoto" style="display: inline-block; margin-right: 10px;">
|
|
|
<img id="yishengPhotoImg" style="width: 100px; height: 100px; border-radius: 50%; border: 2px solid #EEEEEE;" :src="detail.yishengPhoto">
|
|
|
<input type="hidden" :value="detail.yishengPhoto" id="yishengPhoto" name="yishengPhoto" />
|
|
|
</div>
|
|
|
<!-- 如果头像不是只读状态，则显示上传头像按钮 -->
|
|
|
<button v-if="!ro.yishengPhoto" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 1 |
