feat(off_duty_management): 添加离岗管理详情查看功能

- 在离岗记录页面添加view-info组件用于显示详情
- 创建离岗详情组件展示部门、岗位、姓名、离岗时间等信息
- 添加viewDialog响应式数据结构管理详情弹窗状态
- 实现fnView方法用于打开详情弹窗并传递数据
- 集成useVModel处理弹窗可见性双向绑定

src/views/hoisting/job_data/index.vue

@@ -283,6 +283,7 @@ const fnShowPoints = (id) => {
   data.showPointsDialog.visible = true;
 };
 const fnPreviewVideo = (VIDEO_PATH) => {
+  console.log(VIDEO_PATH);
   data.videoDialog.visible = true;
   data.videoDialog.src = VIDEO_PATH;
 };

src/views/off_duty_management/record/components/view.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-dialog v-model="visible" title="离岗详情">
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="部门">
+        {{ info.DEPARTMENTNAME_ALL }}
+      </el-descriptions-item>
+      <el-descriptions-item label="岗位">
+        {{ info.POSTNAME }}
+      </el-descriptions-item>
+      <el-descriptions-item label="姓名">
+        {{ info.USER_NAME }}
+      </el-descriptions-item>
+      <el-descriptions-item label="离岗申请时间">
+        {{ info.STARTTIME }}-{{ info.ENDTIME }}
+      </el-descriptions-item>
+      <el-descriptions-item label="离岗原因">
+        {{ info.DESCR }}
+      </el-descriptions-item>
+      <el-descriptions-item label="审批状态">
+        <div v-if="info.REVIEW_STATUS === '0'">待审批</div>
+        <div v-else-if="info.REVIEW_STATUS === '1'">审批通过</div>
+        <div v-else-if="info.ISDELETE === '1' && info.REVIEW_STATUS === '-1'">
+          <div v-if="info.CREATOR === info.OPERATOR">申请人取消</div>
+          <div v-else>审批人取消</div>
+        </div>
+        <div v-else-if="info.REVIEW_STATUS === '-1'">审批打回</div>
+        <div v-else-if="info.REVIEW_STATUS === '2'">无需审批</div>
+      </el-descriptions-item>
+      <el-descriptions-item v-if="info.REVIEW_STATUS !== '2'" label="审批人">
+        {{
+          info.REVIEW_USER_NAME + " [" + info.REVIEW_USER_DEPARTMENTNAME + "]"
+        }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        v-if="info.REVIEW_STATUS === '1' || info.REVIEW_STATUS === '-1'"
+        :label="info.ISDELETE === '0' ? '审批意见' : '取消原因'"
+      >
+        {{ info.REVIEW_DESC }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <template #footer>
+      <el-button @click="visible = false">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { useVModel } from "@vueuse/core";
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
+  info: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+});
+const emits = defineEmits(["update:visible"]);
+const visible = useVModel(props, "visible", emits);
+</script>
+
+<style scoped lang="scss"></style>

src/views/off_duty_management/record/index.vue

@@ -117,6 +117,10 @@
         </el-table-column>
       </layout-table>
     </layout-card>
+    <view-info
+        v-model:visible="data.viewDialog.visible"
+        :info="data.viewDialog.info"
+    />
   </div>
 </template>
 
@@ -125,6 +129,8 @@ import { serialNumber } from "@/assets/js/utils";
 import useListData from "@/assets/js/useListData.js";
 import { getRecordList } from "@/request/off_duty_management.js";
 import LayoutDepartment from "@/components/department/index.vue";
+import {reactive} from "vue";
+import ViewInfo from "./components/view.vue";
 
 const reviewStatusList = [
   { ID: "0", NAME: "待审批" },
@@ -136,6 +142,12 @@ const reviewStatusList = [
 ];
 const { list, pagination, searchForm, fnGetData, fnResetPagination } =
   useListData(getRecordList, { otherParams: { TYPE: "show" } });
+const data = reactive({
+  viewDialog: {
+    visible: false,
+    info: {},
+  },
+});
 const fnGetDataTransfer = () => {
   fnGetData({
     STARTTIME: searchForm.value.dates?.[0],
@@ -150,6 +162,10 @@ const fnResetPaginationTransfer = () => {
     DEPTIDS: searchForm.value.DEPTIDS?.join(","),
   });
 };
+const fnView = (row) => {
+  data.viewDialog.visible = true;
+  data.viewDialog.info = row;
+};
 </script>
 
 <style scoped></style>