From 85c884832d1c2e6e905113e99ca8d5c07db3fb24 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E5=BA=8F=E6=8C=AF?= <luxuzhen@inspur.com>
Date: Wed, 25 Oct 2023 10:06:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=B1=E6=9E=97=E5=AE=89=E5=85=A8=E5=B7=A1?=
 =?UTF-8?q?=E6=9F=A5-=E5=80=BC=E7=8F=AD=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../service/impl/BjdfBeOnDutyServiceImpl.java |   1 +
 .../views/mountainForestSafety/rota/index.vue | 940 +++++++++++-------
 2 files changed, 588 insertions(+), 353 deletions(-)

diff --git a/God-Vue-master/god-system/src/main/java/com/god/mountainForestSafety/service/impl/BjdfBeOnDutyServiceImpl.java b/God-Vue-master/god-system/src/main/java/com/god/mountainForestSafety/service/impl/BjdfBeOnDutyServiceImpl.java
index e6c808c6..124f98be 100644
--- a/God-Vue-master/god-system/src/main/java/com/god/mountainForestSafety/service/impl/BjdfBeOnDutyServiceImpl.java
+++ b/God-Vue-master/god-system/src/main/java/com/god/mountainForestSafety/service/impl/BjdfBeOnDutyServiceImpl.java
@@ -55,6 +55,7 @@ public class BjdfBeOnDutyServiceImpl implements IBjdfBeOnDutyService
     public int insertBjdfBeOnDuty(BjdfBeOnDuty bjdfBeOnDuty)
     {
         bjdfBeOnDuty.setId(IdUtils.fastUUID());
+        bjdfBeOnDuty.setPhone(bjdfBeOnDuty.getStartTime().substring(0,10));
         return bjdfBeOnDutyMapper.insertBjdfBeOnDuty(bjdfBeOnDuty);
     }
 
diff --git a/god-ui/src/views/mountainForestSafety/rota/index.vue b/god-ui/src/views/mountainForestSafety/rota/index.vue
index a9f5864b..33400036 100644
--- a/god-ui/src/views/mountainForestSafety/rota/index.vue
+++ b/god-ui/src/views/mountainForestSafety/rota/index.vue
@@ -1,153 +1,365 @@
 <template>
   <div id="app">
-    <div class="calender-class">
-      <div class="batch-add-Work-class">
-        <el-button class="add-btn-class" size="small" type="primary" @click="batchAddDrawer = true">批量排班</el-button>
-      </div>
-      <el-calendar>
-        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
-        <template slot="dateCell" slot-scope="{date, data}">
-          <div class="day-content-class">
-            <template v-if="viewDate[data.day]">
-              <div class="header-class">
-                <div class="day-class">
-                  {{ data.day.split('-').slice(1).join('-') }}
-                </div>
-                <div class="handle-class">
-                  <el-button icon="el-icon-edit" size="mini" circle
-                             @click="handleWorkInfo(viewDate[data.day], data)"></el-button>
-                </div>
-              </div>
-              <div class="paiban-class">
-                <div v-for="(dayValue, i) in viewDate[data.day]"
-                     :class="['draggable-div' + i, 'each-paiban-class', setWorkClass(dayValue.sort)]" draggable="true"
-                     @dragstart="handleDragStart($event, dayValue, data.day)" @dragover.prevent="handleDragOver($event)"
-                     @dragenter="handleDragEnter($event, dayValue)" @dragend="handleDragEnd()">
-                  <i :class="[setIconClass(dayValue.shiftName), 'paiban-icon-class']"></i>
-                  <div class="paiban-name-class">{{ dayValue.groupName }}</div>
-                </div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="header-class">
-                <div class="day-class">
-                  {{ data.day.split('-').slice(1).join('-') }}
-                </div>
-                <div class="handle-class">
-                  <el-button icon="el-icon-edit" size="mini" circle
-                             @click="handleWorkInfo(viewDate[data.day], data)"></el-button>
-                </div>
-              </div>
-              <div class="no-work-class">
-                <div class="icon-class"><i class="el-icon-date"></i></div>
-                <div class="tips-class">
-                  暂无排班
-                </div>
-              </div>
-            </template>
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="值班日历" name="first">
+        <div class="calender-class">
+          <div class="batch-add-Work-class">
+            <el-button class="add-btn-class" size="small" type="primary" @click="batchAddDrawer = true">批量排班</el-button>
           </div>
