fix(input-count): make sure the reset function works close #381

CHANGELOG.zh_CN.md

@@ -4,6 +4,10 @@
 
 - 重构路由多层模式,解决嵌套 keepalive 执行多次问题
 
+### 🐛 Bug Fixes
+
+- 确保 CountDownInput 组件重置清空值
+
 ## 2.1.0 (2021-03-15)
 
 ### ✨ Features

src/components/CountDown/src/CountButton.vue

@@ -8,22 +8,21 @@
   </Button>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, PropType } from 'vue';
+  import { defineComponent, ref, PropType, watchEffect } from 'vue';
 
   import { Button } from 'ant-design-vue';
 
   import { useCountdown } from './useCountdown';
   import { isFunction } from '/@/utils/is';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     name: 'CountButton',
     components: { Button },
     props: {
-      count: {
-        type: Number,
-        default: 60,
-      },
+      value: propTypes.string,
+      count: propTypes.number.def(60),
       beforeStartFunc: {
         type: Function as PropType<() => boolean>,
         default: null,
@@ -32,8 +31,12 @@
     setup(props) {
       const loading = ref(false);
 
-      const { currentCount, isStart, start } = useCountdown(props.count);
+      const { currentCount, isStart, start, reset } = useCountdown(props.count);
       const { t } = useI18n();
+
+      watchEffect(() => {
+        props.value === undefined && reset();
+      });
       /**
        * @description: Judge whether there is an external function before execution, and decide whether to start after execution
        */

src/components/CountDown/src/CountdownInput.vue

 <template>
-  <AInput v-bind="$attrs" :class="prefixCls" :size="size">
+  <AInput v-bind="$attrs" :class="prefixCls" :size="size" :value="state">
     <template #addonAfter>
-      <CountButton :size="size" :count="count" :beforeStartFunc="sendCodeApi" />
+      <CountButton :size="size" :count="count" :value="state" :beforeStartFunc="sendCodeApi" />
     </template>
   </AInput>
 </template>
@@ -18,6 +18,7 @@
 
   export default defineComponent({
     name: 'CountDownInput',
+    inheritAttrs: false,
     components: { [Input.name]: Input, CountButton },
     props: {
       value: propTypes.string,

src/components/CountDown/src/useCountdown.ts

@@ -14,8 +14,8 @@ export function useCountdown(count: number) {
 
   function stop() {
     isStart.value = false;
-    timerId = null;
     clear();
+    timerId = null;
   }
 
   function start() {

src/components/Form/src/componentMap.ts

@@ -23,6 +23,7 @@ import ApiSelect from './components/ApiSelect.vue';
 import { BasicUpload } from '/@/components/Upload';
 import { StrengthMeter } from '/@/components/StrengthMeter';
 import { IconPicker } from '/@/components/Icon';
+import { CountdownInput } from '/@/components/CountDown';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -51,6 +52,7 @@ componentMap.set('WeekPicker', DatePicker.WeekPicker);
 componentMap.set('TimePicker', TimePicker);
 componentMap.set('StrengthMeter', StrengthMeter);
 componentMap.set('IconPicker', IconPicker);
+componentMap.set('InputCountDown', CountdownInput);
 
 componentMap.set('Upload', BasicUpload);
 

src/hooks/component/useFormItem.ts

@@ -31,6 +31,7 @@ export function useRuleFormItem<T extends Indexable>(
     },
     set(value) {
       if (isEqual(value, defaultState.value)) return;
+
       innerState.value = value as T[keyof T];
       emit?.(changeEvent, value);
     },

src/views/demo/form/RuleForm.vue

@@ -5,6 +5,7 @@
       <a-button @click="resetValidate" class="mr-2"> 清空校验信息 </a-button>
       <a-button @click="getFormValues" class="mr-2"> 获取表单值 </a-button>
       <a-button @click="setFormValues" class="mr-2"> 设置表单值 </a-button>
+      <a-button @click="resetFields" class="mr-2"> 重置 </a-button>
     </div>
     <CollapseContainer title="表单校验">
       <BasicForm @register="register" @submit="handleSubmit" />
@@ -47,6 +48,15 @@
       required: true,
     },
     {
+      field: 'field44',
+      component: 'InputCountDown',
+      label: '验证码',
+      colProps: {
+        span: 8,
+      },
+      required: true,
+    },
+    {
       field: 'field4',
       component: 'Select',
       label: '字段4',
@@ -150,15 +160,16 @@
     components: { BasicForm, CollapseContainer, PageWrapper },
     setup() {
       const { createMessage } = useMessage();
-      const [register, { validateFields, clearValidate, getFieldsValue, setFieldsValue }] = useForm(
-        {
-          labelWidth: 120,
-          schemas,
-          actionColOptions: {
-            span: 24,
-          },
-        }
-      );
+      const [
+        register,
+        { validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        actionColOptions: {
+          span: 24,
+        },
+      });
       async function validateForm() {
         try {
           const res = await validateFields();
@@ -191,6 +202,7 @@
         setFormValues,
         validateForm,
         resetValidate,
+        resetFields,
       };
     },
   });

src/views/demo/table/FetchTable.vue

@@ -24,9 +24,6 @@
       });
       function handleReloadCurrent() {
         reload();
-        // reload({
-        //   searchInfo: 'xxx',
-        // });
       }
 
       function handleReload() {

src/views/sys/login/ForgetPasswordForm.vue

@@ -40,7 +40,7 @@
   import { CountdownInput } from '/@/components/CountDown';
 
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
+  import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
 
   export default defineComponent({
     name: 'ForgetPasswordForm',
@@ -66,14 +66,12 @@
         sms: '',
       });
 
-      const { validForm } = useFormValid(formRef);
-
       const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);
 
       async function handleReset() {
-        const data = await validForm();
-        if (!data) return;
-        console.log(data);
+        const form = unref(formRef);
+        if (!form) return;
+        await form.resetFields();
       }
 
       return {