bj-maritime-dcds-web/src/views/notificationInfoInquiry/administrativePenalty/index.vue

<template>
    <div class="sensitive-words">
        <pageSearch ref="searchTableRef" :searchConfig="searchConfig">
            <template #disposeOrg="scope">
                <el-tree-select v-model="scope.value" :data="treeData" node-key="strId" filterable
                    @change="newVal => onMessageChange(scope, newVal)" placeholder="请选择处罚机构" />
            </template>
        </pageSearch>

        <pageContent ref="tableListRef" :total="total" :contentConfig="contentConfig" :pageList="tableData">
            <!-- 案号 -->
            <template #caseNo="scope">
                <span>SHMS2025</span>
            </template>
            <!-- 案由 -->
            <template #punishReason="scope">
                <span>船舶碰撞损害责任纠纷</span>
            </template>
            <!-- 船舶名称 -->
            <template #shipNameCn="shipNameCn">
                <span>和谐号</span>
            </template>
            <!-- 处罚类型 -->
            <template #processType="scope">
                <span>行为罚</span>
            </template>
            <!-- 处罚对象名称 -->
            <template #punishObjName="scope">
                <span>江苏远洋运输有限公司</span>
            </template>
            <!-- 船籍港 -->
            <template #portOfregistry="scope">
                <span>上海</span>
            </template>
            <!-- 违法发现时间 -->
            <template #wffxsj="scope">
                <span>2025-7-14 7:00:00</span>
            </template>
            <!-- 案件状态 -->
            <template #caseStatus="scope">
                <span>立案</span>
            </template>
            <!--立案时间 -->
            <template #registerDate="scope">
                <span>2025-6-22 17:20:00</span>
            </template>
            <!--处罚金额 -->
            <template #punishAmount="scope">
                <span>89,987,487,101.000</span>
            </template>
            <!--当前处理人 -->
            <template #dqclr="scope">
                <span>受理执法人员</span>
            </template>
            <!--特殊情况 -->
            <template #tsqk="scope">
                <span>无</span>
            </template>
            <!-- 违法信息 -->
            <template #wfxx="scope">
                <span>洋山海事处处罚填 洋海罚字(2025)第0032号</span>
            </template>
            <!--立案提交时间 -->
            <template #latjsj="scope">
                <span>2025-4-02 20:38:47</span>
            </template>
            <!--发布时间 -->
            <template #declareDate="scope">
                <span>2025-3-28 16:37:23</span>
            </template>
            <!--是否发布 -->
            <template #sffb="scope">
                <span>否</span>
            </template>
            <template #button>
                <el-button type="primary" @click="handleExport()">导出</el-button>
            </template>
            <template #operate="scope">
                <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>

<script setup lang="ts">
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 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,
    notificationStatus,
    isFeedback,
    overdueStatus,
    takeMeasures,
    bj_notification_type,
    bj_ship_delayed,
    bj_hand_opinion,
    bj_lssuing_unit,
    bj_initial_review_mark,
    bj_ship_port_registration,
} from '@/plugins/dictData';

const bj_ship_type = outTypeList('bj_ship_type'); // 船舶类型
const bj_ship_sort = outTypeList('bj_ship_sort'); // 船舶种类
const bj_process_type = outTypeList('bj_process_type'); // 处罚类型
const bj_parties_type = outTypeList('bj_parties_type'); // 当事人类别

const total = ref(0);
const pageSize = ref([10, 20, 30]);
const tableData = ref([]);
const tableListRef = ref();
const router = useRouter();

// 操作弹框
import usePageModal from '@/components/components/hooks/usePageDetails';
const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
    usePageModal();

const handleCheck = async (id?: string) => {
    router.push({
        path: '/notificationInfoInquiry/administrativePenaltyDetail',
        query: { type: 'detail' },
    });
};

const handleExport = () => {
    ElMessage.success('小编在努力开发中。。。');
    return;
};
const onMessageChange = (scope, newVal) => {
    scope.onInput(newVal);
};
// 通报发布
const handlePublish = releasedId => {
    ElMessage.success('小编在努力开发中。。。');
    // return;
    router.push({
        path: '/notificationInfoManage/detailPublish',
        query: { type: 'edit', releasedId }
        // path: '/notificationInfoInquiry/publish',
        // query: { type: 'edit', releasedId: releasedId },
    });
};
const searchTableRef = ref();
// 状态按钮
function handleStatus(value: string, status: string, str: string) {
    dialogVisible.value = true;
    // ElMessage.success('小编在努力开发中。。。');
    // return;
    // ElMessageBox.confirm(`是否${str}这条数据？`, '状态提示', {
    // 	confirmButtonText: '确定',
    // 	cancelButtonText: '取消',
    // 	type: 'warning',
    // })
    // 	.then(async () => {
    // 		const postData: any = await changeInventoryStatus(value, status);
    // 		if (postData.code === 200) {
    // 			tableListRef.value[0].fetchPageListData();
    // 			ElMessage.success('操作成功！');
    // 		} else {
    // 			ElMessage.error('操作失败！');
    // 		}
    // 	})
    // 	.catch(() => {
    // 		ElMessage({
    // 			type: 'info',
    // 			message: '取消操作',
    // 		});
    // 	});
}
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('是否删除这条数据？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            systemStore.deletePageDataAction(contentConfig.pageName, value);
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            });
        });
}

// 筛选-状态赋值
async function searchItem() {
    searchConfig.formItems.forEach(item => {
        if (item.prop === 'punishReason') {
            // item.options = searchList.value;
        }
        if (item.prop === 'shipType') {
            item.options = bj_ship_type;
        }
        // 船舶种类
        if (item.prop === 'shipSort') {
            item.options = bj_ship_sort;
        }
        if (item.prop === 'processType') {
            item.options = bj_process_type;
        }
        //处罚种类
        if (item.prop === 'todo') {
            item.options = bj_process_type;
        }
        //任务来源
        if (item.prop === '') {
            item.options = bj_process_type;
        }
        //海内河船
        if (item.prop === 'hnhc') {
            item.options = bj_process_type;
        }
        if (item.prop === 'partiesType') {
            item.options = bj_parties_type;
        }
        if (item.prop === 'portOfregistry') {
            item.options = bj_ship_port_registration;
        }
    });
}
searchItem();
const treeData = ref<TreeOptions[]>();
const deptStore = useDeptStore();
onMounted(async () => {
    // 加载组织架构
    if (!deptStore.hasDeptData) {
        await deptStore.loadDeptDataFromCache();
    }
    treeData.value = deptStore.deptData;
});
</script>

<style scoped lang="scss">
.sensitive-words {
    margin: 20px;
    // background-color: #fff;
}

.status {
    cursor: pointer;
    position: relative;

    .status-tip {
        position: absolute;
        top: 2px;
        left: 60px;
    }
}

.dialog-tip {
    text-align: center;
}
</style>