-        </template>
-      </el-calendar>
-    </div>
-    <!-- 批量排班抽屉弹窗 -->
-    <div>
-      <el-drawer title="批量排班" :visible.sync="batchAddDrawer" size="40%">
-        <div class="demo-drawer__content">
-          <el-form :model="batchAddForm">
-            <el-form-item label="排班日期" label-width="80px">
-              <el-date-picker v-model="batchAddForm.batchDate" value-format="yyyy-MM-dd" type="daterange"
-                              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
-              </el-date-picker>
-            </el-form-item>
-            <el-button type="primary" icon="el-icon-plus" circle @click="addDomain"></el-button>
-            <el-form-item label-width="80px" v-for="(data, index) in batchAddForm.classData"
-                          :label="'排班' + (index + 1) + '：'" :key="data.key">
-              <p></p>
-              <span>班次：</span>
-              <el-radio-group v-model="data.shiftName">
-                <el-radio label="早">早</el-radio>
-                <el-radio label="中">中</el-radio>
-                <el-radio label="晚">晚</el-radio>
-              </el-radio-group>
-              <p></p>
-              <span>班别：</span>
-              <el-radio-group class="margin-left:80px" v-model="data.groupName">
-                <el-radio label="甲">甲</el-radio>
-                <el-radio label="乙">乙</el-radio>
-                <el-radio label="丙">丙</el-radio>
-              </el-radio-group>
-              <el-button class="remove-domain-class" @click.prevent="removeDomain(data)" type="danger"
-                         icon="el-icon-delete" circle></el-button>
-            </el-form-item>
-          </el-form>
+          <el-calendar>
+            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+            <template slot="dateCell" slot-scope="{date, data}">
+              <div class="day-content-class">
+                <template v-if="viewDate[data.day]">
+                  <div class="header-class">
+                    <div class="day-class">
+                      {{ data.day.split('-').slice(1).join('-') }}
+                    </div>
+                    <div class="handle-class">
+                      <el-button icon="el-icon-edit" size="mini" circle
+                                 @click="handleWorkInfo(viewDate[data.day], data)"
+                      ></el-button>
+                    </div>
+                  </div>
+                  <div class="paiban-class">
+                    <div v-for="(dayValue, i) in viewDate[data.day]"
+                         :class="['draggable-div' + i, 'each-paiban-class', setWorkClass(dayValue.sort)]"
+                         draggable="true"
+                         @dragstart="handleDragStart($event, dayValue, data.day)"
+                         @dragover.prevent="handleDragOver($event)"
+                         @dragenter="handleDragEnter($event, dayValue)" @dragend="handleDragEnd()"
+                    >
+                      <i :class="[setIconClass(dayValue.shiftName), 'paiban-icon-class']"></i>
+                      <div class="paiban-name-class">{{ dayValue.groupName }}</div>
+                    </div>
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="header-class">
+                    <div class="day-class">
+                      {{ data.day.split('-').slice(1).join('-') }}
+                    </div>
+                    <div class="handle-class">
+                      <el-button icon="el-icon-edit" size="mini" circle
+                                 @click="handleWorkInfo(viewDate[data.day], data)"
+                      ></el-button>
+                    </div>
+                  </div>
+                  <div class="no-work-class">
+                    <div class="icon-class"><i class="el-icon-date"></i></div>
+                    <div class="tips-class">
+                      暂无排班
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </el-calendar>
         </div>
-        <div class="demo-drawer__footer">
-          <el-button @click="handleBatchClose">取 消</el-button>
-          <el-button type="primary" @click="batchAddWork()">
-            确定
-          </el-button>
-        </div>
-      </el-drawer>
-    </div>
-    <!-- 单独排班 -->
-    <div>
-      <el-drawer :title="'【' + hanleDay.day + '】排班'" :visible.sync="drawer" size="40%">
-        <div class="add-work-class">
-          <el-button class="add-btn-class" type="primary" @click="innerDrawer = true">添加</el-button>
-          <el-drawer title="添加排班" :append-to-body="true" :before-close="handleClose" :visible.sync="innerDrawer">
+        <!-- 批量排班抽屉弹窗 -->
+        <div>
+          <el-drawer title="批量排班" :visible.sync="batchAddDrawer" size="40%">
             <div class="demo-drawer__content">
