feat: param verification

2022-12-10 22:57:58 +08:00
parent 1b14760990
commit b16d31189f
11 changed files with 309 additions and 238 deletions
@@ -33,7 +33,7 @@
        <a-modal v-model:visible="visible" :title="title" @ok="onSave" @cancel="onCancel" cancelText="取消" okText="保存"
            width="800px" style="top: 80px">
            <div style="height: 55vh;overflow-y: scroll;padding: 0 15px;">
-                <a-form ref="modalFormRef" :model="contract" layout="vertical" name="contract">
+                <a-form ref="contractFormRef" :model="contract" layout="vertical" name="contract" :rules="rules">
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-item label="合同编号" name="id">
@@ -41,21 +41,21 @@
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
-                            <a-form-item label="合同名称" name="name" :rules="[{ required: true, message: '请输入合同名称' }]">
+                            <a-form-item label="合同名称" name="name">
                                <a-input v-model:value="contract.name" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :span="12">
-                            <a-form-item label="客户名称" name="cid" :rules="[{ required: true, message: '请选择客户' }]">
+                            <a-form-item label="客户名称" name="cid">
                                <a-select v-model:value="contract.cid" style="width: 100%" placeholder="请选择"
                                    :fieldNames="{ label: 'name', value: 'id' }" :options="data.customerOption"
                                    @focus="getCustomerOption" @change="changeCustomerOption"></a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
-                            <a-form-item label="合同金额" name="amount" :rules="[{ required: true, message: '请输入合同金额' }]">
+                            <a-form-item label="合同金额" name="amount">
                                <a-input-number v-model:value="contract.amount" style="width: 100%" />
                            </a-form-item>
                        </a-col>
@@ -76,7 +76,7 @@
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :span="12">
-                            <a-form-item label="合同状态" name="status" :rules="[{ required: true, message: '请选择合同状态' }]">
+                            <a-form-item label="合同状态" name="status">
                                <a-select v-model:value="contract.status" placeholder="请选择">
                                    <a-select-option :value="1">已生效</a-select-option>
                                    <a-select-option :value="2">未生效</a-select-option>
@@ -321,6 +321,14 @@ export default {
            width: 150,
        }];

