cankao-admin/src/views/pages/tenantUser/index.vue

<template>
	<div class="index">
		<div class="form">
			<div class="form_button">
				<el-button type="primary" :icon="Plus" @click="addOpen">创建子账号</el-button>
				<el-button @click="addImport">批量导入</el-button>
				<el-button @click="exportExcel">导出</el-button>
				<el-button @click="clearForm">清空条件</el-button>
			</div>
			<el-form class="form_content"
				><el-form-item>
					<el-input v-model="formData.mobile" placeholder="请输入账号手机号" @keydown.enter="getData">
						<template #append>
							<el-button icon="Search" @click="getData" />
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="formData.companyName" placeholder="请输入企业名称" @keydown.enter="getData">
						<template #append>
							<el-button icon="Search" @click="getData" />
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="formData.accountType" placeholder="账号类型（全部）" class="input" clearable @change="getData">
						<el-option v-for="item of ACCOUNTTYPE_CONST" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="formData.status" placeholder="账号状态（全部）" class="input" clearable @change="getData">
						<el-option v-for="item of STATUS_CONST" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<tableComponents :tableData="tableData" :tableLoading="loading" :hadExpand="false">
			<el-table-column prop="name" label="姓名" align="center" />
			<el-table-column prop="mobile" label="手机号" align="center" />
			<el-table-column prop="companyName" label="企业名称" align="center" />
			<el-table-column prop="accountType" label="账号类型" align="center">
				<template #default="scope">
					{{ ACCOUNTTYPE_CONST[scope.row.accountType]?.label }}
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center" />
			<el-table-column prop="updateTime" label="变更时间" align="center" />
			<el-table-column prop="status" label="账号状态" align="center">
				<template #default="scope">
					<div style="display: flex; align-items: center; justify-content: center">
						<div class="r_point" v-if="scope.row.status === 0">
							<div class="point" style="background-color: #2dc74c"></div>
							<text style="color: #2dc74c; white-space: nowrap">{{ STATUS_CONST[scope.row.status]?.label }}</text>
						</div>
						<div class="r_point" v-else>
							<div class="point" style="background-color: #eb1c5d"></div>
							<text style="color: #eb1c5d; white-space: nowrap">{{ STATUS_CONST[scope.row.status]?.label }}</text>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<el-button type="text" @click="addOpen(scope.row)">编辑</el-button>
					<el-button type="text" v-if="scope.row.status === 1" @click="doUpdateStatus(scope.row)">启用</el-button>
					<el-button type="text" v-else @click="doUpdateStatus(scope.row)">禁用</el-button>
				</template>
			</el-table-column>
		</tableComponents>

		<addDialog ref="addDialogRef" @close="getData"></addDialog>
		<importDialog ref="importDialogRef" @close="getData"></importDialog>
	</div>
</template>

<script setup lang="ts" name="tenant">
import { onMounted, ref, reactive } from 'vue';
import { NextLoading } from '/@/utils/loading';
import tableComponents from '/@/components/tableComponents/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import addDialog from './add.vue';
import importDialog from './import.vue';
import { Plus } from '@element-plus/icons-vue';
import { disableTenantUser, enableTenantUser, exportTenantUser, getTenantUserList } from '/@/api/tenant';
import { ACCOUNTTYPE_CONST, STATUS_CONST } from '/@/views/pages/tenant/constant';

type FormData = {
	mobile: string;
	companyName: string;
	accountType: number | undefined;
	status: number | undefined;
};
type IData = {
	id: number;
	companyName: string;
	accountType: number;
	mobile: string;
	name: string;
	createTime: string;
	updateTime: string;
	status: number;
};
type TableData = {
	data: IData[];
	total: number;
	page: number;
	size: number;
};

const formData = reactive<FormData>({
	mobile: '',
	companyName: '',
	accountType: undefined,
	status: undefined,
});
const tableData = reactive<TableData>({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});
const loading = ref(false);

// 获取数据
async function getData() {
	loading.value = true;
	let { code, data, total } = await getTenantUserList({
		page: tableData.page,
		size: tableData.size,
		...formData,
	});
	loading.value = false;
	if (code == 200) {
		tableData.data = data;
		tableData.total = total;
	}
}
// 启用禁用
async function doUpdateStatus(row: IData) {
	ElMessageBox.confirm('确定' + (row.status === 1 ? '启用' : '禁用') + '该账号吗？', '提示', {
		type: 'warning',
	}).then(async () => {
		// 启用或禁用
		const updateStatus = row.status === 1 ? enableTenantUser : disableTenantUser;

		let { code, data } = await updateStatus({
			id: row.id,
		});
		if (code == 200) {
			ElMessage.success('操作成功');
			getData();
		}
	});
}

const addDialogRef = ref();
// 新增弹窗打开
function addOpen(data?: IData) {
	addDialogRef.value.open(data);
}
const importDialogRef = ref();
function addImport(data?: any) {
	importDialogRef.value.open(data);
}

// 导出
function exportExcel() {
	ElMessageBox.confirm('确定导出吗？', '提示', {
		type: 'warning',
	}).then(async () => {
		try {
			// 导出
			const response = await exportTenantUser({
				page: tableData.page,
				size: tableData.size,
				...formData,
			});

			const filename = '租户子账号导出.xlsx'; // 默认文件名
			// 创建 Blob URL
			const blob = new Blob([response]); // response 已经是 Blob 对象
			const downloadUrl = window.URL.createObjectURL(blob);
			const link = document.createElement('a');
			link.href = downloadUrl;
			link.download = filename; // 设置下载文件名
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			// 释放 Blob URL
			window.URL.revokeObjectURL(downloadUrl);
		} catch (error) {
			ElMessage.error('导出失败');
		}
	});
}

function clearForm() {
	formData.mobile = '';
	formData.companyName = '';
	formData.accountType = undefined;
	formData.status = undefined;
	getData();
}

// 页面加载时
onMounted(() => {
	NextLoading.done();
	getData();
});
</script>

<style scoped lang="scss">
.index {
	background-color: white;
	padding: 30px;
	border-radius: 10px;
}

.form {
	// display: flex;
	// justify-content: space-between;
	margin-bottom: 30px;

	.input {
		width: 200px;
	}

	.form_content {
		display: flex;
		gap: 20px;
		align-items: center;
		padding: 20px;
		border: 1px solid #f0f0f0;
		border-radius: 4px;
		background-color: #fafafa;
	}

	:deep(.el-form-item--large) {
		display: flex;
		align-items: center;
		margin-bottom: 0;
	}

	:deep(.el-form-item--label-right .el-form-item__label) {
		font-weight: bold;
		color: #3e3e3e;
	}

	.form_button {
		display: flex;
		margin-bottom: 20px;
	}
}

.r_point {
	display: flex;
	align-items: center;
	gap: 3px;
}

.point {
	width: 8px;
	height: 8px;
	border-radius: 100px;
	// color: #ffaa48;
}
</style>