通报信息查询：安全检查通报信息、船舶登记通报信息、行政处罚登记通报信息 页面数据逻辑梳理 前端实现不予通报按钮逻辑处理

src/views/notificationInfoInquiry/administrativePenalty/index.vue

@@ -76,13 +76,34 @@
                 <el-button type="primary" @click="handleExport()">导出</el-button>
             </template>
             <template #operate="scope">
-                <el-button type="primary" plain @click="handleCheck(scope.row.releasedId)"> 查看 </el-button>
-                <el-button type="primary" plain @click="handlePublish(scope.row.releasedId)"> 发布通报 </el-button>
-                <el-button type="primary" @click="handleStatus(scope.row.releasedId, '2', '不予通报')">
+                <el-button v-if="notifiShow" type="primary" plain @click="handleCheck(scope.row.releasedId)"> 查看
+                </el-button>
+                <el-button v-if="notifiShow" type="primary" plain @click="handlePublish(scope.row.releasedId)"> 发布通报
+                </el-button>
+                <el-button v-if="notifiShow" type="primary" @click="handleStatus(scope.row.releasedId, '2', '不予通报')">
                     不予通报
                 </el-button>
             </template>
         </pageContent>
+        <el-dialog v-model="dialogVisible" title="不予通报信息填写" width="500" :before-close="handleClose">
+            <el-form ref="ruleFormRef" style="max-width: 500px" :model="ruleForm" :rules="rules" label-width="auto">
+                <el-form-item label="不予通报原因：" prop="no_notification">
+                    <el-input v-model="ruleForm.no_notification" />
+                </el-form-item>
+                <el-form-item label="不予通报附件：">
+                    <FileUpload v-model="ruleForm.fileInfo"></FileUpload>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+                    <el-button type="primary" @click="submitForm(ruleFormRef)">
+                        确定
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 
@@ -96,6 +117,7 @@ import useSystemStore from '@/store/main';
 import { outTypeList } from '@/libs/commonMeth';
 import useDeptStore from '@/store/modules/dept';
 import { TreeOptions } from '@/types/global';
