添加用户

src/api/org.js

@@ -14,3 +14,8 @@ export function setUserToOrgManager(data) {
 export function setOrgUserStop(data) {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=user_manager-StopUser`, data);
 }
+
+// 新增用户
+export function createUser(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=user_manager-AddUser`, data);
+}

src/views/user_manage_org/AddPerson.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="user-manage-add">
+    <el-form ref="form" id="query-form" label-width="80px" :rules="rules" :model="dataInfo">
+      <el-form-item prop="user_name" label="用户名">
+        <el-input v-model="dataInfo.user_name"></el-input>
+      </el-form-item>
+      <el-form-item prop="real_name" label="真实姓名">
+        <el-input v-model="dataInfo.real_name"></el-input>
+      </el-form-item>
+      <el-form-item prop="email" label="邮箱">
+        <el-input v-model="dataInfo.email"></el-input>
+      </el-form-item>
+
+      <el-form-item prop="phone" label="手机号">
+        <el-input v-model="dataInfo.phone"></el-input>
+      </el-form-item>
+      <el-form-item prop="password" label="密码">
+        <el-input
+          v-model="dataInfo.password"
+          :type="parsswordType"
+          @change="changeParssword"
+          @input="trimInput('password')"
+          maxlength="12"
+        />
+        <img
+          v-show="parsswordType == 'password'"
+          @click="lookParssowrd(1)"
+          :class="['rightimg']"
+          src="@/assets/password1.png"
+          alt=""
+        />
+        <img
+          v-show="parsswordType == 'text'"
+          @click="lookParssowrd(1)"
+          :class="['rightimg']"
+          src="@/assets/password2.png"
+          alt=""
+        />
+        <p :class="passwordError ? 'textRed' : 'psswordHint'">请输入8-12位大写字母、小写字母和数字组合。</p>
+      </el-form-item>
+      <el-form-item prop="confirmPwd" label="重复密码">
+        <el-input
+          v-model="dataInfo.confirmPwd"
+          :type="twoPasswordType"
+          @change="Changetowpassword"
+          @input="trimInput('confirmPwd')"
+          maxlength="12"
+        />
+        <img
+          v-show="twoPasswordType == 'password'"
+          @click="lookParssowrd(2)"
+          :class="['rightimg']"
+          src="@/assets/password1.png"
+          alt=""
+        />
+        <img
+          v-show="twoPasswordType == 'text'"
+          @click="lookParssowrd(2)"
+          :class="['rightimg']"
+          src="@/assets/password2.png"
+          alt=""
+        />
+        <p :class="passwordErrorTwo ? 'textRed' : 'psswordHint'">请再次输入密码。这两项必须相同。</p>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleCancle">取 消</el-button>
+        <el-button :loading="loading" type="primary" @click="submitOrg">确 定</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { createUser } from '@/api/org.js';
+
+export default {
+  name: 'UserAddPerson',
+  components: {},
+  data() {
+    return {
+      dataInfo: {
+        real_name: '',
+        user_name: '',
+        email: '',
+        phone: '',
+        password: '',
+        confirmPwd: '',
+      },
+      loading: false,
+      passwordError: false,
+      passwordErrorTwo: false,
+      parsswordType: 'password',
+      twoPasswordType: 'password',
+      rules: {
+        user_name: [
+          {
+            required: true,
+            message: '请输入用户名',
+            trigger: 'blur',
+          },
+        ],
+        real_name: [
+          {
+            required: true,
+            message: '请输入真实姓名',
+            trigger: 'blur',
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: '请输入密码',
+            trigger: 'blur',
+          },
+        ],
+        confirmPwd: [
+          {
+            required: true,
+            message: '请输入重复密码',
+            trigger: 'blur',
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    trimInput(key) {
+      this.dataInfo[key] = this.dataInfo[key].trim();
+    },
+    // 查看密码
+    lookParssowrd(number) {
+      if (number == 1) {
+        if (this.parsswordType == 'text') {
+          this.parsswordType = 'password';
+        } else {
+          this.parsswordType = 'text';
+        }
+      } else {
+        if (this.twoPasswordType == 'text') {
+          this.twoPasswordType = 'password';
+        } else {
+          this.twoPasswordType = 'text';
+        }
+      }
+    },
+    // 验证密码
+    changeParssword() {
+      if (this.dataInfo.password) {
+        //let reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,12}$/;
+        let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{8,12}$/;
+        let result = reg.test(this.dataInfo.password);
+        if (result) {
+          this.passwordError = false;
+        } else {
+          this.passwordError = true;
+        }
+      }
+    },
+    // 验证第二次密码是否一样
+    Changetowpassword() {
+      if (this.dataInfo.confirmPwd) {
+        if (this.dataInfo.confirmPwd !== this.dataInfo.password) {
+          this.passwordErrorTwo = true;
+          return;
+        } else {
+          this.passwordErrorTwo = false;
+        }
+      }
+    },
+    handleCancle() {
+      this.$emit('handleCancle');
+    },
+    submitOrg() {
+      this.loading = true;
+      let _this = this;
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          if (_this.dataInfo.confirmPwd !== _this.dataInfo.password) {
+            //Key544
+            _this.loading = false;
+            _this.$message.warning('两次密码不一致');
+            return;
+          }
+          createUser(_this.dataInfo)
+            .then((res) => {
+              if (res.status === 1) {
+                _this.loading = false;
+                _this.$emit('handleCancle');
+                _this.$emit('queryList');
+                _this.$message({
+                  type: 'success',
+                  message: '添加成功!',
+                });
+                this.dataInfo = {
+                  real_name: '',
+                  user_name: '',
+                  email: '',
+                  phone: '',
+                  password: '',
+                  confirmPwd: '',
+                };
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        } else {
+          this.loading = false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.rightimg {
+  position: absolute;
+  top: 6px;
+  right: 10px;
+  width: 20px;
+  cursor: pointer;
+
+  &.posLeft {
+    right: auto;
+    left: 10px;
+  }
+}
+
+.psswordHint {
+  width: 334px;
+  padding: 0;
+  margin: 0;
+  margin-top: 5px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #000;
+  opacity: 0.3;
+}
+
+.textRed {
+  width: 334px;
+  padding: 0;
+  margin: 0;
+  margin-top: 5px;
+  font-size: 14px;
+  line-height: 20px;
+  color: red;
+  opacity: 1;
+}
+</style>

src/views/user_manage_org/index.vue

@@ -3,10 +3,10 @@
     <div class="user-manage-list">
       <div class="btn-box">
         <span class="org-name">{{ token.org_name }} &nbsp;|</span>
-        <el-button class="add-btn" type="primary" size="small" icon="el-icon-plus" @click="updateOrg('')"
+        <el-button class="add-btn" type="primary" size="small" icon="el-icon-plus" @click="updateOrg"
           >添加用户</el-button
         >
-        <el-button class="add-btn" type="primary" size="small" @click="updateOrg('')">批量导入用户</el-button>
+        <el-button class="add-btn" type="primary" size="small" @click="updateOrg">批量导入用户</el-button>
       </div>
       <el-form inline id="query-form">
         <el-form-item prop="real_name" label="真实姓名">
@@ -96,27 +96,8 @@
 
       <PaginationPage ref="pagination" :total="total" @getList="queryOrgList" />
     </div>
-    <el-dialog
-      :visible.sync="orgAddFlag"
-      width="300px"
-      append-to-body
-      :show-close="true"
-      :title="org_Info.name ? '编辑机构' : '创建机构'"
-    >
-      <el-form ref="formDialog" :model="org_Info" :rules="rules" inline>
-        <el-form-item class="label-input" label="名称" prop="name">
-          <el-input
-            v-model="org_Info.name"
-            autocomplete="off"
-            name="name"
-            @blur="org_Info.name = org_Info.name.trim()"
-          />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="orgAddFlag = false">取 消</el-button>
-        <el-button :loading="loading" type="primary" @click="submitOrg">确 定</el-button>
-      </div>
+    <el-dialog :visible.sync="orgAddFlag" width="500px" append-to-body :show-close="true" title="添加用户">
+      <add-person @handleCancle="handleCancle" @queryList="queryList"></add-person>
     </el-dialog>
   </div>
 </template>
@@ -125,22 +106,21 @@
 import PaginationPage from '@/components/PaginationPage.vue';
 
 import { queryOrgUserList } from '@/api/list.js';
-import { createOrg, setOrgUserStop } from '@/api/org.js';
+import { setOrgUserStop } from '@/api/org.js';
 import { getToken } from '@/utils/auth';
+import AddPerson from './AddPerson.vue';
 
 export default {
   name: 'UserManageOrg',
   components: {
     PaginationPage,
+    AddPerson,
   },
   data() {
     const token = getToken();
     return {
       list: [],
       total: 0,
-      org_Info: {
-        name: '',
-      },
       orgAddFlag: false,
       rules: {
         name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
@@ -219,20 +199,14 @@ export default {
       });
     },
     /**
-     * 修改机构
+     * 添加用户
      * @param {string} id - 项目ID
      */
-    updateOrg(row) {
-      if (row) {
-        this.org_Info = {
-          name: row.name,
-        };
-      } else {
-        this.org_Info = {
-          name: '',
-        };
-      }
-      // this.orgAddFlag = true;
+    updateOrg() {
+      this.orgAddFlag = true;
+    },
+    handleCancle() {
+      this.orgAddFlag = false;
     },
     setPower(row) {},
     setOrgUserStop(row) {
@@ -250,28 +224,6 @@ export default {
         }
       });
     },
-    submitOrg() {
-      const _this = this;
-      _this.$refs.formDialog.validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          createOrg(_this.org_Info)
-            .then((res) => {
-              if (res.status === 1) {
-                this.loading = false;
-                _this.queryOrgList({ cur_page: _this.form.cur_page, page_capacity: _this.form.page_capacity });
-                _this.$message({
-                  type: 'success',
-                  message: '创建成功!',
-                });
-              }
-            })
-            .catch(() => {
-              this.loading = false;
-            });
-        }
-      });
-    },
     queryList() {
       this.queryOrgList({ cur_page: 1, page_capacity: this.form.page_capacity });
     },