prxhap34i
/
test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初始

Browse Source
zy
你çšcqq 1 month ago
parent 6638d124dc 4ae06f569a
commit 9d5a97c69b
29 changed files with 4767 additions and 6018 deletions
Show Stats Download Patch File Download Diff File

281
src/main/java/com/controller/YishengController.java
Unescape View File

@ -37,7 +37,6 @@ import com.alibaba.fastjson.*;
* @author
* @email
*/
// 声明为RESTful控制器，处理HTTP请求并返回JSON数据
@RestController
// 声明为Spring MVC控制器
@Controller
@ -51,10 +50,9 @@ public class YishengController {
@Autowired
private YishengService yishengService;
// 自动注入令牌服务类，用于生成和管理令牌
@Autowired
private TokenService tokenService;
// 自动注入字典服务类，用于字典表数据转换
@Autowired
private DictionaryService dictionaryService;
@ -63,159 +61,121 @@ public class YishengController {
private YonghuService yonghuService;
/**
* 后端获取医生信息列表（分页）
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
// 记录方法调用日志，包含控制器类名和请求参数
logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
// 从请求会话中获取用户角色
String role = String.valueOf(request.getSession().getAttribute("role"));
// 此条件永远为false，不会进入该分支
if(false)
return R.error(511,"永不会进入");
// 如果用户角色是"用户"
else if("用户".equals(role))
// 在请求参数中添加用户ID
params.put("yonghuId",request.getSession().getAttribute("userId"));
// 如果用户角色是"医生"
else if("医生".equals(role))
// 在请求参数中添加医生ID
params.put("yishengId",request.getSession().getAttribute("userId"));
// 如果请求参数中未指定排序字段，则默认按id排序
if(params.get("orderBy")==null || params.get("orderBy")==""){
params.put("orderBy","id");
}
// 调用医生服务的queryPage方法进行分页查询
PageUtils page = yishengService.queryPage(params);
// 将分页结果中的列表转换为医生视图列表
//字典表数据转换
List<YishengView> list =(List<YishengView>)page.getList();
// 遍历医生视图列表，进行字典表数据转换
for(YishengView c:list){
//修改对应字典表字段
dictionaryService.dictionaryConvert(c, request);
}
// 返回成功响应，并将分页结果数据放入响应中
return R.ok().put("data", page);
}
/**
* 后端获取医生信息详情
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id, HttpServletRequest request){
// 记录方法调用日志，包含控制器类名和请求的ID
logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
// 根据ID查询医生实体
YishengEntity yisheng = yishengService.selectById(id);
// 如果查询到医生实体
if(yisheng !=null){
// 创建医生视图对象
//entity转view
YishengView view = new YishengView();
// 将医生实体数据复制到医生视图中
BeanUtils.copyProperties(yisheng, view);
BeanUtils.copyProperties( yisheng , view );//把实体数据重构到view中
// 进行字典表数据转换
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
// 返回成功响应，并将医生视图数据放入响应中
return R.ok().put("data", view);
}else {
// 如果未查询到数据，返回错误响应
return R.error(511,"查不到数据");
}
}
/**
* 后端保存医生信息
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody YishengEntity yisheng, HttpServletRequest request) {
// 记录方法调用日志，包含控制器类名和要保存的医生实体信息
logger.debug("save方法:,,Controller:{},,yisheng:{}", this.getClass().getName(), yisheng.toString());
// 从请求会话中获取用户角色
String role = String.valueOf(request.getSession().getAttribute("role"));
// 此条件永远为false，不会进入该分支
if(false)
return R.error(511,"永远不会进入");
// 创建查询包装器，检查用户名或联系方式是否已存在
Wrapper<YishengEntity> queryWrapper = new EntityWrapper<YishengEntity>()
.eq("username", yisheng.getUsername())
.or()
.eq("yisheng_phone", yisheng.getYishengPhone());
// 记录生成的SQL查询语句
logger.info("sql语句:"+queryWrapper.getSqlSegment());
// 根据查询条件查询医生实体
YishengEntity yishengEntity = yishengService.selectOne(queryWrapper);
// 如果未查询到相同的医生实体
if(yishengEntity==null){
// 设置创建时间为当前时间
yisheng.setCreateTime(new Date());
// 设置默认密码为123456
yisheng.setPassword("123456");
// 插入医生信息到数据库
yishengService.insert(yisheng);
// 返回成功响应
return R.ok();
}else {
// 如果已存在相同的用户名或联系方式，返回错误响应
return R.error(511,"账户或者联系方式已经被使用");
}
}
/**
* 后端更新医生信息
* 后端修改
*/
@RequestMapping("/update")
public R update(@RequestBody YishengEntity yisheng, HttpServletRequest request) {
// 记录方法调用日志，包含控制器类名和要更新的医生实体信息
logger.debug("update方法:,,Controller:{},,yisheng:{}", this.getClass().getName(), yisheng.toString());
// 从请求会话中获取用户角色
String role = String.valueOf(request.getSession().getAttribute("role"));
// 此条件被注释掉，不会进入该分支
// if(false)
// return R.error(511,"永远不会进入");
// 创建查询包装器，排除当前要更新的记录，检查用户名或联系方式是否已存在
//根据字段查询是否有相同数据
Wrapper<YishengEntity> queryWrapper = new EntityWrapper<YishengEntity>()
.notIn("id",yisheng.getId())
.andNew()
.eq("username", yisheng.getUsername())
.or()
.eq("yisheng_phone", yisheng.getYishengPhone());
.eq("yisheng_phone", yisheng.getYishengPhone())
;
// 记录生成的SQL查询语句
logger.info("sql语句:"+queryWrapper.getSqlSegment());
// 根据查询条件查询医生实体
YishengEntity yishengEntity = yishengService.selectOne(queryWrapper);
// 如果医生照片为空字符串或"null"，设置为null
if("".equals(yisheng.getYishengPhoto()) || "null".equals(yisheng.getYishengPhoto())){
yisheng.setYishengPhoto(null);
}
// 如果未查询到相同的医生实体
if(yishengEntity==null){
// 根据ID更新医生信息
yishengService.updateById(yisheng);
// 返回成功响应
yishengService.updateById(yisheng);//根据id更新
return R.ok();
}else {
// 如果已存在相同的用户名或联系方式，返回错误响应
return R.error(511,"账户或者联系方式已经被使用");
}
}
/**
* 删除医生信息
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Integer[] ids){
// 记录方法调用日志，包含控制器类名和要删除的ID数组
logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
// 根据ID数组批量删除医生信息
yishengService.deleteBatchIds(Arrays.asList(ids));
// 返回成功响应
return R.ok();
}
@ -227,41 +187,28 @@ public class YishengController {
// 记录方法调用日志，包含控制器类名和文件名
logger.debug("batchInsert方法:,,Controller:{},,fileName:{}", this.getClass().getName(), fileName);
try {
// 创建列表用于存储要上传的医生实体
List<YishengEntity> yishengList = new ArrayList<>();
// 创建Map用于存储要查询的字段
Map<String, List<String>> seachFields = new HashMap<>();
// 获取当前日期
List<YishengEntity> yishengList = new ArrayList<>();//上传的东西
Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
Date date = new Date();
// 获取文件名中最后一个点的索引
int lastIndexOf = fileName.lastIndexOf(".");
// 如果文件名没有后缀，返回错误响应
if(lastIndexOf == -1){
return R.error(511,"该文件没有后缀");
}else{
// 获取文件后缀
String suffix = fileName.substring(lastIndexOf);
// 如果文件后缀不是.xls，返回错误响应
if(!".xls".equals(suffix)){
return R.error(511,"只支持后缀为xls的excel文件");
}else{
// 获取文件路径
URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);
// 创建文件对象
URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径
File file = new File(resource.getFile());
// 如果文件不存在，返回错误响应
if(!file.exists()){
return R.error(511,"找不到上传文件，请联系管理员");
}else{
// 读取xls文件数据
List<List<String>> dataList = PoiUtil.poiImport(file.getPath());
// 删除第一行（表头）
dataList.remove(0);
// 遍历数据行
List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
dataList.remove(0);//删除第一行，因为第一行是提示
for(List<String> data:dataList){
// 创建医生实体对象
//循环
YishengEntity yishengEntity = new YishengEntity();
// 以下字段赋值被注释，需根据实际情况修改
// yishengEntity.setYishengUuidNumber(data.get(0)); //医生工号 要改的
// yishengEntity.setUsername(data.get(0)); //账户 要改的
// //yishengEntity.setPassword("123456");//密码
@ -276,10 +223,10 @@ public class YishengController {
// yishengEntity.setYishengNewMoney(data.get(0)); //挂号价格 要改的
// yishengEntity.setYishengContent("");//照片
// yishengEntity.setCreateTime(date);//时间
// 将医生实体添加到列表中
yishengList.add(yishengEntity);
// 将可能重复的字段添加到seachFields中
//把要查询是否重复的字段放入map中
//医生工号
if(seachFields.containsKey("yishengUuidNumber")){
List<String> yishengUuidNumber = seachFields.get("yishengUuidNumber");
@ -309,7 +256,7 @@ public class YishengController {
}
}
// 检查是否有重复数据
//查询是否重复
//医生工号
List<YishengEntity> yishengEntities_yishengUuidNumber = yishengService.selectList(new EntityWrapper<YishengEntity>().in("yisheng_uuid_number", seachFields.get("yishengUuidNumber")));
if (yishengEntities_yishengUuidNumber.size() > 0) {
@ -337,29 +284,193 @@ public class YishengController {
}
return R.error(511, "数据库的该表中的 [联系方式] 字段已经存在 存在数据为:" + repeatFields.toString());
}
// 批量插入医生信息
yishengService.insertBatch(yishengList);
// 返回成功响应
return R.ok();
}
}
}
}catch (Exception e){
// 如果发生异常，返回错误响应
return R.error(511,"批量插入数据异常，请联系管理员");
}
}
/**
* 医生登录
* 登录
*/
@IgnoreAuth
@RequestMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
// 根据用户名查询医生实体
YishengEntity yisheng = yishengService.selectOne(new EntityWrapper<YishengEntity>().eq("username", username));
// 如果医生不存在或密码不正确
if(yisheng==null || !yisheng.getPassword().equals(password))
return R.error("账号或密码不正确");
// 以下代码被注释，可能是获取字典表相关操作，目前未启用
// //
// // 获取监听器中的字典表
// ServletContext servletContext = ContextLoader.getCurrentWebApplicationContext().getServletContext();
// Map<String, Map<Integer, String>> dictionaryMap= (Map<String, Map<Integer, String>>) servletContext.getAttribute("dictionaryMap");
// Map<Integer, String> role_types = dictionaryMap.get("role_types");
// role_types.get(.getRoleTypes());
String token = tokenService.generateToken(yisheng.getId(),username, "yisheng", "医生");
R r = R.ok();
r.put("token", token);
r.put("role","医生");
r.put("username",yisheng.getYishengName());
r.put("tableName","yisheng");
r.put("userId",yisheng.getId());
return r;
}
/**
* 注册
*/
@IgnoreAuth
@PostMapping(value = "/register")
public R register(@RequestBody YishengEntity yisheng){
// ValidatorUtils.validateEntity(user);
Wrapper<YishengEntity> queryWrapper = new EntityWrapper<YishengEntity>()
.eq("username", yisheng.getUsername())
.or()
.eq("yisheng_phone", yisheng.getYishengPhone())
;
YishengEntity yishengEntity = yishengService.selectOne(queryWrapper);
if(yishengEntity != null)
return R.error("账户或者联系方式已经被使用");
yisheng.setYishengNewMoney(0.0);
yisheng.setCreateTime(new Date());
yishengService.insert(yisheng);
return R.ok();
}
/**
* 重置密码
*/
@GetMapping(value = "/resetPassword")
public R resetPassword(Integer id){
YishengEntity yisheng = new YishengEntity();
yisheng.setPassword("123456");
yisheng.setId(id);
yishengService.updateById(yisheng);
return R.ok();
}
/**
* 忘记密码
*/
@IgnoreAuth
@RequestMapping(value = "/resetPass")
public R resetPass(String username, HttpServletRequest request) {
YishengEntity yisheng = yishengService.selectOne(new EntityWrapper<YishengEntity>().eq("username", username));
if(yisheng!=null){
yisheng.setPassword("123456");
boolean b = yishengService.updateById(yisheng);
if(!b){
return R.error();
}
}else{
return R.error("账号不存在");
}
return R.ok();
}
/**
* 获取用户的session用户信息
*/
@RequestMapping("/session")
public R getCurrYisheng(HttpServletRequest request){
Integer id = (Integer)request.getSession().getAttribute("userId");
YishengEntity yisheng = yishengService.selectById(id);
if(yisheng !=null){
//entity转view
YishengView view = new YishengView();
BeanUtils.copyProperties( yisheng , view );//把实体数据重构到view中
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 退出
*/
@GetMapping(value = "logout")
public R logout(HttpServletRequest request) {
request.getSession().invalidate();
return R.ok("退出成功");
}
/**
* 前端列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
// 没有指定排序字段就默认id倒序
if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
params.put("orderBy","id");
}
PageUtils page = yishengService.queryPage(params);
//字典表数据转换
List<YishengView> list =(List<YishengView>)page.getList();
for(YishengView c:list)
dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
return R.ok().put("data", page);
}
/**
* 前端详情
*/
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id, HttpServletRequest request){
logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
YishengEntity yisheng = yishengService.selectById(id);
if(yisheng !=null){
//entity转view
YishengView view = new YishengView();
BeanUtils.copyProperties( yisheng , view );//把实体数据重构到view中
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody YishengEntity yisheng, HttpServletRequest request){
logger.debug("add方法:,,Controller:{},,yisheng:{}",this.getClass().getName(),yisheng.toString());
Wrapper<YishengEntity> queryWrapper = new EntityWrapper<YishengEntity>()
.eq("username", yisheng.getUsername())
.or()
.eq("yisheng_phone", yisheng.getYishengPhone())
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
YishengEntity yishengEntity = yishengService.selectOne(queryWrapper);
if(yishengEntity==null){
yisheng.setCreateTime(new Date());
yisheng.setPassword("123456");
yishengService.insert(yisheng);
return R.ok();
}else {
return R.error(511,"账户或者联系方式已经被使用");
}
}
}

506
src/main/java/com/controller/YonghuController.java
Unescape View File

@ -32,263 +32,212 @@ import com.utils.R;
import com.alibaba.fastjson.*;
/**
* 医生
* 用户
* 后端接口
* @author
* @email
*/
// 声明为RESTful控制器，处理HTTP请求并返回JSON数据
@RestController
// 声明为Spring MVC控制器
@Controller
// 定义请求映射路径，所有以/yisheng开头的请求由该控制器处理
@RequestMapping("/yisheng")
public class YishengController {
// 日志记录器，用于记录当前控制器的日志信息
private static final Logger logger = LoggerFactory.getLogger(YishengController.class);
@RequestMapping("/yonghu")
public class YonghuController {
private static final Logger logger = LoggerFactory.getLogger(YonghuController.class);
// 自动注入医生服务类，用于处理医生相关业务逻辑
@Autowired
private YishengService yishengService;
private YonghuService yonghuService;
// 自动注入令牌服务类，用于生成和管理令牌
@Autowired
private TokenService tokenService;
// 自动注入字典服务类，用于字典表数据转换
@Autowired
private DictionaryService dictionaryService;
private DictionaryService dictionaryService; // 字典服务
//级联表service
// 级联表service，自动注入用户服务类
@Autowired
private YonghuService yonghuService;
private YishengService yishengService;
/**
* 后端获取医生信息列表（分页）
* 后端列表
*/
@RequestMapping("/page")
public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
// 记录方法调用日志，包含控制器类名和请求参数
logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
// 从请求会话中获取用户角色
String role = String.valueOf(request.getSession().getAttribute("role"));
// 此条件永远为false，不会进入该分支
if(false)
return R.error(511,"永不会进入");
// 如果用户角色是"用户"
else if("用户".equals(role))
// 在请求参数中添加用户ID
params.put("yonghuId",request.getSession().getAttribute("userId"));
// 如果用户角色是"医生"
else if("医生".equals(role))
// 在请求参数中添加医生ID
params.put("yishengId",request.getSession().getAttribute("userId"));
// 如果请求参数中未指定排序字段，则默认按id排序
params.put("yonghuDeleteStart",1);params.put("yonghuDeleteEnd",1);
if(params.get("orderBy")==null || params.get("orderBy")==""){
params.put("orderBy","id");
}
// 调用医生服务的queryPage方法进行分页查询
PageUtils page = yishengService.queryPage(params);
PageUtils page = yonghuService.queryPage(params);
// 将分页结果中的列表转换为医生视图列表
List<YishengView> list = (List<YishengView>) page.getList();
// 遍历医生视图列表，进行字典表数据转换
for (YishengView c : list) {
//字典表数据转换
List<YonghuView> list =(List<YonghuView>)page.getList();
for(YonghuView c:list){
//修改对应字典表字段
dictionaryService.dictionaryConvert(c, request);
}
// 返回成功响应，并将分页结果数据放入响应中
return R.ok().put("data", page);
}
/**
* 后端获取医生信息详情
* 后端详情
*/
@RequestMapping("/info/{id}")
public R info(@PathVariable("id") Long id, HttpServletRequest request){
// 记录方法调用日志，包含控制器类名和请求的ID
logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
// 根据ID查询医生实体
YishengEntity yisheng = yishengService.selectById(id);
// 如果查询到医生实体
if (yisheng != null) {
// 创建医生视图对象
YishengView view = new YishengView();
// 将医生实体数据复制到医生视图中
BeanUtils.copyProperties(yisheng, view);
// 进行字典表数据转换
YonghuEntity yonghu = yonghuService.selectById(id);
if(yonghu !=null){
//entity转view
YonghuView view = new YonghuView();
BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
// 返回成功响应，并将医生视图数据放入响应中
return R.ok().put("data", view);
}else {
// 如果未查询到数据，返回错误响应
return R.error(511,"查不到数据");
}
}
/**
* 后端保存医生信息
* 后端保存
*/
@RequestMapping("/save")
public R save(@RequestBody YishengEntity yisheng, HttpServletRequest request) {
// 记录方法调用日志，包含控制器类名和要保存的医生实体信息
logger.debug("save方法:,,Controller:{},,yisheng:{}", this.getClass().getName(), yisheng.toString());
public R save(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
logger.debug("save方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());
// 从请求会话中获取用户角色
String role = String.valueOf(request.getSession().getAttribute("role"));
// 此条件永远为false，不会进入该分支
if(false)
return R.error(511,"永远不会进入");
// 创建查询包装器，检查用户名或联系方式是否已存在
Wrapper<YishengEntity> queryWrapper = new EntityWrapper<YishengEntity>()
.eq("username", yisheng.getUsername())
Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
.eq("username", yonghu.getUsername())
.or()
.eq("yonghu_phone", yonghu.getYonghuPhone())
.or()
.eq("yisheng_phone", yisheng.getYishengPhone());
.eq("yonghu_id_number", yonghu.getYonghuIdNumber())
.andNew()
.eq("yonghu_delete", 1)
;
// 记录生成的SQL查询语句
logger.info("sql语句:"+queryWrapper.getSqlSegment());
// 根据查询条件查询医生实体
YishengEntity yishengEntity = yishengService.selectOne(queryWrapper);
// 如果未查询到相同的医生实体
if (yishengEntity == null) {
// 设置创建时间为当前时间
yisheng.setCreateTime(new Date());
// 设置默认密码为123456
yisheng.setPassword("123456");
// 插入医生信息到数据库
yishengService.insert(yisheng);
// 返回成功响应
YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
if(yonghuEntity==null){
yonghu.setYonghuDelete(1);
yonghu.setCreateTime(new Date());
yonghu.setPassword("123456");
yonghuService.insert(yonghu);
return R.ok();
}else {
// 如果已存在相同的用户名或联系方式，返回错误响应
return R.error(511, "账户或者联系方式已经被使用");
return R.error(511,"账户或者用户手机号或者用户身份证号已经被使用");
}
}
/**
* 后端更新医生信息
* 后端修改
*/
@RequestMapping("/update")
public R update(@RequestBody YishengEntity yisheng, HttpServletRequest request) {
// 记录方法调用日志，包含控制器类名和要更新的医生实体信息
logger.debug("update方法:,,Controller:{},,yisheng:{}", this.getClass().getName(), yisheng.toString());
public R update(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
logger.debug("update方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());
// 从请求会话中获取用户角色
String role = String.valueOf(request.getSession().getAttribute("role"));
// 此条件被注释掉，不会进入该分支
// if(false)
// return R.error(511,"永远不会进入");
// 创建查询包装器，排除当前要更新的记录，检查用户名或联系方式是否已存在
Wrapper<YishengEntity> queryWrapper = new EntityWrapper<YishengEntity>()
.notIn("id", yisheng.getId())
//根据字段查询是否有相同数据
Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
.notIn("id",yonghu.getId())
.andNew()
.eq("username", yisheng.getUsername())
.eq("username", yonghu.getUsername())
.or()
.eq("yonghu_phone", yonghu.getYonghuPhone())
.or()
.eq("yisheng_phone", yisheng.getYishengPhone());
.eq("yonghu_id_number", yonghu.getYonghuIdNumber())
.andNew()
.eq("yonghu_delete", 1)
;
// 记录生成的SQL查询语句
logger.info("sql语句:"+queryWrapper.getSqlSegment());
// 根据查询条件查询医生实体
YishengEntity yishengEntity = yishengService.selectOne(queryWrapper);
// 如果医生照片为空字符串或"null"，设置为null
if ("".equals(yisheng.getYishengPhoto()) || "null".equals(yisheng.getYishengPhoto())) {
yisheng.setYishengPhoto(null);
}
// 如果未查询到相同的医生实体
if (yishengEntity == null) {
// 根据ID更新医生信息
yishengService.updateById(yisheng);
// 返回成功响应
YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
if("".equals(yonghu.getYonghuPhoto()) || "null".equals(yonghu.getYonghuPhoto())){
yonghu.setYonghuPhoto(null);
}
if(yonghuEntity==null){
yonghuService.updateById(yonghu);//根据id更新
return R.ok();
}else {
// 如果已存在相同的用户名或联系方式，返回错误响应
return R.error(511, "账户或者联系方式已经被使用");
return R.error(511,"账户或者用户手机号或者用户身份证号已经被使用");
}
}
/**
* 删除医生信息
* 删除
*/
@RequestMapping("/delete")
public R delete(@RequestBody Integer[] ids){
// 记录方法调用日志，包含控制器类名和要删除的ID数组
logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
// 根据ID数组批量删除医生信息
yishengService.deleteBatchIds(Arrays.asList(ids));
// 返回成功响应
ArrayList<YonghuEntity> list = new ArrayList<>();
for(Integer id:ids){
YonghuEntity yonghuEntity = new YonghuEntity();
yonghuEntity.setId(id);
yonghuEntity.setYonghuDelete(2);
list.add(yonghuEntity);
}
if(list != null && list.size() >0){
yonghuService.updateBatchById(list);
}
return R.ok();
}
/**
* 批量上传医生信息
* 批量上传
*/
@RequestMapping("/batchInsert")
public R save( String fileName){
// 记录方法调用日志，包含控制器类名和文件名
logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
try {
// 创建列表用于存储要上传的医生实体
List<YishengEntity> yishengList = new ArrayList<>();
// 创建Map用于存储要查询的字段
Map<String, List<String>> seachFields = new HashMap<>();
// 获取当前日期
List<YonghuEntity> yonghuList = new ArrayList<>();//上传的东西
Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
Date date = new Date();
// 获取文件名中最后一个点的索引
int lastIndexOf = fileName.lastIndexOf(".");
// 如果文件名没有后缀，返回错误响应
if(lastIndexOf == -1){
return R.error(511,"该文件没有后缀");
}else{
// 获取文件后缀
String suffix = fileName.substring(lastIndexOf);
// 如果文件后缀不是.xls，返回错误响应
if(!".xls".equals(suffix)){
return R.error(511,"只支持后缀为xls的excel文件");
}else{
// 获取文件路径
URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);
// 创建文件对象
URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径
File file = new File(resource.getFile());
// 如果文件不存在，返回错误响应
if(!file.exists()){
return R.error(511,"找不到上传文件，请联系管理员");
}else{
// 读取xls文件数据
List<List<String>> dataList = PoiUtil.poiImport(file.getPath());
// 删除第一行（表头）
dataList.remove(0);
// 遍历数据行
List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
dataList.remove(0);//删除第一行，因为第一行是提示
for(List<String> data:dataList){
// 创建医生实体对象
YishengEntity yishengEntity = new YishengEntity();
// 以下字段赋值被注释，需根据实际情况修改
// yishengEntity.setYishengUuidNumber(data.get(0)); //医生工号 要改的
// yishengEntity.setUsername(data.get(0)); //账户 要改的
// //yishengEntity.setPassword("123456");//密码
// yishengEntity.setYishengName(data.get(0)); //医生名称 要改的
// yishengEntity.setYishengTypes(Integer.valueOf(data.get(0))); //科室 要改的
// yishengEntity.setZhiweiTypes(Integer.valueOf(data.get(0))); //职位 要改的
// yishengEntity.setYishengZhichneg(data.get(0)); //职称 要改的
// yishengEntity.setYishengPhoto("");//照片
// yishengEntity.setYishengPhone(data.get(0)); //联系方式 要改的
// yishengEntity.setYishengGuahao(data.get(0)); //挂号须知 要改的
// yishengEntity.setYishengEmail(data.get(0)); //邮箱 要改的
// yishengEntity.setYishengNewMoney(data.get(0)); //挂号价格 要改的
// yishengEntity.setYishengContent("");//照片
// yishengEntity.setCreateTime(date);//时间
// 将医生实体添加到列表中
yishengList.add(yishengEntity);
// 将可能重复的字段添加到seachFields中
// 医生工号
if (seachFields.containsKey("yishengUuidNumber")) {
List<String> yishengUuidNumber = seachFields.get("yishengUuidNumber");
yishengUuidNumber.add(data.get(0));//要改的
} else {
List<String> yishengUuidNumber = new ArrayList<>();
yishengUuidNumber.add(data.get(0));//要改的
seachFields.put("yishengUuidNumber", yishengUuidNumber);
}
//循环
YonghuEntity yonghuEntity = new YonghuEntity();
// yonghuEntity.setUsername(data.get(0)); //账户 要改的
// //yonghuEntity.setPassword("123456");//密码
// yonghuEntity.setYonghuName(data.get(0)); //用户姓名 要改的
// yonghuEntity.setYonghuPhoto("");//照片
// yonghuEntity.setYonghuPhone(data.get(0)); //用户手机号 要改的
// yonghuEntity.setYonghuIdNumber(data.get(0)); //用户身份证号 要改的
// yonghuEntity.setYonghuEmail(data.get(0)); //邮箱 要改的
// yonghuEntity.setSexTypes(Integer.valueOf(data.get(0))); //性别 要改的
// yonghuEntity.setNewMoney(data.get(0)); //余额 要改的
// yonghuEntity.setYonghuDelete(1);//逻辑删除字段
// yonghuEntity.setCreateTime(date);//时间
yonghuList.add(yonghuEntity);
//把要查询是否重复的字段放入map中
//账户
if(seachFields.containsKey("username")){
List<String> username = seachFields.get("username");
@ -298,68 +247,253 @@ public class YishengController {
username.add(data.get(0));//要改的
seachFields.put("username",username);
}
// 联系方式
if (seachFields.containsKey("yishengPhone")) {
List<String> yishengPhone = seachFields.get("yishengPhone");
yishengPhone.add(data.get(0));//要改的
//用户手机号
if(seachFields.containsKey("yonghuPhone")){
List<String> yonghuPhone = seachFields.get("yonghuPhone");
yonghuPhone.add(data.get(0));//要改的
}else{
List<String> yishengPhone = new ArrayList<>();
yishengPhone.add(data.get(0));//要改的
seachFields.put("yishengPhone", yishengPhone);
}
List<String> yonghuPhone = new ArrayList<>();
yonghuPhone.add(data.get(0));//要改的
seachFields.put("yonghuPhone",yonghuPhone);
}
// 检查是否有重复数据
// 医生工号
List<YishengEntity> yishengEntities_yishengUuidNumber = yishengService.selectList(new EntityWrapper<YishengEntity>().in("yisheng_uuid_number", seachFields.get("yishengUuidNumber")));
if (yishengEntities_yishengUuidNumber.size() > 0) {
ArrayList<String> repeatFields = new ArrayList<>();
for (YishengEntity s : yishengEntities_yishengUuidNumber) {
repeatFields.add(s.getYishengUuidNumber());
//用户身份证号
if(seachFields.containsKey("yonghuIdNumber")){
List<String> yonghuIdNumber = seachFields.get("yonghuIdNumber");
yonghuIdNumber.add(data.get(0));//要改的
}else{
List<String> yonghuIdNumber = new ArrayList<>();
yonghuIdNumber.add(data.get(0));//要改的
seachFields.put("yonghuIdNumber",yonghuIdNumber);
}
return R.error(511, "数据库的该表中的 [医生工号] 字段已经存在 存在数据为:" + repeatFields.toString());
}
//查询是否重复
//账户
List<YishengEntity> yishengEntities_username = yishengService.selectList(new EntityWrapper<YishengEntity>().in("username", seachFields.get("username")));
if (yishengEntities_username.size() > 0) {
List<YonghuEntity> yonghuEntities_username = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("username", seachFields.get("username")).eq("yonghu_delete", 1));
if(yonghuEntities_username.size() >0 ){
ArrayList<String> repeatFields = new ArrayList<>();
for (YishengEntity s : yishengEntities_username) {
for(YonghuEntity s:yonghuEntities_username){
repeatFields.add(s.getUsername());
}
return R.error(511,"数据库的该表中的 [账户] 字段已经存在 存在数据为:"+repeatFields.toString());
}
// 联系方式
List<YishengEntity> yishengEntities_yishengPhone = yishengService.selectList(new EntityWrapper<YishengEntity>().in("yisheng_phone", seachFields.get("yishengPhone")));
if (yishengEntities_yishengPhone.size() > 0) {
//用户手机号
List<YonghuEntity> yonghuEntities_yonghuPhone = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("yonghu_phone", seachFields.get("yonghuPhone")).eq("yonghu_delete", 1));
if(yonghuEntities_yonghuPhone.size() >0 ){
ArrayList<String> repeatFields = new ArrayList<>();
for(YonghuEntity s:yonghuEntities_yonghuPhone){
repeatFields.add(s.getYonghuPhone());
}
return R.error(511,"数据库的该表中的 [用户手机号] 字段已经存在 存在数据为:"+repeatFields.toString());
}
//用户身份证号
List<YonghuEntity> yonghuEntities_yonghuIdNumber = yonghuService.selectList(new EntityWrapper<YonghuEntity>().in("yonghu_id_number", seachFields.get("yonghuIdNumber")).eq("yonghu_delete", 1));
if(yonghuEntities_yonghuIdNumber.size() >0 ){
ArrayList<String> repeatFields = new ArrayList<>();
for (YishengEntity s : yishengEntities_yishengPhone) {
repeatFields.add(s.getYishengPhone());
for(YonghuEntity s:yonghuEntities_yonghuIdNumber){
repeatFields.add(s.getYonghuIdNumber());
}
return R.error(511, "数据库的该表中的 [联系方式] 字段已经存在 存在数据为:" + repeatFields.toString());
return R.error(511,"数据库的该表中的 [用户身份证号] 字段已经存在 存在数据为:"+repeatFields.toString());
}
// 批量插入医生信息
yishengService.insertBatch(yishengList);
// 返回成功响应
yonghuService.insertBatch(yonghuList);
return R.ok();
}
}
}
}catch (Exception e){
// 如果发生异常，返回错误响应
return R.error(511,"批量插入数据异常，请联系管理员");
}
}
/**
* 医生登录
* 登录
*/
@IgnoreAuth
@RequestMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
// 根据用户名查询医生实体
YishengEntity yisheng = yishengService.selectOne(new EntityWrapper<YishengEntity>().eq("username", username));
// 如果医生不存在或密码不正确
if (yisheng == null || !yisheng.getPassword().equals(password))
YonghuEntity yonghu = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", username));
if(yonghu==null || !yonghu.getPassword().equals(password))
return R.error("账号或密码不正确");
// 以下代码被注释，可能是获取字典表相关操作，目前未启用
// //
else if(yonghu.getYonghuDelete() != 1)
return R.error("账户已被删除");
// // 获取监听器中的字典表
// ServletContext servletContext = ContextLoader.getCurrentWebApplicationContext().getServletContext();
// Map<String, Map<Integer, String>> dictionaryMap= (Map<String, Map<Integer, String>>) servletContext.getAttribute("dictionaryMap");
// Map<Integer, String> role_types = dictionaryMap.get("role_types");
// role_types.get(.getRoleTypes());
String token = tokenService.generateToken(yonghu.getId(),username, "yonghu", "用户");
R r = R.ok();
r.put("token", token);
r.put("role","用户");
r.put("username",yonghu.getYonghuName());
r.put("tableName","yonghu");
r.put("userId",yonghu.getId());
return r;
}
/**
* 注册
*/
@IgnoreAuth
@PostMapping(value = "/register")
public R register(@RequestBody YonghuEntity yonghu){
// ValidatorUtils.validateEntity(user);
Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
.eq("username", yonghu.getUsername())
.or()
.eq("yonghu_phone", yonghu.getYonghuPhone())
.or()
.eq("yonghu_id_number", yonghu.getYonghuIdNumber())
.andNew()
.eq("yonghu_delete", 1)
;
YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
if(yonghuEntity != null)
return R.error("账户或者用户手机号或者用户身份证号已经被使用");
yonghu.setNewMoney(0.0);
yonghu.setYonghuDelete(1);
yonghu.setCreateTime(new Date());
yonghuService.insert(yonghu);
return R.ok();
}
/**
* 重置密码
*/
@GetMapping(value = "/resetPassword")
public R resetPassword(Integer id){
YonghuEntity yonghu = new YonghuEntity();
yonghu.setPassword("123456");
yonghu.setId(id);
yonghuService.updateById(yonghu);
return R.ok();
}
/**
* 忘记密码
*/
@IgnoreAuth
@RequestMapping(value = "/resetPass")
public R resetPass(String username, HttpServletRequest request) {
YonghuEntity yonghu = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", username));
if(yonghu!=null){
yonghu.setPassword("123456");
boolean b = yonghuService.updateById(yonghu);
if(!b){
return R.error();
}
}else{
return R.error("账号不存在");
}
return R.ok();
}
/**
* 获取用户的session用户信息
*/
@RequestMapping("/session")
public R getCurrYonghu(HttpServletRequest request){
Integer id = (Integer)request.getSession().getAttribute("userId");
YonghuEntity yonghu = yonghuService.selectById(id);
if(yonghu !=null){
//entity转view
YonghuView view = new YonghuView();
BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 退出
*/
@GetMapping(value = "logout")
public R logout(HttpServletRequest request) {
request.getSession().invalidate();
return R.ok("退出成功");
}
/**
* 前端列表
*/
@IgnoreAuth
@RequestMapping("/list")
public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
// 没有指定排序字段就默认id倒序
if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
params.put("orderBy","id");
}
PageUtils page = yonghuService.queryPage(params);
//字典表数据转换
List<YonghuView> list =(List<YonghuView>)page.getList();
for(YonghuView c:list)
dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
return R.ok().put("data", page);
}
/**
* 前端详情
*/
@RequestMapping("/detail/{id}")
public R detail(@PathVariable("id") Long id, HttpServletRequest request){
logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
YonghuEntity yonghu = yonghuService.selectById(id);
if(yonghu !=null){
//entity转view
YonghuView view = new YonghuView();
BeanUtils.copyProperties( yonghu , view );//把实体数据重构到view中
//修改对应字典表字段
dictionaryService.dictionaryConvert(view, request);
return R.ok().put("data", view);
}else {
return R.error(511,"查不到数据");
}
}
/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody YonghuEntity yonghu, HttpServletRequest request){
logger.debug("add方法:,,Controller:{},,yonghu:{}",this.getClass().getName(),yonghu.toString());
Wrapper<YonghuEntity> queryWrapper = new EntityWrapper<YonghuEntity>()
.eq("username", yonghu.getUsername())
.or()
.eq("yonghu_phone", yonghu.getYonghuPhone())
.or()
.eq("yonghu_id_number", yonghu.getYonghuIdNumber())
.andNew()
.eq("yonghu_delete", 1)
;
logger.info("sql语句:"+queryWrapper.getSqlSegment());
YonghuEntity yonghuEntity = yonghuService.selectOne(queryWrapper);
if(yonghuEntity==null){
yonghu.setYonghuDelete(1);
yonghu.setCreateTime(new Date());
yonghu.setPassword("123456");
yonghuService.insert(yonghu);
return R.ok();
}else {
return R.error(511,"账户或者用户手机号或者用户身份证号已经被使用");
}
}
}

4
src/main/java/com/dao/YonghuDao.java
Unescape View File

@ -9,9 +9,9 @@ import com.baomidou.mybatisplus.plugins.pagination.Pagination;
import org.apache.ibatis.annotations.Param;
import com.entity.view.YonghuView;
/**
/*
* 用户 Dao 接口
*
* @author
*/
public interface YonghuDao extends BaseMapper<YonghuEntity> {

104
src/main/java/com/entity/YishengEntity.java
Unescape View File

@ -37,25 +37,20 @@ import com.baomidou.mybatisplus.enums.IdType;
* @author
* @email
*/
// 使用 TableName 注解指定该类对应的数据库表名为 "yisheng"
@TableName("yisheng")
// 定义泛型类 YishengEntity，实现 Serializable 接口，以便对象可以进行序列化和反序列化
public class YishengEntity<T> implements Serializable {
// 定义序列化版本号，用于保证在不同版本的类之间进行序列化和反序列化时的兼容性
private static final long serialVersionUID = 1L;
// 无参构造函数，用于创建 YishengEntity 对象
public YishengEntity() {
}
// 带参构造函数，接受一个泛型对象 t，通过 BeanUtils.copyProperties 方法
// 将对象 t 的属性复制到当前 YishengEntity 对象中
public YishengEntity(T t) {
try {
BeanUtils.copyProperties(this, t);
} catch (IllegalAccessException | InvocationTargetException e) {
// 如果在复制属性过程中出现异常，打印异常堆栈信息
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@ -63,134 +58,114 @@ public class YishengEntity<T> implements Serializable {
/**
* 主键
*/
// 使用 TableId 注解指定该字段为主键，主键生成策略为自动增长（AUTO）
@TableId(type = IdType.AUTO)
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "id"
@TableField(value = "id")
// 存储医生记录的主键值，用于唯一标识一条医生记录
private Integer id;
/**
* 医生工号
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "yisheng_uuid_number"
@TableField(value = "yisheng_uuid_number")
// 存储医生的唯一工号，用于标识医生个体
private String yishengUuidNumber;
/**
* 账户
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "username"
@TableField(value = "username")
// 存储医生的登录账户名
private String username;
/**
* 密码
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "password"
@TableField(value = "password")
// 存储医生账户的密码
private String password;
/**
* 医生名称
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "yisheng_name"
@TableField(value = "yisheng_name")
// 存储医生的真实姓名
private String yishengName;
/**
* 科室
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "yisheng_types"
@TableField(value = "yisheng_types")
// 存储医生所属的科室，用整数表示不同科室类别
private Integer yishengTypes;
/**
* 职位
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "zhiwei_types"
@TableField(value = "zhiwei_types")
// 存储医生的职位，用整数表示不同职位类别
private Integer zhiweiTypes;
/**
* 职称
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "yisheng_zhichneg"
@TableField(value = "yisheng_zhichneg")
// 存储医生的职称信息，如主任医师、副主任医师等
private String yishengZhichneg;
/**
* 医生头像
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "yisheng_photo"
@TableField(value = "yisheng_photo")
// 存储医生头像的路径或标识
private String yishengPhoto;
/**
* 联系方式
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "yisheng_phone"
@TableField(value = "yisheng_phone")
// 存储医生的联系方式，如电话号码
private String yishengPhone;
/**
* 挂号须知
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "yisheng_guahao"
@TableField(value = "yisheng_guahao")
// 存储医生的挂号须知内容，告知患者相关注意事项
private String yishengGuahao;
/**
* 邮箱
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "yisheng_email"
@TableField(value = "yisheng_email")
// 存储医生的电子邮箱地址
private String yishengEmail;
/**
* 挂号价格
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "yisheng_new_money"
@TableField(value = "yisheng_new_money")
// 存储医生的挂号价格
private Double yishengNewMoney;
/**
* 履历介绍
*/
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "yisheng_content"
@TableField(value = "yisheng_content")
// 存储医生的履历介绍，展示医生的教育背景、工作经历等信息
private String yishengContent;
/**
* 创建时间
*/
// 设置 JSON 序列化时日期的格式，使用中文环境，时区为东八区，格式为 "yyyy-MM-dd HH:mm:ss"
@JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
// 用于 Spring MVC 接收表单数据时将日期字符串转换为 Date 对象
@DateTimeFormat
// 使用 TableField 注解指定该字段在数据库表中对应的字段名为 "create_time"，
// 并设置在插入数据时自动填充当前时间
@TableField(value = "create_time",fill = FieldFill.INSERT)
// 存储医生记录的创建时间，用于记录数据的创建时间戳
private Date createTime;
/**
* 设置：主键
*/
// 获取主键值的方法
public Integer getId() {
return id;
}
@ -198,7 +173,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：主键
*/
// 设置主键值的方法
public void setId(Integer id) {
this.id = id;
}
@ -206,7 +181,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：医生工号
*/
// 获取医生工号值的方法
public String getYishengUuidNumber() {
return yishengUuidNumber;
}
@ -214,7 +188,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：医生工号
*/
// 设置医生工号值的方法
public void setYishengUuidNumber(String yishengUuidNumber) {
this.yishengUuidNumber = yishengUuidNumber;
}
@ -222,7 +196,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：账户
*/
// 获取账户名值的方法
public String getUsername() {
return username;
}
@ -230,7 +203,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：账户
*/
// 设置账户名值的方法
public void setUsername(String username) {
this.username = username;
}
@ -238,7 +211,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：密码
*/
// 获取密码值的方法
public String getPassword() {
return password;
}
@ -246,7 +218,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：密码
*/
// 设置密码值的方法
public void setPassword(String password) {
this.password = password;
}
@ -254,7 +226,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：医生名称
*/
// 获取医生名称值的方法
public String getYishengName() {
return yishengName;
}
@ -262,7 +233,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：医生名称
*/
// 设置医生名称值的方法
public void setYishengName(String yishengName) {
this.yishengName = yishengName;
}
@ -270,7 +241,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：科室
*/
// 获取科室值的方法
public Integer getYishengTypes() {
return yishengTypes;
}
@ -278,7 +248,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：科室
*/
// 设置科室值的方法
public void setYishengTypes(Integer yishengTypes) {
this.yishengTypes = yishengTypes;
}
@ -286,7 +256,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：职位
*/
// 获取职位值的方法
public Integer getZhiweiTypes() {
return zhiweiTypes;
}
@ -294,7 +263,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：职位
*/
// 设置职位值的方法
public void setZhiweiTypes(Integer zhiweiTypes) {
this.zhiweiTypes = zhiweiTypes;
}
@ -302,7 +271,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：职称
*/
// 获取职称值的方法
public String getYishengZhichneg() {
return yishengZhichneg;
}
@ -310,7 +278,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：职称
*/
// 设置职称值的方法
public void setYishengZhichneg(String yishengZhichneg) {
this.yishengZhichneg = yishengZhichneg;
}
@ -318,7 +286,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：医生头像
*/
// 获取医生头像路径值的方法
public String getYishengPhoto() {
return yishengPhoto;
}
@ -326,7 +293,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：医生头像
*/
// 设置医生头像路径值的方法
public void setYishengPhoto(String yishengPhoto) {
this.yishengPhoto = yishengPhoto;
}
@ -334,7 +301,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：联系方式
*/
// 获取联系方式值的方法
public String getYishengPhone() {
return yishengPhone;
}
@ -342,7 +308,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：联系方式
*/
// 设置联系方式值的方法
public void setYishengPhone(String yishengPhone) {
this.yishengPhone = yishengPhone;
}
@ -350,7 +316,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：挂号须知
*/
// 获取挂号须知值的方法
public String getYishengGuahao() {
return yishengGuahao;
}
@ -358,7 +323,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：挂号须知
*/
// 设置挂号须知值的方法
public void setYishengGuahao(String yishengGuahao) {
this.yishengGuahao = yishengGuahao;
}
@ -366,7 +331,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：邮箱
*/
// 获取邮箱值的方法
public String getYishengEmail() {
return yishengEmail;
}
@ -374,7 +338,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：邮箱
*/
// 设置邮箱值的方法
public void setYishengEmail(String yishengEmail) {
this.yishengEmail = yishengEmail;
}
@ -382,7 +346,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：挂号价格
*/
// 获取挂号价格值的方法
public Double getYishengNewMoney() {
return yishengNewMoney;
}
@ -390,7 +353,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：挂号价格
*/
// 设置挂号价格值的方法
public void setYishengNewMoney(Double yishengNewMoney) {
this.yishengNewMoney = yishengNewMoney;
}
@ -398,7 +361,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：履历介绍
*/
// 获取履历介绍值的方法
public String getYishengContent() {
return yishengContent;
}
@ -406,7 +368,7 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：履历介绍
*/
// 设置履历介绍值的方法
public void setYishengContent(String yishengContent) {
this.yishengContent = yishengContent;
}
@ -414,7 +376,6 @@ public class YishengEntity<T> implements Serializable {
/**
* 设置：创建时间
*/
// 获取创建时间值的方法
public Date getCreateTime() {
return createTime;
}
@ -422,12 +383,11 @@ public class YishengEntity<T> implements Serializable {
/**
* 获取：创建时间
*/
// 设置创建时间值的方法
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
// 重写 toString 方法，返回对象的字符串表示，方便调试和日志记录
@Override
public String toString() {
return "Yisheng{" +

127
src/main/java/com/entity/YonghuEntity.java
Unescape View File

@ -1,171 +1,148 @@
package com.entity;
// 导入 MyBatis-Plus 用于指定主键的注解
import com.baomidou.mybatisplus.annotations.TableId;
// 导入 MyBatis-Plus 用于指定数据库表名的注解
import com.baomidou.mybatisplus.annotations.TableName;
// 导入 JSR 303 验证注解，用于字段验证，当前代码未实际使用这些注解
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;
// 导入 Jackson 注解，用于忽略 JSON 序列化和反序列化时的某些属性，当前代码未实际使用
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
// 导入反射调用可能抛出的异常类
import java.lang.reflect.InvocationTargetException;
// 导入序列化接口，使该类的对象可以进行序列化和反序列化操作
import java.io.Serializable;
// 导入日期类，用于处理日期相关的操作
import java.util.Date;
// 导入列表集合类，当前代码未使用
import java.util.List;
// 导入 Spring 框架用于日期格式化的注解，用于将字符串日期转换为 Date 对象
import org.springframework.format.annotation.DateTimeFormat;
// 导入 Jackson 用于 JSON 序列化时日期格式化的注解
import com.fasterxml.jackson.annotation.JsonFormat;
// 导入 Apache Commons BeanUtils 工具类，用于对象属性复制
import org.apache.commons.beanutils.BeanUtils;
// 导入 MyBatis-Plus 用于指定字段的注解
import com.baomidou.mybatisplus.annotations.TableField;
// 导入 MyBatis-Plus 字段填充策略枚举
import com.baomidou.mybatisplus.enums.FieldFill;
// 导入 MyBatis-Plus 主键生成策略枚举
import com.baomidou.mybatisplus.enums.IdType;
/**
* 用户
* 用户实体类
* 数据库表映射对象，对应数据库中的yonghu表
*
* @author
* @email
*/
// 指定该类对应数据库中的 yonghu 表
@TableName("yonghu")
// 定义泛型类，实现 Serializable 接口
public class YonghuEntity<T> implements Serializable {
// 序列化版本号，确保序列化和反序列化的兼容性
private static final long serialVersionUID = 1L;
// 无参构造函数，方便创建 YonghuEntity 类的实例
public YonghuEntity() {
}
// 带参构造函数，接收一个泛型对象 t，将其属性复制到当前 YonghuEntity 对象
public YonghuEntity(T t) {
try {
// 使用 BeanUtils 工具类复制属性
BeanUtils.copyProperties(this, t);
} catch (IllegalAccessException | InvocationTargetException e) {
// 若复制属性过程中出现异常，打印异常堆栈信息
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* 主键
* 主键ID
* 自增类型
*/
// 指定该字段为主键，且主键生成策略为自增
@TableId(type = IdType.AUTO)
// 指定该字段对应数据库表中的 id 字段
@TableField(value = "id")
// 主键，用于唯一标识一条用户记录
private Integer id;
/**
* 账户
* 用户名/账户
* 用于登录系统的唯一标识
*/
// 指定该字段对应数据库表中的 username 字段
@TableField(value = "username")
// 用户的登录账户名
private String username;
/**
* 密码
* 存储加密后的用户密码
*/
// 指定该字段对应数据库表中的 password 字段
@TableField(value = "password")
// 用户登录账户的密码
private String password;
/**
* 用户姓名
* 用户真实姓名
*/
// 指定该字段对应数据库表中的 yonghu_name 字段
@TableField(value = "yonghu_name")
// 用户的真实姓名
private String yonghuName;
/**
* 头像
* 用户头像
* 存储头像图片路径
*/
// 指定该字段对应数据库表中的 yonghu_photo 字段
@TableField(value = "yonghu_photo")
// 用户头像的存储路径
private String yonghuPhoto;
/**
* 用户手机号
*/
// 指定该字段对应数据库表中的 yonghu_phone 字段
@TableField(value = "yonghu_phone")
// 用户的手机号码
private String yonghuPhone;
/**
* 用户身份证号
*/
// 指定该字段对应数据库表中的 yonghu_id_number 字段
@TableField(value = "yonghu_id_number")
// 用户的身份证号码
private String yonghuIdNumber;
/**
* 邮箱
* 用户邮箱
*/
// 指定该字段对应数据库表中的 yonghu_email 字段
@TableField(value = "yonghu_email")
// 用户的电子邮箱地址
private String yonghuEmail;
/**
* 性别
* 使用数字表示，对应字典表中的性别类型
*/
// 指定该字段对应数据库表中的 sex_types 字段
@TableField(value = "sex_types")
// 用户的性别，用整数表示不同性别，如 1 表示男性，2 表示女性等
private Integer sexTypes;
/**
* 余额
* 用户余额
*/
// 指定该字段对应数据库表中的 new_money 字段
@TableField(value = "new_money")
// 用户账户的余额
private Double newMoney;
/**
* 假删
* 逻辑删除标志
* 1-未删除，2-已删除
*/
// 指定该字段对应数据库表中的 yonghu_delete 字段
@TableField(value = "yonghu_delete")
// 假删除标记，用整数表示是否删除，如 0 表示未删除，1 表示已删除
private Integer yonghuDelete;
/**
* 创建时间
* 自动填充，格式化为yyyy-MM-dd HH:mm:ss
*/
// 设置 JSON 序列化时日期的格式，使用中文环境，时区为东八区，格式为 "yyyy-MM-dd HH:mm:ss"
@JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
// 用于 Spring MVC 接收表单数据时将日期字符串转换为 Date 对象
@DateTimeFormat
// 指定该字段对应数据库表中的 create_time 字段，且在插入数据时自动填充
@TableField(value = "create_time",fill = FieldFill.INSERT)
// 该条用户记录的创建时间
private Date createTime;
/**
* 设置：主键
*/
// 获取主键的方法
public Integer getId() {
return id;
}
@ -173,7 +150,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：主键
*/
// 设置主键的方法
public void setId(Integer id) {
this.id = id;
}
@ -181,7 +158,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：账户
*/
// 获取账户名的方法
public String getUsername() {
return username;
}
@ -189,7 +165,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：账户
*/
// 设置账户名的方法
public void setUsername(String username) {
this.username = username;
}
@ -197,7 +173,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：密码
*/
// 获取密码的方法
public String getPassword() {
return password;
}
@ -205,7 +180,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：密码
*/
// 设置密码的方法
public void setPassword(String password) {
this.password = password;
}
@ -213,7 +188,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：用户姓名
*/
// 获取用户姓名的方法
public String getYonghuName() {
return yonghuName;
}
@ -221,7 +195,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：用户姓名
*/
// 设置用户姓名的方法
public void setYonghuName(String yonghuName) {
this.yonghuName = yonghuName;
}
@ -229,7 +203,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：头像
*/
// 获取头像路径的方法
public String getYonghuPhoto() {
return yonghuPhoto;
}
@ -237,7 +210,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：头像
*/
// 设置头像路径的方法
public void setYonghuPhoto(String yonghuPhoto) {
this.yonghuPhoto = yonghuPhoto;
}
@ -245,7 +218,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：用户手机号
*/
// 获取用户手机号码的方法
public String getYonghuPhone() {
return yonghuPhone;
}
@ -253,7 +225,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：用户手机号
*/
// 设置用户手机号码的方法
public void setYonghuPhone(String yonghuPhone) {
this.yonghuPhone = yonghuPhone;
}
@ -261,7 +233,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：用户身份证号
*/
// 获取用户身份证号码的方法
public String getYonghuIdNumber() {
return yonghuIdNumber;
}
@ -269,7 +240,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：用户身份证号
*/
// 设置用户身份证号码的方法
public void setYonghuIdNumber(String yonghuIdNumber) {
this.yonghuIdNumber = yonghuIdNumber;
}
@ -277,7 +248,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：邮箱
*/
// 获取邮箱地址的方法
public String getYonghuEmail() {
return yonghuEmail;
}
@ -285,7 +255,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：邮箱
*/
// 设置邮箱地址的方法
public void setYonghuEmail(String yonghuEmail) {
this.yonghuEmail = yonghuEmail;
}
@ -293,7 +263,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：性别
*/
// 获取性别标识的方法
public Integer getSexTypes() {
return sexTypes;
}
@ -301,7 +270,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：性别
*/
// 设置性别标识的方法
public void setSexTypes(Integer sexTypes) {
this.sexTypes = sexTypes;
}
@ -309,7 +278,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：余额
*/
// 获取余额的方法
public Double getNewMoney() {
return newMoney;
}
@ -317,7 +285,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：余额
*/
// 设置余额的方法
public void setNewMoney(Double newMoney) {
this.newMoney = newMoney;
}
@ -325,7 +293,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：假删
*/
// 获取假删除标记的方法
public Integer getYonghuDelete() {
return yonghuDelete;
}
@ -333,7 +300,7 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：假删
*/
// 设置假删除标记的方法
public void setYonghuDelete(Integer yonghuDelete) {
this.yonghuDelete = yonghuDelete;
}
@ -341,7 +308,6 @@ public class YonghuEntity<T> implements Serializable {
/**
* 设置：创建时间
*/
// 获取创建时间的方法
public Date getCreateTime() {
return createTime;
}
@ -349,12 +315,11 @@ public class YonghuEntity<T> implements Serializable {
/**
* 获取：创建时间
*/
// 设置创建时间的方法
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
// 重写 toString 方法，方便打印对象信息
@Override
public String toString() {
return "Yonghu{" +

63
src/main/java/com/entity/model/YishengModel.java
Unescape View File

@ -1,15 +1,11 @@
package com.entity.model;
// 导入YishengEntity类，后续可能用于与该实体进行数据转换、关联查询等操作
import com.entity.YishengEntity;
// 导入MyBatis-Plus的TableName注解，通常用于指定数据库表名，不过在当前代码中未实际使用该注解功能
import com.baomidou.mybatisplus.annotations.TableName;
// 导入Jackson的JsonFormat注解，用于在将对象序列化为JSON格式时，对日期类型的字段进行格式化处理
import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;
// 导入Spring的DateTimeFormat注解，用于在Spring MVC接收前端传递的日期数据时，对日期字符串进行格式化转换
import org.springframework.format.annotation.DateTimeFormat;
// 实现Serializable接口，使得该类的对象可以在网络传输或存储时进行序列化和反序列化操作
import java.io.Serializable;
/**
@ -19,107 +15,97 @@ import java.io.Serializable;
* 取自ModelAndView 的model名称
*/
public class YishengModel implements Serializable {
// 序列化版本号，用于确保在不同版本的类之间进行序列化和反序列化时的兼容性，固定值1L
private static final long serialVersionUID = 1L;
/**
* 主键
*/
// 用于唯一标识数据库中该医生记录的主键字段，在数据的增删改查操作中起关键作用
private Integer id;
/**
* 医生工号
*/
// 医生在系统中的唯一工作编号，可用于内部管理和识别不同医生
private String yishengUuidNumber;
/**
* 账户
*/
// 医生用于登录系统的用户名，用于身份验证和权限管理
private String username;
/**
* 密码
*/
// 与账户对应的登录密码，必须与用户名匹配才能成功登录系统，注意密码安全存储
private String password;
/**
* 医生名称
*/
// 医生的真实姓名或者对外展示的名称，用于标识和显示医生身份
private String yishengName;
/**
* 科室
* 使用Integer类型存储，对应字典表中的科室编码
*/
// 用整数表示医生所属的科室，不同整数值对应不同的科室，方便对医生进行分类管理
private Integer yishengTypes;
/**
* 职位
* 使用Integer类型存储，对应字典表中的职位编码
*/
// 用整数标识医生在医院中的职位，如主任医师、主治医师等不同职位分类，反映医生的职责和级别
private Integer zhiweiTypes;
/**
* 职称
*/
// 存储医生的专业技术职称信息，如“副主任医师”等，体现医生的专业水平和能力
private String yishengZhichneg;
/**
* 医生头像
* 存储头像图片的路径或URL
*/
// 存储医生头像图片的路径或者相关标识，用于在界面上展示医生的头像，增强用户体验
private String yishengPhoto;
/**
* 联系方式
*/
// 记录医生的联系电话或者其他可联系的方式，方便患者或其他人员与医生取得联系
private String yishengPhone;
/**
* 挂号须知
* 存储医生挂号的相关注意事项
*/
// 包含了关于该医生挂号的各种注意事项和规定等信息，为患者提供挂号指导
private String yishengGuahao;
/**
* 邮箱
*/
// 医生的电子邮箱地址，可用于接收系统通知、患者咨询邮件等
private String yishengEmail;
/**
* 挂号价格
*/
// 记录该医生的挂号费用金额，以Double类型存储，单位可能是元，用于收费和展示
private Double yishengNewMoney;
/**
* 履历介绍
* 存储医生的详细履历信息
*/
// 存储医生的个人履历、教育背景、工作经历、专业技能等详细信息，帮助患者了解医生的专业能力
private String yishengContent;
/**
* 创建时间 show1 show2 photoShow
* 使用@JsonFormat和@DateTimeFormat注解进行日期格式化
*/
// 设置JSON序列化时日期的格式，使用中文环境，时区为东八区，格式为 "yyyy-MM-dd HH:mm:ss"
@JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
// 用于Spring MVC接收前端传递的日期数据时，对日期字符串进行格式化转换
@DateTimeFormat
// 记录该医生信息在系统中创建的具体时间，可用于审计和数据追溯等
private Date createTime;
/**
* 获取：主键
*/
// 获取该医生记录的主键ID值，外部调用该方法可获取唯一标识该记录的ID
public Integer getId() {
return id;
}
@ -127,7 +113,6 @@ public class YishengModel implements Serializable {
/**
* 设置：主键
*/
// 设置该医生记录的主键ID值，一般在数据插入等操作时由系统或者特定逻辑来设置
public void setId(Integer id) {
this.id = id;
}
@ -135,7 +120,6 @@ public class YishengModel implements Serializable {
/**
* 获取：医生工号
*/
// 获取医生的工号信息，外部可通过调用该方法获取医生的唯一工作编号
public String getYishengUuidNumber() {
return yishengUuidNumber;
}
@ -143,7 +127,6 @@ public class YishengModel implements Serializable {
/**
* 设置：医生工号
*/
// 设置医生的工号信息，可用于修改或者初始化医生的工号
public void setYishengUuidNumber(String yishengUuidNumber) {
this.yishengUuidNumber = yishengUuidNumber;
}
@ -151,7 +134,6 @@ public class YishengModel implements Serializable {
/**
* 获取：账户
*/
// 获取医生用于登录系统的账户名，外部调用可获取该医生的登录账户
public String getUsername() {
return username;
}
@ -159,7 +141,6 @@ public class YishengModel implements Serializable {
/**
* 设置：账户
*/
// 设置医生的登录账户名，可用于修改医生的登录账户信息
public void setUsername(String username) {
this.username = username;
}
@ -167,7 +148,6 @@ public class YishengModel implements Serializable {
/**
* 获取：密码
*/
// 获取医生的登录密码，注意在实际应用中，密码的获取和使用需要遵循安全规范
public String getPassword() {
return password;
}
@ -175,7 +155,6 @@ public class YishengModel implements Serializable {
/**
* 设置：密码
*/
// 设置医生的登录密码，设置密码时需要考虑密码的强度和安全性要求
public void setPassword(String password) {
this.password = password;
}
@ -183,7 +162,6 @@ public class YishengModel implements Serializable {
/**
* 获取：医生名称
*/
// 获取医生的姓名信息，外部调用可获取医生的真实姓名或者展示名称
public String getYishengName() {
return yishengName;
}
@ -191,7 +169,6 @@ public class YishengModel implements Serializable {
/**
* 设置：医生名称
*/
// 设置医生的姓名信息，可用于修改医生的显示名称等情况
public void setYishengName(String yishengName) {
this.yishengName = yishengName;
}
@ -199,7 +176,6 @@ public class YishengModel implements Serializable {
/**
* 获取：科室
*/
// 获取医生所属的科室编号，通过该编号可查询对应的科室信息，了解医生的专业领域
public Integer getYishengTypes() {
return yishengTypes;
}
@ -207,7 +183,6 @@ public class YishengModel implements Serializable {
/**
* 设置：科室
*/
// 设置医生所属的科室编号，可用于调整医生的科室归属等操作
public void setYishengTypes(Integer yishengTypes) {
this.yishengTypes = yishengTypes;
}
@ -215,7 +190,6 @@ public class YishengModel implements Serializable {
/**
* 获取：职位
*/
// 获取医生在医院中的职位编号，根据编号可确定医生的职位信息和职责范围
public Integer getZhiweiTypes() {
return zhiweiTypes;
}
@ -223,7 +197,6 @@ public class YishengModel implements Serializable {
/**
* 设置：职位
*/
// 设置医生在医院中的职位编号，可用于更新医生的职位信息
public void setZhiweiTypes(Integer zhiweiTypes) {
this.zhiweiTypes = zhiweiTypes;
}
@ -231,7 +204,6 @@ public class YishengModel implements Serializable {
/**
* 获取：职称
*/
// 获取医生的专业技术职称信息，外部调用可获取医生的职称描述
public String getYishengZhichneg() {
return yishengZhichneg;
}
@ -239,7 +211,6 @@ public class YishengModel implements Serializable {
/**
* 设置：职称
*/
// 设置医生的专业技术职称信息，可用于修改医生的职称信息
public void setYishengZhichneg(String yishengZhichneg) {
this.yishengZhichneg = yishengZhichneg;
}
@ -247,7 +218,6 @@ public class YishengModel implements Serializable {
/**
* 获取：医生头像
*/
// 获取医生头像的路径或者标识信息，用于在界面上加载和展示医生的头像图片
public String getYishengPhoto() {
return yishengPhoto;
}
@ -255,7 +225,6 @@ public class YishengModel implements Serializable {
/**
* 设置：医生头像
*/
// 设置医生头像的路径或者标识信息，可用于更新医生的头像展示
public void setYishengPhoto(String yishengPhoto) {
this.yishengPhoto = yishengPhoto;
}
@ -263,7 +232,6 @@ public class YishengModel implements Serializable {
/**
* 获取：联系方式
*/
// 获取医生的联系电话或者其他联系方式，方便与医生进行沟通和联系
public String getYishengPhone() {
return yishengPhone;
}
@ -271,7 +239,6 @@ public class YishengModel implements Serializable {
/**
* 设置：联系方式
*/
// 设置医生的联系电话或者其他联系方式，可用于修改医生的联系信息
public void setYishengPhone(String yishengPhone) {
this.yishengPhone = yishengPhone;
}
@ -279,7 +246,6 @@ public class YishengModel implements Serializable {
/**
* 获取：挂号须知
*/
// 获取关于该医生挂号的注意事项和规定等信息，为患者提供挂号相关的指导
public String getYishengGuahao() {
return yishengGuahao;
}
@ -287,7 +253,6 @@ public class YishengModel implements Serializable {
/**
* 设置：挂号须知
*/
// 设置关于该医生挂号的注意事项和规定等信息，可用于更新挂号须知内容
public void setYishengGuahao(String yishengGuahao) {
this.yishengGuahao = yishengGuahao;
}
@ -295,7 +260,6 @@ public class YishengModel implements Serializable {
/**
* 获取：邮箱
*/
// 获取医生的电子邮箱地址，可用于向医生发送邮件通知或者接收患者的邮件咨询
public String getYishengEmail() {
return yishengEmail;
}
@ -303,7 +267,6 @@ public class YishengModel implements Serializable {
/**
* 设置：邮箱
*/
// 设置医生的电子邮箱地址，可用于修改医生的邮箱信息
public void setYishengEmail(String yishengEmail) {
this.yishengEmail = yishengEmail;
}
@ -311,7 +274,6 @@ public class YishengModel implements Serializable {
/**
* 获取：挂号价格
*/
// 获取该医生的挂号费用金额，外部调用可获取医生的挂号价格信息
public Double getYishengNewMoney() {
return yishengNewMoney;
}
@ -319,7 +281,6 @@ public class YishengModel implements Serializable {
/**
* 设置：挂号价格
*/
// 设置该医生的挂号费用金额，可用于调整医生的挂号价格
public void setYishengNewMoney(Double yishengNewMoney) {
this.yishengNewMoney = yishengNewMoney;
}
@ -327,7 +288,6 @@ public class YishengModel implements Serializable {
/**
* 获取：履历介绍
*/
// 获取医生的个人履历和专业介绍等信息，帮助了解医生的背景和专业能力
public String getYishengContent() {
return yishengContent;
}
@ -335,7 +295,6 @@ public class YishengModel implements Serializable {
/**
* 设置：履历介绍
*/
// 设置医生的个人履历和专业介绍等信息，可用于更新医生的履历内容
public void setYishengContent(String yishengContent) {
this.yishengContent = yishengContent;
}
@ -343,7 +302,6 @@ public class YishengModel implements Serializable {
/**
* 获取：创建时间 show1 show2 photoShow
*/
// 获取该医生信息记录的创建时间，可用于了解记录的生成时间，进行数据管理和分析
public Date getCreateTime() {
return createTime;
}
@ -351,7 +309,6 @@ public class YishengModel implements Serializable {
/**
* 设置：创建时间 show1 show2 photoShow
*/
// 设置该医生信息记录的创建时间，一般由系统在创建记录时自动生成，特殊情况可进行设置
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}

49
src/main/java/com/entity/model/YonghuModel.java
Unescape View File

@ -1,21 +1,14 @@
package com.entity.model;
// 导入YonghuEntity类，可能用于与数据库实体进行交互或数据转换等操作
import com.entity.YonghuEntity;
// 导入MyBatis-Plus的TableName注解，通常用于指定数据库表名（但在当前代码中未实际使用该注解）
import com.baomidou.mybatisplus.annotations.TableName;
// 导入Jackson的JsonFormat注解，用于在JSON序列化和反序列化时对日期类型字段进行格式化处理
import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;
// 导入Spring的DateTimeFormat注解，用于在处理表单数据时对日期类型字段进行格式化
import org.springframework.format.annotation.DateTimeFormat;
// 实现Serializable接口，使该类的对象可以被序列化和反序列化，便于在网络传输或存储中使用
import java.io.Serializable;
/**
* 用户
* 接收传参的实体类
@ -23,89 +16,74 @@ import java.io.Serializable;
* 取自ModelAndView 的model名称
*/
public class YonghuModel implements Serializable {
// 定义序列化版本号，用于保证在不同版本的类之间进行序列化和反序列化时的兼容性
private static final long serialVersionUID = 1L;
/**
* 主键
*/
// 用于唯一标识用户记录的主键，在数据库操作中通常作为唯一标识字段
private Integer id;
/**
* 账户
*/
// 用户用于登录系统的账户名，用于身份验证和权限管理
private String username;
/**
* 密码
*/
// 与账户对应的登录密码，用于验证用户身份，确保账户安全
private String password;
/**
* 用户姓名
*/
// 存储用户的真实姓名或显示名称，用于标识和显示用户身份
private String yonghuName;
/**
* 头像
*/
// 存储用户头像图片的路径或标识，用于在系统中展示用户的头像
private String yonghuPhoto;
/**
* 用户手机号
*/
// 存储用户的手机号码，可用于联系用户、验证身份等
private String yonghuPhone;
/**
* 用户身份证号
*/
// 存储用户的身份证号码，用于身份验证和相关业务处理
private String yonghuIdNumber;
/**
* 邮箱
*/
// 存储用户的电子邮箱地址，可用于接收系统通知、找回密码等
private String yonghuEmail;
/**
* 性别
*/
// 用整数表示用户的性别，例如0表示男，1表示女等，方便进行统计和分类
private Integer sexTypes;
/**
* 余额
*/
// 存储用户账户的余额，以Double类型表示金额，用于相关支付和消费操作
private Double newMoney;
/**
* 假删
* 用一个整数来标记用户是否被逻辑删除，例如0表示未删除，1表示已删除
*/
// 用于实现逻辑删除的字段，0表示未删除，1表示已删除（假删），避免物理删除数据
private Integer yonghuDelete;
/**
* 创建时间
*/
// 设置JSON序列化时日期的格式，使用中文环境，时区为东八区，格式为 "yyyy-MM-dd HH:mm:ss"
@JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
// 用于Spring MVC接收表单数据时将日期字符串转换为Date对象
@DateTimeFormat
// 记录该用户信息记录的实际创建时间
private Date createTime;
/**
* 获取：主键
*/
// 获取主键ID的方法，供外部调用以获取该用户信息记录的唯一标识
public Integer getId() {
return id;
}
@ -113,7 +91,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：主键
*/
// 设置主键ID的方法，供外部调用以设置该用户信息记录的唯一标识
public void setId(Integer id) {
this.id = id;
}
@ -121,7 +98,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：账户
*/
// 获取用户账户名的方法，供外部调用以获取用户的登录账户信息
public String getUsername() {
return username;
}
@ -129,7 +105,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：账户
*/
// 设置用户账户名的方法，供外部调用以修改用户的登录账户信息
public void setUsername(String username) {
this.username = username;
}
@ -137,7 +112,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：密码
*/
// 获取用户密码的方法，实际应用中需注意密码安全，防止泄露
public String getPassword() {
return password;
}
@ -145,7 +119,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：密码
*/
// 设置用户密码的方法，设置时需遵循一定的密码强度规则
public void setPassword(String password) {
this.password = password;
}
@ -153,7 +126,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：用户姓名
*/
// 获取用户姓名的方法，供外部调用以获取用户的名称信息
public String getYonghuName() {
return yonghuName;
}
@ -161,7 +133,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：用户姓名
*/
// 设置用户姓名的方法，供外部调用以修改用户的显示名称
public void setYonghuName(String yonghuName) {
this.yonghuName = yonghuName;
}
@ -169,7 +140,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：头像
*/
// 获取用户头像路径或标识的方法，供外部调用以获取用户的头像信息
public String getYonghuPhoto() {
return yonghuPhoto;
}
@ -177,7 +147,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：头像
*/
// 设置用户头像路径或标识的方法，供外部调用以修改用户的头像展示
public void setYonghuPhoto(String yonghuPhoto) {
this.yonghuPhoto = yonghuPhoto;
}
@ -185,7 +154,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：用户手机号
*/
// 获取用户手机号码的方法，供外部调用以获取用户的联系方式
public String getYonghuPhone() {
return yonghuPhone;
}
@ -193,7 +161,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：用户手机号
*/
// 设置用户手机号码的方法，供外部调用以修改用户的联系电话
public void setYonghuPhone(String yonghuPhone) {
this.yonghuPhone = yonghuPhone;
}
@ -201,7 +168,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：用户身份证号
*/
// 获取用户身份证号码的方法，供外部调用以获取用户的身份信息
public String getYonghuIdNumber() {
return yonghuIdNumber;
}
@ -209,7 +175,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：用户身份证号
*/
// 设置用户身份证号码的方法，设置时需保证号码的合法性和准确性
public void setYonghuIdNumber(String yonghuIdNumber) {
this.yonghuIdNumber = yonghuIdNumber;
}
@ -217,7 +182,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：邮箱
*/
// 获取用户电子邮箱地址的方法，供外部调用以获取用户的邮箱信息
public String getYonghuEmail() {
return yonghuEmail;
}
@ -225,7 +189,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：邮箱
*/
// 设置用户电子邮箱地址的方法，供外部调用以修改用户的邮箱信息
public void setYonghuEmail(String yonghuEmail) {
this.yonghuEmail = yonghuEmail;
}
@ -233,7 +196,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：性别
*/
// 获取用户性别的方法，供外部调用以获取用户的性别标识
public Integer getSexTypes() {
return sexTypes;
}
@ -241,7 +203,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：性别
*/
// 设置用户性别的方法，供外部调用以修改用户的性别标识
public void setSexTypes(Integer sexTypes) {
this.sexTypes = sexTypes;
}
@ -249,7 +210,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：余额
*/
// 获取用户账户余额的方法，供外部调用以获取用户的账户金额信息
public Double getNewMoney() {
return newMoney;
}
@ -257,7 +217,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：余额
*/
// 设置用户账户余额的方法，供外部调用以修改用户的账户金额
public void setNewMoney(Double newMoney) {
this.newMoney = newMoney;
}
@ -265,7 +224,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：假删
*/
// 获取用户记录假删状态的方法，供外部调用以获取用户记录的删除标识
public Integer getYonghuDelete() {
return yonghuDelete;
}
@ -273,7 +231,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：假删
*/
// 设置用户记录假删状态的方法，供外部调用以修改用户记录的删除标识
public void setYonghuDelete(Integer yonghuDelete) {
this.yonghuDelete = yonghuDelete;
}
@ -281,7 +238,6 @@ public class YonghuModel implements Serializable {
/**
* 获取：创建时间
*/
// 获取用户信息记录创建时间的方法，供外部调用以获取该记录的实际创建时间
public Date getCreateTime() {
return createTime;
}
@ -289,7 +245,6 @@ public class YonghuModel implements Serializable {
/**
* 设置：创建时间
*/
// 设置用户信息记录创建时间的方法，一般由系统自动生成，特殊情况可进行设置
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}

53
src/main/java/com/entity/view/YishengView.java
Unescape View File

@ -13,69 +13,82 @@ import java.util.Date;
* 医生
* 后端返回视图实体辅助类
* （通常后端关联的表或者自定义的字段需要返回使用）
* 该类继承自 YishengEntity，用于扩展或修改返回给前端的实体数据结构
*/
@TableName("yisheng")
@TableName("yisheng") // 表明该实体类对应的数据库表名为 "yisheng"，这里可能是为了保持与基础实体类的一致性或者有特定的 MyBatis-Plus 相关用途
public class YishengView extends YishengEntity implements Serializable {
private static final long serialVersionUID = 1L;
// 序列化版本号，用于在对象序列化和反序列化过程中保持版本一致性
/**
* 科室的值
* 这里定义了一个额外的字段，用于存储科室相关的具体值（可能是科室名称等更详细信息，与 YishengEntity 中的科室字段可能有所区别）
*/
private String yishengValue;
/**
* 职位的值
* 同样定义了一个额外的字段，用于存储职位相关的具体值（可能是职位名称等更详细信息，与 YishengEntity 中的职位字段可能有所区别）
*/
private String zhiweiValue;
/**
* 无参构造函数
* 用于创建一个空的 YishengView 对象
*/
public YishengView() {
}
/**
* 带参构造函数
* 接收一个 YishengEntity 对象，将其属性复制到当前 YishengView 对象中
*
* @param yishengEntity YishengEntity 类型的对象，其属性将被复制到当前对象
*/
public YishengView(YishengEntity yishengEntity) {
try {
// 使用 BeanUtils 工具类将 YishengEntity 对象的属性复制到当前 YishengView 对象
BeanUtils.copyProperties(this, yishengEntity);
} catch (IllegalAccessException | InvocationTargetException e) {
// TODO Auto-generated catch block
// 如果在属性复制过程中出现非法访问或调用目标异常，打印异常堆栈信息
e.printStackTrace();
}
}
/**
* 获取： 科室的值
* 获取科室的值
*
* @return 返回存储的科室的值
*/
public String getYishengValue() {
return yishengValue;
}
/**
* 设置： 科室的值
* 设置科室的值
*
* @param yishengValue 要设置的科室的值
*/
public void setYishengValue(String yishengValue) {
this.yishengValue = yishengValue;
}
/**
* 获取： 职位的值
* 获取职位的值
*
* @return 返回存储的职位的值
*/
public String getZhiweiValue() {
return zhiweiValue;
}
/**
* 设置： 职位的值
* 设置职位的值
*
* @param zhiweiValue 要设置的职位的值
*/
public void setZhiweiValue(String zhiweiValue) {
this.zhiweiValue = zhiweiValue;
}
}

4
src/main/java/com/entity/view/YonghuView.java
Unescape View File

@ -9,6 +9,7 @@ import com.fasterxml.jackson.annotation.JsonFormat;
import java.io.Serializable;
import java.util.Date;
/**
* 用户
* 后端返回视图实体辅助类
@ -18,6 +19,7 @@ import java.util.Date;
public class YonghuView extends YonghuEntity implements Serializable {
private static final long serialVersionUID = 1L;
/**
* 性别的值
*/
@ -40,12 +42,14 @@ public class YonghuView extends YonghuEntity implements Serializable {
/**
* 获取： 性别的值
*/
public String getSexValue() {
return sexValue;
}
/**
* 设置： 性别的值
*/

217
src/main/java/com/entity/vo/YishengVO.java
Unescape View File

@ -13,358 +13,389 @@ import java.io.Serializable;
* 医生
* 手机端接口返回实体辅助类
* （主要作用去除一些不必要的字段）
* 该类用于定义返回给手机端接口的数据结构，通过定义特定的属性，控制返回给客户端的数据内容，
* 避免返回不必要的敏感或无用信息。
*/
@TableName("yisheng")
@TableName("yisheng") // 声明该实体类对应的数据库表名为 "yisheng"，用于 MyBatis-Plus 的相关操作
public class YishengVO implements Serializable {
private static final long serialVersionUID = 1L;
// 序列化版本号，用于保证在对象序列化和反序列化过程中的兼容性
/**
* 主键
* 对应数据库表中记录的唯一标识字段
*/
@TableField(value = "id")
private Integer id;
/**
* 医生工号
* 用于唯一标识医生的编号
*/
@TableField(value = "yisheng_uuid_number")
private String yishengUuidNumber;
/**
* 账户
* 医生登录系统使用的账户名
*/
@TableField(value = "username")
private String username;
/**
* 密码
* 医生登录系统使用的密码
* 注意：通常密码不应该返回给客户端，这里可能存在安全风险，需要根据实际情况处理
*/
@TableField(value = "password")
private String password;
/**
* 医生名称
* 医生的真实姓名
*/
@TableField(value = "yisheng_name")
private String yishengName;
/**
* 科室
* 医生所属的科室，用整数表示科室编号
*/
@TableField(value = "yisheng_types")
private Integer yishengTypes;
/**
* 职位
* 医生的职位，用整数表示职位编号
*/
@TableField(value = "zhiwei_types")
private Integer zhiweiTypes;
/**
* 职称
* 医生的职称信息
*/
@TableField(value = "yisheng_zhichneg")
private String yishengZhichneg;
/**
* 医生头像
* 医生头像的存储路径或链接
*/
@TableField(value = "yisheng_photo")
private String yishengPhoto;
/**
* 联系方式
* 医生的联系电话号码
*/
@TableField(value = "yisheng_phone")
private String yishengPhone;
/**
* 挂号须知
* 关于该医生挂号的相关注意事项
*/
@TableField(value = "yisheng_guahao")
private String yishengGuahao;
/**
* 邮箱
* 医生的电子邮箱地址
*/
@TableField(value = "yisheng_email")
private String yishengEmail;
/**
* 挂号价格
* 患者挂该医生号所需支付的费用
*/
@TableField(value = "yisheng_new_money")
private Double yishengNewMoney;
/**
* 履历介绍
* 医生的工作履历、专业技能等相关介绍信息
*/
@TableField(value = "yisheng_content")
private String yishengContent;
/**
* 创建时间 show1 show2 photoShow
* 该字段表示医生记录的创建时间，通过注解进行日期格式的处理
*/
@JsonFormat(locale = "zh", timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
@DateTimeFormat
@TableField(value = "create_time")
private Date createTime;
/**
* 设置：主键
* 获取主键的值
*
* @return 主键的值
*/
public Integer getId() {
return id;
}
/**
* 获取：主键
* 设置主键的值
*
* @param id 要设置的主键值
*/
public void setId(Integer id) {
this.id = id;
}
/**
* 设置：医生工号
* 获取医生工号的值
*
* @return 医生工号的值
*/
public String getYishengUuidNumber() {
return yishengUuidNumber;
}
/**
* 获取：医生工号
* 设置医生工号的值
*
* @param yishengUuidNumber 要设置的医生工号值
*/
public void setYishengUuidNumber(String yishengUuidNumber) {
this.yishengUuidNumber = yishengUuidNumber;
}
/**
* 设置：账户
* 获取账户的值
*
* @return 账户的值
*/
public String getUsername() {
return username;
}
/**
* 获取：账户
* 设置账户的值
*
* @param username 要设置的账户值
*/
public void setUsername(String username) {
this.username = username;
}
/**
* 设置：密码
* 获取密码的值
*
* @return 密码的值
*/
public String getPassword() {
return password;
}
/**
* 获取：密码
* 设置密码的值
*
* @param password 要设置的密码值
*/
public void setPassword(String password) {
this.password = password;
}
/**
* 设置：医生名称
* 获取医生名称的值
*
* @return 医生名称的值
*/
public String getYishengName() {
return yishengName;
}
/**
* 获取：医生名称
* 设置医生名称的值
*
* @param yishengName 要设置的医生名称值
*/
public void setYishengName(String yishengName) {
this.yishengName = yishengName;
}
/**
* 设置：科室
* 获取科室的值
*
* @return 科室的值
*/
public Integer getYishengTypes() {
return yishengTypes;
}
/**
* 获取：科室
* 设置科室的值
*
* @param yishengTypes 要设置的科室值
*/
public void setYishengTypes(Integer yishengTypes) {
this.yishengTypes = yishengTypes;
}
/**
* 设置：职位
* 获取职位的值
*
* @return 职位的值
*/
public Integer getZhiweiTypes() {
return zhiweiTypes;
}
/**
* 获取：职位
* 设置职位的值
*
* @param zhiweiTypes 要设置的职位值
*/
public void setZhiweiTypes(Integer zhiweiTypes) {
this.zhiweiTypes = zhiweiTypes;
}
/**
* 设置：职称
* 获取职称的值
*
* @return 职称的值
*/
public String getYishengZhichneg() {
return yishengZhichneg;
}
/**
* 获取：职称
* 设置职称的值
*
* @param yishengZhichneg 要设置的职称值
*/
public void setYishengZhichneg(String yishengZhichneg) {
this.yishengZhichneg = yishengZhichneg;
}
/**
* 设置：医生头像
* 获取医生头像的值
*
* @return 医生头像的值
*/
public String getYishengPhoto() {
return yishengPhoto;
}
/**
* 获取：医生头像
* 设置医生头像的值
*
* @param yishengPhoto 要设置的医生头像值
*/
public void setYishengPhoto(String yishengPhoto) {
this.yishengPhoto = yishengPhoto;
}
/**
* 设置：联系方式
* 获取联系方式的值
*
* @return 联系方式的值
*/
public String getYishengPhone() {
return yishengPhone;
}
/**
* 获取：联系方式
* 设置联系方式的值
*
* @param yishengPhone 要设置的联系方式值
*/
public void setYishengPhone(String yishengPhone) {
this.yishengPhone = yishengPhone;
}
/**
* 设置：挂号须知
* 获取挂号须知的值
*
* @return 挂号须知的值
*/
public String getYishengGuahao() {
return yishengGuahao;
}
/**
* 获取：挂号须知
* 设置挂号须知的值
*
* @param yishengGuahao 要设置的挂号须知值
*/
public void setYishengGuahao(String yishengGuahao) {
this.yishengGuahao = yishengGuahao;
}
/**
* 设置：邮箱
* 获取邮箱的值
*
* @return 邮箱的值
*/
public String getYishengEmail() {
return yishengEmail;
}
/**
* 获取：邮箱
* 设置邮箱的值
*
* @param yishengEmail 要设置的邮箱值
*/
public void setYishengEmail(String yishengEmail) {
this.yishengEmail = yishengEmail;
}
/**
* 设置：挂号价格
* 获取挂号价格的值
*
* @return 挂号价格的值
*/
public Double getYishengNewMoney() {
return yishengNewMoney;
}
/**
* 获取：挂号价格
* 设置挂号价格的值
*
* @param yishengNewMoney 要设置的挂号价格值
*/
public void setYishengNewMoney(Double yishengNewMoney) {
this.yishengNewMoney = yishengNewMoney;
}
/**
* 设置：履历介绍
* 获取履历介绍的值
*
* @return 履历介绍的值
*/
public String getYishengContent() {
return yishengContent;
}
/**
* 获取：履历介绍
* 设置履历介绍的值
*
* @param yishengContent 要设置的履历介绍值
*/
public void setYishengContent(String yishengContent) {
this.yishengContent = yishengContent;
}
/**
* 设置：创建时间 show1 show2 photoShow
* 获取创建时间的值
*
* @return 创建时间的值
*/
public Date getCreateTime() {
return createTime;
}
/**
* 获取：创建时间 show1 show2 photoShow
* 设置创建时间的值
*
* @param createTime 要设置的创建时间值
*/
public void setCreateTime(Date createTime) {
this.createTime = createTime;
}
}

2
src/main/java/com/service/YonghuService.java
Unescape View File

@ -6,11 +6,13 @@ import com.entity.YonghuEntity;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
/**
* 用户 服务类
*/
public interface YonghuService extends IService<YonghuEntity> {
/**
* @param params 查询参数
* @return 带分页的查询出来的数据

23
src/main/java/com/service/impl/YishengServiceImpl.java
Unescape View File

@ -19,21 +19,36 @@ import com.entity.view.YishengView;
/**
* 医生 服务实现类
* 该类实现了 YishengService 接口，用于处理医生相关业务逻辑，继承自 MyBatis-Plus 的 ServiceImpl 类
*/
@Service("yishengService")
@Transactional
@Service("yishengService") // 声明这是一个 Spring 服务组件，名称为 "yishengService"
@Transactional // 开启事务管理，确保数据库操作的原子性
public class YishengServiceImpl extends ServiceImpl<YishengDao, YishengEntity> implements YishengService {
/**
* 分页查询医生信息
*
* @param params 包含分页和查询条件的参数映射，可能包含 "page"（页码）、"limit"（每页记录数）等信息
* @return 返回封装好的分页信息对象 PageUtils
*/
@Override
public PageUtils queryPage(Map<String, Object> params) {
// 检查参数是否为空，并且判断是否缺少 "limit" 或 "page" 参数
if (params != null && (params.get("limit") == null || params.get("page") == null)) {
// 如果缺少 "page" 参数，将其默认设置为 "1"，表示第一页
params.put("page", "1");
// 如果缺少 "limit" 参数，将其默认设置为 "10"，表示每页显示 10 条记录
params.put("limit", "10");
}
// 根据传入的参数创建一个分页对象 Page<YishengView>，用于存储查询结果
Page<YishengView> page = new Query<YishengView>(params).getPage();
// 调用 baseMapper（即 YishengDao）的 selectListView 方法，根据分页对象和查询参数进行分页查询
// 并将查询结果记录设置到分页对象中
page.setRecords(baseMapper.selectListView(page, params));
// 将分页对象封装到 PageUtils 中，方便返回给调用者
return new PageUtils(page);
}
}

441
src/main/resources/admin/admin/src/views/modules/guahao/add-or-update.vue
Unescape View File

@ -1,5 +1,6 @@
<template>
<div class="addEdit-block">
<!-- 使用 Element UI 的表单组件，绑定表单数据和验证规则 -->
<el-form
class="detail-form-content"
ref="ruleForm"
@ -7,10 +8,14 @@
:rules="rules"
label-width="80px"
:style="{backgroundColor:addEditForm.addEditBoxColor}">
<!-- 使用 Element UI 的行组件 -->
<el-row>
<!-- 当 sessionTable 不是 'yisheng' 时显示该列 -->
<el-col :span="12" v-if="sessionTable!='yisheng'">
<!-- 当 type 不是 'info' 时显示该表单域，用于选择医生 -->
<el-form-item class="select" v-if="type!='info'" label="医生" prop="yishengId">
<el-select v-model="ruleForm.yishengId" :disabled="ro.yishengId" filterable placeholder="请选择医生" @change="yishengChange">
<!-- 循环渲染医生选项 -->
<el-option
v-for="(item,index) in yishengOptions"
v-bind:key="item.id"
@ -22,10 +27,12 @@
</el-col>
<el-col :span="12" v-if="sessionTable!='yisheng' ">
<!-- 当 type 不是 'info' 时显示该表单域，用于显示医生工号（只读） -->
<el-form-item class="input" v-if="type!='info'" label="医生工号" prop="yishengUuidNumber">
<el-input v-model="yishengForm.yishengUuidNumber"
placeholder="医生工号" clearable readonly></el-input>
</el-form-item>
<!-- 当 type 是 'info' 时显示该表单域，用于显示医生工号（只读） -->
<div v-else>
<el-form-item class="input" label="医生工号" prop="yishengUuidNumber">
<el-input v-model="ruleForm.yishengUuidNumber"
@ -33,6 +40,7 @@
</el-form-item>
</div>
</el-col>
<!-- 以下类似结构的代码块，根据不同条件显示和处理不同的表单域，用于显示和编辑医生的相关信息 -->
<el-col :span="12" v-if="sessionTable!='yisheng' ">
<el-form-item class="input" v-if="type!='info'" label="医生名称" prop="yishengName">
<el-input v-model="yishengForm.yishengName"
@ -82,10 +90,13 @@
</div>
</el-col>
<el-col :span="24" v-if="sessionTable!='yisheng' ">
<!-- 当 type 不是 'info' 且 ro.yishengPhoto 为 false 时显示该表单域，用于上传医生头像 -->
<el-form-item class="upload" v-if="type!='info' &&!ro.yishengPhoto" label="医生头像" prop="yishengPhoto">
<!-- 循环显示已上传的头像图片 -->
<img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in (yishengForm.yishengPhoto || '').split(',')" :src="item" width="100" height="100">
</el-form-item>
<div v-else>
<!-- 当 type 是 'info' 且 ruleForm.yishengPhoto 存在时显示该表单域，用于显示医生头像 -->
<el-form-item v-if="ruleForm.yishengPhoto" label="医生头像" prop="yishengPhoto">
<img style="margin-right:20px;" v-bind:key="index" v-for="(item,index) in (ruleForm.yishengPhoto || '').split(',')" :src="item" width="100" height="100">
</el-form-item>
@ -198,6 +209,7 @@
</el-form-item>
</div>
</el-col>
<!-- 隐藏输入框，用于存储相关 ID -->
<input id="updateId" name="id" type="hidden">
<input id="yishengId" name="yishengId" type="hidden">
<input id="yonghuId" name="yonghuId" type="hidden">
@ -268,431 +280,4 @@
</el-col>
</el-row>
<el-form-item class="btn">
<el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
<el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
<el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import styleJs from "../../../utils/style.js";
// 数字，邮件，手机，url，身份证校验
import { isNumber,isIntNumer,isEmail,isPhone, isMobile,isURL,checkIdCard } from "@/utils/validate";
export default {
data() {
return {
addEditForm:null,
id: '',
type: '',
sessionTable : "",//登录账户所在表名
role : "",//权限
userId:"",//当前登录人的id
yishengForm: {},
yonghuForm: {},
ro:{
yishengId: false,
yonghuId: false,
guahaoUuinNumber: false,
guahaoTime: false,
guahaoTypes: false,
guahaoStatusTypes: false,
guahaoYesnoTypes: false,
guahaoYesnoText: false,
},
ruleForm: {
yishengId: '',
yonghuId: '',
guahaoUuinNumber: '',
guahaoTime: '',
guahaoTypes: '',
guahaoStatusTypes: '',
guahaoYesnoTypes: '',
guahaoYesnoText: '',
},
guahaoTypesOptions : [],
guahaoStatusTypesOptions : [],
guahaoYesnoTypesOptions : [],
yishengOptions : [],
yonghuOptions : [],
rules: {
yishengId: [
{ required: true, message: '医生不能为空', trigger: 'blur' },
{ pattern: /^[1-9][0-9]*$/,
message: '只允许输入整数',
trigger: 'blur'
}
],
yonghuId: [
{ required: true, message: '用户不能为空', trigger: 'blur' },
{ pattern: /^[1-9][0-9]*$/,
message: '只允许输入整数',
trigger: 'blur'
}
],
guahaoUuinNumber: [
{ required: true, message: '就诊识别码不能为空', trigger: 'blur' },
{ pattern: /^[1-9][0-9]*$/,
message: '只允许输入整数',
trigger: 'blur'
}
],
guahaoTime: [
{ required: true, message: '挂号时间不能为空', trigger: 'blur' },
],
guahaoTypes: [
{ required: true, message: '时间类型不能为空', trigger: 'blur' },
{ pattern: /^[1-9][0-9]*$/,
message: '只允许输入整数',
trigger: 'blur'
}
],
guahaoStatusTypes: [
{ required: true, message: '挂号状态不能为空', trigger: 'blur' },
{ pattern: /^[1-9][0-9]*$/,
message: '只允许输入整数',
trigger: 'blur'
}
],
guahaoYesnoTypes: [
{ required: true, message: '挂号审核不能为空', trigger: 'blur' },
{ pattern: /^[1-9][0-9]*$/,
message: '只允许输入整数',
trigger: 'blur'
}
],
guahaoYesnoText: [
{ required: true, message: '审核结果不能为空', trigger: 'blur' },
],
}
};
},
props: ["parent"],
computed: {
},
created() {
//获取当前登录用户的信息
this.sessionTable = this.$storage.get("sessionTable");
this.role = this.$storage.get("role");
this.userId = this.$storage.get("userId");
if (this.role != "管理员"){
}
this.addEditForm = styleJs.addStyle();
this.addEditStyleChange()
this.addEditUploadStyleChange()
//获取下拉框信息
this.$http({
url:`dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_types`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.guahaoTypesOptions = data.data.list;
}
});
this.$http({
url:`dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_status_types`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.guahaoStatusTypesOptions = data.data.list;
}
});
this.$http({
url:`dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_yesno_types`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.guahaoYesnoTypesOptions = data.data.list;
}
});
this.$http({
url: `yisheng/page?page=1&limit=100`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.yishengOptions = data.data.list;
}
});
this.$http({
url: `yonghu/page?page=1&limit=100`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.yonghuOptions = data.data.list;
}
});
},
mounted() {
},
methods: {
// 下载
download(file){
window.open(`${file}`)
},
// 初始化
init(id,type) {
if (id) {
this.id = id;
this.type = type;
}
if(this.type=='info'||this.type=='else'){
this.info(id);
}
// 获取用户信息
this.$http({
url:`${this.$storage.get("sessionTable")}/session`,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
var json = data.data;
} else {
this.$message.error(data.msg);
}
});
},
yishengChange(id){
this.$http({
url: `yisheng/info/`+id,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.yishengForm = data.data;
}
});
},
yonghuChange(id){
this.$http({
url: `yonghu/info/`+id,
method: "get"
}).then(({ data }) => {
if (data && data.code === 0) {
this.yonghuForm = data.data;
}
});
},
// 多级联动参数
info(id) {
let _this =this;
_this.$http({
url: `guahao/info/${id}`,
method: 'get'
}).then(({ data }) => {
if (data && data.code === 0) {
_this.ruleForm = data.data;
_this.yishengChange(data.data.yishengId)
_this.yonghuChange(data.data.yonghuId)
} else {
_this.$message.error(data.msg);
}
});
},
// 提交
onSubmit() {
this.$refs["ruleForm"].validate(valid => {
if (valid) {
this.$http({
url:`guahao/${!this.ruleForm.id ? "save" : "update"}`,
method: "post",
data: this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.parent.showFlag = true;
this.parent.addOrUpdateFlag = false;
this.parent.guahaoCrossAddOrUpdateFlag = false;
this.parent.search();
this.parent.contentStyleChange();
}
});
} else {
this.$message.error(data.msg);
}
});
}
});
},
// 获取uuid
getUUID () {
return new Date().getTime();
},
// 返回
back() {
this.parent.showFlag = true;
this.parent.addOrUpdateFlag = false;
this.parent.guahaoCrossAddOrUpdateFlag = false;
this.parent.contentStyleChange();
},
//图片
addEditStyleChange() {
this.$nextTick(()=>{
// input
document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{
el.style.height = this.addEditForm.inputHeight
el.style.color = this.addEditForm.inputFontColor
el.style.fontSize = this.addEditForm.inputFontSize
el.style.borderWidth = this.addEditForm.inputBorderWidth
el.style.borderStyle = this.addEditForm.inputBorderStyle
el.style.borderColor = this.addEditForm.inputBorderColor
el.style.borderRadius = this.addEditForm.inputBorderRadius
el.style.backgroundColor = this.addEditForm.inputBgColor
})
document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el=>{
el.style.lineHeight = this.addEditForm.inputHeight
el.style.color = this.addEditForm.inputLableColor
el.style.fontSize = this.addEditForm.inputLableFontSize
})
// select
document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
el.style.height = this.addEditForm.selectHeight
el.style.color = this.addEditForm.selectFontColor
el.style.fontSize = this.addEditForm.selectFontSize
el.style.borderWidth = this.addEditForm.selectBorderWidth
el.style.borderStyle = this.addEditForm.selectBorderStyle
el.style.borderColor = this.addEditForm.selectBorderColor
el.style.borderRadius = this.addEditForm.selectBorderRadius
el.style.backgroundColor = this.addEditForm.selectBgColor
})
document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
el.style.lineHeight = this.addEditForm.selectHeight
el.style.color = this.addEditForm.selectLableColor
el.style.fontSize = this.addEditForm.selectLableFontSize
})
document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
el.style.color = this.addEditForm.selectIconFontColor
el.style.fontSize = this.addEditForm.selectIconFontSize
})
// date
document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
el.style.height = this.addEditForm.dateHeight
el.style.color = this.addEditForm.dateFontColor
el.style.fontSize = this.addEditForm.dateFontSize
el.style.borderWidth = this.addEditForm.dateBorderWidth
el.style.borderStyle = this.addEditForm.dateBorderStyle
el.style.borderColor = this.addEditForm.dateBorderColor
el.style.borderRadius = this.addEditForm.dateBorderRadius
el.style.backgroundColor = this.addEditForm.dateBgColor
})
document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
el.style.lineHeight = this.addEditForm.dateHeight
el.style.color = this.addEditForm.dateLableColor
el.style.fontSize = this.addEditForm.dateLableFontSize
})
document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
el.style.color = this.addEditForm.dateIconFontColor
el.style.fontSize = this.addEditForm.dateIconFontSize
el.style.lineHeight = this.addEditForm.dateHeight
})
// upload
let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(el=>{
el.style.width = this.addEditForm.uploadHeight
el.style.height = this.addEditForm.uploadHeight
el.style.borderWidth = this.addEditForm.uploadBorderWidth
el.style.borderStyle = this.addEditForm.uploadBorderStyle
el.style.borderColor = this.addEditForm.uploadBorderColor
el.style.borderRadius = this.addEditForm.uploadBorderRadius
el.style.backgroundColor = this.addEditForm.uploadBgColor
})
document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
el.style.lineHeight = this.addEditForm.uploadHeight
el.style.color = this.addEditForm.uploadLableColor
el.style.fontSize = this.addEditForm.uploadLableFontSize
})
document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
el.style.color = this.addEditForm.uploadIconFontColor
el.style.fontSize = this.addEditForm.uploadIconFontSize
el.style.lineHeight = iconLineHeight
el.style.display = 'block'
})
// 多文本输入框
document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
el.style.height = this.addEditForm.textareaHeight
el.style.color = this.addEditForm.textareaFontColor
el.style.fontSize = this.addEditForm.textareaFontSize
el.style.borderWidth = this.addEditForm.textareaBorderWidth
el.style.borderStyle = this.addEditForm.textareaBorderStyle
el.style.borderColor = this.addEditForm.textareaBorderColor
el.style.borderRadius = this.addEditForm.textareaBorderRadius
el.style.backgroundColor = this.addEditForm.textareaBgColor
})
document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
// el.style.lineHeight = this.addEditForm.textareaHeight
el.style.color = this.addEditForm.textareaLableColor
el.style.fontSize = this.addEditForm.textareaLableFontSize
})
// 保存
document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
el.style.width = this.addEditForm.btnSaveWidth
el.style.height = this.addEditForm.btnSaveHeight
el.style.color = this.addEditForm.btnSaveFontColor
el.style.fontSize = this.addEditForm.btnSaveFontSize
el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
el.style.borderColor = this.addEditForm.btnSaveBorderColor
el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
el.style.backgroundColor = this.addEditForm.btnSaveBgColor
})
// 返回
document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
el.style.width = this.addEditForm.btnCancelWidth
el.style.height = this.addEditForm.btnCancelHeight
el.style.color = this.addEditForm.btnCancelFontColor
el.style.fontSize = this.addEditForm.btnCancelFontSize
el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
el.style.borderColor = this.addEditForm.btnCancelBorderColor
el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
el.style.backgroundColor = this.addEditForm.btnCancelBgColor
})
})
},
addEditUploadStyleChange() {
this.$nextTick(()=>{
document.querySelectorAll('.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item').forEach(el=>{
el.style.width = this.addEditForm.uploadHeight
el.style.height = this.addEditForm.uploadHeight
el.style.borderWidth = this.addEditForm.uploadBorderWidth
el.style.borderStyle = this.addEditForm.uploadBorderStyle
el.style.borderColor = this.addEditForm.uploadBorderColor
el.style.borderRadius = this.addEditForm.uploadBorderRadius
el.style.backgroundColor = this.addEditForm.uploadBgColor
})
})
},
}
};
</script>
<style lang="scss">
.editor{
height: 500px;
& /deep/ .ql-container {
height: 310px;
}
}
.amap-wrapper {
width: 100%;
height: 500px;
}
.search-box {
position: absolute;
}
.addEdit-block {
margin: -10px;
}
.detail-form-content {
padding: 12px;
}
.btn .el-button {
padding: 0;
}</style>
<!-- 当 type 不是 'info

331
src/main/resources/front/front/pages/yisheng/add.html
Unescape View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@ -14,6 +15,7 @@
<!-- 通用的css -->
<link rel="stylesheet" href="../../css/common.css" />
</head>
<!-- 自定义样式部分，设置页面背景、轮播图指示器、按钮样式等 -->
<style>
html::after {
position: fixed;
@ -28,10 +30,12 @@
background-position: center;
z-index: -1;
}
#swiper {
overflow: hidden;
margin: 0 auto;
}
#swiper.layui-carousel-ind li {
width: 20px;
height: 10px;
@ -42,6 +46,7 @@
background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255, 0, 0,.8);
}
#swiper.layui-carousel-ind li.layui-this {
width: 30px;
height: 10px;
@ -51,7 +56,8 @@
border-radius: 6px;
}
button, button:focus {
button,
button:focus {
outline: none;
}
@ -64,32 +70,38 @@
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; ">
<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"}'>
<div carousel-item id="swiper-item">
<!-- 循环渲染轮播图图片 -->
<div v-for="(item, index) in swiperList" :key="index">
<img style="width: 100%; height: 100%; object-fit: cover;" :src="item.img" />
</div>
@ -97,12 +109,10 @@
</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"}'>
<form class="layui-form layui-form-pane add" lay-filter="myForm">
0
<!-- 当前表的 -->
<!-- 唯一uuid -->
<!-- 医生工号输入框 -->
<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">
医生工号：
@ -112,6 +122,7 @@
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">
账户：
@ -121,6 +132,7 @@
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">
医生名称：
@ -130,6 +142,7 @@
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">
职位：
@ -137,10 +150,12 @@
<div class="layui-input-block">
<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">
职称：
@ -150,322 +165,28 @@
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 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme main_backgroundColor" id="yishengPhotoUpload">
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传医生头像
</button>
</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.yishengPhone" lay-verify="phone|required" type="text" :readonly="ro.yishengPhone" name="yishengPhone" id="yishengPhone" 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.yishengGuahao" type="text" :readonly="ro.yishengGuahao" name="yishengGuahao" id="yishengGuahao" 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.yishengEmail" lay-verify="email|required" type="text" :readonly="ro.yishengEmail" name="yishengEmail" id="yishengEmail" 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"}'>
<div class="layui-input-block" style="text-align: right;">
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit" lay-submit lay-filter="thisSubmit">提交</button>
</div>
</div>
</form>
</div>
</div>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<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 type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
<script>
var jquery = $;
var vue = new Vue({
el: '#app',
data: {
// 轮播图
swiperList: [{
img: '../../img/banner.jpg'
}],
dataList: [],
ro:{
yishengUuidNumber: true,
username: false,
password: false,
yishengName: false,
yishengTypes: false,
zhiweiTypes: false,
yishengZhichneg: false,
yishengPhoto: false,
yishengPhone: false,
yishengGuahao: false,
yishengEmail: false,
yishengNewMoney: false,
yishengContent: false,
createTime: false,
},
detail: {
yishengUuidNumber: new Date().getTime(),//数字
username: '',
password: '',
yishengName: '',
yishengTypes: '',//数字
yishengValue: '',//数字对应的值
zhiweiTypes: '',//数字
zhiweiValue: '',//数字对应的值
yishengZhichneg: '',
yishengPhoto: '',
yishengPhone: '',
yishengGuahao: '',
yishengEmail: '',
yishengNewMoney: '',
yishengContent: '',
createTime: '',
},
// 级联表的
// 下拉框
yishengTypesList: [],
zhiweiTypesList: [],
centerMenu: centerMenu
},
updated: function() {
layui.form.render('select', 'myForm');
},
computed: {
},
methods: {
jump(url) {
jump(url)
}
}
})
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate','tinymce'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var form = layui.form;
var upload = layui.upload;
var laydate = layui.laydate;
var tinymce = layui.tinymce
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if(element.value != null){
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
});
});
}
});
// 下拉框
// 科室的查询和初始化
yishengTypesSelect();
// 职位的查询和初始化
zhiweiTypesSelect();
// 上传文件
// 医生头像的文件上传
upload.render({
//绑定元素
elem: '#yishengPhotoUpload',
//上传接口
url: http.baseurl + 'file/upload',
// 请求头
headers: {
Token: localStorage.getItem('Token')
},
// 允许上传时校验的文件类型
accept: 'images',
before: function () {
//loading层
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
},
// 上传成功
done: function (res) {
console.log(res);
layer.closeAll();
if (res.code == 0) {
layer.msg("上传成功", {
time: 2000,
icon: 6
})
var url = http.baseurl + 'upload/' + res.file;
jquery('#yishengPhoto').val(url);
vue.detail.yishengPhoto = url;
jquery('#yishengPhotoImg').attr('src', url);
} else {
layer.msg(res.msg, {
time: 2000,
icon: 5
})
}
},
//请求异常回调
error: function () {
layer.closeAll();
layer.msg("请求接口异常", {
time: 2000,
icon: 5
})
}
});
// 日期效验规则及格式
dateTimePick();
// 表单效验规则
form.verify({
// 正整数效验规则
integer: [
/^[1-9][0-9]*$/
,'必须是正整数'
]
// 小数效验规则
,double: [
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
,'最大整数位为6为,小数最大两位'
]
});
// session独取
let table = localStorage.getItem("userTable");
http.request(table+"/session", 'get', {}, function (data) {
// 表单赋值
//form.val("myForm", data.data);
// data = data.data;
for (var key in data) {
vue.detail[table+"Id"] = data.id
}
});
// 提交
form.on('submit(thisSubmit)', function (data) {
data = data.field;
data["Id"]= localStorage.getItem("userid");
// 提交数据
http.requestJson('yisheng' + '/add', 'post', data, function (res) {
layer.msg('提交成功', {
time: 2000,
icon: 6
}, function () {
back();
});
});
return false
});
});
// 日期框初始化
function dateTimePick(){
var myDate = new Date(); //获取当前时间
/*
,change: function(value, date, endDate){
value 得到日期生成的值，如：2017-08-18
date 得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
endDate 得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
*/
}
// 科室的查询
function yishengTypesSelect() {
//填充下拉框选项
layui.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() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=zhiwei_types", "GET", {}, (res) => {
if(res.code == 0){
vue.zhiweiTypesList = res.data.list;
}
});
}
</script>
</body>
</html>
v-model="detail.yishengPhone" lay-verify="phone|required" type="text" :readonly="ro.yishengPhone" name="yishengPhone"

343
src/main/resources/front/front/pages/yisheng/center.html
Unescape View File

@ -1,22 +1,25 @@
<!-- 个人中心 -->
<!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>
<!-- 引入Layui的CSS样式文件 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入element样式 -->
<!-- 引入Element UI的CSS样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 样式 -->
<!-- 引入自定义样式文件 -->
<link rel="stylesheet" href="../../css/style.css" />
<!-- 主题（主要颜色设置） -->
<!-- 引入主题样式文件 -->
<link rel="stylesheet" href="../../css/theme.css" />
<!-- 通用的css -->
<!-- 引入通用样式文件 -->
<link rel="stylesheet" href="../../css/common.css" />
</head>
<style>
/* 设置页面背景样式 */
html::after {
position: fixed;
top: 0;
@ -30,9 +33,11 @@
background-position: center;
z-index: -1;
}
/* 设置轮播图容器样式 */
#swiper {
overflow: hidden;
}
/* 设置轮播图指示器样式 */
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
@ -43,6 +48,7 @@
background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255,0,0,.8);
}
/* 设置轮播图当前指示器样式 */
#swiper .layui-carousel-ind li.layui-this {
width: 30px;
height: 10px;
@ -51,7 +57,7 @@
border-color: rgba(0,0,0,.3);
border-radius: 6px;
}
/* 设置标题容器样式 */
.index-title {
text-align: center;
box-sizing: border-box;
@ -61,16 +67,20 @@
align-items: center;
flex-direction: column;
}
/* 设置标题文字样式 */
.index-title span {
padding: 0 10px;
line-height: 1.4;
}
/* 设置个人中心菜单容器样式 */
.center-container .layui-nav-tree {
width: 100%;
}
/* 设置个人中心菜单样式 */
.center-container .layui-nav {
position: inherit;
}
/* 设置个人中心菜单项样式 */
.center-container .layui-nav-tree .layui-nav-item {
height: 44px;
line-height: 44px;
@ -82,10 +92,12 @@
background-color: #fff;
text-align: center;
}
/* 设置个人中心菜单选中条样式 */
.center-container .layui-nav-tree .layui-nav-bar {
height: 44px !important;
opacity: 0 !important;
}
/* 设置个人中心菜单当前选中项样式 */
.center-container .layui-nav-tree .layui-nav-item.layui-this {
font-size: 16px;
color: rgba(17, 17, 17, 1);
@ -93,6 +105,7 @@
border-style: solid;
border-radius: 0;
}
/* 设置个人中心菜单项悬停样式 */
.center-container .layui-nav-tree .layui-nav-item:hover {
font-size: 14px;
color: #fff;
@ -100,6 +113,7 @@
border-style: solid;
border-radius: 0;
}
/* 设置个人中心菜单项链接样式 */
.center-container .layui-nav-tree .layui-nav-item a {
line-height: inherit;
height: auto;
@ -107,18 +121,21 @@
color: inherit;
text-decoration: none;
}
/* 设置右侧内容容器样式 */
.right-container {
position: relative;
}
/* 设置右侧表单元素样式 */
.right-container .layui-form-item {
display: flex;
align-items: center;
}
/* 设置右侧表单输入框容器样式 */
.right-container .layui-input-block {
margin: 0;
flex: 1;
}
/* 设置右侧输入框样式 */
.right-container .input .layui-input {
padding: 0 12px;
height: 40px;
@ -129,6 +146,7 @@
background-color: #fff;
text-align: left;
}
/* 设置右侧下拉框样式 */
.right-container .select .layui-input {
padding: 0 12px;
height: 40px;
@ -139,6 +157,7 @@
background-color: #fff;
text-align: left;
}
/* 设置右侧日期输入框样式 */
.right-container .date .layui-input {
padding: 0 12px;
height: 40px;
@ -151,33 +170,50 @@
box-shadow: 0 0 0px rgba(255,0,0,.8);
text-align: left;
}
/* 设置头部动画和样式 */
.header {animation-name: fadeInUp; padding-bottom: 26px;padding-top: 70px;position:relative;border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:40px;}
/* 设置特定头部样式 */
#plheader{ top: 48px;padding-bottom: 40px;width: 220px;position: relative;height: 70px;border-radius: 3px 3px 0px 0px;padding-top: 40px !important;}
/* 设置头部标题样式 */
.header p.title {color: #fff;font-size: 25px;margin-bottom: 8px;text-align: left;white-space: nowrap;overflow: hidden;margin-left: 31px;font-weight: bold; padding-bottom: 8px;margin-top: 0px;width: 158px;border-bottom: 1px solid rgba(255, 255, 255, 0.16);letter-spacing:1px;}
#category {padding-top: 136px;margin-left: 0px;padding-bottom: 30px;width: 205px;float: left;padding-left: 15px;text-align: left;margin-top: -120px;background-color: var(--publicMainColor);border-radius: 0px 0px 3px 3px;}
/* 设置头部副标题样式 */
.header p.subtitle {font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";letter-spacing: 1px;font-size: 15px;display: inline-block;padding-top: 0px;color: #ffffff; margin-top: 0px; margin-right:31px;float: right;overflow: hidden;width: 156px;text-align: left;}
/* 设置分类菜单激活项样式 */
#category a.active::before {display: none;}
/* 设置分类菜单激活项样式 */
#category a.active::after {display:none;}
/* 设置分类菜单激活项和悬停样式 */
#category a.active, #category a:hover {background: var(--publicSubColor);color: #FFFFFF;border-color: #838383;transition: 0.3s; transform-origin: bottom;}
/* 设置分类菜单项样式 */
#category li {height:auto;position:relative;float:none; display:block;margin-top:1px;margin-bottom:1px;line-height:43px;border-bottom: 1px solid rgba(255, 255, 255, 0.05);padding-left: 15px;margin-right:16px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
/* 设置分类菜单最后一项样式 */
#category li:last-child { border-bottom:none;}
/* 设置分类菜单链接样式 */
#category a { border:0px; background:none; color:#CFDCF9; font-size:14px; position:relative; padding:0;line-height: 42px;height: 42px;}
/* 设置分类菜单链接前伪元素样式 */
#category a::before { content:''; position:absolute; content: '';position: absolute;width: 190px;background-color: #AEAEAF;height: 42px;background: transparent;left: -16px;position: absolute;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
/* 设置分类菜单激活项前伪元素样式 */
#category a.active::before {display: none;}
/* 设置分类菜单项悬停样式 */
#category li:hover {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
/* 设置分类菜单特定项样式 */
#category .bbbb, #category li .aaaa {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;background: var(--publicSubColor);color: #FFFFFF; transition: 0.3s; transform-origin: bottom;}
/* 设置分类菜单项悬停时子项宽度 */
#category li:hover ul li{width: 136px;}
/* 设置分类菜单项悬停时子项链接样式 */
#category li:hover ul li a{color: rgba(255, 255, 255, 0.45);width: 136px;overflow: hidden; background-color: rgb(34, 73, 160); padding-left:0px;}
/* 设置分类菜单项悬停时子项链接悬停样式 */
#category li ul li:hover a{ padding-left:0px; margin-left: 0px;}
/* 设置分类菜单项悬停时链接样式 */
#category li:hover a{color:#fff}
</style>
<body>
<!-- Vue实例挂载点 -->
<div id="app">
<!-- 轮播图 -->
<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"}'>
<div carousel-item>
<!-- 循环渲染轮播图图片 -->
<div v-for="(item,index) in swiperList" :key="index">
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
</div>
@ -190,57 +226,82 @@
<div class="line-container">
<p class="line" style="background: #EEEEEE;"> 个人中心 </p>
</div> -->
<!-- 标题 -->
<!-- 个人中心容器 -->
<div class="center-container">
<!-- 个人中心菜单 config.js-->
<div style=" width:auto; margin:-70px 10px 0px auto">
<!-- 头部标题部分 -->
<div class="header" id="plheader">
<!-- 主标题 -->
<p class="title">个人中心</p>
<!-- 副标题 -->
<p class="subtitle">USER / CENTER</p>
</div>
<!-- 分类菜单 -->
<ul id="category">
<!-- 循环渲染菜单列表 -->
<li v-for="(item,index) in centerMenu" v-bind:key="index" :class="index==0?'bbbb':''">
<!-- 菜单项链接 -->
<a :href="'javascript:jump(\''+item.url+'\')'" style="color:#FFFFFF;" :class="index==0?'aaaa':''">{{item.name}}</a>
</li>
</ul>
</div> <!-- 个人中心菜单 -->
</div>
<!-- 个人中心菜单 -->
<!-- 个人中心 -->
<div class="right-container sub_borderColor" :style='{"padding":"20px","boxShadow":"0px rgba(255,0,0,.8)","margin":"0","backgroundColor":"#fff","borderRadius":"0","borderWidth":"1px","borderStyle":"solid"}'>
<!-- 表单部分 -->
<form class="layui-form">
<!-- 主键 -->
<!-- 隐藏的主键输入框 -->
<input type="hidden" v-model="detail.id" name="id" id="id" />
<!-- 医生工号输入项 -->
<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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
医生工号
</label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 医生工号输入框 -->
<input type="text" v-model="detail.yishengUuidNumber" name="yishengUuidNumber" id="yishengUuidNumber" lay-verify="required" placeholder="医生工号" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
账户
</label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 账户输入框 -->
<input type="text" v-model="detail.username" name="username" id="username" lay-verify="required" placeholder="账户" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
医生名称
</label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 医生名称输入框 -->
<input type="text" v-model="detail.yishengName" name="yishengName" id="yishengName" lay-verify="required" placeholder="医生名称" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
科室
</label>
<!-- 选择框容器 -->
<div class="layui-input-block select">
<!-- Element UI的选择框 -->
<el-select v-model="detail.yishengTypes" filterable placeholder="请选择科室 Search111" style="border-color: var(--publicMainColor, #808080);" name="yishengTypes" id="yishengTypes">
<!-- 循环渲染科室选项 -->
<el-option
v-for="(item,index) in yishengTypesList"
v-bind:key="item.codeIndex"
@ -250,12 +311,17 @@
</el-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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
职位
</label>
<!-- 选择框容器 -->
<div class="layui-input-block select">
<!-- Element UI的选择框 -->
<el-select v-model="detail.zhiweiTypes" filterable placeholder="请选择职位 Search111" style="border-color: var(--publicMainColor, #808080);" name="zhiweiTypes" id="zhiweiTypes">
<!-- 循环渲染职位选项 -->
<el-option
v-for="(item,index) in zhiweiTypesList"
v-bind:key="item.codeIndex"
@ -265,72 +331,108 @@
</el-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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
职称
</label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 职称输入框 -->
<input type="text" v-model="detail.yishengZhichneg" name="yishengZhichneg" id="yishengZhichneg" lay-verify="required" placeholder="职称" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 隐藏标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
医生头像
</label>
<!-- 头像显示容器 -->
<div class="layui-input-block">
<!-- 医生头像图片 -->
<img id="yishengPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :style='{"boxShadow":"0 0 3px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"1px","width":"80px","borderStyle":"solid","height":"80px"}' :src="detail.yishengPhoto">
<!-- 隐藏的头像路径输入框 -->
<input type="hidden" v-model="detail.yishengPhoto" id="yishengPhoto" name="yishengPhoto" />
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 隐藏标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
医生头像
</label>
<!-- 上传按钮容器 -->
<div class="layui-input-block">
<!-- 上传按钮 -->
<button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme"
id="yishengPhotoUpload">
<!-- 上传图标 -->
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传医生头像
</button>
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
联系方式
</label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 联系方式输入框 -->
<input type="text" v-model="detail.yishengPhone" name="yishengPhone" id="yishengPhone" lay-verify="required|phone" placeholder="联系方式" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
挂号须知
</label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 挂号须知输入框 -->
<input type="text" v-model="detail.yishengGuahao" name="yishengGuahao" id="yishengGuahao" lay-verify="required" placeholder="挂号须知" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
邮箱
</label>
<!-- 输入框容器 -->
<div class="layui-input-block input">
<!-- 邮箱输入框 -->
<input type="text" v-model="detail.yishengEmail" name="yishengEmail" id="yishengEmail" lay-verify="required|email" placeholder="邮箱" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 标签 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">挂号价格</label>
<!-- 输入框容器 -->
<div class="layui-input-inline input">
<!-- 挂号价格输入框，禁用状态 -->
<input type="number" v-model="detail.yishengNewMoney" name="yishengNewMoney" id="yishengNewMoney" placeholder="挂号价格" autocomplete="off" class="layui-input" disabled="disabled">
</div>
<!-- 充值提示和链接 -->
<div class="layui-form-mid layui-word-aux">
<!-- 提示图标 -->
<i class="layui-icon" style="font-size: 20px;color: red;">&#xe65e;</i>
<!-- 充值链接 -->
<a id="btn-recharge" href="javascript:void(0)">点我充值</a>
</div>
</div>
<!-- 表单提交和退出登录按钮 -->
<div class="layui-form-item">
<div class="layui-input-block" style="display: flex;flex-wrap:wrap;">
<!-- 更新信息按钮 -->
<button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"15px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit btn-theme" lay-submit lay-filter="*">更新信息</button>
<!-- 退出登录按钮 -->
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","backgroundColor":"rgba(255, 0, 0, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"14px","borderStyle":"solid","height":"44px"}' @click="logout" class="layui-btn btn-submit">退出登录</button>
</div>
</div>
@ -341,27 +443,31 @@
</div>
<!-- layui -->
<!-- 引入Layui的JS文件 -->
<script src="../../layui/layui.js"></script>
<!-- vue -->
<!-- 引入Vue的JS文件 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入Element UI的JS文件 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 组件配置信息 -->
<!-- 引入组件配置信息文件 -->
<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实例
var vue = new Vue({
// 挂载点
el: '#app',
// 数据部分
data: {
// 轮播图
// 轮播图数据
swiperList: [],
// 个人信息详情
detail: {
yishengUuidNumber: new Date().getTime(),//数字
username: '',
@ -380,18 +486,27 @@
yishengContent: '',
createTime: '',
},
// 科室列表
yishengTypesList: [],
// 职位列表
zhiweiTypesList: [],
// 个人中心菜单数据
centerMenu: centerMenu
},
// 数据更新后的钩子函数
updated: function() {
// 重新渲染表单
// layui.form.render(null, 'myForm');
},
// 方法部分
methods: {
// 跳转页面方法
jump(url) {
jump(url)
},
// 退出登录方法
logout(){
// 清除本地存储的登录信息
localStorage.removeItem('Token');
localStorage.removeItem('role');
localStorage.removeItem('sessionTable');
@ -399,195 +514,17 @@
localStorage.removeItem('userid');
localStorage.removeItem('userTable');
localStorage.removeItem('iframeUrl');
// 跳转到登录页面
window.parent.location.href = '../login/login.html';
}
}
})
// 使用Layui的模块
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'laydate', 'form', 'upload'], function() {
// 获取Layui的模块
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var form = layui.form;
var upload = layui.upload;
// 充值
jquery('#btn-recharge').click(function(e) {
layer.open({
type: 2,
title: '用户充值',
area: ['900px', '600px'],
content: '../recharge/recharge.html'
});
});
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function(res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if (element.value != null) {
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
// 轮播图
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
});
})
}
});
// 查询字典表相关
// 科室的查询和初始化
yishengTypesSelect();
// 职位的查询和初始化
zhiweiTypesSelect();
// 日期效验规则及格式
dateTimePick();
// 表单效验规则
form.verify({
// 正整数效验规则
integer: [
/^[1-9][0-9]*$/
,'必须是正整数'
]
// 小数效验规则
,double: [
/^[0-9]{0,6}(\.[0-9]{1,2})?$/
,'最大整数位为6为,小数最大两位'
]
});
// 上传 文件/图片
// 医生头像的文件上传
var yishengPhotoUpload = upload.render({
//绑定元素
elem: '#yishengPhotoUpload',
//上传接口
url: http.baseurl + 'file/upload',
// 请求头
headers: {
Token: localStorage.getItem('Token')
},
// 允许上传时校验的文件类型
accept: 'images',
before: function() {
//loading层
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
},
// 上传成功
done: function(res) {
console.log(res);
layer.closeAll();
if (res.code == 0) {
layer.msg("上传成功", {
time: 2000,
icon: 6
})
var url = http.baseurl + 'upload/' + res.file;
vue.detail.yishengPhoto = url;
} else {
layer.msg(res.msg, {
time: 2000,
icon: 5
})
}
},
//请求异常回调
error: function() {
layer.closeAll();
layer.msg("请求接口异常", {
time: 2000,
icon: 5
})
}
});
// 查询用户信息
let table = localStorage.getItem("userTable");
if(!table){
layer.msg('请先登录', {
time: 2000,
icon: 5
}, function() {
window.parent.location.href = '../login/login.html';
});
}
http.request(`yisheng/session`, 'get', {}, function(data) {
// 表单赋值
// form.val("myForm", data.data);
vue.detail = data.data
// 图片赋值
//jquery("#yishengPhotoImg").attr("src", data.data.yishengPhoto);
});
// 提交表单
form.on('submit(*)', function(data) {
data = vue.detail;
data['createTime']=jquery("#createTime").val();
http.requestJson(table + '/update', 'post', data, function(res) {
layer.msg('修改成功', {
time: 2000,
icon: 6
}, function() {
window.location.reload();
});
});
return false
});
});
// 日期框初始化
function dateTimePick(){
}
//科室的查询
function yishengTypesSelect() {
//填充下拉框选项
layui.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() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=zhiwei_types", "GET", {}, (res) => {
if(res.code == 0){
vue.zhiweiTypesList = res.data.list;
}
});
}
</script>
</body>
</html>

