feat: 编辑违规行为

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

@@ -10,7 +10,9 @@
             <el-button type="primary" class="search-table-container--button" :icon="Plus" @click="handleCreateAct">
               新建记录
             </el-button>
-            <el-button plain class="search-table-container--button" @click=""> 批量导入 </el-button>
+            <el-button plain class="search-table-container--button" @click="batchImportVisible = true">
+              批量导入
+            </el-button>
             <RealtimeNotice />
           </div>
 
@@ -122,6 +124,14 @@
         </BasicTable>
       </div>
     </main>
+    <BatchImport
+      :visible="batchImportVisible"
+      :importApiUrl="importApiUrl"
+      :templateUrl="templateUrl"
+      :templateName="'违规行为记录-批量导入模版'"
+      @close="() => (batchImportVisible = false)"
+      @update="handleUpdate"
+    />
   </div>
 </template>
 
@@ -131,6 +141,7 @@
   import SelectableInput from '@/components/formItems/selectableInput/SelectableInput.vue';
   import ActionButton from '@/components/ActionButton.vue';
   import RealtimeNotice from './components/RealtimeNotice.vue';
+  import dayjs from 'dayjs';
   import { ElMessage } from 'element-plus';
   import { TABLE_OPTIONS, VIOLATION_ACT_TABLE_COLUMNS } from './configs/tables';
   import {
@@ -158,7 +169,9 @@
   } from '@/api/traffic-violation/traffic-act';
   import { downloadFile } from '@/views/disaster/utils/download';
   import ImageViewer from './components/ImageViewer.vue';
-  import dayjs from 'dayjs';
+  import { BatchImport } from '@/components/batch-import';
+  import { useGlobSetting } from '@/hooks/setting';
+  import urlJoin from 'url-join';
 
   const router = useRouter();
 
@@ -189,7 +202,7 @@
 
   function handleSearch() {
     getQuery();
-    getTabelData();
+    getTableData();
   }
 
   function handleReset() {
@@ -233,12 +246,12 @@
   const handleSizeChange = (value: number) => {
     pagination.pageNumber = value;
     tabelQuery.pageSize = value;
-    getTabelData();
+    getTableData();
   };
   const handleCurrentChange = (value: number) => {
     pagination.pageNumber = value;
     tabelQuery.pageSize = value;
-    getTabelData();
+    getTableData();
   };
 
   const handleSelectionChange = (value: any[]) => {};
@@ -265,7 +278,7 @@
   //   getTableData();
   // };
 
-  async function getTabelData() {
+  async function getTableData() {
     tableConfig.loading = true;
     const res = await getActTableList(tabelQuery);
     tableData.value = res.records;
@@ -273,8 +286,19 @@
     tableConfig.loading = false;
   }
 
+  // 批量导入
+  const batchImportVisible = ref(false);
+  const { urlPrefix } = useGlobSetting();
+  const importApiUrl = ref(urlJoin(urlPrefix, '/trafficViolation/importTrafficViolationList'));
+  const templateUrl = ref('./skyeye-file-upload/sfysecurity/TEMPLATE/import-vehicle-template.xlsx');
+
+  const handleUpdate = () => {
+    batchImportVisible.value = false;
+    getTableData();
+  };
+
   onMounted(async () => {
-    await getTabelData();
+    await getTableData();
   });
 
   function handleCreateAct() {
@@ -305,7 +329,7 @@
     } finally {
       tableConfig.loading = false;
     }
-    getTabelData();
+    getTableData();
   }
 
   async function handleDeleteAct(id: number) {
@@ -318,7 +342,7 @@
     } finally {
       tableConfig.loading = false;
     }
-    getTabelData();
+    getTableData();
   }
 </script>
 

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

@@ -41,7 +41,7 @@
         <UploadImages
           :maxCount="9"
           ref="uploadImagesRef"
-          :image-list="recordImageList"
+          :image-list="imageList"
           @upload-success="handleUploadChange"
         />
       </template>
@@ -64,9 +64,10 @@
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import { useUserInfoHook } from '@/views/disaster/hooks';
   import { getActDataDetail, updateActData } from '@/api/traffic-violation/traffic-act';
-  import { CreateActRuleForm, CreateActQuery, ActTableData } from '../types';
+  import { CreateActRuleForm, UpdateActQuery, ActTableData } from '../types';
   import { ACT_FORM_CONFIG, ACT_FORM_DATA, ACT_FORM_RULES } from '../configs/form';
   import { ACT_VIOLATION_TYPE, ACT_VIOLATION_TYPE_OPTIONS } from '../constants';
+  import { unformatImage, formatImageList } from '../utils';
 
   const props = defineProps<{
     id: number;
@@ -87,15 +88,54 @@
   const actDetail = ref<ActTableData>();
   const getDetail = async () => {
     actDetail.value = await getActDataDetail(props.id);
+    if (!actDetail.value) return;
+    ruleFormData.carNumber = actDetail.value.carNumber;
+    ruleFormData.violateType = actDetail.value.violateType;
+    ruleFormData.speed = actDetail.value.speed;
+    ruleFormData.violateLocation = actDetail.value.violateLocation;
+    ruleFormData.captureTime = actDetail.value.captureTime;
+    ruleFormData.capturePhotos = unformatImage(actDetail.value.capturePhotos)?.map((x) => {
+      return { url: x };
+    });
+    ruleFormData.creatName = actDetail.value.creatName;
+
+    imageList.value = unformatImage(actDetail.value.capturePhotos)!;
   };
 
-  const getFormData = async () => {};
+  const imageList = ref<string[]>([]);
+
+  const getFormData = async () => {
+    if (ruleFormData.violateType !== ACT_VIOLATION_TYPE.SPEEDING) {
+      ruleFormData.speed = null;
+    }
+    cloneRuleFormData();
+    const res: UpdateActQuery = {
+      id: props.id,
+      createSource: 1,
+      ...ruleFormData,
+      violateType: ruleFormData.violateType!,
+      capturePhotos: JSON.stringify(await formatImageList(ruleFormData.capturePhotos)),
+    };
+
+    return res;
+  };
 
   const formLoading = ref(false);
   const router = useRouter();
   const handleSubmit = async () => {
     const res = await handleValidate();
     if (!res) return;
+    try {
+      formLoading.value = true;
+      const params = await getFormData();
+      await updateActData(params);
+      ElMessage.success('编辑成功');
+      router.back();
+    } catch (e) {
+      console.log(e);
+    } finally {
+      formLoading.value = false;
+    }
   };
 
   const handleUploadChange = () => {

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

@@ -36,6 +36,7 @@ export interface ActTableData {
   createdBy?: number;
   remark?: string;
   isNotice?: number; //0-未通知 1-已通知
+  creatName?: string;
 }
 
 export interface CreateActRuleForm {

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

@@ -8,27 +8,22 @@ export function stringToArray(str?: string): number[] | undefined {
 
 export function unformatImage(file?: string) {
   if (!file) return undefined;
-  const fileData: ImageItem[] = JSON.parse(file);
+  const fileData: string[] = JSON.parse(file);
   return fileData;
 }
 
 const formatImage = async (data: ImageItem) => {
   if (!data.file) return data;
   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 {
-    name,
-    size,
-    url,
-  };
+  return res.url;
 };
 
-export const formatImageList = async (data: ImageItem[] | undefined) => {
+export const formatImageList = async (data: Array<ImageItem> | undefined) => {
   if (!data || data.length === 0) return null;
   const res = await Promise.all(
     data.map(async (item) => {
+      if (!item.file) return item.url;
       const res = await formatImage(item);
       return res;
     }),