请假

src/views/Home/qjgl/QjglCreate.vue

@@ -1,4 +1,5 @@
 <template>
+  <ContentWrap>
 <!--  <Dialog :title="dialogTitle" v-model="dialogVisible">-->
     <el-form
       ref="formRef"
@@ -7,12 +8,46 @@
       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="请输入请假标题" />
         </el-form-item>
-      <el-form-item label="请假原因" prop="reason">
+      </el-col>
-        <el-input v-model="formData.reason" placeholder="请输入请假原因" />
+      <el-col :span="12">
+        <el-form-item label="起草人" prop="userName">
+          <el-input v-model="formData.userName" placeholder="请输入起草人" />
         </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="部门" prop="deptId">
+          <el-input v-model="formData.deptId" placeholder="请输入部门信息" v-show="false"  />
+          <div class="pull-left" v-show="true" v-if="userInfo?.dept">{{ userInfo?.dept.name }} </div>
+          <div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo?.name }} </div>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker
+              v-model="formData.startTime"
+              type="datetime"
+              value-format="x"
+              placeholder="选择开始时间"
+          />
+        </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="选择结束时间"
+          />
+        </el-form-item>
+      </el-col>
+
+      <el-col :span="12">
         <el-form-item label="请假类型" prop="type">
           <el-select v-model="formData.type" placeholder="请选择请假类型">
             <el-option
@@ -23,44 +58,38 @@
             />
           </el-select>
         </el-form-item>
-      <el-form-item label="开始时间" prop="startTime">
+      </el-col>
-        <el-date-picker
+      <el-col :span="12">
-          v-model="formData.startTime"
-          type="date"
-          value-format="x"
-          placeholder="选择开始时间"
-        />
-      </el-form-item>
-      <el-form-item label="结束时间" prop="endTime">
-        <el-date-picker
-          v-model="formData.endTime"
-          type="date"
-          value-format="x"
-          placeholder="选择结束时间"
-        />
-      </el-form-item>
         <el-form-item label="请假天数" prop="day">
           <el-input v-model="formData.day" placeholder="请输入请假天数" />
         </el-form-item>
-      <el-form-item label="文件路径" prop="filePath">
+      </el-col>
-        <el-input v-model="formData.filePath" placeholder="请输入文件路径" />
+<!--      <el-form-item label="文件路径" prop="filePath">-->
-      </el-form-item>
+<!--        <el-input v-model="formData.filePath" placeholder="请输入文件路径" />-->
-      <el-form-item label="作者" prop="userName">
+<!--      </el-form-item>-->
-        <el-input v-model="formData.userName" placeholder="请输入作者" />
+
-      </el-form-item>
+
-      <el-form-item label="部门id" prop="deptId">
-        <el-input v-model="formData.deptId" placeholder="请输入部门id" />
-      </el-form-item>
 <!--      <el-form-item label="申请人的用户编号" prop="userId">-->
 <!--        <el-input v-model="formData.userId" placeholder="请输入申请人的用户编号" />-->
 <!--      </el-form-item>-->
-
+      <el-col :span="24">
+        <el-form-item label="请假原因" prop="reason">
+          <el-input v-model="formData.reason" placeholder="请输入请假原因" style="height: 100px;" />
+        </el-form-item>
+      </el-col>
+      </el-row>
+    </el-form>
+  <el-form>
+    <el-form-item>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+    </el-form-item>
   </el-form>
 <!--    <template #footer>-->
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+<!--      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>-->
 <!--      <el-button @click="dialogVisible = false">取 消</el-button>-->
 <!--    </template>-->
 <!--  </Dialog>-->
+  </ContentWrap>
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
@@ -69,6 +98,8 @@ import { QjglApi, QjglVO } from '@/api/home/qjgl'
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as UserApi from '@/api/system/user'
 import {useTagsViewStore} from "@/store/modules/tagsView";
+import {getUserProfile, ProfileVO} from "@/api/system/user/profile";
+import {DeptVO, getDept} from "@/api/system/dept";
 /** 请假管理 表单 */
 defineOptions({ name: 'QjglCreate' })
 
