| 提交 | 用户 | age | ||
| 84b830 | 1 | import type { ColEx } from './types/index'; |
| V | 2 | |
| 2f6253 | 3 | import { defineComponent, unref, computed, PropType } from 'vue'; |
| 陈 | 4 | import { Form, Col } from 'ant-design-vue'; |
| 73c8e0 | 5 | import { Button } from '/@/components/Button'; |
| 84b830 | 6 | import { BasicArrow } from '/@/components/Basic/index'; |
| V | 7 | |
| 8 | import { getSlot } from '/@/utils/helper/tsxHelper'; | |
| dc09de | 9 | import { useI18n } from '/@/hooks/web/useI18n'; |
| 498278 | 10 | import { propTypes } from '/@/utils/propTypes'; |
| dc09de | 11 | |
| V | 12 | const { t } = useI18n('component.form'); |
| 2f6253 | 13 | |
| 陈 | 14 | export default defineComponent({ |
| 15 | name: 'BasicFormAction', | |
| 16 | props: { | |
| 498278 | 17 | show: propTypes.bool.def(true), |
| V | 18 | showResetButton: propTypes.bool.def(true), |
| 19 | showSubmitButton: propTypes.bool.def(true), | |
| 20 | showAdvancedButton: propTypes.bool.def(true), | |
| 2f6253 | 21 | resetButtonOptions: { |
| 陈 | 22 | type: Object as PropType<any>, |
| 23 | default: {}, | |
| 24 | }, | |
| 25 | submitButtonOptions: { | |
| 26 | type: Object as PropType<any>, | |
| 27 | default: {}, | |
| 28 | }, | |
| 29 | actionColOptions: { | |
| 30 | type: Object as PropType<any>, | |
| 31 | default: {}, | |
| 32 | }, | |
| 498278 | 33 | actionSpan: propTypes.number.def(6), |
| V | 34 | isAdvanced: propTypes.bool, |
| 35 | hideAdvanceBtn: propTypes.bool, | |
| 2f6253 | 36 | }, |
| 73c8e0 | 37 | emits: ['toggle-advanced'], |
| 2f6253 | 38 | setup(props, { slots, emit }) { |
| 陈 | 39 | const getResetBtnOptionsRef = computed(() => { |
| 40 | return { | |
| dc09de | 41 | text: t('resetButton'), |
| 2f6253 | 42 | ...props.resetButtonOptions, |
| 陈 | 43 | }; |
| 44 | }); | |
| 84c9d7 | 45 | |
| 2f6253 | 46 | const getSubmitBtnOptionsRef = computed(() => { |
| 陈 | 47 | return { |
| dc09de | 48 | text: t('submitButton'), |
| 2f6253 | 49 | // htmlType: 'submit', |
| 陈 | 50 | ...props.submitButtonOptions, |
| 51 | }; | |
| 52 | }); | |
| 53 | ||
| 54 | const actionColOpt = computed(() => { | |
| 55 | const { showAdvancedButton, actionSpan: span, actionColOptions } = props; | |
| 56 | const actionSpan = 24 - span; | |
| 57 | const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {}; | |
| 58 | const actionColOpt: Partial<ColEx> = { | |
| 59 | span: showAdvancedButton ? 6 : 4, | |
| 60 | ...advancedSpanObj, | |
| 5a6db8 | 61 | ...actionColOptions, |
| 2f6253 | 62 | }; |
| 陈 | 63 | return actionColOpt; |
| 64 | }); | |
| 65 | ||
| 66 | function toggleAdvanced() { | |
| 67 | emit('toggle-advanced'); | |
| 68 | } | |
| 84c9d7 | 69 | |
| 498278 | 70 | function renderAdvanceButton() { |
| V | 71 | const { showAdvancedButton, hideAdvanceBtn, isAdvanced } = props; |
| 72 | ||
| 73 | if (!showAdvancedButton || !!hideAdvanceBtn) { | |
| 74 | return null; | |
| 75 | } | |
| 76 | return ( | |
| 77 | <Button type="default" class="mr-2" onClick={toggleAdvanced}> | |
| 78 | {() => ( | |
| 79 | <> | |
| 80 | {isAdvanced ? t('putAway') : t('unfold')} | |
| 81 | <BasicArrow expand={!isAdvanced} top /> | |
| 82 | </> | |
| 83 | )} | |
| 84 | </Button> | |
| 85 | ); | |
| 86 | } | |
| 87 | ||
| 88 | function renderResetButton() { | |
| 89 | const { showResetButton } = props; | |
| 90 | if (!showResetButton) { | |
| 91 | return null; | |
| 92 | } | |
| 93 | return ( | |
| 94 | <Button type="default" class="mr-2" {...unref(getResetBtnOptionsRef)}> | |
| 95 | {() => unref(getResetBtnOptionsRef).text} | |
| 96 | </Button> | |
| 97 | ); | |
| 98 | } | |
| 99 | ||
| 100 | function renderSubmitButton() { | |
| 101 | const { showSubmitButton } = props; | |
| 102 | if (!showSubmitButton) { | |
| 103 | return null; | |
| 104 | } | |
| 105 | return ( | |
| 106 | <Button type="primary" {...unref(getSubmitBtnOptionsRef)}> | |
| 107 | {() => unref(getSubmitBtnOptionsRef).text} | |
| 108 | </Button> | |
| 109 | ); | |
| 110 | } | |
| 111 | ||
| 2f6253 | 112 | return () => { |
| 陈 | 113 | if (!props.show) { |
| 498278 | 114 | return null; |
| 2f6253 | 115 | } |
| 84c9d7 | 116 | |
| 2f6253 | 117 | return ( |
| 84c9d7 | 118 | <Col {...unref(actionColOpt)} style={{ textAlign: 'right' }}> |
| V | 119 | {() => ( |
| 120 | <Form.Item> | |
| 121 | {() => ( | |
| 122 | <> | |
| 123 | {getSlot(slots, 'advanceBefore')} | |
| 498278 | 124 | {renderAdvanceButton()} |
| 2f6253 | 125 | |
| 84c9d7 | 126 | {getSlot(slots, 'resetBefore')} |
| 498278 | 127 | {renderResetButton()} |
| 2f6253 | 128 | |
| 84c9d7 | 129 | {getSlot(slots, 'submitBefore')} |
| 498278 | 130 | {renderSubmitButton()} |
| 2f6253 | 131 | |
| 84c9d7 | 132 | {getSlot(slots, 'submitAfter')} |
| V | 133 | </> |
| 134 | )} | |
| 135 | </Form.Item> | |
| 136 | )} | |
| 137 | </Col> | |
| 2f6253 | 138 | ); |
| 陈 | 139 | }; |
| 140 | }, | |
| 141 | }); | |
