From d6749f95c526c0e71ec946bd3bb777bc42b2c34a Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期日, 20 十月 2024 17:59:31 +0800
Subject: [PATCH] 工艺绑定优化
---
src/components/Form/src/components/FormAction.vue | 158 +++++++++++++++++++++++-----------------------------
1 files changed, 69 insertions(+), 89 deletions(-)
diff --git a/src/components/Form/src/components/FormAction.vue b/src/components/Form/src/components/FormAction.vue
index 8dec49f..64c6e19 100644
--- a/src/components/Form/src/components/FormAction.vue
+++ b/src/components/Form/src/components/FormAction.vue
@@ -1,7 +1,7 @@
<template>
- <a-col v-bind="actionColOpt" v-if="showActionButtonGroup">
+ <Col v-bind="actionColOpt" v-if="showActionButtonGroup">
<div style="width: 100%" :style="{ textAlign: actionColOpt.style.textAlign }">
- <FormItem>
+ <Form.Item>
<slot name="resetBefore"></slot>
<Button
type="default"
@@ -35,101 +35,81 @@
<BasicArrow class="ml-1" :expand="!isAdvanced" up />
</Button>
<slot name="advanceAfter"></slot>
- </FormItem>
+ </Form.Item>
</div>
- </a-col>
+ </Col>
</template>
-<script lang="ts">
- import type { ColEx } from '../types/index';
- //import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
- import { defineComponent, computed, PropType } from 'vue';
+<script lang="ts" setup>
+ import type { ColEx } from '../types';
+ import { computed, PropType } from 'vue';
import { Form, Col } from 'ant-design-vue';
- import { Button, ButtonProps } from '/@/components/Button';
- import { BasicArrow } from '/@/components/Basic';
+ import { Button, ButtonProps } from '@/components/Button';
+ import { BasicArrow } from '@/components/Basic';
import { useFormContext } from '../hooks/useFormContext';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { propTypes } from '/@/utils/propTypes';
+ import { useI18n } from '@/hooks/web/useI18n';
+ import { propTypes } from '@/utils/propTypes';
- type ButtonOptions = Partial<ButtonProps> & { text: string };
+ defineOptions({ name: 'BasicFormAction' });
- export default defineComponent({
- name: 'BasicFormAction',
- components: {
- FormItem: Form.Item,
- Button,
- BasicArrow,
- [Col.name]: Col,
+ const props = defineProps({
+ showActionButtonGroup: propTypes.bool.def(true),
+ showResetButton: propTypes.bool.def(true),
+ showSubmitButton: propTypes.bool.def(true),
+ showAdvancedButton: propTypes.bool.def(true),
+ resetButtonOptions: {
+ type: Object as PropType<ButtonProps>,
+ default: () => ({}),
},
- props: {
- showActionButtonGroup: propTypes.bool.def(true),
- showResetButton: propTypes.bool.def(true),
- showSubmitButton: propTypes.bool.def(true),
- showAdvancedButton: propTypes.bool.def(true),
- resetButtonOptions: {
- type: Object as PropType<ButtonOptions>,
- default: () => ({}),
- },
- submitButtonOptions: {
- type: Object as PropType<ButtonOptions>,
- default: () => ({}),
- },
- actionColOptions: {
- type: Object as PropType<Partial<ColEx>>,
- default: () => ({}),
- },
- actionSpan: propTypes.number.def(6),
- isAdvanced: propTypes.bool,
- hideAdvanceBtn: propTypes.bool,
+ submitButtonOptions: {
+ type: Object as PropType<ButtonProps>,
+ default: () => ({}),
},
- emits: ['toggle-advanced'],
- setup(props, { emit }) {
- const { t } = useI18n();
-
- const actionColOpt = computed(() => {
- const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
- const actionSpan = 24 - span;
- const advancedSpanObj = showAdvancedButton
- ? { span: actionSpan < 6 ? 24 : actionSpan }
- : {};
- const actionColOpt: Partial<ColEx> = {
- style: { textAlign: 'right' },
- span: showAdvancedButton ? 6 : 4,
- ...advancedSpanObj,
- ...actionColOptions,
- };
- return actionColOpt;
- });
-
- const getResetBtnOptions = computed((): ButtonOptions => {
- return Object.assign(
- {
- text: t('common.resetText'),
- },
- props.resetButtonOptions,
- );
- });
-
- const getSubmitBtnOptions = computed(() => {
- return Object.assign(
- {
- text: t('common.queryText'),
- },
- props.submitButtonOptions,
- );
- });
-
- function toggleAdvanced() {
- emit('toggle-advanced');
- }
-
- return {
- t,
- actionColOpt,
- getResetBtnOptions,
- getSubmitBtnOptions,
- toggleAdvanced,
- ...useFormContext(),
- };
+ actionColOptions: {
+ type: Object as PropType<Partial<ColEx>>,
+ default: () => ({}),
},
+ actionSpan: propTypes.number.def(6),
+ isAdvanced: propTypes.bool,
+ hideAdvanceBtn: propTypes.bool,
});
+
+ const emit = defineEmits(['toggle-advanced']);
+
+ const { t } = useI18n();
+ const { resetAction, submitAction } = useFormContext();
+
+ const actionColOpt = computed(() => {
+ const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
+ const actionSpan = 24 - span;
+ const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {};
+ const actionColOpt: Partial<ColEx> = {
+ style: { textAlign: 'right' },
+ span: showAdvancedButton ? 6 : 4,
+ ...advancedSpanObj,
+ ...actionColOptions,
+ };
+ return actionColOpt;
+ });
+
+ const getResetBtnOptions = computed((): ButtonProps => {
+ return Object.assign(
+ {
+ text: t('common.resetText'),
+ },
+ props.resetButtonOptions,
+ );
+ });
+
+ const getSubmitBtnOptions = computed((): ButtonProps => {
+ return Object.assign(
+ {
+ text: t('common.queryText'),
+ },
+ props.submitButtonOptions,
+ );
+ });
+
+ function toggleAdvanced() {
+ emit('toggle-advanced');
+ }
</script>
--
Gitblit v1.9.3