yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'yudao/dev' into dev

pull/162/head
jason 2025-06-29 23:14:27 +08:00
parent 9cea95a9d0 77c16cd8e2
commit 33d6e33308
25 changed files with 257 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web-antd/src/adapter/vxe-table.ts
View File

@ -11,9 +11,9 @@ import {
useVbenVxeGrid,
} from '@vben/plugins/vxe-table';
import {
erpCountInputFormatter,
erpNumberFormatter,
formatPast2,
formatToFractionDigit,
isFunction,
isString,
} from '@vben/utils';
@ -333,8 +333,8 @@ setupVbenVxeTable({
// add by 星语：数量格式化，例如说：金额
vxeUI.formats.add('formatNumber', {
tableCellFormatMethod({ cellValue }, digits = 2) {
return formatToFractionDigit(cellValue, digits);
tableCellFormatMethod({ cellValue }) {
return erpCountInputFormatter(cellValue);
},
});

148
apps/web-antd/src/components/table-action/table-action.vue
View File

@ -4,7 +4,7 @@ import type { PropType } from 'vue';
import type { ActionItem, PopConfirm } from './typing';
import { computed, ref, toRaw, unref, watchEffect } from 'vue';
import { computed, unref } from 'vue';
import { useAccess } from '@vben/access';
import { IconifyIcon } from '@vben/icons';
@ -41,14 +41,7 @@ const props = defineProps({
const { hasAccessByCodes } = useAccess();
/** 缓存处理后的 actions */
const processedActions = ref<any[]>([]);
const processedDropdownActions = ref<any[]>([]);
/** 用于比较的字符串化版本 */
const actionsStringField = ref('');
const dropdownActionsStringField = ref('');
/** 检查是否显示 */
function isIfShow(action: ActionItem): boolean {
const ifShow = action.ifShow;
let isIfShow = true;
@ -65,12 +58,10 @@ function isIfShow(action: ActionItem): boolean {
return isIfShow;
}
/** 处理 actions 的纯函数 */
function processActions(actions: ActionItem[]): any[] {
return actions
.filter((action: ActionItem) => {
return isIfShow(action);
})
/** 处理按钮 actions */
const getActions = computed(() => {
return (props.actions || [])
.filter((action: ActionItem) => isIfShow(action))
.map((action: ActionItem) => {
const { popConfirm } = action;
return {
@ -82,17 +73,12 @@ function processActions(actions: ActionItem[]): any[] {
enable: !!popConfirm,
};
});
}
});
/** 处理下拉菜单 actions 的纯函数 */
function processDropdownActions(
dropDownActions: ActionItem[],
divider: boolean,
): any[] {
return dropDownActions
.filter((action: ActionItem) => {
return isIfShow(action);
})
/** 处理下拉菜单 actions */
const getDropdownList = computed(() => {
return (props.dropDownActions || [])
.filter((action: ActionItem) => isIfShow(action))
.map((action: ActionItem, index: number) => {
const { label, popConfirm } = action;
const processedAction = { ...action };
@ -103,79 +89,21 @@ function processDropdownActions(
onConfirm: popConfirm?.confirm,
onCancel: popConfirm?.cancel,
text: label,
divider: index < dropDownActions.length - 1 ? divider : false,
divider:
index < props.dropDownActions.length - 1 ? props.divider : false,
};
});
}
/** 监听 actions 变化并更新缓存 */
watchEffect(() => {
const rawActions = toRaw(props.actions) || [];
const currentStringField = JSON.stringify(
rawActions.map((a) => ({
...a,
onClick: undefined, // 排除函数以便比较
popConfirm: a.popConfirm
? { ...a.popConfirm, confirm: undefined, cancel: undefined }
: undefined,
})),
);
if (currentStringField !== actionsStringField.value) {
actionsStringField.value = currentStringField;
processedActions.value = processActions(rawActions);
}
});
/** 监听 dropDownActions 变化并更新缓存 */
watchEffect(() => {
const rawDropDownActions = toRaw(props.dropDownActions) || [];
const currentStringField = JSON.stringify({
actions: rawDropDownActions.map((a) => ({
...a,
onClick: undefined, // 排除函数以便比较
popConfirm: a.popConfirm
? { ...a.popConfirm, confirm: undefined, cancel: undefined }
: undefined,
})),
divider: props.divider,
});
if (currentStringField !== dropdownActionsStringField.value) {
dropdownActionsStringField.value = currentStringField;
processedDropdownActions.value = processDropdownActions(
rawDropDownActions,
props.divider,
);
}
});
const getActions = computed(() => processedActions.value);
const getDropdownList = computed(() => processedDropdownActions.value);
/** 缓存 Space 组件的 size 计算结果 */
/** Space 组件的 size */
const spaceSize = computed(() => {
return unref(getActions)?.some((item: ActionItem) => item.type === 'link')
? 0
: 8;
});
/** 缓存 PopConfirm 属性 */
const popConfirmPropsMap = new Map<string, any>();
/** 获取 PopConfirm 属性 */
function getPopConfirmProps(attrs: PopConfirm) {
const key = JSON.stringify({
title: attrs.title,
okText: attrs.okText,
cancelText: attrs.cancelText,
disabled: attrs.disabled,
});
if (popConfirmPropsMap.has(key)) {
return popConfirmPropsMap.get(key);
}
const originAttrs: any = { ...attrs };
delete originAttrs.icon;
if (attrs.confirm && isFunction(attrs.confirm)) {
@ -186,61 +114,30 @@ function getPopConfirmProps(attrs: PopConfirm) {
originAttrs.onCancel = attrs.cancel;
delete originAttrs.cancel;
}
popConfirmPropsMap.set(key, originAttrs);
return originAttrs;
}
/** 缓存 Button 属性 */
const buttonPropsMap = new Map<string, any>();
/** 获取 Button 属性 */
function getButtonProps(action: ActionItem) {
const key = JSON.stringify({
type: action.type,
danger: action.danger || false,
disabled: action.disabled,
loading: action.loading,
size: action.size,
});
if (buttonPropsMap.has(key)) {
return { ...buttonPropsMap.get(key) };
}
const res = {
return {
type: action.type || 'link',
danger: action.danger || false,
disabled: action.disabled,
loading: action.loading,
size: action.size,
};
buttonPropsMap.set(key, res);
return res;
}
/** 缓存 Tooltip 属性 */
const tooltipPropsMap = new Map<string, any>();
/** 获取 Tooltip 属性 */
function getTooltipProps(tooltip: any | string) {
if (!tooltip) return {};
const key = typeof tooltip === 'string' ? tooltip : JSON.stringify(tooltip);
if (tooltipPropsMap.has(key)) {
return tooltipPropsMap.get(key);
}
const result =
typeof tooltip === 'string' ? { title: tooltip } : { ...tooltip };
tooltipPropsMap.set(key, result);
return result;
return typeof tooltip === 'string' ? { title: tooltip } : { ...tooltip };
}
/** 处理菜单点击 */
function handleMenuClick(e: any) {
const action = getDropdownList.value[e.key];
if (action.onClick && isFunction(action.onClick)) {
if (action && action.onClick && isFunction(action.onClick)) {
action.onClick();
}
}
@ -287,7 +184,7 @@ function getActionKey(action: ActionItem, index: number) {
<Dropdown v-if="getDropdownList.length > 0" :trigger="['hover']">
<slot name="more">
<Button :type="getDropdownList[0].type">
<Button :type="getDropdownList[0]?.type">
<template #icon>
{{ $t('page.action.more') }}
<IconifyIcon icon="lucide:ellipsis-vertical" />
@ -339,6 +236,7 @@ function getActionKey(action: ActionItem, index: number) {
</Dropdown>
</div>
</template>
<style lang="scss">
.table-actions {
.ant-btn-link {

22
apps/web-antd/src/utils/formCreate.ts
View File

@ -5,14 +5,12 @@
import { isRef } from 'vue';
// 编码表单 Conf
export const encodeConf = (designerRef: object) => {
// @ts-ignore designerRef.value is dynamically added by form-create-designer
export const encodeConf = (designerRef: any) => {
return JSON.stringify(designerRef.value.getOption());
};
// 编码表单 Fields
export const encodeFields = (designerRef: object) => {
// @ts-ignore designerRef.value is dynamically added by form-create-designer
export const encodeFields = (designerRef: any) => {
const rule = JSON.parse(designerRef.value.getJson());
const fields: string[] = [];
rule.forEach((item: unknown) => {
@ -32,33 +30,29 @@ export const decodeFields = (fields: string[]) => {
// 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
export const setConfAndFields = (
designerRef: object,
designerRef: any,
conf: string,
fields: string | string[],
) => {
// @ts-ignore designerRef.value is dynamically added by form-create-designer
designerRef.value.setOption(JSON.parse(conf));
// @ts-ignore designerRef.value is dynamically added by form-create-designer
designerRef.value.setRule(decodeFields(fields));
// 处理 fields 参数类型，确保传入 decodeFields 的是 string[] 类型
const fieldsArray = Array.isArray(fields) ? fields : [fields];
designerRef.value.setRule(decodeFields(fieldsArray));
};
// 设置表单的 Conf 和 Fields，适用 form-create 场景
export const setConfAndFields2 = (
detailPreview: object,
detailPreview: any,
conf: string,
fields: string[],
value?: object,
value?: any,
) => {
if (isRef(detailPreview)) {
// @ts-ignore detailPreview.value is dynamically added by form-create-designer
detailPreview = detailPreview.value;
}
// @ts-ignore detailPreview properties are dynamically added by form-create-designer
detailPreview.option = JSON.parse(conf);
// @ts-ignore detailPreview properties are dynamically added by form-create-designer
detailPreview.rule = decodeFields(fields);
if (value) {
// @ts-ignore detailPreview properties are dynamically added by form-create-designer
detailPreview.value = value;
}
};

3
apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
View File

@ -255,15 +255,12 @@ async function getApprovalDetail(row: {
*/
function setFieldPermission(field: string, permission: string) {
if (permission === BpmFieldPermissionType.READ) {
// @ts-ignore
fApi.value?.disabled(true, field);
}
if (permission === BpmFieldPermissionType.WRITE) {
// @ts-ignore
fApi.value?.disabled(false, field);
}
if (permission === BpmFieldPermissionType.NONE) {
// @ts-ignore
fApi.value?.hidden(true, field);
}
}

3
apps/web-antd/src/views/bpm/processInstance/detail/index.vue
View File

@ -195,17 +195,14 @@ const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
*/
function setFieldPermission(field: string, permission: string) {
if (permission === FieldPermissionType.READ) {
// @ts-ignore
fApi.value?.disabled(true, field);
}
if (permission === FieldPermissionType.WRITE) {
// @ts-ignore
fApi.value?.disabled(false, field);
// 加入可以编辑的字段
writableFields.push(field);
}
if (permission === FieldPermissionType.NONE) {
// @ts-ignore
fApi.value?.hidden(true, field);
}
}

1
apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
View File

@ -359,7 +359,6 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
const formCreateApi = approveFormFApi.value;
if (Object.keys(formCreateApi)?.length > 0) {
await formCreateApi.validate();
// @ts-ignore
data.variables = approveForm.value.value;
}
await TaskApi.approveTask(data);

6
apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
View File

@ -330,9 +330,7 @@ function handleUserSelectCancel() {
v-if="task.assigneeUser || task.ownerUser"
>
<!-- 信息：头像昵称 -->
<div
class="relative flex h-8 items-center rounded-3xl bg-gray-100 pr-2 dark:bg-gray-600"
>
<div class="relative flex h-8 items-center rounded-3xl pr-2">
<template
v-if="
task.assigneeUser?.avatar || task.assigneeUser?.nickname
@ -414,7 +412,7 @@ function handleUserSelectCancel() {
<div
v-for="(user, userIndex) in activity.candidateUsers"
:key="userIndex"
class="relative flex h-8 items-center rounded-3xl bg-gray-100 pr-2 dark:bg-gray-600"
class="relative flex h-8 items-center rounded-3xl pr-2"
>
<Avatar
class="!m-1"

6
apps/web-antd/src/views/crm/contract/data.ts
View File

@ -2,7 +2,7 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { useUserStore } from '@vben/stores';
import { erpPriceMultiply, floatToFixed2 } from '@vben/utils';
import { erpPriceInputFormatter, erpPriceMultiply } from '@vben/utils';
import { z } from '#/adapter/form';
import { getSimpleBusinessList } from '#/api/crm/business';
@ -341,7 +341,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'unpaidPrice',
minWidth: 150,
formatter: ({ row }) => {
return floatToFixed2(row.totalPrice - row.totalReceivablePrice);
return erpPriceInputFormatter(
row.totalPrice - row.totalReceivablePrice,
);
},
},
{

10
apps/web-antd/src/views/crm/contract/modules/detail-data.ts
View File

@ -3,11 +3,7 @@ import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import {
erpPriceInputFormatter,
floatToFixed2,
formatDateTime,
} from '@vben/utils';
import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils';
@ -148,7 +144,9 @@ export function useDetailListColumns(): VxeTableGridOptions['columns'] {
field: 'unpaidPrice',
minWidth: 150,
formatter: ({ row }) => {
return floatToFixed2(row.totalPrice - row.totalReceivablePrice);
return erpPriceInputFormatter(
row.totalPrice - row.totalReceivablePrice,
);
},
},
{

4
apps/web-antd/src/views/crm/contract/modules/detail.vue
View File

@ -64,14 +64,14 @@ const [TransferModal, transferModalApi] = useVbenModal({
destroyOnClose: true,
});
/** 加载线索详情 */
/** 加载合同详情 */
async function loadContractDetail() {
loading.value = true;
const data = await getContract(contractId.value);
contract.value = data;
// 操作日志
const logList = await getOperateLogPage({
bizType: BizTypeEnum.CRM_CLUE,
bizType: BizTypeEnum.CRM_CONTRACT,
bizId: contractId.value,
});
contractLogList.value = logList.list;

6
apps/web-antd/src/views/crm/product/modules/detail-data.ts
View File

@ -104,6 +104,12 @@ export function useDetailListColumns(
formatter: 'formatAmount2',
visible: showBussinePrice,
},
{
field: 'contractPrice',
title: '合同价格（元）',
formatter: 'formatAmount2',
visible: !showBussinePrice,
},
{
field: 'count',
title: '数量',

2
apps/web-antd/src/views/crm/receivable/modules/detail.vue
View File

@ -53,7 +53,7 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true,
});
/** 加载线索详情 */
/** 加载回款详情 */
async function loadReceivableDetail() {
loading.value = true;
const data = await getReceivable(receivableId.value);

14
apps/web-antd/src/views/crm/receivable/plan/data.ts
View File

@ -2,7 +2,7 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { useUserStore } from '@vben/stores';
import { floatToFixed2 } from '@vben/utils';
import { erpPriceInputFormatter } from '@vben/utils';
import { getContractSimpleList } from '#/api/crm/contract';
import { getCustomerSimpleList } from '#/api/crm/customer';
@ -53,6 +53,13 @@ export function useFormSchema(): VbenFormSchema[] {
value: item.id,
})),
placeholder: '请选择合同',
onChange: (value: number) => {
const contract = res.find((item) => item.id === value);
if (contract) {
values.price =
contract.totalPrice - contract.totalReceivablePrice;
}
},
};
},
},
@ -106,6 +113,7 @@ export function useFormSchema(): VbenFormSchema[] {
valueFormat: 'x',
format: 'YYYY-MM-DD',
},
defaultValue: new Date(),
},
{
fieldName: 'remindDays',
@ -246,9 +254,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 160,
formatter: ({ row }) => {
if (row.receivable) {
return floatToFixed2(row.price - row.receivable.price);
return erpPriceInputFormatter(row.price - row.receivable.price);
}
return floatToFixed2(row.price);
return erpPriceInputFormatter(row.price);
},
},
{

2
apps/web-antd/src/views/crm/receivable/plan/modules/detail.vue
View File

@ -53,7 +53,7 @@ const [FormModal, formModalApi] = useVbenModal({
destroyOnClose: true,
});
/** 加载线索详情 */
/** 加载回款计划详情 */
async function loadreceivablePlanDetail() {
loading.value = true;
const data = await getReceivablePlan(receivablePlanId.value);

4
apps/web-antd/src/views/pay/demo/withdraw/index.vue
View File

@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DemoWithdrawApi } from '#/api/pay/demo/withdraw';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { floatToFixed2 } from '@vben/utils';
import { erpPriceInputFormatter } from '@vben/utils';
import { message, Tag } from 'ant-design-vue';
@ -110,7 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<Tag v-else-if="row.type === 3">钱包余额</Tag>
</template>
<template #price="{ row }">
<span>￥{{ floatToFixed2(row.price) }}</span>
<span>￥{{ erpPriceInputFormatter(row.price) }}</span>
</template>
<template #status="{ row }">
<Tag v-if="row.status === 0 && !row.payTransferId" type="warning">

10
apps/web-antd/src/views/pay/order/data.ts
View File

@ -4,7 +4,7 @@ import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { floatToFixed2, formatDateTime } from '@vben/utils';
import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
import { Tag } from 'ant-design-vue';
@ -174,17 +174,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'price',
label: '支付金额',
content: (data) => `￥${floatToFixed2(data?.price)}`,
content: (data) => `￥${erpPriceInputFormatter(data?.price)}`,
},
{
field: 'channelFeePrice',
label: '手续费',
content: (data) => `￥${floatToFixed2(data?.channelFeePrice)}`,
content: (data) => `￥${erpPriceInputFormatter(data?.channelFeePrice)}`,
},
{
field: 'channelFeeRate',
label: '手续费比例',
content: (data) => `${floatToFixed2(data?.channelFeeRate)}%`,
content: (data) => `${erpPriceInputFormatter(data?.channelFeeRate)}%`,
},
{
field: 'successTime',
@ -240,7 +240,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'refundPrice',
label: '退款金额',
content: (data) => `￥${floatToFixed2(data?.refundPrice)}`,
content: (data) => `￥${erpPriceInputFormatter(data?.refundPrice)}`,
},
{
field: 'notifyUrl',

4
apps/web-antd/src/views/pay/transfer/data.ts
View File

@ -4,7 +4,7 @@ import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { floatToFixed2, formatDateTime } from '@vben/utils';
import { erpPriceInputFormatter, formatDateTime } from '@vben/utils';
import { Tag } from 'ant-design-vue';
@ -217,7 +217,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
content: (data) => {
return h(Tag, {
color: 'blue',
content: `￥${floatToFixed2(data?.price)}`,
content: `￥${erpPriceInputFormatter(data?.price)}`,
});
},
},

15
packages/@core/ui-kit/popup-ui/src/modal/modal.vue
View File

@ -105,10 +105,17 @@ const shouldDraggable = computed(
() => draggable.value && !shouldFullscreen.value && header.value,
);
const getAppendTo = computed(() => {
return appendToMain.value
? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
: undefined;
});
const { dragging, transform } = useModalDraggable(
dialogRef,
headerRef,
shouldDraggable,
getAppendTo,
);
const firstOpened = ref(false);
@ -198,11 +205,6 @@ function handleFocusOutside(e: Event) {
e.preventDefault();
e.stopPropagation();
}
const getAppendTo = computed(() => {
return appendToMain.value
? `#${ELEMENT_ID_MAIN_CONTENT}>div:not(.absolute)>div`
: undefined;
});
const getForceMount = computed(() => {
return !unref(destroyOnClose) && unref(firstOpened);
@ -224,7 +226,8 @@ function handleClosed() {
:append-to="getAppendTo"
:class="
cn(
'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-[var(--radius)]',
'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0',
shouldFullscreen ? 'sm:rounded-none' : 'sm:rounded-[var(--radius)]',
modalClass,
{
'border-border border': bordered,

33
packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
View File

@ -13,6 +13,7 @@ export function useModalDraggable(
targetRef: Ref<HTMLElement | undefined>,
dragRef: Ref<HTMLElement | undefined>,
draggable: ComputedRef<boolean>,
containerSelector?: ComputedRef<string | undefined>,
) {
const transform = reactive({
offsetX: 0,
@ -30,20 +31,36 @@ export function useModalDraggable(
}
const targetRect = targetRef.value.getBoundingClientRect();
const { offsetX, offsetY } = transform;
const targetLeft = targetRect.left;
const targetTop = targetRect.top;
const targetWidth = targetRect.width;
const targetHeight = targetRect.height;
const docElement = document.documentElement;
const clientWidth = docElement.clientWidth;
const clientHeight = docElement.clientHeight;
const minLeft = -targetLeft + offsetX;
const minTop = -targetTop + offsetY;
const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
const maxTop = clientHeight - targetTop - targetHeight + offsetY;
let containerRect: DOMRect | null = null;
if (containerSelector?.value) {
const container = document.querySelector(containerSelector.value);
if (container) {
containerRect = container.getBoundingClientRect();
}
}
let maxLeft, maxTop, minLeft, minTop;
if (containerRect) {
minLeft = containerRect.left - targetLeft + offsetX;
maxLeft = containerRect.right - targetLeft - targetWidth + offsetX;
minTop = containerRect.top - targetTop + offsetY;
maxTop = containerRect.bottom - targetTop - targetHeight + offsetY;
} else {
const docElement = document.documentElement;
const clientWidth = docElement.clientWidth;
const clientHeight = docElement.clientHeight;
minLeft = -targetLeft + offsetX;
minTop = -targetTop + offsetY;
maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
maxTop = clientHeight - targetTop - targetHeight + offsetY;
}
const onMousemove = (e: MouseEvent) => {
let moveX = offsetX + e.clientX - downX;

90
packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
View File

@ -23,6 +23,7 @@ const props = withDefaults(defineProps<TreeProps>(), {
defaultExpandedKeys: () => [],
defaultExpandedLevel: 0,
disabled: false,
disabledField: 'disabled',
expanded: () => [],
iconField: 'icon',
labelField: 'label',
@ -101,16 +102,37 @@ function updateTreeValue() {
if (val === undefined) {
treeValue.value = undefined;
} else {
treeValue.value = Array.isArray(val)
? val.map((v) => getItemByValue(v))
: getItemByValue(val);
if (Array.isArray(val)) {
const filteredValues = val.filter((v) => {
const item = getItemByValue(v);
return item && !get(item, props.disabledField);
});
treeValue.value = filteredValues.map((v) => getItemByValue(v));
if (filteredValues.length !== val.length) {
modelValue.value = filteredValues;
}
} else {
const item = getItemByValue(val);
if (item && !get(item, props.disabledField)) {
treeValue.value = item;
} else {
treeValue.value = undefined;
modelValue.value = undefined;
}
}
}
}
function updateModelValue(val: Arrayable<Recordable<any>>) {
modelValue.value = Array.isArray(val)
? val.map((v) => get(v, props.valueField))
: get(val, props.valueField);
if (Array.isArray(val)) {
const filteredVal = val.filter((v) => !get(v, props.disabledField));
modelValue.value = filteredVal.map((v) => get(v, props.valueField));
} else {
if (val && !get(val, props.disabledField)) {
modelValue.value = get(val, props.valueField);
}
}
}
function expandToLevel(level: number) {
@ -149,10 +171,18 @@ function collapseAll() {
expanded.value = [];
}
function isNodeDisabled(item: FlattenedItem<Recordable<any>>) {
return props.disabled || get(item.value, props.disabledField);
}
function onToggle(item: FlattenedItem<Recordable<any>>) {
emits('expand', item);
}
function onSelect(item: FlattenedItem<Recordable<any>>, isSelected: boolean) {
if (isNodeDisabled(item)) {
return;
}
if (
!props.checkStrictly &&
props.multiple &&
@ -224,28 +254,34 @@ defineExpose({
:class="
cn('cursor-pointer', getNodeClass?.(item), {
'data-[selected]:bg-accent': !multiple,
'cursor-not-allowed': disabled,
'cursor-not-allowed': isNodeDisabled(item),
})
"
v-bind="
Object.assign(item.bind, {
onfocus: disabled ? 'this.blur()' : undefined,
onfocus: isNodeDisabled(item) ? 'this.blur()' : undefined,
disabled: isNodeDisabled(item),
})
"
@select="
(event) => {
(event: any) => {
if (isNodeDisabled(item)) {
event.preventDefault();
event.stopPropagation();
return;
}
if (event.detail.originalEvent.type === 'click') {
event.preventDefault();
}
!disabled && onSelect(item, event.detail.isSelected);
onSelect(item, event.detail.isSelected);
}
"
@toggle="
(event) => {
(event: any) => {
if (event.detail.originalEvent.type === 'click') {
event.preventDefault();
}
!disabled && onToggle(item);
!isNodeDisabled(item) && onToggle(item);
}
"
class="tree-node focus:ring-grass8 my-0.5 flex items-center rounded px-2 py-1 outline-none focus:ring-2"
@ -266,24 +302,32 @@ defineExpose({
</div>
<Checkbox
v-if="multiple"
:checked="isSelected"
:disabled="disabled"
:indeterminate="isIndeterminate"
:checked="isSelected && !isNodeDisabled(item)"
:disabled="isNodeDisabled(item)"
:indeterminate="isIndeterminate && !isNodeDisabled(item)"
@click="
() => {
!disabled && handleSelect();
// onSelect(item, !isSelected);
(event: MouseEvent) => {
if (isNodeDisabled(item)) {
event.preventDefault();
event.stopPropagation();
return;
}
handleSelect();
}
"
/>
<div
class="flex items-center gap-1 pl-2"
@click="
(_event) => {
// $event.stopPropagation();
// $event.preventDefault();
!disabled && handleSelect();
// onSelect(item, !isSelected);
(event: MouseEvent) => {
if (isNodeDisabled(item)) {
event.preventDefault();
event.stopPropagation();
return;
}
event.stopPropagation();
event.preventDefault();
handleSelect();
}
"
>

2
packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
View File

@ -22,6 +22,8 @@ export interface TreeProps {
defaultValue?: Arrayable<number | string>;
/** 禁用 */
disabled?: boolean;
/** 禁用字段名 */
disabledField?: string;
/** 自定义节点类名 */
getNodeClass?: (item: FlattenedItem<Recordable<any>>) => string;
iconField?: string;

6
packages/effects/common-ui/src/components/icon-picker/icon-picker.vue
View File

@ -76,6 +76,12 @@ const keyword = ref('');
const keywordDebounce = refDebounced(keyword, 300);
const innerIcons = ref<string[]>([]);
/* 当检索关键词变化时，重置分页 */
watch(keywordDebounce, () => {
currentPage.value = 1;
setCurrentPage(1);
});
watchDebounced(
() => props.prefix,
async (prefix) => {

2
packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
View File

@ -3,6 +3,8 @@ import type { AuthenticationProps } from './types';
import { computed, watch } from 'vue';
import { $t } from '@vben/locales';
import { useVbenModal } from '@vben-core/popup-ui';
import { Slot, VbenAvatar } from '@vben-core/shadcn-ui';

74
packages/effects/hooks/src/use-hover-toggle.ts
View File

@ -2,7 +2,7 @@ import type { Arrayable, MaybeElementRef } from '@vueuse/core';
import type { Ref } from 'vue';
import { computed, onUnmounted, ref, unref, watch } from 'vue';
import { computed, effectScope, onUnmounted, ref, unref, watch } from 'vue';
import { isFunction } from '@vben/utils';
@ -20,12 +20,12 @@ const DEFAULT_ENTER_DELAY = 0; // 鼠标进入延迟时间，默认为 0（立
/**
* 监测鼠标是否在元素内部，如果在元素内部则返回 true，否则返回 false
* @param refElement 所有需要检测的元素。如果提供了一个数组，那么鼠标在任何一个元素内部都会返回 true
* @param refElement 所有需要检测的元素。支持单个元素、元素数组或响应式引用的元素数组。如果鼠标在任何一个元素内部都会返回 true
* @param delay 延迟更新状态的时间，可以是数字或包含进入/离开延迟的配置对象
* @returns 返回一个数组，第一个元素是一个 ref，表示鼠标是否在元素内部，第二个元素是一个控制器，可以通过 enable 和 disable 方法来控制监听器的启用和禁用
*/
export function useHoverToggle(
refElement: Arrayable<MaybeElementRef>,
refElement: Arrayable<MaybeElementRef> | Ref<HTMLElement[] | null>,
delay: (() => number) | HoverDelayOptions | number = DEFAULT_LEAVE_DELAY,
) {
// 兼容旧版本API
@ -38,20 +38,58 @@ export function useHoverToggle(
...delay,
};
const isHovers: Array<Ref<boolean>> = [];
const value = ref(false);
const enterTimer = ref<ReturnType<typeof setTimeout> | undefined>();
const leaveTimer = ref<ReturnType<typeof setTimeout> | undefined>();
const refs = Array.isArray(refElement) ? refElement : [refElement];
refs.forEach((refEle) => {
const eleRef = computed(() => {
const ele = unref(refEle);
return ele instanceof Element ? ele : (ele?.$el as Element);
});
const isHover = useElementHover(eleRef);
isHovers.push(isHover);
const hoverScopes = ref<ReturnType<typeof effectScope>[]>([]);
// 使用计算属性包装 refElement，使其响应式变化
const refs = computed(() => {
const raw = unref(refElement);
if (raw === null) return [];
return Array.isArray(raw) ? raw : [raw];
});
const isOutsideAll = computed(() => isHovers.every((v) => !v.value));
// 存储所有 hover 状态
const isHovers = ref<Array<Ref<boolean>>>([]);
// 更新 hover 监听的函数
function updateHovers() {
// 停止并清理之前的作用域
hoverScopes.value.forEach((scope) => scope.stop());
hoverScopes.value = [];
isHovers.value = refs.value.map((refEle) => {
if (!refEle) {
return ref(false);
}
const eleRef = computed(() => {
const ele = unref(refEle);
return ele instanceof Element ? ele : (ele?.$el as Element);
});
// 为每个元素创建独立的作用域
const scope = effectScope();
const hoverRef = scope.run(() => useElementHover(eleRef)) || ref(false);
hoverScopes.value.push(scope);
return hoverRef;
});
}
// 监听元素数量变化，避免过度执行
const elementsCount = computed(() => {
const raw = unref(refElement);
if (raw === null) return 0;
return Array.isArray(raw) ? raw.length : 1;
});
// 初始设置
updateHovers();
// 只在元素数量变化时重新设置监听器
const stopWatcher = watch(elementsCount, updateHovers, { deep: false });
const isOutsideAll = computed(() => isHovers.value.every((v) => !v.value));
function clearTimers() {
if (enterTimer.value) {
@ -96,7 +134,7 @@ export function useHoverToggle(
}
}
const watcher = watch(
const hoverWatcher = watch(
isOutsideAll,
(val) => {
setValueDelay(!val);
@ -106,15 +144,19 @@ export function useHoverToggle(
const controller = {
enable() {
watcher.resume();
hoverWatcher.resume();
},
disable() {
watcher.pause();
hoverWatcher.pause();
},
};
onUnmounted(() => {
clearTimers();
// 停止监听器
stopWatcher();
// 停止所有剩余的作用域
hoverScopes.value.forEach((scope) => scope.stop());
});
return [value, controller] as [typeof value, typeof controller];

26
packages/effects/layouts/src/authentication/authentication.vue
View File

@ -62,21 +62,23 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
</template>
</AuthenticationFormView>
<!-- 头部 Logo 和应用名称 -->
<div
v-if="logo || appName"
class="absolute left-0 top-0 z-10 flex flex-1"
@click="clickLogo"
>
<slot name="logo">
<!-- 头部 Logo 和应用名称 -->
<div
class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
v-if="logo || appName"
class="absolute left-0 top-0 z-10 flex flex-1"
@click="clickLogo"
>
<img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
<p v-if="appName" class="m-0 text-xl font-medium">
{{ appName }}
</p>
<div
class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
>
<img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
<p v-if="appName" class="m-0 text-xl font-medium">
{{ appName }}
</p>
</div>
</div>
</div>
</slot>
<!-- 系统介绍 -->
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">