qiushanhe/ss-manage-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

租户平台管理

Browse Source
This commit is contained in:
zcx
2026-01-29 16:47:05 +08:00
parent 6db7edfc2f
commit 75fc4de6bd
29 changed files with 3998 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

225
src/views/system/tenant/TenantForm.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="80px"
>
<el-form-item label="租户名" prop="name">
<el-input v-model="formData.name" placeholder="请输入租户名" />
</el-form-item>
<el-form-item label="租户套餐" prop="packageId">
<el-select v-model="formData.packageId" clearable placeholder="请选择租户套餐">
<el-option
v-for="item in packageList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="联系人" prop="contactName">
<el-input v-model="formData.contactName" placeholder="请输入联系人" />
</el-form-item>
<el-form-item label="联系手机" prop="contactMobile">
<el-input v-model="formData.contactMobile" placeholder="请输入联系手机" />
</el-form-item>
<el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
<el-input v-model="formData.username" placeholder="请输入用户名称" />
</el-form-item>
<el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
<el-input
v-model="formData.password"
placeholder="请输入用户密码"
show-password
type="password"
/>
</el-form-item>
<el-form-item label="账号额度" prop="accountCount">
<el-input-number
v-model="formData.accountCount"
:min="0"
controls-position="right"
placeholder="请输入账号额度"
/>
</el-form-item>
<el-form-item label="过期时间" prop="expireTime">
<el-date-picker
v-model="formData.expireTime"
clearable
placeholder="请选择过期时间"
type="date"
value-format="x"
/>
</el-form-item>
<el-form-item label="绑定域名" prop="websites">
<el-input-tag
v-model="formData.websites"
placeholder="请输入绑定域名，按回车添加"
class="w-full"
/>
</el-form-item>
<el-form-item label="租户状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="会员权益" prop="memberBenefits">
<el-select
v-model="formData.memberBenefits"
multiple
placeholder="请选择会员权益"
class="!w-320px"
>
<el-option label="考前密卷" value="SECRET" />
<el-option label="真实考场" value="REAL_EXAM" />
<el-option label="精选题库" value="JX" />
<el-option label="AI助手" value="AI" />
</el-select>
</el-form-item>
<el-form-item label="是否开放分销功能" prop="distributionEnabled">
<el-switch v-model="formData.distributionEnabled" />
</el-form-item>
<el-form-item label="是否开放赠送会员功能" prop="giftMemberEnabled">
<el-switch v-model="formData.giftMemberEnabled" />
</el-form-item>
<el-form-item label="每月赠送会员数" prop="monthlyGiftMemberNum">
<el-input-number
v-model="formData.monthlyGiftMemberNum"
:min="0"
controls-position="right"
placeholder="请输入每月赠送会员数"
/>
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as TenantApi from '@/api/system/tenant'
import { CommonStatusEnum } from '@/utils/constants'
import * as TenantPackageApi from '@/api/system/tenantPackage'
defineOptions({ name: 'SystemTenantForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
name: undefined,
packageId: undefined,
contactName: undefined,
contactMobile: undefined,
accountCount: undefined,
expireTime: undefined,
websites: [],
status: CommonStatusEnum.ENABLE,
// 新增专属
username: undefined,
password: undefined,
// 新增字段
memberBenefits: [],
distributionEnabled: false,
giftMemberEnabled: false,
monthlyGiftMemberNum: 0,
address: undefined
})
const formRules = reactive({
name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
packageId: [{ required: true, message: '租户套餐不能为空', trigger: 'blur' }],
contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
status: [{ required: true, message: '租户状态不能为空', trigger: 'blur' }],
accountCount: [{ required: true, message: '账号额度不能为空', trigger: 'blur' }],
expireTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const packageList = ref([] as TenantPackageApi.TenantPackageVO[]) // 租户套餐
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await TenantApi.getTenant(id)
} finally {
formLoading.value = false
}
}
// 加载套餐列表
packageList.value = await TenantPackageApi.getTenantPackageList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef.value) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as TenantApi.TenantVO
if (formType.value === 'create') {
await TenantApi.createTenant(data)
message.success(t('common.createSuccess'))
} else {
await TenantApi.updateTenant(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: undefined,
packageId: undefined,
contactName: undefined,
contactMobile: undefined,
accountCount: undefined,
expireTime: undefined,
websites: [],
status: CommonStatusEnum.ENABLE,
username: undefined,
password: undefined,
// 新增字段
memberBenefits: [],
distributionEnabled: false,
giftMemberEnabled: false,
monthlyGiftMemberNum: 0,
address: undefined
}
formRef.value?.resetFields()
}
</script>

