feat: 违规行为记录导出和图片预览

src/api/traffic-violation/traffic-act.ts

@@ -52,3 +52,17 @@ export function createActData(data: CreateActQuery) {
     data,
   });
 }
+
+export function exportActViolation(data: ActTableQuery) {
+  return http.request(
+    {
+      url: '/trafficViolation/exportTrafficViolationList',
+      method: 'post',
+      data,
+      responseType: 'blob',
+    },
+    {
+      isTransformResponse: false,
+    },
+  );
+}

src/views/traffic/violation/act/Act.vue

@@ -65,7 +65,7 @@
             <section class="search-btn">
               <el-button type="primary" @click="handleSearch">查询</el-button>
               <el-button @click="handleReset">重置</el-button>
-              <el-button @click="">导出</el-button>
+              <el-button @click="handleDownload">导出</el-button>
             </section>
           </div>
         </header>
@@ -80,7 +80,9 @@
           <template #violateType="scope">
             <span>{{ ACT_VIOLATION_TYPE_LABEL[scope.row.violateType] }}</span>
           </template>
-          <template #capturePhotos="scope"> </template>
+          <template #capturePhotos="scope">
+            <ImageViewer :file-list="scope.row.capturePhotos" />
+          </template>
           <template #createSource="scope">
             <span>{{ ACT_NOTICE_DATA_SOURCE_LABEL[scope.row.createSource] }}</span>
           </template>
@@ -148,7 +150,14 @@
   import { openMessageBox } from '@/utils/element-plus/messageBox';
   import type { QueryPageRequest } from '@/types/basic-query';
   import type { ActTableSearch, ActTableQuery, ActTableData, UpdateActQuery } from './types';
-  import { getActTableList, noticeActData, deleteActData } from '@/api/traffic-violation/traffic-act';
+  import {
+    getActTableList,
+    noticeActData,
+    deleteActData,
+    exportActViolation,
+  } from '@/api/traffic-violation/traffic-act';
+  import { downloadFile } from '@/views/disaster/utils/download';
+  import ImageViewer from './components/ImageViewer.vue';
   import dayjs from 'dayjs';
 
   const router = useRouter();
@@ -156,7 +165,8 @@
   // 搜索栏
   const selectableInputRef = ref<InstanceType<typeof SelectableInput>>();
   const searchData = reactive<ActTableSearch>({});
-  function handleSearch() {
+
+  function getQuery() {
     if (!selectableInputRef.value) return;
     tabelQuery.queryParam = {
       pageType: 1,
@@ -175,6 +185,10 @@
       tabelQuery.queryParam.startTime = dayjs(searchData.searchTime[0]).format('YYYY-MM-DD HH:MM:ss');
       tabelQuery.queryParam.endTime = dayjs(searchData.searchTime[1]).format('YYYY-MM-DD HH:MM:ss');
     }
+  }
+
+  function handleSearch() {
+    getQuery();
     getTabelData();
   }
 
@@ -187,6 +201,20 @@
     searchData.searchTime = undefined;
   }
 
+  async function handleDownload() {
+    getQuery();
+    try {
+      const res = await exportActViolation(tabelQuery.queryParam);
+      if (res.size === 0) return;
+      const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+      const url = window.URL.createObjectURL(blob);
+      downloadFile(url, '违规行为记录.xlsx');
+    } catch (e) {
+      ElMessage.error('下载失败');
+      console.log(e);
+    }
+  }
+
   // 表格
   const basicTableRef = ref<InstanceType<typeof BasicTable>>();
 

src/views/traffic/violation/act/components/ImageViewer.vue

@@ -1,7 +1,53 @@
 <template>
-  <div> </div>
+  <div class="image-viewer">
+    <div v-if="images && images.length">
+      <el-image
+        fit="cover"
+        :src="images[0]"
+        :preview-src-list="images"
+        class="image-viewer__image"
+        :preview-teleported="true"
+      ></el-image>
+      <div class="image-viewer__text">共{{ images.length }}张</div>
+    </div>
+    <div v-else> - </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { unformatImage } from '../utils';
 
-<style scoped></style>
+  const props = defineProps<{
+    fileList: string;
+  }>();
+
+  const images = computed(() => {
+    return unformatImage(props.fileList)?.map((x) => {
+      return x.url;
+    });
+  });
+</script>
+
+<style scoped>
+  .image-viewer {
+    width: 136px;
+  }
+  .image-viewer__image {
+    width: 120px;
+    height: 90px;
+    border-radius: 5px;
+  }
+  .image-viewer__text {
+    position: absolute;
+    bottom: 17px;
+    right: 27px;
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 3px;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 14px;
+    border-top-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    pointer-events: none;
+  }
+</style>

src/views/traffic/violation/act/configs/tables.ts

@@ -58,7 +58,7 @@ export const VIOLATION_ACT_TABLE_COLUMNS: TableColumnProps[] = [
     prop: 'capturePhotos',
     slot: 'capturePhotos',
     align: 'center',
-    minWidth: '120px',
+    minWidth: '180px',
   },
   {
     label: '违规地点',

src/views/traffic/violation/act/utils.ts

@@ -14,14 +14,14 @@ export function unformatImage(file?: string) {
 
 const formatImage = async (data: ImageItem) => {
   if (!data.file) return data;
-  const fileName = data.file.name;
-  const fileSize = data.size;
-  const res = await uploadFileApi({ bizType: UPLOAD_BIZ_TYPE.ATTACHMENT, fileName, file: data.file });
-  const fileUrl = res.url;
+  const name = data.file.name;
+  const size = data.size;
+  const res = await uploadFileApi({ bizType: UPLOAD_BIZ_TYPE.ATTACHMENT, fileName: name, file: data.file });
+  const url = res.url;
   return {
-    fileName,
-    fileSize,
-    fileUrl,
+    name,
+    size,
+    url,
   };
 };