From b1d3aedaf0868a9f80a644bfcab01d2370cdb690 Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Tue, 27 Sep 2022 17:04:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=94=A8=E6=88=B7=E6=BC=8F?=
 =?UTF-8?q?=E6=B4=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/modules/sys/user-add-or-update.vue  | 346 +++++++++++-------
 1 file changed, 216 insertions(+), 130 deletions(-)

diff --git a/epmet-oper-web/src/views/modules/sys/user-add-or-update.vue b/epmet-oper-web/src/views/modules/sys/user-add-or-update.vue
index 4ae28a1..ef905b6 100644
--- a/epmet-oper-web/src/views/modules/sys/user-add-or-update.vue
+++ b/epmet-oper-web/src/views/modules/sys/user-add-or-update.vue
@@ -1,74 +1,91 @@
 <template>
-  <el-dialog :visible.sync="visible"
-             :title="!dataForm.id ? $t('add') : $t('update')"
-             :close-on-click-modal="false"
-             :close-on-press-escape="false">
-    <el-form :model="dataForm"
-             :rules="dataRule"
-             ref="dataForm"
-             @keyup.enter.native="dataFormSubmitHandle()"
-             label-width="120px">
-      <el-form-item prop="username"
-                    :label="$t('user.username')">
-        <el-input v-model="dataForm.realName"
-                  :placeholder="$t('user.username')"></el-input>
+  <el-dialog
+    :visible.sync="visible"
+    :title="!dataForm.id ? $t('add') : $t('update')"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      label-width="120px"
+    >
+      <el-form-item prop="realName" :label="$t('user.username')">
+        <el-input
+          v-model="dataForm.realName"
+          :placeholder="$t('user.username')"
+        ></el-input>
       </el-form-item>
       <!--      <el-form-item prop="deptName" :label="$t('user.deptName')">-->
       <!--        <ren-dept-tree v-model="dataForm.deptId" :placeholder="$t('dept.title')" :dept-name.sync="dataForm.deptName"></ren-dept-tree>-->
       <!--      </el-form-item>-->
-      <el-form-item v-if="!dataForm.id"
-                    prop="password"
-                    :label="$t('user.password')"
-                    :class="{ 'is-required': !dataForm.id }">
-        <el-input v-model="dataForm.password"
-                  type="password"
-                  :placeholder="$t('user.password')"></el-input>
+      <el-form-item
+        v-if="!dataForm.id"
+        prop="password"
+        :label="$t('user.password')"
+        :class="{ 'is-required': !dataForm.id }"
+      >
+        <el-input
+          v-model="dataForm.password"
+          type="password"
+          placeholder="密码必须8-20个字符，而且同时包含大小写字母和数字"
+        ></el-input>
       </el-form-item>
-      <el-form-item v-if="!dataForm.id"
-                    prop="confirmPassword"
-                    :label="$t('user.confirmPassword')"
-                    :class="{ 'is-required': !dataForm.id }">
-        <el-input v-model="dataForm.confirmPassword"
-                  type="password"
-                  :placeholder="$t('user.confirmPassword')"></el-input>
+      <el-form-item
+        v-if="!dataForm.id"
+        prop="confirmPassword"
+        :label="$t('user.confirmPassword')"
+        :class="{ 'is-required': !dataForm.id }"
+      >
+        <el-input
+          v-model="dataForm.confirmPassword"
+          type="password"
+          :placeholder="$t('user.confirmPassword')"
+        ></el-input>
       </el-form-item>
       <!--      <el-form-item prop="realName" :label="$t('user.realName')">-->
       <!--        <el-input v-model="dataForm.realName" :placeholder="$t('user.realName')"></el-input>-->
       <!--      </el-form-item>-->
-      <el-form-item prop="gender"
-                    :label="$t('user.gender')"
-                    size="mini">
+      <el-form-item prop="gender" :label="$t('user.gender')" size="mini">
         <el-radio-group v-model="dataForm.gender">
           <el-radio :label="0">{{ $t('user.gender0') }}</el-radio>
           <el-radio :label="1">{{ $t('user.gender1') }}</el-radio>
           <el-radio :label="2">{{ $t('user.gender2') }}</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item prop="email"
-                    :label="$t('user.email')">
-        <el-input v-model="dataForm.email"
-                  :placeholder="$t('user.email')"></el-input>
+      <el-form-item prop="email" :label="$t('user.email')">
+        <el-input
+          v-model="dataForm.email"
+          :placeholder="$t('user.email')"
+        ></el-input>
       </el-form-item>
