From 5d4a638aa2718993803714c7a1377e1367a53394 Mon Sep 17 00:00:00 2001
From: wangyan <wangyan@zcloudchina.com>
Date: Fri, 9 Jan 2026 17:31:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(off=5Fduty=5Fmanagement):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=A6=BB=E5=B2=97=E7=AE=A1=E7=90=86=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在离岗记录页面添加view-info组件用于显示详情
- 创建离岗详情组件展示部门、岗位、姓名、离岗时间等信息
- 添加viewDialog响应式数据结构管理详情弹窗状态
- 实现fnView方法用于打开详情弹窗并传递数据
- 集成useVModel处理弹窗可见性双向绑定
---
 src/views/hoisting/job_data/index.vue         |  1 +
 .../record/components/view.vue                | 66 +++++++++++++++++++
 .../off_duty_management/record/index.vue      | 16 +++++
 3 files changed, 83 insertions(+)
 create mode 100644 src/views/off_duty_management/record/components/view.vue

diff --git a/src/views/hoisting/job_data/index.vue b/src/views/hoisting/job_data/index.vue
index aa4cc3f..794e21a 100644
--- a/src/views/hoisting/job_data/index.vue
+++ b/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;
 };
diff --git a/src/views/off_duty_management/record/components/view.vue b/src/views/off_duty_management/record/components/view.vue
new file mode 100644
index 0000000..32dc0d5
--- /dev/null
+++ b/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>
diff --git a/src/views/off_duty_management/record/index.vue b/src/views/off_duty_management/record/index.vue
index 4686ed0..f85092a 100644
--- a/src/views/off_duty_management/record/index.vue
+++ b/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>