25
src/main/resources/mapper/YishengDao.xml
Unescape View File

@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.dao.YishengDao">
<!-- 通用查询结果列 -->
<!-- 定义了一个 SQL 片段，包含了从数据库表中查询的列，将这些列别名为实体类中的属性名，方便结果映射 -->
<sql id="Base_Column_List">
a.id as id
,a.yisheng_uuid_number as yishengUuidNumber
@ -20,64 +20,77 @@
,a.yisheng_content as yishengContent
,a.create_time as createTime
</sql>
<!-- 定义一个查询方法，id 为 "selectListView"，参数类型为 Map，返回类型为 com.entity.view.YishengView -->
<select id="selectListView" parameterType="map" resultType="com.entity.view.YishengView">
SELECT
<!-- 引入上面定义的通用查询结果列 SQL 片段 -->
<include refid="Base_Column_List" />
-- 级联表的字段
FROM yisheng a
<!-- 条件查询部分 -->
<where>
<!-- 如果参数中存在 "ids"，并且其值不为空，构建 in 条件 -->
<if test="params.ids != null">
and a.id in
<foreach item="item" index="index" collection="params.ids" open="(" separator="," close=")">
#{item}
</foreach>
</if>
<!-- 如果参数中 "yishengUuidNumber" 不为空字符串、不为 null 且不等于 "null" 字符串，构建模糊查询条件 -->
<if test=" params.yishengUuidNumber != '' and params.yishengUuidNumber != null and params.yishengUuidNumber != 'null' ">
and a.yisheng_uuid_number like CONCAT('%',#{params.yishengUuidNumber},'%')
</if>
<!-- 如果参数中 "username" 不为空字符串、不为 null 且不等于 "null" 字符串，构建模糊查询条件 -->
<if test=" params.username != '' and params.username != null and params.username != 'null' ">
and a.username like CONCAT('%',#{params.username},'%')
</if>
<!-- 如果参数中 "password" 不为空字符串、不为 null 且不等于 "null" 字符串，构建模糊查询条件 -->
<if test=" params.password != '' and params.password != null and params.password != 'null' ">
and a.password like CONCAT('%',#{params.password},'%')
</if>
<!-- 如果参数中 "yishengName" 不为空字符串、不为 null 且不等于 "null" 字符串，构建模糊查询条件 -->
<if test=" params.yishengName != '' and params.yishengName != null and params.yishengName != 'null' ">
and a.yisheng_name like CONCAT('%',#{params.yishengName},'%')
</if>
<!-- 如果参数中 "yishengTypes" 不为空且不为空字符串，构建等于条件 -->
<if test="params.yishengTypes != null and params.yishengTypes != ''">
and a.yisheng_types = #{params.yishengTypes}
</if>
<!-- 如果参数中 "zhiweiTypes" 不为空且不为空字符串，构建等于条件 -->
<if test="params.zhiweiTypes != null and params.zhiweiTypes != ''">
and a.zhiwei_types = #{params.zhiweiTypes}
</if>
<!-- 如果参数中 "yishengZhichneg" 不为空字符串、不为 null 且不等于 "null" 字符串，构建模糊查询条件 -->
<if test=" params.yishengZhichneg != '' and params.yishengZhichneg != null and params.yishengZhichneg != 'null' ">
and a.yisheng_zhichneg like CONCAT('%',#{params.yishengZhichneg},'%')
</if>
<!-- 如果参数中 "yishengPhone" 不为空字符串、不为 null 且不等于 "null" 字符串，构建模糊查询条件 -->
<if test=" params.yishengPhone != '' and params.yishengPhone != null and params.yishengPhone != 'null' ">
and a.yisheng_phone like CONCAT('%',#{params.yishengPhone},'%')
</if>
<!-- 如果参数中 "yishengGuahao" 不为空字符串、不为 null 且不等于 "null" 字符串，构建模糊查询条件 -->
<if test=" params.yishengGuahao != '' and params.yishengGuahao != null and params.yishengGuahao != 'null' ">
and a.yisheng_guahao like CONCAT('%',#{params.yishengGuahao},'%')
</if>
<!-- 如果参数中 "yishengEmail" 不为空字符串、不为 null 且不等于 "null" 字符串，构建模糊查询条件 -->
<if test=" params.yishengEmail != '' and params.yishengEmail != null and params.yishengEmail != 'null' ">
and a.yisheng_email like CONCAT('%',#{params.yishengEmail},'%')
</if>
<!-- 如果参数中 "yishengNewMoneyStart" 不为空，构建大于等于条件，使用 CDATA 防止特殊字符转义 -->
<if test="params.yishengNewMoneyStart != null ">
<![CDATA[ and a.yisheng_new_money >= #{params.yishengNewMoneyStart} ]]>
</if>
<!-- 如果参数中 "yishengNewMoneyEnd" 不为空，构建小于等于条件，使用 CDATA 防止特殊字符转义 -->
<if test="params.yishengNewMoneyEnd != null ">
<![CDATA[ and a.yisheng_new_money <= #{params.yishengNewMoneyEnd} ]]>
</if>
<!-- 如果参数中 "yishengContent" 不为空字符串、不为 null 且不等于 "null" 字符串，构建模糊查询条件 -->
<if test=" params.yishengContent != '' and params.yishengContent != null and params.yishengContent != 'null' ">
and a.yisheng_content like CONCAT('%',#{params.yishengContent},'%')
</if>
</where>
<!-- 根据参数中的 "orderBy" 字段进行降序排序 -->
order by a.${params.orderBy} desc
</select>
</mapper>

480
target/classes/front/front/pages/guahao/add.html
Unescape View File

@ -1,20 +1,26 @@
<!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>
<!-- bootstrap样式，地图插件使用 -->
<!-- 引入Bootstrap样式（地图插件依赖） -->
<link rel="stylesheet" href="../../css/bootstrap.min.css"/>
<!-- 引入layui框架基础样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 -->
<!-- 引入自定义全局样式 -->
<link rel="stylesheet" href="../../css/style.css"/>
<!-- 主题（主要颜色设置） -->
<!-- 引入主题颜色样式 -->
<link rel="stylesheet" href="../../css/theme.css"/>
<!-- 通用的css -->
<!-- 引入公共样式文件 -->
<link rel="stylesheet" href="../../css/common.css"/>
</head>
<!-- 自定义页面样式 -->
<style>
/* 页面全屏背景伪元素，固定定位并居中显示背景图 */
html::after {
position: fixed;
top: 0;
@ -23,378 +29,268 @@
bottom: 0;
content: '';
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center;
z-index: -1;
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;
margin: 0 auto; /* 水平居中 */
}
button, button:focus {
outline: none;
}
.data-add-container .add .layui-select-title .layui-unselect {
/* 表单输入项通用样式 */
.data-add-container .add .layui-input {
padding: 0 12px;
height: 40px;
font-size: 15px;
border-radius: 4px;
border-width: 1px;
border-style: solid;
text-align: center;
height: 40px; /* 固定高度 */
border-radius: 4px; /* 圆角 */
border: 1px solid #e0e0e0; /* 浅灰边框 */
font-size: 15px; /* 字体大小 */
}
.data-add-container .add .layui-form-item {
/* 表单行样式，弹性布局实现标签和输入框对齐 */
.data-add-container .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;
align-items: center; /* 垂直居中 */
margin-bottom: 10px; /* 底部边距 */
}
.data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
margin: 0;
flex: 1;
display: flex;
/* 表单标签样式，固定宽度并左对齐 */
.layui-form-label {
width: 110px; /* 固定宽度 */
text-align: left; /* 文本左对齐 */
color: #333; /* 深灰文字 */
}
</style>
</head>
<body style="background: #EEEEEE;">
<!-- Vue实例挂载点，包含整个页面内容 -->
<div id="app">
<!-- 轮播图区域 -->
<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"}'>
:style='{
"width": "100%",
"boxShadow": "none",
"border": "none"
}'>
<div carousel-item id="swiper-item">
<!-- 轮播图图片循环渲染，默认包含一张示例图片 -->
<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"}'>
:style='{
"padding": "20px",
"margin": "30px auto",
"backgroundColor": "#fff", /* 白色背景 */
"borderRadius": "10px", /* 圆角 */
"border": "1px solid #e0e0e0" /* 浅灰边框 */
}'>
<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-form-item main_borderColor">
<label 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.guahaoUuinNumber" lay-verify="integer|required" type="text"
:readonly="ro.guahaoUuinNumber" name="guahaoUuinNumber" id="guahaoUuinNumber"
autocomplete="off">
<input
class="layui-input main_borderColor"
:style='{
"backgroundColor": "#fff",
"borderColor": "#e0e0e0"
}'
v-model="detail.guahaoUuinNumber"
lay-verify="integer|required" /* 正整数和必填校验 */
type="text"
:readonly="ro.guahaoUuinNumber" /* 只读控制 */
name="guahaoUuinNumber"
id="guahaoUuinNumber"
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-form-item main_borderColor">
<label 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"}'
type="text" :readonly="ro.guahaoTime" name="guahaoTime" id="guahaoTime" autocomplete="off">
<input
class="layui-input main_borderColor"
:style='{
"backgroundColor": "#fff",
"borderColor": "#e0e0e0"
}'
type="text"
:readonly="ro.guahaoTime"
name="guahaoTime"
id="guahaoTime"
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-form-item main_borderColor">
<label class="layui-form-label">时间状态：</label>
<div class="layui-input-block">
<select name="guahaoTypes" id="guahaoTypesList" lay-filter="guahaoTypesList">
<select
name="guahaoTypes"
id="guahaoTypesList"
lay-filter="guahaoTypesList"
class="layui-select"
>
<option value="">请选择</option>
<option v-for="(item,index) in guahaoTypesList" v-bind:key="index" :value="item.codeIndex"
:key="item.codeIndex">{{ item.indexName }}
<!-- 动态渲染时间状态选项，数据来自guahaoTypesList -->
<option
v-for="(item, index) in guahaoTypesList"
:key="item.codeIndex"
:value="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"}'>
<div class="layui-input-block" style="text-align: right;">
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}'
class="layui-btn btn-submit" lay-submit lay-filter="thisSubmit">提交
<!-- 提交按钮 -->
<div class="layui-form-item main_borderColor" style="text-align: right;">
<button
:style='{
"backgroundColor": "#4b5cc4", /* 主题蓝色 */
"color": "#fff",
"borderRadius": "8px",
"height": "44px"
}'
class="layui-btn btn-submit"
lay-submit
lay-filter="thisSubmit"
>
提交
</button>
</div>
</div>
</form>
</div>
</div>
<!-- 引入layui框架核心脚本 -->
<script src="../../layui/layui.js"></script>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入Element组件库（备用，当前页面未直接使用） -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<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 type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
<!-- 地图相关脚本（当前页面未实际使用，仅引入备用） -->
<script src="../../js/jquery.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap.AMapPositionPicker.js"></script>
<script>
var jquery = $;
var jquery = $; // 兼容jQuery引用
// 初始化Vue实例
var vue = new Vue({
el: '#app',
el: '#app', // 绑定根元素
data: {
// 轮播图
swiperList: [{
img: '../../img/banner.jpg'
}],
dataList: [],
ro: {
yishengId: false,
yonghuId: false,
swiperList: [{ img: '../../img/banner.jpg' }], // 轮播图默认数据（可动态加载）
ro: { /* 字段只读控制对象 */
guahaoUuinNumber: false,
guahaoTime: false,
guahaoTypes: false,
guahaoStatusTypes: false,
guahaoYesnoTypes: false,
guahaoYesnoText: false,
createTime: false,
guahaoTime: false
},
detail: {
yishengId: '',
yonghuId: '',
guahaoUuinNumber: new Date().getTime(),
guahaoTime: '',
guahaoTypes: '',//数字
guahaoValue: '',//数字对应的值
guahaoStatusTypes: '',//数字
guahaoStatusValue: '',//数字对应的值
guahaoYesnoTypes: '',//数字
guahaoYesnoValue: '',//数字对应的值
guahaoYesnoText: '',
createTime: '',
detail: { /* 挂号详情数据对象 */
guahaoUuinNumber: new Date().getTime(), // 初始化就诊识别码为时间戳
guahaoTime: '', // 挂号时间
guahaoTypes: '' // 时间状态编码
},
// 级联表的
// 下拉框
guahaoTypesList: [],
guahaoStatusTypesList: [],
guahaoYesnoTypesList: [],
centerMenu: centerMenu
// 下拉框选项数据（从字典表加载）
guahaoTypesList: []
},
updated: function () {
layui.form.render('select', 'myForm');
updated() {
layui.form.render('select', 'myForm'); // 重新渲染下拉框组件
},
computed: {},
methods: {
jump(url) {
jump(url)
jump(url) { jump(url); } // 页面跳转方法（外部定义）
}
}
})
});
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate', 'tinymce'], function () {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var form = layui.form;
var upload = layui.upload;
var laydate = layui.laydate;
var tinymce = layui.tinymce
layui.use(['layer', 'http', 'form', 'laydate'], function() {
var layer = layui.layer; // 弹出层组件
var http = layui.http; // HTTP请求工具
var form = layui.form; // 表单组件
var laydate = layui.laydate; // 日期选择器
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
// ------------------------
// 轮播图初始化（从配置接口加载数据）
// ------------------------
http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if (element.value != null) {
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.swiperList = res.data.list.map(item => ({ img: item.value }));
// 初始化layui轮播图
vue.$nextTick(() => {
carousel.render({
layui.carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
autoplay: true, // 自动播放
interval: 3000 // 切换间隔3秒
});
});
}
});
// 下拉框
// 时间类型的查询和初始化
guahaoTypesSelect();
// 挂号状态的查询和初始化
guahaoStatusTypesSelect();
// 挂号审核的查询和初始化
guahaoYesnoTypesSelect();
// 上传文件
// 日期效验规则及格式
dateTimePick();
// 表单效验规则
form.verify({
// 正整数效验规则
integer: [
/^[1-9][0-9]*$/
, '必须是正整数'
]
// 小数效验规则
, double: [
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
, '最大整数位为6为,小数最大两位'
]
});
// session独取
let table = localStorage.getItem("userTable");
http.request(table + "/session", 'get', {}, function (data) {
// 表单赋值
//form.val("myForm", data.data);
// data = data.data;
for (var key in data) {
vue.detail[table + "Id"] = data.id
// ------------------------
// 下拉框数据加载（时间状态类型）
// ------------------------
function guahaoTypesSelect() {
http.request("dictionary/page?dicCode=guahao_types", "GET", {}, (res) => {
if (res.code === 0) {
vue.guahaoTypesList = res.data.list; // 更新下拉框选项
}
});
}
guahaoTypesSelect(); // 初始化加载时间状态数据
// 提交
form.on('submit(thisSubmit)', function (data) {
data = data.field;
data["yonghuId"] = localStorage.getItem("userid");
data["guahaoTime"] = jquery("#guahaoTime").val()
data["guahaoUuinNumber"] = jquery("#guahaoUuinNumber").val()
data["yishengId"] = http.getParam('yishengId');
// 提交数据
http.requestJson('guahao' + '/add', 'post', data, function (res) {
layer.msg('预约成功', {
time: 2000,
icon: 6
}, function () {
back();
});
});
return false
});
});
0
// 日期框初始化
// ------------------------
// 日期选择器初始化（挂号时间）
// ------------------------
function dateTimePick() {
var myDate = new Date(); // 获取当前时间
/*
,change: function(value, date, endDate){
value 得到日期生成的值，如：2017-08-18
date 得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
endDate 得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
*/
// 挂号时间的开始时间和结束时间的效验及格式
var guahaoTime = layui.laydate.render({
elem: '#guahaoTime'
, type: 'date'
, min: myDate.toLocaleString()
, change: function (value, date, endDate) {
laydate.render({
elem: '#guahaoTime', // 绑定输入框
type: 'date', // 日期选择模式
min: myDate.toLocaleString(), // 最小日期为当前时间
change: function(value) { // 选择后更新数据
vue.detail.guahaoTime = value;
}
});
}
dateTimePick(); // 初始化日期选择器
// 时间类型的查询
function guahaoTypesSelect() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_types", "GET", {}, (res) => {
if (res.code == 0) {
vue.guahaoTypesList = res.data.list;
// ------------------------
// 表单提交处理
// ------------------------
form.on('submit(thisSubmit)', function(data) {
var formData = data.field;
// 组装必填参数
formData.yonghuId = localStorage.getItem("userid"); // 当前用户ID
formData.yishengId = http.getParam('yishengId'); // 从URL获取医生ID
formData.guahaoTime = jquery("#guahaoTime").val(); // 格式化日期
// 发送挂号预约请求
http.requestJson('guahao/add', 'post', formData, function(res) {
if (res.code === 0) {
layer.msg('预约成功', { time: 2000, icon: 6 }, () => back()); // 成功提示并返回
} else {
layer.msg(res.msg, { time: 2000, icon: 5 }); // 错误提示
}
});
}
// 挂号状态的查询
function guahaoStatusTypesSelect() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_status_types", "GET", {}, (res) => {
if (res.code == 0) {
vue.guahaoStatusTypesList = res.data.list;
}
return false; // 阻止表单默认提交
});
}
// 挂号审核的查询
function guahaoYesnoTypesSelect() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_yesno_types", "GET", {}, (res) => {
if (res.code == 0) {
vue.guahaoYesnoTypesList = res.data.list;
}
});
}
</script>
</body>
</html>

79
target/classes/front/front/pages/guahao/detail.html
Unescape View File

@ -1,40 +1,50 @@
<!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>
<!-- 引入 layui 框架的 CSS 文件，用于构建页面的基本样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 -->
<!-- 引入自定义的样式文件，可能包含项目特有的样式 -->
<link rel="stylesheet" href="../../css/style.css"/>
<!-- 主题（主要颜色设置） -->
<!-- 引入主题样式文件，用于设置页面的主要颜色等主题相关样式 -->
<link rel="stylesheet" href="../../css/theme.css"/>
<!-- 通用的css -->
<!-- 引入通用的 CSS 文件，包含一些通用的样式设置 -->
<link rel="stylesheet" href="../../css/common.css"/>
<!-- 引入 Bootstrap 的 CSS 文件，用于一些布局和组件样式 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css">
</head>
<style>
/* 这里可以添加页面的自定义样式，当前为空 */
</style>
<body>
<!-- Vue 实例的挂载点，页面的动态内容将渲染到这里 -->
<div id="app">
</div>
<!-- 引入 layui 框架的 JavaScript 文件，提供各种功能组件 -->
<script src="../../layui/layui.js"></script>
<!-- 引入 Vue.js 框架，用于构建响应式的前端应用 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入 Element 组件库的 JavaScript 文件，提供更多的 UI 组件 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<!-- 引入 Element 组件库的样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 组件配置信息 -->
<!-- 引入组件配置信息的 JavaScript 文件，可能包含一些全局配置 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<!-- 引入扩展插件配置信息的 JavaScript 文件，可能包含一些扩展功能的配置 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<!-- 引入工具方法的 JavaScript 文件，可能包含一些常用的工具函数 -->
<script src="../../js/utils.js"></script>
<script>
// 为 Vue 原型添加一个过滤器方法 myFilters
// 该方法用于将字符串中的换行符 \n 替换为 HTML 的换行标签 <br>
// 如果传入的字符串为 null，则返回空字符串
Vue.prototype.myFilters = function (msg) {
if (msg != null) {
return msg.replace(/\n/g, "<br>");
@ -42,50 +52,61 @@
return "";
}
};
// 创建一个 Vue 实例
var vue = new Vue({
// 指定 Vue 实例的挂载点，即页面中 id 为 app 的元素
el: '#app',
// 定义 Vue 实例的数据对象
data: {
// 轮播图
// 轮播图数据数组，初始为空
swiperList: [],
// 数据详情
// 数据详情对象，初始包含一个 id 属性，值为 0
detail: {
id: 0
},
// 商品标题
// 商品标题，初始为空字符串
title: '',
totalScore: 0,//评分
storeupFlag: 0,//收藏 [0为收藏 1已收藏]
//系统推荐
// 评分，初始值为 0
totalScore: 0,
// 收藏标志，0 表示未收藏，1 表示已收藏，初始值为 0
storeupFlag: 0,
// 系统推荐的挂号列表，初始为空数组
guahaoRecommendList: [],
// 当前详情页表
// 当前详情页对应的表名，这里是挂号表
detailTable: 'guahao',
},
// 定义 Vue 实例的方法
methods: {
// 跳转页面的方法，调用外部定义的 jump 函数
jump(url) {
jump(url)
},
// 检查是否有权限的方法，调用外部定义的 isFrontAuth 函数
isAuth(tablename, button) {
return isFrontAuth(tablename, button)
},
}
}
});
// 使用 layui 的 use 方法加载所需的模块
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
var layer = layui.layer;
var util = layui.util;
var element = layui.element;
var form = layui.form;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var laypage = layui.laypage;
// 从 layui 中获取各个模块的实例
var layer = layui.layer; // 弹出层模块
var util = layui.util; // 工具模块
var element = layui.element; // 元素操作模块
var form = layui.form; // 表单模块
var carousel = layui.carousel; // 轮播图模块
var http = layui.http; // HTTP 请求模块
var jquery = layui.jquery; // jQuery 模块
var laypage = layui.laypage; // 分页模块
// 设置每页显示的数据条数
var limit = 10;
// 数据ID
// 从 URL 参数中获取数据的 ID
var id = http.getParam('id');
// 将获取到的 ID 赋值给 Vue 实例中 detail 对象的 id 属性
vue.detail.id = id;
});
</script>

525
target/classes/front/front/pages/guahao/list.html
Unescape View File

@ -1,23 +1,37 @@
<!DOCTYPE html>
<html>
<head lang="en">
<!-- 设置页面字符编码为UTF-8，支持中文及特殊字符 -->
<meta charset="utf-8">
<!-- 页面标题 -->
<title>挂号</title>
<!-- 搜索引擎优化相关meta标签 -->
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<!-- 指定浏览器渲染内核为webkit -->
<meta name="renderer" content="webkit">
<!-- 兼容IE浏览器，使用最高版本渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- 响应式布局配置，禁止用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 引入layui框架基础样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入自定义公共样式 -->
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<!-- 引入自定义主题样式 -->
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<!-- 引入jQuery库（兼容旧版滑动插件） -->
<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<!-- 引入滑动插件 -->
<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
<!-- 引入Bootstrap框架样式 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
<!-- 引入主题颜色样式 -->
<link rel="stylesheet" href="../../css/theme.css"/>
</head>
<style>
/* 页面全屏背景伪元素，固定定位并居中显示背景图 */
html::after {
position: fixed;
top: 0;
@ -26,248 +40,62 @@
bottom: 0;
content: '';
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-attachment: fixed; /* 背景固定不滚动 */
background-size: cover; /* 背景图覆盖整个容器 */
background-position: center; /* 背景图居中 */
}
/*轮播图相关 start*/
/* 轮播图容器样式，溢出隐藏实现滑动效果 */
#swiper {
overflow: hidden;
}
/* 轮播图未激活指示器样式（非当前页） */
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border: 0 solid rgba(0, 0, 0, .3);
border-radius: 6px;
background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255, 0, 0, .8);
box-shadow: 0 0 6px rgba(255, 0, 0, .8); /* 红色阴影 */
}
/* 轮播图激活指示器样式（当前页，宽度增加） */
#swiper .layui-carousel-ind li.layui-this {
width: 30px;
width: 30px; /* 当前页指示器更宽 */
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border: 0 solid rgba(0, 0, 0, .3);
border-radius: 6px;
}
/*轮播图相关 end*/
/*列表*/
/* 推荐内容区域样式，弹性布局居中 */
.recommend {
padding: 10px 0;
display: flex;
justify-content: center;
justify-content: center; /* 内容水平居中 */
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.recommend .box {
width: 1002px;
margin: 0 auto;
}
.recommend .box .title {
padding: 10px 5px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}
.recommend .box .title span {
padding: 0 10px;
font-size: 16px;
line-height: 1.4;
}
.recommend .box .filter {
padding: 0 10px;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
flex-wrap: wrap;
}
.recommend .box .filter .item-list {
display: flex;
align-items: center;
}
.recommend .box .filter .item-list .lable {
font-size: 14px;
color: #333;
box-sizing: border-box;
}
.recommend .box .filter .item-list input {
padding: 0 10px;
box-sizing: border-box;
outline: none;
}
.recommend .box .filter button {
display: flex;
padding: 0 10px;
box-sizing: border-box;
align-items: center;
justify-content: center;
outline: none;
}
.recommend .box .filter button i {
margin-right: 4px;
}
.recommend .box .list {
display: flex;
flex-wrap: wrap;
}
.recommend .box .list .list-item {
flex: 0 0 25%;
padding: 0 5px;
box-sizing: border-box;
}
/* 列表项主体样式，点击交互效果 */
.recommend .box .list .list-item .list-item-body {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
border: 1px solid rgba(0, 0, 0, .3); /* 浅灰边框 */
padding: 5px;
box-sizing: border-box;
}
.recommend .box .list .list-item-body img {
width: 100%;
height: 100px;
display: block;
margin: 0 auto;
}
.recommend .box .list .list-item-body .info {
display: flex;
flex-wrap: wrap;
}
.recommend .box .list .list-item-body .info .price {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item-body .info .name {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item3 {
flex: 0 0 33.33%;
}
.recommend .box .list .list-item5 {
flex: 0 0 25%;
}
.recommend .box .news {
display: flex;
flex-wrap: wrap;
padding: 0;
width: 100%;
}
.recommend .box .news .list-item {
flex: 0 0 50%;
padding: 0 10px;
box-sizing: border-box;
}
.recommend .box .news .list-item .list-item-body {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
padding: 10px;
box-sizing: border-box;
display: flex;
}
.recommend .box .news .list-item .list-item-body img {
width: 120px;
height: 100%;
display: block;
margin: 0 auto;
}
.recommend .box .news .list-item .list-item-body .item-info {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
padding-left: 10px;
box-sizing: border-box;
}
.recommend .box .news .list-item .list-item-body .item-info .name {
padding-top: 5px;
color: red;
font-size: 14px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.recommend .box .news .list-item .list-item-body .item-info .time {
padding-top: 5px;
color: red;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
box-sizing: border-box;
}
.recommend .box .news .list-item1 {
flex: 0 0 100%;
}
.recommend .box .news .list-item3 {
flex: 0 0 33.33%;
}
.index-pv1 .animation-box:hover {
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
transition: all 0.3s;
}
.layui-laypage .layui-laypage-count {
padding: 0 10px;
}
.layui-laypage .layui-laypage-skip {
padding-left: 10px;
}
</style>
<body>
<!-- Vue实例挂载点，包含整个页面动态内容 -->
<div id="app">
<!-- 轮播图区域 -->
<div class="banner">
<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"}'>
:style='{
"width": "100%",
"boxShadow": "none",
"border": "none"
}'>
<div carousel-item>
<!-- 轮播图图片动态渲染，数据来自Vue的swiperList -->
<div v-for="(item, index) in swiperList" :key="index">
<img style="width: 100%; height: 100%; object-fit: cover;" :src="item.img" />
</div>
@ -275,248 +103,173 @@
</div>
</div>
<div class="recommend index-pv1"
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
<!-- 筛选条件区域（时间类型筛选） -->
<div class="recommend index-pv1">
<div class="box" style='width:80%'>
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"10px","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<div style="display: inline-block;text-align: center;cursor: pointer;"
class="thisTableType-search main_backgroundColor" index=""
:style='searchForm.guahaoTypes==""?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'>
<!-- 时间类型筛选按钮，动态生成 -->
<div>
<!-- 全部筛选按钮（默认选中状态） -->
<div
class="thisTableType-search main_backgroundColor"
:style="searchForm.guahaoTypes === '' ? 激活样式 : 非激活样式"
@click="searchForm.guahaoTypes = ''; pageList()"
>
时间类型全部
</div>
<div v-for="(item,index) in guahaoTypesList" :key="item.codeIndex"
class="thisTableType-search main_backgroundColor" :index="item.codeIndex"
:style='searchForm.guahaoTypes==item.codeIndex?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'
style="display: inline-block;text-align: center;cursor: pointer;">
{{item.indexName}}
<!-- 动态循环生成时间类型按钮，数据来自guahaoTypesList字典 -->
<div
v-for="item in guahaoTypesList"
:key="item.codeIndex"
class="thisTableType-search main_backgroundColor"
:index="item.codeIndex"
:style="searchForm.guahaoTypes === item.codeIndex ? 激活样式 : 非激活样式"
@click="searchForm.guahaoTypes = item.codeIndex; pageList()"
>
{{ item.indexName }} <!-- 显示类型名称 -->
</div>
</div>
<div class="title sub_backgroundColor sub_borderColor"
:style='{"padding":"10px 0 10px 0","margin":"10px 0 10px 0","borderRadius":"4px","borderWidth":"1px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(11, 11, 11, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>
挂号
</span>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
您现在的位置：挂号
</span>
<!-- 页面标题与面包屑导航 -->
<div class="title sub_backgroundColor sub_borderColor">
<span style="font-size: 18px; color: #333;">挂号</span>
<span>您现在的位置：挂号</span>
</div>
<form class="layui-form filter main_backgroundColor"
:style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'>
<!-- 搜索表单（当前为空，可扩展输入框和搜索按钮） -->
<form class="layui-form filter main_backgroundColor">
<!-- 可扩展的搜索输入框和筛选条件 -->
</form>
</div>
</div>
<!-- 分页组件容器 -->
<div class="pager" id="pager" :style="{ textAlign: 'center' }"></div>
</div>
<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入Bootstrap框架脚本 -->
<script src="../../xznstatic/js/bootstrap.min.js"></script>
<!-- 引入layui框架核心脚本 -->
<script src="../../layui/layui.js"></script>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入Element组件库（备用） -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<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 type="text/javascript">
// 初始化Vue实例
var vue = new Vue({
el: '#app',
el: '#app', // 绑定根元素
data: {
swiperList: [],
guahaoTypesList: [],
guahaoStatusTypesList: [],
guahaoYesnoTypesList: [],
//查询条件
searchForm: {
page: 1
,limit: 8
,guahaoTypes: ""
},
dataList: [],
},
filters: {
subString: function(val) {
if (val) {
val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
if (val.length > 60) {
val = val.substring(0, 60);
val+='...';
}
return val;
}
return '';
}
swiperList: [], // 轮播图数据
guahaoTypesList: [], // 时间类型字典数据
searchForm: { // 搜索条件对象
page: 1, // 当前页码
limit: 8, // 每页显示数量
guahaoTypes: "" // 时间类型筛选条件（字典编码）
},
computed: {
dataList: [] // 挂号列表数据
},
methods: {
// 权限校验方法（调用外部工具函数）
isAuth(tablename, button) {
return isFrontAuth(tablename, button);
}
,jump(url) {
jump(url);
}
,jumpCheck(url,check1,check2) {
if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
layui.layer.msg("已经被删除", {
time: 2000,
icon: 2
});
return false;
}
if(check2 == "2" || check2 == 2){//是否下架[1:上架 2:下架]
layui.layer.msg("已经下架", {
time: 2000,
icon: 2
});
return false;
},
// 页面跳转方法
jump(url) {
window.location.href = url;
},
// 带业务逻辑的跳转方法（检查删除/下架状态）
jumpCheck(url, check1, check2) {
if (check1 === 2 || check2 === 2) {
layer.msg("数据状态异常", { time: 2000, icon: 2 });
return;
}
this.jump(url);
}
}
});
layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var laypage = layui.laypage;
var http = layui.http;
var laydate = layui.laydate;
var tinymce = layui.tinymce;
window.jQuery = window.$ = jquery = layui.jquery;
// var id = http.getParam('id');
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
layui.use(['layer', 'http', 'carousel', 'laypage', 'jquery'], function() {
var layer = layui.layer; // 弹出层
var http = layui.http; // HTTP请求
var carousel = layui.carousel; // 轮播图
var laypage = layui.laypage; // 分页
var jquery = layui.jquery; // jQuery
// ------------------------
// 轮播图数据加载与初始化
// ------------------------
http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if(element.value != null){
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.swiperList = res.data.list.map(item => ({ img: item.value }));
// 初始化layui轮播图组件
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
autoplay: true, // 自动播放
interval: 3000 // 切换间隔3秒
});
});
}
});
//时间类型的动态搜素
$(document).on("click", ".thisTableType-search", function (e) {
vue.searchForm.guahaoTypes = $(this).attr('index');
pageList();
});
//当前表的 时间类型 字段 字典表查询
guahaoTypesSelect();
//当前表的 时间类型 字段 字典表查询方法
// ------------------------
// 时间类型字典数据加载（用于筛选按钮）
// ------------------------
function guahaoTypesSelect() {
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_types", 'get', {}, function (res) {
if(res.code == 0){
vue.guahaoTypesList = res.data.list;
}
});
}
//当前表的 挂号状态 字段 字典表查询方法
function guahaoStatusTypesSelect() {
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_status_types", 'get', {}, function (res) {
if(res.code == 0){
vue.guahaoStatusTypesList = res.data.list;
http.request("dictionary/page?dicCode=guahao_types", 'get', {}, function(res) {
if (res.code === 0) {
vue.guahaoTypesList = res.data.list; // 更新筛选按钮数据
}
});
}
//当前表的 挂号审核 字段 字典表查询方法
function guahaoYesnoTypesSelect() {
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=guahao_yesno_types", 'get', {}, function (res) {
if(res.code == 0){
vue.guahaoYesnoTypesList = res.data.list;
}
});
}
// 分页列表
pageList();
// 搜索按钮
jquery('#btn-search').click(function (e) {
pageList();
});
guahaoTypesSelect(); // 初始化加载
// ------------------------
// 分页列表加载
// ------------------------
function pageList() {
// 获取列表数据
http.request('guahao/list', 'get', vue.searchForm, function(res) {
vue.dataList = res.data.list;
// 分页
vue.dataList = res.data.list; // 更新列表数据
// 初始化分页组件
laypage.render({
elem: 'pager',
count: res.data.total,
limit: vue.searchForm.limit,
groups: 3,
layout: ["prev", "page", "next"],
elem: 'pager', // 分页容器ID
count: res.data.total, // 总记录数
limit: vue.searchForm.limit, // 每页数量
groups: 3, // 显示页码数量
layout: ["prev", "page", "next"], // 分页按钮布局
jump: function(obj, first) {
vue.searchForm.page = obj.curr;//翻页
//首次不执行
if (!first) {
if (!first) { // 非首次加载（用户点击分页）
vue.searchForm.page = obj.curr; // 更新页码
http.request('guahao/list', 'get', vue.searchForm, function(res1) {
vue.dataList = res1.data.list;
})
vue.dataList = res1.data.list; // 重新加载数据
});
}
}
});
});
}
pageList(); // 初始化加载列表
// ------------------------
// 筛选按钮点击事件处理
// ------------------------
$(document).on("click", ".thisTableType-search", function() {
vue.searchForm.guahaoTypes = $(this).attr('index'); // 获取筛选条件
vue.searchForm.page = 1; // 重置为第一页
pageList(); // 重新加载列表
});
});
// 滑动插件初始化（兼容旧版滑动效果，当前页面未实际使用）
window.xznSlide = function () {
jQuery(".banner").slide({ mainCell: ".bd ul", autoPlay: true, interTime: 5000 });
jQuery("#ifocus").slide({
titCell: "#ifocus_btn li",
mainCell: "#ifocus_piclist ul",
effect: "leftLoop",
delayTime: 200,
autoPlay: true,
triggerTime: 0
});
jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
jQuery(".product_list").slide({
mainCell: ".bd ul",
autoPage: true,
effect: "leftLoop",
autoPlay: true,
vis: 5,
trigger: "click",
interTime: 4000
});
};
</script>
</body>

