feat: 租户表单

This commit is contained in:
dap 2024-09-18 11:45:52 +08:00
parent dea49d3b63
commit 64218084bb
3 changed files with 352 additions and 4 deletions

View File

@ -0,0 +1,220 @@
import { getPopupContainer } from '@vben/utils';
import dayjs from 'dayjs';
import { type FormSchemaGetter, z } from '#/adapter';
const defaultExpireTime = dayjs()
.add(365, 'days')
.startOf('day')
.format('YYYY-MM-DD HH:mm:ss');
export const drawerSchema: FormSchemaGetter = () => [
{
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
fieldName: 'id',
label: 'id',
},
{
component: 'Input',
dependencies: {
show: () => false,
triggerFields: [''],
},
fieldName: 'tenantId',
label: 'tenantId',
},
{
component: 'Divider',
componentProps: {
orientation: 'center',
},
fieldName: 'divider1',
labelClass: 'w-0',
renderComponentContent: () => ({
default: () => '基本信息',
}),
},
{
component: 'Input',
componentProps: {
placeholder: '请输入',
},
fieldName: 'companyName',
label: '企业名称',
rules: 'required',
},
{
component: 'Input',
componentProps: {
placeholder: '请输入',
},
fieldName: 'contactUserName',
label: '联系人',
rules: 'required',
},
{
component: 'Input',
componentProps: {
placeholder: '请输入',
},
fieldName: 'contactPhone',
label: '联系电话',
rules: z
.string()
.regex(/^1[3-9]\d{9}$/, { message: '请输入正确的联系电话' }),
},
{
component: 'Divider',
componentProps: {
orientation: 'center',
},
fieldName: 'divider2',
labelClass: 'w-0',
renderComponentContent: () => ({
default: () => '管理员信息',
}),
},
{
component: 'Input',
componentProps: {
placeholder: '请输入',
},
fieldName: 'username',
label: '用户账号',
rules: 'required',
},
{
component: 'InputPassword',
componentProps: {
placeholder: '请输入',
},
fieldName: 'password',
label: '密码',
rules: 'required',
},
{
component: 'Divider',
componentProps: {
orientation: 'center',
},
fieldName: 'divider3',
labelClass: 'w-0',
renderComponentContent: () => ({
default: () => '租户设置',
}),
},
{
component: 'Select',
componentProps: {
class: 'w-full',
getPopupContainer,
placeholder: '请选择',
},
fieldName: 'packageId',
label: '租户套餐',
rules: 'required',
},
{
component: 'DatePicker',
componentProps: {
format: 'YYYY-MM-DD HH:mm:ss',
showTime: true,
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
defaultValue: defaultExpireTime,
fieldName: 'expireTime',
help: `已经设置过期时间不允许重置为'无期限'\n即在开通时未设置无期限 以后都不允许设置`,
label: '过期时间',
rules: 'required',
},
{
component: 'InputNumber',
componentProps: {
min: -1,
placeholder: '请输入',
},
defaultValue: -1,
fieldName: 'accountCount',
help: '-1不限制用户数量',
label: '用户数量',
renderComponentContent(model) {
return {
addonBefore: () =>
model.accountCount === -1 ? '不限制数量' : '输入数量',
};
},
rules: 'required',
},
{
component: 'Input',
componentProps: {
placeholder: '请输入',
},
fieldName: 'domain',
help: '可填写域名/端口 填写域名如: www.test.com 或者 www.test.com:8080 填写ip:端口如: 127.0.0.1:8080',
label: '绑定域名',
renderComponentContent() {
return {
addonBefore: () => 'http(s)://',
};
},
rules: z
.string()
.refine(
(domain) =>
!(domain.startsWith('http://') || domain.startsWith('https://')),
{ message: '请输入正确的域名, 不需要http(s)' },
)
.optional(),
},
{
component: 'Divider',
componentProps: {
orientation: 'center',
},
fieldName: 'divider4',
labelClass: 'w-0',
renderComponentContent: () => ({
default: () => '企业信息',
}),
},
{
component: 'Input',
componentProps: {
placeholder: '请输入',
},
fieldName: 'address',
label: '企业地址',
},
{
component: 'Input',
componentProps: {
placeholder: '请输入',
},
fieldName: 'licenseNumber',
label: '企业代码',
},
{
component: 'Textarea',
componentProps: {
placeholder: '请输入',
},
fieldName: 'intro',
formItemClass: 'items-baseline',
label: '企业介绍',
},
{
component: 'Textarea',
componentProps: {
placeholder: '请输入',
},
fieldName: 'remark',
formItemClass: 'items-baseline',
label: '备注',
},
];

View File

@ -1,9 +1,28 @@
<script setup lang="ts">
import CommonSkeleton from '#/views/common';
import { Page, useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';
import tenantDrawer from './tenant-drawer.vue';
const [TenantDrawer, drawerApi] = useVbenDrawer({
connectedComponent: tenantDrawer,
});
function handleAdd() {
drawerApi.setData({ update: false });
drawerApi.open();
}
</script>
<template>
<div>
<CommonSkeleton />
</div>
<Page>
<a-button
type="primary"
v-access:code="['system:tenant:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
<TenantDrawer />
</Page>
</template>

View File

@ -0,0 +1,109 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { useVbenForm } from '#/adapter';
import { clientAdd, clientUpdate } from '#/api/system/client';
import { drawerSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
interface DrawerProps {
update: boolean;
record?: any;
}
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
formItemClass: 'col-span-2',
labelWidth: 100,
},
schema: drawerSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
function setupForm() {
formApi.setState((prev) => {
return {
...prev,
schema: prev.schema?.map((item) => {
if (item.fieldName === 'packageId') {
return {
...item,
componentProps: {
...item.componentProps,
},
};
}
return item;
}),
};
});
}
const [BasicDrawer, drawerApi] = useVbenDrawer({
onCancel: handleCancel,
onConfirm: handleConfirm,
async onOpenChange(isOpen) {
if (!isOpen) {
return null;
}
drawerApi.drawerLoading(true);
const { record, update } = drawerApi.getData() as DrawerProps;
isUpdate.value = update;
//
setupForm();
if (update && record) {
for (const key in record) {
await formApi.setFieldValue(key, record[key]);
}
}
drawerApi.drawerLoading(false);
},
});
async function handleConfirm() {
try {
drawerApi.drawerLoading(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
const data = await formApi.getValues();
console.log(data);
await (isUpdate.value ? clientUpdate(data) : clientAdd(data));
emit('reload');
await handleCancel();
} catch (error) {
console.error(error);
} finally {
drawerApi.drawerLoading(false);
}
}
async function handleCancel() {
drawerApi.close();
await formApi.resetForm();
}
</script>
<template>
<BasicDrawer :title="title" class="w-[600px]">
<BasicForm />
</BasicDrawer>
</template>
<style lang="scss" scoped>
:deep(.ant-divider) {
margin: 8px 0;
}
</style>