新增网点作息配置页面

src/views/system/workTimeBankingOffice/api.js

@@ -0,0 +1,101 @@
+import request from '@/utils/request'
+
+/**
+ * 作息配置页面
+ * */
+// 获取table数据
+export function tableList(params) {
+  return request({
+    url: '/system/work/time/pageList',
+    method: 'get',
+    showLoading:false,
+    params
+  })
+}
+
+// 修改作息信息
+export function editWorkTime(data) {
+  return request({
+    url: '/system/work/time/saveOneWorkTime',
+    method: 'post',
+    showLoading:true,
+    data
+  })
+}
+
+// 通过id查询org信息
+export function queryOrgInfo(id) {
+  return request({
+    url: '/system/work/time/findOneWorkTimeById/'+id,
+    method: 'get',
+    showLoading:true,
+  })
+}
+
+
+/**
+ * 按周配置作息页面
+ * */
+
+//获取周配置列表
+export function weekTableList(params) {
+  return request({
+    url: '/system/work/timeSet/find',
+    method: 'get',
+    showLoading:false,
+    params
+  })
+}
+
+//通过id获取详情
+export function queryInfoById(params) {
+  return request({
+    url: '/system/work/timeSet/findId',
+    method: 'get',
+    showLoading:true,
+    params
+  })
+}
+
+//通过机构Id获取模板作息
+export function getTemplateByOrgId(orgId) {
+  return request({
+    url: `/system/work/timeSet/orgId/${orgId}`,
+    method: 'get',
+    showLoading:true
+  })
+}
+
+// 新增时数据检查是否合法
+export function checkData(data) {
+  return request({
+    url: '/system/work/time/checkData',
+    method: 'post',
+    showLoading:true,
+    data
+  })
+}
+
+
+// 新增按周配置作息列表
+export function addTimeWeek(data) {
+  return request({
+    url: '/system/work/timeSet/add',
+    method: 'post',
+    showLoading:true,
+    data
+  })
+}
+
+
+// 新增指定日期作息配置
+export function addWorkTimeDay(data) {
+  return request({
+    url: '/system/work/time/month/edit',
+    method: 'post',
+    showLoading:true,
+    data
+  })
+}
+
+

