epx-frame 3.5.0-shpgy.1

package/src/frame/views/PersonalInfo.vue

@@ -0,0 +1,659 @@
+<template>
+  <div class="container">
+    <el-dialog width="30%" top="35vh" :title="'修改'+title" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :show-close="false" @close="ruleForm.inputValue=''">
+      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+        <el-form-item :label="type=='PASSWORD'?'旧密码':title" prop="inputValue">
+          <el-select v-model="ruleForm.inputValue" v-if="type=='select'">
+            <el-option
+              v-for="item in options[option]"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+              ></el-option>
+          </el-select>
+          <el-input v-else :type="type=='PASSWORD'?'password':'text'" v-model="ruleForm.inputValue" autocomplete="off"></el-input>
+          <el-button v-if="type=='PASSWORD'" class="fr" type="text" @click="forgetPassword=true;dialogFormVisible=false">忘记密码？</el-button>
+        </el-form-item>
+        <el-form-item v-if="type=='PASSWORD'" label="新密码" prop="newPass">
+          <el-input type="password" v-model="ruleForm.newPass" autocomplete="off"></el-input>
+          <p class="password-tip">密码长度为8-20且必须包含字母和数字，不能包含空格</p>
+        </el-form-item>
+
+        <el-form-item v-if="type=='PASSWORD'" label="确认新密码" prop="checkPass">
+          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="resetForm('ruleForm')">取 消</el-button>
+        <el-button :loading="httpRequest" type="primary" @click="submitPass('ruleForm')">提交</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog width="30%" top="35vh" title="重置密码" :visible.sync="forgetPassword" :close-on-click-modal="false" :show-close="false" >
+      <el-form status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
+        <el-form-item label="验证码" prop="inputValue">
+          <div class="forget-password__input">
+            <el-input v-model="resetCode" class="password-input" type="input" :placeholder="$t('please enter the verification code')"></el-input>
+            <el-button :class="['get-code-btn', { active: this.resetCodeTime }]" type="primary" size="medium" @click="sendCode">
+              {{resetCodeTime ? $t('get code') + resetCodeTime + 's' : $t('get code')}}
+            </el-button>
+          </div>
+        </el-form-item>
+        <el-form-item  label="新密码" prop="newPass">
+          <el-input type="password" v-model="resetPassword" autocomplete="off"></el-input>
+          <p class="password-tip">密码长度为8-20且必须包含字母和数字，不能包含空格</p>
+        </el-form-item>
+        <el-form-item  label="确认新密码" prop="checkPass">
+          <el-input type="password" v-model="resetConfirmPassword" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="forgetPassword=false">取 消</el-button>
+        <el-button :loading="httpRequest" type="primary" @click="resetPasswordFn">提交</el-button>
+      </div>
+    </el-dialog>
+    <epx-header-nav title="个人信息"/>
+    <div class="base-info" v-loading="loading">
+      <el-tabs v-model="activeName" type="card" >
+
+        <el-tab-pane label="个人信息" name="info">
+          <div class="info-header">
+            <el-upload
+              action=""
+              class="avatar-uploader"
+              :http-request="upload"
+              :show-file-list="false"
+            >
+              <div class="awatar-container" @mouseover="isMouseover = true" @mouseleave="isMouseover = false">
+                <!-- <el-avatar :src="photo" fit="fill"  class="avatar"></el-avatar> -->
+                <div class="avatar">
+                  <img :src="photo" alt="">
+                </div>
+                <div class="avatar-mask" v-show="isMouseover">更换头像</div>
+              </div>
+
+            </el-upload>
+            <div class="info-header-right">
+              <div class="info-name">{{userInfo.NAME}}
+                <i class="el-icon-edit-outline" @click="change('用户名','NAME')"></i>
+              </div>
+
+              <div class="info-last-time">上次登陆时间：{{userInfo.LAST_LOGIN_TIME}}</div>
+            </div>
+          </div>
+          <div class="info-base" v-for="(list) in infoList" :key="list.title">
+            <div class="item-title">
+              <div class="block"></div>
+              <div class="info-title">{{list.title}}</div>
+            </div>
+            <template v-for="(item) in list.itemList">
+              <div class="info-base-item"  :key="item.title" v-if="!((item.type==='DING_TALK_ID' || item.type==='QY_WECHAT_ID') && !item.value)">
+                <div class="base-title">{{item.title}}:</div>
+                <div class="base-value">{{item.value}}</div>
+                <div class="base-handle" v-if="item.handle" @click="change(item.title, item.type, item.option, item.key, item.handleFn)">{{item.value?item.handle:item.noHandle}}</div>
+              </div>
+            </template>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import axios from '@/utils/axios'
+import { JSEncrypt } from 'jsencrypt'
+export default {
+  name: 'epx-personal-info',
+  navConfigs: { flag: false },
+  data () {
+    var validate = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入密码'))
+      } else {
+        callback()
+      }
+    }
+    var validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
+      } else if (value !== this.ruleForm.newPass) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      type: '',
+      title: '',
+      option: '',
+      httpRequest: false,
+      dialogFormVisible: false,
+      ruleForm: {
+        inputValue: '',
+        newPass: '',
+        checkPass: ''
+      },
+      options: {},
+      rules: {
+        inputValue: [
+          { validator: validate, trigger: 'blur' }
+        ],
+        newPass: [
+          { validator: validate, trigger: 'blur' }
+        ],
+        checkPass: [
+          { validator: validatePass, trigger: 'blur' }
+        ]
+      },
+      activeName: 'info',
+      defaultAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
+      avatar: '',
+      userInfo: {},
+      loading: false,
+      imageUrl: '',
+      isMouseover: false,
+      forgetPassword: false,
+      resetCode: '',
+      resetCodeTime: '',
+      resetPassword: '',
+      resetConfirmPassword: ''
+    }
+  },
+  computed: {
+    photo () {
+      if (this.userInfo.PHOTO) {
+        return this.$util.getFileUrl(this.userInfo.PHOTO) || ''
+      }
+      return 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
+    },
+    infoList () {
+      const baseInfoList = [
+        // {
+        //   title: '用户编号',
+        //   value: this.userInfo.ID,
+        //   handle: ''
+        // },
+        {
+          title: '用户账号',
+          value: this.userInfo.ACCOUNT,
+          handle: ''
+        },
+        {
+          title: '所属单位',
+          value: this.userInfo['UDR|DEPT#'],
+          handle: ''
+        },
+        {
+          title: '密码',
+          // value:this.userInfo.PASSWORD,
+          value: '*********',
+          handle: '修改密码',
+          type: 'PASSWORD'
+        }
+
+      ]
+      if (this.languageFlag === '1') {
+        baseInfoList.push({
+          title: '默认语种',
+          key: 'LANGUAGE',
+          value: this.userInfo['LANGUAGE#'],
+          type: 'select',
+          option: 'FM_LANGUAGE',
+          handle: '设置',
+          noHandle: '设置'
+        })
+      }
+      return [
+        {
+          title: '基本信息',
+          itemList: baseInfoList
+        },
+        {
+          title: '联系信息',
+          itemList: [
+            {
+              title: '手机号码',
+              value: this.userInfo.MOBILE,
+              noHandle: '绑定',
+              handle: '修改',
+              type: 'MOBILE'
+            },
+            // {
+            //   title: '微信账号',
+            //   value: this.userInfo.WECHAT_ID,
+            //   noHandle: '',
+            //   handle: '解绑',
+            //   handleFn: this.unBind.bind(this, 'wechat'),
+            //   type: 'WECHAT_ID'
+            // },
+            {
+              title: '钉钉号',
+              value: this.userInfo.DING_TALK_ID,
+              noHandle: '',
+              handle: '解绑',
+              handleFn: this.unBind.bind(this, 'dingtalk'),
+              type: 'DING_TALK_ID'
+            },
+            {
+              title: '企业微信账号',
+              value: this.userInfo.QY_WECHAT_ID,
+              noHandle: '',
+              handle: '解绑',
+              handleFn: this.unBind.bind(this, 'wechatMP'),
+              type: 'QY_WECHAT_ID'
+            },
+            {
+              title: '邮箱',
+              value: this.userInfo.EMAIL,
+              noHandle: '',
+              handle: '解绑',
+              type: 'EMAIL'
+            }
+          ]
+        }]
+    },
+    languageFlag () {
+      const { LANGUAGE_FLAG: languageFlag } = this.clientConfig
+      return languageFlag
+    },
+    languageList () {
+      const { LANGUAGES: languages = '', 'LANGUAGES#': languageNames = '' } = this.clientConfig
+      // 获取当前语言
+      if (!languages) return []
+      const languageIdList = languages.split(',')
+      const languageNameList = languageNames.split(',')
+      const languageList = languageIdList.map((item, index) => ({ id: item, code: item, name: languageNameList[index] }))
+      return languageList
+    }
+  },
+  methods: {
+    getUserInfo (change) {
+      this.loading = true
+      this.$http.get({
+        action: 'get', // 请求接口 get：根据id获取对象/find：根据字段条件获取数据scope.ID: xxx
+        link: 'udr',
+        entityId: 'FM_USER', // 请求对象
+        id: this.user.id // store
+      })
+        .then(data => {
+          this.userInfo = data.data
+          this.loading = false
+          if (change) {
+            this.$store.dispatch({ type: 'GET_USER' })
+            this.$message({
+              type: 'success',
+              message: '修改成功'
+            })
+          }
+        })
+        .catch((error) => {
+          this.$message({
+            type: 'error',
+            message: error.msg
+          })
+          this.loading = false
+        })
+    },
+    change (title, type, option, key, handleFn) {
+      if (handleFn) return handleFn()
+      this.title = title
+      this.type = type
+      this.option = option
+      this.dialogFormVisible = true
+      if (type === 'PASSWORD') {
+
+      } else {
+        this.ruleForm.inputValue = this.userInfo[key] || this.userInfo[this.type]
+      }
+    },
+    unBind (key) {
+      this.$confirm('确认解绑?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http.$post({
+          action: 'unBind',
+          entityId: 'FM_USER',
+          provider: key
+        })
+          .then(data => {
+            this.$message.success('解绑成功')
+            this.getUserInfo()
+          })
+          .catch(err => {
+            this.$message.error(err.message)
+          })
+      })
+    },
+    isEmojiCharacter (substring) {
+      for (var i = 0; i < substring.length; i++) {
+        var hs = substring.charCodeAt(i)
+        if (hs >= 0xd800 && hs <= 0xdbff) {
+          if (substring.length > 1) {
+            var ls = substring.charCodeAt(i + 1)
+            var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000
+            if (uc >= 0x1d000 && uc <= 0x1f77f) {
+              return true
+            }
+          }
+        } else if (substring.length > 1) {
+          const ls = substring.charCodeAt(i + 1)
+          if (ls === 0x20e3) {
+            return true
+          }
+        } else {
+          if (hs >= 0x2100 && hs <= 0x27ff) {
+            return true
+          } else if (hs >= 0x2B05 && hs <= 0x2b07) {
+            return true
+          } else if (hs >= 0x2934 && hs <= 0x2935) {
+            return true
+          } else if (hs >= 0x3297 && hs <= 0x3299) {
+            return true
+          } else if (hs === 0xa9 || hs === 0xae || hs === 0x303d || hs === 0x3030 ||
+                    hs === 0x2b55 || hs === 0x2b1c || hs === 0x2b1b ||
+                    hs === 0x2b50) {
+            return true
+          }
+        }
+      }
+    },
+
+    submitPass (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.type === 'PASSWORD') {
+            this.httpRequest = true
+            const encrypt = new JSEncrypt()
+            encrypt.setPublicKey(this.publicKey)
+            this.$http.$post({
+              action: 'changePassword',
+              entityId: 'FM_USER',
+              // 'bean.ID': this.user.id,
+              old_pw: encrypt.encrypt(this.ruleForm.inputValue),
+              new_pw: encrypt.encrypt(this.ruleForm.newPass)
+            }).then(() => {
+              this.httpRequest = false
+              this.resetForm(formName)
+              this.getUserInfo('change')
+            }).catch(error => {
+              this.httpRequest = false
+              this.$message.error(error.msg)
+            })
+          } else {
+            const atr = this.type === 'NAME' ? 'bean.NAME' : this.type === 'select' ? 'bean.LANGUAGE' : 'bean.MOBILE'
+            if (this.type === 'NAME') {
+              if (this.isEmojiCharacter(this.ruleForm.inputValue)) {
+                this.$message.error('名称不允许包含特殊字符')
+                return
+              }
+            }
+            this.httpRequest = true
+            this.$http.update({
+              action: 'update',
+              entityId: 'FM_USER',
+              'bean.ID': this.user.id,
+              [atr]: this.ruleForm.inputValue
+
+            }).then(() => {
+              this.dialogFormVisible = false
+              this.httpRequest = false
+              this.getUserInfo('change')
+            })
+              .catch(err => {
+                this.$message.error(err.message)
+                this.httpRequest = false
+              })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm (formName) {
+      this.$refs[formName].resetFields()
+      this.dialogFormVisible = false
+    },
+    upload (params) {
+      this.$http.save({
+        action: 'upload',
+        file: params.file
+      }, {
+        requestType: 'formData'
+      }).then(data => {
+        this.$http.update({
+          action: 'update',
+          entityId: 'FM_USER',
+          'bean.ID': this.user.id,
+          'bean.PHOTO': data.bean
+        }).then(() => {
+          this.$store.dispatch({ type: 'GET_USER_INFO' })
+          this.getUserInfo('change')
+        })
+      })
+    },
+    getPublickKey () {
+      axios.get('/epxing-frame/api/v1/rsa/public')
+        .then(data => {
+          this.publicKey = data
+        })
+    },
+    sendCode () {
+      if (!this.userInfo.MOBILE) {
+        this.$message.error('该用户没有绑定手机号')
+        return
+      }
+      if (this.resetCodeTime > 0) {
+        this.$message.error('请1分钟后再次获取验证码')
+        return
+      }
+
+      this.$http.$post({
+        action: 'sendCode',
+        entityId: 'FM_MESSAGE_SEND',
+        contact: this.userInfo.MOBILE
+      })
+        .then(data => {
+          this.resetCodeTime = 60
+          const timer = setInterval(() => {
+            this.resetCodeTime--
+            if (this.resetCodeTime <= 0) {
+              clearInterval(timer)
+              this.resetCodeTime = 0
+            }
+          }, 1000)
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    },
+    resetPasswordFn () {
+      if (!this.userInfo.MOBILE) {
+        this.$message.error('该用户没有绑定手机号')
+        return
+      }
+      if (!this.resetCode) {
+        this.$message.error('请输入验证码')
+        return
+      }
+      if (!this.resetPassword) {
+        this.$message.error('请输入密码')
+        return
+      }
+      if (this.resetPassword !== this.resetConfirmPassword) {
+        this.$message.error('两次密码输入不一致')
+        return
+      }
+      const encrypt = new JSEncrypt()
+      encrypt.setPublicKey(this.publicKey)
+      this.$http.$post({
+        action: 'restPassword',
+        entityId: 'FM_USER',
+        contact: this.userInfo.MOBILE,
+        code: this.resetCode,
+        pw: encrypt.encrypt(this.resetPassword),
+        rePw: encrypt.encrypt(this.resetPassword)
+      })
+        .then(data => {
+          this.$message.success('重置密码成功')
+          this.forgetPassword = false
+          this.resetCode = ''
+          this.resetCodeTime = 0
+          this.resetPassword = ''
+          this.resetConfirmPassword = ''
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+        })
+    }
+  },
+  created () {
+    this.getUserInfo()
+    this.$set(this.options, 'FM_LANGUAGE', this.languageList)
+    this.getPublickKey()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  /deep/.el-form-item__label{
+    text-align: center;
+  }
+}
+.base-info{
+  background-color: white;
+  width: 1168px;
+  height: 646px;
+  border-radius: 4px;
+  margin: 0 auto;
+}
+.info-header{
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #DCDFE6;
+  width: 1128px;
+  margin: 0 auto 20px;
+  padding: 20px 0;
+}
+.item-title{
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.block{
+  width: 4px;
+  height: 16px;
+  background: #0874E7;
+  border-radius: 2px;
+  margin-right: 8px;
+}
+.info-title{
+  font-size: 16px;
+  font-weight: 500;
+  color: #222222;
+}
+.info-header-right{
+  margin-left: 20px;
+}
+.info-name{
+  font-size: 24px;
+  font-weight: 500;
+  color: #222222;
+  line-height: 24px;
+  margin-bottom: 20px;
+}
+.info-last-time{
+  font-size: 14px;
+  color: #666666;
+  line-height: 14px;
+}
+.awatar-container{
+  width: 80px;
+  height: 80px;
+  position: relative;
+}
+.avatar{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 1px solid #DCDFE6;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  >img{
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.el-icon-edit-outline{
+  width: 16px;
+  height: 16px;
+  color: #267CFF;
+  cursor: pointer;
+  margin-left: 13px;
+}
+.avatar-uploader .el-upload {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-mask{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, .5);
+    font-size: 12px;
+    color: #FFFFFF;
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .info-base{
+    padding: 0 20px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 40px;
+  }
+  .info-base-item{
+    font-size: 14px;
+    display: flex;
+    margin-top: 24px;
+    margin-left: 16px;
+    width: 548px;
+  }
+  .base-title{
+    width: 100px;
+    color: #444444;
+  }
+  .base-value{
+    color: #121212;
+    margin-right: 20px;
+  }
+  .base-handle{
+    color: #0874E7;
+    cursor: pointer;
+  }
+.forget-password__input {
+  display: flex;
+}
+.get-code-btn {
+  width: 140px;
+  text-align: center;
+  height: 36px;
+  margin-left: 12px;
+}
+.password-tip {
+  font-size: 12px;
+  color:#999;
+  line-height: 16px;
+  margin-top: 4px
+}
+</style>