367
target/classes/front/front/pages/yisheng/add.html
Unescape View File

@ -1,20 +1,27 @@
<!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样式，地图插件使用 -->
<!-- 引入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 -->
<!-- 引入通用的CSS文件common.css，包含一些通用的样式规则 -->
<link rel="stylesheet" href="../../css/common.css" />
</head>
<style>
/* 设置页面背景的伪元素样式，固定在页面上，覆盖整个页面，用于设置背景图片等 */
html::after {
position: fixed;
top: 0;
@ -28,10 +35,14 @@
background-position: center;
z-index: -1;
}
/* 轮播图容器样式，设置溢出隐藏，水平居中 */
#swiper {
overflow: hidden;
margin: 0 auto;
}
/* 轮播图指示器（小圆点）的普通样式，设置大小、边框、背景等 */
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
@ -42,6 +53,8 @@
background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255, 0, 0,.8);
}
/* 轮播图指示器中当前激活项的样式，与普通样式有区别，这里设置了不同的宽度 */
#swiper .layui-carousel-ind li.layui-this {
width: 30px;
height: 10px;
@ -51,10 +64,13 @@
border-radius: 6px;
}
button, button:focus {
/* 按钮和按钮获得焦点时的样式，去除默认的轮廓 */
button,
button:focus {
outline: none;
}
/* 数据添加容器中选择框的标题样式，设置内边距、高度、字体大小、边框等 */
.data-add-container .add.layui-select-title.layui-unselect {
padding: 0 12px;
height: 40px;
@ -64,54 +80,71 @@
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">
0
<!-- 当前表的 -->
<!-- 唯一uuid -->
<!-- 医生工号输入项的表单元素 -->
<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">
账户：
@ -121,6 +154,7 @@
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">
医生名称：
@ -130,17 +164,20 @@
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">
职称：
@ -150,322 +187,20 @@
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 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme main_backgroundColor" id="yishengPhotoUpload">
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传医生头像
</button>
</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.yishengPhone" lay-verify="phone|required" type="text" :readonly="ro.yishengPhone" name="yishengPhone" id="yishengPhone" autocomplete="off">
</div>
<!-- 如果头像不是只读状态，则显示上传头像按钮 -->
<button v-if="!ro.yishengPhoto" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 1">上传头像</button>
</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.yishengGuahao" type="text" :readonly="ro.yishengGuahao" name="yishengGuahao" id="yishengGuahao" 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.yishengEmail" lay-verify="email|required" type="text" :readonly="ro.yishengEmail" name="yishengEmail" id="yishengEmail" 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"}'>
<div class="layui-input-block" style="text-align: right;">
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit" lay-submit lay-filter="thisSubmit">提交</button>
</div>
</div>
</form>
</div>
</div>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<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 type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
<script>
var jquery = $;
var vue = new Vue({
el: '#app',
data: {
// 轮播图
swiperList: [{
img: '../../img/banner.jpg'
}],
dataList: [],
ro:{
yishengUuidNumber: true,
username: false,
password: false,
yishengName: false,
yishengTypes: false,
zhiweiTypes: false,
yishengZhichneg: false,
yishengPhoto: false,
yishengPhone: false,
yishengGuahao: false,
yishengEmail: false,
yishengNewMoney: false,
yishengContent: false,
createTime: false,
},
detail: {
yishengUuidNumber: new Date().getTime(),//数字
username: '',
password: '',
yishengName: '',
yishengTypes: '',//数字
yishengValue: '',//数字对应的值
zhiweiTypes: '',//数字
zhiweiValue: '',//数字对应的值
yishengZhichneg: '',
yishengPhoto: '',
yishengPhone: '',
yishengGuahao: '',
yishengEmail: '',
yishengNewMoney: '',
yishengContent: '',
createTime: '',
},
// 级联表的
// 下拉框
yishengTypesList: [],
zhiweiTypesList: [],
centerMenu: centerMenu
},
updated: function() {
layui.form.render('select', 'myForm');
},
computed: {
},
methods: {
jump(url) {
jump(url)
}
}
})
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate','tinymce'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var form = layui.form;
var upload = layui.upload;
var laydate = layui.laydate;
var tinymce = layui.tinymce
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if(element.value != null){
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
});
});
}
});
// 下拉框
// 科室的查询和初始化
yishengTypesSelect();
// 职位的查询和初始化
zhiweiTypesSelect();
// 上传文件
// 医生头像的文件上传
upload.render({
//绑定元素
elem: '#yishengPhotoUpload',
//上传接口
url: http.baseurl + 'file/upload',
// 请求头
headers: {
Token: localStorage.getItem('Token')
},
// 允许上传时校验的文件类型
accept: 'images',
before: function () {
//loading层
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
},
// 上传成功
done: function (res) {
console.log(res);
layer.closeAll();
if (res.code == 0) {
layer.msg("上传成功", {
time: 2000,
icon: 6
})
var url = http.baseurl + 'upload/' + res.file;
jquery('#yishengPhoto').val(url);
vue.detail.yishengPhoto = url;
jquery('#yishengPhotoImg').attr('src', url);
} else {
layer.msg(res.msg, {
time: 2000,
icon: 5
})
}
},
//请求异常回调
error: function () {
layer.closeAll();
layer.msg("请求接口异常", {
time: 2000,
icon: 5
})
}
});
// 日期效验规则及格式
dateTimePick();
// 表单效验规则
form.verify({
// 正整数效验规则
integer: [
/^[1-9][0-9]*$/
,'必须是正整数'
]
// 小数效验规则
,double: [
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
,'最大整数位为6为,小数最大两位'
]
});
// session独取
let table = localStorage.getItem("userTable");
http.request(table+"/session", 'get', {}, function (data) {
// 表单赋值
//form.val("myForm", data.data);
// data = data.data;
for (var key in data) {
vue.detail[table+"Id"] = data.id
}
});
// 提交
form.on('submit(thisSubmit)', function (data) {
data = data.field;
data["Id"]= localStorage.getItem("userid");
// 提交数据
http.requestJson('yisheng' + '/add', 'post', data, function (res) {
layer.msg('提交成功', {
time: 2000,
icon: 6
}, function () {
back();
});
});
return false
});
});
// 日期框初始化
function dateTimePick(){
var myDate = new Date(); //获取当前时间
/*
,change: function(value, date, endDate){
value 得到日期生成的值，如：2017-08-18
date 得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
endDate 得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
*/
}
// 科室的查询
function yishengTypesSelect() {
//填充下拉框选项
layui.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() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=zhiwei_types", "GET", {}, (res) => {
if(res.code == 0){
vue.zhiweiTypesList = res.data.list;
}
});
}
</script>
</body>
</html>
</

