feat: 增加班次

config/proxyList.js

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2018-10-10 14:44:45
  * @LastEditors: 无尘
- * @LastEditTime: 2019-12-09 15:21:49
+ * @LastEditTime: 2019-12-13 09:47:27
  */
 module.exports = {
   proxyList: {
@@ -36,6 +36,13 @@ module.exports = {
         '^/haoban-app-material-web': ''
       }
     },
+    '/haoban-app-attence-web/': {
+      target: 'https://www.gicdev.com/haoban-app-attence-web/',
+      changeOrigin: true,
+      pathRewrite: {
+        '^/haoban-app-attence-web': ''
+      }
+    },
     '/haoban-app-tel-task-web/': {
       target: 'https://www.gicdev.com/haoban-app-tel-task-web/',
       changeOrigin: true,

src/components/app/dailyAttendance/create-work-class.vue

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2019-10-21 14:27:29
  * @LastEditors: 无尘
- * @LastEditTime: 2019-12-12 18:29:01
+ * @LastEditTime: 2019-12-13 17:08:36
  -->
 
 <!--
@@ -20,11 +20,11 @@ import createWorkClass from '@/components/app/dailyAttendance/create-work-class.
     <el-dialog class="edit-dialog" :title="classesId ? '编辑班次' : '新建班次'" :visible.sync="customDialog" width="820px" :before-close="handleClose">
       <div class="edit-dialog-body">
         <el-form label-width="114px" :model="formData" ref="ruleForm" :rules="rules">
-          <el-form-item label="班次名称：" prop="">
-            <limitInput :inputWidth="210" :inputValue.sync="formData.classifyName" :holder="'请输入分类名称'" :getByType="'word'" :maxLength="10"> </limitInput>
+          <el-form-item label="班次名称：" prop="classesName">
+            <limitInput :inputWidth="210" :inputValue.sync="formData.classesName" :holder="'请输入班次名称'" :getByType="'word'" :maxLength="10"> </limitInput>
           </el-form-item>
-          <el-form-item label="次数限制：" prop="">
-            <div class="times-set-wrap avatar-wrapm-b-20">
+          <el-form-item label="次数限制：" prop="times">
+            <div class="times-set-wrap avatar-wrap m-b-10">
               <el-radio-group v-model="formData.times" @change="changeTimes">
                 <el-radio-button label="1">1天1次上下班</el-radio-button>
                 <!-- <el-radio-button label="2">1天2次上下班</el-radio-button>
@@ -36,12 +36,13 @@ import createWorkClass from '@/components/app/dailyAttendance/create-work-class.
                 <li v-for="(item, index) in formData.classessTimesJson" :key="index + 'time'">
                   <span>第{{ index + 1 }}次</span>
                   <span class="font-12 color-606266">上班</span>
-                  <el-time-picker :editable="false" class="w-106" v-model="item.startTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
+                  <el-time-picker :clearable="false" :editable="false" class="w-106" v-model="item.startTime" format="HH:mm" value-format="HH:mm" @change="changeStart($event, item)"> </el-time-picker>
                   <span class="font-12 color-606266">下班</span>
-                  <el-time-picker :editable="false" class="w-106" v-model="item.endTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
+                  <el-time-picker :clearable="false" :editable="false" class="w-106" v-model="item.endTime" format="HH:mm" value-format="HH:mm" @change="changeEnd($event, item)"> </el-time-picker>
+                  <el-tag v-if="Number(item.endTime.split(':')[0]) <= Number(item.startTime.split(':')[0]) && Number(item.endTime.split(':')[1]) <= Number(item.startTime.split(':')[1])" class="across-tag" type="danger">次日</el-tag>
                 </li>
               </ul>
-              <div v-if="formData.clockType" class="m-t-10">
+              <div v-if="formData.clockType">
                 <el-table :data="formData.classessTimesJson" style="width: 100%">
                   <el-table-column prop="" label="" width="70">
                     <template slot-scope="scope">
@@ -52,28 +53,78 @@ import createWorkClass from '@/components/app/dailyAttendance/create-work-class.
                     <template slot-scope="scope">
                       <div class="cell">
                         <span class="font-12 color-606266">上班</span>
-                        <el-time-picker :editable="false" class="w-106" v-model="scope.row.startTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
-                        <el-tag class="across-tag" type="danger">次日</el-tag>
+                        <el-time-picker :clearable="false" :editable="false" class="w-106" v-model="scope.row.startTime" format="HH:mm" value-format="HH:mm" @change="changeStart($event, scope.row)"> </el-time-picker>
+                        <el-tag v-if="scope.$index > 0" class="across-tag" type="danger">次日</el-tag>
                       </div>
                       <div class="cell m-t-20">
                         <span class="font-12 color-606266">下班</span>
-                        <el-time-picker :editable="false" class="w-106" v-model="scope.row.endTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
-                        <el-tag class="across-tag" type="danger">次日</el-tag>
+                        <el-time-picker :clearable="false" :editable="false" class="w-106" v-model="scope.row.endTime" format="HH:mm" value-format="HH:mm" @change="changeEnd($event, scope.row)"> </el-time-picker>
+                        <el-tag v-if="Number(scope.row.endTime.split(':')[0]) <= Number(scope.row.startTime.split(':')[0]) && Number(scope.row.endTime.split(':')[1]) <= Number(scope.row.startTime.split(':')[1])" class="across-tag" type="danger">次日</el-tag>
                       </div>
                     </template>
                   </el-table-column>
                   <el-table-column prop="address" label="打卡时间范围限制">
                     <template slot-scope="scope">
                       <div class="cell">
-                        <el-time-picker :editable="false" class="w-106" v-model="scope.row.allowStartBeginTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
+                        <el-time-picker
+                          :disabled="scope.row.startTime == scope.row.endTime"
+                          :picker-options="{
+                            selectableRange: scope.row.forbidStartBeginTime
+                          }"
+                          :clearable="false"
+                          :editable="false"
+                          class="w-106"
+                          v-model="scope.row.allowStartBeginTime"
+                          format="HH:mm"
+                          value-format="HH:mm"
+                          placeholder=""
+                        >
+                        </el-time-picker>
                         <span class="font-12 color-606266">至</span>
-                        <el-time-picker :editable="false" class="w-106" v-model="scope.row.allowStartEndTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
+                        <el-time-picker
+                          :clearable="false"
+                          :picker-options="{
+                            selectableRange: scope.row.forbidStartEndTime
+                          }"
+                          :editable="false"
+                          class="w-106"
+                          v-model="scope.row.allowStartEndTime"
+                          format="HH:mm"
+                          value-format="HH:mm"
+                          placeholder=""
+                        >
+                        </el-time-picker>
                         <span class="font-12 color-606266">可打上班卡</span>
                       </div>
                       <div class="cell m-t-20">
