refactor: 表单校验

.vscode/extra.code-snippets

@@ -46,5 +46,11 @@
         "prefix": "trycatch",
         "body": ["try {", "\t$0", "} catch (e) {", "\tconsole.info('取消$1', e);", "}"],
         "description": "TryCatch代码块"
+    },
+    "proxy": {
+        "scope": "javascript,typescript",
+        "prefix": "proxy",
+        "body": ["const { proxy } = getCurrentInstance();"],
+        "description": "proxy对象"
     }
 }

src/plugins/global-api.js

@@ -95,10 +95,30 @@ export const name = (nickname, realname) => {
     return realname ? `${nickname}（${realname}）` : nickname;
 };
 
+/**
+ * 表单校验
+ * @param {*} refsForm 表单组件
+ */
+export const validate = (refsForm) => {
+    return new Promise((resolve, reject) => {
+        (async () => {
+            try {
+                await unref(refsForm).validate();
+                resolve();
+            } catch (e) {
+                console.info('校验失败', e);
+                unref(refsForm).scrollToField(Object.keys(e)[0]);
+                reject(e);
+            }
+        })();
+    });
+};
+
 export default (app) => {
     app.config.globalProperties.$copy = copy;
     app.config.globalProperties.$download = download;
     app.config.globalProperties.$excel = excel;
     app.config.globalProperties.$dict = dict;
     app.config.globalProperties.$name = name;
+    app.config.globalProperties.$validate = validate;
 };

src/views/global/login.vue

@@ -42,7 +42,7 @@
 <script setup>
     import config from '@/configs';
 
-    // const { proxy } = getCurrentInstance();
+    const { proxy } = getCurrentInstance();
     const store = useStore();
 
     const refsForm = ref(null);
