web寝室归寝 增加归寝详情

SafeCampus.WEB/src/views/attendance/studentsReturn/components/returnConfirm/index.vue

@@ -120,6 +120,7 @@ async function personConfirm(list:any, msg: string) {
     }
   })
   await useHandleData(attendanceApi.add, list, msg);
+  propsInfo.successful()
   RefreshTable(); //刷新表格
 }
 /** 关闭表单*/

SafeCampus.WEB/src/views/attendance/studentsReturn/components/returnDetail/index.vue

@@ -0,0 +1,128 @@
+<!-- 
+ * @Description: 未归寝
+ * @Author: yxq 
+ * @Date: 2023-12-15 15:45:59
+-->
+<template>
+  <div>
+    <form-container v-model="visible" row-key="id" :title="`寝室${propsInfo.record.name}归寝详情`" form-size="800px" @close="onClose">
+      <ProTable
+        ref="returnTableRef"
+        :request-auto="false"
+        title="归寝详情"
+        height="500px"
+        :pagination="false"
+        :columns="columns"
+        :request-api="userManageDormitoryApi.returnDetail"
+        :data-callback="dataCallback"
+      >
+      </ProTable>
+      <template #footer>
+        <el-button @click="onClose"> 关闭 </el-button>
+      </template>
+    </form-container>
+    <!-- 预览头像 -->
+    <el-dialog v-model="imgVisible" title="查看头像" width="830px">
+      <div style="display: flex; align-items: center; justify-content: center">
+        <img class="detailpic" :src="'/api/' + faceUrl" alt="" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+  
+<script setup lang="tsx" name="attendanceStudentsReturn">
+import { userManageDormitoryApi,attendanceApi } from "@/api";
+import { ColumnProps,ProTableInstance } from "@/components/ProTable/interface";
+import { FormOptEnum } from "@/enums";
+import { useHandleData } from "@/hooks";
+import { formatDate } from "@/utils";
+
+const visible = ref(false); //是否显示
+// 弹框参数
+const propsInfo = reactive<FormProps.Base<{}>>({
+  opt: FormOptEnum.VIEW, //操作类型
+  record: {}, //弹框数据
+  disabled: false
+});
+
+// 获取 returnTableRef 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const returnTableRef = ref<ProTableInstance>();
+// 表格配置项
+const columns: ColumnProps[] = [
+  {
+    prop: "name",
+    label: "学生姓名"
+  },
+  {
+    prop: "personSetName",
+    label: "班级"
+  },
+  {
+    prop: "faces",
+    label: "图片",
+    render: scope => {
+      return (
+        <img
+          src={scope.row.snapshotUrl?'/api/'+scope.row.snapshotUrl:scope.row.faces.length > 0 ? '/api/'+scope.row.faces[0].faceUrl : ""}
+          onClick={() => viewHeadImage(scope)}
+          style="width:50px;height:50px;cursor:pointer"
+          alt=""
+        />
+      );
+    }
+  },
+  {
+    prop: "tick",
+    label: "时间"
+  },
+];
+/**
+ * 打开弹框
+ * @param props 弹框参数
+ */
+function onOpen(props: FormProps.Base<{}>) {
+  Object.assign(propsInfo, props); //合并参数
+  visible.value = true; //显示弹框
+  nextTick(()=>{
+    returnTableRef.value!.searchParam.id = props.record.id;
+    returnTableRef.value!.searchParam.returnTime = props.record.ReturnTime;
+    returnTableRef.value.search()
+  })
+}
+const dataCallback = (res:any)=>{
+  let attendanceDtos = res.attendanceDtos||[]
+  return attendanceDtos.map(e=>{
+    e.faces = []
+    let obj = res.personInfos.find(e1=>e1.personId == e.personId)
+    console.log(obj)
+    if(obj){
+      e.faces = obj.faces
+      e.name = obj.name
+      e.personSetName = obj.personSetName
+    }
+    return e
+  })
+}
+// 图片预览
+const imgVisible = ref(false);
+const faceUrl = ref('');
+const viewHeadImage = (scope: any) => {
+  faceUrl.value = scope.row.snapshotUrl||scope.row.faces[0].faceUrl;
+  imgVisible.value = true
+};
+/** 关闭表单*/
+function onClose() {
+  visible.value = false;
+}
+// 刷新表格
+const RefreshTable = () => {
+  returnTableRef.value?.refresh();
+};
+// 暴露给父组件的方法
+defineExpose({
+  onOpen
+});
+</script>
+  
+<style lang="scss" scoped></style>
+  

SafeCampus.WEB/src/views/attendance/studentsReturn/index.vue

@@ -47,10 +47,12 @@
           <el-space>
             <!-- :disabled="!scope.row.noReturnNum" -->
             <s-button link prefix="归寝" :opt="FormOptEnum.EDIT" suffix="确认" @click="onOpen(FormOptEnum.VIEW, scope.row)" />
+            <s-button link prefix="归寝" :opt="FormOptEnum.VIEW" suffix="详情" @click="onOpen1(FormOptEnum.VIEW, scope.row)" />
           </el-space>
         </template>
       </ProTable>
       <ReturnConfirm ref="ReturnConfirmRef" />
+      <ReturnDetail ref="ReturnDetailRef" />
     </div>
   </div>
 </template>
@@ -59,6 +61,7 @@ import { userManageDormitoryApi } from "@/api";
 import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
 import { FormOptEnum } from "@/enums";
 import ReturnConfirm from "./components/returnConfirm/index.vue";
+import ReturnDetail from "./components/returnDetail/index.vue";
 const proTable = ref<ProTableInstance>();
 /**左侧楼栋**/
 import TreeFilter from "@/components/TreeFilter/index.vue";
@@ -137,6 +140,7 @@ const columns: ColumnProps[] = [
   { prop: "operation", label: "操作", width: 250, fixed: "right" }
 ];
 const ReturnConfirmRef = ref<InstanceType<typeof ReturnConfirm> | null>(null);
+const ReturnDetailRef = ref<InstanceType<typeof ReturnConfirm> | null>(null);
 /**
  * 人工确认
  * @param opt  操作类型
@@ -153,6 +157,17 @@ function onOpen(opt: FormOptEnum, record = {}) {
       break;
   }
 }
+function onOpen1(opt: FormOptEnum, record = {}) {
+  switch (opt) {
+    case FormOptEnum.VIEW:
+      ReturnDetailRef.value?.onOpen({
+        opt: opt,
+        record: { ...record, ReturnTime: ReturnTime.value || ReturnTimeDefault },
+        successful: RefreshTable
+      });
+      break;
+  }
+}
 // 刷新表格
 const RefreshTable = () => {
   proTable.value?.refresh();