332
src/views/system/tenant/index.vue Normal file
View File

@@ -0,0 +1,332 @@
<template>
<doc-alert title="SaaS 多租户" url="https://doc.iocoder.cn/saas-tenant/" />
<!-- 搜索 -->
<ContentWrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="租户名" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入租户名"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="联系人" prop="contactName">
<el-input
v-model="queryParams.contactName"
placeholder="请输入联系人"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="联系手机" prop="contactMobile">
<el-input
v-model="queryParams.contactMobile"
placeholder="请输入联系手机"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="租户状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择租户状态"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['system:tenant:create']"
>
<Icon icon="ep:plus" class="mr-5px" />
新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:tenant:export']"
>
<Icon icon="ep:download" class="mr-5px" />
导出
</el-button>
<el-button
type="danger"
plain
:disabled="checkedIds.length === 0"
@click="handleDeleteBatch"
v-hasPermi="['system:tenant:delete']"
>
<Icon icon="ep:delete" class="mr-5px" />
批量删除
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" @selection-change="handleRowCheckboxChange">
<el-table-column type="selection" width="55" />
<el-table-column label="租户编号" align="center" prop="id" />
<el-table-column label="租户名" align="center" prop="name" />
<el-table-column label="租户套餐" align="center" prop="packageId">
<template #default="scope">
<el-tag v-if="scope.row.packageId === 0" type="danger">系统租户</el-tag>
<template v-else v-for="item in packageList">
<el-tag type="success" :key="item.id" v-if="item.id === scope.row.packageId">
{{ item.name }}
</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="联系人" align="center" prop="contactName" />
<el-table-column label="联系手机" align="center" prop="contactMobile" />
<el-table-column label="账号额度" align="center" prop="accountCount">
<template #default="scope">
<el-tag>{{ scope.row.accountCount }}</el-tag>
</template>
</el-table-column>
<el-table-column
label="过期时间"
align="center"
prop="expireTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="绑定域名" align="center" prop="websites" width="180">
<template #default="scope">
<el-tag v-for="website in scope.row.websites || []" :key="website" class="mr-1 mb-1">
{{ website }}
</el-tag>
<span v-if="!scope.row.websites || scope.row.websites.length === 0">-</span>
</template>
</el-table-column>
<el-table-column label="会员权益" align="center" prop="memberBenefits" width="180">
<template #default="scope">
<el-tag
v-for="benefit in scope.row.memberBenefits || []"
:key="benefit"
class="mr-1 mb-1"
>
{{ benefit }}
</el-tag>
<span v-if="!scope.row.memberBenefits || scope.row.memberBenefits.length === 0">-</span>
</template>
</el-table-column>
<el-table-column label="分销功能" align="center" prop="distributionEnabled" width="100">
<template #default="scope">
<el-tag :type="scope.row.distributionEnabled ? 'success' : 'danger'">
{{ scope.row.distributionEnabled ? '是' : '否' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="赠送会员" align="center" prop="giftMemberEnabled" width="100">
<template #default="scope">
<el-tag :type="scope.row.giftMemberEnabled ? 'success' : 'danger'">
{{ scope.row.giftMemberEnabled ? '是' : '否' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="每月赠送数" align="center" prop="monthlyGiftMemberNum" width="100" />
<el-table-column label="地址" align="center" prop="address" width="200" />
<el-table-column label="租户状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column label="操作" align="center" min-width="110" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['system:tenant:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['system:tenant:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<TenantForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as TenantApi from '@/api/system/tenant'
import * as TenantPackageApi from '@/api/system/tenantPackage'
import TenantForm from './TenantForm.vue'
defineOptions({ name: 'SystemTenant' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: undefined,
contactName: undefined,
contactMobile: undefined,
status: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const packageList = ref([] as TenantPackageApi.TenantPackageVO[]) //租户套餐列表
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await TenantApi.getTenantPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await TenantApi.deleteTenant(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 批量删除按钮操作 */
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (rows: TenantApi.TenantVO[]) => {
checkedIds.value = rows.map((row) => row.id)
}
const handleDeleteBatch = async () => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起批量删除
await TenantApi.deleteTenantList(checkedIds.value)
checkedIds.value = []
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await TenantApi.exportTenant(queryParams)
download.excel(data, '租户列表.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(async () => {
await getList()
// 获取租户套餐列表
packageList.value = await TenantPackageApi.getTenantPackageList()
})
</script>