@@ -82,7 +82,7 @@
     const handleLogin = async () => {
         submitting.value = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             await store.dispatch('auth/login', form);
         } catch (e) {
             console.info('取消登录', e);

src/views/operation/limit/index.vue

@@ -112,7 +112,7 @@
     const handleSave = async () => {
         formState.submitting = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             let data = _.cloneDeep(formState.form);
             data.activityStartTime = data.time[0];
             data.activityEndTime = data.time[1];

src/views/sales/category/form.vue

@@ -85,7 +85,7 @@
     const handleSave = async () => {
         submitting.value = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             let data = { ...unref(form) };
             data.parentId = data.parentId ?? 0;
             let res = await store.dispatch('category/save', data);

src/views/sales/category/index.vue

@@ -45,6 +45,7 @@
     import TableList from '@/components/TableList.vue';
     const router = useRouter();
     const store = useStore();
+    const { proxy } = getCurrentInstance();
     const loading = ref(false);
     const refsTable = ref(null);
     const code = computed(() => store.state.category.code);
@@ -129,7 +130,7 @@
     const handleSave = async () => {
         formState.submitting = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             let data = _.cloneDeep(formState.form);
             await store.dispatch('category/transform', data);
             formState.formVisible = false;

src/views/sales/order/address.vue

@@ -23,7 +23,7 @@
 
 <script setup lang="jsx">
     const store = useStore();
-
+    const { proxy } = getCurrentInstance();
     const refsForm = ref(null);
     const state = reactive({
         submitting: false,
@@ -67,7 +67,7 @@
     const handleSave = async () => {
         state.submitting = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             let res = await store.dispatch('order/address', state.form);
             if (res) {
                 Object.assign(state.order, state.form);

src/views/sales/order/cancel.vue

@@ -33,7 +33,7 @@
 
 <script setup lang="jsx">
     const store = useStore();
-
+    const { proxy } = getCurrentInstance();
     const refsForm = ref(null);
     const state = reactive({
         submitting: false,
@@ -71,7 +71,7 @@
     const handleSave = async () => {
         state.submitting = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             let res = await store.dispatch('order/cancel', state.form);
             if (res) {
                 state.visible = false;

src/views/sales/order/close.vue

@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
     const store = useStore();
-
+    const { proxy } = getCurrentInstance();
     const refsForm = ref(null);
     const state = reactive({
         submitting: false,
@@ -43,7 +43,7 @@
     const handleSave = async () => {
         state.submitting = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             let res = await store.dispatch('order/close', state.form);
             if (res) {
                 state.visible = false;

src/views/sales/order/fees.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="jsx">
     const store = useStore();
-
+    const { proxy } = getCurrentInstance();
     const refsForm = ref(null);
     const state = reactive({
         submitting: false,
@@ -52,7 +52,7 @@
     const handleSave = async () => {
         state.submitting = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             let res = await store.dispatch('order/fees', state.form);
             if (res) {
                 Object.assign(state.order, state.form);

src/views/sales/product/form/step1.vue

@@ -54,6 +54,7 @@
             const route = useRoute();
             const router = useRouter();
             const store = useStore();
+            const { proxy } = getCurrentInstance();
 
             const state = reactive({
                 loading: false,
@@ -111,7 +112,7 @@
             const handleSave = async () => {
                 state.loading = true;
                 try {
-                    await state.refsForm.validate();
+                    await proxy.$validate(state.refsForm);
                     let data = _.cloneDeep(state.form);
                     data.mainPicture = data.pictureList[0];
                     state.form.id = await store.dispatch('product/save', state.form);

src/views/sales/product/picker.vue

@@ -34,6 +34,7 @@
 </template>
 
 <script setup lang="jsx">
+    import ElImage from '@/components/extra/ElImage.vue';
     const emits = defineEmits(['pick']);
     const store = useStore();
     const loading = ref(false);

src/views/sales/service/detail.vue

@@ -256,6 +256,7 @@
 <script setup lang="jsx">
     const store = useStore();
     const route = useRoute();
+    const { proxy } = getCurrentInstance();
     const opts = computed(() => store.state.service.opts);
     if (!unref(opts).init) {
         store.dispatch('service/load');
@@ -393,7 +394,7 @@
         state.loading = true;
         state.form.reject = false;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             await store.dispatch(
                 state.detail.refundType === 1 ? 'service/resolveRefund' : 'service/resolveReturn',
                 state.form
@@ -409,7 +410,7 @@
         state.loading = true;
         state.form.reject = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             await store.dispatch(
                 state.detail.refundType === 1 ? 'service/rejectRefund' : 'service/rejectReturn',
                 state.form
@@ -425,7 +426,7 @@
         state.loading = true;
         state.form.reject = false;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             await store.dispatch('service/resolveReceive', state.form);
             handleLoad();
         } catch (e) {
@@ -438,7 +439,7 @@
         state.loading = true;
         state.form.reject = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             await store.dispatch('service/rejectReceive', state.form);
             handleLoad();
         } catch (e) {

src/views/system/employee/form.vue

@@ -63,6 +63,7 @@
     const rules = reactive({
         userName: [{ required: true, message: '用户名不能为空' }],
         phone: [{ required: true, message: '手机号码不能为空' }],
+        email: [{ required: true, message: '邮箱地址不能为空' }],
         employeeName: [{ required: true, message: '员工姓名不能为空' }],
         employeeType: [{ required: true, message: '员工类型不能为空' }],
     });
@@ -85,7 +86,7 @@
     const handleSave = async () => {
         submitting.value = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             let data = { ...unref(form) };
             data.voucherClueUrls = data.voucherClueUrls || [];
             data.voucherClueUrl = data.voucherClueUrls.join(',');

src/views/system/notify/index.vue

@@ -55,6 +55,7 @@
 <script setup lang="jsx">
     import ElButton from '@/components/extra/ElButton.vue';
     const store = useStore();
+    const { proxy } = getCurrentInstance();
     const loading = ref(false);
     const code = computed(() => store.state.notify.code);
     const list = computed(() => store.state.notify.list);
@@ -120,7 +121,7 @@
     const handleSave = async () => {
         formState.submitting = true;
         try {
-            await unref(refsForm).validate();
+            await proxy.$validate(refsForm);
             let data = _.cloneDeep(formState.form);
             await store.dispatch('notify/save', data);
             formState.formVisible = false;

vite.config.js

@@ -23,9 +23,9 @@ export default (configEnv) => {
                     // target: 'http://192.168.10.109:8090/', // 显雨
                     // target: 'http://192.168.10.251:8090', // 高玉
                     // target: 'http://192.168.10.67:8090', // 罗战
-                    target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址
+                    // target: 'https://k8s-horse-gateway.mashibing.cn/', // 测试地址
                     // target: 'https://gateway.mashibing.cn', // 预发地址
-                    // target: 'https://like-gateway.mashibing.com', // 生产环境
+                    target: 'https://like-gateway.mashibing.com', // 生产环境
                     changeOrigin: true,
                     rewrite: (path) => path.replace(/^\/api/, ''),
                 },