feat: 租户套餐
This commit is contained in:
dap
parent
d633de9891
commit
15851b063a
@ -21,7 +21,7 @@ export const drawerSchema: FormSchemaGetter = () => [
|
||||
fieldName: 'packageId',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
component: 'Radio',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
@ -50,6 +50,7 @@ export const drawerSchema: FormSchemaGetter = () => [
|
||||
},
|
||||
fieldName: 'remark',
|
||||
formItemClass: 'items-baseline',
|
||||
label: '备注',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -1,20 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { DataNode } from 'ant-design-vue/es/tree';
|
||||
import type { CheckInfo } from 'ant-design-vue/es/vc-tree/props';
|
||||
|
||||
import type { Menu } from '#/api/system/menu/model';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { filter, listToTree } from '@vben/utils';
|
||||
|
||||
import { Card, Tree } from 'ant-design-vue';
|
||||
|
||||
import { menuList } from '#/api/system/menu';
|
||||
|
||||
import { excludeIds } from './data';
|
||||
import tenantPackageDrawer from './tenant-package-drawer.vue';
|
||||
|
||||
const [TenantPackageDrawer, drawerApi] = useVbenDrawer({
|
||||
@ -25,60 +12,6 @@ function handleAdd() {
|
||||
drawerApi.setData({ update: false });
|
||||
drawerApi.open();
|
||||
}
|
||||
|
||||
const menuTree = ref<DataNode[]>([]);
|
||||
// checkable 状态下节点选择完全受控（父子节点选中状态不再关联）
|
||||
const menuCheckStrictly = ref<boolean>(false);
|
||||
const checkedKeys = ref<string[]>([]);
|
||||
|
||||
/** 已经选择的所有节点 包括子/父节点 */
|
||||
const checkedMenuKeys = ref<(number | string)[]>([]);
|
||||
/**
|
||||
*
|
||||
* @param checkedKeys 已经选中的子节点的ID
|
||||
* @param info info.halfCheckedKeys为父节点的ID
|
||||
*/
|
||||
type CheckedState<T = number | string> =
|
||||
| { checked: T[]; halfChecked: T[] }
|
||||
| T[];
|
||||
function handleChecked(checkedKeys: CheckedState, info: CheckInfo) {
|
||||
// 数组的话为节点关联
|
||||
if (Array.isArray(checkedKeys)) {
|
||||
const halfCheckedKeys: number[] = (info.halfCheckedKeys || []) as number[];
|
||||
checkedMenuKeys.value = [...halfCheckedKeys, ...checkedKeys];
|
||||
} else {
|
||||
checkedMenuKeys.value = [...checkedKeys.checked];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 不显示租户相关菜单 分配了也没法使用
|
||||
* @param menuTree menus
|
||||
*/
|
||||
function transformMenu(menuTree: Menu[]) {
|
||||
return filter(
|
||||
menuTree,
|
||||
(item) => {
|
||||
if (excludeIds.includes(item.menuId)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
{ id: 'menuId', pid: 'parentId', children: 'children' },
|
||||
);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const resp = await menuList();
|
||||
// 去除租户相关菜单(分配了也无权限)
|
||||
const afterTransform = transformMenu(resp);
|
||||
const tree = listToTree(afterTransform, { id: 'menuId' });
|
||||
menuTree.value = tree;
|
||||
});
|
||||
|
||||
function test() {
|
||||
console.log(checkedMenuKeys.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -86,19 +19,6 @@ function test() {
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
{{ $t('pages.common.add') }}
|
||||
</a-button>
|
||||
<a-button @click="test">获取</a-button>
|
||||
<Card>
|
||||
<Tree
|
||||
v-if="menuTree.length > 0"
|
||||
v-model:check-strictly="menuCheckStrictly"
|
||||
v-model:checked-keys="checkedKeys"
|
||||
:checkable="true"
|
||||
:field-names="{ title: 'menuName', key: 'menuId' }"
|
||||
:selectable="false"
|
||||
:tree-data="menuTree"
|
||||
@check="handleChecked"
|
||||
/>
|
||||
</Card>
|
||||
<TenantPackageDrawer />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@ -3,14 +3,19 @@ import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenDrawer } from '@vben/common-ui';
|
||||
import { $t } from '@vben/locales';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { Card, Tree } from 'ant-design-vue';
|
||||
import { cloneDeep, listToTree } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter';
|
||||
import { clientAdd, clientInfo, clientUpdate } from '#/api/system/client';
|
||||
import { menuList, tenantPackageMenuTreeSelect } from '#/api/system/menu';
|
||||
import {
|
||||
packageAdd,
|
||||
packageInfo,
|
||||
packageUpdate,
|
||||
} from '#/api/system/tenant-package';
|
||||
import { TreeSelectPanel } from '#/components/tree';
|
||||
|
||||
import { drawerSchema } from './data';
|
||||
import TreeItem from './tree-item';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
@ -29,28 +34,19 @@ const [BasicForm, formApi] = useVbenForm({
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
function setupForm(update: boolean) {
|
||||
formApi.updateSchema([
|
||||
{
|
||||
dependencies: {
|
||||
show: () => update,
|
||||
triggerFields: [''],
|
||||
},
|
||||
fieldName: 'clientId',
|
||||
},
|
||||
{
|
||||
componentProps: {
|
||||
disabled: update,
|
||||
},
|
||||
fieldName: 'clientKey',
|
||||
},
|
||||
{
|
||||
componentProps: {
|
||||
disabled: update,
|
||||
},
|
||||
fieldName: 'clientSecret',
|
||||
},
|
||||
]);
|
||||
async function setupMenuTreeSelect(id?: number | string) {
|
||||
if (id) {
|
||||
const resp = await tenantPackageMenuTreeSelect(id);
|
||||
await formApi.setFieldValue('menuIds', resp.checkedKeys);
|
||||
}
|
||||
}
|
||||
|
||||
const menuTree = ref<any[]>([]);
|
||||
async function setupMenuTree() {
|
||||
const resp = await menuList();
|
||||
const treeData = listToTree(resp, { id: 'menuId' });
|
||||
// 设置菜单信息
|
||||
menuTree.value = treeData;
|
||||
}
|
||||
|
||||
const [BasicDrawer, drawerApi] = useVbenDrawer({
|
||||
@ -61,27 +57,27 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
|
||||
return null;
|
||||
}
|
||||
drawerApi.drawerLoading(true);
|
||||
|
||||
const { id } = drawerApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
// 初始化
|
||||
setupForm(isUpdate.value);
|
||||
if (isUpdate.value && id) {
|
||||
const record = await clientInfo(id);
|
||||
// 不能禁用id为1的记录
|
||||
formApi.updateSchema([
|
||||
{
|
||||
componentProps: {
|
||||
disabled: record.id === 1,
|
||||
},
|
||||
fieldName: 'status',
|
||||
},
|
||||
]);
|
||||
const record = await packageInfo(id);
|
||||
await formApi.setValues(record);
|
||||
}
|
||||
/**
|
||||
* 加载菜单树和已勾选菜单
|
||||
*/
|
||||
await Promise.all([setupMenuTree(), setupMenuTreeSelect(id)]);
|
||||
|
||||
drawerApi.drawerLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 这里拿到的是一个数组ref
|
||||
*/
|
||||
const menuSelectRef = ref();
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
drawerApi.drawerLoading(true);
|
||||
@ -89,8 +85,12 @@ async function handleConfirm() {
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
// 这个用于提交
|
||||
const menuIds = menuSelectRef.value?.[0]?.getCheckedKeys() ?? [];
|
||||
// formApi.getValues拿到的是一个readonly对象，不能直接修改，需要cloneDeep
|
||||
const data = cloneDeep(await formApi.getValues());
|
||||
await (isUpdate.value ? clientUpdate(data) : clientAdd(data));
|
||||
data.menuIds = menuIds;
|
||||
await (isUpdate.value ? packageUpdate(data) : packageAdd(data));
|
||||
emit('reload');
|
||||
await handleCancel();
|
||||
} catch (error) {
|
||||
@ -104,26 +104,34 @@ async function handleCancel() {
|
||||
drawerApi.close();
|
||||
await formApi.resetForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* 通过回调更新 无法通过v-model
|
||||
* @param value 菜单选择是否严格模式
|
||||
*/
|
||||
function handleMenuCheckStrictlyChange(value: boolean) {
|
||||
formApi.setFieldValue('menuCheckStrictly', value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BasicDrawer :close-on-click-modal="false" :title="title" class="w-[600px]">
|
||||
<BasicForm>
|
||||
<template #menuIds="slotProps">
|
||||
<Card class="w-full">
|
||||
<Tree v-bind="slotProps" />
|
||||
</Card>
|
||||
<TreeSelectPanel
|
||||
ref="menuSelectRef"
|
||||
v-bind="slotProps"
|
||||
:check-strictly="formApi.form.values.menuCheckStrictly"
|
||||
:expand-all-on-init="true"
|
||||
:field-names="{ title: 'menuName', key: 'menuId' }"
|
||||
:tree-data="menuTree"
|
||||
@check-strictly-change="handleMenuCheckStrictlyChange"
|
||||
>
|
||||
<template #title="data">
|
||||
<TreeItem :data="data" />
|
||||
</template>
|
||||
</TreeSelectPanel>
|
||||
</template>
|
||||
</BasicForm>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/**
|
||||
自定义组件校验失败样式
|
||||
*/
|
||||
:deep(.form-valid-error .ant-input[name='clientSecret']) {
|
||||
border-color: hsl(var(--destructive));
|
||||
box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
|
||||
}
|
||||
</style>
|
||||
|
||||
42
apps/web-antd/src/views/system/tenantPackage/tree-item.tsx
Normal file
42
apps/web-antd/src/views/system/tenantPackage/tree-item.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import type { Menu } from '#/api/system/menu/model';
|
||||
|
||||
import { computed, defineComponent, type PropType } from 'vue';
|
||||
|
||||
import { Tag } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TreeItem',
|
||||
props: {
|
||||
data: {
|
||||
required: true,
|
||||
type: Object as PropType<Menu>,
|
||||
},
|
||||
},
|
||||
setup(props, { expose }) {
|
||||
expose();
|
||||
|
||||
interface TagProp {
|
||||
color: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const menuTagProp = computed<TagProp>(() => {
|
||||
// 正则判断是否为链接
|
||||
if (/^https?:\/\/[^\s/$.?#].\S*$/i.test(props.data.path)) {
|
||||
return { color: 'pink', text: '外链' };
|
||||
}
|
||||
const type = props.data.menuType;
|
||||
if (type === 'M') return { color: 'green', text: '目录' };
|
||||
if (type === 'C') return { color: 'blue', text: '菜单' };
|
||||
if (type === 'F') return { color: '', text: '按钮' };
|
||||
return { color: 'error', text: '未知' };
|
||||
});
|
||||
|
||||
return () => (
|
||||
<div class="flex gap-[6px]">
|
||||
<span>{props.data.menuName}</span>
|
||||
<Tag color={menuTagProp.value.color}>{menuTagProp.value.text}</Tag>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user