尚医通医药挂号项目-后台管理(前端)

最新推荐文章于 2023-07-29 13:48:27 发布

一码一上午

最新推荐文章于 2023-07-29 13:48:27 发布

阅读量346

点赞数

分类专栏：项目文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_52565945/article/details/131042707

版权

项目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.简介

使用github上的模板 vue-element-admin来搭建前端环境
注意node版本不要超过16,不然很多问题。

2.项目部署

克隆项目

克隆项目到本地
git clone https://github.com/PanJiaChen/vue-element-admin.git
进入项目目录
cd vue-element-admin

安装一些环境(安装依赖时需要)

# 安装依赖
npm install -g node-gyp
npm install cnpm@7.1.0 -g
cnpm install node-sass
# 配置python环境和依赖环境
npm config set python "E:\python\python-3.10.3\python.exe"
npm config set node_gyp "E:\nodejs\node-v15.6.0-win-x64\node_global\node_modules\node-gyp\bin\node-gyp.js"

安装依赖

npm install

启动项目

npm run dev

3.模块开发

一、医院设置模块

医院设置分页查询

添加医院设置路由(根据模板复制修改)

  {
    path: '/hospSet',// 导航栏路径
    component: Layout,
    redirect: '/hospSet/list', // 页面默认首页
    name: '医院设置管理',// 导航栏名称(只是属性)
    meta: { title: '医院设置管理', icon: 'example' }, // 导航栏标题(显示的那个)和图标
    children: [
      {
        path: 'list', // 设置子页面路径
        name: '医院设置列表', // 子页面名称
        component: () => import('@/views/hospset/list'), // 子页面跳转路径
        meta: { title: '医院设置列表', icon: 'table' }// 子页面标题和图标
      },
      {
        path: 'add', // 设置子页面路径
        name: '医院设置添加',// 子页面名称
        component: () => import('@/views/hospset/add'),// 子页面跳转路径
        meta: { title: '医院设置添加', icon: 'tree' }// 子页面标题和图标
      }
    ]
  },

使用vue创建两个页面，分别是医院设置列表和医院设置添加，然后设置页面跳转路径
注：@/表示src目录下
在api文件夹中创建js文件，定义接口路径

import request from '@/utils/request';

// 使用es6模块化开发

