学员添加和编辑

src/index.less

@@ -232,8 +232,9 @@ code {
 }
 
 .form-avatar {
-  width: 100px;
-  height: 100px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
 }
 
 .form-course-thumb {

src/pages/member/compenents/create.tsx

@@ -3,6 +3,7 @@ import { Modal, Form, Cascader, Input, message } from "antd";
 import styles from "./create.module.less";
 import { user, department } from "../../../api/index";
 import { UploadImageButton } from "../../../compenents";
+import { ValidataCredentials, getHost } from "../../../utils/index";
 
 interface PropInterface {
   open: boolean;
@@ -19,7 +20,7 @@ export const MemberCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState<boolean>(true);
   const [departments, setDepartments] = useState<any>([]);
-  const [avatar, setAvatar] = useState<string>("");
+  const [avatar, setAvatar] = useState<string>(getHost() + "avatar/avatar.png");
 
   useEffect(() => {
     getParams();
@@ -30,11 +31,11 @@ export const MemberCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
       email: "",
       name: "",
       password: "",
-      avatar: "",
+      avatar: getHost() + "avatar/avatar.png",
       idCard: "",
       dep_ids: [],
     });
-    setAvatar("");
+    setAvatar(getHost() + "avatar/avatar.png");
   }, [form, open]);
 
   const getParams = () => {
@@ -68,6 +69,10 @@ export const MemberCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
   };
 
   const onFinish = (values: any) => {
+    if (!ValidataCredentials(values.idCard)) {
+      message.error("请输入正确的身份证号！");
+      return;
+    }
     const arr = [];
     for (let i = 0; i < values.dep_ids.length; i++) {
       arr.push(values.dep_ids[i][values.dep_ids[i].length - 1]);
@@ -100,16 +105,16 @@ export const MemberCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
         centered
         forceRender
         open={open}
-        width={416}
+        width={484}
         onOk={() => form.submit()}
         onCancel={() => onCancel()}
         maskClosable={false}
       >
-        <div className="float-left mt-24">
+        <div className="member-form float-left mt-24">
           <Form
             form={form}
             name="create-basic"
-            labelCol={{ span: 8 }}
+            labelCol={{ span: 7 }}
             wrapperCol={{ span: 16 }}
             initialValues={{ remember: true }}
             onFinish={onFinish}
@@ -117,18 +122,15 @@ export const MemberCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
             autoComplete="off"
           >
             <Form.Item
-              label="姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入姓名!" }]}
-            >
-              <Input style={{ width: 200 }} placeholder="请输入姓名" />
-            </Form.Item>
-            <Form.Item
-              label="头像"
+              label="学员头像"
+              labelCol={{ style: { marginTop: 15, marginLeft: 46 } }}
               name="avatar"
-              rules={[{ required: true, message: "请上传头像!" }]}
+              rules={[{ required: true, message: "请上传学员头像!" }]}
             >
-              <div className="c-flex">
+              <div className="d-flex">
+                {avatar && (
+                  <img className="form-avatar mr-16" src={avatar} alt="" />
+                )}
                 <div className="d-flex">
                   <UploadImageButton
                     onSelected={(url) => {
@@ -137,45 +139,49 @@ export const MemberCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
                     }}
                   ></UploadImageButton>
                 </div>
-                {avatar && (
-                  <img className="form-avatar mt-10" src={avatar} alt="" />
-                )}
               </div>
             </Form.Item>
+            <Form.Item
+              label="学员姓名"
+              name="name"
+              rules={[{ required: true, message: "请输入学员姓名!" }]}
+            >
+              <Input style={{ width: 274 }} placeholder="请填写学员姓名" />
+            </Form.Item>
+            <Form.Item
+              label="登录邮箱"
+              name="email"
+              rules={[{ required: true, message: "请输入登录邮箱!" }]}
+            >
+              <Input style={{ width: 274 }} placeholder="请输入学员登录邮箱" />
+            </Form.Item>
             <Form.Item
               label="登录密码"
               name="password"
               rules={[{ required: true, message: "请输入登录密码!" }]}
             >
               <Input.Password
-                style={{ width: 200 }}
+                style={{ width: 274 }}
                 placeholder="请输入登录密码"
               />
             </Form.Item>
             <Form.Item
-              label="邮箱"
-              name="email"
-              rules={[{ required: true, message: "请输入邮箱!" }]}
-            >
-              <Input style={{ width: 200 }} placeholder="请输入邮箱" />
-            </Form.Item>
-            <Form.Item label="身份证号" name="idCard">
-              <Input style={{ width: 200 }} placeholder="请输入身份证号" />
-            </Form.Item>
-            <Form.Item
-              label="部门"
+              label="所属部门"
               name="dep_ids"
-              rules={[{ required: true, message: "请选择部门!" }]}
+              rules={[{ required: true, message: "请选择学员所属部门!" }]}
             >
               <Cascader
-                style={{ width: 200 }}
+                style={{ width: 274 }}
                 options={departments}
                 onChange={onChange}
                 multiple
                 maxTagCount="responsive"
-                placeholder="请选择部门"
+                placeholder="请选择学员所属部门"
               />
             </Form.Item>
+            <Form.Item label="身份证号" name="idCard">
+              <Input style={{ width: 274 }} placeholder="请填写学员身份证号" />
+            </Form.Item>
           </Form>
         </div>
       </Modal>

src/pages/member/compenents/update.tsx

@@ -3,6 +3,7 @@ import { Modal, Form, Cascader, Input, message } from "antd";
 import styles from "./create.module.less";
 import { user, department } from "../../../api/index";
 import { UploadImageButton } from "../../../compenents";