-              <el-form :model="addForm">
-                <el-form-item label="班次：" label-width="80px">
-                  <el-radio-group v-model="addForm.shiftName">
+              <el-form :model="batchAddForm">
+                <el-form-item label="排班日期" label-width="80px">
+                  <el-date-picker v-model="batchAddForm.batchDate" value-format="yyyy-MM-dd" type="daterange"
+                                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+                <el-button type="primary" icon="el-icon-plus" circle @click="addDomain"></el-button>
+                <el-form-item label-width="80px" v-for="(data, index) in batchAddForm.classData"
+                              :label="'排班' + (index + 1) + '：'" :key="data.key"
+                >
+                  <p></p>
+                  <span>班次：</span>
+                  <el-radio-group v-model="data.shiftName">
                     <el-radio label="早">早</el-radio>
                     <el-radio label="中">中</el-radio>
                     <el-radio label="晚">晚</el-radio>
                   </el-radio-group>
-                </el-form-item>
-                <el-form-item label="班别：" label-width="80px">
-                  <el-radio-group v-model="addForm.groupName">
+                  <p></p>
+                  <span>班别：</span>
+                  <el-radio-group class="margin-left:80px" v-model="data.groupName">
                     <el-radio label="甲">甲</el-radio>
                     <el-radio label="乙">乙</el-radio>
                     <el-radio label="丙">丙</el-radio>
                   </el-radio-group>
+                  <el-button class="remove-domain-class" @click.prevent="removeDomain(data)" type="danger"
+                             icon="el-icon-delete" circle
+                  ></el-button>
                 </el-form-item>
               </el-form>
             </div>
             <div class="demo-drawer__footer">
-              <el-button @click="handleClose">取 消</el-button>
-              <el-button type="primary" @click="addWork()">
+              <el-button @click="handleBatchClose">取 消</el-button>
+              <el-button type="primary" @click="batchAddWork()">
                 确定
               </el-button>
             </div>
           </el-drawer>
         </div>