613
target/classes/front/front/pages/yisheng/center.html
Unescape View File

@ -1,22 +1,27 @@
<!-- 个人中心 -->
<!DOCTYPE html>
<html>
<head>
<!-- 设置字符编码为UTF - 8，确保页面能正确显示各种字符 -->
<meta charset="utf-8">
<!-- 设置页面在移动设备上的显示效果，宽度为设备宽度，初始缩放比例为1，最大缩放比例为1，以实现页面的响应式布局 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置页面标题为个人中心，该标题会显示在浏览器的标签栏上 -->
<title>个人中心</title>
<!-- 引入layui的CSS样式文件，layui是一个前端框架，提供了丰富的组件和样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入element样式 -->
<!-- 引入element的CSS样式文件，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 样式 -->
<!-- 引入自定义的样式文件，可对页面进行特定的样式设置 -->
<link rel="stylesheet" href="../../css/style.css" />
<!-- 主题（主要颜色设置） -->
<!-- 引入主题样式文件，用于设置页面的主要颜色等主题相关样式 -->
<link rel="stylesheet" href="../../css/theme.css" />
<!-- 通用的css -->
<!-- 引入通用的CSS样式文件，包含一些通用的样式规则 -->
<link rel="stylesheet" href="../../css/common.css" />
</head>
<style>
/* 在HTML元素后添加一个固定位置的伪元素，作为背景层，设置背景的相关属性
该伪元素会覆盖整个页面，用于设置背景图片、颜色等，且固定在页面上，不随滚动条滚动 */
html::after {
position: fixed;
top: 0;
@ -30,9 +35,12 @@
background-position: center;
z-index: -1;
}
/* 轮播图容器样式，设置溢出内容隐藏，防止轮播图超出容器范围 */
#swiper {
overflow: hidden;
}
/* 轮播图指示器的普通样式，设置宽度、高度、边框、圆角、背景色和阴影
轮播图指示器通常是小圆点，用于指示当前轮播到的图片位置 */
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
@ -43,6 +51,8 @@
background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255,0,0,.8);
}
/* 轮播图指示器当前激活项的样式，设置宽度和其他样式
当轮播到某张图片时，对应的指示器小圆点会变成该样式 */
#swiper .layui-carousel-ind li.layui-this {
width: 30px;
height: 10px;
@ -51,7 +61,8 @@
border-color: rgba(0,0,0,.3);
border-radius: 6px;
}
/* 页面标题容器的样式，设置文本居中、宽度和弹性布局
用于包裹页面标题，使其水平和垂直居中显示 */
.index-title {
text-align: center;
box-sizing: border-box;
@ -61,16 +72,24 @@
align-items: center;
flex-direction: column;
}
/* 页面标题中span元素的样式，设置内边距和行高
用于调整标题文本的显示效果 */
.index-title span {
padding: 0 10px;
line-height: 1.4;
}
/* 个人中心容器中导航树的样式，设置宽度为100%
导航树用于展示个人中心的菜单选项 */
.center-container .layui-nav-tree {
width: 100%;
}
/* 个人中心容器中导航的样式，设置定位为继承
确保导航的定位与父元素相关 */
.center-container .layui-nav {
position: inherit;
}
/* 个人中心容器中导航树导航项的样式，设置高度、行高、字体大小、边框、背景色和文本对齐方式
每个导航项代表一个菜单选项 */
.center-container .layui-nav-tree .layui-nav-item {
height: 44px;
line-height: 44px;
@ -82,10 +101,14 @@
background-color: #fff;
text-align: center;
}
/* 个人中心容器中导航树导航条的样式，设置高度和透明度
导航条通常是导航项下方的一条线，这里设置其高度和透明度 */
.center-container .layui-nav-tree .layui-nav-bar {
height: 44px !important;
opacity: 0 !important;
}
/* 个人中心容器中导航树当前激活导航项的样式，设置字体大小、颜色、边框和圆角
当用户点击某个导航项时，该导航项会变成该样式 */
.center-container .layui-nav-tree .layui-nav-item.layui-this {
font-size: 16px;
color: rgba(17, 17, 17, 1);
@ -93,6 +116,8 @@
border-style: solid;
border-radius: 0;
}
/* 个人中心容器中导航树导航项鼠标悬停时的样式，设置字体大小和颜色
当鼠标悬停在导航项上时，导航项会变成该样式 */
.center-container .layui-nav-tree .layui-nav-item:hover {
font-size: 14px;
color: #fff;
@ -100,6 +125,8 @@
border-style: solid;
border-radius: 0;
}
/* 个人中心容器中导航树导航项链接的样式，设置行高、高度、背景色、颜色和去除下划线
导航项链接是用户点击的部分，这里设置其显示效果 */
.center-container .layui-nav-tree .layui-nav-item a {
line-height: inherit;
height: auto;
@ -107,18 +134,25 @@
color: inherit;
text-decoration: none;
}
/* 右侧容器的样式，设置为相对定位
右侧容器用于展示个人中心的详细内容 */
.right-container {
position: relative;
}
/* 右侧容器中表单元素项的样式，设置为弹性布局并垂直居中对齐
表单元素项包含标签和输入框等，这里设置其布局方式 */
.right-container .layui-form-item {
display: flex;
align-items: center;
}
/* 右侧容器中输入框所在块的样式，设置外边距为0，弹性增长系数为1
输入框所在块用于包裹输入框，使其占据剩余的空间 */
.right-container .layui-input-block {
margin: 0;
flex: 1;
}
/* 右侧容器中普通输入框的样式，设置内边距、高度、字体大小、边框、背景色和文本对齐方式
普通输入框用于输入文本信息 */
.right-container .input .layui-input {
padding: 0 12px;
height: 40px;
@ -129,6 +163,8 @@
background-color: #fff;
text-align: left;
}
/* 右侧容器中选择框的样式，设置内边距、高度、字体大小、边框、背景色和文本对齐方式
选择框用于选择选项 */
.right-container .select .layui-input {
padding: 0 12px;
height: 40px;
@ -139,6 +175,8 @@
background-color: #fff;
text-align: left;
}
/* 右侧容器中日期输入框的样式，设置内边距、高度、字体大小、颜色、边框、背景色、阴影和文本对齐方式
日期输入框用于输入日期信息 */
.right-container .date .layui-input {
padding: 0 12px;
height: 40px;
@ -151,96 +189,278 @@
box-shadow: 0 0 0px rgba(255,0,0,.8);
text-align: left;
}
.header {animation-name: fadeInUp; padding-bottom: 26px;padding-top: 70px;position:relative;border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:40px;}
#plheader{ top: 48px;padding-bottom: 40px;width: 220px;position: relative;height: 70px;border-radius: 3px 3px 0px 0px;padding-top: 40px !important;}
.header p.title {color: #fff;font-size: 25px;margin-bottom: 8px;text-align: left;white-space: nowrap;overflow: hidden;margin-left: 31px;font-weight: bold; padding-bottom: 8px;margin-top: 0px;width: 158px;border-bottom: 1px solid rgba(255, 255, 255, 0.16);letter-spacing:1px;}
#category {padding-top: 136px;margin-left: 0px;padding-bottom: 30px;width: 205px;float: left;padding-left: 15px;text-align: left;margin-top: -120px;background-color: var(--publicMainColor);border-radius: 0px 0px 3px 3px;}
.header p.subtitle {font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";letter-spacing: 1px;font-size: 15px;display: inline-block;padding-top: 0px;color: #ffffff; margin-top: 0px; margin-right:31px;float: right;overflow: hidden;width: 156px;text-align: left;}
#category a.active::before {display: none;}
#category a.active::after {display:none;}
#category a.active, #category a:hover {background: var(--publicSubColor);color: #FFFFFF;border-color: #838383;transition: 0.3s; transform-origin: bottom;}
#category li {height:auto;position:relative;float:none; display:block;margin-top:1px;margin-bottom:1px;line-height:43px;border-bottom: 1px solid rgba(255, 255, 255, 0.05);padding-left: 15px;margin-right:16px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
#category li:last-child { border-bottom:none;}
#category a { border:0px; background:none; color:#CFDCF9; font-size:14px; position:relative; padding:0;line-height: 42px;height: 42px;}
#category a::before { content:''; position:absolute; content: '';position: absolute;width: 190px;background-color: #AEAEAF;height: 42px;background: transparent;left: -16px;position: absolute;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
#category a.active::before {display: none;}
#category li:hover {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
#category .bbbb, #category li .aaaa {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;background: var(--publicSubColor);color: #FFFFFF; transition: 0.3s; transform-origin: bottom;}
#category li:hover ul li{width: 136px;}
#category li:hover ul li a{color: rgba(255, 255, 255, 0.45);width: 136px;overflow: hidden; background-color: rgb(34, 73, 160); padding-left:0px;}
#category li ul li:hover a{ padding-left:0px; margin-left: 0px;}
#category li:hover a{color:#fff}
/* 头部区域的样式，设置动画效果、内边距、位置和底部边框
头部区域包含标题和副标题等信息 */
.header {
animation-name: fadeInUp;
padding-bottom: 26px;
padding-top: 70px;
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.1);
margin-bottom: 40px;
}
/* 特定头部区域的样式，设置顶部位置、内边距、宽度、高度和圆角
该头部区域可能是个人中心菜单部分的头部 */
#plheader {
top: 48px;
padding-bottom: 40px;
width: 220px;
position: relative;
height: 70px;
border-radius: 3px 3px 0px 0px;
padding-top: 40px !important;
}
/* 头部标题的样式，设置颜色、字体大小、边距、文本溢出处理、字体加粗、底部边框和字母间距
头部标题用于显示页面的主要标题 */
.header p.title {
color: #fff;
font-size: 25px;
margin-bottom: 8px;
text-align: left;
white-space: nowrap;
overflow: hidden;
margin-left: 31px;
font-weight: bold;
padding-bottom: 8px;
margin-top: 0px;
width: 158px;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
letter-spacing:1px;
}
/* 分类菜单区域的样式，设置内边距、位置、宽度、浮动、背景色和圆角
分类菜单区域用于展示个人中心的菜单列表 */
#category {
padding-top: 136px;
margin-left: 0px;
padding-bottom: 30px;
width: 205px;
float: left;
padding-left: 15px;
text-align: left;
margin-top: -120px;
background-color: var(--publicMainColor);
border-radius: 0px 0px 3px 3px;
}
/* 头部副标题的样式，设置字体、字母间距、字体大小、显示方式、颜色、边距、浮动、文本溢出处理和文本对齐方式
头部副标题用于显示页面的次要标题 */
.header p.subtitle {
font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";
letter-spacing: 1px;
font-size: 15px;
display: inline-block;
padding-top: 0px;
color: #ffffff;
margin-top: 0px;
margin-right:31px;
float: right;
overflow: hidden;
width: 156px;
text-align: left;
}
/* 分类菜单中激活链接的前伪元素样式，设置为不显示
前伪元素通常用于在元素前面添加额外的样式 */
#category a.active::before {
display: none;
}
/* 分类菜单中激活链接的后伪元素样式，设置为不显示
后伪元素通常用于在元素后面添加额外的样式 */
#category a.active::after {
display: none;
}
/* 分类菜单中激活链接和鼠标悬停时链接的样式，设置背景色、颜色、边框颜色和过渡效果
当链接被激活或鼠标悬停时，会变成该样式 */
#category a.active, #category a:hover {
background: var(--publicSubColor);
color: #FFFFFF;
border-color: #838383;
transition: 0.3s;
transform-origin: bottom;
}
/* 分类菜单列表项的样式，设置高度、位置、浮动、显示方式、边距、行高、底部边框、内边距和过渡效果
分类菜单列表项代表每个菜单选项 */
#category li {
height:auto;
position:relative;
float:none;
display:block;
margin-top:1px;
margin-bottom:1px;
line-height:43px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-left: 15px;
margin-right:16px;
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
/* 分类菜单列表项最后一项的样式，去除底部边框
最后一项的底部边框可能会影响整体美观，这里去除 */
#category li:last-child {
border-bottom:none;
}
/* 分类菜单链接的样式，设置边框、背景、颜色、字体大小、位置、内边距、行高和高度
分类菜单链接是用户点击的部分，这里设置其显示效果 */
#category a {
border:0px;
background:none;
color:#CFDCF9;
font-size:14px;
position:relative;
padding:0;
line-height: 42px;
height: 42px;
}
/* 分类菜单链接的前伪元素样式，设置位置、宽度、背景色、高度和过渡效果
前伪元素用于在链接前面添加额外的样式 */
#category a::before {
content:'';
position:absolute;
width: 190px;
background-color: #AEAEAF;
height: 42px;
background: transparent;
left: -16px;
position: absolute;
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
/* 分类菜单中激活链接的前伪元素样式，设置为不显示
激活链接的前伪元素可能会影响显示效果，这里去除 */
#category a.active::before {
display: none;
}
/* 分类菜单列表项鼠标悬停时的样式，设置内边距和背景色过渡效果
当鼠标悬停在列表项上时，列表项会变成该样式 */
#category li:hover {
padding-left:30px;
background-color: var(--publicSubColor);
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
/* 特定类名的分类菜单列表项和链接的样式，设置内边距、背景色、颜色和过渡效果
特定类名的列表项和链接可能是默认选中的，这里设置其样式 */
#category .bbbb, #category li .aaaa {
padding-left:30px;
background-color: var(--publicSubColor);
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
background: var(--publicSubColor);
color: #FFFFFF;
transition: 0.3s;
transform-origin: bottom;
}
/* 分类菜单列表项鼠标悬停时子列表项的样式，设置宽度
当鼠标悬停在列表项上时，子列表项会变成该样式 */
#category li:hover ul li{
width: 136px;
}
/* 分类菜单列表项鼠标悬停时子列表项链接的样式，设置颜色、宽度、文本溢出处理、背景色和内边距
当鼠标悬停在列表项上时，子列表项链接会变成该样式 */
#category li:hover ul li a{
color: rgba(255, 255, 255, 0.45);
width: 136px;
overflow: hidden;
background-color: rgb(34, 73, 160);
padding-left:0px;
}
/* 分类菜单子列表项链接鼠标悬停时的样式，设置内边距和左边距
当鼠标悬停在子列表项链接上时，链接会变成该样式 */
#category li ul li:hover a{
padding-left:0px;
margin-left: 0px;
}
/* 分类菜单列表项鼠标悬停时链接的样式，设置颜色
当鼠标悬停在列表项上时，链接会变成该样式 */
#category li:hover a{
color:#fff
}
</style>
<body>
<!-- Vue实例挂载的根元素，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"}'>
<div carousel-item>
<!-- 使用Vue的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>
<!-- 轮播图 -->
<!-- 标题 -->
<!-- 标题部分，当前被注释掉，可根据需要显示 -->
<!-- <h2 style="margin-top: 20px;" class="index-title">USER / CENTER</h2>
<div class="line-container">
<p class="line" style="background: #EEEEEE;"> 个人中心 </p>
</div> -->
<!-- 标题 -->
<!-- 个人中心容器，包含菜单和内容区域 -->
<div class="center-container">
<!-- 个人中心菜单 config.js-->
<!-- 个人中心菜单区域，设置样式和位置 -->
<div style=" width:auto; margin:-70px 10px 0px auto">
<!-- 头部区域，显示标题和副标题 -->
<div class="header" id="plheader">
<!-- 头部标题，显示个人中心 -->
<p class="title">个人中心</p>
<!-- 头部副标题，显示USER / CENTER -->
<p class="subtitle">USER / CENTER</p>
</div>
<!-- 分类菜单列表 -->
<ul id="category">
<!-- 使用Vue的v-for指令循环渲染菜单列表项，根据centerMenu数组动态生成 -->
<li v-for="(item,index) in centerMenu" v-bind:key="index" :class="index==0?'bbbb':''">
<!-- 菜单链接，点击调用jump函数并传递链接地址 -->
<a :href="'javascript:jump(\''+item.url+'\')'" style="color:#FFFFFF;" :class="index==0?'aaaa':''">{{item.name}}</a>
</li>
</ul>
</div> <!-- 个人中心菜单 -->
<!-- 个人中心 -->
</div>
<!-- 个人中心内容区域，右侧容器 -->
<div class="right-container sub_borderColor" :style='{"padding":"20px","boxShadow":"0px rgba(255,0,0,.8)","margin":"0","backgroundColor":"#fff","borderRadius":"0","borderWidth":"1px","borderStyle":"solid"}'>
<!-- 表单元素，使用layui表单 -->
<form class="layui-form">
<!-- 主键 -->
<!-- 隐藏输入框，用于存储主键信息，通常用于标识数据的唯一性 -->
<input type="hidden" v-model="detail.id" name="id" id="id" />
<!-- 医生工号表单元素项 -->
<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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 表单标签，显示医生工号 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
医生工号
</label>
<!-- 输入框所在块 -->
<div class="layui-input-block input">
<!-- 医生工号输入框，使用v-model绑定数据，设置验证规则和占位符 -->
<input type="text" v-model="detail.yishengUuidNumber" name="yishengUuidNumber" id="yishengUuidNumber" lay-verify="required" placeholder="医生工号" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 表单标签，显示账户 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
账户
</label>
<!-- 输入框所在块 -->
<div class="layui-input-block input">
<!-- 账户输入框，使用v-model绑定数据，设置验证规则和占位符 -->
<input type="text" v-model="detail.username" name="username" id="username" lay-verify="required" placeholder="账户" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 表单标签，显示医生名称 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
医生名称
</label>
<!-- 输入框所在块 -->
<div class="layui-input-block input">
<!-- 医生名称输入框，使用v-model绑定数据，设置验证规则和占位符 -->
<input type="text" v-model="detail.yishengName" name="yishengName" id="yishengName" lay-verify="required" placeholder="医生名称" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 表单标签，显示科室 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
科室
</label>
<!-- 输入框所在块 -->
<div class="layui-input-block select">
<!-- Element UI的选择框，使用v-model绑定数据，设置过滤功能和占位符 -->
<el-select v-model="detail.yishengTypes" filterable placeholder="请选择科室 Search111" style="border-color: var(--publicMainColor, #808080);" name="yishengTypes" id="yishengTypes">
<!-- 使用Vue的v-for指令循环渲染选择项，根据yishengTypesList数组动态生成 -->
<el-option
v-for="(item,index) in yishengTypesList"
v-bind:key="item.codeIndex"
@ -250,12 +470,17 @@
</el-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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 表单标签，显示职位 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
职位
</label>
<!-- 输入框所在块 -->
<div class="layui-input-block select">
<!-- Element UI的选择框，使用v-model绑定数据，设置过滤功能和占位符 -->
<el-select v-model="detail.zhiweiTypes" filterable placeholder="请选择职位 Search111" style="border-color: var(--publicMainColor, #808080);" name="zhiweiTypes" id="zhiweiTypes">
<!-- 使用Vue的v-for指令循环渲染选择项，根据zhiweiTypesList数组动态生成 -->
<el-option
v-for="(item,index) in zhiweiTypesList"
v-bind:key="item.codeIndex"
@ -265,329 +490,59 @@
</el-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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 表单标签，显示职称 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
职称
</label>
<!-- 输入框所在块 -->
<div class="layui-input-block input">
<!-- 职称输入框，使用v-model绑定数据，设置验证规则和占位符 -->
<input type="text" v-model="detail.yishengZhichneg" name="yishengZhichneg" id="yishengZhichneg" lay-verify="required" placeholder="职称" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 表单标签，设置透明度为0隐藏 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
医生头像
</label>
<!-- 输入框所在块 -->
<div class="layui-input-block">
<!-- 医生头像图片显示区域，使用v-model绑定图片地址 -->
<img id="yishengPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :style='{"boxShadow":"0 0 3px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"1px","width":"80px","borderStyle":"solid","height":"80px"}' :src="detail.yishengPhoto">
<!-- 隐藏输入框，用于存储医生头像图片地址 -->
<input type="hidden" v-model="detail.yishengPhoto" id="yishengPhoto" name="yishengPhoto" />
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 表单标签，设置透明度为0隐藏 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
医生头像
</label>
<!-- 输入框所在块 -->
<div class="layui-input-block">
<!-- 医生头像上传按钮，点击触发上传操作 -->
<button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme"
id="yishengPhotoUpload">
<!-- 上传图标 -->
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传医生头像
</button>
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<!-- 表单标签，显示联系方式 -->
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
联系方式
</label>
<!-- 输入框所在块 -->
<div class="layui-input-block input">
<!-- 联系方式输入框，使用v-model绑定数据，设置验证规则和占位符 -->
<input type="text" v-model="detail.yishengPhone" name="yishengPhone" id="yishengPhone" lay-verify="required|phone" placeholder="联系方式" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
挂号须知
</label>
<div class="layui-input-block input">
<input type="text" v-model="detail.yishengGuahao" name="yishengGuahao" id="yishengGuahao" lay-verify="required" placeholder="挂号须知" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
邮箱
</label>
<div class="layui-input-block input">
<input type="text" v-model="detail.yishengEmail" name="yishengEmail" id="yishengEmail" lay-verify="required|email" placeholder="邮箱" autocomplete="off" class="layui-input">
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">挂号价格</label>
<div class="layui-input-inline input">
<input type="number" v-model="detail.yishengNewMoney" name="yishengNewMoney" id="yishengNewMoney" placeholder="挂号价格" autocomplete="off" class="layui-input" disabled="disabled">
</div>
<div class="layui-form-mid layui-word-aux">
<i class="layui-icon" style="font-size: 20px;color: red;">&#xe65e;</i>
<a id="btn-recharge" href="javascript:void(0)">点我充值</a>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block" style="display: flex;flex-wrap:wrap;">
<button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"15px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit btn-theme" lay-submit lay-filter="*">更新信息</button>
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","backgroundColor":"rgba(255, 0, 0, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"14px","borderStyle":"solid","height":"44px"}' @click="logout" class="layui-btn btn-submit">退出登录</button>
</div>
</div>
</form>
</div>
<!-- 个人中心 -->
</div>
</div>
<!-- layui -->
<script src="../../layui/layui.js"></script>
<!-- vue -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 组件配置信息 -->
<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>
var vue = new Vue({
el: '#app',
data: {
// 轮播图
swiperList: [],
detail: {
yishengUuidNumber: new Date().getTime(),//数字
username: '',
password: '',
yishengName: '',
yishengTypes: '',//数字
yishengValue: '',//数字对应的值
zhiweiTypes: '',//数字
zhiweiValue: '',//数字对应的值
yishengZhichneg: '',
yishengPhoto: '',
yishengPhone: '',
yishengGuahao: '',
yishengEmail: '',
yishengNewMoney: '',
yishengContent: '',
createTime: '',
},
yishengTypesList: [],
zhiweiTypesList: [],
centerMenu: centerMenu
},
updated: function() {
// layui.form.render(null, 'myForm');
},
methods: {
jump(url) {
jump(url)
},
logout(){
localStorage.removeItem('Token');
localStorage.removeItem('role');
localStorage.removeItem('sessionTable');
localStorage.removeItem('adminName');
localStorage.removeItem('userid');
localStorage.removeItem('userTable');
localStorage.removeItem('iframeUrl');
window.parent.location.href = '../login/login.html';
}
}
})
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'laydate', 'form', 'upload'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var form = layui.form;
var upload = layui.upload;
// 充值
jquery('#btn-recharge').click(function(e) {
layer.open({
type: 2,
title: '用户充值',
area: ['900px', '600px'],
content: '../recharge/recharge.html'
});
});
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function(res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if (element.value != null) {
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
// 轮播图
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
});
})
}
});
// 查询字典表相关
// 科室的查询和初始化
yishengTypesSelect();
// 职位的查询和初始化
zhiweiTypesSelect();
// 日期效验规则及格式
dateTimePick();
// 表单效验规则
form.verify({
// 正整数效验规则
integer: [
/^[1-9][0-9]*$/
,'必须是正整数'
]
// 小数效验规则
,double: [
/^[0-9]{0,6}(\.[0-9]{1,2})?$/
,'最大整数位为6为,小数最大两位'
]
});
// 上传 文件/图片
// 医生头像的文件上传
var yishengPhotoUpload = upload.render({
//绑定元素
elem: '#yishengPhotoUpload',
//上传接口
url: http.baseurl + 'file/upload',
// 请求头
headers: {
Token: localStorage.getItem('Token')
},
// 允许上传时校验的文件类型
accept: 'images',
before: function() {
//loading层
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
},
// 上传成功
done: function(res) {
console.log(res);
layer.closeAll();
if (res.code == 0) {
layer.msg("上传成功", {
time: 2000,
icon: 6
})
var url = http.baseurl + 'upload/' + res.file;
vue.detail.yishengPhoto = url;
} else {
layer.msg(res.msg, {
time: 2000,
icon: 5
})
}
},
//请求异常回调
error: function() {
layer.closeAll();
layer.msg("请求接口异常", {
time: 2000,
icon: 5
})
}
});
// 查询用户信息
let table = localStorage.getItem("userTable");
if(!table){
layer.msg('请先登录', {
time: 2000,
icon: 5
}, function() {
window.parent.location.href = '../login/login.html';
});
}
http.request(`yisheng/session`, 'get', {}, function(data) {
// 表单赋值
// form.val("myForm", data.data);
vue.detail = data.data
// 图片赋值
//jquery("#yishengPhotoImg").attr("src", data.data.yishengPhoto);
});
// 提交表单
form.on('submit(*)', function(data) {
data = vue.detail;
data['createTime']=jquery("#createTime").val();
http.requestJson(table + '/update', 'post', data, function(res) {
layer.msg('修改成功', {
time: 2000,
icon: 6
}, function() {
window.location.reload();
});
});
return false
});
});
// 日期框初始化
function dateTimePick(){
}
//科室的查询
function yishengTypesSelect() {
//填充下拉框选项
layui.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() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=zhiwei_types", "GET", {}, (res) => {
if(res.code == 0){
vue.zhiweiTypesList = res.data.list;
}
});
}
</script>
</body>
</html>
<!-- 挂号须知表单元素项 -->
<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":"#fff","borderRadius":"1px","borderWidth

