请假管理自动计算天数,详情查看

src/views/Home/qjgl/QjglViewForm.vue

@@ -0,0 +1,140 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 70%;">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="请假标题" prop="title">
+            <el-input v-model="formData.title" placeholder="请输入请假标题" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="起草人" prop="userName">
+            <el-input v-model="formData.userName" placeholder="请输入起草人" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="部门" prop="deptId">
+            <el-input v-model="formData.deptName" placeholder="请输入部门信息" disabled/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="开始时间" prop="startTime" readonly>
+            <el-date-picker
+              v-model="formData.startTime"
+              type="datetime"
+              value-format="x"
+              placeholder="选择开始时间"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="结束时间" prop="endTime" >
+            <el-date-picker
+              v-model="formData.endTime"
+              type="datetime"
+              value-format="x"
+              placeholder="选择结束时间"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="请假类型" prop="type" >
+            <el-select v-model="formData.type" placeholder="请选择请假类型" disabled>
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="请假天数" prop="day" >
+            <el-input v-model="formData.day" placeholder="请输入请假天数" disabled/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="请假原因" prop="reason" >
+            <el-input v-model="formData.reason" placeholder="请输入请假原因" style="height: 100px;" disabled/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import {QjglApi} from "@/api/home/qjgl";
+
+const formRef = ref() // 表单 Ref
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  title: undefined,
+  reason: undefined,
+  type: undefined,
+  startTime: undefined,
+  endTime: undefined,
+  day: undefined,
+  filePath: undefined,
+  userName: undefined,
+  deptId: undefined,
+  deptName: undefined,
+  processInstanceId: undefined,
+  userId: undefined,
+  status: undefined
+})
+
+/** 打开弹窗 */
+const open = async (id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = '请假数据预览';
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await QjglApi.getQjgl(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    title: undefined,
+    reason: undefined,
+    type: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    day: undefined,
+    filePath: undefined,
+    userName: undefined,
+    deptId: undefined,
+    deptName: undefined,
+    processInstanceId: undefined,
+    userId: undefined,
+    status: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/Home/xjgl/XjglCreate.vue

@@ -27,34 +27,6 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="销假天数" prop="day">
-            <el-row style="width: 100%;" :gutter="2">
-              <el-col :span="22">
-                <el-input v-model.number="formData.day" placeholder="请输入销假天数" />
-              </el-col>
-              <el-col :span="2">
-                <el-button @click="openForm()" size="small" type="text">
-                  <Icon icon="ep:plus" />
-                </el-button>
-              </el-col>
-            </el-row>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="请假类型" prop="qjglType">
-            <el-select v-model="formData.qjglType" placeholder="请选择请假类型">
-              <el-option
-                v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item label="开始时间" prop="startTime">
@@ -63,6 +35,7 @@
               type="datetime"
               value-format="x"
               placeholder="选择销假开始时间"
+              @change="getDay()"
             />
           </el-form-item>
         </el-col>
@@ -73,13 +46,44 @@
               type="datetime"
               value-format="x"
               placeholder="选择销假结束时间"
+              @change="getDay()"
             />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-form-item label="请假id" prop="qjglId">
+      <el-row>
-        <el-input v-model="formData.qjglId" placeholder="请输入请假id" />
+        <el-col :span="12">
+          <el-form-item label="销假天数" prop="day">
+            <el-row style="width: 100%;margin-bottom: 5px;" :gutter="2">
+              <el-col :span="22">
+                <el-input v-model.number="formData.day" placeholder="请输入销假天数" disabled />
+              </el-col>
+              <el-col :span="2">
+                <el-button @click="openForm()" size="small" type="text">
+                  <Icon icon="ep:plus" />
+                </el-button>
+              </el-col>
+            </el-row>
+            <el-row style="width: 100%;" :gutter="2">
+              <el-col :span="24">
+                <el-link  @click="openQjglForm()" class="mx-1" type="primary">查看详情</el-link>
+              </el-col>
+            </el-row>
           </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="请假类型" prop="qjglType">
+            <el-select v-model="formData.qjglType" placeholder="请选择请假类型" disabled>
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
       <el-form-item label="销假原因" prop="cancelReason">
         <el-input autosize v-model="formData.cancelReason" type="textarea" placeholder="请输入销假原因" />
       </el-form-item>
@@ -93,7 +97,10 @@
       </el-row>
     </template>
   </el-card>
+  <!-- 选择请假数据 -->
   <SelectQjgl ref="selectRef" @success="changeForm"/>
+  <!-- 查看请假数据 -->
+  <QjglViewForm ref="selectQjglRef" />
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
@@ -104,6 +111,7 @@ import {useTagsViewStore} from "@/store/modules/tagsView";
 import {getUserProfile} from "@/api/system/user/profile";
 import {FormProcessMappingApi} from "@/api/bpm/formprocessmapping";
 import SelectQjgl from "@/views/Home/qjgl/SelectQjgl.vue";
+import QjglViewForm from "@/views/Home/qjgl/QjglViewForm.vue";
 
 /** 销假管理 表单 */
 defineOptions({ name: 'XjglForm' })
@@ -116,6 +124,7 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formData = ref({
   id: undefined,
   title: undefined,
+  qjglTitle: undefined,
   userName: undefined,
   userId: undefined,
   deptName: undefined,
@@ -124,7 +133,7 @@ const formData = ref({
   qjglType: undefined,
   startTime: undefined,
   endTime: undefined,
-  day: undefined,
+  day: 0,
   cancelReason: undefined,
   remarks: undefined,
   status: undefined,
@@ -149,15 +158,44 @@ const formRef = ref() // 表单 Ref
 const userInfo = ref('')
 const deptInfo = ref('')
 
+const selectQjglRef = ref()
+const openQjglForm = ()=> {
+  selectQjglRef.value.open(formData.value.qjglId);
+}
+
 /** 添加/修改操作 车辆选择 */
 const selectRef = ref()
 const openForm = () => {
   selectRef.value.open()
 }
 
+const oneDay = 24 * 60 * 60 * 1000;
+
+const getDay = ()=> {
+  if (formData.value.startTime && formData.value.endTime) {
+    const startTime = formData.value.startTime
+    const endTime = formData.value.endTime
+    if (startTime > endTime) {
+      formData.value.endTime = undefined
+      message.error("开始时间必须大于结束时间")
+      return;
+    }
+    const timeDiff = endTime - startTime;
+    if (timeDiff != undefined && timeDiff > 0) {
+      formData.value.day = Math.floor(timeDiff / oneDay);
+    }else {
+      formData.value.startTime = undefined
+      formData.value.endTime = undefined
+      message.error("开始时间必须大于结束时间")
+      return;
+    }
+  }
+}
+/** 获取数据后赋值 */
 const changeForm = (val:any) => {
   const form = formData.value
   form.qjglId = val.id
+  form.qjglTitle = val.title
   form.qjglType = val.type
   form.startTime = val.startTime
   form.endTime = val.endTime

src/views/Home/xjgl/XjglDetail.vue

@@ -24,25 +24,6 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="销假天数" prop="day">
-            <el-input v-model="formData.day" placeholder="请输入销假天数" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="请假类型" prop="qjglType">
-            <el-select v-model="formData.qjglType" placeholder="请选择请假类型" disabled>
-              <el-option
-                v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item label="开始时间" prop="startTime">
@@ -67,9 +48,34 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-form-item label="请假id" prop="qjglId">
+      <el-row>
-        <el-input v-model="formData.qjglId" placeholder="请输入请假id" disabled />
+        <el-col :span="12">
+          <el-form-item label="销假天数" prop="day">
+            <el-row style="width: 100%; margin-bottom: 5px">
+              <el-col :span="24">
+                <el-input v-model="formData.day" placeholder="请输入销假天数" disabled />
+              </el-col>
+            </el-row>
+            <el-row style="width: 100%;">
+              <el-col :span="24">
+                <el-link  @click="openQjglForm()" class="mx-1" type="primary">查看详情</el-link>
+              </el-col>
+            </el-row>
           </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="请假类型" prop="qjglType">
+            <el-select v-model="formData.qjglType" placeholder="请选择请假类型" disabled>
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
       <el-form-item label="销假原因" prop="cancelReason">
         <el-input v-model="formData.cancelReason" type="textarea" placeholder="请输入销假原因" disabled />
       </el-form-item>
@@ -78,11 +84,13 @@
       </el-form-item>
     </el-form>
   </el-card>
+  <QjglViewForm ref="selectQjglRef" />
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { propTypes } from '@/utils/propTypes'
 import { XjglApi } from '@/api/home/xjgl'
+import QjglViewForm from "@/views/Home/qjgl/QjglViewForm.vue";
 
 /** 销假管理 表单 */
 defineOptions({ name: 'XjglForm' })
@@ -127,6 +135,10 @@ const formRules = reactive({
 })
 const formRef = ref() // 表单 Ref
 
+const selectQjglRef = ref()
+const openQjglForm = ()=> {
+  selectQjglRef.value.open(formData.value.qjglId);
+}
 /** 打开弹窗 */
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