+        // 表单校验
+        const rules = {
+            name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
+            cid: [{ required: true, message: '请选择客户', trigger: 'blur' }],
+            amount: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
+            status: [{ required: true, message: '请选择合同状态' }]
+        };
+
        // 合同属性
        let contract = reactive({
            id: undefined,
@@ -358,21 +366,20 @@ export default {
        const visible = ref(false);
        const disabled = ref(true)
        const operation = ref(0);
-        const modalFormRef = ref();
+        const contractFormRef = ref();
        const keyWord = ref('')
        const productListVisible = ref(false);

        // 点击新建合同
        const onCreate = () => {
            title.value = '新建合同'
-            visible.value = true
            operation.value = 1
+            visible.value = true
        }

        // 点击编辑合同
        const onEdit = (row) => {
            title.value = '编辑合同'
-            visible.value = true
            operation.value = 2
            getCustomerOption()
            let param = { id: row.id }
@@ -389,18 +396,14 @@ export default {
                    contract.status = p.status
                    contract.productlist = p.productlist
                    data.addedProductList = p.productlist
-                    if (data.addedProductList.length > 0) {
-                        for (let i = 0; i < data.addedProductList.length; i++) {
-                            data.defaultSelectedIds.push(data.addedProductList[i].id)
-                        }
-                    }
                }
            })
+            visible.value = true
        }

        // 点击保存合同
        const onSave = () => {
-            modalFormRef.value.validateFields().then(() => {
+            contractFormRef.value.validateFields().then(() => {
                if (operation.value == 1) {
                    let param = {
                        name: contract.name,
@@ -440,7 +443,7 @@ export default {
                        }
                    })
                }
-                modalFormRef.value.resetFields()
+                contractFormRef.value.resetFields()
                visible.value = false;
            });
        };
@@ -501,7 +504,6 @@ export default {

        // 点击添加产品
        const onAddProduct = () => {
-            productListVisible.value = true
            let param = {
                pageNum: pagination.current,
                pageSize: pagination.pageSize
@@ -512,6 +514,13 @@ export default {
                    data.productList = res.data.data.list
                }
            })
+            data.defaultSelectedIds = []
+            if (data.addedProductList.length > 0) {
+                for (let i = 0; i < data.addedProductList.length; i++) {
+                    data.defaultSelectedIds[i] = data.addedProductList[i].id
+                }
+            }
+            productListVisible.value = true
        }

        // 分页查询产品列表
@@ -595,7 +604,8 @@ export default {

        // 点击合同取消按钮
        const onCancel = () => {
-            modalFormRef.value.resetFields()
+            contractFormRef.value.resetFields()
+            data.addedProductList = []
            visible.value = false
        };

@@ -610,6 +620,7 @@ export default {
            columns,
            productColumns,
            productListColumns,
+            rules,
            data,
            onSelectedConteactIds,
            onSelectedProductIds,
@@ -622,7 +633,7 @@ export default {
            operation,
            onCreate,
            onEdit,
-            modalFormRef,
+            contractFormRef,
            onSave,
            onCancel,
            onDelete,
@@ -34,10 +34,10 @@
        <a-modal v-model:visible="visible" :title="title" @ok="onSave" @cancel="onCancel" cancelText="取消" okText="保存"
            width="800px" style="top: 80px;">
            <div style="height: 55vh;overflow-y: scroll;padding: 0 15px;">
-                <a-form ref="modalFormRef" :model="customer" layout="vertical" name="customer">
+                <a-form ref="customerFormRef" :model="customer" layout="vertical" name="customer" :rules="rules">
                    <a-row :gutter="16">
                        <a-col :span="12">
-                            <a-form-item label="客户名称" name="name" :rules="[{ required: true, message: '请输入客户名称' }]">
+                            <a-form-item label="客户名称" name="name">
                                <a-input v-model:value="customer.name" />
                            </a-form-item>
                        </a-col>
@@ -188,6 +188,21 @@ export default {
            }
        }];

+        // 表单校验
+        const rules = {
+            name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+            phone: [{
+                pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
+                message: '手机格式不正确',
+                trigger: 'blur',
+            }],
+            email: [{
+                pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
+                message: '邮箱格式不正确',
+                trigger: 'blur',
+            }],
+        };
+
        const data = reactive({
            customerList: [],
            selectedIds: []
@@ -240,20 +255,19 @@ export default {
        const visible = ref(false);
        const disabled = ref(true)
        const operation = ref(0);
-        const modalFormRef = ref();
+        const customerFormRef = ref();
        const keyWord = ref('')

        // 点击新建客户
        const onCreate = () => {
            title.value = '新建客户'
-            visible.value = true
            operation.value = 1
+            visible.value = true
        }

        // 点击客户名称
        const onEdit = (row) => {
            title.value = '编辑客户'
-            visible.value = true
            operation.value = 2
            let param = { id: row.id }
            queryCustomerInfo(param).then((res) => {
@@ -273,13 +287,15 @@ export default {
                    customer.status = p.status
                }
            })
+            visible.value = true
        }

        // 点击保存客户
        const onSave = () => {
-            console.log("zzz123")
-            modalFormRef.value.validateFields().then(() => {
-                customer.region = customer.region.toString()
+            customerFormRef.value.validateFields().then(() => {
+                if (customer.region !== undefined) {
+                    customer.region = customer.region.toString()
+                }
                if (operation.value == 1) {
                    createCustomer(customer).then((res) => {
                        if (res.data.code == 0) {
@@ -296,7 +312,7 @@ export default {
                        }
                    })
                }
-                modalFormRef.value.resetFields()
+                customerFormRef.value.resetFields()
                visible.value = false;
            });
        };
@@ -352,7 +368,7 @@ export default {

        // 点击取消按钮
        const onCancel = () => {
-            modalFormRef.value.resetFields()
+            customerFormRef.value.resetFields()
            visible.value = false
        };

@@ -365,6 +381,7 @@ export default {
        return {
            data,
            columns,
+            rules,
            onSearch,
            visible,
            disabled,
@@ -377,7 +394,7 @@ export default {
            onCustomers,
            onCreate,
            onEdit,
-            modalFormRef,
+            customerFormRef,
            onSave,
            onCancel,
            onDelete,
@@ -64,17 +64,17 @@
        <!-- 修改邮箱弹出框 -->
        <a-modal v-model:visible="visible" title="修改邮箱" @ok="onSave" @cancel="onCancel" cancelText="取消" okText="保存"
          width="450px" style="top: 120px">
-          <a-form :model="user" layout="vertical" @finish="onSubmit">
-            <a-form-item name="email" :rules="[{ required: true, message: '请输入邮箱!' }]">
+          <a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
+            <a-form-item name="email">
              <a-input v-model:value="user.email" size="large" placeholder="邮箱" disabled />
            </a-form-item>
-            <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
+            <a-form-item name="code">
              <a-input v-model:value="user.code" size="large" style="width: 55%;" placeholder="验证码" />
              <a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :loading="loading"
                :disabled="disabled">
                {{ buttonText }}</a-button>
            </a-form-item>
-            <a-form-item name="newEmail" :rules="[{ required: true, message: '请输入新邮箱!' }]">
+            <a-form-item name="newEmail">
              <a-input v-model:value="user.newEmail" size="large" placeholder="新邮箱" />
            </a-form-item>
          </a-form>
@@ -82,11 +82,11 @@
        <!-- 注销账号弹出框 -->
        <a-modal v-model:visible="delUserVisible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消"
          okText="注销" width="450px" style="top: 120px">
-          <a-form :model="user" layout="vertical" @finish="onSubmit">
-            <a-form-item name="email" :rules="[{ required: true, message: '请输入邮箱!' }]">
+          <a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
+            <a-form-item name="email">
              <a-input v-model:value="user.email" size="large" placeholder="邮箱" disabled />
            </a-form-item>
-            <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
+            <a-form-item name="code">
              <a-input v-model:value="user.code" size="large" style="width: 55%;" placeholder="验证码" />
              <a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :loading="loading"
                :disabled="disabled">
@@ -162,6 +162,29 @@ export default {
      name: "订阅"
    }])

+    // 表单校验
+    const rules = {
+      email: [{
+        required: true,
+        message: '请输入邮箱!',
+        trigger: 'blur',
+      }, {
+        pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
+        message: '邮箱格式不正确',
+        trigger: 'blur',
+      }],
+      code: [{ required: true, message: '请输入验证码!' }],
+      newEmail: [{
+        required: true,
+        message: '请输入邮箱!',
+        trigger: 'blur',
+      }, {
+        pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
+        message: '邮箱格式不正确',
+        trigger: 'blur',
+      }],
+    };
+
    const selectedKeys = ref(['dashboard'])
    const collapsed = ref(false)

@@ -283,6 +306,7 @@ export default {

    return {
      menuItem,
+      rules,
      selectedKeys,
      collapsed,
      user,
@@ -1,17 +1,18 @@
 <template>
-    <a-form :model="formData" layout="vertical" @finish="onSubmit">
-        <a-form-item name="email" :rules="[{ required: true, message: '请输入邮箱!' }]">
+    <a-form ref="passFormRef" :model="formData" layout="vertical" @finish="onSubmit" :rules="rules">
+        <a-form-item name="email">
            <a-input v-model:value="formData.email" size="large" placeholder="邮箱" />
        </a-form-item>
-        <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
+        <a-form-item name="code">
            <a-input v-model:value="formData.code" size="large" style="width: 55%;" placeholder="验证码" />
-            <a-button @click="onGetCode" size="large" :disabled="disabled" :loading="loading" style="width: 40%;float: right;">
+            <a-button @click="onGetCode" size="large" :disabled="disabled" :loading="loading"
+                style="width: 40%;float: right;">
                {{ buttonText }}</a-button>
        </a-form-item>
-        <a-form-item name="password1" :rules="[{ required: true, message: '请输入密码!' }]">
+        <a-form-item name="password1">
            <a-input-password v-model:value="formData.password1" size="large" placeholder="密码" />
        </a-form-item>
-        <a-form-item name="password2" :rules="[{ required: true, message: '请输入密码!' }]">
+        <a-form-item name="password2">
            <a-input-password v-model:value="formData.password2" size="large" placeholder="确认密码" />
        </a-form-item>
        <a-form-item>
@@ -39,24 +40,42 @@ export default {
            password2: '',
        });

+        // 表单校验
+        const rules = {
+            email: [{
+                required: true,
+                message: '请输入邮箱!'
+            }, {
+                pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
+                message: '邮箱格式不正确',
+                trigger: 'blur',
+            }],
+            code: [{ required: true, message: '请输入验证码!' }],
+            password1: [{ required: true, message: '请输入密码!' }],
+            password2: [{ required: true, message: '请输入密码!' }],
+        };
+
        const loading = ref(false)
        const disabled = ref(false)
+        const passFormRef = ref()
        const buttonText = ref('获取验证码')

        const onSubmit = () => {
-            let param = {
-                email: formData.email,
-                code: formData.code,
-                password: formData.password2,
-            }
-            userForgotPass(param).then((res) => {
-                if (res.data.code == 0) {
-                    message.success('密码已重置')
-                    router.push("/login")
-                }
-                if (res.data.code == 10005) {
-                    message.error('验证码错误');
+            passFormRef.value.validateFields().then(() => {
+                let param = {
+                    email: formData.email,
+                    code: formData.code,
+                    password: formData.password2,
                }
+                userForgotPass(param).then((res) => {
+                    if (res.data.code == 0) {
+                        message.success('密码已重置')
+                        router.push("/login")
+                    }
+                    if (res.data.code == 10005) {
+                        message.error('验证码错误');
+                    }
+                })
            })
        };

@@ -90,6 +109,8 @@ export default {

        return {
            formData,
+            rules,
+            passFormRef,
            loading,
            disabled,
            buttonText,
@@ -34,17 +34,15 @@
        <!-- 新建、编辑产品 -->
        <a-modal v-model:visible="visible" :title="title" @ok="onSave" @cancel="onCancel" cancelText="取消" okText="保存"
            width="800px" style="top: 80px">
-            <a-form ref="productForm" :model="product" layout="vertical" name="product">
+            <a-form ref="productFormRef" :model="product" layout="vertical" name="product" :rules="rules">
                <a-row :gutter="16">
                    <a-col :span="12">
-                        <a-form-item label="产品名称" name="name" :rules="[{ required: true, message: '请输入产品名称' }]">
+                        <a-form-item label="产品名称" name="name">
                            <a-input v-model:value="product.name" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
-                        <a-form-item label="产品类型" name="type" :rules="[{
-                            required: true, message: '请选择产品类型',
-                        }]">
+                        <a-form-item label="产品类型" name="type">
                            <a-select v-model:value="product.type" placeholder="请选择">
                                <a-select-option :value="1">默认</a-select-option>
                            </a-select>
@@ -67,19 +65,19 @@
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
-                        <a-form-item label="产品编码" name="code" :rules="[{ required: true, message: '请输入产品编码' }]">
+                        <a-form-item label="产品编码" name="code">
                            <a-input v-model:value="product.code" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="12">
-                        <a-form-item label="价格" name="price" :rules="[{ required: true, message: '请输入产品价格' }]">
+                        <a-form-item label="价格" name="price">
                            <a-input-number v-model:value="product.price" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
-                        <a-form-item label="是否上下架" name="status" :rules="[{ required: true, message: '请选择是否上下架' }]">
+                        <a-form-item label="是否上下架" name="status">
                            <a-select v-model:value="product.status" placeholder="请选择">
                                <a-select-option :value="1">上架</a-select-option>
                                <a-select-option :value="2">下架</a-select-option>
@@ -161,6 +159,15 @@ export default {
            }
        }];

+        // 表单校验
+        const rules = {
+            name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
+            type: [{ required: true, message: '请选择产品类型' }],
+            code: [{ pattern: /^\d+$/, message: '产品编码格式不正确', trigger: 'blur' }],
+            price: [{ required: true, message: '请输入产品价格' }],
+            status: [{ required: true, message: '请选择是否上下架' }]
+        };
+
        // 产品属性
        let product = reactive({
            id: undefined,
@@ -190,7 +197,7 @@ export default {
        const visible = ref(false);
        const disabled = ref(true)
        const operation = ref(0);
-        const productForm = ref();
+        const productFormRef = ref();
        const keyWord = ref('')

        // 初始化数据
@@ -218,14 +225,13 @@ export default {
        // 点击新建产品
        const onCreate = () => {
            title.value = '新建产品'
-            visible.value = true
            operation.value = 1
+            visible.value = true
        }

        // 点击产品名称
        const onEdit = (row) => {
            title.value = '编辑产品'
-            visible.value = true
            operation.value = 2
            let param = { id: row.id }
            queryProductInfo(param).then((res) => {
@@ -241,11 +247,12 @@ export default {
                    product.description = p.description
                }
            })
+            visible.value = true
        }

        // 点击保存产品
        const onSave = () => {
-            productForm.value.validateFields().then(() => {
+            productFormRef.value.validateFields().then(() => {
                if (operation.value == 1) {
                    createProduct(product).then((res) => {
                        if (res.data.code == 0) {
@@ -262,7 +269,7 @@ export default {
                        }
                    })
                }
-                productForm.value.resetFields()
+                productFormRef.value.resetFields()
                visible.value = false;
            });
        };
@@ -313,12 +320,13 @@ export default {

        // 点击取消按钮
        const onCancel = () => {
-            productForm.value.resetFields()
+            productFormRef.value.resetFields()
            visible.value = false
        };

        return {
            columns,
+            rules,
            data,
            onSelectChange,
            onSearch,
@@ -330,7 +338,7 @@ export default {
            onProducts,
            onCreate,
            onEdit,
-            productForm,
+            productFormRef,
            onSave,
            onCancel,
            onDelete,
@@ -1,18 +1,18 @@
 <template>
-    <a-form :model="formData" layout="vertical" @finish="onRegister">
-        <a-form-item name="email" :rules="[{ required: true, message: '请输入邮箱!' }]">
-            <a-input v-model:value="formData.email" size="large" placeholder="邮箱">
-            </a-input>
+    <a-form ref="registerFormRef" :model="formData" layout="vertical" @finish="onRegister" :rules="rules">
+        <a-form-item name="email">
+            <a-input v-model:value="formData.email" size="large" placeholder="邮箱" />
        </a-form-item>
-        <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码!' }]">
+        <a-form-item name="code">
            <a-input v-model:value="formData.code" size="large" style="width: 55%;" placeholder="验证码" />
-            <a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :loading="loading" :disabled="disabled">
+            <a-button @click="onGetCode" size="large" style="width: 40%;float: right;" :loading="loading"
+                :disabled="disabled">
                {{ buttonText }}</a-button>
        </a-form-item>
-        <a-form-item name="password1" :rules="[{ required: true, message: '请输入密码!' }]">
+        <a-form-item name="password1">
            <a-input-password v-model:value="formData.password1" size="large" placeholder="密码" />
        </a-form-item>
-        <a-form-item name="password2" :rules="[{ required: true, message: '请输入密码!' }]">
+        <a-form-item name="password2">
            <a-input-password v-model:value="formData.password2" size="large" placeholder="确认密码" />
        </a-form-item>
        <a-form-item>
@@ -40,31 +40,50 @@ export default {
            password2: '',
        });

+        // 表单校验
+        const rules = {
+            email: [{
+                required: true,
+                message: '请输入邮箱!',
+                trigger: 'blur',
+            }, {
+                pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
+                message: '邮箱格式不正确',
+                trigger: 'blur',
+            }],
+            code: [{ required: true, message: '请输入验证码!' }],
+            password1: [{ required: true, message: '请输入密码!' }],
+            password2: [{ required: true, message: '请输入密码!' }],
+        };
+
        const loading = ref(false)
        const disabled = ref(false)
+        const registerFormRef = ref()
        const buttonText = ref('获取验证码')

        const onRegister = () => {
-            if (formData.password1 != formData.password2) {
-                message.info('密码不一致');
-                return
-            }
-            let param = {
-                email: formData.email,
-                code: formData.code,
-                password: formData.password2,
-            }
-            userRegister(param).then((res) => {
-                if (res.data.code == 0) {
-                    message.success('注册成功');
-                    onLogin()
+            registerFormRef.value.validateFields().then(() => {
+                if (formData.password1 != formData.password2) {
+                    message.warn('密码不一致');
+                    return
                }
-                if (res.data.code == 10001) {
-                    message.warn('该用户已经存在');
-                }
-                if (res.data.code == 10005) {
-                    message.error('验证码错误');
+                let param = {
+                    email: formData.email,
+                    code: formData.code,
+                    password: formData.password2,
                }
+                userRegister(param).then((res) => {
+                    if (res.data.code == 0) {
+                        message.success('注册成功');
+                        onLogin()
+                    }
+                    if (res.data.code == 10001) {
+                        message.warn('该用户已经存在');
+                    }
+                    if (res.data.code == 10005) {
+                        message.error('验证码错误');
+                    }
+                })
            })
        };

@@ -98,6 +117,8 @@ export default {

        return {
            formData,
+            rules,
+            registerFormRef,
            loading,
            disabled,
            buttonText,