线下通报查询和导入：接口对接--列表接口、导入接口、导出接口

.env.development

@@ -17,9 +17,9 @@ VITE_APP_TOKEN =  6617e72a5a7e41eb6c30aa4fa3000022
 # 开发接口地址
 # VITE_APP_API_URL = "http://libai1024.gnway.cc:80"
 # VITE_APP_API_URL = "http://r96896c3.natappfree.cc"
-VITE_APP_API_URL = "http://106.75.213.212:7070"
+# VITE_APP_API_URL = "http://106.75.213.212:7070"
 # VITE_APP_API_URL = "http://192.168.101.73:7070"
-# VITE_APP_API_URL = "http://192.168.50.8:7070"
+VITE_APP_API_URL = "http://192.168.50.8:7070"
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip

src/api/notificationInfoManage/offlineNotificationQueryImport.ts

@@ -0,0 +1,25 @@
+import request from '@/utils/request';
+
+// 导入
+export function releasedOffineImportApi(data) {
+	return request({
+		url: `/business/releasedOffine/import`,
+		headers: {
+			'Content-Type': 'multipart/form-data',
+		},
+		method: 'post',
+		data,
+	});
+}
+
+// 导出
+export function releasedOffineExportApi(data) {
+	return request({
+		url: `/business/releasedOffine/export`,
+		method: 'post',
+		headers: {
+			'Content-Type': 'multipart/form-data',
+		},
+		data,
+	});
+}

src/views/notificationInfoInquiry/securityCheck/config/content.config.ts

