MacaoBankWeb/src/views/system/userinfo.vue

<template>
  <div>
    <basic-container>
      <avue-form :option="option"
                 v-model="form"
                 @tab-click="handleTabClick"
                 @submit="handleSubmit"></avue-form>
    </basic-container>
  </div>
</template>

<script>
  import option from "@/option/user/info";
  import {getUserInfo, updateInfo, updatePassword} from "@/api/system/user";
  import md5 from 'js-md5';
  import func from "@/util/func";


  export default {
    data() {
      return {
        index: 0,
        option: {},
        optionTem: {
          tabs: true,
          tabsActive: 1,
          submitBtn: false,
          emptyBtn: false,
          group: [
            {
              label: '個人信息',
              prop: 'info',
              column: [
                /*{
                label: '頭像',
                type: 'upload',
                listType: 'picture-img',
                propsHttp: {
                  res: 'data',
                  url: 'link',
                },
                canvasOption: {
                  text: ' ',
                  ratio: 0.1
                },
                action: '/api/blade-resource/oss/endpoint/put-file',
                tip: '只能上傳jpg/png用戶頭像，且不超過500kb',
                span: 12,
                row: true,
                prop: 'avatar'
              },*/
                {
                  label: '姓名',
                  span: 12,
                  row: true,
                  disabled: true,
                  prop: 'name'
                }, {
                  label: 'Mo碼',
                  span: 12,
                  row: true,
                  prop: 'code',
                  disabled: true,
                }, {
                  label: 'EHR號',
                  span: 12,
                  row: true,
                  prop: 'ehr',
                  disabled: true,
                }, {
                  label: '所屬機構',
                  prop: 'deptName',
                  span: 12,
                  row: true,
                  disabled: true,
                }, {
                  label: '所屬角色',
                  prop: 'roleName',
                  span: 12,
                  row: true,
                  disabled: true,
                }]
            },
            {
              label: '修改密碼',
              prop: 'password',
              column: [{
                label: '原密碼',
                span: 12,
                row: true,
                type: 'password',
                prop: 'oldPassword',
                rules: [{
                  required: true,
                  message: "請輸入原密碼",
                  trigger: "blur"
                }]
              }, {
                label: '新密碼',
                span: 12,
                row: true,
                type: 'password',
                prop: 'newPassword',
                rules: [{
                  required: true,
                  message: "請輸入新密碼",
                  trigger: "blur"
                },
                  {required: true, validator: this.validatePass, trigger: 'blur'}
                ]
              }, {
                label: '確認密碼',
                span: 12,
                row: true,
                type: 'password',
                prop: 'newPassword1',
                rules: [{
                  required: true,
                  message: "請重複新密碼",
                  trigger: "blur"
                },
                  {required: true, validator: this.validatePass2, trigger: 'blur'}
                ]
              }]
            }
          ],
        },
        form: {}
      };
    },
    created() {
      // this.findObject(this.optionTem.group[1].column, 'newPassword').rules.push({required: true, validator: this.validatePass, trigger: 'blur'});
      // this.findObject(this.optionTem.group[1].column, 'newPassword1').rules.push({required: true, validator: this.validatePass2, trigger: 'blur'});
      this.handleWitch();
    },
    methods: {
      validatePass(rule, value, callback){
        const pwdRule = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,}$/;
        if (value === '') {
          callback(new Error('請輸入密碼'));
        } else if (!pwdRule.test(value)) {
          callback(new Error("長度至少為6，且需包含數字、英文、符號任2款組合"));
        } else {
          callback();
        }
      },
      validatePass2(rule, value, callback){
        const pwdRule = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,}$/;
        if (value === '') {
          callback(new Error('請再次輸入密碼'));
        } else if (!pwdRule.test(value)) {
          callback(new Error("長度至少為6，且需包含數字、英文、符號任2款組合"));
        } else if (value !== this.form.newPassword) {
          callback(new Error('兩次輸入密碼不一致!'));
        } else {
          callback();
        }
      },
      handleSubmit(form, done) {
        if (this.index === 0) {
          updateInfo(form).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "修改信息成功!"
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
            done();
          }, error => {
            window.console.log(error);
            done();
          })
        } else {
          updatePassword(md5(form.oldPassword), md5(form.newPassword), md5(form.newPassword1)).then(res => {
            if (res.data.success) {
              document.getElementById("tab-1").click();
              this.form.oldPassword = '', this.form.newPassword = '',this.form.newPassword1 = '';
              this.$message({
                type: "success",
                message: "修改密码成功!"
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
            done();
          }, error => {
            window.console.log(error);
            done();
          })
        }
      },
      handleWitch() {



        if (this.index === 0) {
          getUserInfo().then(res => {
            const user = res.data.data;
            this.form = {
              id: user.id,
              avatar: user.avatar,
              name: user.name,
              deptName: user.deptName,
              roleName: user.roleName,
              code: user.code,
              ehr: user.ehr,
              isLdapuser: user.isLdapuser,
            }
            if (user.isLdapuser == 1){
              this.optionTem.group.splice(1,1)
            }
            this.option = this.optionTem;
          });
        }
      },
      handleTabClick(tabs) {
        this.index = func.toInt(tabs.index);
        // this.handleWitch();
        if (this.form.isLdapuser != null && this.form.isLdapuser != undefined && this.form.isLdapuser == 0){
          this.option.submitBtn = this.index == 1;
        }
      }
    }
  };
</script>

<style>
</style>