@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/views/PersonalInfo.vue

@@ -0,0 +1,693 @@
+<template>
+  <div class="container">
+    <epx-header title="个人信息" class="person-header"/>
+    <div class="base-info" v-loading="loading">
+      <div class="info-header">
+        <el-upload
+          action=""
+          class="avatar-uploader"
+          :http-request="upload"
+          :show-file-list="false"
+          :disabled="!pageConfig.uploadPhoto"
+        >
+          <div class="awatar-container" @mouseover="isMouseover = true" @mouseleave="isMouseover = false">
+            <!-- <el-avatar :src="photo" fit="fill"  class="avatar"></el-avatar> -->
+            <div class="avatar" :style="{cursor: pageConfig.uploadPhoto? 'pointer': 'default'}">
+              <img :src="photo" alt="">
+            </div>
+            <div class="avatar-mask" v-show="pageConfig.uploadPhoto && 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 v-if="userInfo.VALIDITY" class="info-last-time">账号有效期：{{userInfo.VALIDITY}}</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>
+          <!-- v-if="!((item.type==='DING_TALK_ID' || item.type==='QY_WECHAT_ID') && !item.value)" -->
+        <div class="info-base-item" v-for="(item) in list.itemList" :key="item.attriName">
+          <epx-table-form-item :showLabel="true" :label="item.attriLabel" :value="userInfo[item.attriName]" :fieldConfigs="{...item, state: 'DETAIL'}"></epx-table-form-item>
+          <!-- <div class="base-title">{{item.attriLabel}}:</div>
+          <div class="base-value">{{userInfo[item.attriName + '#'] || userInfo[item.attriName]}}</div> -->
+          <div class="base-handle" v-if="item.state==='EDIT'" @click="change(item)">{{ operateName(item) }}</div>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      width="480px"
+      top="35vh"
+      :title="'修改'+changeItem.attriLabel"
+      v-model="editFormDialog"
+      :close-on-click-modal="false"
+      :show-close="false"
+      @close="changeItem={}"
+    >
+
+      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+        <epx-table-form-item v-model="ruleForm[changeItem.attriName]" :showLabel="true" :label="changeItem.attriLabel" :fieldConfigs="{...changeItem, state:'EDIT'}"></epx-table-form-item>
+      </el-form>
+      <template v-slot:footer><div class="dialog-footer">
+        <el-button @click="editFormDialog=false">取 消</el-button>
+        <el-button :loading="httpRequest" type="primary" @click="editFormFn">提交</el-button>
+      </div></template>
+    </el-dialog>
+    <el-dialog width="480px" top="35vh" :title="'修改密码'" v-model="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="'旧密码'" prop="inputValue">
+          <el-input :type="type=='PASSWORD'?'password':'text'" v-model="ruleForm.inputValue" autocomplete="off"></el-input>
+          <el-button class="fr" type="primary" link @click="forgetPassword=true;dialogFormVisible=false">忘记密码？</el-button>
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPass">
+          <el-input type="password" v-model="ruleForm.newPass" autocomplete="off"></el-input>
+          <p class="password-tip">{{clientConfig.PASSWORD_HINT_INFO || '密码长度为8-20且必须包含字母和数字，不能包含空格'}}</p>
+        </el-form-item>
+        <el-form-item label="确认新密码" prop="checkPass">
+          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <template v-slot:footer><div class="dialog-footer">
+        <el-button @click="resetForm('ruleForm')">取 消</el-button>
+        <el-button :loading="httpRequest" type="primary" @click="submitPass('ruleForm')">提交</el-button>
+      </div></template>
+    </el-dialog>
+    <el-dialog width="480px" top="35vh" title="重置密码" v-model="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="default" @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">{{clientConfig.PASSWORD_HINT_INFO || '密码长度为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>
+      <template v-slot:footer><div class="dialog-footer">
+        <el-button @click="forgetPassword=false">取 消</el-button>
+        <el-button :loading="httpRequest" type="primary" @click="resetPasswordFn">提交</el-button>
+      </div></template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import loadJSEncrypt from '@epxing/utils/src/lazy-jsencrypt'
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-personal-info',
+  mixins: [component],
+  $componentType: 'page',
+  navConfigs: { flag: false },
+  infoList: [
+    {
+      title: '基本信息',
+      itemList: ['ACCOUNT', 'DEPT_ID', { attriName: 'PASSWORD', state: 'EDIT' }, { attriName: 'LANGUAGE', state: 'EDIT' }]
+    },
+    {
+      title: '联系信息',
+      itemList: ['MOBILE', { attriName: 'DING_TALK_ID', state: 'EDIT' }, { attriName: 'QY_WECHAT_ID', state: 'EDIT' }, 'EMAIL']
+    }
+  ],
+  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',
+      avatar: '',
+      userInfo: {},
+      loading: false,
+      imageUrl: '',
+      isMouseover: false,
+      forgetPassword: false,
+      resetCode: '',
+      resetCodeTime: '',
+      resetPassword: '',
+      resetConfirmPassword: '',
+      PhotoField: {},
+      infoList: [],
+      editFormDialog: false,
+      changeItem: {}
+    }
+  },
+  computed: {
+    ...mapState({
+      decryptKey: state => state.config.decryptKey
+    }),
+    photo () {
+      if (this.userInfo.PHOTO) {
+        return this.$util.getFileUrl(this.userInfo.PHOTO) || ''
+      }
+      return require('@/assets/images/photo.png')
+    },
+    operateName () {
+      return item => {
+        if (item.attriName === 'DING_TALK_ID' || item.attriName === 'QY_WECHAT_ID') {
+          return this.userInfo[item.attriName] ? '解绑' : ''
+        }
+        return item.dataType === 'password' ? '修改密码' : item.attriName === 'LANGUAGE' ? '设置' : '修改'
+      }
+    },
+    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: {
+    getFields () {
+      const { infoList } = this.pageConfig
+
+      for (let index = 0; index < infoList.length; index++) {
+        const item = infoList[index]
+        const fields = item.itemList.filter(item => {
+          if (item.attriName === 'LANGUAGE') {
+            item.options = this.languageList
+            return this.languageFlag
+          }
+          return true
+        })
+        this.$FieldFactory.createFields({
+          fields: fields,
+          metaId: 'FM_USER'
+        })
+          .then(data => {
+            this.infoList.splice(index, 0, { ...item, itemList: data })
+          })
+      }
+    },
+    getUserInfo (change) {
+      this.loading = true
+      this.$http.get({
+        action: 'getCurrentUserEntity', // 请求接口 get：根据id获取对象/find：根据字段条件获取数据scope.ID: xxx
+        entityId: 'FM_USER'
+      })
+        .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 (item) {
+      this.type = ''
+      if (item.attriName === 'DING_TALK_ID' || item.attriName === 'QY_WECHAT_ID') {
+        this.unBind(item.attriName === 'DING_TALK_ID' ? 'dingtalk' : 'wechatMP')
+      } else if (item.dataType === 'password') {
+        this.changeItem = item
+        this.dialogFormVisible = true
+        this.type = 'PASSWORD'
+      } else {
+        this.ruleForm[item.attriName] = this.userInfo[item.attriName]
+        this.changeItem = item
+        this.editFormDialog = true
+      }
+    },
+    unBind (key) {
+      this.$confirm('确认解绑?', this.$t('hint'), {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        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(async (valid) => {
+        if (valid) {
+          if (this.type === 'PASSWORD') {
+            this.httpRequest = true
+            let JSEncrypt
+            try {
+              JSEncrypt = await loadJSEncrypt()
+            } catch (err) {
+              this.httpRequest = false
+              this.$message.error('安全组件加载失败，请刷新页面重试')
+              return
+            }
+            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' : this.type === 'EMAIL' ? 'bean.EMAIL' : '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
+        }
+      })
+    },
+    editFormFn () {
+      const { attriName, attriLabel } = this.changeItem
+      if (!this.ruleForm[attriName]) {
+        this.$message.error('请输入' + attriLabel)
+        return
+      }
+      this.$http.update({
+        action: 'update',
+        entityId: 'FM_USER',
+        'bean.ID': this.userInfo.ID,
+        ['bean.' + attriName]: this.ruleForm[attriName]
+
+      }).then(() => {
+        this.editFormDialog = false
+        this.httpRequest = false
+        this.getUserInfo('change')
+      })
+        .catch(err => {
+          this.$message.error(err.message)
+          this.httpRequest = false
+        })
+    },
+    resetForm (formName) {
+      this.$refs[formName].resetFields()
+      this.dialogFormVisible = false
+    },
+    upload (params) {
+      this.$http.save({
+        action: 'uploadOfEntity',
+        metaId: this.$meta.id,
+        attributeId: this.PhotoField.attribute.id,
+        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')
+        })
+      })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    getPublickKey () {
+      if (this.decryptKey.rsaKey) {
+        this.publicKey = this.decryptKey.rsaKey
+      } else {
+        this.$store.dispatch('GET_DECRYPT_KEY')
+          .then(data => {
+            this.publicKey = data.rsaKey
+          })
+      }
+    },
+    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 || '处理失败')
+        })
+    },
+    async 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
+      }
+      let JSEncrypt
+      try {
+        JSEncrypt = await loadJSEncrypt()
+      } catch (err) {
+        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 || '处理失败')
+        })
+    },
+    getPhotoField () {
+      this.$FieldFactory.createFields({
+        fields: ['PHOTO'],
+        metaId: 'FM_USER',
+        meta: this.$meta
+      })
+        .then(data => {
+          this.PhotoField = data[0]
+        })
+    }
+  },
+  created () {
+    this.getFields()
+    this.getPhotoField()
+    this.getUserInfo()
+    this.options.FM_LANGUAGE = this.languageList
+    this.getPublickKey()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+   :deep(.el-form-item__label){
+    text-align: center;
+  }
+}
+.person-header {
+  margin-bottom: calc(var(--margin) * 2)!important;
+}
+.base-info{
+  background-color: var(--epx-bg-card);
+  border-radius: var(--epx-radius-base);
+  margin: 0 auto;
+}
+.info-header{
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--epx-border);
+  width: 100%;
+  margin: 0 auto 20px;
+  padding: 20px;
+}
+.item-title{
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.block{
+  width: 4px;
+  height: 16px;
+  background: #0874E7;
+  border-radius: var(--epx-radius-s);
+  margin-right: 8px;
+}
+.info-title{
+  font-size: var(--epx-font-size-l);
+  font-weight: 500;
+  color: var(--epx-text);
+}
+.info-header-right{
+  margin-left: 20px;
+}
+.info-name{
+  font-size: 24px;
+  font-weight: 500;
+  color: var(--epx-text);
+  line-height: 24px;
+  margin-bottom: 20px;
+}
+.info-last-time{
+  font-size: var(--epx-font-size-base);
+  color: var(--epx-text);
+  line-height: 14px;
+  margin-top: 10px;
+}
+.awatar-container{
+  width: 80px;
+  height: 80px;
+  position: relative;
+}
+.avatar{
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 1px solid var(--epx-border);
+  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: var(--epx-font-size-s);
+    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: var(--epx-font-size-base);
+    display: flex;
+    margin-left: 16px;
+    width: 548px;
+    align-items: center;
+  }
+  .base-title{
+    width: 100px;
+    color: #444444;
+  }
+  .base-value{
+    color: var(--epx-text);
+    margin-right: 20px;
+  }
+  .base-handle{
+    color: #0874E7;
+    cursor: pointer;
+    line-height: 36px
+  }
+.forget-password__input {
+  display: flex;
+}
+.get-code-btn {
+  width: 140px;
+  text-align: center;
+  height: 36px;
+  margin-left: 12px;
+}
+.password-tip {
+  font-size: var(--epx-font-size-s);
+  color:var(--epx-text-secondary);
+  line-height: 16px;
+  margin-top: 4px
+}
+</style>
+<style lang="scss">
+.epx-app-index__content--page-center {
+  .person-header {
+    margin: calc(var(--margin) * 2) auto!important;
+  }
+}
+</style>