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

<template>
	<div class="sensitive-words">
			<pageSearch ref="searchTableRef" :searchConfig="searchConfig">
				<template #messageType="scope">
					<el-select
						v-model="scope.value"
						placeholder="请选择消息类型"
						@change="(newVal) => onMessageChange(scope, newVal)"
					>
						<el-option label="通知" value="notice"></el-option>
						<el-option label="警告" value="warning"></el-option>
						<el-option label="错误" value="error"></el-option>
					</el-select>
				</template>
				<template #reportType="scope">
					<el-select
						v-model="scope.value"
						placeholder="请选择通报事项类别"
						@change="(newVal) => onMessageChange(scope, newVal)"
					>
						<el-option label="通知" value="notice"></el-option>
						<el-option label="警告" value="warning"></el-option>
						<el-option label="错误" value="error"></el-option>
					</el-select>
				</template>
				<template #reportEvent="scope">
					<el-select
						v-model="scope.value"
						placeholder="请选择通报事项"
						@change="(newVal) => onMessageChange(scope, newVal)"
					>
						<el-option label="通知" value="notice"></el-option>
						<el-option label="警告" value="warning"></el-option>
						<el-option label="错误" value="error"></el-option>
					</el-select>
				</template>
			</pageSearch>

			<pageContent ref="tableListRef" :total="total" :contentConfig="contentConfig" :pageList="tableData">
					<template #button>
							<el-button type="primary" @click="handleCheck()">导出</el-button>
					</template>
					<template #operate="scope">
							<el-button type="primary" link @click="handleCheck(scope.row.rentalCompanyId)">
									查看
							</el-button>
							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
									发布通报
							</el-button>
							<el-button type="primary" link @click="handleDelete(scope.row.rentalCompanyId)">
									不予通报
							</el-button>
					</template>
			</pageContent>
	</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';
const systemStore = useSystemStore();

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: 'shipRegistrationDetails',
    query: { type: 'detail' }
  });
};

const onMessageChange = (scope, newVal) => {
	scope.onInput(newVal);
}
// 新增按钮
const handleAdd = () => {
	router.push({
    name: 'addPublish',
    query: { type: 'add' }
  });
};
const searchTableRef = ref();
const onClickDeleta = async (row: any) => {
	ElMessageBox.confirm('确认删除此条数据吗？', '删除', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
	}).then(() => {
			// 删除后的回调
	});
};
// 删除按钮
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 === 'status') {
					// item.options = searchList.value;
			}
	});
}
searchItem();
</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>