src/views/system/workTimeBankingOffice/dialog.template.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="question-infos">
+    <DialogCom :title="title" @close="handleClose" :visible.sync="isShow" :close-on-click-modal="false"
+      custom-class="gxDialog" width="1200px" append-to-body>
+        <el-form
+            :disabled="title === '查看作息模版'"
+            label-width="100px"
+            label-suffix=""
+            label-position="left">
+          <el-form-item>
+            <span slot="label"> 机构 </span>
+            <span>{{orgName}}</span>
+            <!-- <org-select ref="orgSelect" v-model="formData.orgIds" :orgList="orgList" ></org-select> -->
+          </el-form-item>
+          <el-form-item >
+            <span slot="label"> <span style="color: red"> * </span>生效日期 </span>
+            <el-date-picker
+              v-model="formData.effectiveDate"
+              value-format="yyyy-MM-dd hh:mm:ss"
+              :disabled="disabled"
+              :clearable="!disabled"
+              :picker-options="startDatepickerOptions"
+              popper-class="no-atTheMoment"
+              type="date"
+              placeholder="请选择日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item v-if="id==0" ><el-button type="primary" @click="handleInitTemp">初始化作息模板</el-button></el-form-item>
+          
+          <el-form-item>
+            <span slot="label"> <span style="color: red"> * </span>作息设置 </span>
+            <el-table  border :data="formData.dayOfWeeks">
+              <el-table-column label="星期" width="100px" prop="dayOfWeekText" align="center">
+              </el-table-column>
+              <el-table-column label="营业状态" align="center" width="180">
+                <template slot-scope="r">
+                  <el-radio-group
+                    v-model="r.row.isWorkday"
+                    @change="onEnableChange(r.row)">
+                    <el-radio text-color="#48bb78" label="1">营业</el-radio>
+                    <el-radio text-color="#f56565" label="0">歇业</el-radio>
+                  </el-radio-group>
+                </template>
+              </el-table-column>
+              <el-table-column label="值班打卡" align="center">
+                <template slot-scope="r">
+                  <el-switch
+                    v-model="r.row.isDuty"
+                    active-value="1"
+                    inactive-value="0"
+                    @change="onEnableChange(r.row)"
+                    active-text="是"
+                    inactive-text="否">
+                  </el-switch>                  
+                </template>
+              </el-table-column>
+              <el-table-column label="上班时间" align="center">
+                <template slot-scope="r">
+                  <el-time-select
+                    style="width: 100%"
+                    size="mini"
+                    :picker-options="pickerOptions"
+                    :disabled="r.row.isWorkday=='0' ||!r.row.isWorkday"
+                    v-model="r.row.workTime"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="营业开始" align="center">
+                <template slot-scope="r">
+                  <el-time-select
+                    style="width: 100%"
+                    size="mini"
+                    :picker-options="pickerOptions"
+                    :disabled="r.row.isWorkday=='0' ||!r.row.isWorkday"
+                    v-model="r.row.openTime"/>
+                </template>
+              </el-table-column>
+              
+              <el-table-column label="营业结束" align="center">
+                <template slot-scope="r">
+                  <el-time-select
+                    style="width: 100%"
+                    size="mini"
+                    :picker-options="pickerOptions"
+                    :disabled="r.row.isWorkday=='0' || !r.row.isWorkday"
+                    v-model="r.row.closeTime"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="下班时间" align="center">
+                <template slot-scope="r">
+                  <el-time-select
+                    style="width: 100%"
+                    size="small"
+                    :picker-options="pickerOptions"
+                    :disabled="r.row.isWorkday=='0' ||!r.row.isWorkday"
+                    v-model="r.row.workOffTime"/>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+        </el-form>
+      <div style="color: red;font-size: 12px;line-height: 30px;">
+        注：保存作息模板后，平台将按作息模板在所选'生效日期'当日后自动生成作息
+
+      </div>
+<!--      </div>-->
+      <div v-if="title != '查看作息模版'" slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <btn-tip tip="确定要提交吗?" type="primary" @click="onSubmit">保存</btn-tip>
+      </div>
+    </DialogCom>
+
+    <DialogCom
+        title="提示"
+        :visible="centerDialogVisible"
+        width="25%"
+        @close="centerDialogVisible=false"
+        center>
+      <span>所选机构中在当前生效日期内已有按指定日期配置的作息数据，是否覆盖按指定日期配置的作息数据?</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="submitData(0)">不覆盖</el-button>
+        <el-button type="primary" @click="submitData(1)">覆盖</el-button>
+      </span>
+    </DialogCom>
+
+    <DialogCom
+        title="提示"
+        :visible="centerDialogVisiblea"
+        width="25%"
+        @close="centerDialogVisiblea=false"
+        center>
+      <span>已存在其他生效的配置，将会生成{{checkMsg}}的作息，是否提交?</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="checkDataMsg(1)">提交</el-button>
+        <el-button @click="handleClose()">取消</el-button>
+      </span>
+    </DialogCom>
+  </div>
+</template>
+<script>
+
+import BtnTip from "@/components/btnTip";
+import OrgTreeSelect from '@/components/orgTreeSelect'
+import { validateTimes } from "@/utils/ruoyi";
+import {addTimeWeek, queryInfoById} from "@/views/system/workTimeSet/api";
+import { getTemplateByOrgId } from "./api";
+import {json} from './json'
+import {getDept} from "@/api/system/dept"
+import orgSelect from "@/components/orgSelect/index.vue";  //导入默认数据
+export default {
+  components:{orgSelect, BtnTip,OrgTreeSelect},
+  data() {
+    return {
+      orgList: [],
+      org:null,
+      title:'',
+      isShow: false,
+      row:null,
+      id:0,
+      orgId:null,
+      orgName:null,
+      formData: {
+        orgIds:[],
+        dayOfWeeks: null,
+        effectiveDate:null,
+      },
+      disabled: false,
+      startDatepickerOptions: {
+        disabledDate(time) {
+          const date = new Date();
+          date.setTime(date.getTime() );
+          return time.getTime() < date;
+        },
+      },
+      centerDialogVisible: false,
+      centerDialogVisiblea:false,
+      checkData:null,
+      checkMsg:null,
+      //回显tag
+      tagsList:[]
+    };
+  },
+  props: {},
+  watch: {
+  },
+  computed: {
+    pickerOptions() {
+      return {
+        start: "00:00",
+        end: "24:00",
+        step: "00:05",
+      };
+    },
+  },
+  methods: {
+    validateTimes,
+    handleInitTemp(){
+      this.formData.dayOfWeeks = JSON.parse(JSON.stringify(json));
+    },
+    // edit(row){
+    //   this.title = '编辑作息模版';
+    //   this.isShow = true;
+    //   this.id = row.id;
+    //   this.orgId = row.orgId;
+    //   this.orgList = [];
+    //   getDept(row.orgId).then(res=>{
+    //     this.orgList.push(res.data);
+    //     this.getData();
+    //   });
+    // },
+    // add(orgId){
+    //   this.title = '新增作息模版';
+    //   // this.orgList = [];
+    //   this.org=org;
+    //   this.formData.dayOfWeeks = JSON.parse(JSON.stringify(json));
+    //   this.isShow = true;
+    // },
+    show(orgId) {
+      if(!orgId)
+      {
+        this.$message.error("请选择机构后再进行模板配置");
+        return;
+      }
+      this.title = '网点作息模版';            
+      getTemplateByOrgId(orgId).then(res=>{
+        if(res.data)
+        {
+          this.id = res.data.id;
+          this.orgId = res.data.orgId;
+          this.orgName =res.data.orgName;
+          // this.disabled = true;
+          res.data.effectiveDate = new Date(res.data.effectiveDate);
+          this.formData = res.data;
+          this.formData.orgIds = [res.data.orgId];
+        }
+        else{          
+          this.formData.orgIds = [orgId];
+          getDept(orgId).then(res=>{
+            this.orgName=res.data.shortName;
+          });
+        }
+        this.isShow = true;
+      })
+    },
+    onSubmit() {
+      if (!this.formData.effectiveDate ) {
+        this.$message.error("请选择生效日期");
+        return;
+      }
+      if (this.formData.dayOfWeeks.filter(w => w.isWorkday == 1 || w.isWorkday).length === 0) {
+        this.$message.error("工作日不能为空");
+        return;
+      }
+      // 校验
+      for (let workTime of this.formData.dayOfWeeks) {
+        if (!this.checkItem(workTime)) {
+          return;
+        }
+      }
+      addTimeWeek(this.formData).then(res=>{
+        this.$message.success("保存成功");
+        this.handleClose();
+        this.$emit("ok");
+      })
+    },
+    checkItem(dayOfWeek){
+      console.log(dayOfWeek,'dayOfWeek');
+      //是否启用
+      if(dayOfWeek.isWorkday == '0') return true;
+      if (
+        !(
+          dayOfWeek.workTime &&
+          dayOfWeek.openTime &&
+          dayOfWeek.closeTime &&
+          dayOfWeek.workOffTime
+        )
+      ) {
+        this.$message.error(`${dayOfWeek.dayOfWeekText}：有尚未配置的时间项`);
+        return;
+      }
+      // if (!dayOfWeek.noonbreakStart ^ !dayOfWeek.noonbreakEnd) {
+      //   this.$message.error(`${dayOfWeek.dayOfWeekText}的午休开始及结束时间必须同时配置`);
+      //   return;
+      // }
+      if (!this.validateTimes(dayOfWeek)) {
+
+        this.$message.error(`${dayOfWeek.dayOfWeekText}：请按照（上班时间<=营业时间<营业结束<=下班时间）顺序配置`);
+        return false;
+      }
+      return true;
+    },
+    async submitData(result){
+      this.centerDialogVisible=false;
+      this.centerDialogVisiblea=false;
+      this.formData.checkDataResult =result;
+      // this.$api.workTimeMonth.timeSetAdd(this.formData).then((v) => {
+      //   this.$emit("success");
+      //   this.onHide();
+      // });
+
+    },
+    // async getData() {
+    //   queryInfoById({id:this.id}).then(res=>{
+    //     res.data.effectiveDate = new Date(res.data.effectiveDate);
+    //     this.formData = res.data;
+    //     this.formData.orgIds = [res.data.orgId];
+    //   })
+    // },
+    onEnableChange(workTime) {
+      if (workTime.isWorkday=='0') {
+        workTime.openTime = null;
+        workTime.closeTime = null;
+        // workTime.noonbreakStart = null;
+        // workTime.noonbreakEnd = null;
+        workTime.workTime = null;
+        workTime.workOffTime = null;
+      }
+    },
+    handleClose() {
+      this.id=null;
+      this.formData = {
+        orgIds: [],
+        dayOfWeeks: null,
+        effectiveDate: null,
+        checkDataResult:null,
+      };
+      this.tagsList = [];
+      this.orgId=null;
+      this.orgName=null;
+      this.disabled= false;
+      this.checkData=null;
+      this.checkMsg=null;
+      this.centerDialogVisiblea=false;
+      this.centerDialogVisible=false;
+      this.isShow = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.work-time-modify {
+  .red {
+    color: red;
+  }
+  .grid {
+    width: 100%;
+    .title {
+    }
+    .box {
+      padding: 20px;
+      border: 1px solid #000000;
+      background: #ffffff;
+      .time {
+      }
+    }
+  }
+  //
+  .el-input {
+    width: 400px;
+  }
+
+  .el-table {
+    .el-date-editor.el-input {
+      width: 100%;
+    }
+  }
+  .el-dialog__body {
+    overflow-y: auto;
+    min-height: 200px;
+  }
+}
+</style>

src/views/system/workTimeBankingOffice/index.vue

@@ -0,0 +1,604 @@
+<template>
+  <div class="calendar-dialog">
+    <el-row :gutter="10">
+      <!--table数据-->
+      <el-col :span="24" :xs="24">
+        <div class="main-right-box">
+          <!--    搜索条件    -->
+          <div class="main-search-box">
+            <el-form
+              :model="queryParams"
+              ref="queryForm"
+              size="small"
+              :inline="true"
+              v-show="showSearch"
+            >
+              <el-form-item label="机构名称">
+                <org-tree
+                  v-model="queryParams.orgId"
+                  @defaultKey="getDefaultKey"
+                  @checkChange="changeCheckBox"
+                  @click="handleNodeClick"
+                  :showCheckSub='false'
+                  :defaultCheckSub='false'
+                  ref="orgTree"
+                ></org-tree>
+              </el-form-item>             
+            </el-form>  
+          </div>
+                
+          <div style="display:flex;">
+            <div style="width:65%">
+              <el-calendar v-model="calendarDate">
+                <!-- <template
+                  slot="dateCell"
+                  slot-scope="{date, data}">
+                  <p :class="data.isSelected ? 'is-selected' : ''">
+                    {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+                  </p>
+                </template> -->
+                <template slot="dateCell" slot-scope="{date, data}">
+                  <div class="card-group" @click="selectedDate(data)">
+                    <div :class="data.isSelected ? 'is-selected card-calendar-text' : 'card-calendar-text'">
+                      <span>{{ getDate(data.day) }}</span>
+                      <el-icon class="el-icon-check" v-if="data.isSelected"></el-icon>
+                    </div>
+                    <div v-if="isSetedWorkTime(data)" style="height:100%">
+                      <span v-for="(item, index) in tableList" :key="index" class="card">
+                      <div v-if="item.ymdDate === data.day" class="card-flag">
+                        <div :class="getDayClass(data,item)">
+                          <span>{{ getDate(data.day) }}</span>
+                          <el-icon class="el-icon-check" v-if="data.isSelected"></el-icon>
+                        </div>
+                        <div :class="'card'+getColorIndexByWorkTime(item)">
+                          <div class="visits-val">{{item.isDuty==='1' ?'值班':''}}</div>
+                        </div>
+                      </div>
+                    </span>
+                    </div>
+                    <div v-else style="height:100%">
+                      <span class="card">
+                      <div class="card-flag">
+                        <div :class="getDayClass(data,null)">
+                          <span>{{ getDate(data.day) }}</span>
+                          <el-icon class="el-icon-check" v-if="data.isSelected"></el-icon>
+                        </div>
+                        <div :class="'card'+getColorIndexByWorkTime(null)">
+                          <div class="visits-val">{{''}}</div>
+                        </div>
+                      </div>
+                    </span>
+                    </div>
+                    
+                  </div>
+                </template>
+            </el-calendar>
+            </div>
+            <div style="width:35%;background-color: #fff;margin-left: 10px;box-shadow: 2px 2px 8px #ccc;">
+              <el-form :model="formData" :rules="formData.isEnable?formDataRules:{}" size="small" ref="form" label-position="right"
+                 label-width="120px" label-prefix=":">
+                <el-row :gutter="20">
+                  <!-- <el-col :span="24">
+                    <el-form-item prop="orgName" label="机构：" >
+                      <span>{{formData.orgName}}</span>
+                    </el-form-item>
+                  </el-col> -->
+                  <el-col :span="24">
+                    <el-form-item label="日期：">
+                      <span >{{formData.ymdDate}}</span>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item label="星期：">
+                      <span>{{parseTime(formData.ymdDate,"dddd")}}</span>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item prop="isEnable" label="状态：">
+                      <template >
+                        <el-radio-group v-model="formData.isEnable" @change="onEnableChange(formData)">
+                          <el-radio text-color="#48bb78" label="1">营业</el-radio>
+                          <el-radio text-color="#f56565" label="0">歇业</el-radio>
+                        </el-radio-group>
+                      </template>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item prop="isEnable" label="值班打卡：">
+                      <template >
+                        <el-radio-group v-model="formData.isDuty">
+                          <el-radio text-color="#48bb78" label="1">是</el-radio>
+                          <el-radio text-color="#f56565" label="0">否</el-radio>
+                        </el-radio-group>
+                      </template>
+                    </el-form-item>
+                  </el-col>
+                  <el-col v-if="formData.isEnable == '1'" :span="24">
+                    <el-form-item prop="workTime" label="上班时间：">
+                      <template >
+                        <el-time-select
+                            :picker-options="pickerOptions"
+                            v-model="formData.workTime"/>
+                      </template>
+                    </el-form-item>
+                  </el-col>
+                  <el-col v-if="formData.isEnable == '1'" :span="24">
+                    <el-form-item prop="workOffTime" label="下班时间：">
+                      <template >
+                        <el-time-select
+                          :picker-options="pickerOptions"
+                          v-model="formData.workOffTime"/>
+                      </template>
+                    </el-form-item>
+                  </el-col>
+                  <el-col v-if="formData.isEnable == '1'" :span="24">
+                    <el-form-item prop="openTime" label="营业开始：">
+                      <template >
+                        <el-time-select
+                          :picker-options="pickerOptions"
+                          v-model="formData.openTime"/>
+                      </template>
+                    </el-form-item>
+                  </el-col>
+                  <el-col v-if="formData.isEnable == '1'" :span="24">
+                    <el-form-item prop="closeTime" label="营业结束：">
+                      <template >
+                        <el-time-select
+                          :picker-options="pickerOptions"
+                          v-model="formData.closeTime"/>
+                      </template>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="24">
+                    <el-form-item>
+                      <el-button type="primary" @click="onSubmit">保存</el-button>
+                    </el-form-item>
+                  </el-col>  
+                  <el-col :span="24">
+                    <el-form-item>
+                      <el-button type="primary" @click="submitCopyMouth">复制到全月并保存</el-button>
+                  </el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </div>     
+          </div>
+       
+        </div> 
+        
+      </el-col>
+    </el-row>
+    <dialog-template ref="modalTemplate" @ok="getList"></dialog-template>
+  </div>
+</template>
+
+<script>
+import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
+import { mapGetters } from "vuex";
+import { tableList } from "./api";
+import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
+import dayjs from "dayjs";
+import {timeCheck }from '@/utils/ruoyi'
+import {editWorkTime,addWorkTimeDay} from "@/views/system/workTimeSet/api";
+import DialogTemplate from './dialog.template'
+
+//初始化查询日期
+
+// let sDate =new Date(dayjs().subtract(1, 'month').startOf('month'));
+// let eDate =  new Date(dayjs().add(1, 'month').endOf('month'));
+export default {
+  // emits: ['selectedDate'],
+  /**  得先引入字典才能使用 */
+  dicts: ["sys_business_type",'sys_org_type'],
+  /** 引入基础minxins*/
+  components: { DataRangePicker, OrgTree,DialogTemplate},
+  data() {
+    return {
+      nowTime: null,
+      isLoadedCalendarDate:false,
+      // 遮罩层
+      loading: false,
+      calendarDate:new Date(),
+      tableList: null,
+      // 显示搜索条件
+      showSearch: true,
+      // 查询参数
+      queryParams: {
+        checkSub: false,
+        orgId: null,
+        pageNum: 1,
+        pageSize: 200,
+        range: [new Date(dayjs().subtract(1, 'month').startOf('month')), new Date(dayjs().add(1, 'month').endOf('month'))],
+        noWorkTime:false,
+      },
+      formData: {},
+      formDataRules: {
+        isEnable: [{ required: true, message: "请选择状态" }],
+        workTime: [{ required: true, message: "请输入上班时间" }],
+        workOffTime: [{ required: true, message: "请输入下班时间" }],
+        openTime: [{ required: true, message: "请输入营业开始时间" }],
+        closeTime: [{ required: true, message: "请输入营业结束时间" }],
+      },
+    };
+  },
+  mounted(){
+      let prevBtn = document.querySelector(
+        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
+      );
+      prevBtn.addEventListener("click", () => {
+        this.judgeDate(this.calendarDate);
+      });
+      let dayBtn = document.querySelector(
+        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
+      );
+      dayBtn.addEventListener("click", () => {
+        this.judgeDate(this.calendarDate);
+      });
+      let nextBtn = document.querySelector(
+        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
+      );
+      nextBtn.addEventListener("click", () => {
+        this.judgeDate(this.calendarDate);
+      });
+
+    let parent = document.querySelector(
+      ".el-calendar__header .el-calendar__button-group .el-button-group"
+    );
+   
+     // 创建一个颜色含义图示
+    let btnDuty =  this.createButton("营业","#4AAE50","10px");
+    let btnUnDuty =  this.createButton("歇业","#9E4646","10px");
+    let btnUnSetWorkTime =  this.createButton("未配置","#B7ACAC","100px");
+    let btnTemplate =  this.createButton("模板配置","#008CD6","10px");
+    btnTemplate.onclick = function(){ // 触发事件
+      showWorkTimeTemp();
+    }
+    var that = this
+    function showWorkTimeTemp(){ // 事件内容
+      that.showTemplateDailog();
+    }
+    parent.insertBefore(btnTemplate,parent.firstChild);   
+    parent.insertBefore(btnUnSetWorkTime,parent.firstChild);    
+    parent.insertBefore(btnUnDuty,parent.firstChild);
+    parent.insertBefore(btnDuty,parent.firstChild);
+  },
+  computed: {
+    ...mapGetters(["orgId"]),
+    pickerOptions() {
+      return {
+        start: "00:00",
+        end: "24:00",
+        step: "00:05",
+      };
+    },
+  },
+  created() {
+    this.getNowTime();
+  },
+  watch:{    
+    calendarDate(val, oldVal) {
+      if (val &&
+        dayjs(val).format("YYYY-MM") != dayjs(oldVal).format("YYYY-MM")) {
+        console.log("calendarDate",val);
+        this.judgeDate(val);
+      }
+    },
+  },
+  methods: {
+    dayjs,
+    createButton(btnContent,backgroundColor,marginRight)
+    {
+      let button = document.createElement("button")
+      button.type = 'button' // 类型
+      button.className = 'el-button el-button--plain el-button--mini' // Calendar默认按钮样式
+      button.textContent = btnContent // 文本
+      button.style.cssText = `background-color: ${backgroundColor};color:white;margin-left:auto;margin-right:${marginRight}` // 样式
+      return button;
+    },
+    showTemplateDailog () {
+        this.$refs.modalTemplate.show(this.queryParams.orgId);
+      },
+    judgeDate(calendarDate){
+      console.log("judgeDate calendarDate",dayjs(calendarDate).format("YYYY-MM-DD"));
+      let sDate =new Date(dayjs(calendarDate).subtract(1, 'month').startOf('month'));
+      let eDate =  new Date(dayjs(calendarDate).add(1, 'month').endOf('month'));
+      this.queryParams.range=[sDate,eDate];
+      this.getList();
+    },
+    selectedDate(data)
+    {
+      console.log('selectedDate--->prefix', data)
+      loadFormData(data.day);
+    },
+    loadFormData(day)
+    {
+      // console.log('selectedDate--->prefix', data)
+      let selectedData = null
+      if(this.tableList && this.tableList.length>0 ){
+        let index= this.tableList.findIndex(x=>x.ymdDate===day);
+        if(index>-1)
+        {
+          selectedData=this.tableList[index]
+          this.formData = selectedData;
+        }
+        else{
+          this.formData =this.reset(day);
+        }
+      }
+      else{
+        this.formData =this.reset(day);
+      }
+      console.log('selectedDate--->suffix', selectedData)
+    },
+    firstLoadFormData(){
+      if(!this.isLoadedCalendarDate){
+            this.loadFormData(dayjs().format("YYYY-MM-DD"));
+            this.isLoadedCalendarDate=true;
+      }
+    },
+    reset(day) {
+      return {
+        orgId:this.queryParams.orgId,
+        isEnable: "1",
+        isDuty:"0",
+        openTime: null,
+        closeTime: null,
+        workTime: null,
+        workOffTime: null,
+        ymdDate:day,
+      };
+    },
+    isSetedWorkTime(data)
+    {
+      // console.log("isSetedWorkTime",data,this.tableList)
+      if(this.tableList && this.tableList.length>0)
+      {
+        // console.log("isSetedWorkTime indexOf",this.tableList.findIndex(x=>x.ymdDate === data.day))
+        if(this.tableList.findIndex(x=>x.ymdDate === data.day)>-1)
+        {
+          return true;
+        }
+      }
+      return false;
+    },
+    getDayClass(data,item)
+    {
+      let tempColorIndex =this.getColorIndexByWorkTime(item);
+      return data.isSelected ? 'is-selected' + ' ' + 'card-text' + tempColorIndex : 'card-text' + tempColorIndex
+    },
+    getColorIndexByWorkTime(item)
+    {
+      if(item)
+        return item.isEnable=="1" ? "2":"3"
+      else
+        return "1";
+    },
+    getDate(day) {
+      return dayjs(day).format('DD')
+    },
+    getNowTime() {
+      const dateObj = new Date(); // 获取当前时间对象
+      const year = dateObj.getFullYear(); // 获取年份
+      const month = String(dateObj.getMonth() + 1).padStart(2, "0"); // 获取月份，并补齐两位数
+      const day = String(dateObj.getDate()).padStart(2, "0"); // 获取日期，并补齐两位数
+      this.nowTime = `${year}-${month}-${day}`;
+    },
+    getDefaultKey(key) {
+      this.queryParams.orgId = key;       
+      this.getList();
+    },
+    /** 下穿状态改变*/
+    changeCheckBox() {
+      this.queryParams.checkSub = !this.queryParams.checkSub;
+      this.getList();
+    },
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      console.log(this.queryParams, "pages");
+      tableList(this.queryParams)
+        .then((response) => {
+          this.tableList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+          this.firstLoadFormData();
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+    },
+   
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.orgId = data.id;      
+      this.getList();
+    },
+    onSubmit() {
+      this.$refs.form.validate((isValidate) => {
+        if (!isValidate) return;
+        if (
+          !timeCheck([
+            this.formData.workTime,
+            this.formData.openTime,
+            this.formData.closeTime,
+            this.formData.workOffTime,
+          ])
+        ) {
+          this.$message.error(
+            `请按照（上班时间<营业时间<营业结束<下班时间）顺序配置`
+          );
+          return false;
+        }
+        editWorkTime(this.formData).then(res=>{
+          this.getList();
+        })
+      });
+    },
+  
+    /* 重置搜索 */
+    resetForm(name) {
+      this.queryParams.isEnable = null;
+      this.queryParams.pageNum = 1;
+      this.queryParams.pageSize = 10;
+      this.queryParams.orgId = this.orgId;
+      this.queryParams.checkSub = true;
+      this.queryParams.noWorkTime=false;
+      this.$refs["orgTree"].setCheckSub(this.queryParams.checkSub)
+      this.queryParams.range = [dayjs().startOf('month'), dayjs().endOf('month')];
+      this.getList();
+    },
+    submitCopyMouth(){
+      if(!this.formData.ymdDate) return this.$message.error('请选择日期');
+      if(this.formData.isEnable === null) return this.$message.error('请选择营业状态');
+      if(this.formData.isEnable == '1'){
+        if(!this.formData.openTime) return this.$message.error('请选择开始时间');
+        if(!this.formData.closeTime) return this.$message.error('请选择结束时间');
+        if(!this.formData.workTime) return this.$message.error('请选择上班时间');
+        if(!this.formData.workOffTime) return this.$message.error('请选择下班时间');
+        if(!timeCheck([this.formData.openTime,this.formData.closeTime])) return this.$message.error('开始时间不能大于结束时间');
+        if(!timeCheck([this.formData.workTime,this.formData.workOffTime])) return this.$message.error('上班时间不能大于下班时间');
+      }
+      let data = {
+          orgIdList:[this.formData.orgId],
+          workTimeList:this.copyDataToMonth()
+        }
+        console.log("submitCopyMouth",data);
+        addWorkTimeDay(data).then(res=>{       
+          this.getList();
+        })
+    },
+    copyDataToMonth()
+    {      
+      let startOfMonthDay= dayjs(this.formData.ymdDate).startOf('month');
+      let endOfMonthDay= dayjs(this.formData.ymdDate).endOf('month');
+      let dataList=[];
+      while(startOfMonthDay.isBefore(endOfMonthDay))
+      {
+        let temp={ ...this.formData}
+        temp.ymdDate=startOfMonthDay.format("YYYY-MM-DD");
+        dataList.push(temp);
+        startOfMonthDay= startOfMonthDay.add(1,'day');
+      }
+      return dataList;
+    }
+  },
+};
+</script>
+<style lang="scss">
+// 更改elementplus组件的样式
+.calendar-dialog {
+  .el-calendar-table .el-calendar-day {
+    padding: 0;
+  }
+
+  .el-icon {
+    height: 8px;
+  }
+
+  .card-group.card-calendar-text {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .el-calendar {
+    box-shadow: 0 0 12px 0 #e4e7ed;
+
+    .el-calendar-table {
+      thead {
+        background-color: #f5f7fa;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+$titleHeight: 20px;
+$lowColor: #4AAE50;
+$middleColor: #B7ACAC;
+$heightColor: #9E4646;
+
+@mixin card-o($bgColor) {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  font-size: 15px;
+  color: #fff;
+  background-color: $bgColor;
+}
+
+@mixin card-text-o($bgColor) {
+  display: flex;
+  justify-content: space-between;
+  height: $titleHeight;
+  max-height: $titleHeight;
+  min-height: $titleHeight;
+  font-size: 20px;
+  color: #fff;
+  background-color: $bgColor;
+}
+
+.calendar-dialog {
+  .card-group {
+    width: 100%;
+    height: 100%;
+
+    .card-calendar-text {
+      height: $titleHeight;
+      max-height: $titleHeight;
+      min-height: $titleHeight;
+    }
+
+    .card {
+      position: relative;
+      top: -$titleHeight;
+    }
+
+    .card-flag {
+      height: calc(100% - $titleHeight);
+    }
+
+    .card1 {
+      @include card-o($middleColor);
+    }
+
+    .card-text1 {
+      @include card-text-o($middleColor);
+    }
+
+    .card2 {
+      @include card-o($lowColor);
+    }
+
+    .card-text2 {
+      @include card-text-o($lowColor);
+    }
+
+    .card3 {
+      @include card-o($heightColor);
+    }
+
+    .card-text3 {
+      @include card-text-o($heightColor);
+    }
+
+    // .card1:focus, .card1:hover {
+    //   background-color:#33a3de
+    // }
+    // .card-text1:focus, .card-text1:hover {
+    //   background-color:#33a3de
+    // }
+
+    .visits-val {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }  
+  .card-group:focus, .card-group:hover {
+      background-color:#33a3de
+  }
+    
+}
+</style>
+

src/views/system/workTimeBankingOffice/json.js

@@ -0,0 +1,100 @@
+export let json = [
+  {
+    "id": null,
+    "isDuty": '0',
+    "workTimeSetId": null,
+    "isWorkday": '1',
+    "dayOfWeek": 2,
+    "dayOfWeekText": "星期一",
+    "workTime": "07:00",
+    "openTime": "09:00",
+    "noonbreakStart": "12:00",
+    "noonbreakEnd": "14:00",
+    "closeTime": "17:00",
+    "workOffTime": "20:00"
+  },
+  {
+    "id": null,
+    "isDuty": '0',
+    "workTimeSetId": null,
+    "isWorkday": '1',
+    "dayOfWeek": 3,
+    "dayOfWeekText": "星期二",
+    "workTime": "07:00",
+    "openTime": "09:00",
+    "noonbreakStart": "12:00",
+    "noonbreakEnd": "14:00",
+    "closeTime": "17:00",
+    "workOffTime": "20:00"
+  },
+  {
+    "id": null,
+    "isDuty": '0',
+    "workTimeSetId": null,
+    "isWorkday": '1',
+    "dayOfWeek": 4,
+    "dayOfWeekText": "星期三",
+    "workTime": "07:00",
+    "openTime": "09:00",
+    "noonbreakStart": "12:00",
+    "noonbreakEnd": "14:00",
+    "closeTime": "17:00",
+    "workOffTime": "20:00"
+  },
+  {
+    "id": null,
+    "isDuty": '0',
+    "workTimeSetId": null,
+    "isWorkday": '1',
+    "dayOfWeek": 5,
+    "dayOfWeekText": "星期四",
+    "workTime": "07:00",
+    "openTime": "09:00",
+    "noonbreakStart": "12:00",
+    "noonbreakEnd": "14:00",
+    "closeTime": "17:00",
+    "workOffTime": "20:00"
+  },
+  {
+    "id": null,
+    "isDuty": '0',
+    "workTimeSetId": null,
+    "isWorkday": '1',
+    "dayOfWeek": 6,
+    "dayOfWeekText": "星期五",
+    "workTime": "07:00",
+    "openTime": "09:00",
+    "noonbreakStart": "12:00",
+    "noonbreakEnd": "14:00",
+    "closeTime": "17:00",
+    "workOffTime": "20:00"
+  },
+  {
+    "id": null,
+    "isDuty": '1',
+    "workTimeSetId": null,
+    "isWorkday": '0',
+    "dayOfWeek": 7,
+    "dayOfWeekText": "星期六",
+    "workTime": null,
+    "openTime": null,
+    "noonbreakStart": null,
+    "noonbreakEnd": null,
+    "closeTime": null,
+    "workOffTime": null
+  },
+  {
+    "id": null,
+    "isDuty": '1',
+    "workTimeSetId": null,
+    "isWorkday": '0',
+    "dayOfWeek": 1,
+    "dayOfWeekText": "星期日",
+    "workTime": null,
+    "openTime": null,
+    "noonbreakStart": null,
+    "noonbreakEnd": null,
+    "closeTime": null,
+    "workOffTime": null
+  }
+]

src/views/system/workTimeSet/index.vue

@@ -8,19 +8,20 @@
       <el-tab-pane label="日期作息配置" name="日期作息配置">
 
       </el-tab-pane>
-     
     </el-tabs>
 
     <work-time v-if="activeName==='日期作息配置'"></work-time>
     <div v-hasPermi="['system:time:week']">
       <work-time-week  v-if="activeName==='每周作息配置'"></work-time-week>
     </div>
+    
   </div>
 </template>
 
 <script>
 import WorkTime from './workTime'
 import WorkTimeWeek from './workTimeWeek'
+
 export default {
   components:{
     WorkTime,