@@ -8,7 +8,7 @@ const contentConfig = {
 		{ type: 'normal', label: '船舶识别号', prop: 'shipId', width: 140 },
 		{ type: 'normal', label: '中文船名', prop: 'shipNameCn', width: 140 },
 		{ type: 'normal', label: '船籍港', prop: 'regportName', width: 140 },
-		{ type: 'custom', label: '初查/复查', prop: 'NULL', width: 120 },
+		{ type: 'normal', label: '初查/复查', prop: 'checkType', width: 120 },
 		{ type: 'normal', label: '检查日期', prop: 'checkDate' },
 		{ type: 'normal', label: '检查港', prop: 'checkPort', width: 140 },
 		{ type: 'normal', label: '检查机构', prop: 'checkOrganization', width: 140 },

src/views/notificationInfoInquiry/securityCheck/config/search.config.ts

@@ -53,7 +53,7 @@ const searchConfig = {
 		},
 		{
 			label: '初复查标志',
-			prop: 'initial_review_mark', //NULL
+			prop: 'checkType',
 			type: 'select',
 			options: [] as Inew[],
 			span: 6,

src/views/notificationInfoInquiry/securityCheck/index.vue

@@ -115,7 +115,7 @@ async function searchItem() {
             item.options = categoryOnm;
         }
         // 初复查标志
-        if (item.prop === 'initial_review_mark') {
+        if (item.prop === 'checkType') {
             item.options = bj_initial_review_mark;
         }
         // 船籍港

src/views/notificationInfoManage/offlineNotificationQueryImport/components/import.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { releasedOffineImportApi } from '@/api/notificationInfoManage/offlineNotificationQueryImport';
+
+const props = defineProps({
+    isVisible: {
+        type: Boolean,
+        default: false,
+    },
+    title: {
+        type: String,
+        default: '',
+    },
+});
+type Emit = {
+    (e: 'update:isVisible', isVisible: boolean): void;
+    (e: 'refresh-table'): void;
+};
+const emit = defineEmits<Emit>();
+
+const onSubmit = () => {
+    // ElMessage.success('小编在努力开发中。。。');
+    // return;
+    releasedOffineImportApi({
+        file: flieDb,
+    })
+        .then(() => {
+            ElMessage.success('导入成功');
+            emit('refresh-table');
+            onCancel();
+        })
+        .catch(() => {
+            return;
+        });
+};
+const onCancel = () => {
+    fileList.value = [];
+    flieDb = null;
+    emit('update:isVisible', false);
+};
+
+const fileList = ref([]); // 用于存储已选择的文件列表
+let flieDb = reactive<any>(null);
+const handleChange = (file: any) => {
+    console.log(file);
+    const isCSV =
+        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+        file.name.endsWith('.xlsx');
+    if (!isCSV) {
+        ElMessage.error('只能上传 CSV 文件');
+        fileList.value = [];
+        return false;
+    }
+    flieDb = file.raw; // 获取文件对象
+};
+
+const handleExceed = () => {
+    ElMessage.warning(`当前限制选择 1 个文件哦`);
+};
+</script>
+
+<template>
+    <el-dialog :model-value="isVisible" :title="title" width="60%" append-to-body @close="onCancel">
+        <el-upload class="upload-demo" drag :on-change="handleChange" :file-list="fileList" multiple :limit="1"
+            :on-exceed="handleExceed" :auto-upload="false" accept=".xlsx">
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">Drop file here or <em>click to upload</em></div>
+            <template #tip>
+                <div class="el-upload__tip">仅限xlsx格式的文件</div>
+            </template>
+        </el-upload>
+        <!-- 弹窗底部操作按钮 -->
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary" @click="onSubmit">确 定</el-button>
+                <el-button @click="onCancel">取 消</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>

src/views/notificationInfoManage/offlineNotificationQueryImport/config/content.config.ts

@@ -1,30 +1,30 @@
 const contentConfig = {
-	pageName: 'historicalData',
+	pageName: 'releasedOffine',
 	header: {
 		title: '',
 	},
 	propsList: [
 		{ type: 'index', label: '序号', fixed: true },
 		{ type: 'normal', label: '违法事件编号', prop: 'violationNumber', width: 140 },
-		{ type: 'normal', label: '发布单位', prop: 'releasedUnitStr', width: 140 },
-		{ type: 'normal', label: '涉事主体', prop: 'chineseVesselName', width: 140 },
-		{ type: 'normal', label: '船舶识别号', prop: 'chineseVesselName', width: 140 },
-		{ type: 'normal', label: '通报/接收', prop: 'chineseVesselName', width: 140 },
-		{ type: 'normal', label: '通报事项类别', prop: 'chineseVesselName', width: 140 },
+		{ type: 'normal', label: '发布单位', prop: 'releasedUnit', width: 140 },
+		{ type: 'normal', label: '涉事主体', prop: 'NULL', width: 140 },
+		{ type: 'normal', label: '船舶识别号', prop: 'NULL', width: 140 },
+		{ type: 'normal', label: '通报/接收', prop: 'NULL', width: 140 },
+		{ type: 'normal', label: '通报事项类别', prop: 'conm', width: 140 },
 		{ type: 'normal', label: '通报事项', prop: 'notificationMatters' },
-		{ type: 'normal', label: '通报标准或具体行为列举', prop: 'names', width: 220 },
-		{ type: 'normal', label: '水上交通安全信息', prop: 'callSign', width: 220 },
-		{ type: 'normal', label: '安全管理建议', prop: 'notificationStatusStr', width: 220 },
-		{ type: 'normal', label: '通报方式', prop: 'releaseStatusStr', width: 220 },
-		{ type: 'normal', label: '接收/退回(接收单位)', prop: 'takeMeasuresStr', width: 220 },
-		{ type: 'normal', label: '接收单位', prop: 'wfirStr', width: 220 },
-		{ type: 'normal', label: '采取的措施分类(接收单位)', prop: 'releasedDate', width: 140 },
-		{ type: 'normal', label: '其他措施说明/退回原因(接收单位)', prop: 'acceptanceDate', width: 140 },
-		{ type: 'normal', label: '反馈意见(接收单位)', prop: 'acceptanceDate', width: 140 },
-		{ type: 'normal', label: '反馈时间(接收单位)', prop: 'acceptanceDate', width: 140 },
-		{ type: 'normal', label: '联络人电话(接收单位)', prop: 'acceptanceDate', width: 140 },
-		{ type: 'normal', label: '通报发布时间', prop: 'overdueStatusStr', width: 220 },
-		{ type: 'normal', label: '发布人员', prop: 'publishers', width: 140 },
+		{ type: 'normal', label: '通报标准或具体行为列举', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '水上交通安全信息', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '安全管理建议', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '通报方式', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '接收/退回(接收单位)', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '接收单位', prop: 'names', width: 220 },
+		{ type: 'normal', label: '采取的措施分类(接收单位)', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '其他措施说明/退回原因(接收单位)', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '反馈意见(接收单位)', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '反馈时间(接收单位)', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '联络人电话(接收单位)', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '通报发布时间', prop: 'NULL', width: 220 },
+		{ type: 'normal', label: '发布人员', prop: 'createBy', width: 220 },
 		{ type: 'handler', label: '操作', slotName: 'operate', width: 180, fixed: 'right' },
 	],
 };

src/views/notificationInfoManage/offlineNotificationQueryImport/config/search.config.ts

@@ -4,18 +4,18 @@ interface OptionsType {
 }
 
 const searchConfig = {
-	pageName: 'historicalData',
+	pageName: 'releasedOffine',
 	formItems: [
 		{
 			label: '违法事件编号',
-			prop: 'NULL',
+			prop: 'violationNumber',
 			type: 'input',
 			placeholder: '请输入选违法事件编号',
 			span: 6,
 		},
 		{
 			label: '通报/接收',
-			prop: 'tbjs',
+			prop: 'tbjs', // NULL
 			type: 'select',
 			options: [] as OptionsType[],
 			placeholder: '请选择通报/接收',
@@ -23,7 +23,7 @@ const searchConfig = {
 		},
 		{
 			label: '通报事项类别',
-			prop: 'tbsxlb',
+			prop: 'notificationMattersType',
 			type: 'select',
 			options: [] as OptionsType[],
 			span: 6,
@@ -38,7 +38,7 @@ const searchConfig = {
 		},
 		{
 			label: '通报方式',
-			prop: 'tbfs',
+			prop: 'tbfs', // NULL
 			type: 'select',
 			options: [] as OptionsType[],
 			span: 6,
@@ -46,7 +46,7 @@ const searchConfig = {
 		},
 		{
 			label: '发出单位',
-			prop: 'fcdw',
+			prop: 'releasedUnit',
 			type: 'select',
 			options: [] as OptionsType[],
 			span: 6,
@@ -54,7 +54,7 @@ const searchConfig = {
 		},
 		{
 			label: '接收单位',
-			prop: 'jsdw',
+			prop: 'jsdw', // NULL
 			type: 'select',
 			options: [] as OptionsType[],
 			span: 6,

src/views/notificationInfoManage/offlineNotificationQueryImport/index.vue

@@ -3,16 +3,16 @@
         <pageSearch ref="searchTableRef" :searchConfig="searchConfig"> </pageSearch>
         <pageContent ref="tableListRef" :total="total" :contentConfig="contentConfig" :pageList="tableData">
             <template #button>
-                <el-button type="primary" @click="onExport()">导入</el-button>
+                <el-button type="primary" @click="handleImportShow()">导入</el-button>
                 <el-button type="primary" @click="onExport()">下载模板</el-button>
-                <el-button type="primary" @click="handleDetails(1)">新增</el-button>
+                <el-button type="primary" @click="handleAdd(1)">新增</el-button>
                 <el-button type="primary" @click="onExport()">导出</el-button>
             </template>
             <template #operate="scope">
-                <el-button type="primary" link @click="handleDetails(2)">
+                <el-button type="primary" link @click="handleDetails(scope.row.releasedId, 1)">
                     查看
                 </el-button>
-                <el-button type="primary" link @click="handleDetails(3)">
+                <el-button type="primary" link @click="handleDetails(scope.row.releasedId, 2)">
                     编辑
                 </el-button>
                 <el-button type="primary" link>
@@ -20,23 +20,25 @@
                 </el-button>
             </template>
         </pageContent>
+        <pageImport v-model:isVisible="importDialog.isvisible" :title="importDialog.title"
+            @refresh-table="handleQuery()" />
     </div>
 </template>
 
 <script setup lang="ts">
+import { ComponentInternalInstance } from 'vue'
 import { useRouter } from 'vue-router';
 import contentConfig from './config/content.config';
 import pageContent from '@/components/components/pageContent.vue';
 import searchConfig from './config/search.config';
 import pageSearch from '@/components/components/pageSearch.vue';
+import pageImport from './components/import.vue';
+import { releasedOffineExportApi } from '@/api/notificationInfoManage/offlineNotificationQueryImport';
 import useSystemStore from '@/store/main';
 import {
     categoryOnm,
-    notificationStatus,
     isFeedback,
-    overdueStatus,
     takeMeasures,
-    bj_notification_type,
     bj_lssuing_unit,
     bj_notification_reception,
     bj_notification_method,
@@ -47,7 +49,6 @@ import {
 const systemStore = useSystemStore();
 
 const total = ref(0);
-const pageSize = ref([10, 20, 30]);
 const tableData = ref([]);
 const tableListRef = ref();
 const router = useRouter();
@@ -60,7 +61,7 @@ async function searchItem() {
             item.options = bj_notification_reception;
         }
         // 通报事项类别
-        if (item.prop === 'tbsxlb') {
+        if (item.prop === 'notificationMattersType') {
             item.options = bj_category_onm;
         }
         // 通报方式
@@ -71,7 +72,7 @@ async function searchItem() {
             item.options = categoryOnm;
         }
         // 发出单位
-        if (item.prop === 'fcdw') {
+        if (item.prop === 'releasedUnit') {
             item.options = bj_lssuing_unit;
         }
         // 接收单位
@@ -82,15 +83,11 @@ async function searchItem() {
         if (item.prop === 'jsth') {
             item.options = bj_receive_return;
         }
-        if (item.prop === 'notificationStatus') {
-            item.options = notificationStatus;
-        }
+        // 采取措施
         if (item.prop === 'takeMeasures') {
             item.options = takeMeasures;
         }
-        if (item.prop === 'overdueStatus') {
-            item.options = overdueStatus;
-        }
+        // 是否需要反馈
         if (item.prop === 'wfir') {
             item.options = isFeedback;
         }
@@ -101,29 +98,60 @@ searchItem();
 import usePageModal from '@/components/components/hooks/usePageDetails';
 const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
     usePageModal();
-
-const handleDetails = async (type: any) => {
+// 新增按钮
+const handleAdd = async (type: any) => {
+    router.push({
+        path: '/notificationInfoManage/detailPublish',
+        query: { type: 'add', },
+    });
+};
+// 编辑查看按钮
+const handleDetails = async (releasedId: string, type: any) => {
     let typeName = '';
     if (type === 1) {
-        typeName = 'add'
-    } else if (type === 2) {
         typeName = 'detail'
-    } else if (type === 3) {
+    } else if (type === 2) {
         typeName = 'edit'
     }
 
     router.push({
-        path: '/notificationInfoManage/addOfflineNotificationQueryImport',
-        query: { type: typeName, },
+        path: '/notificationInfoManage/detailPublish',
+        query: { type: typeName, releasedId },
     });
 };
-
-// 导出
-const onExport = () => {
-    ElMessage.success('小编在努力开发中。。。');
-    return;
+const importDialog = reactive({
+    isvisible: false,
+    title: '线下通报查询信息导入',
+});
+const loading = ref(false);
+// const treeSelectdRef = ref();
+// 导入
+function handleImportShow() {
+    importDialog.isvisible = true;
+}
+const handleQuery = async () => {
+    loading.value = true;
+    setTimeout(() => {
+        if (tableListRef.value) {
+            tableListRef.value[0].handleReset(false);
+        }
+        if (searchTableRef.value) {
+            searchTableRef.value[0].handleResetClick();
+        }
+        loading.value = false;
+    }, 500);
 };
 
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+// 导出功能实现
+const onExport = async () => {
+    let data = {}
+    proxy!.download(
+        'business/releasedOffine/export', data,
+        `线下导入列表.xlsx`
+    );
+}
+
 const searchTableRef = ref();