项目实训（三十）——管理员端对医生排班

要想实现预约挂号，首先我们应该拿到医生的工作信息，即排班时间。

所以这里通过我开发的管理员端的排班管理实现医生排班。

本来是想网页端与小程序端分开讲但这一步的联系确实是紧密的不可分割了。

我们通过管理员端获取到医生的信息，对医生实现排班操作。

前端代码：

<template>
  <div class="table_container">
    <el-form :model="searchForm"  ref="searchForm">
      <el-row :gutter="20" style="margin-top: 10px">
        <el-col :span="12"><div class="grid-content bg-purple">
          <el-autocomplete
              class="inline-input"
              v-model="searchForm.name"
              :fetch-suggestions="querySearch"
              placeholder="请输入医生名称"
              :trigger-on-focus="true"
              @select="handleSelect"
          ></el-autocomplete>
        </div>
        </el-col>

        <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:-400px">
          <el-button type="primary" round @click="submitForm">搜索</el-button>
        </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple" style="margin-left:-600px">
          <el-button type="primary" round @click="showAll">显示全部医生</el-button>
        </div>
        </el-col>
      </el-row>
    </el-form>
    <el-table
        :header-cell-class-name="headerBg"
        :row-class-name="rowBg"
        :data="tableData"
        highlight-current-row
        @row-click="handleRowClick"
        style="width: 100% ;margin-top: 20px;  background-image:url('../../src/assets/imgs/bj.png') ;
        background-size: 100% 100%;">
      <el-table-column property="id" label="医生工号" ></el-table-column>
      <el-table-column property="name" label="医生姓名"></el-table-column>
      <el-table-column property="depName" label="所在科室"></el-table-column>
      <el-table-column property="position" label="医生职位"></el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="openDialog(scope.row)">管理排班</el-button>

          <el-button size="mini" type="danger" @click="deleteDoctor(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="医生工号">
        {{this.form.doc_id}}
        </el-form-item>
        <el-form-item
            label="排班日期"
            :label-width="formLabelWidth"
            prop="date"
        >
          <el-date-picker
              v-model="form.date"
              format="yyyy 年 MM 月 dd日"
              value-format="yyyy-MM-dd"
              align="right"
              type="date"
              placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上午排班">
          <el-col :span="8">
            <el-time-select
                style="width: 120px"
                placeholder="起始时间"
                v-model="form.date1"
                :picker-options="{
start: '08:00',
step: '00:30',
end: '12:00'
}">
            </el-time-select>
          </el-col>
          <el-col :span="8">
            <el-time-select
                style="width: 120px;margin-left: 30px"
                placeholder="结束时间"
                v-model="form.date2"
                :picker-options="{
start: '08:00',
step: '00:30',
end: '12:00'
}">
            </el-time-select>
          </el-col>
        </el-form-item>
        <el-form-item label="下午排班">
          <el-col :span="8">
            <el-time-select
                style="width: 120px"
                placeholder="起始时间"
                v-model="form.date3"
                :picker-options="{
start: '14:00',
step: '00:30',
end: '20:00'
}">
            </el-time-select>
          </el-col>
          <el-col :span="8">
            <el-time-select
                style="width: 120px;margin-left: 30px"
                placeholder="起始时间"
                v-model="form.date4"
                :picker-options="{
start: '14:00',
step: '00:30',
end: '20:00'
}">
            </el-time-select>
          </el-col>
        </el-form-item>
        <el-form-item label="挂号性质">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="普通号" name="type"></el-checkbox>
            <el-checkbox label="专家号" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"  @click="onSubmit('form')">确 定</el-button>
      </div>
    </el-dialog>
    <div class="Pagination" style="text-align: left;margin-top: 10px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>
  </div>
</template>
<script>

  import axios from 'axios';
  import { Message } from 'element-ui';
  export default {
  data() {
  return {
  formLabelWidth: "80px",
  form: {
  doc_id: '',
  date:'',
  date1: '',
  date2:  '',
  date3:'',
  date4:'',
  type: [],
},
  dialogVisible: false,
  tableData: [],
  searchForm: {
  name: ''
},
  count: 0,
  currentPage: 1,
  pagesize: 10,
};
},
  mounted() {
  this.fetchItems();
},
  methods: {
  deleteDoctor(id) {
  const params = {
  doc_id: id,
}
  if (confirm("Are you sure you want to delete this doctor?")) {
  axios.get('http://localhost:18080/user/deleteDoctor', { params })
  .then(response => {
  console.log(response.data)
  alert("Doctor deleted successfully");
  this.fetchItems(); // Refresh the list of doctors
});
}
},
  headerBg() {
  return 'headerBg';
},
  rowBg() {
  return 'headerBg';
},
  handleCurrentChange(val) {
  this.currentPage = val;
  this.fetchItems();
},
  handleSizeChange(val) {
  this.pagesize = val;
  this.fetchItems();
},
  async querySearch(queryString, cb) {
  var houseNumberList = this.searchForm.name;
  let results = queryString ? Object.values(houseNumberList).filter(this.createFilter(queryString)) : houseNumberList;

  clearTimeout(this.timeout);
  this.timeout = setTimeout(() => {
  cb(results);
}, 1000 * Math.random());
},
  async showAll() {
  this.fetchItems();
},
    openDialog(row) {
      this.form.doc_id = row.id;
      this.dialogVisible = true;
    },
    onSubmit() {
      const params = {
        doc_id: this.form.doc_id,
        work_day: this.form.date,
        date1: this.form.date1,
        date2: this.form.date2,
        date3: this.form.date3,
        date4: this.form.date4,
      }
      console.log(params)
      axios.get('http://localhost:18080/user/createWork', { params })
          .then(response => {
            console.log("提交成功")
            Message.success('添加排班成功');
          })
          .catch(error => {
            console.error('Error creating work schedule', error);
            Message.error('添加排班失败');
          });
      this.dialogVisible = false;
    },

  async submitForm() {
  const params = {
  doc_name: this.searchForm.name,
}
  axios.get('http://localhost:18080/user/get_doctor1', { params })
  .then(response => {
  console.log(response.data);
  this.tableData = response.data.map(item => ({
  id: item.id,
  name: item.name,
  depName: item.office,
  position: item.pos
}));
  this.count = response.data.length;
})
  .catch(error => {
  console.error('Error fetching items', error);
});
},








  createFilter(queryString) {
      return (houseNumber) => {
        return (houseNumber?.value?.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
      };

    },
    diagnose(){
      this.$router.push('/layout/upload');
    },
    fetchItems() {

      axios.get('http://localhost:18080/user/query_doctor')
          .then(response => {
            console.log(response.data);
            this.tableData = response.data.map(item => ({
              id: item.id,
              name: item.name,
              depName: item.office,
              position: item.pos
            }));


          })
          .catch(error => {
            console.error('Error fetching items', error);
          });
    }
  }

};
</script>

<style >
.rowBg {
  background-image:url('../../src/assets/imgs/bj.png') !important;
  background-repeat: no-repeat !important;
  background-size: 200%  200%;
}
.headerBg {
  background-image:url('../../src/assets/imgs/bj.png') !important;
  background-repeat: no-repeat !important;
}
.fillcontain {
  background-image:url('../../src/assets/imgs/bj.png') !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%;
  height: 100%;
  right: 0;
  width: 100%;
}
.table_container {
  background-image:url('../../src/assets/imgs/bj.png');
  background-size: 100% 100%;
  padding: 20px;
}
</style>

这里的排班肯定要通过与后端交互存入数据库中才能实现排班。

这里我们通过creatework端口讲排班管理存入数据库中