-                        <el-time-picker :editable="false" class="w-106" v-model="scope.row.allowEndStartTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
+                        <el-time-picker
+                          :clearable="false"
+                          :picker-options="{
+                            selectableRange: scope.row.forbidEndStartTime
+                          }"
+                          :editable="false"
+                          class="w-106"
+                          v-model="scope.row.allowEndStartTime"
+                          format="HH:mm"
+                          value-format="HH:mm"
+                          placeholder=""
+                        >
+                        </el-time-picker>
                         <span class="font-12 color-606266">至</span>
-                        <el-time-picker :editable="false" class="w-106" v-model="scope.row.allowEndEndTime" format="HH:mm" value-format="HH:mm" placeholder=""> </el-time-picker>
+                        <el-time-picker
+                          :disabled="scope.row.startTime == scope.row.endTime"
+                          :picker-options="{
+                            selectableRange: scope.row.forbidEndEndTime
+                          }"
+                          :clearable="false"
+                          :editable="false"
+                          class="w-106"
+                          v-model="scope.row.allowEndEndTime"
+                          format="HH:mm"
+                          value-format="HH:mm"
+                          placeholder=""
+                        >
+                        </el-time-picker>
                         <span class="font-12 color-606266">可打下班卡</span>
                       </div>
                     </template>