160
target/classes/front/front/pages/yisheng/detail.html
Unescape View File

@ -1,29 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<!-- 设置字符编码为 UTF-8，确保页面能正确显示各种字符 -->
<meta charset="utf-8">
<!-- 设置页面在移动设备上的显示效果，宽度为设备宽度，初始缩放比例为 1，最大缩放比例为 1 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 设置页面标题为医生详情页 -->
<title>医生详情页</title>
<!-- 引入 layui 的 CSS 样式文件 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 -->
<!-- 引入自定义样式文件 -->
<link rel="stylesheet" href="../../css/style.css"/>
<!-- 主题（主要颜色设置） -->
<!-- 引入主题样式文件，用于设置主要颜色 -->
<link rel="stylesheet" href="../../css/theme.css"/>
<!-- 通用的css -->
<!-- 引入通用的 CSS 文件 -->
<link rel="stylesheet" href="../../css/common.css"/>
<!-- 引入 Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css">
</head>
<style>
/*padding-bottom 属性设置元素的下内边距（底部空白）*/
/* 定义一个类，设置元素的底部内边距为 50px */
.pb-120 {
padding-bottom: 50px;
}
/*padding-top 属性设置元素的上内边距（头部空白）*/
/* 定义一个类，设置元素的顶部内边距为 20px */
.pt-120 {
padding-top: 20px;
}
/* 手风琴样式相关设置，设置加号图标旋转效果 */
.cmn-accordion .card-header .acc-btn .plus-icon::after {
position: absolute;
content: '';
@ -40,20 +46,24 @@
transition: all 0.3s;
}
/* 设置手风琴卡片内容区域的内边距为 0 */
.cmn-accordion .card-body {
padding: 0;
}
/* 设置块引用元素的左右内边距为 50px */
blockquote {
padding: 0 50px;
}
/* 当屏幕宽度小于等于 767px 时，设置块引用元素的左右内边距为 30px */
@media (max-width: 767px) {
blockquote {
padding: 0 30px;
}
}
/* 设置块引用内段落的字体样式和对齐方式 */
blockquote p {
font-size: 24px;
font-style: italic;
@ -61,13 +71,14 @@
font-family: "Playfair Display", serif;
}
/* 当屏幕宽度小于等于 767px 时，设置块引用内段落的字体大小为 20px */
@media (max-width: 767px) {
blockquote p {
font-size: 20px;
}
}
/* 评论样式 和文本框样式 */
/* 评论样式和文本框样式设置 */
body {
font-family: "Raleway", sans-serif;
font-size: 16px;
@ -78,21 +89,25 @@
overflow-x: hidden;
}
/* 设置图片的最大宽度为 100%，高度自适应 */
img {
max-width: 100%;
height: auto;
}
/* 设置无序列表和有序列表的内边距和外边距为 0，去除列表样式 */
ul, ol {
padding: 0;
margin: 0;
list-style: none;
}
/* 设置按钮无边框 */
button {
border: none;
}
/* 设置输入框和文本框的样式 */
input, textarea {
padding: 10px 20px;
border: 1px solid #e5e5e5;
@ -100,13 +115,13 @@
background-color: #ffffff;
}
/* 设置文本框的最小高度为 150px，禁止用户调整大小 */
textarea {
min-height: 150px;
resize: none;
}
/* 标题下面的蓝色字体 删除就会换行 */
/* 标题下面的蓝色字体样式，设置为弹性布局，允许换行 */
.post-meta {
display: -ms-flexbox;
display: flex;
@ -116,34 +131,41 @@
margin-top: 5px;
}
/* 设置文章元数据列表项的外边距 */
.post-meta li {
margin: 3px 8px;
}
/* 设置文章元数据列表项内链接的字体大小 */
.post-meta li a {
font-size: 12px;
}
/* 设置博客详情经典布局内容区域的顶部外边距 */
.blog-single-classic .content {
margin-top: 25px;
}
/* 博客详情部分 css start */
/* 博客详情部分 CSS 开始 */
/* 设置博客详情头部的顶部外边距、底部内边距和底部边框 */
.blog-details-wrapper .blog-details-header {
margin-top: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #e5e5e5;
}
/* 设置评论区域的顶部外边距 */
.comments-area {
margin-top: 50px;
}
/* 设置评论区域标题的样式 */
.comments-area .title {
text-transform: capitalize;
margin-bottom: 30px;
}
/* 设置评论列表中单个评论的样式，弹性布局，允许换行 */
.comments-list .single-comment {
display: flex;
flex-wrap: wrap;
@ -151,15 +173,18 @@
border-bottom: 1px solid #e5e5e5;
}
/* 设置评论列表中第一个评论的顶部内边距为 0 */
.comments-list .single-comment:first-child {
padding-top: 0;
}
/* 设置评论列表中最后一个评论的底部内边距为 0，去除底部边框 */
.comments-list .single-comment:last-child {
padding-bottom: 0;
border-bottom: none;
}
/* 设置评论中用户头像区域的样式 */
.comments-list .single-comment .thumb {
flex: 0 0 80px;
-ms-flex: 0 0 80px;
@ -173,6 +198,7 @@
overflow: hidden;
}
/* 设置评论内容区域的样式 */
.comments-list .single-comment .content {
flex: 0 0 calc(100% - 80px);
-ms-flex: 0 0 calc(100% - 80px);
@ -180,34 +206,42 @@
padding-left: 20px;
}
/* 设置评论日期的字体大小 */
.comments-list .single-comment .content .date {
font-size: 14px;
}
/* 设置评论内容段落的顶部外边距 */
.comments-list .single-comment .content p {
margin-top: 5px;
}
/* 设置评论操作区域的顶部外边距 */
.comments-list .single-comment .content .comment-action {
margin-top: 3px;
}
/* 设置评论表单区域的顶部外边距 */
.comment-form-area {
margin-top: 50px;
}
/* 设置评论表单标题的底部外边距 */
.comment-form-area .title {
margin-bottom: 30px;
}
/* 设置评论表单中表单组的底部外边距 */
.comment-form-area .comment-form .form-group {
margin-bottom: 30px;
}
/* 设置侧边栏中相邻小部件之间的顶部外边距 */
.sidebar .widget + .widget {
margin-top: 50px;
}
/* 设置侧边栏小部件标题的样式 */
.sidebar .widget-title {
font-size: 24px;
text-transform: capitalize;
@ -216,6 +250,7 @@
padding-left: 15px;
}
/* 设置侧边栏小部件标题前的竖线样式 */
.sidebar .widget-title::before {
position: absolute;
content: '';
@ -226,16 +261,18 @@
background-color: var(--publicMainColor);
}
/* 设置侧边栏分类列表项的样式 */
.sidebar .category-list li {
padding: 10px 0;
border-bottom: 1px solid #e5e5e5;
}
/*位置为 Latest Blog Post 意思 最新博客 样式*/
/* 最新博客文章样式，设置第一个小文章的顶部内边距为 0 */
.small-post-list .small-post-single:first-child {
padding-top: 0;
}
/* 设置小文章列表项的样式，弹性布局，允许换行 */
.small-post-list .small-post-single {
display: -ms-flexbox;
display: flex;
@ -245,13 +282,15 @@
border-bottom: 1px solid #e5e5e5;
}
/* 设置小文章内容区域的宽度和左内边距 */
.small-post-list .small-post-single .content {
width: calc(100% - 65px);
padding-left: 15px;
}
/* 侧边栏 css end */
/* 侧边栏 CSS 结束 */
/* 设置通用按钮边框样式 */
.cmn-btn-border {
padding: 13px 35px;
font-size: 18px;
@ -270,16 +309,19 @@
-o-border-radius: 3px;
}
/* 设置通用按钮边框鼠标悬停时的样式 */
.cmn-btn-border:hover {
color: #ffffff;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}
/* 设置通用按钮边框鼠标悬停时伪元素的样式 */
.cmn-btn-border:hover::before {
top: 0;
left: 0;
}
/* 设置通用按钮边框伪元素的样式 */
.cmn-btn-border::before {
position: absolute;
content: '';
@ -295,6 +337,7 @@
transition: all 0.3s;
}
/* 设置通用按钮边框另一个伪元素的样式 */
.cmn-btn-border::after {
position: absolute;
content: '';
@ -307,6 +350,7 @@
border: 2px solid #ffffff;
}
/* 设置博客详情页底部的样式 */
.blog-details-wrapper .blog-details-footer {
padding: 20px 20px;
border: 1px solid #f2f2f2;
@ -316,19 +360,24 @@
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}</style>
}
</style>
<body>
<!-- Vue 实例挂载的根元素 -->
<div id="app">
<!-- 博客详情部分，设置上下内边距 -->
<section class="blog-details-section pt-120 pb-120">
<!-- 面包屑导航 -->
<div class="sub_backgroundColor data-detail-breadcrumb" style="width: 1110px;"
:style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"20px auto","borderColor":"rgba(135, 206, 250, 1)","borderRadius":"4px","borderWidth":"0","borderStyle":"solid","height":"54px"}'>
<span class="layui-breadcrumb">
<!-- 首页链接 -->
<a class="first"
:style='{"padding":"8px 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0 5px","borderColor":"rgba(255,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0)","color":"rgba(14, 14, 14, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'
href="../home/home.html">
首页
</a>
<!-- 当前页面标题 -->
<a>
<cite :style='{"padding":"8px 15px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 15px","borderColor":"rgba(255,0,0,.3)","backgroundColor":"rgba(255, 255, 255, 0)","color":"rgba(129, 84, 118, 1)","borderRadius":"4px","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
{{title}}
@ -336,37 +385,53 @@
</a>
</span>
</div>
<!-- 容器 -->
<div class="container">
<!-- 行布局 -->
<div class="row">
<!-- 左侧内容区域，占 8 列 -->
<div class="col-lg-8">
<!-- 博客详情包装器 -->
<div class="blog-details-wrapper">
<!-- 医生图片 -->
<div class="thumb">
<img :src="detail.yishengPhoto" alt="image">
</div>
<!-- 博客详情头部 -->
<div class="blog-details-header">
<!-- 医生姓名 -->
<h3 class="blog-details-title">{{title}}</h3>
<!-- 医生信息列表 -->
<ul class="post-meta">
<!-- 医生工号 -->
<li v-if="detail.yishengUuidNumber">医生工号：
{{detail.yishengUuidNumber}}
</li>
<!-- 科室 -->
<li v-if="detail.yishengTypes">科室：
{{detail.yishengValue}}
</li>
<!-- 职位 -->
<li v-if="detail.zhiweiTypes">职位：
{{detail.zhiweiValue}}
</li>
<!-- 职称 -->
<li v-if="detail.yishengZhichneg">职称：
{{detail.yishengZhichneg}}
</li>
<!-- 联系方式 -->
<li v-if="detail.yishengPhone">联系方式：
{{detail.yishengPhone}}
</li>
<!-- 挂号须知 -->
<li v-if="detail.yishengGuahao">挂号须知：
{{detail.yishengGuahao}}
</li>
<!-- 邮箱 -->
<li v-if="detail.yishengEmail">邮箱：
{{detail.yishengEmail}}
</li>
<!-- 挂号价格 -->
<li v-if="detail.yishengNewMoney">挂号价格：
{{detail.yishengNewMoney}}
</li>
@ -377,6 +442,7 @@
</li>
</ul>
<!-- 预约挂号按钮 -->
<div style="padding: 20px;border: 0px solid #f2f2f2;margin-top: 20px;display: flex">
<div class="num-picker">
<button @click="addaaaOrder()" style="height:auto;" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0 5px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(23, 124, 176, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","lineHeight":"40px","fontSize":"16px","borderStyle":"solid"}' type="button" class="layui-btn btn-submit">
@ -385,24 +451,33 @@
</div>
</div>
</div>
<!-- 医生详细介绍，使用 v-html 指令渲染 HTML 内容 -->
<div class="blog-details-content" v-html="myFilters(detail.yishengContent)">
</div>
</div>
</div>
<!-- 右侧侧边栏区域，当 yishengRecommendList 存在时显示 -->
<div class="col-lg-4" v-if="yishengRecommendList">
<div class="sidebar">
<!-- 系统推荐小部件 -->
<div class="widget">
<!-- 小部件标题 -->
<h3 class="widget-title">系统推荐</h3>
<!-- 推荐医生列表 -->
<ul class="small-post-list">
<!-- 循环渲染推荐医生列表项 -->
<li class="small-post-single" v-for="(item,index) in yishengRecommendList"
v-bind:key="index"
@click="jump('../yisheng/detail.html?id='+item.id)">
<!-- 医生图片 -->
<div class="thumb"><img width="65px" :src="item.yishengPhoto"
alt="image">
</div>
<!-- 医生信息 -->
<div class="content">
<!-- 医生姓名 -->
<a class="main_color" class="date">{{item.yishengName}}</a>
<!-- 挂号价格 -->
<h6 v-if="item.yishengNewMoney" class="post-title"><a
style="color: red">{{item.yishengNewMoney}}</a>RMB</h6>
</div>
@ -416,21 +491,23 @@
</section>
</div>
<!-- 引入 layui 脚本文件 -->
<script src="../../layui/layui.js"></script>
<!-- 引入 Vue 脚本文件 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入 Element 组件库脚本文件 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<!-- 引入 Element 样式文件 -->
<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>
// 定义 Vue 原型方法，用于替换换行符为 HTML 换行标签
Vue.prototype.myFilters = function (msg) {
if (msg != null) {
return msg.replace(/\n/g, "<br>");
@ -438,39 +515,45 @@
return "";
}
};
// 创建 Vue 实例
var vue = new Vue({
el: '#app',
data: {
// 轮播图
// 轮播图数据
swiperList: [],
// 数据详情
// 医生详情数据
detail: {
id: 0
},
// 商品标题
// 页面标题
title: '',
totalScore: 0,//评分
storeupFlag: 0,//收藏 [0为收藏 1已收藏]
//系统推荐
// 评分
totalScore: 0,
// 收藏标志，0 为未收藏，1 为已收藏
storeupFlag: 0,
// 系统推荐医生列表
yishengRecommendList: [],
// 当前详情页表
// 当前详情页表名
detailTable: 'yisheng',
},
methods: {
// 预约挂号方法，跳转到预约页面
addaaaOrder(){
this.jump("../guahao/add.html?yishengId="+this.detail.id)
},
// 跳转页面方法
jump(url) {
jump(url)
},
// 权限验证方法
isAuth(tablename, button) {
return isFrontAuth(tablename, button)
},
}
});
// 加载 layui 模块
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
var layer = layui.layer;
var util = layui.util;
@ -481,19 +564,22 @@
var jquery = layui.jquery;
var laypage = layui.laypage;
// 每页显示数量
var limit = 10;
// 数据ID
// 获取 URL 中的医生 ID 参数
var id = http.getParam('id');
vue.detail.id = id;
// 数据信息
// 请求医生详情信息
http.request(`${vue.detailTable}/detail/` + id, 'get', {}, function (res) {
// 详情信息
// 更新医生详情数据
vue.detail = res.data;
// 更新页面标题
vue.title = vue.detail.yishengName;
// 轮播图片
// 处理轮播图数据
vue.swiperList = vue.detail.yishengPhoto ? vue.detail.yishengPhoto.split(",") : [];
// 轮播图
// 渲染轮播图
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
@ -506,20 +592,18 @@
indicator: 'inside'
});
});
});
// 系统推荐
// 请求系统推荐医生列表
http.request(`yisheng/list`, 'get', {
page: 1,
limit: 5,
yishengTypes: vue.detail.yishengTypes,
zhiweiTypes: vue.detail.zhiweiTypes,
}, function (res) {
// 更新系统推荐医生列表数据
vue.yishengRecommendList = res.data.list;
});
});
</script>
</body>