-        <el-table :data="workInfoList">
-          <el-table-column property="date" label="日期" width="100"></el-table-column>
-          <el-table-column property="shiftName" label="班次"></el-table-column>
-          <el-table-column property="groupName" label="班别"></el-table-column>
-          <el-table-column property="startTime" label="开始时间" width="160"></el-table-column>
-          <el-table-column property="endTime" label="结束时间" width="160"></el-table-column>
-          <el-table-column property="ruleName" label="名称" width="160"></el-table-column>
-          <el-table-column fixed="right" label="操作" width="120">
-            <template slot-scope="scope">
-              <el-button @click.native.prevent="deleteRow(scope, workInfoList)" type="text" size="small">
-                移除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-drawer>
-    </div>
+        <!-- 单独排班 -->
+        <div>
+          <el-drawer :title="'【' + hanleDay.day + '】排班'" :visible.sync="drawer" size="40%">
+<!--            <div class="add-work-class">-->
+<!--              <el-button class="add-btn-class" type="primary" @click="innerDrawer = true">添加</el-button>-->
+<!--              <el-drawer title="添加排班" :append-to-body="true" :before-close="handleClose" :visible.sync="innerDrawer">-->
+<!--                <div class="demo-drawer__content">-->
+<!--                  <el-form :model="addForm">-->
+<!--                    <el-form-item label="班次：" label-width="80px">-->
+<!--                      <el-radio-group v-model="addForm.shiftName">-->
+<!--                        <el-radio label="早">早</el-radio>-->
+<!--                        <el-radio label="中">中</el-radio>-->
+<!--                        <el-radio label="晚">晚</el-radio>-->
+<!--                      </el-radio-group>-->
+<!--                    </el-form-item>-->
+<!--                    <el-form-item label="班别：" label-width="80px">-->
+<!--                      <el-radio-group v-model="addForm.groupName">-->
+<!--                        <el-radio label="甲">甲</el-radio>-->
+<!--                        <el-radio label="乙">乙</el-radio>-->
+<!--                        <el-radio label="丙">丙</el-radio>-->
+<!--                      </el-radio-group>-->
+<!--                    </el-form-item>-->
+<!--                  </el-form>-->
+<!--                </div>-->
+<!--                <div class="demo-drawer__footer">-->
+<!--                  <el-button @click="handleClose">取 消</el-button>-->
+<!--                  <el-button type="primary" @click="addWork()">-->
+<!--                    确定-->
+<!--                  </el-button>-->
+<!--                </div>-->
+<!--              </el-drawer>-->
+<!--            </div>-->
+            <el-table :data="workInfoList">
+              <el-table-column property="date" label="日期" width="100"></el-table-column>
+              <el-table-column property="shiftName" label="班次"></el-table-column>
+              <el-table-column property="groupName" label="值班人"></el-table-column>
+              <el-table-column property="startTime" label="开始时间" width="160"></el-table-column>
+              <el-table-column property="endTime" label="结束时间" width="160"></el-table-column>
+              <el-table-column property="ruleName" label="值班区域" width="160"></el-table-column>
+<!--              <el-table-column fixed="right" label="操作" width="120">-->
+<!--                <template slot-scope="scope">-->
+<!--                  <el-button @click.native.prevent="deleteRow(scope, workInfoList)" type="text" size="small">-->
+<!--                    移除-->
+<!--                  </el-button>-->
+<!--                </template>-->
+<!--              </el-table-column>-->
+            </el-table>
+          </el-drawer>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="值班管理" name="second">
+        <div class="app-container">
+          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+                   label-width="68px"
+          >
+            <el-form-item label="值班人" prop="name">
+              <el-input
+                v-model="queryParams.name"
+                placeholder="请输入值班人"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item label="值班区域" prop="ruleName">
+              <el-input
+                v-model="queryParams.ruleName"
+                placeholder="请输入值班区域"
+                clearable
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
 
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['bjdfBeOnDuty:bjdfBeOnDuty:add']"
+              >新增
+              </el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="success"
+                plain
+                icon="el-icon-edit"
+                size="mini"
+                :disabled="single"
+                @click="handleUpdate"
+                v-hasPermi="['bjdfBeOnDuty:bjdfBeOnDuty:edit']"
+              >修改
+              </el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="danger"
+                plain
+                icon="el-icon-delete"
+                size="mini"
+                :disabled="multiple"
+                @click="handleDelete"
+                v-hasPermi="['bjdfBeOnDuty:bjdfBeOnDuty:remove']"
+              >删除
+              </el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                type="warning"
+                plain
+                icon="el-icon-download"
+                size="mini"
+                @click="handleExport"
+                v-hasPermi="['bjdfBeOnDuty:bjdfBeOnDuty:export']"
+              >导出
+              </el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+          </el-row>
+
+          <el-table v-loading="loading" :data="bjdfBeOnDutyList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center"/>
+            <el-table-column label="值班人" align="center" prop="name"/>
+            <el-table-column label="开始时间" align="center" prop="startTime">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="结束时间" align="center" prop="endTime">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="值班类型" align="center" prop="shiftName">
+              <template slot-scope="scope">
+                <dict-tag :options="dict.type.rota" :value="scope.row.shiftName"/>
+              </template>
+            </el-table-column>
+            <el-table-column label="值班区域" align="center" prop="ruleName"/>
+            <el-table-column label="值班日期" align="center" prop="phone">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.phone, '{y}-{m}-{d}') }}</span>
+              </template>
+            </el-table-column>
+            <!--            <el-table-column label="备注" align="center" prop="remark"/>-->
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  v-hasPermi="['bjdfBeOnDuty:bjdfBeOnDuty:edit']"
+                >修改
+                </el-button>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  v-hasPermi="['bjdfBeOnDuty:bjdfBeOnDuty:remove']"
+                >删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <pagination
+            v-show="total>0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getList"
+          />
+
+          <!-- 添加或修改值班信息对话框 -->
+          <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+              <el-form-item label="值班人" prop="name">
+                <el-input v-model="form.name" placeholder="请输入值班人"/>
+              </el-form-item>
+              <el-form-item label="开始时间" prop="startTime">
+                <el-date-picker
+                  v-model="form.startTime"
+                  type="datetime"
+                  placeholder="选择时间"
+                >
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="结束时间" prop="endTime">
+                <!--          <el-input v-model="form.endTime" placeholder="请输入结束时间" />-->
+                <el-date-picker
+                  v-model="form.endTime"
+                  type="datetime"
+                  placeholder="选择时间"
+                >
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item label="值班类型" prop="shiftName">
+<!--                <el-input v-model="form.shiftName" placeholder="请输入值班类型"/>-->
+                <el-select v-model="form.shiftName" placeholder="请选择值班类型">
+                  <el-option
+                    v-for="dict in dict.type.rota"
+                    :key="dict.value"
+                    :label="dict.label"
+                    :value="dict.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="值班区域" prop="ruleName">
+                <el-input v-model="form.ruleName" placeholder="请输入值班区域"/>
+              </el-form-item>
+<!--              <el-form-item label="值班日期" prop="phone">-->
+<!--&lt;!&ndash;                <el-input v-model="form.phone" placeholder="请输入值班日期"/>&ndash;&gt;-->
+<!--                <el-date-picker-->
+<!--                  v-model="form.phone"-->
+<!--                  type="date"-->
+<!--                  placeholder="选择时间"-->
+<!--                >-->
+<!--                </el-date-picker>-->
+<!--              </el-form-item>-->
+
+              <!--              <el-form-item label="备注" prop="remark">-->
+              <!--                <el-input v-model="form.remark" placeholder="请输入备注"/>-->
+              <!--              </el-form-item>-->
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="submitForm">确 定</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </div>
+          </el-dialog>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
   </div>
