perf: 优化快捷选择

resources/assets/js/pages/manage/components/ApproveExport.vue

@@ -16,7 +16,7 @@
                     format="yyyy/MM/dd"
                     style="width:100%"
                     :placeholder="$L('请选择时间')"/>
-                <div class="form-tip checkin-export-quick-select">
+                <div class="form-tip form-quick-select">
                     <span>{{$L('快捷选择')}}:</span>
                     <em @click="formData.date=dateShortcuts('prev')">{{$L('上个月')}}</em>
                     <em @click="formData.date=dateShortcuts('this')">{{$L('这个月')}}</em>
@@ -36,22 +36,6 @@
     </Modal>
 </template>
 
-<style lang="scss">
-.checkin-export-quick-select {
-    > span {
-        margin-right: 4px;
-    }
-    > em {
-        margin-right: 4px;
-        cursor: pointer;
-        color: #2b85e4;
-        font-style: normal;
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
-</style>
 <script>
 import {mapState} from "vuex";
 

resources/assets/js/pages/manage/components/CheckinExport.vue

@@ -15,7 +15,7 @@
                     format="yyyy/MM/dd"
                     style="width:100%"
                     :placeholder="$L('请选择签到日期')"/>
-                <div class="form-tip checkin-export-quick-select">
+                <div class="form-tip form-quick-select">
                     <span>{{$L('快捷选择')}}:</span>
                     <em @click="formData.date=dateShortcuts('prev')">{{$L('上个月')}}</em>
                     <em @click="formData.date=dateShortcuts('this')">{{$L('这个月')}}</em>
@@ -28,7 +28,7 @@
                     format="HH:mm"
                     style="width:100%"
                     :placeholder="$L('请选择班次时间')"/>
-                <div class="form-tip checkin-export-quick-select">
+                <div class="form-tip form-quick-select">
                     <span>{{$L('快捷选择')}}:</span>
                     <em @click="formData.time=['8:30', '18:00']">8:30-18:00</em>
                     <em @click="formData.time=['9:00', '18:00']">9:00-18:00</em>
@@ -43,22 +43,6 @@
     </Modal>
 </template>
 
-<style lang="scss">
-.checkin-export-quick-select {
-    > span {
-        margin-right: 4px;
-    }
-    > em {
-        margin-right: 4px;
-        cursor: pointer;
-        color: #2b85e4;
-        font-style: normal;
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
-</style>
 <script>
 import UserSelect from "../../../components/UserSelect.vue";
 import {mapState} from "vuex";

resources/assets/js/pages/manage/components/TaskDetail.vue

@@ -500,12 +500,9 @@
                             </Select>
                         </template>
                     </Input>
-                    <div v-if="delayTaskQuick.length > 0" class="form-tip delay-task-quick-select">
+                    <div class="form-tip form-quick-select">
                         <span>{{$L('快捷选择')}}:</span>
-                        <em
+                        <em v-for="(item, index) in delayTaskQuicks" :key="index" @click="onTaskQuick(item.time, item.type)">{{$L(item.name)}}</em>
-                            v-for="(item, index) in delayTaskQuick"
-                            :key="index"
-                            @click="onTaskQuick(item.time, item.type)">{{$L(item.name)}}</em>
                     </div>
                 </FormItem>
                 <FormItem :label="$L('延期备注')" prop="remark">
@@ -534,22 +531,6 @@
     </div>
 </template>
 
-<style lang="scss">
-.delay-task-quick-select {
-    > span {
-        margin-right: 4px;
-    }
-    > em {
-        margin-right: 4px;
-        cursor: pointer;
-        color: #2b85e4;
-        font-style: normal;
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
-</style>
 <script>
 import {mapState} from "vuex";
 import TaskPriority from "./TaskPriority";
@@ -662,15 +643,15 @@ export default {
             updateParams: {},
 
             delayTaskShow: false,
+            delayTaskQuicks: [],
             delayTaskForm: {
                 type: "hour",
                 time: "24",
                 remark: ""
             },
-            delayTaskQuick: [],
             delayTaskRule: {
                 time: [
-                    { required: true,  message: this.$L('请输入时长'), trigger: 'blur', type: 'number' },
+                    { required: true,  message: this.$L('请输入时长'), trigger: 'blur', pattern: /^\d+(\.\d+)?$/ },
                 ],
                 remark: [
                     { required: true, message: this.$L('请输入备注'), trigger: 'blur' },
@@ -1823,12 +1804,23 @@ export default {
         dropDeadline(command) {
             switch (command) {
                 case 1:
-                    this.delayTaskQuick = [
+                    this.delayTaskQuicks = [
                         {time: 1, type: 'day', name: '1天'},
                         {time: 2, type: 'day', name: '2天'},
                         {time: 3, type: 'day', name: '3天'},
                         {time: 5, type: 'day', name: '5天'},
                     ];
+                    const offDuty = $A.dayjs(`${$A.dayjs().format('YYYY-MM-DD')} ${this.systemConfig.task_default_time[1]}`)
+                    const diffEnd = offDuty.diff($A.dayjs(this.taskDetail.end_at), 'hour', true).toFixed(1)
+                    const diffEnd2 = offDuty.diff($A.dayjs(this.taskDetail.end_at).subtract(1, 'day'), 'day', true).toFixed(2)
+                    const quickEnd = {time: diffEnd, type: 'hour', name: `今天下班前`}
+                    const quickEnd2 = {time: diffEnd2, type: 'day', name: `明天下班前`}
+                    if (quickEnd.time > 24) {
+                        quickEnd.type = 'day'
+                        quickEnd.time = (quickEnd.time / 24).toFixed(2)
+                    }
+                    quickEnd2.time > 0 && this.delayTaskQuicks.unshift(quickEnd2)
+                    quickEnd.time > 0 && this.delayTaskQuicks.unshift(quickEnd)
                     this.delayTaskShow = true;
                     break;
                 case 2:

resources/assets/js/pages/manage/components/TaskExport.vue

@@ -15,7 +15,7 @@
                     format="yyyy/MM/dd"
                     style="width:100%"
                     :placeholder="$L('请选择时间')"/>
-                <div class="form-tip checkin-export-quick-select">
+                <div class="form-tip form-quick-select">
                     <span>{{$L('快捷选择')}}:</span>
                     <em @click="formData.time=dateShortcuts('prev')">{{$L('上个月')}}</em>
                     <em @click="formData.time=dateShortcuts('this')">{{$L('这个月')}}</em>
@@ -35,22 +35,6 @@
     </Modal>
 </template>
 
-<style lang="scss">
-.checkin-export-quick-select {
-    > span {
-        margin-right: 4px;
-    }
-    > em {
-        margin-right: 4px;
-        cursor: pointer;
-        color: #2b85e4;
-        font-style: normal;
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-}
-</style>
 <script>
 import UserSelect from "../../../components/UserSelect.vue";
 import {mapState} from "vuex";

resources/assets/sass/pages/common.scss

@@ -872,3 +872,18 @@ body.window-portrait {
         }
     }
 }
+.form-quick-select {
+    > span {
+        margin-right: 4px;
+    }
+    > em {
+        margin-right: 4px;
+        cursor: pointer;
+        color: #2b85e4;
+        font-style: normal;
+        word-break: break-word;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}