// 获取医院设置分页查询数据
export default {
  getHospsetList(current, limit, searchObj) {
    return request({
      url: `/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,
      method: 'post',
      data: searchObj
    });
  }
};

在list.vue文件中编写发送请求，然后利用elementUI将数据展示出来。

<template>
    <div class="app-container" >

        <!-- 搜索表单 -->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="searchObj.hoscode" placeholder="医院编号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getList()">查询</el-button>
            </el-form-item>
        </el-form>


        <!-- 表格 -->
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="序号" width="50"></el-table-column>
            <el-table-column prop="hosname" label="医院名称"></el-table-column>
            <el-table-column prop="hoscode" label="医院编号"></el-table-column>
            <el-table-column prop="apiUrl" label="api基础路径" width="200"></el-table-column>
            <el-table-column prop="contactsName" label="联系人姓名"></el-table-column>
            <el-table-column prop="contactsPhone" label="联系人手机号"></el-table-column>
            <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
                {{ scope.row.status === 1 ? '可用' : '不可用' }}
            </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            @size-change="updateLimit"
            @current-change="getList"
            :current-page="current"
            :page-sizes="[1, 2, 3, 4,5,10,15,20]"
            :page-size="limit"
            style="padding: 30px 0; text-align: center;"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>

// 引入接口文件
import hospset from '@/api/hospset'

// 逻辑
export default{
    // 定义变量和初始值
    data(){
        return{
            current:1,// 当前页
            limit:3, // 默认每页显示记录数
            searchObj:{},// 条件封装对象
            list:[],// 每页数据集合
            total:0 // 总记录数
        }
    },
    // 定义方法
    methods:{
        getList(page=1){// 设置形参为page，默认值为1，默认查询第一页
            this.current = page// 根据页码来查询数据,顺便修改当前页面值
            hospset.getHospsetList(this.current,this.limit,this.searchObj)
            .then(response => {// 请求成功
                this.list= response.data.records,
                this.total = response.data.total
            })
            .catch(error => {// 请求失败
                console.log(error);
            })
        },
        // 页面每页显示数变化时，修改limit
        updateLimit(size){
            this.limit = size
            this.getList()
        }
    },
    // 页面渲染时自动调用
    created(){
        this.getList()
    }
}

</script>

医院设置删除功能

添加按钮。

<!-- 删除按钮 -->
<el-table-column label="操作" align="center">
    <template slot-scope="scope">
        <el-button type="danger" size="mini" @click="removeDataById(scope.row.id)">删除</el-button>
    </template>
</el-table-column>

在api中定义删除接口。

// 删除医院设置
deleteById(id) {
return request({
  url: `/admin/hosp/hospitalSet/${id}`,
  method: 'delete'
});
},

删除时提醒用户是否删除，然后调用删除接口。删除成功，刷新页面。(最好是当前页刷新)

// 删除医院设置
removeDataById(id){
    this.$confirm('此操作将永久删除该医院配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 删除
        hospset.deleteById(id)
        .then(response => {
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            // 删除成功
            this.getList(1);//刷新页面
        })
    }).catch(error => {
        this.$message({
            type: 'info',
            message: '取消操作成功!'
        });
    })
},

医院设置批量删除功能

表格里实现多选手动添加一个el-table-column，设type属性为selection即可。

<!-- 复选框 -->
<el-table-column type="selection" width="55"/>

表格里添加@selection-change="handleSelectionChange"事件，当有选中变化时触发该方法。

<!-- 表格 -->
<el-table :data="list" style="width: 100%" @selection-change="handleSelectionChange">

在api中定义批量删除接口，给后端批量删除接口发送请求。

  // 批量删除医院设置
  deleteByList(list) {
    return request({
      url: `/admin/hosp/hospitalSet/batchRemove`,
      method: 'delete',
      data: list
    });
  },

添加id数组idList。

// 定义变量和初始值
data(){
    return{
        current:1,// 当前页
        limit:3, // 默认每页显示记录数
        searchObj:{},// 条件封装对象
        list:[],// 每页数据集合
        total:0, // 总记录数
        idList:[]// 批量选中的id
    }
},

vue文件里编写handleSelectionChange方法处理复选框数据，将id收集到数组idList中。

// 根据复选框将选中id存入idList
handleSelectionChange(select){
    // 遍历选中数据，获取id
    for(var i=0;i<select.length;i++) {
        this.idList.push(select[i].id)
    }
},

vue文件里写批量删除方法，根据idList调用api接口中的批量删除方法。

//批量删除
removeDataByIds(){
    this.$confirm('此操作将永久删除该医院配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        hospset.deleteByList(this.idList)
        .then(response => {
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            // 删除成功
            this.getList(1);//刷新页面
        })
    }).catch(error => {
        this.$message({
            type: 'info',
            message: '取消操作成功!'
        });
    })
    
},

医院设置锁定和取消锁定功能

根据数据库中的状态值显示开关状态

加入组件

 <!-- 开关 -->
<el-table-column prop="status" label="状态">
    <template slot-scope="scope">
        <el-tooltip :content="'Switch value: ' + scope.row.status" placement="top">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#C0C4CC"
                :active-value="1"
                :inactive-value="0"
                @change="lockChange(scope.row)">
            </el-switch>
        </el-tooltip>
    </template>
</el-table-column>

开关状态改变时调用方法

// 锁定和取消锁定
lockChange(row){
    hospset.lockChange(row.id,row.status)
    .then(response => {
        // 状态修改成功，当前页刷新页面
        this.getList(this.current)
    }).catch(error => {
        console.log(error)
    })
}

api中定义接口路径

// 锁定和取消锁定
lockChange(id, status) {
  return request({
    url: `/admin/hosp/hospitalSet/lockHospitalSet/${id}/${status}`,
    method: 'put',
  });
}

医院设置添加功能

添加表单组件。

<!-- 医院设置添加表单 -->
<el-form class="form" :label-position="labelPosition" label-width="120px"  :model="hospset">
    <el-form-item label="医院名称" >
        <el-input v-model="hospset.hosname" ></el-input>
    </el-form-item>
    <el-form-item label="医院编号" >
        <el-input v-model="hospset.hoscode" ></el-input>
    </el-form-item>
    <el-form-item label="api基础路径" >
        <el-input v-model="hospset.apiUrl" ></el-input>
    </el-form-item>
    <el-form-item label="联系人姓名" >
        <el-input v-model="hospset.contactsName" ></el-input>
    </el-form-item>
    <el-form-item label="联系人手机号" >
        <el-input v-model="hospset.contactsPhone" ></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="saveOrUpdate()">保存</el-button>
        <el-button>取消</el-button>
    </el-form-item>
</el-form>

在api中定义添加接口路径。

// 添加医院设置
addHosp(hospitalSet) {
  return request({
    url: `/admin/hosp/hospitalSet/saveHospitalSet`,
    method: 'post',
    data: hospitalSet
  });
},

点击保存时判断数据模型是否有id，如果没有id，调用保存方法。

// 添加医院设置
save(){
    hospset.addHosp(this.hospset)
    .then(response => {
        this.$message({
            showClose: true,
            message: '新增医院设置成功！',
            type: 'success'
        });
        //跳转列表页面，使用路由跳转方式实现
        this.$router.push({path:'/hospset/list'})
    })
    .catch(error => {
        this.$message({
            showClose: true,
            message: '新增医院设置失败，请重试！',
            type: 'error'
        });
    })
},
saveOrUpdate(){
    if(!this.hospset.id){
        // 没有id,保存
        this.save()
    }else{
        // 有id,更新
        this.Update()
    }
}

bug修复功能
组件重用问题(点完修改的数据回显影响新增数据)。

<router-view :key="key"></router-view>

// 每次路由生成一个随机值，这样路由过去都能刷新页面
key() {
  return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
}

医院设置修改功能

添加路由跳转按钮，携带id跳转至隐藏路由。

<!-- 修改按钮，点击路由自动跳转 -->
<router-link :to="'/hospSet/edit/'+scope.row.id">
    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
</router-link>

在api中定义修改和数据回显接口路径。

// 根据id回显数据
getById(id) {
  return request({
    url: `/admin/hosp/hospitalSet/getHospSet/${id}`,
    method: 'get'
  });
},

// 修改医院设置
updataHospSet(hospitalSet) {
  return request({
    url: `/admin/hosp/hospitalSet/updateHospitalSet`,
    method: 'post',
    data: hospitalSet
  });
}

在index.js中添加隐藏路由，设置路径为edit/:id,并指向新增页面。

// 设置一个隐藏路由用来修改医院设置
{
  path: 'edit/:id', // 设置页面路径和待传入参数id
  name: '医院设置修改', // 子页面名称
  component: () => import('@/views/hospset/add'), // 子页面跳转路径
  meta: { title: '医院设置修改', noCache: true }, // 子页面标题和图标
  hidden:true
}

新增页面渲染之前created方法判断路由中是否有id，如果有，调用数据回显，将数据绑定到模型进行回显。

created(){
    // 判断路由中是否含有参数
    if(this.$route.params && this.$route.params.id){
        const id = this.$route.params.id
        // 数据回显
        hospset.getById(id)
        .then(response => {
            this.hospset = response.data
        }).catch(error => {
            this.$message({
                showClose: true,
                message: '数据回显失败，请刷新页面！',
                type: 'error'
            });
        })
    }
}

点击保存时判断数据模型是否有id，如果有id，调用更新方法。

// 修改医院设置
Update(){
    hospset.updataHospSet(this.hospset)
    .then(response => {
        this.$message({
            showClose: true,
            message: '修改医院设置成功！',
            type: 'success'
        });
        //跳转列表页面，使用路由跳转方式实现
        this.$router.push({path:'/hospset/list'})
    })
    .catch(error => {
        this.$message({
            showClose: true,
            message: '修改医院设置失败，请重试！',
            type: 'error'
        });
    })
},

saveOrUpdate(){
    if(!this.hospset.id){
        // 没有id,保存
        this.save()
    }else{
        // 有id,更新
        this.Update()
    }
}

二、数据字典模块

列表显示

添加路由。

  //  数据字典路由
  {
    path: '/dict',
    component: Layout,
    redirect: '/dict/dict',
    name: '数据管理',
    alwaysShow: true, // 设置子页面只有一个也会显示导航栏
    meta: { title: '数据管理', icon: 'example' },
    children: [
      {
        path: 'dict',
        name: '数据字典',
        component: () => import('@/views/dict/dict'),
        meta: { title: '数据字典', icon: 'table' }
      }
    ]
  },

在api文件夹中新建js文件。

import request from '@/utils/request'

export default {

    // 根据id查询子数据
    getDict(id) {
        return request({
            url: `/admin/hosp/dict/findById/${id}`,
            method: 'get'
        });
    }
}

页面处理

新建列表展示页面。
在页面中添加表格组件。
完善页面获取数据逻辑。

<template>
    <div >
        <el-table
            :data="dict"
            style="width: 90%"
            row-key="id"
            border
            lazy
            :load="load"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            class="table">
            <el-table-column
            prop="dict.name"
            label="名称">
                <template slot-scope="{row}">
                    {{ row.name }}
                </template>
            </el-table-column>
            <el-table-column
            prop="dict.dictCode"
            label="编码">
                <template slot-scope="{row}">
                    {{ row.dictCode }}
                </template>
            </el-table-column>
            <el-table-column
            prop="dict.id"
            label="值">
                <template slot-scope="{row}">
                    {{ row.id }}
                </template>
            </el-table-column>
            <el-table-column
            prop="dict.updateTime"
            label="创建时间">
                <template slot-scope="{row}">
                    {{ row.updateTime }}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style>
    .table{
        margin: 50px auto;
    }
</style>

<script>
import dict from '@/api/dict'

export default{
    data(){
        return{
            dict:[]
        }
    },
    methods:{
        // 根据id获取子数据
        getDictList(id){
            dict.getDict(id)
            .then(response => {
                this.dict = response.data
            }).catch(error => {
                this.$message({
                    showClose: true,
                    message: '数据加载失败，请刷新重试！',
                    type: 'error'
                });
            })
        },

        // 懒加载方法
        load(tree, treeNode, resolve) {
            // 调用api接口
            dict.getDict(tree.id).then(response => {
                resolve(response.data)
            })
        }
    },
    created(){
        this.getDictList(1)
    }
}


</script>

数据字典导出和导入

添加导入导出按钮调用后端组件，导出直接a标签发送请求。

<!-- 导入导出按钮 -->
<el-row type="flex" justify="start" align="end" style="padding: 40px 0 0 90px;">
    <a href="http://localhost:8202/admin/hosp/dict/export">
        <el-button type="text" >导出</el-button>
    </a>
    <el-button type="text" @click="importData()" >导入</el-button>
</el-row>

导入加入Dialog弹框组件和upload文件上传组件。

<!-- Dialog对话框组件 -->
<el-dialog title="导入" :visible.sync="dialogFormVisible">
    <!-- 文件上传组件 -->
    <el-upload
        action="http://localhost:8202/admin/hosp/dict/import"
        :on-success="handleSuccess">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传Excel文件，且不超过500kb</div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
</el-dialog>

导入导出方法

// 数据导入
importData(){
    this.dialogFormVisible = true
},

// 文件上传成功
handleSuccess(){
    // 刷新页面
    this.getDictList(1);
}

配置nginx

配置文件中添加代理

    server {
	    listen       9001;
	    server_name  localhost;

	    location ~ /hosp/ {           
	      proxy_pass http://localhost:8201;
	    }
	    
	    location ~ /dict/ {           
	      proxy_pass http://localhost:8202;
	    }
	}

修改前端页面路径。

BASE_API: '"http://localhost:9001"'

三、医院管理模块

医院列表分页查询(难点)

省市二级联动
根据dict_code查询省id，根据省id查询所有省份

四、排班管理模块

科室列表

添加排班按钮，跳转路由

<!-- 排班 -->
<router-link :to="'/hospSet/department/' + scope.row.hoscode">
    <el-button type="primary" size="mini">排班</el-button>
</router-link>

添加隐藏路由

// 排班
{
    path: 'department/:hoscode', // 设置页面路径和待传入参数id
    name: '医院详情', // 子页面名称
    component: () => import('@/views/hosp/department'), // 子页面跳转路径
    meta: { title: '医院详情', noCache: true }, // 子页面标题和图标
    hidden: true
}

新建路由跳转页面

<template>
    <div class="app-container">
        <div style="margin-bottom: 10px;font-size: 10px;">选择：</div>
        <el-container style="height: 100%">
            <el-aside width="200px" style="border: 1px silver solid">
                <!-- 部门 -->
                <el-tree :data="list" :props="defaultProps"> </el-tree>
            </el-aside>
            <el-main style="padding: 0 0 0 20px;">
                <el-row style="width: 100%">
                    <!-- 排班日期 分页 -->
                </el-row>
                <el-row style="margin-top: 20px;">
                    <!-- 排班日期对应的排班医生 -->
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>



<script>
import hosp from '@/api/hosp';

export default {
    data() {
        return {
            list: [],
            defaultProps: {
                children: 'children',
                label: 'depname'
            }
        };
    },

    methods: {
        // 根据医院编码获取科室信息
        getDepartment(hoscode) {
            hosp.getDepartmentByHoscode(hoscode)
                .then((response) => {
                    this.list = response.data;
                })
                .catch((error) => {
                    console.log(error);
                });
        }
    },
    created() {
        const hoscode = this.$route.params.hoscode;
        this.getDepartment(hoscode);
    }
};
</script>


<style>
/* 添加树形数据选中效果 */
.el-tree-node.is-current > .el-tree-node__content {
    background-color: #409eff !important;
    color: white;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
    color: black;
}
</style>

api定义方法获取树形数据

// 根据医院编号获取所有科室信息
getDepartmentByHoscode(hoscode) {
    return request({
        url: `/admin/hosp/department/getAllDepartment/${hoscode}`,
        method:'get'
    });
}

排版日期分页列表

根据排版日期获取排班详情列表

页面

<template>
    <div class="app-container">
        <div style="margin-bottom: 10px;font-size: 10px;">
            选择：{{ baseMap.hosname }} / {{ depname }} / {{ workDate }}
        </div>
        <el-container style="height: 100%">
            <el-aside width="200px" style="border: 1px silver solid">
                <!-- 部门 -->
                <el-tree :data="data" :props="defaultProps" :default-expand-all="true" @node-click="handleNodeClick">
                </el-tree>
            </el-aside>
            <el-main style="padding: 0 0 0 20px;">
                <el-row style="width: 100%">
                    <!-- 排班日期 分页 -->
                    <el-tag
                        v-for="(item, index) in bookingScheduleList"
                        :key="item.id"
                        @click="selectDate(item.workDate, index)"
                        :type="index == activeIndex ? '' : 'info'"
                        style="height: 60px;margin-right: 5px;margin-right:15px;cursor:pointer;"
                    >
                        {{ item.workDate }} {{ item.dayOfWeek }}<br />
                        {{ item.availableNumber }} / {{ item.reservedNumber }}
                    </el-tag>

                    <!-- 分页 -->
                    <el-pagination
                        :current-page="page"
                        :total="total"
                        :page-size="limit"
                        class="pagination"
                        layout="prev, pager, next"
                        @current-change="getPage"
                    >
                    </el-pagination>
                </el-row>

                <el-row style="margin-top: 20px;">
                    <!-- 排班日期对应的排班医生 -->
                    <el-table :data="scheduleList" border fit highlight-current-row>
                        <el-table-column label="序号" width="60" align="center">
                            <template slot-scope="scope">
                                {{ scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column label="职称" width="150">
                            <template slot-scope="scope">
                                {{ scope.row.title }} | {{ scope.row.docname }}
                            </template>
                        </el-table-column>
                        <el-table-column label="号源时间" width="80">
                            <template slot-scope="scope">
                                {{ scope.row.workTime == 0 ? '上午' : '下午' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="reservedNumber" label="可预约数" width="80" />
                        <el-table-column prop="availableNumber" label="剩余预约数" width="100" />
                        <el-table-column prop="amount" label="挂号费(元)" width="90" />
                        <el-table-column prop="skill" label="擅长技能" />
                    </el-table>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import hosp from '@/api/hosp'
export default {
    data() {
        return {
            data: [],
            defaultProps: {
                children: 'children',
                label: 'depname'
            },
            hoscode: null,
            activeIndex: 0,
            depcode: null,
            depname: null,
            workDate: null,

            bookingScheduleList: [],
            baseMap: {},

            page: 1, // 当前页
            limit: 7, // 每页个数
            total: 0, // 总页码

            scheduleList: [] //排班详情
        };
    },
    created() {
        this.hoscode = this.$route.params.hoscode;
        this.workDate = this.getCurDate();
        this.fetchData();
    },
    methods: {
        //查询排班详情
        getDetailSchedule() {
            hosp.getScheduleDetail(this.hoscode, this.depcode, this.workDate).then((response) => {
                this.scheduleList = response.data;
            });
        },

        fetchData() {
            hosp.getDepartmentByHoscode(this.hoscode).then((response) => {
                this.data = response.data;
                // 默认选中第一个
                if (this.data.length > 0) {
                    this.depcode = this.data[0].children[0].depcode;
                    this.depname = this.data[0].children[0].depname;

                    this.getPage();
                }
            });
        },
        getPage(page = 1) {
            this.page = page;
            this.workDate = null;
            this.activeIndex = 0;
            this.getScheduleRule();
        },

        getScheduleRule() {
            hosp.getScheduleRule(this.page, this.limit, this.hoscode, this.depcode).then((response) => {
                this.bookingScheduleList = response.data.bookingScheduleRuleList;

                this.total = response.data.total;

                this.scheduleList = response.data.scheduleList;
                this.baseMap = response.data.baseMap;

                // 分页后workDate=null，默认选中第一个
                if (this.workDate == null) {
                    this.workDate = this.bookingScheduleList[0].workDate;
                }
                //调用查询排班详情
                this.getDetailSchedule();
            });
        },

        handleNodeClick(data) {
            // 科室大类直接返回
            if (data.children != null) return;
            this.depcode = data.depcode;
            this.depname = data.depname;

            this.getPage(1);
        },

        selectDate(workDate, index) {
            this.workDate = workDate;
            this.activeIndex = index;
            //调用查询排班详情
            this.getDetailSchedule();
        },

        getCurDate() {
            var datetime = new Date();
            var year = datetime.getFullYear();
            var month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate();
            return year + '-' + month + '-' + date;
        }
    }
};
</script>
<style>
.el-tree-node.is-current > .el-tree-node__content {
    background-color: #409eff !important;
    color: white;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
    color: black;
}
</style>

接口

import request from '@/utils/request';

export default {
    // 获取医院列表
    getHospList(page, list, searchObj) {
        return request({
            url: `/admin/hosp/hospital/list/${page}/${list}`,
            method: 'get',
            params: searchObj
        });
    },

    // 根据dictcode查出省id，然后根据省id查询所有省
    getProvince(dictcode) {
        return request({
            url: `/admin/dict//findByDictcode/${dictcode}`,
            method: 'get'
        });
    },

    // 根据id查询子数据
    getChildren(id) {
        return request({
            url: `/admin/dict/findById/${id}`,
            method: 'get'
        });
    },

    // 修改医院状态
    updateStatus(id, status) {
        return request({
            url: `/admin/hosp/hospital/updateStatus/${id}/${status}`,
            method: 'get'
        });
    },

    // 根据id查询医院信息
    getHospData(id) {
        return request({
            url: `/admin/hosp/hospital/showHosp/${id}`,
            method: 'get'
        });
    },

    // 根据医院编号获取所有科室信息
    getDepartmentByHoscode(hoscode) {
        return request({
            url: `/admin/hosp/department/getAllDepartment/${hoscode}`,
            method: 'get'
        });
    },

    // 获取排班规则数据
    getScheduleRule(page, limit, hoscode, depcode) {
        return request({
            url: `/admin/hosp/schedule/getScheduleList/${page}/${limit}/${hoscode}/${depcode}`,
            method: 'get'
        });
    },

    //查询排班详情
    getScheduleDetail(hoscode, depcode, workDate) {
        return request({
            url: `/admin/hosp/schedule/getScheduleDetail/${hoscode}/${depcode}/${workDate}`,
            method: 'get'
        });
    }
};