diff --git a/apps/web-antd/src/views/system/tenantPackage/data.ts b/apps/web-antd/src/views/system/tenantPackage/data.ts index 6f02e677..b4803af2 100644 --- a/apps/web-antd/src/views/system/tenantPackage/data.ts +++ b/apps/web-antd/src/views/system/tenantPackage/data.ts @@ -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: '备注', }, ]; diff --git a/apps/web-antd/src/views/system/tenantPackage/index.vue b/apps/web-antd/src/views/system/tenantPackage/index.vue index eac25aac..261a41ea 100644 --- a/apps/web-antd/src/views/system/tenantPackage/index.vue +++ b/apps/web-antd/src/views/system/tenantPackage/index.vue @@ -1,20 +1,7 @@ diff --git a/apps/web-antd/src/views/system/tenantPackage/tenant-package-drawer.vue b/apps/web-antd/src/views/system/tenantPackage/tenant-package-drawer.vue index 6fd63862..8f8d4b11 100644 --- a/apps/web-antd/src/views/system/tenantPackage/tenant-package-drawer.vue +++ b/apps/web-antd/src/views/system/tenantPackage/tenant-package-drawer.vue @@ -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([]); +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); +} - - diff --git a/apps/web-antd/src/views/system/tenantPackage/tree-item.tsx b/apps/web-antd/src/views/system/tenantPackage/tree-item.tsx new file mode 100644 index 00000000..cf1b2685 --- /dev/null +++ b/apps/web-antd/src/views/system/tenantPackage/tree-item.tsx @@ -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, + }, + }, + setup(props, { expose }) { + expose(); + + interface TagProp { + color: string; + text: string; + } + + const menuTagProp = computed(() => { + // 正则判断是否为链接 + 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 () => ( +
+ {props.data.menuName} + {menuTagProp.value.text} +
+ ); + }, +});