@@ -83,24 +134,27 @@ import createWorkClass from '@/components/app/dailyAttendance/create-work-class.
             </div>
             <div v-if="formData.times == 1" class="rest-time-set">
               <el-checkbox v-model="formData.relaxFlag">休息时间</el-checkbox>
-              <el-time-picker v-if="formData.relaxFlag" :editable="false" class="w-120" v-model="formData.relaxStartDate" format="HH:mm" value-format="HH:mm" placeholder="休息开始"> </el-time-picker><el-time-picker v-if="formData.relaxFlag" :editable="false" class="w-120 m-l-20" v-model="formData.relaxEndDate" format="HH:mm" value-format="HH:mm" placeholder="休息结束"> </el-time-picker>
+              <el-time-picker :clearable="false" v-if="formData.relaxFlag" :editable="false" class="w-120" v-model="formData.relaxStartDate" format="HH:mm" value-format="HH:mm" placeholder="休息开始"> </el-time-picker><el-time-picker v-if="formData.relaxFlag" :clearable="false" :editable="false" class="w-120 m-l-20" v-model="formData.relaxEndDate" format="HH:mm" value-format="HH:mm" placeholder="休息结束"> </el-time-picker>
             </div>
           </el-form-item>
           <el-form-item label="个性化设置：" prop="">
             <div class="m-b-10">
               <el-checkbox v-model="formData.isAllowLate">允许迟到</el-checkbox>
               <el-input-number v-if="formData.isAllowLate" class="w-90 m-l-20" v-model="formData.allowLateDate" controls-position="right" :min="1" :max="3600"></el-input-number>
+              <span v-if="formData.isAllowLate" class="font-14 color-606266">分钟以内打上班卡不算迟到</span>
             </div>
             <div class="m-b-10">
               <el-checkbox v-model="formData.isMostLate">严重迟到</el-checkbox>
               <el-input-number v-if="formData.isMostLate" class="w-90 m-l-20" v-model="formData.mostLateDate" controls-position="right" :min="1" :max="3600"></el-input-number>
+              <span v-if="formData.isMostLate" class="font-14 color-606266">分钟以上打上班卡算严重迟到</span>
             </div>
             <div class="m-b-10">
               <el-checkbox v-model="formData.isMoreLate">旷工迟到</el-checkbox>
               <el-input-number v-if="formData.isMoreLate" class="w-90 m-l-20" v-model="formData.moreLateDate" controls-position="right" :min="1" :max="3600"></el-input-number>
+              <span v-if="formData.isMoreLate" class="font-14 color-606266">分钟以上打上班卡算旷工</span>
             </div>
             <div class="m-b-10">
-              <el-checkbox v-model="formData.lateRule" @change="handleChangeLate">晚走次日晚到</el-checkbox>
+              <el-checkbox :disabled="maxLate < 1.5" v-model="formData.lateRule" @change="handleChangeLate">晚走次日晚到</el-checkbox>
               <span class="font-12 color-909399 p-l-10">仅支持固定班制内勤打卡</span>
             </div>
             <div v-if="formData.lateRule" class="late-rule-wrap border-box">
@@ -116,7 +170,7 @@ import createWorkClass from '@/components/app/dailyAttendance/create-work-class.
                     <span class="font-12 color-909399">小时，第二天上班后晚到</span>
                     <el-input-number class="w-90" v-model="item.allowLateDate" controls-position="right" :step="0.5" :min="1" :max="maxLate"></el-input-number>
                     <span class="font-12 color-909399">小时</span>
-                    <span class="font-12 color-909399">第一天00:30(次日)下班，第二天19:00上班不算迟到</span>
+                    <span class="font-12 color-909399">第一天{{ hmPlushm(formData.classessTimesJson[formData.classessTimesJson.length - 1].endTime, hourTohm(item.lateDate)) }}(次日)下班，第二天{{ hmPlushm(formData.classessTimesJson[0].startTime, hourTohm(item.allowLateDate)) }}上班不算迟到</span>
                   </div>
                 </li>
                 <li v-if="formData.lateRuleJson.length < 3" class="text-center cursor-pointer" @click.stop="addLateSet"><i class="el-icon-plus color-1890ff"></i><span class="color-1890ff font-14 p-l-10">新建晚走规则</span></li>
