|
@@ -7,28 +7,17 @@ import { BasicArrow } from '/@/components/Basic/index';
|
|
|
|
|
|
import { getSlot } from '/@/utils/helper/tsxHelper';
|
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
|
|
+import { propTypes } from '/@/utils/propTypes';
|
|
|
|
|
|
const { t } = useI18n('component.form');
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'BasicFormAction',
|
|
|
props: {
|
|
|
- show: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
- showResetButton: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
- showSubmitButton: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
- showAdvancedButton: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
+ show: propTypes.bool.def(true),
|
|
|
+ showResetButton: propTypes.bool.def(true),
|
|
|
+ showSubmitButton: propTypes.bool.def(true),
|
|
|
+ showAdvancedButton: propTypes.bool.def(true),
|
|
|
resetButtonOptions: {
|
|
|
type: Object as PropType<any>,
|
|
|
default: {},
|
|
@@ -41,18 +30,9 @@ export default defineComponent({
|
|
|
type: Object as PropType<any>,
|
|
|
default: {},
|
|
|
},
|
|
|
- actionSpan: {
|
|
|
- type: Number,
|
|
|
- default: 6,
|
|
|
- },
|
|
|
- isAdvanced: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- hideAdvanceBtn: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
+ actionSpan: propTypes.number.def(6),
|
|
|
+ isAdvanced: propTypes.bool,
|
|
|
+ hideAdvanceBtn: propTypes.bool,
|
|
|
},
|
|
|
emits: ['toggle-advanced'],
|
|
|
setup(props, { slots, emit }) {
|
|
@@ -87,19 +67,53 @@ export default defineComponent({
|
|
|
emit('toggle-advanced');
|
|
|
}
|
|
|
|
|
|
+ function renderAdvanceButton() {
|
|
|
+ const { showAdvancedButton, hideAdvanceBtn, isAdvanced } = props;
|
|
|
+
|
|
|
+ if (!showAdvancedButton || !!hideAdvanceBtn) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <Button type="default" class="mr-2" onClick={toggleAdvanced}>
|
|
|
+ {() => (
|
|
|
+ <>
|
|
|
+ {isAdvanced ? t('putAway') : t('unfold')}
|
|
|
+ <BasicArrow expand={!isAdvanced} top />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </Button>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderResetButton() {
|
|
|
+ const { showResetButton } = props;
|
|
|
+ if (!showResetButton) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <Button type="default" class="mr-2" {...unref(getResetBtnOptionsRef)}>
|
|
|
+ {() => unref(getResetBtnOptionsRef).text}
|
|
|
+ </Button>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderSubmitButton() {
|
|
|
+ const { showSubmitButton } = props;
|
|
|
+ if (!showSubmitButton) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ <Button type="primary" {...unref(getSubmitBtnOptionsRef)}>
|
|
|
+ {() => unref(getSubmitBtnOptionsRef).text}
|
|
|
+ </Button>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
return () => {
|
|
|
if (!props.show) {
|
|
|
- return;
|
|
|
+ return null;
|
|
|
}
|
|
|
|
|
|
- const {
|
|
|
- showAdvancedButton,
|
|
|
- hideAdvanceBtn,
|
|
|
- isAdvanced,
|
|
|
- showResetButton,
|
|
|
- showSubmitButton,
|
|
|
- } = props;
|
|
|
-
|
|
|
return (
|
|
|
<Col {...unref(actionColOpt)} style={{ textAlign: 'right' }}>
|
|
|
{() => (
|
|
@@ -107,30 +121,13 @@ export default defineComponent({
|
|
|
{() => (
|
|
|
<>
|
|
|
{getSlot(slots, 'advanceBefore')}
|
|
|
- {showAdvancedButton && !hideAdvanceBtn && (
|
|
|
- <Button type="default" class="mr-2" onClick={toggleAdvanced}>
|
|
|
- {() => (
|
|
|
- <>
|
|
|
- {isAdvanced ? t('putAway') : t('unfold')}
|
|
|
- <BasicArrow expand={!isAdvanced} top />
|
|
|
- </>
|
|
|
- )}
|
|
|
- </Button>
|
|
|
- )}
|
|
|
+ {renderAdvanceButton()}
|
|
|
|
|
|
{getSlot(slots, 'resetBefore')}
|
|
|
- {showResetButton && (
|
|
|
- <Button type="default" class="mr-2" {...unref(getResetBtnOptionsRef)}>
|
|
|
- {() => unref(getResetBtnOptionsRef).text}
|
|
|
- </Button>
|
|
|
- )}
|
|
|
+ {renderResetButton()}
|
|
|
|
|
|
{getSlot(slots, 'submitBefore')}
|
|
|
- {showSubmitButton && (
|
|
|
- <Button type="primary" {...unref(getSubmitBtnOptionsRef)}>
|
|
|
- {() => unref(getSubmitBtnOptionsRef).text}
|
|
|
- </Button>
|
|
|
- )}
|
|
|
+ {renderSubmitButton()}
|
|
|
|
|
|
{getSlot(slots, 'submitAfter')}
|
|
|
</>
|