bj-maritime-dcds-web/src/views/addressBook/index.vue

<template>
	<el-tabs type="card" v-model="activeTab" style="height: 100%" @tab-click="handleClick">
		<el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label" :name="tab.key">
			<div class="sensitive-words flex">
				<TreeSelect class="mr20" ref="treeSelectdRef" @treeCheck="getTreeCheck"></TreeSelect>
				<div class="table-box">
					<pageSearch
						ref="searchTableRef"
						:searchConfig="activeTab === 'industry' ? searchConfig : searchNonIndustryConfig"
					/>
					<pageContent
						ref="tableListRef"
						:total="total"
						:contentConfig="activeTab === 'industry' ? contentConfig : contentNonIndustryConfig"
						:pageList="tableData"
					>
						<template #button>
							<el-button type="primary" @click="onImport()">导入</el-button>
							<el-button type="primary" @click="onImport()">下载模版</el-button>
							<el-button type="primary" @click="onAdd()">新增</el-button>
							<el-button type="primary" @click="onExport()">导出</el-button>
						</template>
						<template #operate="scope">
							<el-button type="primary" link @click="handleEdit(scope.row.rentalCompanyId)"> 编辑 </el-button>
							<el-button type="primary" link @click="handleCheck(scope.row.rentalCompanyId)">
								查看
							</el-button>
							<el-button type="primary" link @click="onDelete(scope.row.rentalCompanyId)"> 删除 </el-button>
						</template>
					</pageContent>
				</div>
			</div>
		</el-tab-pane>
	</el-tabs>
	<pageDetail :modalConfig="activeTab === 'industry' ? detailConfig : detailNonIndustryConfig" ref="modalRef">
	</pageDetail>
</template>

<script setup lang="ts">
import contentConfig from './config/content.config';
import contentNonIndustryConfig from './config/content.nonIndustry.config';
import pageContent from '@/components/components/pageContent.vue';
import searchConfig from './config/search.config';
import searchNonIndustryConfig from './config/search.nonIndustry.config';
import pageSearch from '@/components/components/pageSearch.vue';
import detailConfig from './config/detail.config';
import detailNonIndustryConfig from './config/detail.nonIndustry.config';
import pageDetail from './components/detail.vue';
import useSystemStore from '@/store/main';
import TreeSelect from './components/treeSelect.vue';
import { type TabsPaneContext } from 'element-plus';
// 使用pinia数据
const systemStore = useSystemStore();
const { pageDetailInfo } = storeToRefs(systemStore);

const total = ref(0);
const pageSize = ref([10, 20, 30]);
const tableData = ref([]);
const tableListRef = ref<InstanceType<typeof pageContent>>();

const tabs = reactive([
	{
		key: 'industry',
		label: '行业内联络员',
		total: 0,
		tableData: [],
		loading: false,
		showDetail: true,
	},
	{
		key: 'nonIndustry',
		label: '行业外联络员',
		total: 0,
		tableData: [],
		loading: false,
		showDetail: true,
	},
]);

const activeTab = ref('industry');

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

const getTreeCheck = async data => {
	// console.log(await tableListRef.value);
	// console.log(data);
	if (tableListRef.value) {
		if (activeTab.value == 'industry') {
			searchConfig.pageListParams.deptIds = data.join();
		} else {
			searchNonIndustryConfig.pageListParams.deptIds = data.join();
		}

		await tableListRef.value[0].fetchPageListData({ deptIds: data.join() });
	}
};
const treeSelectdRef = ref<InstanceType<typeof TreeSelect>>();
const searchTableRef = ref<InstanceType<typeof pageSearch>>();
const handleClick = async (tab: TabsPaneContext) => {
	console.log(tab.props.name);
	setTimeout(() => {
		if (treeSelectdRef.value) {
			treeSelectdRef.value[0].handleReset(false);
		}
		if (searchTableRef.value) {
			searchTableRef.value[0].handleResetClick();
		}
	}, 500);
};

const handleEdit = async (id: string) => {
	await handlePageDetail(id);
	await handleEditDataClick();
};

const handleCheck = async (id: string) => {
	await handlePageDetail(id);
	await handleCheckDataClick();
};

// 新增按钮
const onAdd = () => {
	handleNewDataClick();
};
const onImport = () => {
	const link = document.createElement('a');
	link.href = `/assets/address-book.xlsx`;
	link.download = '违法信息通报通讯录人员导入模板.xlsx'; // 指定下载后的文件名
	link.style.display = 'none';
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
};
const onExport = () => {};

// 删除按钮
function onDelete(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;
	height: calc(100vh - 20vh);
}

.status {
	cursor: pointer;
	position: relative;

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

.dialog-tip {
	text-align: center;
}

.table-box {
	width: 75%;
	display: flex;
	flex-direction: column;
}

:deep .el-tabs__item.is-active {
	color: #fff;
	background-color: #409eff;
}
</style>