@@ -182,26 +236,30 @@ export default {
             startTime: '9:00',
             endTime: '18:00',
             allowStartBeginTime: '',
+            forbidStartBeginTime: [],
             allowStartEndTime: '',
+            forbidStartEndTime: [],
             allowEndStartTime: '',
-            allowEndEndTime: ''
+            forbidEndStartTime: [],
+            allowEndEndTime: '',
+            forbidEndEndTime: []
           }
         ],
         clockType: false, // 1/0 打开时间段设置
-        relaxFlag: '', // 休息时间
-        relaxStartDate: '',
-        relaxEndDate: '',
+        relaxFlag: false, // 休息时间
+        relaxStartDate: '12:00',
+        relaxEndDate: '13:00',
         isAllowLate: false, // 允许迟到
         isMostLate: false, // 严重迟到
         isMoreLate: false, // 旷工迟到
-        allowLateDate: '', // 允许迟到 分
-        mostLateDate: '', // 严重迟到 分
-        moreLateDate: '', // 旷工迟到 分
+        allowLateDate: '30', // 允许迟到 分
+        mostLateDate: '35', // 严重迟到 分
+        moreLateDate: '60', // 旷工迟到 分
         lateRule: false, // 晚走次日晚到
         lateRuleJson: []
       },
       rules: {
-        classesName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
+        classesName: [{ required: true, message: '请输入班次名称', trigger: 'blur' }],
         times: [{ required: true, validator: checkTime, trigger: 'change' }]
       },
       // 动态计算晚到时间