+import { ValidataCredentials, getHost } from "../../../utils/index";
 
 interface PropInterface {
   id: number;
@@ -24,7 +25,7 @@ export const MemberUpdate: React.FC<PropInterface> = ({
   const [form] = Form.useForm();
   const [loading, setLoading] = useState<boolean>(true);
   const [departments, setDepartments] = useState<any>([]);
-  const [avatar, setAvatar] = useState<string>("");
+  const [avatar, setAvatar] = useState<string>(getHost() + "avatar/avatar.png");
 
   useEffect(() => {
     getParams();
@@ -117,6 +118,10 @@ export const MemberUpdate: React.FC<PropInterface> = ({
   };
 
   const onFinish = (values: any) => {
+    if (!ValidataCredentials(values.idCard)) {
+      message.error("请输入正确的身份证号！");
+      return;
+    }
     const arr = [];
     for (let i = 0; i < values.dep_ids.length; i++) {
       if (Array.isArray(values.dep_ids[i])) {
@@ -154,7 +159,7 @@ export const MemberUpdate: React.FC<PropInterface> = ({
         centered
         forceRender
         open={open}
-        width={416}
+        width={484}
         onOk={() => form.submit()}
         onCancel={() => onCancel()}
         maskClosable={false}
@@ -171,18 +176,15 @@ export const MemberUpdate: React.FC<PropInterface> = ({
             autoComplete="off"
           >
             <Form.Item
-              label="姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入姓名!" }]}
-            >
-              <Input style={{ width: 200 }} placeholder="请输入姓名" />
-            </Form.Item>
-            <Form.Item
-              label="头像"
+              label="学员头像"
+              labelCol={{ style: { marginTop: 15, marginLeft: 46 } }}
               name="avatar"
-              rules={[{ required: true, message: "请上传头像!" }]}
+              rules={[{ required: true, message: "请上传学员头像!" }]}
             >
-              <div className="c-flex">
+              <div className="d-flex">
+                {avatar && (
+                  <img className="form-avatar mr-16" src={avatar} alt="" />
+                )}
                 <div className="d-flex">
                   <UploadImageButton
                     onSelected={(url) => {
@@ -191,41 +193,45 @@ export const MemberUpdate: React.FC<PropInterface> = ({
                     }}
                   ></UploadImageButton>
                 </div>
-                {avatar && (
-                  <img className="form-avatar mt-10" src={avatar} alt="" />
-                )}
               </div>
             </Form.Item>
+            <Form.Item
+              label="学员姓名"
+              name="name"
+              rules={[{ required: true, message: "请输入学员姓名!" }]}
+            >
+              <Input style={{ width: 274 }} placeholder="请填写学员姓名" />
+            </Form.Item>
+            <Form.Item
+              label="登录邮箱"
+              name="email"
+              rules={[{ required: true, message: "请输入登录邮箱!" }]}
+            >
+              <Input style={{ width: 274 }} placeholder="请输入学员登录邮箱" />
+            </Form.Item>
             <Form.Item label="登录密码" name="password">
               <Input.Password
-                style={{ width: 200 }}
+                style={{ width: 274 }}
                 placeholder="请输入登录密码"
               />
             </Form.Item>
             <Form.Item
-              label="邮箱"
-              name="email"
-              rules={[{ required: true, message: "请输入邮箱!" }]}
-            >
-              <Input style={{ width: 200 }} placeholder="请输入邮箱" />
-            </Form.Item>
-            <Form.Item label="身份证号" name="idCard">
-              <Input style={{ width: 200 }} placeholder="请输入身份证号" />
-            </Form.Item>
-            <Form.Item
-              label="部门"
+              label="所属部门"
               name="dep_ids"
-              rules={[{ required: true, message: "请选择部门!" }]}
+              rules={[{ required: true, message: "请选择学员所属部门!" }]}
             >
               <Cascader
-                style={{ width: 200 }}
+                style={{ width: 274 }}
                 options={departments}
                 onChange={onChange}
                 multiple
                 maxTagCount="responsive"
-                placeholder="请选择部门"
+                placeholder="请选择学员所属部门"
               />
             </Form.Item>
+            <Form.Item label="身份证号" name="idCard">
+              <Input style={{ width: 274 }} placeholder="请填写学员身份证号" />
+            </Form.Item>
           </Form>
         </div>
       </Modal>

src/utils/index.ts

@@ -87,3 +87,53 @@ export function inStrArray(array: string[], value: string): boolean {
   }
   return false;
 }
+
+export function ValidataCredentials(value: any) {
+  let regIdCard =
+    /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
+  if (regIdCard.test(value)) {
+    if (value.length == 18) {
+      var idCardWi = new Array(
+        7,
+        9,
+        10,
+        5,
+        8,
+        4,
+        2,
+        1,
+        6,
+        3,
+        7,
+        9,
+        10,
+        5,
+        8,
+        4,
+        2
+      ); //将前17位加权因子保存在数组里
+      var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
+      var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
+      for (var i = 0; i < 17; i++) {
+        idCardWiSum += value.substring(i, i + 1) * idCardWi[i];
+      }
+      var idCardMod = idCardWiSum % 11; //计算出校验码所在数组的位置
+      var idCardLast = value.substring(17); //得到最后一位身份证号码
+      //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
+      if (idCardMod == 2) {
+        if (idCardLast == "X" || idCardLast == "x") {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
+        if (idCardLast == idCardY[idCardMod]) {
+          return true;
+        } else {
+          return false;
+        }
+      }
+    }
+  }
+}