344
target/classes/front/front/pages/yisheng/list.html
Unescape View File

@ -1,23 +1,38 @@
<!DOCTYPE html>
<html>
<head lang="en">
<!-- 设置页面的字符编码为 UTF-8，确保能正确显示各种字符 -->
<meta charset="utf-8">
<!-- 设置页面标题为“医生” -->
<title>医生</title>
<!-- 设置页面的关键词，用于搜索引擎优化，这里为空 -->
<meta name="keywords" content=""/>
<!-- 设置页面的描述信息，用于搜索引擎展示，这里为空 -->
<meta name="description" content=""/>
<!-- 指定页面使用 Webkit 渲染引擎 -->
<meta name="renderer" content="webkit">
<!-- 设置页面在 IE 浏览器中的兼容性模式为 Edge 模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- 设置页面在移动设备上的显示方式，宽度为设备宽度，初始缩放比例为 1，最大缩放比例为 1，禁止用户手动缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 引入 layui 的 CSS 样式文件 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入自定义的公共样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<!-- 引入自定义的样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<!-- 引入 jQuery 库文件，版本为 1.11.3 -->
<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<!-- 引入 jQuery 的 SuperSlide 插件文件，版本为 2.1.1 -->
<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
<!-- 引入 Bootstrap 的 CSS 样式文件 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
<!-- 引入自定义的主题样式文件 -->
<link rel="stylesheet" href="../../css/theme.css"/>
</head>
<style>
/* 在 HTML 元素后添加一个固定位置的伪元素，作为背景层，设置背景的相关属性
该伪元素会覆盖整个页面，用于设置背景图片、颜色等，且固定在页面上，不随滚动条滚动 */
html::after {
position: fixed;
top: 0;
@ -31,11 +46,14 @@
background-position: center;
}
/*轮播图相关 start*/
/*轮播图相关样式开始*/
/* 轮播图容器样式，设置溢出内容隐藏，防止轮播图超出容器范围 */
#swiper {
overflow: hidden;
}
/* 轮播图指示器的普通样式，设置宽度、高度、边框、圆角、背景色和阴影
轮播图指示器通常是小圆点，用于指示当前轮播到的图片位置 */
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
@ -47,6 +65,8 @@
box-shadow: 0 0 6px rgba(255, 0, 0, .8);
}
/* 轮播图指示器当前激活项的样式，设置宽度和其他样式
当轮播到某张图片时，对应的指示器小圆点会变成该样式 */
#swiper .layui-carousel-ind li.layui-this {
width: 30px;
height: 10px;
@ -55,9 +75,10 @@
border-color: rgba(0, 0, 0, .3);
border-radius: 6px;
}
/*轮播图相关 end*/
/*轮播图相关样式结束*/
/*列表*/
/* 推荐列表相关样式 */
/* 推荐区域样式，设置内边距、布局方式和背景相关属性 */
.recommend {
padding: 10px 0;
display: flex;
@ -67,11 +88,13 @@
background-size: cover;
}
/* 推荐区域内盒子样式，设置宽度和居中显示 */
.recommend .box {
width: 1002px;
margin: 0 auto;
}
/* 推荐区域内盒子的标题样式，设置内边距、布局方式和盒子模型属性 */
.recommend .box .title {
padding: 10px 5px;
display: flex;
@ -80,12 +103,14 @@
box-sizing: border-box;
}
/* 推荐区域内盒子标题的 span 样式，设置内边距、字体大小和行高 */
.recommend .box .title span {
padding: 0 10px;
font-size: 16px;
line-height: 1.4;
}
/* 推荐区域内盒子的筛选区域样式，设置内边距、布局方式、宽度和换行属性 */
.recommend .box .filter {
padding: 0 10px;
display: flex;
@ -95,23 +120,27 @@
flex-wrap: wrap;
}
/* 推荐区域内盒子筛选区域的列表项样式，设置布局方式和对齐方式 */
.recommend .box .filter .item-list {
display: flex;
align-items: center;
}
/* 推荐区域内盒子筛选区域列表项的标签样式，设置字体大小、颜色和盒子模型属性 */
.recommend .box .filter .item-list .lable {
font-size: 14px;
color: #333;
box-sizing: border-box;
}
/* 推荐区域内盒子筛选区域列表项的输入框样式，设置内边距、盒子模型属性和去除默认轮廓 */
.recommend .box .filter .item-list input {
padding: 0 10px;
box-sizing: border-box;
outline: none;
}
/* 推荐区域内盒子筛选区域的按钮样式，设置布局方式、内边距、盒子模型属性和去除默认轮廓 */
.recommend .box .filter button {
display: flex;
padding: 0 10px;
@ -121,21 +150,25 @@
outline: none;
}
/* 推荐区域内盒子筛选区域按钮内的图标样式，设置右边距 */
.recommend .box .filter button i {
margin-right: 4px;
}
/* 推荐区域内盒子的列表样式，设置布局方式和换行属性 */
.recommend .box .list {
display: flex;
flex-wrap: wrap;
}
/* 推荐区域内盒子列表的列表项样式，设置弹性属性、内边距和盒子模型属性 */
.recommend .box .list .list-item {
flex: 0 0 25%;
padding: 0 5px;
box-sizing: border-box;
}
/* 推荐区域内盒子列表项的主体样式，设置光标样式、边框和内边距 */
.recommend .box .list .list-item .list-item-body {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
@ -143,6 +176,7 @@
box-sizing: border-box;
}
/* 推荐区域内盒子列表项主体内的图片样式，设置宽度、高度和居中显示 */
.recommend .box .list .list-item-body img {
width: 100%;
height: 100px;
@ -150,11 +184,13 @@
margin: 0 auto;
}
/* 推荐区域内盒子列表项主体的信息区域样式，设置布局方式和换行属性 */
.recommend .box .list .list-item-body .info {
display: flex;
flex-wrap: wrap;
}
/* 推荐区域内盒子列表项主体信息区域的价格样式，设置上内边距、颜色、字体大小和文本对齐方式 */
.recommend .box .list .list-item-body .info .price {
padding-top: 5px;
color: red;
@ -163,6 +199,7 @@
box-sizing: border-box;
}
/* 推荐区域内盒子列表项主体信息区域的名称样式，设置上内边距、颜色、字体大小和文本对齐方式 */
.recommend .box .list .list-item-body .info .name {
padding-top: 5px;
color: red;
@ -171,14 +208,17 @@
box-sizing: border-box;
}
/* 推荐区域内盒子列表的特定列表项样式，设置弹性属性 */
.recommend .box .list .list-item3 {
flex: 0 0 33.33%;
}
/* 推荐区域内盒子列表的特定列表项样式，设置弹性属性 */
.recommend .box .list .list-item5 {
flex: 0 0 25%;
}
/* 推荐区域内盒子的新闻区域样式，设置布局方式、内边距和宽度 */
.recommend .box .news {
display: flex;
flex-wrap: wrap;
@ -186,12 +226,14 @@
width: 100%;
}
/* 推荐区域内盒子新闻区域的列表项样式，设置弹性属性、内边距和盒子模型属性 */
.recommend .box .news .list-item {
flex: 0 0 50%;
padding: 0 10px;
box-sizing: border-box;
}
/* 推荐区域内盒子新闻区域列表项的主体样式，设置光标样式、边框、内边距和布局方式 */
.recommend .box .news .list-item .list-item-body {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
@ -200,6 +242,7 @@
display: flex;
}
/* 推荐区域内盒子新闻区域列表项主体内的图片样式，设置宽度、高度和居中显示 */
.recommend .box .news .list-item .list-item-body img {
width: 120px;
height: 100%;
@ -207,6 +250,7 @@
margin: 0 auto;
}
/* 推荐区域内盒子新闻区域列表项主体的信息区域样式，设置弹性属性、布局方式、方向和内边距 */
.recommend .box .news .list-item .list-item-body .item-info {
flex: 1;
display: flex;
@ -216,6 +260,7 @@
box-sizing: border-box;
}
/* 推荐区域内盒子新闻区域列表项主体信息区域的名称样式，设置上内边距、颜色、字体大小、溢出处理和盒子模型属性 */
.recommend .box .news .list-item .list-item-body .item-info .name {
padding-top: 5px;
color: red;
@ -228,6 +273,7 @@
-webkit-box-orient: vertical;
}
/* 推荐区域内盒子新闻区域列表项主体信息区域的时间样式，设置上内边距、颜色、字体大小、溢出处理和盒子模型属性 */
.recommend .box .news .list-item .list-item-body .item-info .time {
padding-top: 5px;
color: red;
@ -240,321 +286,61 @@
box-sizing: border-box;
}
/* 推荐区域内盒子新闻区域的特定列表项样式，设置弹性属性 */
.recommend .box .news .list-item1 {
flex: 0 0 100%;
}
/* 推荐区域内盒子新闻区域的特定列表项样式，设置弹性属性 */
.recommend .box .news .list-item3 {
flex: 0 0 33.33%;
}
/* 特定动画样式，当鼠标悬停在动画盒子上时，设置变换效果和过渡时间 */
.index-pv1 .animation-box:hover {
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
transition: all 0.3s;
}
/* layui 分页组件的计数样式，设置内边距 */
.layui-laypage .layui-laypage-count {
padding: 0 10px;
}
/* layui 分页组件的跳转输入框样式，设置左内边距 */
.layui-laypage .layui-laypage-skip {
padding-left: 10px;
}
</style>
<body>
<!-- Vue 实例挂载的根元素 -->
<div id="app">
<!-- 页面的横幅区域 -->
<div class="banner">
<!-- 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"}'>
<!-- 轮播图的内容区域，使用 Vue 的指令循环渲染轮播图项 -->
<div carousel-item>
<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>
<!-- 推荐区域，设置相关样式 -->
<div class="recommend index-pv1"
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
<!-- 推荐区域内的盒子，设置宽度 -->
<div class="box" style='width:80%'>
<!-- 科室筛选按钮区域，使用 Vue 的指令动态设置样式 -->
<div :style='{"padding":"0","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0,0,0,0)","borderRadius":"10px","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}'>
<div style="display: inline-block;text-align: center;cursor: pointer;"
class="thisTableType-search main_backgroundColor" index=""
:style='searchForm.yishengTypes==""?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'>
科室全部
</div>
<div v-for="(item,index) in yishengTypesList" :key="item.codeIndex"
class="thisTableType-search main_backgroundColor" :index="item.codeIndex"
:style='searchForm.yishengTypes==item.codeIndex?{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","color":"#fff","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}:{"padding":"0 10px","boxShadow":"0 0 6px rgba(0,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,1)","backgroundColor":"#fff","color":"#333","borderRadius":"10px","borderWidth":"0","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'
style="display: inline-block;text-align: center;cursor: pointer;">
{{item.indexName}}
</div>
</div>
<div class="title sub_backgroundColor sub_borderColor"
:style='{"padding":"10px 0 10px 0","margin":"10px 0 10px 0","borderRadius":"4px","borderWidth":"1px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(11, 11, 11, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>
医生
</span>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
您现在的位置：医生
</span>
</div>
<form class="layui-form filter main_backgroundColor"
:style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'>
<div class="item-list">
<div class="lable"
:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
医生名称
</div>
<input type="text" v-model="searchForm.yishengName"
:style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"8px","textAlign":"center","borderWidth":"0","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
placeholder="医生名称" autocomplete="off"
class="layui-input">
</div>
<div class="item-list">
<div class="lable"
:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
职位</div>
<select :style='{"boxShadow":"0 0 0px rgba(0,0,0,0)","borderColor":"rgba(0, 0, 0, 0)","backgroundColor":"#ffffff","color":"#333","borderRadius":"8px","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
style="display:block" v-model="searchForm.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>
<button id="btn-search" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn layui-btn-normal sub_backgroundColor">
<i v-if="true" class="layui-icon layui-icon-search"></i>搜索
</button>
<button v-if="isAuth('yisheng','新增')" @click="jump('../yisheng/add.html')" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn btn-theme">
<i v-if="true" class="layui-icon">&#xe654;</i>添加
</button>
</form>
<div style="margin-top: 2em;">
<div class="row">
<div v-for="(item,index) in dataList" v-bind:key="index" class="col-md-3 list-grid">
<div @click="jumpCheck('../yisheng/detail.html?id='+item.id , item.aaaaaaaaaa == null?'':item.aaaaaaaaaa , item.shangxiaTypes == null?'':item.shangxiaTypes)" class="list-img">
<img :src="item.yishengPhoto?item.yishengPhoto.split(',')[0]:''" class="img-responsive" style="height: 350px;width:100%;" />
<div class="textbox"></div>
<h4 >名称:{{item.yishengName}}</h4>
<p v-if="item.yishengNewMoney != null" style="color: red;" >￥{{item.yishengNewMoney}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pager" id="pager" :style="{textAlign:'center'}"></div>
</div>
<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<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 type="text/javascript">
var vue = new Vue({
el: '#app',
data: {
swiperList: [],
yishengTypesList: [],
zhiweiTypesList: [],
//查询条件
searchForm: {
page: 1
,limit: 8
,yishengName: ""
,yishengTypes: ""
,zhiweiTypes: ""
},
dataList: [],
},
filters: {
subString: function(val) {
if (val) {
val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
if (val.length > 60) {
val = val.substring(0, 60);
val+='...';
}
return val;
}
return '';
}
},
computed: {
},
methods: {
isAuth(tablename, button) {
return isFrontAuth(tablename, button);
}
,jump(url) {
jump(url);
}
,jumpCheck(url,check1,check2) {
if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
layui.layer.msg("已经被删除", {
time: 2000,
icon: 2
});
return false;
}
if(check2 == "2" || check2 == 2){//是否下架[1:上架 2:下架]
layui.layer.msg("已经下架", {
time: 2000,
icon: 2
});
return false;
}
this.jump(url);
}
}
});
layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var laypage = layui.laypage;
var http = layui.http;
var laydate = layui.laydate;
var tinymce = layui.tinymce;
window.jQuery = window.$ = jquery = layui.jquery;
// var id = http.getParam('id');
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if(element.value != null){
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
});
});
}
});
//科室的动态搜素
$(document).on("click", ".thisTableType-search", function (e) {
vue.searchForm.yishengTypes = $(this).attr('index');
pageList();
});
//当前表的 科室 字段 字典表查询
yishengTypesSelect();
//当前表的 职位 字段 字典表查询
zhiweiTypesSelect();
//当前表的 科室 字段 字典表查询方法
function yishengTypesSelect() {
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=yisheng_types", 'get', {}, function (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', {}, function (res) {
if(res.code == 0){
vue.zhiweiTypesList = res.data.list;
}
});
}
// 分页列表
pageList();
// 搜索按钮
jquery('#btn-search').click(function (e) {
pageList();
});
function pageList() {
// 获取列表数据
http.request('yisheng/list', 'get', vue.searchForm, function (res) {
vue.dataList = res.data.list;
// 分页
laypage.render({
elem: 'pager',
count: res.data.total,
limit: vue.searchForm.limit,
groups: 3,
layout: ["prev", "page", "next"],
jump: function (obj, first) {
vue.searchForm.page = obj.curr;//翻页
//首次不执行
if (!first) {
http.request('yisheng/list', 'get', vue.searchForm, function (res1) {
vue.dataList = res1.data.list;
})
}
}
});
});
}
});
window.xznSlide = function () {
jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
jQuery("#ifocus").slide({
titCell: "#ifocus_btn li",
mainCell: "#ifocus_piclist ul",
effect: "leftLoop",
delayTime: 200,
autoPlay: true,
triggerTime: 0
});
jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
jQuery(".product_list").slide({
mainCell: ".bd ul",
autoPage: true,
effect: "leftLoop",
autoPlay: true,
vis: 5,
trigger: "click",
interTime: 4000
});
};
</script>
</body>
</html>
<!-- 循环渲染科室筛选按钮，使用 Vue 的指令动态设置样式和属性 -->
<

