支持 Vue 3.2.x 语法升级为，script setup

src/views/form/basicForm/index.vue

@@ -81,8 +81,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, reactive, toRefs } from 'vue';
+<script lang="ts" setup>
+  import { ref, unref, reactive } from 'vue';
   import { useMessage } from 'naive-ui';
   import { BasicUpload } from '@/components/Upload';
   import { useGlobSetting } from '@/hooks/setting';
@@ -149,66 +149,46 @@
     },
   };
 
-  export default defineComponent({
-    components: { BasicUpload },
-    setup() {
-      const formRef: any = ref(null);
-      const message = useMessage();
-      const { uploadUrl } = globSetting;
+  const formRef: any = ref(null);
+  const message = useMessage();
+  const { uploadUrl } = globSetting;
 
-      const defaultValueRef = () => ({
-        name: '',
-        mobile: '',
-        remark: '',
-        sex: 1,
-        matter: null,
-        doctor: null,
-        datetime: [],
-      });
-
-      const state = reactive({
-        formValue: defaultValueRef(),
-        //图片列表 通常查看和编辑使用 绝对路径 | 相对路径都可以
-        uploadList: [
-          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        ],
-        uploadHeaders: {
-          platform: 'miniPrograms',
-          timestamp: new Date().getTime(),
-          token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
-        },
-      });
-
-      function formSubmit() {
-        formRef.value.validate((errors) => {
-          if (!errors) {
-            message.success('验证成功');
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      function resetForm() {
-        formRef.value.restoreValidation();
-        state.formValue = Object.assign(state.formValue, defaultValueRef());
-      }
-
-      function uploadChange(list: string[]) {
-        console.log(list);
-      }
-
-      return {
-        ...toRefs(state),
-        formRef,
-        uploadUrl,
-        rules,
-        doctorList,
-        matterList,
-        formSubmit,
-        resetForm,
-        uploadChange,
-      };
-    },
+  const defaultValueRef = () => ({
+    name: '',
+    mobile: '',
+    remark: '',
+    sex: 1,
+    matter: null,
+    doctor: null,
+    datetime: [],
   });
+
+  let formValue = reactive(defaultValueRef());
+  const uploadList = ref([
+    'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  ]);
+  const uploadHeaders = reactive({
+    platform: 'miniPrograms',
+    timestamp: new Date().getTime(),
+    token: 'Q6fFCuhc1vkKn5JNFWaCLf6gRAc5n0LQHd08dSnG4qo=',
+  });
+
+  function formSubmit() {
+    formRef.value.validate((errors) => {
+      if (!errors) {
+        message.success('验证成功');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
+
+  function resetForm() {
+    formRef.value.restoreValidation();
+    formValue = Object.assign(unref(formValue), defaultValueRef());
+  }
+
+  function uploadChange(list: string[]) {
+    console.log(list);
+  }
 </script>

src/views/form/detail/index.vue

@@ -8,7 +8,7 @@
     <n-card
       :bordered="false"
       title="基本信息"
-      class="proCard mt-4"
+      class="mt-4 proCard"
       size="small"
       :segmented="{ content: 'hard' }"
     >
@@ -29,7 +29,7 @@
     <n-card
       :bordered="false"
       title="其它信息"
-      class="proCard mt-4"
+      class="mt-4 proCard"
       size="small"
       :segmented="{ content: 'hard' }"
     >
@@ -50,7 +50,7 @@
     <n-card
       :bordered="false"
       title="表格信息"
-      class="proCard mt-4"
+      class="mt-4 proCard"
       size="small"
       :segmented="{ content: 'hard' }"
     >
@@ -119,14 +119,6 @@
   </div>
 </template>
 
-<script>
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    setup() {
-      return {};
-    },
-  });
-</script>
+<script setup></script>
 
 <style lang="less" scoped></style>

src/views/form/stepForm/Step1.vue

@@ -47,8 +47,8 @@
   </n-form>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref, defineEmits } from 'vue';
   import { useMessage } from 'naive-ui';
 
   const myAccountList = [
@@ -73,61 +73,50 @@
     },
   ];
 
-  export default defineComponent({
-    emits: ['nextStep'],
-    setup(_, { emit }) {
-      const form1Ref: any = ref(null);
-      const message = useMessage();
-      const current = ref(1);
+  const emit = defineEmits(['nextStep']);
 
-      return {
-        form1Ref,
-        current,
-        formValue: ref({
-          accountType: 1,
-          myAccount: null,
-          account: 'xioama@qq.com',
-          money: '1980',
-          name: 'Ah jung',
-        }),
-        rules: {
-          name: {
-            required: true,
-            message: '请输入收款人姓名',
-            trigger: 'blur',
-          },
-          account: {
-            required: true,
-            message: '请输入收款账户',
-            trigger: 'blur',
-          },
-          money: {
-            required: true,
-            message: '请输入转账金额',
-            trigger: 'blur',
-          },
-          myAccount: {
-            required: true,
-            type: 'number',
-            message: '请选择付款账户',
-            trigger: 'change',
-          },
-        },
-        myAccountList,
-        accountTypeList,
-        formSubmit() {
-          form1Ref.value.validate((errors) => {
-            if (!errors) {
-              emit('nextStep');
-            } else {
-              message.error('验证失败，请填写完整信息');
-            }
-          });
-        },
-        resetForm() {
-          form1Ref.value.restoreValidation();
-        },
-      };
-    },
+  const form1Ref: any = ref(null);
+  const message = useMessage();
+
+  const formValue = ref({
+    accountType: 1,
+    myAccount: null,
+    account: 'xioama@qq.com',
+    money: '1980',
+    name: 'Ah jung',
   });
+
+  const rules = {
+    name: {
+      required: true,
+      message: '请输入收款人姓名',
+      trigger: 'blur',
+    },
+    account: {
+      required: true,
+      message: '请输入收款账户',
+      trigger: 'blur',
+    },
+    money: {
+      required: true,
+      message: '请输入转账金额',
+      trigger: 'blur',
+    },
+    myAccount: {
+      required: true,
+      type: 'number',
+      message: '请选择付款账户',
+      trigger: 'change',
+    },
+  };
+
+  function formSubmit() {
+    form1Ref.value.validate((errors) => {
+      if (!errors) {
+        emit('nextStep');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
 </script>

src/views/form/stepForm/Step2.vue

@@ -32,50 +32,41 @@
   </n-form>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref, defineEmits } from 'vue';
   import { useMessage } from 'naive-ui';
+  const form2Ref: any = ref(null);
+  const message = useMessage();
+  const loading = ref(false);
 
-  export default defineComponent({
-    emits: ['prevStep', 'nextStep'],
-    setup(_, { emit }) {
-      const form2Ref: any = ref(null);
-      const message = useMessage();
-      const loading = ref(false);
-
-      function prevStep() {
-        emit('prevStep');
-      }
-
-      function formSubmit() {
-        loading.value = true;
-        form2Ref.value.validate((errors) => {
-          if (!errors) {
-            setTimeout(() => {
-              emit('nextStep');
-            }, 1500);
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      return {
-        form2Ref,
-        loading,
-        formValue: ref({
-          password: '086611',
-        }),
-        rules: {
-          password: {
-            required: true,
-            message: '请输入支付密码',
-            trigger: 'blur',
-          },
-        },
-        prevStep,
-        formSubmit,
-      };
-    },
+  const formValue = ref({
+    password: '086611',
   });
+
+  const rules = {
+    password: {
+      required: true,
+      message: '请输入支付密码',
+      trigger: 'blur',
+    },
+  };
+
+  const emit = defineEmits(['prevStep', 'nextStep']);
+
+  function prevStep() {
+    emit('prevStep');
+  }
+
+  function formSubmit() {
+    loading.value = true;
+    form2Ref.value.validate((errors) => {
+      if (!errors) {
+        setTimeout(() => {
+          emit('nextStep');
+        }, 1500);
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
 </script>

src/views/form/stepForm/Step3.vue

@@ -31,34 +31,17 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { useRouter } from 'vue-router';
+<script lang="ts" setup>
+  import { defineEmits } from 'vue';
 
-  export default defineComponent({
-    emits: ['finish', 'prevStep'],
-    setup(_, { emit }) {
-      const router = useRouter();
+  const emit = defineEmits(['finish', 'prevStep']);
+  function prevStep() {
+    emit('prevStep');
+  }
 
-      function prevStep() {
-        emit('prevStep');
-      }
-
-      function finish() {
-        emit('finish');
-      }
-
-      function toOrderList() {
-        router.push('/form/step-form');
-      }
-
-      return {
-        prevStep,
-        finish,
-        toOrderList,
-      };
-    },
-  });
+  function finish() {
+    emit('finish');
+  }
 </script>
 
 <style lang="less" scoped>

src/views/form/stepForm/stepForm.vue

@@ -5,7 +5,7 @@
         将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
       </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <n-space vertical class="steps" justify="center">
         <n-steps :current="currentTab" :status="currentStatus">
           <n-step title="填写转账信息" description="确保填写正确" />
@@ -20,43 +20,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
   import { defineComponent, ref } from 'vue';
   import step1 from './Step1.vue';
   import step2 from './Step2.vue';
   import step3 from './Step3.vue';
 
-  export default defineComponent({
-    components: { step1, step2, step3 },
-    setup() {
-      const currentTab = ref(1);
-      const currentStatus = ref('process');
+  const currentTab = ref(1);
+  const currentStatus = ref('process');
 
-      function nextStep() {
-        if (currentTab.value < 3) {
-          currentTab.value += 1;
-        }
-      }
+  function nextStep() {
+    if (currentTab.value < 3) {
+      currentTab.value += 1;
+    }
+  }
 
-      function prevStep() {
-        if (currentTab.value > 1) {
-          currentTab.value -= 1;
-        }
-      }
+  function prevStep() {
+    if (currentTab.value > 1) {
+      currentTab.value -= 1;
+    }
+  }
 
-      function finish() {
-        currentTab.value = 1;
-      }
-
-      return {
-        currentTab,
-        currentStatus,
-        nextStep,
-        prevStep,
-        finish,
-      };
-    },
-  });
+  function finish() {
+    currentTab.value = 1;
+  }
 </script>
 
 <style lang="less" scoped>