+
 </template>
 
 <script>
 import moment from 'moment'
-import { listBjdfBeOnDuty, getBjdfBeOnDuty, delBjdfBeOnDuty, addBjdfBeOnDuty, updateBjdfBeOnDuty } from "@/api/mountainForestSafety/bjdfBeOnDuty";
+import { randomTime, randomDate } from '@/utils/index'
+import {
+  listBjdfBeOnDuty,
+  getBjdfBeOnDuty,
+  delBjdfBeOnDuty,
+  addBjdfBeOnDuty,
+  updateBjdfBeOnDuty
+} from '@/api/mountainForestSafety/bjdfBeOnDuty'
+
 export default {
+  dicts: ['rota'],
   data() {
     return {
+      activeName: 'first',
       // 遮罩层
       loading: true,
       // 选中数组
@@ -163,7 +375,7 @@ export default {
       // 值班信息表格数据
       bjdfBeOnDutyList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -175,166 +387,165 @@ export default {
         endTime: null,
         shiftName: null,
         ruleName: null,
-        phone: null,
+        phone: null
       },
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      },
+      rules: {},
       viewDate: {
-        "2023-10-20": [
+        '2023-10-20': [
           {
-            "id": "2023-10-20" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "早",
-            "groupName": "魏家林",
-            "startTime": "2023-10-20 08:30",
-            "endTime": "2023-10-20 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-20",
-            "sort": 1
+            'id': '2023-10-20' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '早',
+            'groupName': '魏家林',
+            'startTime': '2023-10-20 08:30',
+            'endTime': '2023-10-20 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-20',
+            'sort': 1
           },
           {
-            "id": "2023-10-20" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "中",
-            "groupName": "李达",
-            "startTime": "2023-10-20 20:30",
-            "endTime": "2023-10-21 08:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-20",
-            "sort": 2
+            'id': '2023-10-20' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '中',
+            'groupName': '李达',
+            'startTime': '2023-10-20 20:30',
+            'endTime': '2023-10-21 08:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-20',
+            'sort': 2
           },
           {
-            "id": "2023-10-20" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "晚",
-            "groupName": "韩苏东",
-            "startTime": "2023-10-20 08:30",
-            "endTime": "2023-10-20 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-20",
-            "sort": 3
-          },
+            'id': '2023-10-20' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '晚',
+            'groupName': '韩苏东',
+            'startTime': '2023-10-20 08:30',
+            'endTime': '2023-10-20 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-20',
+            'sort': 3
+          }
         ],
-        "2023-10-21": [
+        '2023-10-21': [
           {
-            "id": "2023-10-21" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "早",
-            "groupName": "魏家林",
-            "startTime": "2023-10-21 08:30",
-            "endTime": "2023-10-21 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-21",
-            "sort": 1
+            'id': '2023-10-21' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '早',
+            'groupName': '魏家林',
+            'startTime': '2023-10-21 08:30',
+            'endTime': '2023-10-21 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-21',
+            'sort': 1
           },
           {
-            "id": "2023-06-21" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "中",
-            "groupName": "王凤华",
-            "startTime": "2023-10-21 08:30",
-            "endTime": "2023-10-21 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-21",
-            "sort": 2
+            'id': '2023-06-21' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '中',
+            'groupName': '王凤华',
+            'startTime': '2023-10-21 08:30',
+            'endTime': '2023-10-21 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-21',
+            'sort': 2
           },
           {
-            "id": "2023-10-21" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "晚",
-            "groupName": "韩苏东",
-            "startTime": "2023-10-21 08:30",
-            "endTime": "2023-10-21 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-21",
-            "sort": 3
-          },
+            'id': '2023-10-21' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '晚',
+            'groupName': '韩苏东',
+            'startTime': '2023-10-21 08:30',
+            'endTime': '2023-10-21 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-21',
+            'sort': 3
+          }
         ],
-        "2023-10-22": [
+        '2023-10-22': [
           {
-            "id": "2023-10-22" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "早",
-            "groupName": "魏家林",
-            "startTime": "2023-10-22 08:30",
-            "endTime": "2023-10-22 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-22",
-            "sort": 1
+            'id': '2023-10-22' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '早',
+            'groupName': '魏家林',
+            'startTime': '2023-10-22 08:30',
+            'endTime': '2023-10-22 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-22',
+            'sort': 1
           },
           {
-            "id": "2023-06-22" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "中",
-            "groupName": "王凤华",
-            "startTime": "2023-10-22 08:30",
-            "endTime": "2023-10-22 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-22",
-            "sort": 2
+            'id': '2023-06-22' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '中',
+            'groupName': '王凤华',
+            'startTime': '2023-10-22 08:30',
+            'endTime': '2023-10-22 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-22',
+            'sort': 2
           },
           {
-            "id": "2023-10-22" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "晚",
-            "groupName": "韩苏东",
-            "startTime": "2023-10-22 08:30",
-            "endTime": "2023-10-22 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-22",
-            "sort": 3
-          },
+            'id': '2023-10-22' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '晚',
+            'groupName': '韩苏东',
+            'startTime': '2023-10-22 08:30',
+            'endTime': '2023-10-22 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-22',
+            'sort': 3
+          }
         ],
-        "2023-10-23": [
+        '2023-10-23': [
           {
-            "id": "2023-10-23" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "早",
-            "groupName": "魏家林",
-            "startTime": "2023-10-23 08:30",
-            "endTime": "2023-10-23 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-23",
-            "sort": 1
+            'id': '2023-10-23' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '早',
+            'groupName': '魏家林',
+            'startTime': '2023-10-23 08:30',
+            'endTime': '2023-10-23 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-23',
+            'sort': 1
           },
           {
-            "id": "2023-06-23" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "中",
-            "groupName": "王凤华",
-            "startTime": "2023-10-23 08:30",
-            "endTime": "2023-10-23 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-23",
-            "sort": 2
+            'id': '2023-06-23' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '中',
+            'groupName': '王凤华',
+            'startTime': '2023-10-23 08:30',
+            'endTime': '2023-10-23 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-23',
+            'sort': 2
           },
           {
-            "id": "2023-10-23" + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": "晚",
-            "groupName": "韩苏东",
-            "startTime": "2023-10-23 08:30",
-            "endTime": "2023-10-23 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": "2023-10-23",
-            "sort": 3
-          },
-        ],
+            'id': '2023-10-23' + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': '晚',
+            'groupName': '韩苏东',
+            'startTime': '2023-10-23 08:30',
+            'endTime': '2023-10-23 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': '2023-10-23',
+            'sort': 3
+          }
+        ]
       },
       thisDay: null,
       thisDayWork: null,
@@ -347,45 +558,46 @@ export default {
         batchDate: [],
         classData: [{
           shiftName: '早',
-          groupName: '甲',
+          groupName: '甲'
         }]
       },
       // 单日添加
       addForm: {
         shiftName: '早',
         groupName: '甲',
-        sort: 1,
+        sort: 1
       },
       drawer: false,
       innerDrawer: false,
       hanleDay: '',
       workInfoList: []
-    };
+    }
   },
   watch: {
     'addForm.shiftName'(newVal, oldVal) {
       switch (newVal) {
         case '早':
           this.addForm.sort = 1
-          break;
+          break
         case '中':
           this.addForm.sort = 2
-          break;
+          break
         case '晚':
           this.addForm.sort = 3
-          break;
+          break
         default:
-          break;
+          break
       }
     }
   },