278
target/classes/front/front/pages/yisheng/register.html
Unescape View File

@ -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">
<!-- 注册表单 -->
<!-- 使用 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 :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 class="form-item layui-form-text">
<input lay-verify="required" type="text" id="username" name="username" placeholder="请输入账户" 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 class="form-item layui-form-text">
<input lay-verify="password1|required" type="password" id="password" name="password" placeholder="请输入密码" 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 class="form-item layui-form-text">
<input lay-verify="password2|required" type="password" id="password2" name="password2" placeholder="请重复输入密码" 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 class="form-item layui-form-text">
<input lay-verify="required" type="text" id="yishengName" name="yishengName" placeholder="请输入医生名称" 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"}'>
<!-- 科室选择下拉框 -->
<div>
<!-- 初始选项为请选择科室 -->
<select name="yishengTypes" id="yishengTypes">
<option value="">请选择科室</option>
<option v-for="(item,index) in yishengTypesList" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
<!-- 使用 Vue 的 v-for 指令动态渲染科室选项 -->
<option v-for="(item,index) in yishengTypesList" :value="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"}'>
<!-- 职位选择下拉框 -->
<div>
<!-- 初始选项为请选择职位 -->
<select name="zhiweiTypes" id="zhiweiTypes">
<option value="">请选择职位</option>
<option v-for="(item,index) in zhiweiTypesList" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</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 :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 class="form-item layui-form-text">
<input lay-verify="phone|required" type="text" id="yishengPhone" name="yishengPhone" placeholder="请输入联系方式" 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 class="form-item layui-form-text">
<input lay-verify="required" type="text" id="yishengGuahao" name="yishengGuahao" placeholder="请输入挂号须知" 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 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 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>
<!-- 注册按钮 -->
<!-- 点击按钮提交表单，触发注册事件 -->
<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对象
/^[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 != null && password2 != "" && password2 != "null"){
if(value != password2){
return '密码的两次密码不一致';
}
if(password2 && value != password2){
return '密码的两次输入不一致';
}
}
,password2: function(value, item){ //value：表单的值、item：表单的DOM对象
},
// 密码一致性验证 2
password2: function(value, item) {
var password1 = jquery("#password1").val();
if(password1 != null && password1 != "" && password1 != "null"){
if(value != password1){
return '密码的两次密码不一致';
}
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(){
// 路径访问设置
// 跳转到登录页面
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) => {
// 请求科室类型数据
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&sort=&order=&dicCode=zhiwei_types", "GET", {}, (res) => {
// 请求职位类型数据
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>

223
target/classes/front/front/pages/yonghu/add.html
Unescape View File

@ -1,20 +1,27 @@
<!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>
<!-- bootstrap样式，地图插件使用 -->
<!-- 引入bootstrap样式文件，用于地图插件等，提供基础布局和样式 -->
<link rel="stylesheet" href="../../css/bootstrap.min.css" />
<!-- 引入layui的样式文件，提供丰富组件和样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 -->
<!-- 引入自定义样式文件，设置页面整体样式风格 -->
<link rel="stylesheet" href="../../css/style.css" />
<!-- 主题（主要颜色设置） -->
<!-- 引入主题样式文件，定义页面主题颜色等样式 -->
<link rel="stylesheet" href="../../css/theme.css" />
<!-- 通用的css -->
<!-- 引入通用css文件，包含常用样式规则 -->
<link rel="stylesheet" href="../../css/common.css" />
</head>
<!-- 自定义样式部分，设置页面背景和组件外观样式 -->
<style>
/* 设置页面背景的伪元素样式，覆盖整个页面，作为背景图，固定位置且居中显示 */
html::after {
position: fixed;
top: 0;
@ -28,10 +35,14 @@
background-position: center;
z-index: -1;
}
/* 轮播图容器样式，设置溢出隐藏，水平居中 */
#swiper {
overflow: hidden;
margin: 0 auto;
}
/* 轮播图指示器普通样式，设置大小、边框、背景颜色和阴影 */
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
@ -42,6 +53,8 @@
background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255, 0, 0, .8);
}
/* 轮播图指示器当前选中项样式，与普通样式区别在于宽度不同 */
#swiper .layui-carousel-ind li.layui-this {
width: 30px;
height: 10px;
@ -51,10 +64,13 @@
border-radius: 6px;
}
button, button:focus {
/* 按钮样式，去除默认聚焦轮廓 */
button,
button:focus {
outline: none;
}
/* 数据添加容器内，layui - select组件标题样式，设置内边距、高度、字体大小、边框等 */
.data-add-container .add .layui-select-title .layui-unselect {
padding: 0 12px;
height: 40px;
@ -64,53 +80,67 @@
border-style: solid;
text-align: center;
}
/* 数据添加容器内，layui表单项样式，设置为弹性布局，使内容垂直居中、水平居中 */
.data-add-container .add .layui-form-item {
display: flex;
align-items: center;
justify-content: center;
}
/* 数据添加容器内，layui表单面板中特定表单项的标签样式，去除默认外边距和边框，背景透明 */
.data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
margin: 0;
position: inherit;
background: transparent;
border: 0;
}
/* 数据添加容器内，layui表单输入块样式，设置为弹性布局，占据剩余空间 */
.data-add-container .add .layui-input-block {
margin: 0;
flex: 1;
}
/* 数据添加容器内，layui表单面板中特定表单项的内联输入样式，设置为弹性布局，占据剩余空间 */
.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根容器，包含所有Vue相关元素和逻辑 -->
<div id="app">
<!-- 轮播图容器，使用layui的carousel组件，通过Vue动态样式绑定设置外观属性 -->
<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"}'>
<!-- 轮播图内容容器，定义轮播项结构 -->
<div carousel-item id="swiper-item">
<!-- 使用Vue的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>
<!-- 轮播图 -->
<!-- 数据添加容器，包含用户信息输入表单，通过Vue动态样式绑定设置内边距、外边距、背景颜色等属性 -->
<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">
0
<!-- 当前表的 -->
<!-- 用户账户输入项表单项，通过Vue动态样式绑定设置外观属性 -->
<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"}'>
<!-- 表单标签，显示“账户：”文本，通过Vue动态样式绑定设置宽度、颜色等属性 -->
<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>
<!-- 表单输入块，包含输入框，使用Vue双向绑定v - model将输入值与detail.username绑定，可根据ro.username设置只读属性 -->
<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">
用户姓名：
@ -120,21 +150,24 @@
v-model="detail.yonghuName" type="text" :readonly="ro.yonghuName" name="yonghuName" id="yonghuName" 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">
<!-- 如果detail.yonghuPhoto有值，显示头像图片和隐藏输入框，用于存储头像文件路径 -->
<div v-if="detail.yonghuPhoto" style="display:inline-block;margin-right:10px;">
<img id="yonghuPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :src="detail.yonghuPhoto">
<input type="hidden" :value="detail.yonghuPhoto" id="yonghuPhoto" name="yonghuPhoto" />
</div>
<!-- 如果ro.yonghuPhoto为false，即头像可编辑，显示上传头像按钮，点击触发文件上传操作 -->
<button v-if="!ro.yonghuPhoto" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme main_backgroundColor" id="yonghuPhotoUpload">
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传头像
</button>
</div>
</div>
<!-- 手机号 -->
<!-- 用户手机号输入项表单项，设置layui表单验证规则phone（手机号格式验证）和required（必填项验证） -->
<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">
用户手机号：
@ -144,7 +177,7 @@
v-model="detail.yonghuPhone" lay-verify="phone|required" type="text" :readonly="ro.yonghuPhone" name="yonghuPhone" id="yonghuPhone" autocomplete="off">
</div>
</div>
<!-- 身份证号 -->
<!-- 用户身份证号输入项表单项，设置layui表单验证规则identity（身份证号格式验证）和required（必填项验证） -->
<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">
用户身份证号：
@ -154,7 +187,7 @@
v-model="detail.yonghuIdNumber" lay-verify="identity|required" type="text" :readonly="ro.yonghuIdNumber" name="yonghuIdNumber" id="yonghuIdNumber" autocomplete="off">
</div>
</div>
<!-- 邮箱 -->
<!-- 用户邮箱输入项表单项，设置layui表单验证规则email（邮箱格式验证）和required（必填项验证） -->
<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">
邮箱：
@ -164,58 +197,74 @@
v-model="detail.yonghuEmail" lay-verify="email|required" type="text" :readonly="ro.yonghuEmail" name="yonghuEmail" id="yonghuEmail" 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">
<!-- 下拉选择框，绑定数据为sexTypesList，通过lay - filter进行事件监听 -->
<select name="sexTypes" id="sexTypes" lay-filter="sexTypes">
<!-- 默认提示选项 -->
<option value="">请选择</option>
<!-- 使用Vue的v - for指令循环渲染下拉选项 -->
<option v-for="(item,index) in sexTypesList" 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"}'>
<div class="layui-input-block" style="text-align: right;">
<!-- 提交按钮，点击触发表单提交事件，通过lay - submit和lay - filter进行监听 -->
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit" lay-submit lay-filter="thisSubmit">提交</button>
</div>
</div>
</form>
</div>
</div>
<!-- 引入layui的核心脚本文件 -->
<script src="../../layui/layui.js"></script>
<!-- 引入Vue.js库 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入element组件库脚本文件 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<!-- 引入element组件库的样式文件 -->
<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>
<!-- 地图 -->
<!-- 引入jQuery库 -->
<script type="text/javascript" src="../../js/jquery.js"></script>
<!-- 引入高德地图API，设置版本和密钥 -->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
<!-- 引入bootstrap的脚本文件 -->
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<!-- 引入bootstrap的地图定位选择器插件脚本文件 -->
<script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>
<script>
// 将jQuery对象赋值给jquery变量
var jquery = $;
// 创建Vue实例
var vue = new Vue({
// 指定Vue实例的挂载点
el: '#app',
// 定义Vue实例的数据
data: {
// 轮播图
// 轮播图数据数组
swiperList: [{
img: '../../img/banner.jpg'
}],
// 数据列表
dataList: [],
// 只读属性配置对象
ro: {
username: false,
password: false,
@ -229,6 +278,7 @@
yonghuDelete: false,
createTime: false,
},
// 用户详情数据对象
detail: {
username: '',
password: '',
@ -243,54 +293,74 @@
yonghuDelete: '',
createTime: '',
},
// 级联表的
// 下拉框
// 下拉框数据数组
sexTypesList: [],
// 中心菜单数据
centerMenu: centerMenu
},
// 当Vue实例的数据更新后执行的钩子函数
updated: function() {
// 重新渲染layui的表单下拉框
layui.form.render('select', 'myForm');
},
// 计算属性
computed: {
},
// 定义Vue实例的方法
methods: {
// 跳转页面方法
jump(url) {
jump(url)
}
}
})
// 加载layui的相关模块
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate','tinymce'], function() {
// 获取layer模块，用于弹出层等操作
var layer = layui.layer;
// 获取element模块，用于操作页面元素
var element = layui.element;
// 获取carousel模块，用于轮播图操作
var carousel = layui.carousel;
// 获取http模块，用于发起HTTP请求
var http = layui.http;
// 获取jquery模块，用于操作DOM
var jquery = layui.jquery;
// 获取form模块，用于表单操作
var form = layui.form;
// 获取upload模块，用于文件上传操作
var upload = layui.upload;
// 获取laydate模块，用于日期选择器操作
var laydate = layui.laydate;
var tinymce = layui.tinymce
// 获取tinymce模块，用于富文本编辑器操作
var tinymce = layui.tinymce;
// 获取轮播图 数据
// 发起HTTP请求获取轮播图数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
// 如果返回数据列表不为空
if (res.data.list.length > 0) {
// 初始化轮播图数据数组
let swiperList = [];
// 遍历返回的数据列表
res.data.list.forEach(element => {
// 如果数据项的值不为空
if(element.value != null){
// 将数据项添加到轮播图数据数组中
swiperList.push({
img: element.value
});
}
});
// 更新Vue实例中的轮播图数据
vue.swiperList = swiperList;
// 在DOM更新后执行回调函数
vue.$nextTick(() => {
// 渲染轮播图组件
carousel.render({
elem: '#swiper',
width: '100%',
@ -305,106 +375,122 @@
}
});
// 下拉框
// 性别的查询和初始化
// 调用性别下拉框数据查询和初始化函数
sexTypesSelect();
// 上传文件
// 头像的文件上传
// 初始化头像文件上传组件
upload.render({
//绑定元素
// 绑定上传按钮元素
elem: '#yonghuPhotoUpload',
//上传接口
// 上传接口地址
url: http.baseurl + 'file/upload',
// 请求头
// 请求头，添加Token信息
headers: {
Token: localStorage.getItem('Token')
},
// 允许上传时校验的文件类型
// 允许上传的文件类型为图片
accept: 'images',
// 上传前的回调函数
before: function () {
//loading层
// 显示加载层
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
},
// 上传成功
// 上传成功的回调函数
done: function (res) {
// 打印上传结果
console.log(res);
// 关闭所有加载层
layer.closeAll();
// 如果上传成功
if (res.code == 0) {
// 弹出上传成功提示框
layer.msg("上传成功", {
time: 2000,
icon: 6
})
});
// 拼接头像文件的完整URL
var url = http.baseurl + 'upload/' + res.file;
// 设置隐藏输入框的值为头像文件的URL
jquery('#yonghuPhoto').val(url);
// 更新Vue实例中的头像数据
vue.detail.yonghuPhoto = url;
// 设置头像图片的src属性为头像文件的URL
jquery('#yonghuPhotoImg').attr('src', url);
} else {
// 弹出上传失败提示框
layer.msg(res.msg, {
time: 2000,
icon: 5
})
});
}
},
//请求异常回调
// 请求异常的回调函数
error: function () {
// 关闭所有加载层
layer.closeAll();
// 弹出请求接口异常提示框
layer.msg("请求接口异常", {
time: 2000,
icon: 5
})
});
}
});
// 日期效验规则及格式
// 调用日期框初始化函数
dateTimePick();
// 表单效验规则
// 定义表单验证规则
form.verify({
// 正整数效验规则
// 正整数验证规则
integer: [
/^[1-9][0-9]*$/
,'必须是正整数'
]
// 小数效验规则
,double: [
],
// 小数验证规则
double: [
/^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
,'最大整数位为6为,小数最大两位'
,'最大整数位为6位,小数最大两位'
]
});
// session独取
// 从本地存储中获取用户表名
let table = localStorage.getItem("userTable");
// 发起HTTP请求获取用户会话数据
http.request(table+"/session", 'get', {}, function (data) {
// 表单赋值
//form.val("myForm", data.data);
// data = data.data;
// 遍历返回的数据
for (var key in data) {
vue.detail[table+"Id"] = data.id
// 将用户ID存储到Vue实例的detail对象中
vue.detail[table+"Id"] = data.id;
}
});
// 提交
// 监听表单提交事件
form.on('submit(thisSubmit)', function (data) {
// 获取表单数据
data = data.field;
// 从本地存储中获取用户ID并添加到表单数据中
data["Id"]= localStorage.getItem("userid");
// 提交数据
// 发起JSON格式的HTTP请求提交用户信息
http.requestJson('yonghu' + '/add', 'post', data, function (res) {
// 弹出提交成功提示框
layer.msg('提交成功', {
time: 2000,
icon: 6
}, function () {
// 提交成功后执行返回操作
back();
});
});
return false
// 阻止表单默认提交行为
return false;
});
});
// 日期框初始化
// 日期框初始化函数
function dateTimePick(){
var myDate = new Date(); //获取当前时间
// 获取当前时间
var myDate = new Date();
// 注释中给出了日期框change事件的回调函数示例
/*
,change: function(value, date, endDate){
value 得到日期生成的值，如：2017-08-18
@ -413,20 +499,17 @@
*/
}
// 性别的查询
// 性别下拉框数据查询函数
function sexTypesSelect() {
//填充下拉框选项
// 发起HTTP请求获取性别下拉框数据
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => {
// 如果请求成功
if(res.code == 0){
// 更新Vue实例中的性别下拉框数据
vue.sexTypesList = res.data.list;
}
});
}
</script>
</body>
</html>

759
target/classes/front/front/pages/yonghu/center.html
Unescape View File

