feat: 添加转发量弹窗功能，优化数据获取和页码变更逻辑

- 将租户管理和子账号管理路由的isKeepAlive设置为false
- 添加oldPhone变量用于记录原始手机号
- 在编辑租户时保存原始手机号
- 当租户手机号发生变更时显示特殊提示信息
- 修复租户用户页面组件名称错误

src/api/jnh/index.ts

@@ -52,3 +52,12 @@ export const resetPassword = (data: any) => {
 		data,
 	});
 };
+
+// 转发量明细
+export const getShareDetails = (data: any) => {
+	return request({
+		url: '/jnh/user/shares',
+		method: 'get',
+		params: data,
+	});
+};

src/api/tenant/index.ts

@@ -0,0 +1,171 @@
+// 租户/子账号管理
+
+import { id } from 'element-plus/es/locale';
+import request from '/@/utils/request';
+
+// 获取租户列表参数
+type TenantListDTO = {
+	accountType: number; // 账号类型
+	companyType: number; // 企业类型
+	status: number; // 状态  0: 启用 1: 禁用
+	accountName: string; // 账号名称
+	page: number; // 页码
+	size: number; // 页数
+	orderBy: string; // 排序字段
+	direction: string; // 排序方式
+};
+// 获取租户列表
+export const getTenantList = (params: Partial<TenantListDTO>) => {
+	return request({
+		url: '/tenant/list',
+		method: 'get',
+		params,
+	});
+};
+// 创建租户参数
+type CreateTenantDTO = {
+	id?: number; // 租户id
+	companyType: number | string; // 企业类型
+	companyName: string; // 企业名称
+	accountName: string; // 账号名称
+	accountType: number | string; // 账号类型
+	phone: string; // 手机号
+	validStart: string; // 有效期开始
+	validEnd: string; // 有效期结束
+	accountLimit: number; // 子账号最大数量
+};
+// 创建租户
+export const createTenant = (data: CreateTenantDTO) => {
+	return request({
+		url: '/tenant/create',
+		method: 'post',
+		data,
+	});
+};
+// 修改租户
+export const updateTenant = (data: CreateTenantDTO) => {
+	return request({
+		url: '/tenant/update',
+		method: 'post',
+		data,
+	});
+};
+// 租户禁用
+export const disableTenant = (data: { id: number }) => {
+	return request({
+		url: '/tenant/disable',
+		method: 'post',
+		data,
+	});
+};
+// 租户启用
+export const enableTenant = (data: { id: number }) => {
+	return request({
+		url: '/tenant/enable',
+		method: 'post',
+		data,
+	});
+};
+// 租户导出
+export const exportTenant = (params: Partial<TenantListDTO>) => {
+	return request({
+		url: '/tenant/export',
+		method: 'get',
+		params,
+		responseType: 'blob',
+	});
+};
+// 租户删除
+export const deleteTenant = (data: { id: number }) => {
+	return request({
+		url: `/tenant/${data.id}/delete`,
+		method: 'post',
+	});
+};
+
+// 获取子账号列表参数
+type TenantUserListDTO = {
+	mobile: string; // 手机号
+	companyName: string; // 企业名称
+	accountType: number; // 账号类型
+	status: number; // 状态 0: 启用 1: 禁用
+	page: number; // 页码
+	size: number; // 页数
+	orderBy: string; // 排序字段
+	direction: string; // 排序方式
+};
+// 获取子账号列表
+export const getTenantUserList = (params: Partial<TenantUserListDTO>) => {
+	return request({
+		url: '/tenant/user/list',
+		method: 'get',
+		params,
+	});
+};
+
+// 创建租户子账号参数
+type CreateTenantUserDTO = {
+	id?: number; // 子账号id
+	name: string; // 姓名
+	mobile: string; // 手机号
+	companyName: number; // 企业名称
+	department: string; // 部门
+	accountType: string; // 账号类型
+};
+// 创建租户子账号
+export const createTenantUser = (data: CreateTenantUserDTO) => {
+	return request({
+		url: '/tenant/user/create',
+		method: 'post',
+		data,
+	});
+};
+// 修改租户子账号
+export const updateTenantUser = (data: CreateTenantUserDTO) => {
+	return request({
+		url: '/tenant/user/update',
+		method: 'post',
+		data,
+	});
+};
+// 租户子账号批量导入
+export const importTenantUser = (data: any) => {
+	return request({
+		url: '/tenant/user/import',
+		method: 'post',
+		headers: { 'Content-Type': 'multipart/form-data' },
+		data,
+	});
+};
+// 租户子账号导出
+export const exportTenantUser = (params: Partial<TenantUserListDTO>) => {
+	return request({
+		url: '/tenant/user/export',
+		method: 'get',
+		params,
+		responseType: 'blob',
+	});
+};
+// 租户子账号禁用
+export const disableTenantUser = (data: { id: number }) => {
+	return request({
+		url: '/tenant/user/disable',
+		method: 'post',
+		data,
+	});
+};
+// 租户子账号启用
+export const enableTenantUser = (data: { id: number }) => {
+	return request({
+		url: '/tenant/user/enable',
+		method: 'post',
+		data,
+	});
+};
+// 租户子账号删除
+export const deleteTenantUser = (data: { id: number }) => {
+	return request({
+		url: `/tenant/user/${data.id}/delete`,
+		method: 'post',
+	});
+};

src/router/route.ts

@@ -190,7 +190,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 							isKeepAlive: true,
 							isAffix: true,
 							isIframe: false,