-      <el-form-item prop="phone"
-                    :label="$t('user.mobile')">
-        <el-input v-model="dataForm.phone"
-                  :placeholder="$t('user.mobile')"></el-input>
+      <el-form-item prop="phone" :label="$t('user.mobile')">
+        <el-input
+          v-model="dataForm.phone"
+          :placeholder="$t('user.mobile')"
+        ></el-input>
       </el-form-item>
-      <el-form-item prop="roleIdList"
-                    :label="$t('user.roleIdList')"
-                    class="role-list">
-        <el-select v-model="dataForm.roleIdList"
-                   multiple
-                   :placeholder="$t('user.roleIdList')">
-          <el-option v-for="role in roleList"
-                     :key="role.id"
-                     :label="role.name"
-                     :value="role.id"></el-option>
+      <el-form-item
+        prop="roleIdList"
+        :label="$t('user.roleIdList')"
+        class="role-list"
+      >
+        <el-select
+          v-model="dataForm.roleIdList"
+          multiple
+          :placeholder="$t('user.roleIdList')"
+        >
+          <el-option
+            v-for="role in roleList"
+            :key="role.id"
+            :label="role.name"
+            :value="role.id"
+          ></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item prop="status"
-                    :label="$t('user.status')"
-                    size="mini">
+      <el-form-item prop="status" :label="$t('user.status')" size="mini">
         <el-radio-group v-model="dataForm.status">
           <el-radio :label="0">{{ $t('user.status0') }}</el-radio>
           <el-radio :label="1">{{ $t('user.status1') }}</el-radio>
@@ -77,12 +94,13 @@
     </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
-      <el-button type="primary"
-                 v-if="canSave"
-                 @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
-      <el-button type="primary"
-                 v-else
-                 disabled>{{ $t('confirm') }}</el-button>
+      <el-button
+        type="primary"
+        v-if="canSave"
+        @click="dataFormSubmitHandle()"
+        >{{ $t('confirm') }}</el-button
+      >
+      <el-button type="primary" v-else disabled>{{ $t('confirm') }}</el-button>
     </template>
   </el-dialog>
 </template>
@@ -90,8 +108,10 @@
 <script>
 import debounce from 'lodash/debounce'
 import { isEmail, isMobile } from '@/utils/validate'
+import { encryptedData } from '@/utils'
+
 export default {
-  data () {
+  data() {
     return {
       visible: false,
       canSave: true,
@@ -111,11 +131,18 @@ export default {
     }
   },
   computed: {
-    dataRule () {
+    dataRule() {
       var validatePassword = (rule, value, callback) => {
         if (!this.dataForm.id && !/\S/.test(value)) {
           return callback(new Error(this.$t('validate.required')))
         }
+
+        let regex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,20}')
+        if (!regex.test(value)) {
+          return callback(
+            new Error('密码必须8-20个字符，而且同时包含大小写字母和数字')
+          )
+        }
         callback()
       }
       var validateConfirmPassword = (rule, value, callback) => {
@@ -129,120 +156,179 @@ export default {
       }
       var validateEmail = (rule, value, callback) => {
         if (!isEmail(value)) {
-          return callback(new Error(this.$t('validate.format', { 'attr': this.$t('user.email') })))
+          return callback(
+            new Error(
+              this.$t('validate.format', { attr: this.$t('user.email') })
+            )
+          )
         }
         callback()
       }
       var validateMobile = (rule, value, callback) => {
         if (!isMobile(value)) {
-          return callback(new Error(this.$t('validate.format', { 'attr': this.$t('user.mobile') })))
+          return callback(
+            new Error(
+              this.$t('validate.format', { attr: this.$t('user.mobile') })
+            )
+          )
         }
         callback()
       }
       return {
         realName: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ],
-        password: [
-          { validator: validatePassword, trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          }
         ],
+        password: [{ validator: validatePassword, trigger: 'blur' }],
         confirmPassword: [
           { validator: validateConfirmPassword, trigger: 'blur' }
         ],
         email: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          },
           { validator: validateEmail, trigger: 'blur' }
         ],
         phone: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' },
+          {
+            required: true,
+            message: this.$t('validate.required'),
+            trigger: 'blur'
+          },
           { validator: validateMobile, trigger: 'blur' }
         ]
       }
     }
   },
   methods: {
-    init () {
+    init() {
       this.visible = true
       this.dataForm.deptId = ''
       this.$nextTick(() => {
         this.$refs['dataForm'].resetFields()
         this.roleIdListDefault = []
-        Promise.all([
-          this.getRoleList()
-        ]).then(() => {
+        Promise.all([this.getRoleList()]).then(() => {
           if (this.dataForm.id) {
             this.getInfo()
           }
         })
       })
+
+      //获取公钥
+      this.getPubKey()
+    },
+
+    // 获取公钥
+    getPubKey() {
+      this.$http
+        .post('/auth/govweb/getKey')
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+
+          this.pubKey = res.data // 获取到公钥;
+        })
+        .catch(() => {})
     },
     // 获取角色列表
-    getRoleList () {
-      return this.$http.get('/oper/access/operrole/list').then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.roleList = res.data
-      }).catch(() => { })
+    getRoleList() {
+      return this.$http
+        .get('/oper/access/operrole/list')
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.roleList = res.data
+        })
+        .catch(() => {})
     },
     // 获取信息