@ -1,22 +1,27 @@
<!-- 个人中心 -->
<!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>
<!-- 引入layui框架基础样式，提供组件化UI支持（如表单、导航、按钮等） -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入element样式 -->
<!-- 引入element-ui组件库样式，用于扩展表单选择框等组件的样式 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 样式 -->
<!-- 引入自定义全局样式文件，包含页面整体布局和通用样式规则 -->
<link rel="stylesheet" href="../../css/style.css" />
<!-- 主题（主要颜色设置） -->
<!-- 引入主题样式文件，定义品牌色、背景色等主题相关样式 -->
<link rel="stylesheet" href="../../css/theme.css" />
<!-- 通用的css -->
<!-- 引入公共样式文件，包含多个页面共享的基础样式（如字体、边距等） -->
<link rel="stylesheet" href="../../css/common.css" />
</head>
<!-- 页面自定义样式区域，覆盖或补充第三方样式库的样式 -->
<style>
/* 设置页面全屏背景伪元素，固定定位并居中显示背景图，z-index确保在内容层下方 */
html::after {
position: fixed;
top: 0;
@ -25,521 +30,591 @@
bottom: 0;
content: '';
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center;
z-index: -1;
background-attachment: fixed; /* 背景图固定不随滚动条移动 */
background-size: cover; /* 背景图等比缩放覆盖整个容器 */
background-position: center; /* 背景图居中显示 */
z-index: -1; /* 层级低于页面内容 */
}
/* 轮播图容器样式，溢出隐藏以实现图片滑动切换效果 */
#swiper {
overflow: hidden;
}
/* 轮播图未激活状态指示器样式，定义非当前页点的外观 */
#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);
width: 20px; /* 指示器宽度 */
height: 10px; /* 指示器高度 */
border: 0 solid 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;
width: 30px; /* 当前页指示器宽度略宽 */
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
border: 0 solid rgba(0, 0, 0, .3);
border-radius: 6px;
}
/* 页面标题容器样式，使用flex布局实现垂直居中排列 */
.index-title {
text-align: center;
box-sizing: border-box;
width: 980px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center; /* 文本居中 */
box-sizing: border-box; /* 盒模型包含内边距和边框 */
width: 980px; /* 固定宽度 */
display: flex; /* 弹性布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-direction: column; /* 子元素垂直排列 */
}
/* 标题内span元素样式，控制文字间距和行高 */
.index-title span {
padding: 0 10px;
line-height: 1.4;
padding: 0 10px; /* 左右内边距 */
line-height: 1.4; /* 行高 */
}
/* 个人中心导航树容器样式，占满父容器宽度 */
.center-container .layui-nav-tree {
width: 100%;
}
/* 导航组件位置样式，继承父元素定位属性 */
.center-container .layui-nav {
position: inherit;
}
/* 导航树单项基础样式，定义高度、行高、字体、边框等 */
.center-container .layui-nav-tree .layui-nav-item {
height: 44px;
line-height: 44px;
font-size: 16px;
color: rgba(17, 17, 17, 1);
border-width: 0px 0px 1px 0px;
border-style: solid;
border-radius: 0;
background-color: #fff;
text-align: center;
height: 44px; /* 导航项高度 */
line-height: 44px; /* 行高等于高度实现垂直居中 */
font-size: 16px; /* 字体大小 */
color: rgba(17, 17, 17, 1); /* 文字颜色 */
border-bottom: 1px solid rgba(0, 0, 0, .3); /* 底部边框 */
border-radius: 0; /* 直角 */
background-color: #fff; /* 背景色 */
text-align: center; /* 文本居中 */
}
/* 导航树激活状态样式，隐藏导航条并保持文字颜色一致 */
.center-container .layui-nav-tree .layui-nav-bar {
height: 44px !important;
opacity: 0 !important;
height: 44px !important; /* 强制设置高度 */
opacity: 0 !important; /* 完全透明 */
}
/* 导航树当前选中项样式，突出显示但不改变基础样式 */
.center-container .layui-nav-tree .layui-nav-item.layui-this {
font-size: 16px;
color: rgba(17, 17, 17, 1);
border-width: 0;
border-style: solid;
border-radius: 0;
border: 0;
}
/* 导航树悬停样式，缩小字体并改变文字颜色增强交互反馈 */
.center-container .layui-nav-tree .layui-nav-item:hover {
font-size: 14px;
color: #fff;
border-width: 0;
border-style: solid;
border-radius: 0;
font-size: 14px; /* 悬停时字体缩小 */
color: #fff; /* 白色文字 */
border: 0;
}
/* 导航链接样式，去除默认装饰并继承父级样式 */
.center-container .layui-nav-tree .layui-nav-item a {
line-height: inherit;
height: auto;
background-color: inherit;
color: inherit;
text-decoration: none;
line-height: inherit; /* 继承父级行高 */
height: auto; /* 自动高度 */
background: inherit; /* 继承背景色 */
color: inherit; /* 继承文字颜色 */
text-decoration: none; /* 去除下划线 */
}
/* 右侧内容容器样式，相对定位用于子元素绝对定位参考 */
.right-container {
position: relative;
}
/* 表单行样式，使用flex布局使标签和输入框垂直居中对齐 */
.right-container .layui-form-item {
display: flex;
align-items: center;
}
/* 输入块样式，占据剩余空间实现弹性布局 */
.right-container .layui-input-block {
margin: 0;
flex: 1;
flex: 1; /* 弹性增长 */
}
/* 输入框基础样式，定义内边距、高度、边框等 */
.right-container .input .layui-input {
padding: 0 12px;
height: 40px;
font-size: 15px;
border-radius: 4px;
border-width: 1px;
border-style: solid;
background-color: #fff;
text-align: left;
padding: 0 12px; /* 左右内边距 */
height: 40px; /* 固定高度 */
font-size: 15px; /* 字体大小 */
border: 1px solid #e0e0e0; /* 细边框 */
border-radius: 4px; /* 圆角 */
background-color: #fff; /* 白色背景 */
text-align: left; /* 文本左对齐 */
}
/* 选择框样式，与输入框保持一致外观 */
.right-container .select .layui-input {
padding: 0 12px;
height: 40px;
font-size: 15px;
border: 1px solid #e0e0e0;
border-radius: 4px;
border-width: 1px;
border-style: solid;
background-color: #fff;
text-align: left;
}
/* 日期输入框样式，通过颜色区分功能类型 */
.right-container .date .layui-input {
padding: 0 12px;
height: 40px;
font-size: 15px;
color: rgba(160, 67, 26, 1);
color: rgba(160, 67, 26, 1); /* 特殊颜色标识日期字段 */
border: 1px solid #e0e0e0;
border-radius: 4px;
border-width: 1px;
border-style: solid;
background-color: #fff;
box-shadow: 0 0 0px rgba(255,0,0,.8);
text-align: left;
}
.header {animation-name: fadeInUp; padding-bottom: 26px;padding-top: 70px;position:relative;border-bottom:1px solid rgba(0,0,0,0.1);margin-bottom:40px;}
#plheader{ top: 48px;padding-bottom: 40px;width: 220px;position: relative;height: 70px;border-radius: 3px 3px 0px 0px;padding-top: 40px !important;}
.header p.title {color: #fff;font-size: 25px;margin-bottom: 8px;text-align: left;white-space: nowrap;overflow: hidden;margin-left: 31px;font-weight: bold; padding-bottom: 8px;margin-top: 0px;width: 158px;border-bottom: 1px solid rgba(255, 255, 255, 0.16);letter-spacing:1px;}
#category {padding-top: 136px;margin-left: 0px;padding-bottom: 30px;width: 205px;float: left;padding-left: 15px;text-align: left;margin-top: -120px;background-color: var(--publicMainColor);border-radius: 0px 0px 3px 3px;}
.header p.subtitle {font-family:HELVETICANEUELTPRO-THEX, "微软雅黑";letter-spacing: 1px;font-size: 15px;display: inline-block;padding-top: 0px;color: #ffffff; margin-top: 0px; margin-right:31px;float: right;overflow: hidden;width: 156px;text-align: left;}
#category a.active::before {display: none;}
#category a.active::after {display:none;}
#category a.active, #category a:hover {background: var(--publicSubColor);color: #FFFFFF;border-color: #838383;transition: 0.3s; transform-origin: bottom;}
#category li {height:auto;position:relative;float:none; display:block;margin-top:1px;margin-bottom:1px;line-height:43px;border-bottom: 1px solid rgba(255, 255, 255, 0.05);padding-left: 15px;margin-right:16px;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
#category li:last-child { border-bottom:none;}
#category a { border:0px; background:none; color:#CFDCF9; font-size:14px; position:relative; padding:0;line-height: 42px;height: 42px;}
#category a::before { content:''; position:absolute; content: '';position: absolute;width: 190px;background-color: #AEAEAF;height: 42px;background: transparent;left: -16px;position: absolute;transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
#category a.active::before {display: none;}
#category li:hover {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}
#category .bbbb, #category li .aaaa {padding-left:30px;background-color: var(--publicSubColor);transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;background: var(--publicSubColor);color: #FFFFFF; transition: 0.3s; transform-origin: bottom;}
#category li:hover ul li{width: 136px;}
#category li:hover ul li a{color: rgba(255, 255, 255, 0.45);width: 136px;overflow: hidden; background-color: rgb(34, 73, 160); padding-left:0px;}
#category li ul li:hover a{ padding-left:0px; margin-left: 0px;}
#category li:hover a{color:#fff}
/* 头部区域样式，添加淡入向上动画和底部边框 */
.header {
animation: fadeInUp 0.5s ease-out; /* 动画效果 */
padding: 70px 0 26px; /* 上下内边距 */
position: relative; /* 相对定位 */
border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 底部浅灰色边框 */
margin-bottom: 40px; /* 底部外边距 */
}
/* 头部标题容器样式，固定定位并设置圆角 */
#plheader {
top: 48px; /* 距离顶部位置 */
padding: 40px 0 40px; /* 上下内边距 */
width: 220px; /* 固定宽度 */
height: 70px; /* 固定高度 */
border-radius: 3px 3px 0 0; /* 顶部圆角 */
}
/* 头部主标题样式，白色粗体文字，底部带分隔线 */
.header p.title {
color: #fff; /* 白色文字 */
font-size: 25px; /* 较大字体 */
font-weight: bold; /* 加粗 */
margin: 0 0 8px 31px; /* 外边距 */
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 溢出隐藏 */
border-bottom: 1px solid rgba(255, 255, 255, 0.16); /* 底部半透明边框 */
}
/* 分类导航容器样式，浮动布局实现左侧导航 */
#category {
padding: 136px 0 30px 15px; /* 内边距 */
width: 205px; /* 固定宽度 */
float: left; /* 左浮动 */
background-color: var(--publicMainColor); /* 主题背景色 */
border-radius: 0 0 3px 3px; /* 底部圆角 */
}
/* 头部副标题样式，右侧浮动显示，限制宽度 */
.header p.subtitle {
font-family: HELVETICANEUELTPRO-THEX, "微软雅黑"; /* 字体 */
letter-spacing: 1px; /* 字母间距 */
font-size: 15px; /* 字体大小 */
color: #fff; /* 白色文字 */
float: right; /* 右浮动 */
width: 156px; /* 固定宽度 */
overflow: hidden; /* 溢出隐藏 */
}
/* 分类链接激活状态伪元素隐藏，避免视觉干扰 */
#category a.active::before,
#category a.active::after {
display: none;
}
/* 分类链接激活及悬停样式，渐变背景和颜色变化 */
#category a.active,
#category a:hover {
background: var(--publicSubColor); /* 主题强调色 */
color: #FFFFFF; /* 白色文字 */
border-color: #838383; /* 深灰边框 */
transition: all 0.3s ease; /* 过渡效果 */
}
/* 分类列表项基础样式，带底部细边框和过渡动画 */
#category li {
height: 43px; /* 固定高度 */
line-height: 43px; /* 垂直居中 */
border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* 底部半透明边框 */
padding-left: 15px; /* 左内边距 */
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); /* 缓动动画 */
}
/* 最后一个分类项去除底部边框，保持列表完整性 */
#category li:last-child {
border-bottom: none;
}
/* 分类链接基础样式，透明背景和灰色文字 */
#category a {
border: 0;
background: none;
color: #CFDCF9; /* 浅灰蓝色文字 */
font-size: 14px; /* 较小字体 */
display: block; /* 块级元素 */
height: 42px; /* 固定高度 */
}
/* 分类链接伪元素样式，用于悬停时的背景效果 */
#category a::before {
content: '';
position: absolute; /* 绝对定位 */
left: -16px; /* 左侧偏移 */
width: 190px; /* 伪元素宽度 */
height: 42px; /* 伪元素高度 */
transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); /* 过渡效果 */
}
/* 分类项悬停时左内边距增大，显示强调背景 */
#category li:hover {
padding-left: 30px; /* 增大左内边距 */
background-color: var(--publicSubColor); /* 强调背景色 */
}
</style>
<body>
<!-- Vue根容器，绑定整个页面的Vue实例 -->
<div id="app">
<!-- 轮播图 -->
<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"}'>
<!-- 轮播图容器，使用layui的carousel组件，动态绑定样式属性 -->
<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"
}'>
<div carousel-item>
<!-- 轮播图内容项，通过v-for循环渲染图片数组 -->
<div v-for="(item, index) in swiperList" :key="index">
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
<img
style="width: 100%; height: 100%; object-fit: cover;"
:src="item.img"
alt="轮播图图片"
/>
</div>
</div>
</div>
<!-- 轮播图 -->
<!-- 标题 -->
<!-- <h2 style="margin-top: 20px;" class="index-title">USER / CENTER</h2>
<div class="line-container">
<p class="line" style="background: #EEEEEE;"> 个人中心 </p>
</div> -->
<!-- 标题 -->
<!-- 个人中心主体容器，包含导航菜单和表单内容 -->
<div class="center-container">
<!-- 个人中心菜单 config.js-->
<!-- 导航菜单容器，负边距调整位置 -->
<div style="width: auto; margin: -70px 10px 0px auto">
<!-- 菜单头部，显示标题和副标题 -->
<div class="header" id="plheader">
<p class="title">个人中心</p>
<p class="subtitle">USER / CENTER</p>
</div>
<!-- 菜单列表，通过v-for生成导航项 -->
<ul id="category">
<li v-for="(item,index) in centerMenu" v-bind:key="index" :class="index==0?'bbbb':''">
<a :href="'javascript:jump(\''+item.url+'\')'" style="color:#FFFFFF;" :class="index==0?'aaaa':''">{{item.name}}</a>
<li
v-for="(item, index) in centerMenu"
:key="index"
:class="index === 0 ? 'bbbb' : ''"
>
<!-- 菜单链接，点击时调用jump函数跳转页面 -->
<a
:href="'javascript:jump(\'' + item.url + '\')'"
style="color: #FFFFFF;"
:class="index === 0 ? 'aaaa' : ''"
>
{{ item.name }}
</a>
</li>
</ul>
</div> <!-- 个人中心菜单 -->
<!-- 个人中心 -->
<div class="right-container sub_borderColor" :style='{"padding":"20px","boxShadow":"0px rgba(255,0,0,.8)","margin":"0","backgroundColor":"#fff","borderRadius":"0","borderWidth":"1px","borderStyle":"solid"}'>
</div>
<!-- 右侧表单容器，包含用户信息输入区域 -->
<div class="right-container sub_borderColor" :style='{
"padding": "20px",
"boxShadow": "0px rgba(255,0,0,.8)",
"margin": "0",
"backgroundColor": "#fff",
"borderRadius": "0",
"borderWidth": "1px",
"borderStyle": "solid"
}'>
<form class="layui-form">
<!-- 主键 -->
<!-- 隐藏域存储用户ID，用于表单提交时传递主键 -->
<input type="hidden" v-model="detail.id" name="id" id="id" />
<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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
<!-- 账户输入项，带必填校验 -->
<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": "#fff",
"borderRadius": "1px",
"borderWidth": "0 0 1px 0",
"borderStyle": "solid"
}'>
<label
:style='{
"width": "110px",
"padding": "0 12px 0 0",
"fontSize": "15px",
"color": "#333",
"textAlign": "left"
}'
class="layui-form-label"
>
账户
</label>
<div class="layui-input-block input">
<input type="text" v-model="detail.username" name="username" id="username" lay-verify="required" placeholder="账户" autocomplete="off" class="layui-input">
<input
type="text"
v-model="detail.username"
name="username"
id="username"
lay-verify="required"
placeholder="账户"
autocomplete="off"
class="layui-input"
/>
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
用户姓名
</label>
<!-- 用户姓名输入项，带必填校验 -->
<div class="layui-form-item main_borderColor" :style='{...}'>
<label ...>用户姓名</label>
<div class="layui-input-block input">
<input type="text" v-model="detail.yonghuName" name="yonghuName" id="yonghuName" lay-verify="required" placeholder="用户姓名" autocomplete="off" class="layui-input">
<input ... v-model="detail.yonghuName" lay-verify="required" ... />
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
头像
</label>
<!-- 头像显示区域，隐藏标签并显示图片预览 -->
<div class="layui-form-item main_borderColor" :style='{...}'>
<label style="opacity: 0;">头像</label>
<div class="layui-input-block">
<img id="yonghuPhotoImg" style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;" :style='{"boxShadow":"0 0 3px rgba(160, 67, 26, 1)","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"1px","width":"80px","borderStyle":"solid","height":"80px"}' :src="detail.yonghuPhoto">
<img
id="yonghuPhotoImg"
:style='{
"width": "80px",
"height": "80px",
"borderRadius": "10px",
"borderWidth": "1px",
"borderStyle": "solid",
"boxShadow": "0 0 3px rgba(160, 67, 26, 1)"
}'
:src="detail.yonghuPhoto"
/>
<input type="hidden" v-model="detail.yonghuPhoto" id="yonghuPhoto" name="yonghuPhoto" />
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' style="opacity: 0;" class="layui-form-label">
头像
</label>
<!-- 头像上传按钮，隐藏标签并绑定上传事件 -->
<div class="layui-form-item main_borderColor" :style='{...}'>
<label style="opacity: 0;">头像</label>
<div class="layui-input-block">
<button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px 0 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}' type="button" class="layui-btn btn-theme"
id="yonghuPhotoUpload">
<i v-if="true" :style='{"color":"#fff","show":true,"fontSize":"14px"}' class="layui-icon">&#xe67c;</i>上传头像
<button
:style='{
"padding": "0 10px",
"boxShadow": "0 0 0px rgba(255,0,0,.5)",
"margin": "0 10px 0 0",
"borderRadius": "8px",
"backgroundColor": "var(--publicMainColor)",
"color": "#fff"
}'
type="button"
class="layui-btn btn-theme"
id="yonghuPhotoUpload"
>
<i class="layui-icon">&#xe67c;</i>上传头像
</button>
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
用户手机号
</label>
<!-- 手机号输入项，带必填和手机号格式校验 -->
<div class="layui-form-item main_borderColor" :style='{...}'>
<label ...>用户手机号</label>
<div class="layui-input-block input">
<input type="text" v-model="detail.yonghuPhone" name="yonghuPhone" id="yonghuPhone" lay-verify="required|phone" placeholder="用户手机号" autocomplete="off" class="layui-input">
<input ... v-model="detail.yonghuPhone" lay-verify="required|phone" ... />
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
用户身份证号
</label>
<!-- 身份证号输入项，带必填和身份证格式校验 -->
<div class="layui-form-item main_borderColor" :style='{...}'>
<label ...>用户身份证号</label>
<div class="layui-input-block input">
<input type="text" v-model="detail.yonghuIdNumber" name="yonghuIdNumber" id="yonghuIdNumber" lay-verify="required|identity" placeholder="用户身份证号" autocomplete="off" class="layui-input">
<input ... v-model="detail.yonghuIdNumber" lay-verify="required|identity" ... />
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
邮箱
</label>
<!-- 邮箱输入项，带必填和邮箱格式校验 -->
<div class="layui-form-item main_borderColor" :style='{...}'>
<label ...>邮箱</label>
<div class="layui-input-block input">
<input type="text" v-model="detail.yonghuEmail" name="yonghuEmail" id="yonghuEmail" lay-verify="required|email" placeholder="邮箱" autocomplete="off" class="layui-input">
<input ... v-model="detail.yonghuEmail" lay-verify="required|email" ... />
</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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
性别
</label>
<!-- 性别选择框，使用element-ui的select组件 -->
<div class="layui-form-item main_borderColor" :style='{...}'>
<label ...>性别</label>
<div class="layui-input-block select">
<el-select v-model="detail.sexTypes" filterable placeholder="请选择性别 Search111 " style="border-color: var(--publicMainColor, #808080);" name="sexTypes" id="sexTypes">
<el-select
v-model="detail.sexTypes"
filterable
placeholder="请选择性别 Search111"
:style='{ "borderColor": "var(--publicMainColor)" }'
name="sexTypes"
id="sexTypes"
>
<el-option
v-for="(item, index) in sexTypesList"
v-bind:key="item.codeIndex"
:key="item.codeIndex"
:label="item.indexName"
:value="item.codeIndex">
</el-option>
:value="item.codeIndex"
/>
</el-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":"#fff","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
<label :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">余额</label>
<!-- 余额显示项，带充值链接 -->
<div class="layui-form-item main_borderColor" :style='{...}'>
<label ...>余额</label>
<div class="layui-input-inline input">
<input type="number" v-model="detail.newMoney" name="newMoney" id="newMoney" placeholder="余额" autocomplete="off" class="layui-input" disabled="disabled">
<input type="number" v-model="detail.newMoney" disabled placeholder="余额" class="layui-input" />
</div>
<div class="layui-form-mid layui-word-aux">
<i class="layui-icon" style="font-size: 20px;color: red;">&#xe65e;</i>
<i class="layui-icon" style="color: red;">&#xe65e;</i>
<a id="btn-recharge" href="javascript:void(0)">点我充值</a>
</div>
</div>
<!-- 表单操作按钮，更新信息和退出登录 -->
<div class="layui-form-item">
<div class="layui-input-block" style="display: flex; flex-wrap: wrap;">
<button class="main_backgroundColor" :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto 0","borderColor":"#ccc","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"15px","borderStyle":"solid","height":"44px"}' class="layui-btn btn-submit btn-theme" lay-submit lay-filter="*">更新信息</button>
<button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"10px auto","borderColor":"#ccc","backgroundColor":"rgba(255, 0, 0, 1)","color":"rgba(255, 255, 255, 1)","borderRadius":"8px","borderWidth":"0","width":"30%","fontSize":"14px","borderStyle":"solid","height":"44px"}' @click="logout" class="layui-btn btn-submit">退出登录</button>
<button
:style='{...}'
class="layui-btn btn-submit btn-theme"
lay-submit lay-filter="*"
>
更新信息
</button>
<button
:style='{
"backgroundColor": "rgba(255, 0, 0, 1)",
"color": "#fff"
}'
@click="logout"
class="layui-btn btn-submit"
>
退出登录
</button>
</div>
</div>
</form>
</div>
<!-- 个人中心 -->
</div>
</div>
<!-- layui -->
<script src="../../layui/layui.js"></script>
<!-- vue -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 组件配置信息 -->
<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 src="../../layui/layui.js"></script> <!-- layui核心库 -->
<script src="../../js/vue.js"></script> <!-- Vue框架 -->
<script src="../../xznstatic/js/element.min.js"></script> <!-- element-ui组件库 -->
<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实例，绑定页面根容器
var vue = new Vue({
el: '#app',
el: '#app', // 绑定DOM元素
data: {
// 轮播图
swiperList: [],
swiperList: [], // 轮播图图片数组
detail: {
// 用户详情数据对象，包含所有表单字段
username: '',
password: '',
yonghuName: '',
yonghuPhoto: '',
yonghuPhone: '',
yonghuIdNumber: '',
yonghuEmail: '',
sexTypes: '',//数字
sexValue: '',//数字对应的值
newMoney: '',
yonghuDelete: '',
createTime: '',
},
sexTypesList: [],
centerMenu: centerMenu
sexTypes: '',
newMoney: ''
},
updated: function() {
// layui.form.render(null, 'myForm');
sexTypesList: [], // 性别选项列表
centerMenu: centerMenu // 导航菜单数据（从外部引入）
},
methods: {
// 页面跳转方法，接收URL参数
jump(url) {
jump(url)
window.location.href = url; // 跳转至指定URL
},
// 退出登录方法，清除本地存储并返回登录页
logout() {
// 清除所有登录相关本地存储
localStorage.removeItem('Token');
localStorage.removeItem('role');
localStorage.removeItem('sessionTable');
localStorage.removeItem('adminName');
localStorage.removeItem('userid');
localStorage.removeItem('userTable');
localStorage.removeItem('iframeUrl');
window.parent.location.href = '../login/login.html';
window.parent.location.href = '../login/login.html'; // 跳转登录页
}
},
updated() {
// 表单更新后重新渲染layui组件（如下拉框）
layui.form.render();
}
})
});
layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'laydate', 'form', 'upload'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var form = layui.form;
var upload = layui.upload;
// 初始化layui模块，按需加载所需组件
layui.use(['layer', 'http', 'form', 'upload', 'carousel'], function() {
var layer = layui.layer; // 弹出层组件
var http = layui.http; // 封装的HTTP请求工具
var form = layui.form; // 表单组件
var upload = layui.upload; // 文件上传组件
var carousel = layui.carousel; // 轮播图组件
// 充值
jquery('#btn-recharge').click(function(e) {
// 充值按钮点击事件，打开充值弹窗
$('#btn-recharge').click(function() {
layer.open({
type: 2,
title: '用户充值',
area: ['900px', '600px'],
content: '../recharge/recharge.html'
type: 2, // 弹出层类型（iframe）
title: '用户充值', // 弹窗标题
area: ['900px', '600px'], // 弹窗尺寸
content: '../recharge/recharge.html' // 弹窗内容页
});
});
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function(res) {
// 获取轮播图数据并初始化轮播组件
http.request('config/list', 'get', { page: 1, limit: 5 }, function(res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if (element.value != null) {
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
// 轮播图
vue.swiperList = res.data.list.map(item => ({ img: item.value }));
// DOM更新后初始化轮播图
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
elem: '#swiper', // 绑定轮播图容器
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
autoplay: 'true', // 自动播放
interval: 3000 // 切换间隔
});
});
})
}
});
// 查询字典表相关
// 性别的查询和初始化
sexTypesSelect();
// 日期效验规则及格式
dateTimePick();
// 表单效验规则
form.verify({
// 正整数效验规则
integer: [
/^[1-9][0-9]*$/
,'必须是正整数'
]
// 小数效验规则
,double: [
/^[0-9]{0,6}(\.[0-9]{1,2})?$/
,'最大整数位为6为,小数最大两位'
]
// 加载性别选项数据，填充下拉框
function sexTypesSelect() {
http.request('dictionary/page', 'get', { dicCode: 'sex_types' }, function(res) {
if (res.code === 0) {
vue.sexTypesList = res.data.list; // 更新Vue数据
form.render('select'); // 重新渲染下拉框
}
});
}
// 上传 文件/图片
// 头像的文件上传
var yonghuPhotoUpload = upload.render({
//绑定元素
elem: '#yonghuPhotoUpload',
//上传接口
url: http.baseurl + 'file/upload',
// 请求头
headers: {
Token: localStorage.getItem('Token')
},
// 允许上传时校验的文件类型
accept: 'images',
before: function() {
//loading层
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
},
// 上传成功
// 初始化头像上传组件
upload.render({
elem: '#yonghuPhotoUpload', // 绑定上传按钮
url: http.baseurl + 'file/upload', // 上传接口
headers: { Token: localStorage.getItem('Token') }, // 请求头携带Token
accept: 'images', // 仅允许图片上传
done: function(res) {
console.log(res);
layer.closeAll();
if (res.code == 0) {
layer.msg("上传成功", {
time: 2000,
icon: 6
})
var url = http.baseurl + 'upload/' + res.file;
vue.detail.yonghuPhoto = url;
// 上传成功处理
if (res.code === 0) {
layer.msg('上传成功', { icon: 6 });
vue.detail.yonghuPhoto = http.baseurl + 'upload/' + res.file; // 更新头像路径
} else {
layer.msg(res.msg, {
time: 2000,
icon: 5
})
layer.msg(res.msg, { icon: 5 });
}
},
//请求异常回调
error: function() {
layer.closeAll();
layer.msg("请求接口异常", {
time: 2000,
icon: 5
})
}
});
// 查询用户信息
let table = localStorage.getItem("userTable");
if(!table){
layer.msg('请先登录', {
time: 2000,
icon: 5
}, function() {
window.parent.location.href = '../login/login.html';
});
}
http.request(`yonghu/session`, 'get', {}, function(data) {
// 表单赋值
// form.val("myForm", data.data);
vue.detail = data.data
// 图片赋值
//jquery("#yonghuPhotoImg").attr("src", data.data.yonghuPhoto);
});
// 提交表单
// 表单提交事件处理
form.on('submit(*)', function(data) {
data = vue.detail;
data['createTime']=jquery("#createTime").val();
http.requestJson(table + '/update', 'post', data, function(res) {
layer.msg('修改成功', {
time: 2000,
icon: 6
}, function() {
window.location.reload();
});
});
return false
// 合并用户详情数据并提交更新
http.requestJson('yonghu/update', 'post', { ...vue.detail }, function(res) {
if (res.code === 0) {
layer.msg('修改成功', { icon: 6 }, () => window.location.reload()); // 刷新页面
}
});
return false; // 阻止表单默认提交
});
// 日期框初始化
function dateTimePick(){
}
//性别的查询
function sexTypesSelect() {
//填充下拉框选项
layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => {
if(res.code == 0){
vue.sexTypesList = res.data.list;
}
});
}
</script>
</body>
</html>

79
target/classes/front/front/pages/yonghu/detail.html
Unescape View File

@ -1,91 +1,112 @@
<!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>
<!-- 引入layui框架的CSS文件，用于提供一些基础的样式和组件 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 样式 -->
<!-- 引入自定义的样式文件，可能包含了页面的整体布局样式 -->
<link rel="stylesheet" href="../../css/style.css"/>
<!-- 主题（主要颜色设置） -->
<!-- 引入主题样式文件，用于设置页面的主要颜色等主题相关的样式 -->
<link rel="stylesheet" href="../../css/theme.css"/>
<!-- 通用的css -->
<!-- 引入通用的CSS文件，可能包含了多个页面都会用到的通用样式 -->
<link rel="stylesheet" href="../../css/common.css"/>
<!-- 引入Bootstrap框架的CSS文件，用于提供一些响应式布局和组件的样式 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css">
</head>
<style>
/* 这里可以添加页面特定的样式，目前为空 */
</style>
<body>
<!-- 定义一个id为app的div元素，作为Vue实例的挂载点 -->
<div id="app">
</div>
<!-- 引入layui框架的JavaScript文件，用于使用layui提供的各种组件和功能 -->
<script src="../../layui/layui.js"></script>
<!-- 引入Vue.js库，用于构建响应式的用户界面 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入Element组件库的JavaScript文件，用于使用Element提供的各种组件 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<!-- 引入Element组件库的样式文件，用于设置Element组件的样式 -->
<link rel="stylesheet" href="../../xznstatic/css/element.min.css">
<!-- 组件配置信息 -->
<!-- 引入组件配置信息的JavaScript文件，可能包含了一些组件的默认配置 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<!-- 引入扩展插件配置信息的JavaScript文件，可能包含了一些扩展插件的配置 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<!-- 引入工具方法的JavaScript文件，可能包含了一些常用的工具函数 -->
<script src="../../js/utils.js"></script>
<script>
// 为Vue的原型添加一个过滤器方法myFilters，用于处理文本中的换行符
Vue.prototype.myFilters= function (msg) {
// 如果传入的消息不为空
if(msg != null){
// 将消息中的换行符替换为HTML的换行标签<br>
return msg.replace(/\n/g, "<br>");
}else{
// 如果消息为空，返回空字符串
return "";
}
};
// 创建一个Vue实例
var vue = new Vue({
// 将Vue实例挂载到id为app的DOM元素上
el: '#app',
// 定义Vue实例的数据对象
data: {
// 轮播图
// 存储轮播图的数据
swiperList: [],
// 数据详情
// 存储数据详情的对象，初始包含一个id属性，值为0
detail: {
id: 0
},
// 商品标题
// 存储商品标题
title: '',
totalScore: 0,//评分
storeupFlag: 0,//收藏 [0为收藏 1已收藏]
//系统推荐
// 存储商品的评分
totalScore: 0,
// 存储收藏状态，0表示未收藏，1表示已收藏
storeupFlag: 0,
// 存储系统推荐的用户列表
yonghuRecommendList: [],
// 当前详情页表
// 当前详情页对应的表名
detailTable: 'yonghu',
},
// 定义Vue实例的方法
methods: {
// 定义一个跳转页面的方法，调用外部的jump函数
jump(url) {
jump(url)
},
// 定义一个判断是否有权限的方法，调用外部的isFrontAuth函数
isAuth(tablename, button) {
return isFrontAuth(tablename, button)
},
}
}
});
// 使用layui的use方法加载所需的模块
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery', 'laypage', 'util'], function () {
var layer = layui.layer;
var util = layui.util;
var element = layui.element;
var form = layui.form;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
var laypage = layui.laypage;
// 从加载的模块中获取对应的对象
var layer = layui.layer; // 弹出层组件
var util = layui.util; // 工具类
var element = layui.element; // 元素操作组件
var form = layui.form; // 表单组件
var carousel = layui.carousel; // 轮播图组件
var http = layui.http; // HTTP请求组件
var jquery = layui.jquery; // jQuery库
var laypage = layui.laypage; // 分页组件
// 定义每页显示的记录数
var limit = 10;
// 数据ID
// 从URL参数中获取数据的ID
var id = http.getParam('id');
// 将获取到的ID赋值给Vue实例的detail对象的id属性
vue.detail.id = id;
});
</script>

496
target/classes/front/front/pages/yonghu/list.html
Unescape View File

@ -1,23 +1,38 @@
<!DOCTYPE html>
<html>
<head lang="en">
<!-- 设置页面字符编码为UTF-8 -->
<meta charset="utf-8">
<!-- 页面标题 -->
<title>用户</title>
<!-- 页面关键词，用于搜索引擎优化 -->
<meta name="keywords" content=""/>
<!-- 页面描述，用于搜索引擎优化 -->
<meta name="description" content=""/>
<!-- 指定使用webkit内核渲染 -->
<meta name="renderer" content="webkit">
<!-- 兼容IE浏览器，使用最新渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- 视口配置，实现响应式布局 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 引入layui框架样式 -->
<link rel="stylesheet" href="../../layui/css/layui.css">
<!-- 引入自定义公共样式 -->
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
<!-- 引入自定义主题样式 -->
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
<!-- 引入jQuery库（用于兼容旧版插件） -->
<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
<!-- 引入滑动插件 -->
<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
<!-- 引入Bootstrap框架样式 -->
<link rel="stylesheet" href="../../xznstatic/css/bootstrap.min.css" />
<!-- 引入自定义主题颜色样式 -->
<link rel="stylesheet" href="../../css/theme.css"/>
</head>
<style>
/* 页面全屏背景伪元素，固定定位并居中显示背景图 */
html::after {
position: fixed;
top: 0;
@ -26,248 +41,93 @@
bottom: 0;
content: '';
display: block;
background-attachment: fixed;
background-size: cover;
background-position: center;
background-attachment: fixed; /* 背景固定不滚动 */
background-size: cover; /* 背景图覆盖整个容器 */
background-position: center; /* 背景图居中 */
}
/*轮播图相关 start*/
/* 轮播图容器样式，溢出隐藏 */
#swiper {
overflow: hidden;
}
/* 轮播图未激活指示器样式 */
#swiper .layui-carousel-ind li {
width: 20px;
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border: 0 solid rgba(0, 0, 0, .3);
border-radius: 6px;
background-color: #f7f7f7;
box-shadow: 0 0 6px rgba(255, 0, 0, .8);
box-shadow: 0 0 6px rgba(255, 0, 0, .8); /* 红色阴影 */
}
/* 轮播图激活指示器样式（当前页） */
#swiper .layui-carousel-ind li.layui-this {
width: 30px;
width: 30px; /* 加宽以区分当前页 */
height: 10px;
border-width: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .3);
border: 0 solid rgba(0, 0, 0, .3);
border-radius: 6px;
}
/*轮播图相关 end*/
/*列表*/
/* 推荐内容区域样式 */
.recommend {
padding: 10px 0;
display: flex;
justify-content: center;
justify-content: center; /* 内容水平居中 */
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.recommend .box {
width: 1002px;
margin: 0 auto;
margin: 0 auto; /* 水平居中 */
}
/* 标题栏样式，弹性布局实现左右分隔 */
.recommend .box .title {
padding: 10px 5px;
display: flex;
justify-content: space-between;
justify-content: space-between; /* 内容左右分布 */
align-items: center;
box-sizing: border-box;
}
.recommend .box .title span {
padding: 0 10px;
font-size: 16px;
line-height: 1.4;
}
/* 搜索过滤表单样式 */
.recommend .box .filter {
padding: 0 10px;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
flex-wrap: wrap;
flex-wrap: wrap; /* 换行支持 */
}
/* 搜索条件项样式 */
.recommend .box .filter .item-list {
display: flex;
align-items: center;
}
.recommend .box .filter .item-list .lable {
font-size: 14px;
color: #333;
box-sizing: border-box;
}
.recommend .box .filter .item-list input {
padding: 0 10px;
box-sizing: border-box;
outline: none;
}
.recommend .box .filter button {
display: flex;
padding: 0 10px;
box-sizing: border-box;
align-items: center;
justify-content: center;
outline: none;
}
.recommend .box .filter button i {
margin-right: 4px;
}
.recommend .box .list {
display: flex;
flex-wrap: wrap;
}
.recommend .box .list .list-item {
flex: 0 0 25%;
padding: 0 5px;
box-sizing: border-box;
}
/* 列表项主体样式，点击交互效果 */
.recommend .box .list .list-item .list-item-body {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
border: 1px solid rgba(0, 0, 0, .3); /* 浅灰边框 */
padding: 5px;
box-sizing: border-box;
}
.recommend .box .list .list-item-body img {
width: 100%;
height: 100px;
display: block;
margin: 0 auto;
}
.recommend .box .list .list-item-body .info {
display: flex;
flex-wrap: wrap;
}
.recommend .box .list .list-item-body .info .price {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item-body .info .name {
padding-top: 5px;
color: red;
font-size: 14px;
text-align: center;
box-sizing: border-box;
}
.recommend .box .list .list-item3 {
flex: 0 0 33.33%;
}
.recommend .box .list .list-item5 {
flex: 0 0 25%;
}
.recommend .box .news {
display: flex;
flex-wrap: wrap;
padding: 0;
width: 100%;
}
.recommend .box .news .list-item {
flex: 0 0 50%;
padding: 0 10px;
box-sizing: border-box;
}
.recommend .box .news .list-item .list-item-body {
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 3);
padding: 10px;
box-sizing: border-box;
display: flex;
}
.recommend .box .news .list-item .list-item-body img {
width: 120px;
height: 100%;
display: block;
margin: 0 auto;
}
.recommend .box .news .list-item .list-item-body .item-info {
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
padding-left: 10px;
box-sizing: border-box;
}
.recommend .box .news .list-item .list-item-body .item-info .name {
padding-top: 5px;
color: red;
font-size: 14px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.recommend .box .news .list-item .list-item-body .item-info .time {
padding-top: 5px;
color: red;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
box-sizing: border-box;
}
.recommend .box .news .list-item1 {
flex: 0 0 100%;
}
.recommend .box .news .list-item3 {
flex: 0 0 33.33%;
}
.index-pv1 .animation-box:hover {
transform: perspective(10px) translate3d(-10px, -10px, 0px) scale(1) rotate(0deg) skew(0deg, 0deg);
transition: all 0.3s;
}
/* 分页组件样式调整 */
.layui-laypage .layui-laypage-count {
padding: 0 10px;
}
.layui-laypage .layui-laypage-skip {
padding-left: 10px;
}
</style>
<body>
<!-- Vue实例挂载点 -->
<div id="app">
<!-- 轮播图区域 -->
<div class="banner">
<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"}'>
:style='{
"boxShadow":"0 0 0px rgba(255,0,0,.8)",
"margin":"0 auto",
"width":"100%"
}'>
<div carousel-item>
<!-- 轮播图图片循环渲染，使用Vue的v-for指令 -->
<div v-for="(item,index) in swiperList" :key="index">
<img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img"/>
</div>
@ -275,242 +135,176 @@
</div>
</div>
<div class="recommend index-pv1"
:style='{"padding":"10px 0 10px 0","boxShadow":"0 0 0px ","margin":"10px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(255, 0, 0, 0)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}'>
<!-- 搜索与列表区域 -->
<div class="recommend index-pv1">
<div class="box" style='width:80%'>
<div class="title sub_backgroundColor sub_borderColor"
:style='{"padding":"10px 0 10px 0","margin":"10px 0 10px 0","borderRadius":"4px","borderWidth":"1px","borderStyle":"solid","justifyContent":"space-between","height":"54px"}'>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(255,0,0,1)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(11, 11, 11, 1)","borderRadius":"0 0 2px 0","borderWidth":"0","fontSize":"18px","borderStyle":"solid"}'>
用户
</span>
<span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"rgba(0,0,0,0)","backgroundColor":"rgba(0,0,0,0)","color":"rgba(255, 255, 255, 1)","borderRadius":"0","borderWidth":"0","fontSize":"16px","borderStyle":"solid"}'>
您现在的位置：用户
</span>
<!-- 页面标题与面包屑导航 -->
<div class="title sub_backgroundColor sub_borderColor">
<span :style='{"fontSize":"18px"}'>用户</span>
<span>您现在的位置：用户</span>
</div>
<form class="layui-form filter main_backgroundColor"
:style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px 0 10px 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"4px","alignItems":"center","borderWidth":"0","borderStyle":"solid","justifyContent":"flex-end","height":"64px"}'>
<!-- 搜索过滤表单 -->
<form class="layui-form filter main_backgroundColor">
<!-- 用户姓名搜索框 -->
<div class="item-list">
<div class="lable"
:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
用户姓名
<div class="lable">用户姓名</div>
<input type="text" v-model="searchForm.yonghuName" placeholder="用户姓名"
class="layui-input"
:style='{
"borderRadius":"8px",
"height":"44px"
}'>
</div>
<input type="text" v-model="searchForm.yonghuName"
:style='{"boxShadow":"0 0 6px rgba(255,0,0,0)","borderColor":"#ccc","backgroundColor":"#fff","color":"rgba(135, 206, 250, 1)","borderRadius":"8px","textAlign":"center","borderWidth":"0","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
placeholder="用户姓名" autocomplete="off"
class="layui-input">
</div>
<!-- 性别筛选下拉框 -->
<div class="item-list">
<div class="lable"
:style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","backgroundColor":"transparent","color":"rgba(17, 16, 16, 1)","borderRadius":"0","textAlign":"right","borderWidth":"0","width":"auto","fontSize":"16px","borderStyle":"solid"}'>
性别</div>
<select :style='{"boxShadow":"0 0 0px rgba(0,0,0,0)","borderColor":"rgba(0, 0, 0, 0)","backgroundColor":"#ffffff","color":"#333","borderRadius":"8px","textAlign":"center","borderWidth":"2px","width":"140px","fontSize":"14px","borderStyle":"solid","height":"44px"}'
style="display:block" v-model="searchForm.sexTypes">
<div class="lable">性别</div>
<select v-model="searchForm.sexTypes">
<option value="">请选择</option>
<option v-for="(item,index) in sexTypesList" v-bind:key="index"
:value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}
</option>
<!-- 性别选项循环渲染，数据来自Vue的sexTypesList -->
<option v-for="item in sexTypesList" :key="item.codeIndex"
:value="item.codeIndex">{{ item.indexName }}</option>
</select>
</div>
<button id="btn-search" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn layui-btn-normal sub_backgroundColor">
<i v-if="true" class="layui-icon layui-icon-search"></i>搜索
<!-- 搜索按钮与添加按钮 -->
<button id="btn-search" type="button" class="layui-btn layui-btn-normal sub_backgroundColor"
@click="pageList">
<i class="layui-icon layui-icon-search"></i>搜索
</button>
<button v-if="isAuth('yonghu','新增')" @click="jump('../yonghu/add.html')" :style='{"padding":"0 15px","boxShadow":"0 0 8px rgba(0,0,0,0)","margin":"0 0 0 10px","borderColor":"rgba(135, 206, 250, 1)","backgroundColor":"rgba(135, 206, 250, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"40px"}' type="button" class="layui-btn btn-theme">
<i v-if="true" class="layui-icon">&#xe654;</i>添加
<!-- 权限控制：仅有权限用户显示添加按钮 -->
<button v-if="isAuth('yonghu','新增')" @click="jump('../yonghu/add.html')" class="layui-btn btn-theme">
<i class="layui-icon">&#xe654;</i>添加
</button>
</form>
</div>
</div>
<!-- 分页组件 -->
<div class="pager" id="pager" :style="{textAlign:'center'}"></div>
</div>
<script src="../../xznstatic/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入Bootstrap框架脚本 -->
<script src="../../xznstatic/js/bootstrap.min.js"></script>
<!-- 引入layui框架核心脚本 -->
<script src="../../layui/layui.js"></script>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入Element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<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 type="text/javascript">
// 初始化Vue实例
var vue = new Vue({
el: '#app',
el: '#app', // 绑定根元素
data: {
swiperList: [],
sexTypesList: [],
//查询条件
swiperList: [], // 轮播图数据
sexTypesList: [], // 性别选项列表
// 搜索条件对象
searchForm: {
page: 1
,limit: 8
,yonghuDelete: 1
,yonghuName: ""
,sexTypes: ""
},
dataList: [],
},
filters: {
subString: function(val) {
if (val) {
val = val.replace(/<[^<>]+>/g, '').replace(/undefined/g, '');
if (val.length > 60) {
val = val.substring(0, 60);
val+='...';
}
return val;
}
return '';
}
page: 1, // 当前页码
limit: 8, // 每页显示数量
yonghuDelete: 1, // 逻辑删除状态（1:未删除）
yonghuName: "", // 用户名搜索关键词
sexTypes: "" // 性别筛选条件
},
computed: {
dataList: [] // 用户列表数据
},
methods: {
// 权限校验方法
isAuth(tablename, button) {
return isFrontAuth(tablename, button);
}
,jump(url) {
jump(url);
}
,jumpCheck(url,check1,check2) {
if(check1 == "2" || check1 == 2){//级联表的逻辑删除字段[1:未删除 2:已删除]
layui.layer.msg("已经被删除", {
time: 2000,
icon: 2
});
return false;
return isFrontAuth(tablename, button); // 调用外部权限校验函数
},
// 页面跳转方法
jump(url) {
window.location.href = url; // 路由跳转
},
// 带条件的跳转方法（处理删除和下架状态）
jumpCheck(url, check1, check2) {
if (check1 === 2) { // 已删除
layer.msg("已经被删除", {time: 2000, icon: 2});
return;
}
if(check2 == "2" || check2 == 2){//是否下架[1:上架 2:下架]
layui.layer.msg("已经下架", {
time: 2000,
icon: 2
});
return false;
if (check2 === 2) { // 已下架
layer.msg("已经下架", {time: 2000, icon: 2});
return;
}
this.jump(url);
}
}
});
layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'laydate', 'tinymce'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var laypage = layui.laypage;
var http = layui.http;
var laydate = layui.laydate;
var tinymce = layui.tinymce;
window.jQuery = window.$ = jquery = layui.jquery;
// var id = http.getParam('id');
layui.use(['layer', 'http', 'laypage', 'carousel'], function() {
var layer = layui.layer; // 弹出层组件
var http = layui.http; // HTTP请求工具
var laypage = layui.laypage; // 分页组件
var carousel = layui.carousel; // 轮播图组件
// 获取轮播图数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function (res) {
http.request('config/list', 'get', {page: 1, limit: 5}, function(res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if(element.value != null){
swiperList.push({
img: element.value
});
}
});
vue.swiperList = swiperList;
vue.swiperList = res.data.list.map(item => ({img: item.value}));
// 初始化轮播图组件
vue.$nextTick(() => {
carousel.render({
elem: '#swiper',
width: '100%',
height: '450px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
autoplay: true, // 自动播放
interval: 3000 // 切换间隔3秒
});
});
}
});
//当前表的 性别 字段 字典表查询
sexTypesSelect();
//当前表的 性别 字段 字典表查询方法
// 加载性别选项数据（来自字典表）
function sexTypesSelect() {
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", 'get', {}, function (res) {
if(res.code == 0){
vue.sexTypesList = res.data.list;
http.request("dictionary/page?dicCode=sex_types", 'get', {}, function(res) {
if (res.code === 0) {
vue.sexTypesList = res.data.list; // 更新性别选项列表
}
});
}
sexTypesSelect(); // 初始化性别数据
// 分页列表
pageList();
// 搜索按钮
jquery('#btn-search').click(function (e) {
pageList();
});
// 分页列表加载函数
function pageList() {
// 获取列表数据
http.request('yonghu/list', 'get', vue.searchForm, function(res) {
vue.dataList = res.data.list;
// 分页
vue.dataList = res.data.list; // 更新列表数据
// 初始化分页组件
laypage.render({
elem: 'pager',
count: res.data.total,
limit: vue.searchForm.limit,
groups: 3,
layout: ["prev", "page", "next"],
elem: 'pager', // 分页容器ID
count: res.data.total, // 总记录数
limit: vue.searchForm.limit, // 每页数量
groups: 3, // 显示页码数量
layout: ["prev", "page", "next"], // 分页布局
jump: function(obj, first) {
vue.searchForm.page = obj.curr;//翻页
//首次不执行
if (!first) {
if (!first) { // 非首次加载（用户点击分页）
vue.searchForm.page = obj.curr; // 更新当前页码
http.request('yonghu/list', 'get', vue.searchForm, function(res1) {
vue.dataList = res1.data.list;
})
vue.dataList = res1.data.list; // 重新加载数据
});
}
}
});
});
}
});
pageList(); // 初始化加载列表数据
window.xznSlide = function () {
jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
jQuery("#ifocus").slide({
titCell: "#ifocus_btn li",
mainCell: "#ifocus_piclist ul",
effect: "leftLoop",
delayTime: 200,
autoPlay: true,
triggerTime: 0
// 搜索按钮点击事件
$('#btn-search').click(function() {
vue.searchForm.page = 1; // 重置为第一页
pageList(); // 重新加载列表
});
jQuery("#ifocus").slide({titCell: "#ifocus_btn li", mainCell: "#ifocus_tx ul", delayTime: 0, autoPlay: true});
jQuery(".product_list").slide({
mainCell: ".bd ul",
autoPage: true,
effect: "leftLoop",
autoPlay: true,
vis: 5,
trigger: "click",
interTime: 4000
});
// 滑动插件初始化（兼容旧版滑动效果）
window.xznSlide = function () {
$(".banner").slide({mainCell: ".bd ul", autoPlay: true, interTime: 5000});
};
</script>
</body>

343
target/classes/front/front/pages/yonghu/register.html
Unescape View File

@ -1,216 +1,291 @@
<!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>
<!-- 引入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" />
<!-- 自定义注册页面样式 -->
<style type="text/css">
/* 注册页面整体容器，全屏背景图 */
.register {
display: flex;
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);
height: 100vh; /* 占满视口高度 */
background-attachment: fixed; /* 背景图固定 */
background-size: cover; /* 背景图覆盖整个容器 */
background-position: center; /* 背景图居中 */
background-image: url(/yiyuanguanhaojiuzhen/img/front-img-bg.jpg); /* 背景图片路径 */
}
/* 注册表单样式 */
.register form {
box-sizing: border-box;
min-height: 400px;
display: flex;
display: flex; /* 弹性垂直布局 */
flex-direction: column;
justify-content: center !important;
}
.register .logo, .register .title {
box-sizing: border-box;
}
.register .logo img {
display: block;
justify-content: center; /* 内容垂直居中 */
padding: 20px;
background-color: #fff; /* 白色背景 */
border-radius: 20px; /* 圆角 */
width: 400px; /* 固定表单宽度 */
}
/* 表单标题样式 */
.register .title {
text-align: center;
text-align: center; /* 文本居中 */
font-size: 17px; /* 字体大小 */
color: red; /* 红色标题 */
margin: 10px auto; /* 上下边距，水平居中 */
}
/* 表单项容器样式 */
.register .form-item {
display: flex;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
display: flex; /* 弹性布局，标签和输入框同行显示 */
align-items: center; /* 垂直居中 */
flex-wrap: wrap; /* 换行支持 */
margin-bottom: 15px; /* 底部边距 */
width: 100%; /* 占满表单宽度 */
}
.register .form-item input, .register .form-label {
box-sizing: border-box;
/* 输入框通用样式 */
.register .layui-input {
padding: 0 10px;
height: 44px; /* 固定高度 */
border: 1px solid rgba(135, 206, 250, 1); /* 蓝色边框 */
border-radius: 8px; /* 圆角 */
font-size: 14px; /* 字体大小 */
}
.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;
/* 提交按钮样式 */
.btn-submit {
width: 60%; /* 按钮宽度 */
margin: 10px auto; /* 水平居中 */
background-color: var(--publicMainColor); /* 主题背景色 */
color: #fff; /* 白色文字 */
border-radius: 8px; /* 圆角 */
height: 44px; /* 固定高度 */
}
</style>
</head>
<body>
<!-- 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="username" name="username" placeholder="请输入账户" autocomplete="off" class="layui-input">
<form class="layui-form login-form" lay-filter="myForm"
:style='{
"padding": "20px",
"backgroundColor": "#fff",
"borderRadius": "20px",
"width": "400px"
}'>
<!-- 页面标题 -->
<p class="title" :style='{"color": "red", "fontSize": "17px"}'>用户注册</p>
<!-- 账户输入框 -->
<div class="form-item layui-form-text">
<input :style='{"width": "100%"}'
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 class="form-item layui-form-text">
<input type="password"
lay-verify="password1|required"
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 class="form-item layui-form-text">
<input type="password"
lay-verify="password2|required"
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="yonghuName" name="yonghuName" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
<!-- 用户姓名输入框 -->
<div class="form-item layui-form-text">
<input lay-verify="required"
type="text"
id="yonghuName"
name="yonghuName"
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="yonghuPhone" name="yonghuPhone" placeholder="请输入用户手机号" autocomplete="off" class="layui-input">
<!-- 手机号输入框（带格式校验） -->
<div class="form-item layui-form-text">
<input lay-verify="phone|required"
type="text"
id="yonghuPhone"
name="yonghuPhone"
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="identity|required" type="text" id="yonghuIdNumber" name="yonghuIdNumber" placeholder="请输入用户身份证号" autocomplete="off" class="layui-input">
<!-- 身份证号输入框（带格式校验） -->
<div class="form-item layui-form-text">
<input lay-verify="identity|required"
type="text"
id="yonghuIdNumber"
name="yonghuIdNumber"
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="yonghuEmail" name="yonghuEmail" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
<!-- 邮箱输入框（带格式校验） -->
<div class="form-item layui-form-text">
<input lay-verify="email|required"
type="text"
id="yonghuEmail"
name="yonghuEmail"
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="sexTypes" id="sexTypes">
<!-- 性别选择下拉框（动态加载字典数据） -->
<div>
<select name="sexTypes" id="sexTypes" class="layui-input">
<option value="">请选择性别</option>
<option v-for="(item,index) in sexTypesList" :value="item.codeIndex" :key="item.codeIndex">{{ item.indexName }}</option>
<!-- 动态渲染性别选项，数据来自Vue的sexTypesList -->
<option v-for="(item, index) in sexTypesList"
:value="item.codeIndex"
:key="item.codeIndex">
{{ item.indexName }}
</option>
</select>
</div>
</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>
<!-- 注册按钮，触发表单提交 -->
<button class="layui-btn layui-btn-fluid layui-btn-danger btn-submit"
lay-submit
lay-filter="register"
:style='{"width": "280px"}'>
注册
</button>
<!-- 跳转登录链接 -->
<p class="txt">
<a href="javascript:window.location.href='../login/login.html'">已有账号登录</a>
</p>
</form>
</div>
<!-- 引入layui框架核心脚本 -->
<script src="../../layui/layui.js"></script>
<!-- 引入Vue.js框架 -->
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<!-- 引入Element组件库（用于下拉框等组件） -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<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实例
var vue = new Vue({
el: '#app',
el: '#app', // 绑定根元素
data: {
sexTypesList : [],
sexTypesList: [] // 存储性别选项数据（从字典表获取）
},
updated: function() {
updated() {
// 表单更新后重新渲染layui表单组件（如下拉框）
layui.form.render(null, 'myForm');
},
}
});
layui.use(['layer', 'element', 'carousel', 'form', 'http', 'jquery'], function() {
var layer = layui.layer;
var element = layui.element;
var carousel = layui.carousel;
var form = layui.form;
var http = layui.http;
var jquery = layui.jquery;
layui.use(['layer', 'form', 'http', 'jquery'], function() {
var layer = layui.layer; // 弹出层组件
var form = layui.form; // 表单组件
var http = layui.http; // HTTP请求工具
var jquery = layui.jquery; // jQuery库
// 获取URL中的表名参数（用于接口路径）
var tablename = http.getParam('tablename');
//字典表数据容器
// 性别的查询和初始化
sexTypesSelect();
// 日期效验规则及格式
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对象
// 密码一致性校验（两次输入需一致）
password1: function(value) {
var password2 = jquery("#password2").val();
if(password2 != null && password2 != "" && password2 != "null"){
if(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 '密码的两次密码不一致';
if (password2 && value !== password2) {
return '两次输入的密码不一致';
}
},
password2: function(value) {
var password1 = jquery("#password").val();
if (password1 && value !== password1) {
return '两次输入的密码不一致';
}
}
});
// 注册
// ------------------------
// 注册表单提交处理
// ------------------------
form.on('submit(register)', function(data) {
data = data.field;
http.requestJson(tablename + '/register', 'post', data, function(res) {
// 组装提交数据
var formData = data.field;
// 发送注册请求
http.requestJson(`${tablename}/register`, 'post', formData, function(res) {
if (res.code === 0) {
layer.msg('注册成功', {
time: 2000,
icon: 6
time: 2000, // 显示2秒
icon: 6 // 成功图标
}, function() {
// 路径访问设置
// 注册成功后跳转登录页
window.location.href = '../login/login.html';
});
} else {
layer.msg(res.msg, { icon: 5 }); // 错误提示
}
});
return false
return false; // 阻止表单默认提交
});
// 日期框初始化
function dateTimePick(){
};
// 性别的查询
// ------------------------
// 加载性别选项数据（来自字典表）
// ------------------------
function sexTypesSelect() {
//填充下拉框选项
http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=sex_types", "GET", {}, (res) => {
if(res.code == 0){
vue.sexTypesList = res.data.list;
// 请求字典表数据（性别类型）
http.request("dictionary/page?dicCode=sex_types", "GET", {}, function(res) {
if (res.code === 0) {
vue.sexTypesList = res.data.list; // 更新Vue数据
form.render('select'); // 重新渲染下拉框
}
});
}
sexTypesSelect(); // 初始化加载性别数据
});
</script>
</body>

Write Preview
Loading…
Cancel
Save