feat:公共form类型回调类型补充&表格操作列可设置自定义icon

feature-JimuReport-1106-yjl
yujinlong 1 month ago
parent 2ddc7ce380
commit 9125c48d8b

@ -124,8 +124,8 @@ export interface FormProps {
// Show confirmation button
showSubmitButton?: boolean
resetFunc?: () => Promise<void>
submitFunc?: () => Promise<void>
resetFunc?: (() => Promise<void>) | (() => void)
submitFunc?: (() => Promise<void>) | (() => void)
transformDateFunc?: (date: any) => string
colon?: boolean,
// 表单是否初始状态是只读属性
@ -145,9 +145,9 @@ export interface FormSchema {
subLabel?: string
// Help text on the right side of the text
helpMessage?:
| string
| string[]
| ((renderCallbackParams: RenderCallbackParams) => string | string[])
| string
| string[]
| ((renderCallbackParams: RenderCallbackParams) => string | string[])
// BaseHelp component props
helpComponentProps?: Partial<HelpComponentProps>
// Label width, if it is passed, the labelCol and WrapperCol configured by itemProps will be invalid
@ -158,13 +158,13 @@ export interface FormSchema {
component: ComponentType
// Component parameters
componentProps?:
| ((opt: {
schema: FormSchema
tableAction: TableActionType
formActionType: FormActionType
formModel: Recordable
}) => Recordable)
| object
| ((opt: {
schema: FormSchema
tableAction: TableActionType
formActionType: FormActionType
formModel: Recordable
}) => Recordable)
| object
// Required
required?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean)
@ -203,10 +203,10 @@ export interface FormSchema {
renderColContent?: (renderCallbackParams: RenderCallbackParams) => VNode | VNode[] | string
renderComponentContent?:
| ((renderCallbackParams: RenderCallbackParams) => any)
| VNode
| VNode[]
| string
| ((renderCallbackParams: RenderCallbackParams) => any)
| VNode
| VNode[]
| string
// Custom slot, in from-item
slot?: string

@ -0,0 +1,15 @@
<template>
<renderComponent />
</template>
<script lang="ts" setup>
import { VNode } from 'vue'
const props = defineProps<{
renderProp: VNode
}>()
const renderComponent = {
render: () => {
return props.renderProp
},
}
</script>

@ -3,13 +3,19 @@
<template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
<Tooltip v-if="action.tooltip" v-bind="getTooltip(action.tooltip)">
<PopConfirmButton v-bind="action">
<Icon v-if="action.icon" :icon="action.icon" :class="{ 'mr-1': !!action.label }" />
<template v-if="action.label">{{ action.label }}</template>
<RenderComponent v-if="action.isCustomIcon" :renderProp="action.icon" />
<template v-else>
<Icon v-if="action.icon" :icon="action.icon" :class="{ 'mr-1': !!action.label }" />
<template v-if="action.label">{{ action.label }}</template>
</template>
</PopConfirmButton>
</Tooltip>
<PopConfirmButton v-else v-bind="action">
<Icon v-if="action.icon" :icon="action.icon" :class="{ 'mr-1': !!action.label }" />
<template v-if="action.label">{{ action.label }}</template>
<RenderComponent v-if="action.isCustomIcon" :renderProp="action.icon" />
<template v-else>
<Icon v-if="action.icon" :icon="action.icon" :class="{ 'mr-1': !!action.label }" />
<template v-if="action.label">{{ action.label }}</template>
</template>
</PopConfirmButton>
<Divider
v-if="divider && index < getActions.length - 1"
@ -37,6 +43,7 @@
import Icon from '/@/components/Icon/index'
import { ActionItem, TableActionType } from '/@/components/Table'
import { PopConfirmButton } from '/@/components/Button'
import RenderComponent from './RenderComponent.vue'
import { Dropdown } from '/@/components/Dropdown'
import { useDesign } from '/@/hooks/web/useDesign'
import { useTableContext } from '../hooks/useTableContext'
@ -47,7 +54,15 @@
export default defineComponent({
name: 'TableAction',
components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip },
components: {
Icon,
PopConfirmButton,
Divider,
Dropdown,
MoreOutlined,
Tooltip,
RenderComponent,
},
props: {
actions: {
type: Array as PropType<ActionItem[]>,

@ -1,11 +1,13 @@
import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes'
import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip'
import { RoleEnum } from '/@/enums/roleEnum'
import { VNode } from 'vue'
export interface ActionItem extends ButtonProps {
onClick?: Fn
label?: string
color?: 'success' | 'error' | 'warning'
icon?: string
isCustomIcon?: boolean
icon?: string | JSX.Element | VNode
popConfirm?: PopConfirm
disabled?: boolean
divider?: boolean
@ -24,16 +26,16 @@ export interface PopConfirm {
cancel?: Fn
icon?: string
placement?:
| 'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'leftTop'
| 'leftBottom'
| 'rightTop'
| 'rightBottom'
| 'bottomLeft'
| 'bottomRight'
| 'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'leftTop'
| 'leftBottom'
| 'rightTop'
| 'rightBottom'
| 'bottomLeft'
| 'bottomRight'
}

Loading…
Cancel
Save