@@ -258,6 +316,137 @@ export default {
       }
     },
     /**
+     * 小时转换成时分
+     */
+    hourTohm(hours) {
+      let hourMin = `${String(hours)}:00`;
+      if (String(hours).includes('.')) {
+        hourMin = `${String(hours).split('.')[0]}:${(String(hours).split('.')[1] * 60) / 10}`;
+      }
+      return hourMin;
+    },
+    /**
+     * 时分+时分 = 时分
+     */
+    hmPlushm(hm, hours) {
+      let hourMin = String(hm);
+      let hoursHm = String(hours);
+      // 时位相加
+      let lastHour = parseInt(hourMin.split(':')[0]) + parseInt(hoursHm.split(':')[0]);
+      // 分为相加
+      let lastMin = parseInt(hourMin.split(':')[1]) + parseInt(hoursHm.split(':')[1]);
+      if (lastMin >= 60) {
+        lastMin = lastMin - 60;
+        lastHour = lastHour + 1;
+      }
+      if (lastHour >= 24) {
+        lastHour = lastHour - 24;
+      }
+      return `${lastHour < 10 ? '0' + lastHour : lastHour}:${lastMin < 10 ? '0' + lastMin : lastMin}`;
+    },
+    /**
+     * 时分-时分 = 时分
+     */
+    hmMinuxhm(hm, hours) {
+      let hourMin = String(hm);
+      let hoursHm = String(hours);
+      // 时位相减
+      let lastHour = parseInt(hourMin.split(':')[0]) - parseInt(hoursHm.split(':')[0]);
+      // 分为相减
+      let lastMin = parseInt(hourMin.split(':')[1]) - parseInt(hoursHm.split(':')[1]);
+      if (lastMin < 0) {
+        lastMin = lastMin + 60;
+        lastHour = lastHour - 1;
+      }
+      if (lastHour < 0) {
+        lastHour = lastHour + 24;
+      }
+      return `${lastHour < 10 ? '0' + lastHour : lastHour}:${lastMin < 10 ? '0' + lastMin : lastMin}`;
+    },
+    /**
+     * 时分计算
+     */
+    timeDifference(startTime, endTime) {
+      const start1 = startTime.split(':');
+      const startAll = parseInt(start1[0] * 60) + parseInt(start1[1]);
+      const end1 = endTime.split(':');
+      const endAll = parseInt(end1[0] * 60) + parseInt(end1[1]);
+      return Number((endAll - startAll) / 60).toFixed(1);
+    },
+    /**
+     * 时分比较
+     */
+    compareDate(t1, t2) {
+      let date = new Date();
+      let a = t1.split(':');
+      let b = t2.split(':');
+      return date.setHours(a[0], a[1]) < date.setHours(b[0], b[1]);
+    },
+    /**
+     * 计算禁用区间
+     */
+    async calcForbidTime(item) {
+      const that = this;
+      let arr = [];
+      let rangeStart = await that.hmMinuxhm(item.startTime, await that.hourTohm(8));
+      let rangeEnd = await that.hmMinuxhm(item.startTime, '00:01');
+      // 比较开始于结束，如果开始大于结束，分段计算
+      if (!(await that.compareDate(rangeStart, rangeEnd))) {
+        arr.push([rangeStart + ':00', '23:59:00'].join('-'));
+        arr.push(['00:00:00', rangeEnd + ':00'].join('-'));
+        return arr;
+      }
+      return [[rangeStart + ':00', rangeEnd + ':00'].join('-')];
+    },
+    /**
+     *  改变上班时间
+     */
+    async changeStart(e, item) {
+      const that = this;
+      let hours = 10;
+      console.log(e);
+      const startTime = e;
+      const endTime = that.formData.classessTimesJson[0].endTime;
+      if (await that.compareDate(startTime, endTime)) {
+        hours = await that.timeDifference(startTime, endTime);
+      }
+      // 计算时间间隔
+      that.maxLate = hours - 0.5; // 可设置的时间数必须小于最大的限制数 0.5
+      console.log(that.maxLate);
+      if (that.maxLate < 1.5) {
+        that.formData.lateRule = false; // 最大时间间隔小于 2小时，不能设置晚到规则
+        that.formData.lateRuleJson = [];
+      }
+      // 计算当前禁用时间段
+      console.log(await that.calcForbidTime(item));
+      item.forbidStartBeginTime = await that.calcForbidTime(item); //await that.calcForbidTime(item);
+      item.forbidStartEndTime = ['18:30:00 - 20:30:00'];
+      item.forbidEndStartTime = ['18:30:00 - 20:30:00'];
+      item.forbidEndEndTime = ['18:30:00 - 20:30:00'];
+      console.log(item);
+      that.$forceUpdate();
+    },
+    /**
+     *  改变下班时间
+     */
+    async changeEnd(e, item) {
+      const that = this;
+      let hours = 10;
+      console.log(e);
+      const startTime = that.formData.classessTimesJson[0].startTime;
+      const endTime = e;
+      if (await that.compareDate(startTime, endTime)) {
+        hours = await that.timeDifference(startTime, endTime);
+      }
+      // 计算时间间隔
+      that.maxLate = hours - 0.5; // 可设置的时间数必须小于最大的限制数 0.5
+      console.log(that.maxLate);
+      if (that.maxLate < 1.5) {
+        that.formData.lateRule = false; // 最大时间间隔小于 2小时，不能设置晚到规则
+        that.formData.lateRuleJson = [];
+      }
+    },
+    /**
      *   开启晚走规则
      */
     handleChangeLate(e) {
@@ -307,10 +496,80 @@ export default {
       that.hideDialog();
     },
     /**
+     *  判断晚到
+     */
+    checkLateSet() {
+      const that = this;
+      let flag = true;
+      let start = [];
+      let end = [];
+      that.formData.lateRuleJson.forEach(ele => {
+        start.push(ele.lateDate);
+        end.push(ele.allowLateDate);
+      });
+
+      for (let i = 0; i < start.length - 1; i++) {
+        for (let j = i + 1; j < start.length; j++) {
+          if (start[i] >= start[j]) {
+            flag = false;
+            break;
+          }
+        }
+        if (!flag) {
+          break;
+        }
+      }
+      for (let i = 0; i < end.length - 1; i++) {
+        for (let j = i + 1; j < end.length; j++) {
+          if (end[i] >= end[j]) {
+            flag = false;
+            break;
+          }
+        }
+        if (!flag) {
+          break;
+        }
+      }
+      return flag;
+    },
+    /**
      * 提交
      */
-    customConfirm: _debounce(function(formName) {
+    customConfirm: _debounce(async function(formName) {
       const that = this;
+      if (that.formData.relaxFlag && (!that.formData.relaxStartDate || !that.formData.relaxEndDate)) {
+        showMsg.showmsg('请填写休息时间', 'warning');
+        return false;
+      }
+      if (that.formData.isAllowLate && !that.formData.allowLateDate) {
+        showMsg.showmsg('请填写允许迟到时间', 'warning');
+        return false;
+      }
+      if (that.formData.isMostLate && !that.formData.mostLateDate) {
+        showMsg.showmsg('请填写严重迟到时间', 'warning');
+        return false;
+      }
+      if (that.formData.isAllowLate && that.formData.isMostLate && that.formData.allowLateDate >= that.formData.mostLateDate) {
+        showMsg.showmsg('严重迟到时间必须大于迟到允许时间', 'warning');
+        return false;
+      }
+      if (that.formData.isMoreLate && !that.formData.moreLateDate) {
+        showMsg.showmsg('请填写旷工迟到时间', 'warning');
+        return false;
+      }
+      if (that.formData.isMoreLate && that.formData.isMostLate && that.formData.mostLateDate >= that.formData.moreLateDate) {
+        showMsg.showmsg('旷工迟到时间必须大于严重迟到时间', 'warning');
+        return false;
+      }
+      // 晚到
+      let lateFlag = true;
+      if (that.formData.lateRule && that.formData.lateRuleJson.length > 1) {
+        lateFlag = await that.checkLateSet();
+      }
+      if (!lateFlag) {
+        showMsg.showmsg('晚走晚到后面的规则时间必须大于前面的时间', 'warning');
+        return false;
+      }
       that.$refs[formName].validate(valid => {
         if (valid) {
           that.setData();
@@ -327,7 +586,22 @@ export default {
       const that = this;
       let para = {
         classesId: that.conditionObj.classesId,
-        enterpriseId: that.enterpriseId
+        enterpriseId: that.enterpriseId,
+        classesName: that.formData.classesName, // 班次名称
+        times: that.formData.times, // 次数设置
+        classessTimesJson: JSON.stringify(that.formData.classessTimesJson),
+        clockType: that.formData.clockType ? 1 : 0, // 1/0 打开时间段设置
+        relaxFlag: that.formData.relaxFlag ? 1 : 0, // 休息时间
+        relaxStartDate: that.formData.relaxStartDate,
+        relaxEndDate: that.formData.relaxEndDate,
+        isAllowLate: that.formData.isAllowLate ? 1 : 0, // 允许迟到
+        isMostLate: that.formData.isMostLate ? 1 : 0, // 严重迟到
+        isMoreLate: that.formData.isMoreLate ? 1 : 0, // 旷工迟到
+        allowLateDate: that.formData.allowLateDate, // 允许迟到 分
+        mostLateDate: that.formData.mostLateDate, // 严重迟到 分
+        moreLateDate: that.formData.moreLateDate, // 旷工迟到 分
+        lateRule: that.formData.lateRule ? 1 : 0, // 晚走次日晚到
+        lateRuleJson: JSON.stringify(that.formData.lateRuleJson)
       };
       postRequest(that.conditionObj.classesId ? '/haoban-app-attence-web/classes-edit' : '/haoban-app-attence-web/classes-add', para)
         .then(res => {
@@ -492,9 +766,15 @@ export default {
   }
   .el-form {
     margin-top: 0px;
+    .times-set-content {
+      ul {
+        padding: 10px 0;
+        background: rgba(247, 248, 250, 1);
+      }
+    }
     .late-rule-wrap {
       width: 100%;
-      padding-left: 20px;
+      // padding-left: 20px;
       ul {
         padding: 10px 17px;
         background: rgba(247, 248, 250, 1);