-    getInfo () {
-      this.$http.get(`/epmetuser/operuser/${this.dataForm.id}`).then(({ data: res }) => {
-        if (res.code !== 0) {
-          return this.$message.error(res.msg)
-        }
-        this.dataForm = {
-          ...this.dataForm,
-          ...res.data,
-          roleIdList: []
-        }
-        // 角色配置, 区分是否为默认角色
-        for (var i = 0; i < res.data.roleIdList.length; i++) {
-          if (this.roleList.filter(item => item.id === res.data.roleIdList[i])[0]) {
-            this.dataForm.roleIdList.push(res.data.roleIdList[i])
-            continue
+    getInfo() {
+      this.$http
+        .get(`/epmetuser/operuser/${this.dataForm.id}`)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
           }
-          this.roleIdListDefault.push(res.data.roleIdList[i])
-        }
-      }).catch(() => { })
+          this.dataForm = {
+            ...this.dataForm,
+            ...res.data,
+            roleIdList: []
+          }
+          // 角色配置, 区分是否为默认角色
+          for (var i = 0; i < res.data.roleIdList.length; i++) {
+            if (
+              this.roleList.filter(
+                (item) => item.id === res.data.roleIdList[i]
+              )[0]
+            ) {
+              this.dataForm.roleIdList.push(res.data.roleIdList[i])
+              continue
+            }
+            this.roleIdListDefault.push(res.data.roleIdList[i])
+          }
+        })
+        .catch(() => {})
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function() {
-
-      this.$refs['dataForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        if (!this.canSave) {
-          return;
-        }
-        this.canSave = false;
-        setTimeout(() => {
-          this.canSave = true   //点击一次时隔两秒后才能再次点击
-        }, 2000)
-
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/epmetuser/operuser', {
-          ...this.dataForm,
-          roleIdList: [
-            ...this.dataForm.roleIdList,
-            ...this.roleIdListDefault
-          ]
-        }).then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg)
+    dataFormSubmitHandle: debounce(
+      function () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (!valid) {
+            return false
           }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              this.$emit('refreshDataList')
+          if (!this.canSave) {
+            return
+          }
+          this.canSave = false
+          setTimeout(() => {
+            this.canSave = true //点击一次时隔两秒后才能再次点击
+          }, 2000)
+
+          const { pubKey } = this
+          this.$http[!this.dataForm.id ? 'post' : 'put'](
+            '/epmetuser/operuser',
+            {
+              ...this.dataForm,
+              roleIdList: [
+                ...this.dataForm.roleIdList,
+                ...this.roleIdListDefault
+              ],
+              password: encryptedData(pubKey, this.dataForm.password),
+              confirmPassword: encryptedData(
+                pubKey,
+                this.dataForm.confirmPassword
+              ),
+              email: encryptedData(pubKey, this.dataForm.email),
+              phone: encryptedData(pubKey, this.dataForm.phone)
             }
-          })
-        }).catch(() => { })
-      })
-    }, 1000, { 'leading': true, 'trailing': false })
+          )
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg)
+              }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+            .catch(() => {})
+        })
+      },
+      1000,
+      { leading: true, trailing: false }
+    )
   }
 }
 </script>