-  computed: {
-
-  },
+  computed: {},
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
     handleDragStart(e, item, thisDay) {
       this.dragging = item
       this.thisDay = thisDay
@@ -404,7 +616,7 @@ export default {
         this.dragging = null
         this.ending = null
       })
-      console.log("🚀 ~ file: App.vue:286 ~ handleDragEnd ~ this.viewDate:", this.viewDate)
+      console.log('🚀 ~ file: App.vue:286 ~ handleDragEnd ~ this.viewDate:', this.viewDate)
     },
     handleDragOver(e) {
       // 首先把div变成可以放置的元素，即重写dragenter/dragover
@@ -416,30 +628,30 @@ export default {
     },
     // 获取时间范围中的所有日期
     enumerateDaysBetweenDates(startDate, endDate) {
-      let daysList = [];
-      let SDate = moment(startDate);
-      let EDate = moment(endDate);
-      daysList.push(SDate.format("YYYY-MM-DD"));
-      while (SDate.add(1, "days").isBefore(EDate)) {
-        daysList.push(SDate.format("YYYY-MM-DD"));
+      let daysList = []
+      let SDate = moment(startDate)
+      let EDate = moment(endDate)
+      daysList.push(SDate.format('YYYY-MM-DD'))
+      while (SDate.add(1, 'days').isBefore(EDate)) {
+        daysList.push(SDate.format('YYYY-MM-DD'))
       }
-      daysList.push(EDate.format("YYYY-MM-DD"));
-      return daysList;
+      daysList.push(EDate.format('YYYY-MM-DD'))
+      return daysList
     },
     setSortValue(value) {
       let sort = 1
       switch (value) {
         case '早':
           sort = 1
-          break;
+          break
         case '中':
           sort = 2
-          break;
+          break
         case '晚':
           sort = 3
-          break;
+          break
         default:
-          break;
+          break
       }
       return sort
     },
@@ -448,34 +660,34 @@ export default {
       switch (value) {
         case 1:
           classValue = 'zao-work-class'
-          break;
+          break
         case 2:
           classValue = 'wan-work-class'
-          break;
+          break
         case 3:
           classValue = 'ye-work-class'
-          break;
+          break
         default:
-          break;
+          break
       }
-      return classValue;
+      return classValue
     },
     setIconClass(value) {
       let classValue = 'el-icon-sunrise'
       switch (value) {
-        case "早":
+        case '早':
           classValue = 'el-icon-sunrise'
-          break;
-        case "中":
+          break
+        case '中':
           classValue = 'el-icon-sunny'
-          break;
-        case "晚":
+          break
+        case '晚':
           classValue = 'el-icon-moon'
-          break;
+          break
         default:
-          break;
+          break
       }
-      return classValue;
+      return classValue
     },
     // 编辑单日排班
     handleWorkInfo(info, data) {
@@ -488,35 +700,35 @@ export default {
       }
     },
     handleClose() {
-      this.innerDrawer = false;
+      this.innerDrawer = false
     },
     // 添加单日排班
     addWork() {
       let info = {
-        "id": this.hanleDay.day + Math.random(1000),
-        "ruleName": "三班两运转",
-        "shiftName": this.addForm.shiftName,
-        "groupName": this.addForm.groupName,
-        "startTime": this.hanleDay.day + " 08:30",
-        "endTime": this.hanleDay.day + " 20:30",
-        "isNotHoliday": 0,
-        "classId": 1,
-        "date": this.hanleDay.day,
-        "sort": this.addForm.sort
+        'id': this.hanleDay.day + Math.random(1000),
+        'ruleName': '三班两运转',
+        'shiftName': this.addForm.shiftName,
+        'groupName': this.addForm.groupName,
+        'startTime': this.hanleDay.day + ' 08:30',
+        'endTime': this.hanleDay.day + ' 20:30',
+        'isNotHoliday': 0,
+        'classId': 1,
+        'date': this.hanleDay.day,
+        'sort': this.addForm.sort
       }
       this.workInfoList.push(info)
       this.$set(this.viewDate, this.hanleDay.day, this.workInfoList)
       this.$forceUpdate()
-      this.innerDrawer = false;
+      this.innerDrawer = false
     },
     // 清除单日排班数据
     deleteRow(row, tableData) {
       let index = row.$index
-      tableData.splice(index, 1);
+      tableData.splice(index, 1)
       if (tableData.length > 0) {
         this.$set(this.viewDate, this.hanleDay.day, tableData)
       } else {
-        this.$delete(this.viewDate, this.hanleDay.day);
+        this.$delete(this.viewDate, this.hanleDay.day)
       }
     },
     addDomain() {
@@ -524,7 +736,7 @@ export default {
         shiftName: '早',
         groupName: '甲',
         key: Date.now()
-      });
+      })
     },
     removeDomain(item) {
       if (this.batchAddForm.classData.length > 1) {
@@ -536,7 +748,7 @@ export default {
         this.$message({
           message: '请至少安排一个排班',
           type: 'error'
-        });
+        })
       }
 
     },