@@ -89,22 +120,24 @@ const formData = ref({
   endTime: undefined,
   day: undefined,
   filePath: undefined,
-  userName: undefined,
+  userName: '',
-  deptId: undefined,
+  deptId: '',
   processInstanceId: undefined,
   userId: undefined,
   status: undefined
 })
 const formRules = reactive({
-  reason: [{ required: true, message: '请假原因不能为空', trigger: 'blur' }],
+  title: [{ required: true, message: '请假标题不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
   startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
   endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
   day: [{ required: true, message: '请假天数不能为空', trigger: 'blur' }],
-  userName: [{ required: true, message: '作者不能为空', trigger: 'blur' }]
+  userName: [{ required: true, message: '起草人不能为空', trigger: 'blur' }],
+  deptId: [{ required: true, message: '部门不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-
+const userInfo = ref({} as ProfileVO )
+const deptInfo = ref({} as DeptVO )
 /** 打开弹窗 */
 // const open = async (type: string, id?: number) => {
 //   dialogVisible.value = true
@@ -122,6 +155,24 @@ const formRef = ref() // 表单 Ref
 //   }
 // }
 // defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+const getUserInfo = async () => {
+  if ( formData.value.deptId == '' ){
+    const users = await getUserProfile()
+    userInfo.value = users
+    formData.value.deptId= users.dept.id
+
+    deptInfo.value = {} as DeptVO
+  }else{
+    const dept = await getDept(formData.value.deptId)
+    deptInfo.value = dept
+    userInfo.value = {} as ProfileVO
+  }
+  if (formData.value.userName == ''){
+    const users = await getUserProfile()
+    formData.value.userName= users.nickname
+  }
+
+}
 //flow begin++++++++++++++++++++
 // 指定审批人
 const processDefineKey = 'pch-qjgl-001' // 流程定义 Key
@@ -151,7 +202,10 @@ const submitForm = async () => {
     }
 
     await QjglApi.createQjgl(data)
-    message.success(t('common.createSuccess'))
+    message.success(t('发起成功！'))
+    // 关闭当前 Tab
+    delView(unref(currentRoute))
+   // await push({ name: 'Qjglindex' })
 
   } finally {
     formLoading.value = false
@@ -169,8 +223,8 @@ const resetForm = () => {
     endTime: undefined,
     day: undefined,
     filePath: undefined,
-    userName: undefined,
+    userName: '',
-    deptId: undefined,
+    deptId: '',
     processInstanceId: undefined,
     userId: undefined,
     status: undefined
@@ -179,7 +233,7 @@ const resetForm = () => {
 }
 /** 初始化 */
 onMounted(async () => {
-  // await getUserInfo()
+ await getUserInfo()
   // await getKnowtypeTree()
   console.log(processDefineKey,"key1")
   const processDefinitionDetail = await DefinitionApi.getProcessDefinition(

src/views/Home/qjgl/QjglDetail.vue

@@ -1,4 +1,6 @@
 <template>
+  <ContentWrap>
+    <!--  <Dialog :title="dialogTitle" v-model="dialogVisible">-->
     <el-form
         ref="formRef"
         :model="formData"
@@ -6,14 +8,50 @@
         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="请输入请假标题"  readonly/>
+            <el-input v-model="formData.title" placeholder="请输入请假标题" readonly />
           </el-form-item>
-      <el-form-item label="请假原因" prop="reason">
+        </el-col>
-        <el-input v-model="formData.reason" placeholder="请输入请假原因"  readonly/>
+        <el-col :span="12">
+          <el-form-item label="起草人" prop="userName">
+            <el-input v-model="formData.userName" placeholder="请输入起草人" readonly />
           </el-form-item>
-      <el-form-item label="请假类型" prop="type">
+        </el-col>
-        <el-select v-model="formData.type" placeholder="请选择请假类型"  :disabled="isReadOnly" >
+        <el-col :span="12">
+          <el-form-item label="部门" prop="deptId">
+            <el-input v-model="formData.deptId" placeholder="请输入部门" v-show="false"  />
+            <div class="pull-left" v-show="true" v-if="userInfo?.dept">{{ userInfo?.dept.name }} </div>
+            <div class="pull-left" v-show="true" v-if="deptInfo">{{ deptInfo?.name }} </div>
+          </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="选择开始时间"
+                readonly
+            />
+          </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="选择结束时间"
+                readonly
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item label="请假类型" prop="type" >
+            <el-select v-model="formData.type" placeholder="请选择请假类型" :disabled="isReadOnly">
               <el-option
                   v-for="dict in getIntDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE)"
                   :key="dict.value"
@@ -22,55 +60,30 @@
               />
             </el-select>
           </el-form-item>
-      <el-form-item label="开始时间" prop="startTime" readonly>
+        </el-col>
-        <el-date-picker
+        <el-col :span="12">
-          v-model="formData.startTime"
+          <el-form-item label="请假天数" prop="day" >
-          type="date"
+            <el-input v-model="formData.day" placeholder="请输入请假天数" readonly/>
-          value-format="x"
-          placeholder="选择开始时间"
-        />
           </el-form-item>
-      <el-form-item label="结束时间" prop="endTime" readonly>
+        </el-col>
-        <el-date-picker
+
-          v-model="formData.endTime"
+        <el-col :span="24">
-          type="date"
+          <el-form-item label="请假原因" prop="reason" >
-          value-format="x"
+            <el-input v-model="formData.reason" placeholder="请输入请假原因" style="height: 100px;" readonly/>
-          placeholder="选择结束时间"
-        />
-      </el-form-item>
-      <el-form-item label="请假天数" prop="day">
-        <el-input v-model="formData.day" placeholder="请输入请假天数" />
-      </el-form-item>
-      <el-form-item label="文件路径" prop="filePath">
-        <el-input v-model="formData.filePath" placeholder="请输入文件路径" />
-      </el-form-item>
-      <el-form-item label="作者" prop="userName">
-        <el-input v-model="formData.userName" placeholder="请输入作者" />
-      </el-form-item>
-      <el-form-item label="部门id" prop="deptId">
-        <el-input v-model="formData.deptId" placeholder="请输入部门id" />
-      </el-form-item>
-      <el-form-item label="流程实例的编号" prop="processInstanceId">
-        <el-input v-model="formData.processInstanceId" placeholder="请输入流程实例的编号" />
-      </el-form-item>
-      <el-form-item label="申请人的用户编号" prop="userId">
-        <el-input v-model="formData.userId" placeholder="请输入申请人的用户编号" />
-      </el-form-item>
-      <el-form-item label="审批状态" prop="status">
-        <el-input v-model="formData.status" placeholder="请输入审批状态" />
           </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
-<!--    <template #footer>-->
+  </ContentWrap>
-<!--      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>-->
-<!--      <el-button @click="dialogVisible = false">取 消</el-button>-->
-<!--    </template>-->
-<!--  </Dialog>-->
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { QjglApi, QjglVO } from '@/api/home/qjgl'
 import { propTypes } from '@/utils/propTypes'
-
+import {getUserProfile, ProfileVO} from "@/api/system/user/profile";
+import {DeptVO, getDept} from "@/api/system/dept";
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as UserApi from '@/api/system/user'
 /** 请假管理 表单 */
 defineOptions({ name: 'QjglDetail' })
 
@@ -79,6 +92,7 @@ const message = useMessage() // 消息弹窗
 const props = defineProps({
   id: propTypes.number.def(undefined)
 })
+const isReadOnly = ref(true); // 设置为 true 则组件为只读状态
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -99,15 +113,19 @@ const formData = ref({
   status: undefined
 })
 const formRules = reactive({
-  reason: [{ required: true, message: '请假原因不能为空', trigger: 'blur' }],
+  title: [{ required: true, message: '请假标题不能为空', trigger: 'blur' }],
   type: [{ required: true, message: '请假类型不能为空', trigger: 'change' }],
   startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
   endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
   day: [{ required: true, message: '请假天数不能为空', trigger: 'blur' }],
-  userName: [{ required: true, message: '作者不能为空', trigger: 'blur' }]
+  userName: [{ required: true, message: '起草人不能为空', trigger: 'blur' }],
+  deptId: [{ required: true, message: '部门不能为空', trigger: 'blur' }]
 })
+const userInfo = ref({} as ProfileVO )
+const deptInfo = ref({} as DeptVO )
 const formRef = ref() // 表单 Ref
-
+const { query } = useRoute() // 查询参数
+const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号
 /** 打开弹窗 */
 // const open = async (type: string, id?: number) => {
 //   dialogVisible.value = true
@@ -124,8 +142,25 @@ const formRef = ref() // 表单 Ref
 //     }
 //   }
 // }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+// defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+const getUserInfo = async () => {
+  if ( formData.value.deptId == '' ){
+    const users = await getUserProfile()
+    userInfo.value = users
+    formData.value.deptId= users.dept.id
 
+    deptInfo.value = {} as DeptVO
+  }else{
+    const dept = await getDept(formData.value.deptId)
+    deptInfo.value = dept
+    userInfo.value = {} as ProfileVO
+  }
+  if (formData.value.userName == ''){
+    const users = await getUserProfile()
+    formData.value.userName= users.nickname
+  }
+
+}
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -180,7 +215,7 @@ onMounted(async () => {
       formLoading.value = false
     }
   }
-  // await getUserInfo()
+   await getUserInfo()
   // await getKnowtypeTree()
 })
 </script>

src/views/Home/qjgl/index.vue

@@ -81,22 +81,34 @@
 <!--          class="!w-240px"-->
 <!--        />-->
 <!--      </el-form-item>-->
-      <el-form-item label="作者" prop="userName">
+      <el-form-item label="起草人" prop="userName">
         <el-input
           v-model="queryParams.userName"
-          placeholder="请输入作者"
+          placeholder="请输入起草人"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="部门id" prop="deptId">
+<!--      <el-form-item label="部门id" prop="deptId">-->
-        <el-input
+<!--        <el-input-->
+<!--          v-model="queryParams.deptId"-->
+<!--          :data="deptList"-->
+<!--          placeholder="请输入部门id"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="归属部门" prop="deptId">
+        <el-tree-select
             v-model="queryParams.deptId"
-          placeholder="请输入部门id"
+            :data="deptList"
-          clearable
+            :props="defaultProps"
-          @keyup.enter="handleQuery"
+            check-strictly
+            node-key="id"
             class="!w-240px"
+            placeholder="请选择归属部门"
         />
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
@@ -188,8 +200,8 @@
 <!--      />-->
       <el-table-column label="请假天数" align="center" prop="day" />
 <!--      <el-table-column label="文件路径" align="center" prop="filePath" />-->
-      <el-table-column label="作者" align="center" prop="userName" />
+      <el-table-column label="起草人" align="center" prop="userName" />
-      <el-table-column label="部门id" align="center" prop="deptId" />
+      <el-table-column label="部门" align="center" prop="deptName" />
 <!--      <el-table-column-->
 <!--        label="创建时间"-->
 <!--        align="center"-->
@@ -199,7 +211,12 @@
 <!--      />-->
 <!--      <el-table-column label="流程实例的编号" align="center" prop="processInstanceId" />-->
 <!--      <el-table-column label="申请人的用户编号" align="center" prop="userId" />-->
-      <el-table-column label="审批状态" align="center" prop="status" />
+<!--      <el-table-column label="审批状态" align="center" prop="status" />-->
+      <el-table-column align="center" label="审批状态" prop="status" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center">
         <template #default="scope">
           <el-button
@@ -255,10 +272,11 @@ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { QjglApi, QjglVO } from '@/api/home/qjgl'
-// import QjglForm from './QjglFormbk.vue'
+import * as DeptApi from "@/api/system/dept";
-
+import {defaultProps, handleTree} from "@/utils/tree";
+const deptList = ref<Tree[]>([]) // 树形结构
 /** 请假管理 列表 */
-defineOptions({ name: 'Qjgl' })
+defineOptions({ name: 'Qjglindex' })
 const router = useRouter() // 路由
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
@@ -293,6 +311,9 @@ const getList = async () => {
     const data = await QjglApi.getQjglPage(queryParams)
     list.value = data.list
     total.value = data.total
+
+    // 加载部门树
+    deptList.value = handleTree(await DeptApi.getSimpleDeptList())
   } finally {
     loading.value = false
   }

src/views/bpm/model/index.vue

@@ -168,14 +168,14 @@
           >
             设计流程
           </el-button>
-          <el-button
+<!--          <el-button-->
-            link
+<!--            link-->
-            type="primary"
+<!--            type="primary"-->
-            @click="handleSimpleDesign(scope.row.id)"
+<!--            @click="handleSimpleDesign(scope.row.id)"-->
-            v-hasPermi="['bpm:model:update']"
+<!--            v-hasPermi="['bpm:model:update']"-->
-          >
+<!--          >-->
-            仿钉钉设计流程
+<!--            仿钉钉设计流程-->
-          </el-button>
+<!--          </el-button>-->
           <el-button
             link
             type="primary"