-							roles: ['common'],
+							roles: ['admin', 'common', 'secondCommon'],
 						},
 					},
 					{
@@ -358,6 +358,36 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 			// 	},
 			// 	children: [],
 			// },
+			{
+				path: '/tenant',
+				name: 'tenant',
+				component: () => import('/@/views/pages/tenant/index.vue'),
+				meta: {
+					title: '租户管理',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: false,
+					isAffix: true,
+					isIframe: false,
+					roles: ['common'],
+					icon: 'ele-UserFilled',
+				},
+			},
+			{
+				path: '/tenant/user',
+				name: 'tenantUser',
+				component: () => import('/@/views/pages/tenantUser/index.vue'),
+				meta: {
+					title: '子账号管理',
+					isLink: '',
+					isHide: false,
+					isKeepAlive: false,
+					isAffix: true,
+					isIframe: false,
+					roles: ['common'],
+					icon: 'ele-User',
+				},
+			},
 		],
 	},
 ];

src/views/pages/jnh/index.vue

@@ -40,11 +40,16 @@
 			<el-table-column prop="department" label="部门" align="center" />
 			<el-table-column prop="createTime" label="创建时间" align="center" />
 			<el-table-column prop="updateTime" label="更新时间" align="center" />
+			<el-table-column prop="shareCount" label="转发量" align="center">
+				<template #default="scope">
+					<div class="cursor-pointer" @click="handleOpenShare(scope.row)">{{ scope.row.shareCount }}</div>
+				</template>
+			</el-table-column>
 
 			<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 == 1">
+						<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">启用</text>
 						</div>
@@ -59,7 +64,7 @@
 				<template #default="scope">
 					<el-button type="text" @click="addOpen(scope.row)">编辑</el-button>
 					<el-button type="text" @click="doDeleteAccount(scope.row)">删除</el-button>
-					<el-button type="text" v-if="scope.row.status == 0" @click="doUpdateStatus(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>
@@ -67,13 +72,47 @@
 
 		<addDialog ref="addDialogRef" @close="getData"></addDialog>
 		<importDialog ref="importDialogRef" @close="getData"></importDialog>
+
+		<el-dialog v-model="shareDialogVisible" :title="shareDialogTitle" width="600" :before-close="handleClose">
+			<div>
+				<el-scrollbar max-height="500px">
+					<el-table :data="shareDetailData.data" style="width: 100%" :show-header="false">
+						<el-table-column prop="times" label="次数" align="center" width="80">
+							<template #default="scope">
+								<el-tag type="primary" style="font-weight: 700">{{ scope.row.times }}次</el-tag>
+							</template>
+						</el-table-column>
+						<el-table-column prop="title" label="标题" align="center">
+							<template #default="scope">
+								<div>{{ scope.row.title || '-' }}</div>
+							</template>
+						</el-table-column>
+					</el-table>
+				</el-scrollbar>
+
+				<div class="pagination">
+					<el-pagination
+						size="mini"
+						layout="total, prev, pager, next"
+						prev-text="上一页"
+						next-text="下一页"
+						background
+						v-model:page-size="shareDetailData.size"
+						:total="shareDetailData.total"
+						:pager-count="5"
+						v-model:current-page="shareDetailData.page"
+						@current-change="currentChange"
+					/>
+				</div>
+			</div>
+		</el-dialog>
 	</div>
 </template>
 
 <script setup lang="ts" name="loginIndex">
 import { onMounted, ref, reactive } from 'vue';
 import { NextLoading } from '/@/utils/loading';
-import { getAccounts, deleteAccount, updateStatus } from '/@/api/jnh';
+import { getAccounts, deleteAccount, updateStatus, getShareDetails } from '/@/api/jnh';
 import tableComponents from '/@/components/tableComponents/index.vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import addDialog from '/@/views/pages/jnh/add.vue';