+import type { FormInstance, FormRules } from 'element-plus'
 const systemStore = useSystemStore();
 import {
     categoryOnm,
@@ -155,8 +177,9 @@ const handlePublish = releasedId => {
 const searchTableRef = ref();
 // 状态按钮
 function handleStatus(value: string, status: string, str: string) {
-    ElMessage.success('小编在努力开发中。。。');
-    return;
+    dialogVisible.value = true;
+    // ElMessage.success('小编在努力开发中。。。');
+    // return;
     // ElMessageBox.confirm(`是否${str}这条数据？`, '状态提示', {
     // 	confirmButtonText: '确定',
     // 	cancelButtonText: '取消',
@@ -178,6 +201,57 @@ function handleStatus(value: string, status: string, str: string) {
     // 		});
     // 	});
 }
+const dialogVisible = ref(false);
+// 不予通报按钮取消
+const handleClose = (done: () => void) => {
+    ElMessageBox.confirm('是否要关闭不予通报信息弹窗?')
+        .then(() => {
+            done()
+        })
+        .catch(() => {
+            // catch error
+        })
+}
+interface RuleForm {
+    no_notification: string,
+    fileInfo: string
+}
+
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive<RuleForm>({
+    no_notification: '',
+    fileInfo: ''
+})
+const rules = reactive<FormRules<RuleForm>>({
+    no_notification: [
+        { required: true, message: '不予通报原因不能为空！', trigger: 'blur' },
+    ],
+    fileInfo: [
+        { required: true, message: '不予通报附件不能为空！', trigger: 'blur' },
+    ]
+})
+const notifiShow = ref(true);
+const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            dialogVisible.value = false;
+            notifiShow.value = false;
+            ElMessage({
+                message: '操作成功！',
+                type: 'success',
+            })
+            formEl.resetFields()
+        } else {
+        }
+    })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+    dialogVisible.value = false;
+}
 // 删除按钮
 function handleDelete(value: any) {
     ElMessageBox.confirm('是否删除这条数据？', '删除提示', {

src/views/notificationInfoInquiry/securityCheck/index.vue

@@ -74,13 +74,34 @@
                 <el-button type="primary" @click="handleExport()">导出</el-button>
             </template>
             <template #operate="scope">
-                <el-button type="primary" plain @click="handleCheck(scope.row.shipId)"> 查看 </el-button>
-                <el-button type="primary" plain @click="handlePublish(scope.row.shipId)"> 发布通报 </el-button>
-                <el-button type="primary" @click="handleStatus(scope.row.shipId, '2', '不予通报')">
+                <el-button v-if="notifiShow" type="primary" plain @click="handleCheck(scope.row.releasedId)"> 查看
+                </el-button>
+                <el-button v-if="notifiShow" type="primary" plain @click="handlePublish(scope.row.releasedId)"> 发布通报
+                </el-button>
+                <el-button v-if="notifiShow" type="primary" @click="handleStatus(scope.row.releasedId, '2', '不予通报')">
                     不予通报
                 </el-button>
             </template>
         </pageContent>
+        <el-dialog v-model="dialogVisible" title="不予通报信息填写" width="500" :before-close="handleClose">
+            <el-form ref="ruleFormRef" style="max-width: 500px" :model="ruleForm" :rules="rules" label-width="auto">
+                <el-form-item label="不予通报原因：" prop="no_notification">
+                    <el-input v-model="ruleForm.no_notification" />
+                </el-form-item>
+                <el-form-item label="不予通报附件：">
+                    <FileUpload v-model="ruleForm.fileInfo"></FileUpload>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+                    <el-button type="primary" @click="submitForm(ruleFormRef)">
+                        确定
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 
@@ -90,12 +111,13 @@ 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 FileUpload from '@/components/notificationDetailsParts/waterSafetyInformation.vue'
 import useSystemStore from '@/store/main';
 import { outTypeList } from '@/libs/commonMeth';
 import useDeptStore from '@/store/modules/dept';
 import { TreeOptions } from '@/types/global';
 const systemStore = useSystemStore();
-
+import type { FormInstance, FormRules } from 'element-plus'
 import {
     categoryOnm,
     bj_notification_type,
@@ -143,10 +165,12 @@ const handlePublish = releasedId => {
     });
 };
 const searchTableRef = ref();
+const dialogVisible = ref(false)
 // 状态按钮
 function handleStatus(value: string, status: string, str: string) {
-    ElMessage.success('小编在努力开发中。。。');
-    return;
+    dialogVisible.value = true;
+    // ElMessage.success('小编在努力开发中。。。');
+    // return;
     // ElMessageBox.confirm(`是否${str}这条数据？`, '状态提示', {
     // 	confirmButtonText: '确定',
     // 	cancelButtonText: '取消',
@@ -168,6 +192,56 @@ function handleStatus(value: string, status: string, str: string) {
     // 		});
     // 	});
 }
+// 不予通报按钮取消
+const handleClose = (done: () => void) => {
+    ElMessageBox.confirm('是否要关闭不予通报信息弹窗?')
+        .then(() => {
+            done()
+        })
+        .catch(() => {
+            // catch error
+        })
+}
+interface RuleForm {
+    no_notification: string,
+    fileInfo: string
+}
+
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive<RuleForm>({
+    no_notification: '',
+    fileInfo: ''
+})
+const rules = reactive<FormRules<RuleForm>>({
+    no_notification: [
+        { required: true, message: '不予通报原因不能为空！', trigger: 'blur' },
+    ],
+    fileInfo: [
+        { required: true, message: '不予通报附件不能为空！', trigger: 'blur' },
+    ]
+})
+const notifiShow = ref(true);
+const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            dialogVisible.value = false;
+            notifiShow.value = false;
+            ElMessage({
+                message: '操作成功！',
+                type: 'success',
+            })
+            formEl.resetFields()
+        } else {
+        }
+    })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+    dialogVisible.value = false;
+}
 // 删除按钮
 function handleDelete(value: any) {
     ElMessageBox.confirm('是否删除这条数据？', '删除提示', {

src/views/notificationInfoInquiry/shipRegistration/index.vue

@@ -60,13 +60,34 @@
                 <el-button type="primary" @click="handleExport()">导出</el-button>
             </template>
             <template #operate="scope">
-                <el-button type="primary" plain @click="handleCheck(scope.row.releasedId)"> 查看 </el-button>
-                <el-button type="primary" plain @click="handlePublish(scope.row.releasedId)"> 发布通报 </el-button>
-                <el-button type="primary" @click="handleStatus(scope.row.releasedId, '2', '不予通报')">
+                <el-button v-if="notifiShow" type="primary" plain @click="handleCheck(scope.row.releasedId)"> 查看
+                </el-button>
+                <el-button v-if="notifiShow" type="primary" plain @click="handlePublish(scope.row.releasedId)"> 发布通报
+                </el-button>
+                <el-button v-if="notifiShow" type="primary" @click="handleStatus(scope.row.releasedId, '2', '不予通报')">
                     不予通报
                 </el-button>
             </template>
         </pageContent>
+        <el-dialog v-model="dialogVisible" title="不予通报信息填写" width="500" :before-close="handleClose">
+            <el-form ref="ruleFormRef" style="max-width: 500px" :model="ruleForm" :rules="rules" label-width="auto">
+                <el-form-item label="不予通报原因：" prop="no_notification">
+                    <el-input v-model="ruleForm.no_notification" />
+                </el-form-item>
+                <el-form-item label="不予通报附件：">
+                    <FileUpload v-model="ruleForm.fileInfo"></FileUpload>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+                    <el-button type="primary" @click="submitForm(ruleFormRef)">
+                        确定
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 
@@ -82,7 +103,7 @@ import { outTypeList } from '@/libs/commonMeth';
 import useDeptStore from '@/store/modules/dept';
 import { TreeOptions } from '@/types/global';
 import { bj_reason_deregistration, bj_ship_port_registration } from '@/plugins/dictData';
-
+import type { FormInstance, FormRules } from 'element-plus'
 const bj_ship_type = outTypeList('bj_ship_type'); // 船舶种类
 
 const total = ref(0);
@@ -123,8 +144,9 @@ const handlePublish = releasedId => {
 const searchTableRef = ref();
 // 状态按钮
 function handleStatus(value: string, status: string, str: string) {
-    ElMessage.success('小编在努力开发中。。。');
-    return;
+    dialogVisible.value = true;
+    // ElMessage.success('小编在努力开发中。。。');
+    // return;
     // ElMessageBox.confirm(`是否${str}这条数据？`, '状态提示', {
     // 	confirmButtonText: '确定',
     // 	cancelButtonText: '取消',
@@ -146,6 +168,57 @@ function handleStatus(value: string, status: string, str: string) {
     // 		});
     // 	});
 }
+const dialogVisible = ref(false);
+// 不予通报按钮取消
+const handleClose = (done: () => void) => {
+    ElMessageBox.confirm('是否要关闭不予通报信息弹窗?')
+        .then(() => {
+            done()
+        })
+        .catch(() => {
+            // catch error
+        })
+}
+interface RuleForm {
+    no_notification: string,
+    fileInfo: string
+}
+
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive<RuleForm>({
+    no_notification: '',
+    fileInfo: ''
+})
+const rules = reactive<FormRules<RuleForm>>({
+    no_notification: [
+        { required: true, message: '不予通报原因不能为空！', trigger: 'blur' },
+    ],
+    fileInfo: [
+        { required: true, message: '不予通报附件不能为空！', trigger: 'blur' },
+    ]
+})
+const notifiShow = ref(true);
+const submitForm = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid, fields) => {
+        if (valid) {
+            dialogVisible.value = false;
+            notifiShow.value = false;
+            ElMessage({
+                message: '操作成功！',
+                type: 'success',
+            })
+            formEl.resetFields()
+        } else {
+        }
+    })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+    dialogVisible.value = false;
+}
 // 删除按钮
 function handleDelete(value: any) {
     ElMessageBox.confirm('是否删除这条数据？', '删除提示', {