@@ -552,16 +764,16 @@ export default {
         let workList = []
         classList.forEach((work) => {
           let info = {
-            "id": item + Math.random(1000),
-            "ruleName": "三班两运转",
-            "shiftName": work.shiftName,
-            "groupName": work.groupName,
-            "startTime": item + " 08:30",
-            "endTime": item + " 20:30",
-            "isNotHoliday": 0,
-            "classId": 1,
-            "date": item,
-            "sort": this.setSortValue(work.shiftName)
+            'id': item + Math.random(1000),
+            'ruleName': '三班两运转',
+            'shiftName': work.shiftName,
+            'groupName': work.groupName,
+            'startTime': item + ' 08:30',
+            'endTime': item + ' 20:30',
+            'isNotHoliday': 0,
+            'classId': 1,
+            'date': item,
+            'sort': this.setSortValue(work.shiftName)
           }
           workList.push(info)
         })
@@ -574,18 +786,39 @@ export default {
     },
     /** 查询值班信息列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listBjdfBeOnDuty(this.queryParams).then(response => {
-        this.bjdfBeOnDutyList = response.rows;
-        console.log( this.bjdfBeOnDutyList)
-        this.total = response.total;
-        this.loading = false;
-      });
+        this.bjdfBeOnDutyList = response.rows
+        console.log(this.bjdfBeOnDutyList)
+        let dateList = this.bjdfBeOnDutyList.map(item => {
+          return item.phone
+        })
+        dateList = [...new Set([...dateList])]
+        this.viewDate = {}
+        dateList.forEach(item => {
+          this.viewDate[item] = []
+          this.bjdfBeOnDutyList.forEach(ele => {
+            if (item === ele.phone) {
+              this.viewDate[item].push({
+                ...ele,
+                groupName: ele.name,
+                startTime: randomTime(0, new Date(ele.startTime), '-'),
+                endTime: randomTime(0, new Date(ele.endTime), '-'),
+                date: randomDate(0, new Date(ele.phone), '-'),
+                'sort': parseInt(ele.shiftName)
+              })
+            }
+          })
+        })
+        console.log('ss', this.viewDate)
+        this.total = response.total
+        this.loading = false
+      })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
@@ -598,70 +831,71 @@ export default {
         ruleName: null,
         phone: null,
         remark: null
-      };
-      this.resetForm("form");
+      }
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加值班信息";
+      this.reset()
+      this.open = true
+      this.title = '添加值班信息'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const id = row.id || this.ids
       getBjdfBeOnDuty(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改值班信息";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改值班信息'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
             updateBjdfBeOnDuty(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addBjdfBeOnDuty(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
+      const ids = row.id || this.ids
       this.$modal.confirm('是否确认删除值班信息编号为"' + ids + '"的数据项？').then(function() {
-        return delBjdfBeOnDuty(ids);
+        return delBjdfBeOnDuty(ids)
       }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        this.getList()
+        this.$modal.msgSuccess('删除成功')
+      }).catch(() => {
+      })
     },
     /** 导出按钮操作 */
     handleExport() {