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 === '1' ? searchConfig : searchNonIndustryConfig"
					/>
					<pageContent
						ref="tableListRef"
						:total="total"
						:contentConfig="activeTab === '1' ? contentConfig : contentNonIndustryConfig"
						:pageList="tableData"
					>
						<!-- 短信接收人 -->
						<template #msgRecipient="scope">
							<template :index="index" v-for="(item, index) in bj_msg_recipient">
								<el-tag
									:index="index"
									v-if="item.value == scope.row.msgRecipient"
									:type="scope.row.msgRecipient == '1' ? 'success' : 'danger'"
									>{{ item.label }}</el-tag
								>
							</template>
						</template>
						<!-- 通讯录状态 -->
						<template #abStatus="scope">
							<template :index="index" v-for="(item, index) in bj_ab_status">
								<el-tag
									:index="index"
									v-if="item.value == scope.row.abStatus"
									:type="scope.row.abStatus == '1' ? 'success' : 'danger'"
									>{{ item.label }}</el-tag
								>
							</template>
						</template>
						<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.liaisonId)"> 编辑 </el-button>
							<el-button type="primary" link @click="handleCheck(scope.row.liaisonId)"> 查看 </el-button>
							<el-button type="primary" link @click="onDelete(scope.row.liaisonId)"> 删除 </el-button>
						</template>
					</pageContent>
				</div>
			</div>
		</el-tab-pane>
	</el-tabs>
	<pageDetail :modalConfig="activeTab === '1' ? 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';
import { outTypeList } from '@/libs/commonMeth';

const bj_msg_recipient = outTypeList('bj_msg_recipient'); //短信接收人
const bj_ab_status: any = outTypeList('bj_ab_status'); //通讯录状态
// 使用pinia数据
const systemStore = useSystemStore();
const { pageDetailInfo, searchObj } = 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: '1',
		label: '行业内联络员',
		total: 0,
		tableData: [],
		loading: false,
		showDetail: true,
	},
	{
		key: '2',
		label: '行业外联络员',
		total: 0,
		tableData: [],
		loading: false,
		showDetail: true,
	},
]);

const activeTab = ref('1');

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

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

		await tableListRef.value[0].fetchPageListData({ belongsDept: data.join() });
	}
};
const treeSelectdRef = ref<InstanceType<typeof TreeSelect>>();
const searchTableRef = ref<InstanceType<typeof pageSearch>>();
const handleClick = async (tab: TabsPaneContext) => {
	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: '取消删除',
			});
		});
}

// 筛选-状态赋值 bj_notification_status
async function searchItem() {
	searchConfig.formItems.forEach(item => {
		if (item.prop === 'msgRecipient') {
			item.options = bj_msg_recipient;
		}
		if (item.prop === 'abStatus') {
			item.options = bj_ab_status;
		}
	});
	searchNonIndustryConfig.formItems.forEach(item => {
		if (item.prop === 'abStatus') {
			item.options = bj_ab_status;
		}
	});
}
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>