@@ -125,7 +164,7 @@ async function doDeleteAccount(row) {
 }
 
 async function doUpdateStatus(row) {
-	ElMessageBox.confirm('确定' + (row.status == 0 ? '启用' : '禁用') + '该账号吗？', '提示', {
+	ElMessageBox.confirm('确定' + (row.status == 1 ? '启用' : '禁用') + '该账号吗？', '提示', {
 		type: 'warning',
 	}).then(async () => {
 		let { code, data } = await updateStatus({
@@ -147,6 +186,51 @@ function clearForm() {
 	getData();
 }
 
+// 转发量弹窗
+const shareDialogVisible = ref(false);
+const shareDialogTitle = ref('');
+const sharePlayload = ref({});
+const shareDetailData = reactive({
+	data: [],
+	total: 0,
+	page: 1,
+	size: 10,
+	loading: false,
+});
+// 转发量弹窗打开
+function handleOpenShare(playload: any) {
+	sharePlayload.value = playload;
+	shareDialogTitle.value = `${playload.name || '-'}转发明细`;
+	shareDialogVisible.value = true;
+	shareDetailData.loading = true;
+	shareDetailData.page = 1
+	getShareData();
+}
+// 转发量弹窗关闭
+function handleClose() {
+	shareDialogVisible.value = false;
+}
+// 转发量弹窗页码改变
+function currentChange(page: number) {
+	shareDetailData.page = page;
+	getShareData();
+}
+
+// 获取转发量数据
+function getShareData() {
+	getShareDetails({ mobile: sharePlayload.value.mobile, page: shareDetailData.page, size: shareDetailData.size }).then((res) => {
+		shareDetailData.loading = false;
+		const { code, data, total } = res;
+		if (code == 200) {
+			shareDetailData.data = data;
+			shareDetailData.total = total;
+		} else {
+			shareDetailData.data = [];
+			shareDetailData.total = 0;
+		}
+	});
+}
+
 // 页面加载时
 onMounted(() => {
 	NextLoading.done();
@@ -205,4 +289,14 @@ onMounted(() => {
 	border-radius: 100px;
 	// color: #ffaa48;
 }
+
+.cursor-pointer {
+	cursor: pointer;
+	color: #099ed0;
+}
+.pagination {
+	display: flex;
+	justify-content: center;
+	margin-top: 20px;
+}
 </style>

src/views/pages/richedit/DetailDrawer/index.vue

@@ -157,7 +157,7 @@
 							<el-rate v-model="form.rating" clearable :disabled="readOnly" :max="10" />
 						</el-form-item>
 
-						<el-form-item label="潜在独家：" prop="industrySelect">
+						<el-form-item label="潜在先机：" prop="industrySelect">
 							<el-radio-group v-model="form.exclusive" size="large" style="width: 240px" :disabled="readOnly">
 								<el-radio :label="1">是</el-radio>
 								<el-radio :label="0">否</el-radio>

src/views/pages/richedit/all.vue

@@ -138,7 +138,7 @@
 							@change="handleSearch"
 						/>
 						<span>企业检索：</span>
-						<el-select
+						<el-select-v2
 							class="search-input"
 							popper-class="option-box"
 							v-model="form.companyName"
@@ -152,17 +152,22 @@
 							placeholder="输入企业名称/企业简称/证券编码进行搜索"
 							:loading="loading"
 							:remote-method="getCompany"
+							:options="companyList"
+							:props="{
+								label: 'companyName',
+								value: 'companyName',
+							}"
 							@change="getData"
 							style="width: 180px"
 						>
-							<el-option v-for="item in companyList" :key="item.companyName" :label="item.companyName" :value="item.companyName"> </el-option>
+							<!-- <el-option v-for="item in companyList" :key="item.companyName" :label="item.companyName" :value="item.companyName"> </el-option> -->
-						</el-select>
+						</el-select-v2>
 
-						<span>独家资讯：</span>
+						<span>先机资讯：</span>
 						<el-select
 							v-model="form.exclusive"
 							clearable
-							placeholder="是否独家搜索"
+							placeholder="是否先机搜索"
 							size="large"
 							style="width: 180px"
 							filterable
@@ -334,6 +339,11 @@
 							<el-dropdown-menu>
 								<el-dropdown-item :command="null">全部</el-dropdown-item>
 								<el-dropdown-item :command="0">无评分</el-dropdown-item>
+								<el-dropdown-item :command="10">10</el-dropdown-item>
+								<el-dropdown-item :command="9">9</el-dropdown-item>
+								<el-dropdown-item :command="8">8</el-dropdown-item>
+								<el-dropdown-item :command="7">7</el-dropdown-item>
+								<el-dropdown-item :command="6">6</el-dropdown-item>
 								<el-dropdown-item :command="5">5</el-dropdown-item>
 								<el-dropdown-item :command="4">4</el-dropdown-item>
 								<el-dropdown-item :command="3">3</el-dropdown-item>
@@ -356,6 +366,53 @@
 					</div>
 				</template>
 			</el-table-column>
+			<el-table-column label="风险性" align="center" width="220">
+				<template #header>
+					<el-dropdown trigger="click" @command="handleCommand2">
+						<div class="el-dropdown-link">
+							<text style="color: rgba(0, 0, 0, 0.85); font-size: 14px">风险性</text>
+							<el-image :src="icon_table_filter" style="width: 20px; height: 20px"></el-image>
+						</div>
+						<template #dropdown>
+							<div>
+								<el-dropdown-menu>
+									<el-dropdown-item :command="null">全部</el-dropdown-item>
+									<el-dropdown-item :command="0">无敏</el-dropdown-item>
+									<el-dropdown-item :command="40">低敏</el-dropdown-item>
+									<el-dropdown-item :command="70">中敏</el-dropdown-item>
+									<el-dropdown-item :command="85">高敏</el-dropdown-item>
+								</el-dropdown-menu>
+							</div>
+						</template>
+					</el-dropdown>
+				</template>
+				<template v-slot="scope">
+					<el-tooltip
+						v-if="scope.row.politicalSensitivity >= 0 && scope.row.politicalSensitivity < 40"
+						content="基本不涉及时政敏感信息，可支持一定范围的传播"
+						placement="top"
+					>
+						<el-tag type="info">{{ scope.row.politicalSensitivity >= 0 && scope.row.politicalSensitivity < 40 ? '无敏' : '' }}</el-tag>
+					</el-tooltip>
+					<el-tooltip
+						v-if="scope.row.politicalSensitivity >= 40 && scope.row.politicalSensitivity < 70"
+						content="可能一定程度上涵盖时政相关信息，但一般不涉及确认敏感的议题"
+						placement="top"
+					>
+						<el-tag type="primary">{{ scope.row.politicalSensitivity >= 40 && scope.row.politicalSensitivity < 70 ? '低敏' : '' }}</el-tag>
+					</el-tooltip>
+					<el-tooltip
+						v-if="scope.row.politicalSensitivity >= 70 && scope.row.politicalSensitivity < 85"
+						content="可能存在具备政治立场倾向性或有不当表述，建议内部传阅或局部修改后发布"
+						placement="top"
+					>
+						<el-tag type="warning">{{ scope.row.politicalSensitivity >= 70 && scope.row.politicalSensitivity < 85 ? '中敏' : '' }}</el-tag>
+					</el-tooltip>
+					<el-tooltip v-if="scope.row.politicalSensitivity >= 85" content="极可能包含高敏感信息，存在不适合在公开场合传播的信息内容" placement="top">
+						<el-tag type="danger">{{ scope.row.politicalSensitivity >= 85 ? '高敏' : '' }}</el-tag>
+					</el-tooltip>
+				</template>
+			</el-table-column>
 			<el-table-column prop="publishTime" label="报道时间" sortable="custom" align="center" />
 			<el-table-column prop="updateTime" label="状态变动时间" sortable="custom" align="center">
 				<template v-slot="scope">
@@ -796,6 +853,11 @@ function handleCommand(val) {
 	getData();
 }
 
+function handleCommand2(val) {
+	form.value.politicalSensitivity = val;
+	getData();
+}
+
 function handleCommandRating(val) {
 	form.value.rating = val;
 	getData();

src/views/pages/richedit/index.vue

@@ -263,7 +263,7 @@
 							<el-option>否</el-option>
 						</el-select> -->
 
-						<el-select
+						<el-select-v2
 							class="search-input"
 							popper-class="option-box"
 							v-model="form.companyName"
@@ -277,17 +277,22 @@
 							placeholder="输入企业名称/企业简称/证券编码进行搜索"
 							:loading="loading"
 							:remote-method="getCompany"
+							:options="companyList"
+							:props="{
+								label: 'companyName',
+								value: 'companyName',
+							}"
 							@change="getData"
 							style="width: 180px"
 						>
-							<el-option v-for="item in companyList" :key="item.companyName" :label="item.companyName" :value="item.companyName"> </el-option>
+							<!-- <el-option v-for="item in companyList" :key="item.companyName" :label="item.companyName" :value="item.companyName"> </el-option> -->
-						</el-select>
+						</el-select-v2>
 
-						<span>独家资讯：</span>
+						<span>先机资讯：</span>
 						<el-select
 							v-model="form.exclusive"
 							clearable
-							placeholder="是否独家搜索"
+							placeholder="是否先机搜索"
 							size="large"
 							style="width: 180px"
 							filterable
@@ -484,6 +489,11 @@
 							<el-dropdown-menu>
 								<el-dropdown-item :command="null">全部</el-dropdown-item>
 								<el-dropdown-item :command="0">无评分</el-dropdown-item>
+								<el-dropdown-item :command="10">10</el-dropdown-item>
+								<el-dropdown-item :command="9">9</el-dropdown-item>
+								<el-dropdown-item :command="8">8</el-dropdown-item>
+								<el-dropdown-item :command="7">7</el-dropdown-item>
+								<el-dropdown-item :command="6">6</el-dropdown-item>
 								<el-dropdown-item :command="5">5</el-dropdown-item>
 								<el-dropdown-item :command="4">4</el-dropdown-item>
 								<el-dropdown-item :command="3">3</el-dropdown-item>
@@ -506,6 +516,54 @@
 					</div>
 				</template>
 			</el-table-column>
+
+			<el-table-column label="风险性" align="center" width="220">
+				<template #header>
+					<el-dropdown trigger="click" @command="handleCommand2">
+						<div class="el-dropdown-link">
+							<text style="color: rgba(0, 0, 0, 0.85); font-size: 14px">风险性</text>
+							<el-image :src="icon_table_filter" style="width: 20px; height: 20px"></el-image>
+						</div>
+						<template #dropdown>
+							<div>
+								<el-dropdown-menu>
+									<el-dropdown-item :command="null">全部</el-dropdown-item>
+									<el-dropdown-item :command="0">无敏</el-dropdown-item>
+									<el-dropdown-item :command="40">低敏</el-dropdown-item>
+									<el-dropdown-item :command="70">中敏</el-dropdown-item>
+									<el-dropdown-item :command="85">高敏</el-dropdown-item>
+								</el-dropdown-menu>
+							</div>
+						</template>
+					</el-dropdown>
+				</template>
+				<template v-slot="scope">
+					<el-tooltip
+						v-if="scope.row.politicalSensitivity >= 0 && scope.row.politicalSensitivity < 40"
+						content="基本不涉及时政敏感信息，可支持一定范围的传播"
+						placement="top"
+					>
+						<el-tag type="info">{{ scope.row.politicalSensitivity >= 0 && scope.row.politicalSensitivity < 40 ? '无敏' : '' }}</el-tag>
+					</el-tooltip>
+					<el-tooltip
+						v-if="scope.row.politicalSensitivity >= 40 && scope.row.politicalSensitivity < 70"
+						content="可能一定程度上涵盖时政相关信息，但一般不涉及确认敏感的议题"
+						placement="top"
+					>
+						<el-tag type="primary">{{ scope.row.politicalSensitivity >= 40 && scope.row.politicalSensitivity < 70 ? '低敏' : '' }}</el-tag>
+					</el-tooltip>
+					<el-tooltip
+						v-if="scope.row.politicalSensitivity >= 70 && scope.row.politicalSensitivity < 85"
+						content="可能存在具备政治立场倾向性或有不当表述，建议内部传阅或局部修改后发布"
+						placement="top"
+					>
+						<el-tag type="warning">{{ scope.row.politicalSensitivity >= 70 && scope.row.politicalSensitivity < 85 ? '中敏' : '' }}</el-tag>
+					</el-tooltip>
+					<el-tooltip v-if="scope.row.politicalSensitivity >= 85" content="极可能包含高敏感信息，存在不适合在公开场合传播的信息内容" placement="top">
+						<el-tag type="danger">{{ scope.row.politicalSensitivity >= 85 ? '高敏' : '' }}</el-tag>
+					</el-tooltip>
+				</template>
+			</el-table-column>
 			<el-table-column prop="publishTime" label="报道时间" sortable="custom" align="center" />
 			<el-table-column prop="updateTime" label="状态变动时间" sortable="custom" align="center">
 				<template v-slot="scope">
@@ -991,6 +1049,11 @@ function handleCommand(val) {
 	getData();
 }
 
+function handleCommand2(val) {
+	form.value.politicalSensitivity = val;
+	getData();
+}
+
 function handleCommandRating(val) {
 	form.value.rating = val;
 	getData();

src/views/pages/richedit/zTable.vue

@@ -146,6 +146,11 @@
 						<el-dropdown-menu>
 							<el-dropdown-item :command="null">全部</el-dropdown-item>
 							<el-dropdown-item :command="0">无评分</el-dropdown-item>
+							<el-dropdown-item :command="10">10</el-dropdown-item>
+							<el-dropdown-item :command="9">9</el-dropdown-item>
+							<el-dropdown-item :command="8">8</el-dropdown-item>
+							<el-dropdown-item :command="7">7</el-dropdown-item>
+							<el-dropdown-item :command="6">6</el-dropdown-item>
 							<el-dropdown-item :command="5">5</el-dropdown-item>
 							<el-dropdown-item :command="4">4</el-dropdown-item>
 							<el-dropdown-item :command="3">3</el-dropdown-item>

src/views/pages/tenant/add.vue

@@ -0,0 +1,175 @@
+<template>
+	<div class="index">
+		<el-dialog v-model="dialogTableVisible" :title="formData?.id ? '编辑账号' : '创建账号'" width="600" @closed="close">
+			<el-form :model="formData" label-width="auto" :rules="formRule" ref="formRef">
+				<el-form-item label="企业类型" prop="companyType">
+					<el-select v-model="formData.companyType" placeholder="请选择企业类型" clearable>
+						<el-option v-for="item of COMPANYTYPE_CONST" :key="item.value" :label="item.label" :value="item.value" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="企业名称" prop="companyName">
+					<el-input v-model="formData.companyName" placeholder="企业名称需唯一" />
+				</el-form-item>
+				<el-form-item label="手机号码" prop="phone">
+					<el-input v-model="formData.phone" placeholder="请输入手机号码" />
+				</el-form-item>
+				<el-form-item label="账号名称" prop="accountName">
+					<el-input v-model="formData.accountName" placeholder="无则默认为手机号" />
+				</el-form-item>
+				<el-form-item label="子账号最大数量" prop="accountLimit">
+					<el-input-number v-model="formData.accountLimit" :min="0" />
+				</el-form-item>
+				<el-form-item label="账号类型" prop="accountType">
+					<el-select v-model="formData.accountType" placeholder="请选择账号类型" clearable>
+						<el-option v-for="item of ACCOUNTTYPE_CONST" :key="item.value" :label="item.label" :value="item.value" />
+					</el-select>
+					<el-row v-if="formData.accountType === 1" style="margin-top: 10px; padding: 10px; border: 1px solid #e7e7e7; border-radius: 5px">
+						<el-col :span="12" v-for="(item, index) in PERMISSIONS" :key="item.value">
+							<el-switch v-model="formData.permissions[index]" :active-text="item.label" :active-value="item.value" :inactive-value="0" />
+						</el-col>
+					</el-row>
+				</el-form-item>
+				<el-form-item label="账号有效期" prop="daterange">
+					<el-date-picker
+						v-model="formData.daterange"
+						type="daterange"
+						unlink-panels
+						range-separator="-"
+						value-format="YYYY-MM-DD"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+					/>
+				</el-form-item>
+			</el-form>
+
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="close">取消</el-button>
+					<el-button type="primary" @click="submit()"> 确认 </el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="loginIndex">
+import { onMounted, reactive, ref } from 'vue';
+import { NextLoading } from '/@/utils/loading';
+import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
+import { createTenant, updateTenant } from '/@/api/tenant';
+import { COMPANYTYPE_CONST, ACCOUNTTYPE_CONST, PERMISSIONS } from './constant';
+
+const emit = defineEmits(['close']);
+const formRef = ref<FormInstance>();
+const formData = reactive({
+	id: undefined,
+	companyType: '',
+	companyName: '',
+	phone: '',
+	accountName: '',
+	accountLimit: 0,
+	accountType: '',
+	daterange: [],
+	permissions: [...PERMISSIONS.map(() => 1)],
+});
+const oldPhone = ref('');
+
+const validatePhone = (rule: any, value: any, callback: any) => {
+	const phoneRegex = /^1[3456789]\d{9}$/;
+	if (!value) {
+		callback(new Error('必须填写手机号码'));
+	} else if (!phoneRegex.test(value)) {
+		callback(new Error('请输入有效的手机号'));
+	} else {
+		callback();
+	}
+};
+
+const formRule = reactive({
+	companyType: [{ required: true, message: '必须填写企业类型', trigger: 'change' }],
+	companyName: [{ required: true, message: '必须填写企业名称', trigger: 'blur' }],
+	phone: [{ validator: validatePhone, required: true, message: '必须填写手机号码', trigger: 'blur' }],
+	accountType: [{ required: true, message: '必须填写账号类型', trigger: 'change' }],
+	daterange: [{ required: true, message: '必须填写有效期', trigger: 'change' }],
+	accountLimit: [{ required: true, message: '必须填写子账号最大数量', trigger: 'blur' }],
+});
+
+const dialogTableVisible = ref(false);
+
+function open(data) {
+	dialogTableVisible.value = true;
+	if (data) {
+		oldPhone.value = data.phone;
+		Object.assign(formData, { ...data, daterange: [data.validStart, data.validEnd], permissions: data.permissions.map((item) => item.enabled) });
+	}
+}
+function close() {
+	dialogTableVisible.value = false;
+	formData.id = undefined;
+	formData.companyType = '';
+	formData.companyName = '';
+	formData.phone = '';
+	formData.accountName = '';
+	formData.accountType = '';
+	formData.accountLimit = 0;
+	formData.daterange = [];
+	emit('close');
+}
+async function submit() {
+	console.log('output >>>>> formData', formData);
+	await formRef.value?.validate();
+	const permissions = formData.permissions.map((item, index) => ({
+		name: PERMISSIONS[index].name,
+		enabled: item,
+	}));
+	const params = {
+		id: formData?.id || undefined,
+		companyType: formData.companyType,
+		companyName: formData.companyName,
+		accountName: formData.accountName || formData.phone,
+		accountType: formData.accountType,
+		phone: formData.phone,
+		validStart: formData.daterange[0],
+		validEnd: formData.daterange[1],
+		accountLimit: formData.accountLimit,
+		permissions: permissions,
+	};
+	console.log('output >>>>> params', params);
+	if (formData.id) {
+		updateTenant(params).then((res) => {
+			if (res.code === 200) {
+				if(oldPhone.value !== formData.phone) {
+					ElMessage.success('租户手机号已更新，如需使用新手机号作为子账号登录，请手动修改默认子账号!');
+				} else {
+					ElMessage.success('操作成功');
+				}
+				close();
+			} else {
+				ElMessage.error(res.msg || '操作失败');
+			}
+		});
+		return;
+	} else {
+		createTenant(params).then((res) => {
+			if (res.code === 200) {
+				ElMessage.success('操作成功');
+				close();
+			} else {
+				ElMessage.error(res.msg || '操作失败');
+			}
+		});
+	}
+}
+
+// 页面加载时
+onMounted(() => {
+	NextLoading.done();
+});
+
+defineExpose({
+	open,
+	close,
+});
+</script>
+
+<style scoped lang="scss"></style>

src/views/pages/tenant/constant.ts

@@ -0,0 +1,82 @@
+type IValue = {
+	label: string;
+	value: number;
+};
+
+export const COMPANYTYPE_CONST: Record<string, IValue> = {
+	'0': {
+		label: '内部',
+		value: 0,
+	},
+	'1': {
+		label: '银行',
+		value: 1,
+	},
+	'2': {
+		label: '券商',
+		value: 2,
+	},
+	'3': {
+		label: '上市公司',
+		value: 3,
+	},
+	'4': {
+		label: '其他机构',
+		value: 4,
+	},
+};
+
+export const ACCOUNTTYPE_CONST: Record<string, IValue> = {
+	'0': {
+		label: '试用',
+		value: 0,
+	},
+	'1': {
+		label: '正式',
+		value: 1,
+	},
+};
+
+export const STATUS_CONST: Record<string, IValue> = {
+	'0': {
+		label: '启用',
+		value: 0,
+	},
+	'1': {
+		label: '禁用',
+		value: 1,
+	},
+};
+
+export const PERMISSIONS = [
+	{
+		label: '海外先机',
+		value: 1, // 0:不可见;1:可见
+		name: 'hwxj',
+	},
+	{
+		label: '编辑精选',
+		value: 1,
+		name: 'bjjx',
+	},
+	{
+		label: '宏观知微',
+		value: 1,
+		name: 'hgzw',
+	},
+	{
+		label: '智能资讯榜',
+		value: 1,
+		name: 'znzx',
+	},
+	{
+		label: '热门行业',
+		value: 1,
+		name: 'rthx',
+	},
+	{
+		label: '风口概念',
+		value: 1,
+		name: 'fkgn',
+	},
+];

src/views/pages/tenant/index.vue

@@ -0,0 +1,299 @@
+<template>
+	<div class="index">
+		<div class="form">
+			<div class="form_button">
+				<el-button type="primary" :icon="Plus" @click="addOpen">创建账号</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.accountName" placeholder="企业名称/企业简称/证券代码/账号名称" style="width: 330px" @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.companyType" placeholder="企业类型（全部）" class="input" clearable @change="getData">
+						<el-option v-for="item of COMPANYTYPE_CONST" :key="item.value" :label="item.label" :value="item.value" />
+					</el-select>
+				</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" @currentChange="currentChange" @sizeChange="sizeChange">
+			<el-table-column prop="companyType" label="企业类型" align="center">
+				<template #default="scope">
+					{{ COMPANYTYPE_CONST[scope.row.companyType]?.label }}
+				</template>
+			</el-table-column>
+			<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="accountLimit" label="子账号限制" align="center" />
+			<el-table-column prop="phone" label="手机号" align="center" />
+			<el-table-column prop="accountName" label="账号名称" align="center" />
+			<el-table-column prop="validStart" label="账号有效期" align="center" width="180">
+				<template #default="scope"> {{ scope.row.validStart }} - {{ scope.row.validEnd }} </template>
+			</el-table-column>
+			<el-table-column prop="createTime" 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>
+					<el-popconfirm title="请确认是否删除" placement="top" @confirm="doDeleteTenant(scope.row)">
+						<template #reference>
+							<el-button type="danger" text>删除</el-button>
+						</template>
+					</el-popconfirm>
+				</template>
+			</el-table-column>
+		</tableComponents>
+
+		<addDialog ref="addDialogRef" @close="getData"></addDialog>
+	</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 { Plus } from '@element-plus/icons-vue';
+import { disableTenant, enableTenant, getTenantList, exportTenant, deleteTenant } from '/@/api/tenant';
+import { COMPANYTYPE_CONST, ACCOUNTTYPE_CONST, STATUS_CONST } from './constant';
+
+type FormData = {
+	accountName: string;
+	companyType: number | undefined;
+	accountType: number | undefined;
+	status: number | undefined;
+};
+type IData = {
+	id: number;
+	companyType: number;
+	companyName: string;
+	accountType: number;
+	subAccountLimit: number;
+	phone: string;
+	name: string;
+	validStart: string;
+	validEnd: string;
+	createTime: string;
+	status: number;
+};
+type TableData = {
+	data: IData[];
+	total: number;
+	page: number;
+	size: number;
+};
+
+const formData = reactive<FormData>({
+	accountName: '',
+	companyType: undefined,
+	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 getTenantList({
+		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 ? enableTenant : disableTenant;
+
+		let { code, data } = await updateStatus({
+			id: row.id,
+		});
+		if (code == 200) {
+			ElMessage.success('操作成功');
+			getData();
+		}
+	});
+}
+// 删除
+async function doDeleteTenant(row: IData) {
+	let { code, data } = await deleteTenant({
+		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 clearForm() {
+	formData.accountName = '';
+	formData.companyType = undefined;
+	formData.accountType = undefined;
+	formData.status = undefined;
+	getData();
+}
+
+// 导出
+function exportExcel() {
+	ElMessageBox.confirm('确定导出吗？', '提示', {
+		type: 'warning',
+	}).then(async () => {
+		try {
+			// 导出
+			const response = await exportTenant({
+				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 currentChange(val) {
+	tableData.page = val;
+	getData();
+}
+
+function sizeChange(val) {
+	tableData.size = val;
+	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>

src/views/pages/tenantUser/add.vue

@@ -0,0 +1,134 @@
+<template>
+	<div class="index">
+		<el-dialog v-model="dialogTableVisible" :title="form?.id ? '账号编辑' : '账号创建'" width="600" @closed="close">
+			<el-form :model="form" label-width="auto" :rules="rules" ref="ruleFormRef">
+				<el-form-item label="姓名" prop="name">
+					<el-input v-model="form.name" placeholder="请输入姓名"> </el-input>
+				</el-form-item>
+				<el-form-item label="手机号码" prop="mobile">
+					<el-input v-model="form.mobile" placeholder="请输入手机号码" />
+				</el-form-item>
+				<el-form-item label="企业名称" prop="companyName">
+					<el-select v-model="form.companyName" placeholder="请选择企业名称" value-key="id" clearable @change="handleChange">
+						<el-option v-for="item of companyData" :key="item.id" :label="item.companyName" :value="item" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="账号类型" prop="accountType">
+					<el-select v-model="form.accountType" placeholder="自动关联企业类型" disabled>
+						<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 label="部门名称" prop="department">
+					<el-input v-model="form.department" placeholder="请输入部门名称" />
+				</el-form-item>
+			</el-form>
+
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="close">取消</el-button>
+					<el-button type="primary" @click="submit()"> 确认 </el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="loginIndex">
+import { onMounted, reactive, ref } from 'vue';
+import { NextLoading } from '/@/utils/loading';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { createTenantUser, getTenantList, updateTenantUser } from '/@/api/tenant';
+import { ACCOUNTTYPE_CONST } from '../tenant/constant';
+
+const emit = defineEmits(['close']);
+const rules = reactive({
+	name: [{ required: true, message: '必须填写姓名', trigger: 'blur' }],
+	mobile: [{ required: true, message: '必须填写手机号码', trigger: 'blur' }],
+});
+
+const form = reactive({});
+const dialogTableVisible = ref(false);
+
+const loading = ref(false);
+const companyData = ref([]);
+
+// 获取数据
+async function getData() {
+	loading.value = true;
+	let { code, data, total } = await getTenantList({
+		page: 1,
+		size: 9999,
+	});
+	loading.value = false;
+	if (code == 200) {
+		companyData.value = data;
+	}
+}
+
+function handleChange(val) {
+	form.accountType = val?.accountType ?? '';
+}
+
+function open(data) {
+	getData();
+	dialogTableVisible.value = true;
+	if (data) {
+		Object.assign(form, data);
+	}
+}
+function close() {
+	dialogTableVisible.value = false;
+	form.name = '';
+	form.mobile = '';
+	form.companyName = '';
+	form.accountType = '';
+	form.department = '';
+	emit('close');
+}
+const ruleFormRef = ref(null);
+async function submit() {
+	await ruleFormRef.value.validate();
+
+	const params = {
+		id: form?.id || undefined,
+		name: form.name,
+		mobile: form.mobile,
+		companyName: form.companyName?.id,
+		department: form.department,
+		accountType: form.accountType,
+	};
+	console.log('output >>>>> params', params);
+	if (form.id) {
+		updateTenantUser(params).then((res) => {
+			if (res.code === 200) {
+				ElMessage.success('操作成功');
+				close();
+			} else {
+				ElMessage.error(res.msg || '操作失败');
+			}
+		});
+		return;
+	} else {
+		createTenantUser(params).then((res) => {
+			if (res.code === 200) {
+				ElMessage.success('操作成功');
+				close();
+			} else {
+				ElMessage.error(res.msg || '操作失败');
+			}
+		});
+	}
+}
+
+// 页面加载时
+onMounted(() => {
+	NextLoading.done();
+});
+
+defineExpose({
+	open,
+	close,
+});
+</script>
+
+<style scoped lang="scss"></style>

src/views/pages/tenantUser/import.vue

@@ -0,0 +1,141 @@
+<template>
+	<div class="index">
+		<el-dialog v-model="dialogTableVisible" title="批量导入" width="600" @closed="close">
+			<div style="display: flex; flex-direction: column">
+				<el-button @click="downloadTemplate" style="width: 120px">下载标准模版</el-button>
+				<div v-if="errorMsg" class="error-message">{{ errorMsg }}</div>
+			</div>
+			<!-- :auto-upload="false"
+				:on-change="handleFileChange" -->
+			<el-upload
+				ref="uploadRef"
+				class="upload"
+				drag
+				:action="baseUrl + '/tenant/user/import'"
+				accept=".xlsx,.xls"
+				:headers="uploadHeader"
+				:on-success="handleSuccess"
+			>
+				<div class="upload_text">点击或拖拽文件至此处导入</div>
+				<div class="upload_tips">支持格式.xlsx/.xls，文件大小≤10MB</div>
+			</el-upload>
+
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="close">取消</el-button>
+					<el-button type="primary" @click="submit()"> 确认 </el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="loginIndex">
+import { onMounted, reactive, ref } from 'vue';
+import { NextLoading } from '/@/utils/loading';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Session } from '/@/utils/storage';
+
+const baseUrl = ref(import.meta.env.VITE_API_URL);
+const emit = defineEmits(['close']);
+const form = ref({});
+const dialogTableVisible = ref(false);
+const uploadRef = ref(null);
+const selectedFile = ref(null);
+
+const uploadHeader = ref({
+	'auth-token': `${Session.get('token')}`,
+});
+
+function open(data) {
+	dialogTableVisible.value = true;
+	if (data) {
+		form.value = data;
+	}
+}
+
+function close() {
+	// 清除上传组件中的文件
+	if (uploadRef.value) {
+		uploadRef.value.clearFiles();
+	}
+	// 重置相关变量
+	selectedFile.value = null;
+	errorMsg.value = '';
+	dialogTableVisible.value = false;
+	emit('close');
+}
+
+// 处理文件选择
+function handleFileChange(file, fileList) {
+	selectedFile.value = file;
+	// 清除之前的错误信息
+	errorMsg.value = '';
+}
+
+// 确认上传
+function submit() {
+	// if (!selectedFile.value) {
+	// 	errorMsg.value = '请选择要上传的文件';
+	// 	return;
+	// }
+	close();
+	// // 手动触发上传
+	// if (uploadRef.value) {
+	// 	uploadRef.value.submit();
+	// }
+}
+
+function downloadTemplate() {
+	window.open('https://cankao.obs.cn-east-3.myhuaweicloud.com/%E5%AD%90%E8%B4%A6%E5%8F%B7%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx');
+}
+
+const errorMsg = ref('');
+function handleSuccess(res) {
+	console.log('🚀 ~ handleSuccess ~ res:', res);
+	if (res.code === 200) {
+		ElMessage.success('导入成功');
+		errorMsg.value = res.data;
+		// 关闭对话框
+		// dialogTableVisible.value = false;
+		emit('close');
+	} else {
+		errorMsg.value = res.msg || '导入失败';
+	}
+}
+
+// 页面加载时
+onMounted(() => {
+	NextLoading.done();
+	baseUrl.value = import.meta.env.VITE_API_URL;
+});
+
+defineExpose({
+	open,
+	close,
+});
+</script>
+
+<style scoped lang="scss">
+.upload {
+	margin-top: 20px;
+}
+
+.upload_text {
+	font-size: 14px;
+	color: #303133;
+}
+
+.upload_tips {
+	font-size: 12px;
+	color: #606266;
+	margin-top: 10px;
+}
+
+.error-message {
+	color: red;
+	margin-top: 10px;
+	white-space: pre-line;
+	font-size: 14px;
+}
+</style>

src/views/pages/tenantUser/index.vue

@@ -0,0 +1,296 @@
+<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" @currentChange="currentChange" @sizeChange="sizeChange">
+			<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>
+					<el-popconfirm v-if="scope.row.type !== 1" title="请确认是否删除" placement="top" @confirm="doDeleteTenantUser(scope.row)">
+						<template #reference>
+							<el-button type="danger" text>删除</el-button>
+						</template>
+					</el-popconfirm>
+				</template>
+			</el-table-column>
+		</tableComponents>
+
+		<addDialog ref="addDialogRef" @close="getData"></addDialog>
+		<importDialog ref="importDialogRef" @close="getData"></importDialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="tenantUser">
+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 { deleteTenantUser, 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();
+		} else {
+			if (row.status === 1) {
+				ElMessage.error('启用失败，当前可管理子账号已达上限，请先删除无用子账号再启用');
+			}
+		}
+	});
+}
+// 删除
+async function doDeleteTenantUser(row: IData) {
+	let { code, data } = await deleteTenantUser({
+		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();
+}
+
+function currentChange(val) {
+	tableData.page = val;
+	getData();
+}
+
+function sizeChange(val) {
+	tableData.size = val;
+	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>