打卡信息列表添加详情

src/api/illegalconstruction/checkiinformation.ts

@@ -2,6 +2,7 @@ import { defHttp } from '@/utils/http/axios';
 enum Api {
    // 分页
   LoadAllPage = '/api/MiPunchRecord/LoadAllPage',
+  Get = '/api/MiPunchRecord/Get',
 }
 
 export function LoadAllPage(params) {
@@ -9,4 +10,10 @@ export function LoadAllPage(params) {
     url: Api.LoadAllPage,
     params,
   });
+}
+export function Get(params: {id: string}) {
+  return defHttp.get({
+    url: Api.Get,
+    params,
+  });
 }

src/views/demo/illegalconstruction/checkiinformation/ShowInfoModal/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="modal-content" id="checkiinformation-show-modal">
+    <a-descriptions title="打卡信息详情" bordered :column="3" style="margin-bottom: 20px;">
+      <a-descriptions-item
+        v-for="item in showInfoColumn"
+          :label="item.label"
+          :span="item.span? item.span: 1"
+        >
+          <template v-if="item.key == 'image'">
+            <a-image-preview-group
+              :preview="{
+                getContainer: getContainer,
+              }"
+            >
+              <template v-for="(imageItem, imageIndex) in props.modalData[item.key]" :key="imageIndex">
+                <a-image
+                  v-if="imageItem.image"
+                  width="100px"
+                  height="100px"
+                  :src="`${VITE_GLOB_INFO_IMAGE_URL}/${imageItem.image}`"
+                  :preview="{
+                    getContainer,
+                  }"
+                ></a-image>
+              </template>
+            </a-image-preview-group>
+          </template>
+          <template v-else>{{ props.modalData[item.key] }}</template>
+        </a-descriptions-item>
+    </a-descriptions>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue"
+import { getAppEnvConfig } from '@/utils/env';
+
+const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
+const props = defineProps(['modalData'])
+const emits = defineEmits(['closeModal'])
+
+const showInfoColumn = [
+  { label: '打卡点', key: 'pointName' },
+  { label: '打卡状态', key: 'statusName' },
+  { label: '打卡人员', key: 'userName' },
+  { label: '打卡时间', key: 'punchTime' },
+  { label: '经度', key: 'lng' },
+  { label: '纬度', key: 'lat' },
+  { label: '现场照片', key: 'image', span: 3 },
+]
+
+onMounted(() => {
+})
+
+const cancel = () => {
+  emits('closeModal')
+}
+const getContainer = () => {
+  return document.getElementById('checkiinformation-show-modal');
+};
+</script>
+
+<style lang="scss" scoped>
+.modal-content{
+  padding: 20px;
+  max-height: calc(100vh - 132px);
+  margin-bottom: 15px;
+  overflow: auto;
+  .content-form{
+    margin-bottom: 20px;
+  }
+}
+.button-div{
+  display: flex;
+  justify-content: end;
+  padding-left: 20px;
+  padding-right: 20px;
+  .cancel-button{
+    margin-right: 10px;
+  }
+}
+</style>

src/views/demo/illegalconstruction/checkiinformation/index.vue

@@ -8,19 +8,36 @@
         <template v-if="column.key == 'LngLat'">
           {{ `${record.Lng}, ${record.Lat}` }}
         </template>
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '详情',
+                onClick: () => {
+                  showInfo(record)
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
+    <a-modal width="100%" wrap-class-name="checkiinformation-show-info-modal" v-model:open="showInfoModalOpen" title="详情" :maskClosable="false" :footer="null" :destroyOnClose="true">
+      <ShowInfoModal :modalData="modalData" @closeModal="closeModal"/>
+    </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { BasicTable, useTable } from '@/components/Table';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { PermissionBtn } from '@/components/PermissionBtn/index';
-  import { LoadAllPage } from '@/api/illegalconstruction/checkiinformation'
+  import { LoadAllPage, Get } from '@/api/illegalconstruction/checkiinformation'
   import { columns, searchFormSchema, statusOptions } from './util';
+  import ShowInfoModal from './ShowInfoModal/index.vue';
 
-
+  const modalData = ref({})
+  const showInfoModalOpen = ref(false)
   // 表格
   const [registerTable] = useTable({
     title: '打卡信息列表',
@@ -40,6 +57,11 @@
     handleSearchInfoFn(info) {
       return info;
     },
+    actionColumn: {
+      width: 100,
+      title: '操作',
+      dataIndex: 'action',
+    },
   });
   const getLabel = (type, value) => {
     let result: any[] = [];
@@ -56,4 +78,31 @@
     });
     return label;
   };
+  const showInfo = (record) => {
+    Get({id: record.Id}).then(res => {
+      modalData.value = res
+      showInfoModalOpen.value = true
+    })
+  }
+  const closeModal = () => {
+    showInfoModalOpen.value = false
+  }
 </script>
+<style lang="scss">
+.checkiinformation-show-info-modal {
+  .ant-modal {
+    max-width: 100%;
+    top: 0;
+    padding-bottom: 0;
+    margin: 0;
+  }
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh);
+  }
+  .ant-modal-body {
+    flex: 1;
+  }
+}
+</style>