@中文描述: 个人中心修改 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述: 个人中心修改 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 4436f00 commit ef2bc92f9444e086b4b5160400995261a4e2773f hhb authored on 10 Aug 2023

Showing 3 changed files

Ignore Space Show notes View project/hivuiMain/views/personalCenter/components/UserCard.vue
<template> <el-card style="margin-bottom:20px;"> <div class="user-profile"> <div class="account-center-avatarHolder"> <div class="avatar"> <img :src="avatar \|\| userPic"/> </div> <div class="username">{{ user.fusername }}</div> <div class="bio">{{ user.fuserid }}</div> </div> <div class="account-center-detail"> <p> <i class="el-icon-s-custom"></i>{{ user.fbzname }} </p> <p> <i class="iconfont icon-tree"></i>{{ `${user.forgname} - ${user.fdeptname} - ${user.frolename}` }} </p> <p> <i class="el-icon-phone-outline"></i><span>{{ user.FMBPHONE \|\| user.fmbphone}}</span><span></span> </p> </div> <el-divider /> </div> <div class="user-bio"> <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>{{ $t("hivuiMain_app_orgbz")}}</span></div> <div class="user-education user-bio-section"> <div class="user-bio-section-body" v-for="item in bzList"> <p style="display: inline-flex;"> <i class="el-icon-s-custom"></i><span>{{ item.forgnamepath \|\| item.fbzname }}</span><i class="el-icon-star-on" title="主岗" v-if="item.fdefaultbz"></i><span class="bzid">{{ item.fbzid}}</span><span></span> </p> </div> </div> </div> </el-card> </template> <script> import userPic from "@main/assets/user.png" export default { props: { user: { type: Object, default: () => { return { name: '', email: '', avatar: '', role: '' } } }, avatar:{ type: String, default: "" } }, data(){ return{ userPic: userPic, bzList:[] } }, mounted(){ debugger; console.log('多语言', this.$t("hivuiMain_app_orgbz")) }, methods:{ } } </script> <style lang="scss" scoped> .box-center { margin: 0 auto; display: table; } .text-muted { color: #777; } .user-profile { .user-name { font-weight: bold; } .box-center { padding-top: 10px; } .user-role { padding-top: 10px; font-weight: 400; font-size: 14px; } .box-social { padding-top: 30px; .el-table { border-top: 1px solid #dfe6ec; } } .user-follow { padding-top: 20px; } } .account-center-avatarHolder { text-align: center; margin-bottom: 24px; & > .avatar { margin: 0 auto; width: 104px; height: 104px; margin-bottom: 20px; border-radius: 50%; overflow: hidden; img { height: 100%; width: 100%; } } .username { color: rgba(0, 0, 0, 0.85); font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 4px; } } .account-center-detail { p { margin-bottom: 8px; padding-left: 26px; position: relative; } i { position: absolute; height: 14px; width: 14px; left: 0; top: 4px; // background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg) } .title { background-position: 0 0; } .group { background-position: 0 -22px; } .address { background-position: 0 -44px; } } .user-bio { margin-top: 20px; color: #606266; span { padding-left: 4px; } .user-bio-section-body{ .bzid{ float: right; color: #000; } .el-icon-star-on{ color: #06c; } } .user-bio-section-header { border-bottom: 1px solid #dfe6ec; padding-bottom: 10px; margin-bottom: 10px; font-weight: bold; } .user-bio-section { height: calc(100vh - 427px); min-height: 336px; overflow: auto; font-size: 14px; // padding: 15px 0; } } </style> <template> <el-card style="margin-bottom:20px;"> <div class="user-profile"> <div class="account-center-avatarHolder"> <div class="avatar"> <img :src="avatar \|\| userPic"/> </div> <div class="username">{{ user.fusername }}</div> <div class="bio">{{ user.fuserid }}</div> </div> <div class="account-center-detail"> <p> <i class="el-icon-s-custom"></i>{{ user.fbzname }} </p> <p> <i class="iconfont icon-tree"></i>{{ `${user.forgname} - ${user.fdeptname} - ${user.frolename}` }} </p> <p> <i class="el-icon-phone-outline"></i><span>{{ user.FMBPHONE \|\| user.fmbphone}}</span><span></span> </p> </div> <el-divider /> </div> <div class="user-bio"> <div class="user-education user-bio-section"> <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>{{ $t("hivuiMain_app_orgbz")}}</span></div> <div class="user-bio-section-body" v-for="item in bzList"> <p style="display: inline-flex;"> <i class="el-icon-s-custom"></i><span>{{ item.forgnamepath \|\| item.fbzname }}</span><i class="el-icon-star-on" title="主岗" v-if="item.fdefaultbz"></i><span class="bzid">{{ item.fbzid}}</span><span></span> </p> </div> </div> </div> </el-card> </template> <script> import userPic from "@main/assets/user.png" export default { props: { user: { type: Object, default: () => { return { name: '', email: '', avatar: '', role: '' } } }, avatar:{ type: String, default: "" } }, data(){ return{ userPic: userPic, bzList:[] } }, mounted(){ debugger; console.log('多语言', this.$t("hivuiMain_app_orgbz")) }, methods:{ } } </script> <style lang="scss" scoped> .box-center { margin: 0 auto; display: table; } .text-muted { color: #777; } .user-profile { .user-name { font-weight: bold; } .box-center { padding-top: 10px; } .user-role { padding-top: 10px; font-weight: 400; font-size: 14px; } .box-social { padding-top: 30px; .el-table { border-top: 1px solid #dfe6ec; } } .user-follow { padding-top: 20px; } } .account-center-avatarHolder { text-align: center; margin-bottom: 24px; & > .avatar { margin: 0 auto; width: 104px; height: 104px; margin-bottom: 20px; border-radius: 50%; overflow: hidden; img { height: 100%; width: 100%; } } .username { color: rgba(0, 0, 0, 0.85); font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 4px; } } .account-center-detail { p { margin-bottom: 8px; padding-left: 26px; position: relative; } i { position: absolute; height: 14px; width: 14px; left: 0; top: 4px; // background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg) } .title { background-position: 0 0; } .group { background-position: 0 -22px; } .address { background-position: 0 -44px; } } .user-bio { margin-top: 20px; color: #606266; span { padding-left: 4px; } .user-bio-section-body{ .bzid{ float: right; color: #000; } .el-icon-star-on{ color: #06c; } } .user-bio-section { font-size: 14px; padding: 15px 0; .user-bio-section-header { border-bottom: 1px solid #dfe6ec; padding-bottom: 10px; margin-bottom: 10px; font-weight: bold; } } } </style>

Ignore Space Show notes View

project/hivuiMain/views/personalCenter/components/UserCard.vue

<template>
  <el-card style="margin-bottom:20px;">
    <div class="user-profile">
      <div class="account-center-avatarHolder">
          <div class="avatar">
            <img :src="avatar || userPic"/>
          </div>
          <div class="username">{{ user.fusername }}</div>
          <div class="bio">{{ user.fuserid }}</div>
        </div>
      <div class="account-center-detail">
        <p>
          <i class="el-icon-s-custom"></i>{{ user.fbzname }}
        </p>
        <p>
          <i class="iconfont icon-tree"></i>{{ `${user.forgname} - ${user.fdeptname} - ${user.frolename}` }}
        </p>
        <p>
          <i class="el-icon-phone-outline"></i><span>{{ user.FMBPHONE || user.fmbphone}}</span><span></span>
        </p>
      </div>
      <el-divider />
    </div>
    <div class="user-bio">
      <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>{{ $t("hivuiMain_app_orgbz")}}</span></div>
      <div class="user-education user-bio-section">
        <div class="user-bio-section-body" v-for="item in bzList">
          <p style="display: inline-flex;">
            <i class="el-icon-s-custom"></i><span>{{ item.forgnamepath || item.fbzname }}</span><i class="el-icon-star-on" title="主岗" v-if="item.fdefaultbz"></i><span class="bzid">{{ item.fbzid}}</span><span></span>
          </p>
        </div>
      </div>
    </div>
  </el-card>
</template>

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

.box-center {
    padding-top: 10px;
  }

.user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

.box-social {
    padding-top: 30px;

.el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

.user-follow {
    padding-top: 20px;
  }
}
.account-center-avatarHolder {
  text-align: center;
  margin-bottom: 24px;

& > .avatar {
    margin: 0 auto;
    width: 104px;
    height: 104px;
    margin-bottom: 20px;
    border-radius: 50%;
    overflow: hidden;
    img {
      height: 100%;
      width: 100%;
    }
  }

.username {
    color: rgba(0, 0, 0, 0.85);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 4px;
  }
}
.account-center-detail {

p {
    margin-bottom: 8px;
    padding-left: 26px;
    position: relative;
  }

i {
    position: absolute;
    height: 14px;
    width: 14px;
    left: 0;
    top: 4px;
    // background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg)
  }

.title {
    background-position: 0 0;
  }
  .group {
    background-position: 0 -22px;
  }
  .address {
    background-position: 0 -44px;
  }
}
.user-bio {
  margin-top: 20px;
  color: #606266;

span {
    padding-left: 4px;
  }
  .user-bio-section-body{
    .bzid{
      float: right;
      color: #000;
    }
    .el-icon-star-on{
      color: #06c;
    }
  }
  .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  .user-bio-section {
    height: calc(100vh - 427px);
    min-height: 336px;
    overflow: auto;
    font-size: 14px;
    // padding: 15px 0;
  }
}
</style>

<template>
  <el-card style="margin-bottom:20px;">
    <div class="user-profile">
      <div class="account-center-avatarHolder">
          <div class="avatar">
            <img :src="avatar || userPic"/>
          </div>
          <div class="username">{{ user.fusername }}</div>
          <div class="bio">{{ user.fuserid }}</div>
        </div>
      <div class="account-center-detail">
        <p>
          <i class="el-icon-s-custom"></i>{{ user.fbzname }}
        </p>
        <p>
          <i class="iconfont icon-tree"></i>{{ `${user.forgname} - ${user.fdeptname} - ${user.frolename}` }}
        </p>
        <p>
          <i class="el-icon-phone-outline"></i><span>{{ user.FMBPHONE || user.fmbphone}}</span><span></span>
        </p>
      </div>
      <el-divider />
    </div>
    <div class="user-bio">
      <div class="user-education user-bio-section">
        <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>{{ $t("hivuiMain_app_orgbz")}}</span></div>
        <div class="user-bio-section-body" v-for="item in bzList">
          <p style="display: inline-flex;">
            <i class="el-icon-s-custom"></i><span>{{ item.forgnamepath || item.fbzname }}</span><i class="el-icon-star-on" title="主岗" v-if="item.fdefaultbz"></i><span class="bzid">{{ item.fbzid}}</span><span></span>
          </p>
        </div>
      </div>
    </div>
  </el-card>
</template>

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

.box-center {
    padding-top: 10px;
  }

.user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

.box-social {
    padding-top: 30px;

.el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

.user-follow {
    padding-top: 20px;
  }
}
.account-center-avatarHolder {
  text-align: center;
  margin-bottom: 24px;

.username {
    color: rgba(0, 0, 0, 0.85);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    margin-bottom: 4px;
  }
}
.account-center-detail {

p {
    margin-bottom: 8px;
    padding-left: 26px;
    position: relative;
  }

i {
    position: absolute;
    height: 14px;
    width: 14px;
    left: 0;
    top: 4px;
    // background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg)
  }

.title {
    background-position: 0 0;
  }
  .group {
    background-position: 0 -22px;
  }
  .address {
    background-position: 0 -44px;
  }
}
.user-bio {
  margin-top: 20px;
  color: #606266;

span {
    padding-left: 4px;
  }
  .user-bio-section-body{
    .bzid{
      float: right;
      color: #000;
    }
    .el-icon-star-on{
      color: #06c;
    }
  }

.user-bio-section {
    font-size: 14px;
    padding: 15px 0;

.user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>

Ignore Space Show notes View project/hivuiMain/views/personalCenter/components/UserUpdate.vue
<template> <el-form :model="form" :rules="rules" ref="form"> <el-row> <el-col :span="12"> <el-form-item :label="$t('hivuiMain_personalCenter_name')" prop="FUSERNAME"> <el-input v-model="form.FUSERNAME"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_sex')" prop="FSEX"> <el-radio-group v-model="form.FSEX"> <el-radio :label="1">{{ $t('hivuiMain_personalCenter_male') }}</el-radio> <el-radio :label="0">{{ $t('hivuiMain_personalCenter_female') }}</el-radio> </el-radio-group> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_birthday')" prop="FBIRTHDAY"> <el-date-picker format="yyyy-MM-dd" type="date" v-model="form.FBIRTHDAY" style="width: 100%" ></el-date-picker> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_mbphone')" prop="FMBPHONE"> <el-input v-model="form.FMBPHONE"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_email')" prop="FEMAIL"> <el-input v-model="form.FEMAIL"></el-input> </el-form-item> <el-form-item label="QQ" prop="FQQ"> <el-input v-model="form.FQQ"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_WeChat')" prop="FWEIXIN"> <el-input v-model="form.FWEIXIN"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_usersfz')" prop="FUSERSFZ"> <el-input v-model="form.FUSERSFZ"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_address')" prop="FADDRESS"> <el-input type="textarea" :rows="3" v-model="form.FADDRESS" ></el-input> </el-form-item> </el-col> <el-col :span="12" style="padding-left: 20px"> <el-form-item label="" prop="FUSERPHOTO"> <el-upload class="avatar-uploader" :http-request="uploadUserPhoto" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="userPhotoUrl"> <img :src="userPhotoUrl" class="avatar user" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'userPhoto')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'userPhoto')" > <i class="el-icon-delete"></i> </span> </span> </div> <i v-else class="el-icon-plus avatar-uploader-icon user" :style="`background-image:url(${userPic});background-size: 100% 100%`" ></i> </el-upload> </el-form-item> <el-form-item label="" prop="FUSERSFZPIC1"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic1" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="sfzPic1Url"> <img :src="sfzPic1Url" class="avatar sfz" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'sfzPic1')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'sfzPic1')" > <i class="el-icon-delete"></i> </span> </span> </div> <div v-else class="avatar-uploader-icon sfz" :style="`background-image:url(${sfz1Pic});background-size: 100% 100%`" ></div> </el-upload> </el-form-item> <el-form-item label="" prop="FUSERSFZPIC2"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic2" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="sfzPic2Url"> <img :src="sfzPic2Url" class="avatar sfz" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'sfzPic2')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'sfzPic2')" > <i class="el-icon-delete"></i> </span> </span> </div> <div v-else class="avatar-uploader-icon sfz" :style="`background-image:url(${sfz2Pic});background-size: 100% 100%`" ></div> </el-upload> </el-form-item> </el-col> </el-row> <el-form-item style="text-align: center"> <el-button type="primary" @click="submitForm('form')">{{ $t("hivuiMain_des_save") }}</el-button> <!-- <el-button @click="resetForm('form')">{{ $t("hivuiMain_des_cancel")}}</el-button> --> </el-form-item> <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" ref="dialog"> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </el-form> </template> <script> import { update, upload } from "@main/api/user.js"; import { getToken } from "@main/utils/auth"; import userPic from "@main/assets/user.png"; import sfz1Pic from "@main/assets/sfz1.jpg"; import sfz2Pic from "@main/assets/sfz2.jpg"; export default { data() { return { form: { FUSERNAME: "", FSEX: "", FBIRTHDAY: "", FMBPHONE: "", FEMAIL: "", FQQ: "", FWEIXIN: "", FUSERSFZ: "", FADDRESS: [], FUSERPHOTO: "", FUSERSFZPIC1: "", FUSERSFZPIC2: "", }, // userPhotoUrl: '', // sfzPic1Url: '', // sfzPic2Url: '', rules: { FMBPHONE: [ { validator: this.isPhone, trigger: "blur", }, ], FEMAIL: [ { validator: this.isEmail, trigger: "blur", }, ], FUSERSFZ: [ { validator: this.isIdCard, trigger: "blur", }, ], }, dialogVisible: false, dialogImageUrl: "", userPic: userPic, sfz1Pic: sfz1Pic, sfz2Pic: sfz2Pic, copyForm:{} }; }, computed: { userPhotoUrl() { if (this.form && this.form.FUSERPHOTO) { return this._getImageUrl(this.form.FUSERPHOTO); } else { return ""; } }, sfzPic1Url() { if (this.form && this.form.FUSERSFZPIC1) { return this._getImageUrl(this.form.FUSERSFZPIC1); } else { return ""; } }, sfzPic2Url() { if (this.form && this.form.FUSERSFZPIC2) { return this._getImageUrl(this.form.FUSERSFZPIC2); } else { return ""; } }, reviewUrl(){ return this.$HI.review.includes(window.HIVUI_SETTING.url) ? this.$HI.review : window.HIVUI_SETTING.url + this.$HI.review } }, mounted() {}, methods: { uploadUserPhoto(param) { this.handleUpload(param, "userPhoto"); }, uploadSfzPic1(param) { this.handleUpload(param, "sfzPic1"); }, uploadSfzPic2(param) { this.handleUpload(param, "sfzPic2"); }, /* 手动上传附件 / handleUpload(param, type) { let formData = new FormData(); formData.append("files", param.file); let _this = this; upload(formData).then((res) => { if (type == "userPhoto") { let path = res.dataPack[0].nname; _this.form.FUSERPHOTO = path; // _this.userPhotoUrl = _this._getImageUrl(path); } else if (type == "sfzPic1") { let path = res.dataPack[0].nname; _this.form.FUSERSFZPIC1 = path; // _this.sfzPic1Url = _this._getImageUrl(path); } else if (type == "sfzPic2") { let path = res.dataPack[0].nname; _this.form.FUSERSFZPIC2 = path; // _this.sfzPic2Url = _this._getImageUrl(path); } }); }, _getImageUrl(path) { let token = getToken(); if (typeof path == "string") { path = path.replace(/\\/g, "/"); } return `${this.reviewUrl}?relativePath=${path}&access_token=${token}`; }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { let form = { ...this.form }; if (form.FBIRTHDAY && typeof form.FBIRTHDAY == "object") { form.FBIRTHDAY = this.formatDate(form.FBIRTHDAY); }else{ form.FBIRTHDAY = null } let data = this.getEditData() data.$old = { ...form }; data.$m = "/platf/user-info/entity/SysUserInfoBizEntity.xml"; update(data).then((res) => { this.$message({ type: "success", message: this.$t("hivuiMain_personalCenter_editTips") \|\| "修改成功", }); }); } else { console.log("error submit!!"); return false; } }); }, // resetForm(formName) { // this.$refs[formName].resetFields(); // }, isPhone(rule, value, callback) { const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value) && value != "") { callback( new Error( this.$t("hivuiMain_validate_FMBPHONE") \|\| "电话号码格式有误" ) ); } else { callback(); } } }, isEmail(rule, value, callback) { const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value)) { callback( new Error( this.$t("hivuiMain_validate_FEMAIL") \|\| "邮箱地址格式有误" ) ); } else { callback(); } } }, isIdCard(rule, value, callback) { const reg = /^[1-9]\d{5}(18\|19\|20\|(3\d))\d{2}((0[1-9])\|(1[0-2]))(([0-2][1-9])\|10\|20\|30\|31)\d{3}[0-9Xx]$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value)) { callback( new Error( this.$t("hivuiMain_validate_FIDCARD") \|\| "身份证号格式有误" ) ); } else { callback(); } } }, formatDate(date) { const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, "0"); const day = date.getDate().toString().padStart(2, "0"); return `${year}-${month}-${day}`; }, handlePreview(file, type) { this.dialogImageUrl = type == "userPhoto" ? this.userPhotoUrl : type == "sfzPic1" ? this.sfzPic1Url : type == "sfzPic2" ? this.sfzPic2Url : ""; this.dialogVisible = true; let dialog = this.$refs.dialog; dialog.$el.onclick = function () { event.stopPropagation(); }; }, handleRemove(file, type) { if (type == "userPhoto") { this.form.FUSERPHOTO = ""; } else if (type == "sfzPic1") { this.form.FUSERSFZPIC1 = ""; } else if (type == "sfzPic2") { this.form.FUSERSFZPIC2 = ""; } }, getEditData(){ let data = {} for(let key in this.form){ if(this.form[key] !== this.copyForm[key]){ data[key] = this.form[key] } } return data } }, }; </script> <style lang="less" scope> .avatar-uploader .el-upload { border: 1px dashed transparent; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon.user { font-size: 28px; color: #8c939d; width: 166px; height: 166px; line-height: 166px; text-align: center; } .avatar-uploader-icon.sfz { font-size: 28px; color: #8c939d; width: 318px; height: 200px; line-height: 200px; text-align: center; } .avatar.user { width: 166px; height: 166px; display: block; } .avatar.sfz { width: 318px; height: 200px; display: block; } .el-upload-list__item-actions { position: absolute; width: 100%; height: 100%; left: 0; top: 0; cursor: default; text-align: center; color: #fff; opacity: 0; font-size: 20px; background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; } .showImg:hover { .el-upload-list__item-actions { opacity: 1; } } .el-upload-list__item-delete { display: block; position: static; font-size: inherit; color: inherit; .el-icon-delete { font-family: element-icons !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; vertical-align: baseline; display: inline-block; -webkit-font-smoothing: antialiased; } } .el-upload-list__item-actions span + span { margin-left: 15px; } .el-upload-list__item-name i:hover, .el-upload-list__item-name a:hover { color: #409eff; } .el-radio--mini.is-bordered{ display: block; width: fit-content; margin-bottom: 10px; } .el-radio.is-bordered+.el-radio.is-bordered{ margin-left: 0; } </style> <template> <el-form :model="form" :rules="rules" ref="form"> <el-row> <el-col :span="12"> <el-form-item :label="$t('hivuiMain_personalCenter_name')" prop="FUSERNAME"> <el-input v-model="form.FUSERNAME"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_sex')" prop="FSEX"> <el-radio-group v-model="form.FSEX"> <el-radio :label="1">{{ $t('hivuiMain_personalCenter_male') }}</el-radio> <el-radio :label="0">{{ $t('hivuiMain_personalCenter_female') }}</el-radio> </el-radio-group> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_birthday')" prop="FBIRTHDAY"> <el-date-picker format="yyyy-MM-dd" type="date" v-model="form.FBIRTHDAY" style="width: 100%" ></el-date-picker> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_mbphone')" prop="FMBPHONE"> <el-input v-model="form.FMBPHONE"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_email')" prop="FEMAIL"> <el-input v-model="form.FEMAIL"></el-input> </el-form-item> <el-form-item label="QQ" prop="FQQ"> <el-input v-model="form.FQQ"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_WeChat')" prop="FWEIXIN"> <el-input v-model="form.FWEIXIN"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_usersfz')" prop="FUSERSFZ"> <el-input v-model="form.FUSERSFZ"></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_personalCenter_address')" prop="FADDRESS"> <el-input type="textarea" :rows="3" v-model="form.FADDRESS" ></el-input> </el-form-item> </el-col> <el-col :span="12" style="padding-left: 20px"> <el-form-item label="" prop="FUSERPHOTO"> <el-upload class="avatar-uploader" :http-request="uploadUserPhoto" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="userPhotoUrl"> <img :src="userPhotoUrl" class="avatar user" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'userPhoto')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'userPhoto')" > <i class="el-icon-delete"></i> </span> </span> </div> <i v-else class="el-icon-plus avatar-uploader-icon user" :style="`background-image:url(${userPic});background-size: 100% 100%`" ></i> </el-upload> </el-form-item> <el-form-item label="" prop="FUSERSFZPIC1"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic1" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="sfzPic1Url"> <img :src="sfzPic1Url" class="avatar sfz" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'sfzPic1')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'sfzPic1')" > <i class="el-icon-delete"></i> </span> </span> </div> <div v-else class="avatar-uploader-icon sfz" :style="`background-image:url(${sfz1Pic});background-size: 100% 100%`" ></div> </el-upload> </el-form-item> <el-form-item label="" prop="FUSERSFZPIC2"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic2" :show-file-list="false" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" > <div class="showImg" v-if="sfzPic2Url"> <img :src="sfzPic2Url" class="avatar sfz" /> <span ref="showActions" class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click.stop="handlePreview(file, 'sfzPic2')" > <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click.stop="handleRemove(file, 'sfzPic2')" > <i class="el-icon-delete"></i> </span> </span> </div> <div v-else class="avatar-uploader-icon sfz" :style="`background-image:url(${sfz2Pic});background-size: 100% 100%`" ></div> </el-upload> </el-form-item> </el-col> </el-row> <el-form-item style="text-align: center"> <el-button type="primary" @click="submitForm('form')">{{ $t("hivuiMain_des_save") }}</el-button> <!-- <el-button @click="resetForm('form')">{{ $t("hivuiMain_des_cancel")}}</el-button> --> </el-form-item> <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" ref="dialog"> <img width="100%" :src="dialogImageUrl" alt="" /> </el-dialog> </el-form> </template> <script> import { update, upload } from "@main/api/user.js"; import { getToken } from "@main/utils/auth"; import userPic from "@main/assets/user.png"; import sfz1Pic from "@main/assets/sfz1.jpg"; import sfz2Pic from "@main/assets/sfz2.jpg"; export default { data() { return { form: { FUSERNAME: "", FSEX: "", FBIRTHDAY: "", FMBPHONE: "", FEMAIL: "", FQQ: "", FWEIXIN: "", FUSERSFZ: "", FADDRESS: [], FUSERPHOTO: "", FUSERSFZPIC1: "", FUSERSFZPIC2: "", }, // userPhotoUrl: '', // sfzPic1Url: '', // sfzPic2Url: '', rules: { FMBPHONE: [ { validator: this.isPhone, trigger: "blur", }, ], FEMAIL: [ { validator: this.isEmail, trigger: "blur", }, ], FUSERSFZ: [ { validator: this.isIdCard, trigger: "blur", }, ], }, dialogVisible: false, dialogImageUrl: "", userPic: userPic, sfz1Pic: sfz1Pic, sfz2Pic: sfz2Pic, }; }, computed: { userPhotoUrl() { if (this.form && this.form.FUSERPHOTO) { return this._getImageUrl(this.form.FUSERPHOTO); } else { return ""; } }, sfzPic1Url() { if (this.form && this.form.FUSERSFZPIC1) { return this._getImageUrl(this.form.FUSERSFZPIC1); } else { return ""; } }, sfzPic2Url() { if (this.form && this.form.FUSERSFZPIC2) { return this._getImageUrl(this.form.FUSERSFZPIC2); } else { return ""; } }, reviewUrl(){ return this.$HI.review.includes(window.HIVUI_SETTING.url) ? this.$HI.review : window.HIVUI_SETTING.url + this.$HI.review } }, mounted() {}, methods: { uploadUserPhoto(param) { this.handleUpload(param, "userPhoto"); }, uploadSfzPic1(param) { this.handleUpload(param, "sfzPic1"); }, uploadSfzPic2(param) { this.handleUpload(param, "sfzPic2"); }, / 手动上传附件 */ handleUpload(param, type) { let formData = new FormData(); formData.append("files", param.file); let _this = this; upload(formData).then((res) => { if (type == "userPhoto") { let path = res.dataPack[0].nname; _this.form.FUSERPHOTO = path; // _this.userPhotoUrl = _this._getImageUrl(path); } else if (type == "sfzPic1") { let path = res.dataPack[0].nname; _this.form.FUSERSFZPIC1 = path; // _this.sfzPic1Url = _this._getImageUrl(path); } else if (type == "sfzPic2") { let path = res.dataPack[0].nname; _this.form.FUSERSFZPIC2 = path; // _this.sfzPic2Url = _this._getImageUrl(path); } }); }, _getImageUrl(path) { let token = getToken(); if (typeof path == "string") { path = path.replace(/\\/g, "/"); } return `${this.reviewUrl}?relativePath=${path}&access_token=${token}`; }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { let form = { ...this.form }; if (form.FBIRTHDAY && typeof form.FBIRTHDAY == "object") { form.FBIRTHDAY = this.formatDate(form.FBIRTHDAY); }else{ form.FBIRTHDAY = null } let data = { ...form }; data.$old = { ...form }; data.$m = "/platf/user-info/entity/SysUserInfoBizEntity.xml"; update(data).then((res) => { this.$message({ type: "success", message: this.$t("hivuiMain_personalCenter_editTips") \|\| "修改成功", }); }); } else { console.log("error submit!!"); return false; } }); }, // resetForm(formName) { // this.$refs[formName].resetFields(); // }, isPhone(rule, value, callback) { const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value) && value != "") { callback( new Error( this.$t("hivuiMain_validate_FMBPHONE") \|\| "电话号码格式有误" ) ); } else { callback(); } } }, isEmail(rule, value, callback) { const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value)) { callback( new Error( this.$t("hivuiMain_validate_FEMAIL") \|\| "邮箱地址格式有误" ) ); } else { callback(); } } }, isIdCard(rule, value, callback) { const reg = /^[1-9]\d{5}(18\|19\|20\|(3\d))\d{2}((0[1-9])\|(1[0-2]))(([0-2][1-9])\|10\|20\|30\|31)\d{3}[0-9Xx]$/; if (value == "" \|\| value == undefined \|\| value == null) { callback(); } else { if (!reg.test(value)) { callback( new Error( this.$t("hivuiMain_validate_FIDCARD") \|\| "身份证号格式有误" ) ); } else { callback(); } } }, formatDate(date) { const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, "0"); const day = date.getDate().toString().padStart(2, "0"); return `${year}-${month}-${day}`; }, handlePreview(file, type) { this.dialogImageUrl = type == "userPhoto" ? this.userPhotoUrl : type == "sfzPic1" ? this.sfzPic1Url : type == "sfzPic2" ? this.sfzPic2Url : ""; this.dialogVisible = true; let dialog = this.$refs.dialog; dialog.$el.onclick = function () { event.stopPropagation(); }; }, handleRemove(file, type) { if (type == "userPhoto") { this.form.FUSERPHOTO = ""; } else if (type == "sfzPic1") { this.form.FUSERSFZPIC1 = ""; } else if (type == "sfzPic2") { this.form.FUSERSFZPIC2 = ""; } }, }, }; </script> <style lang="less" scope> .avatar-uploader .el-upload { border: 1px dashed transparent; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon.user { font-size: 28px; color: #8c939d; width: 166px; height: 166px; line-height: 166px; text-align: center; } .avatar-uploader-icon.sfz { font-size: 28px; color: #8c939d; width: 318px; height: 200px; line-height: 200px; text-align: center; } .avatar.user { width: 166px; height: 166px; display: block; } .avatar.sfz { width: 318px; height: 200px; display: block; } .el-upload-list__item-actions { position: absolute; width: 100%; height: 100%; left: 0; top: 0; cursor: default; text-align: center; color: #fff; opacity: 0; font-size: 20px; background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; } .showImg:hover { .el-upload-list__item-actions { opacity: 1; } } .el-upload-list__item-delete { display: block; position: static; font-size: inherit; color: inherit; .el-icon-delete { font-family: element-icons !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; vertical-align: baseline; display: inline-block; -webkit-font-smoothing: antialiased; } } .el-upload-list__item-actions span + span { margin-left: 15px; } .el-upload-list__item-name i:hover, .el-upload-list__item-name a:hover { color: #409eff; } .el-radio--mini.is-bordered{ display: block; width: fit-content; margin-bottom: 10px; } .el-radio.is-bordered+.el-radio.is-bordered{ margin-left: 0; } </style>

Ignore Space Show notes View

project/hivuiMain/views/personalCenter/components/UserUpdate.vue

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-row>
      <el-col :span="12">
        <el-form-item :label="$t('hivuiMain_personalCenter_name')" prop="FUSERNAME">
          <el-input v-model="form.FUSERNAME"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_sex')" prop="FSEX">
          <el-radio-group v-model="form.FSEX">
            <el-radio :label="1">{{ $t('hivuiMain_personalCenter_male') }}</el-radio>
            <el-radio :label="0">{{ $t('hivuiMain_personalCenter_female') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_birthday')" prop="FBIRTHDAY">
          <el-date-picker
            format="yyyy-MM-dd"
            type="date"
            v-model="form.FBIRTHDAY"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_mbphone')" prop="FMBPHONE">
          <el-input v-model="form.FMBPHONE"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_email')" prop="FEMAIL">
          <el-input v-model="form.FEMAIL"></el-input>
        </el-form-item>
        <el-form-item label="QQ" prop="FQQ">
          <el-input v-model="form.FQQ"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_WeChat')" prop="FWEIXIN">
          <el-input v-model="form.FWEIXIN"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_usersfz')" prop="FUSERSFZ">
          <el-input v-model="form.FUSERSFZ"></el-input>
        </el-form-item>
        <el-form-item :label="$t('hivuiMain_personalCenter_address')"  prop="FADDRESS">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.FADDRESS"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" style="padding-left: 20px">
        <el-form-item label="" prop="FUSERPHOTO">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadUserPhoto"
            :show-file-list="false"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
          >
            <div class="showImg" v-if="userPhotoUrl">
              <img :src="userPhotoUrl" class="avatar user" />
              <span ref="showActions" class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click.stop="handlePreview(file, 'userPhoto')"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click.stop="handleRemove(file, 'userPhoto')"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon user"
              :style="`background-image:url(${userPic});background-size: 100% 100%`"
            ></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="" prop="FUSERSFZPIC1">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadSfzPic1"
            :show-file-list="false"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
          >
            <div class="showImg" v-if="sfzPic1Url">
              <img :src="sfzPic1Url" class="avatar sfz" />
              <span ref="showActions" class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click.stop="handlePreview(file, 'sfzPic1')"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click.stop="handleRemove(file, 'sfzPic1')"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <div
              v-else
              class="avatar-uploader-icon sfz"
              :style="`background-image:url(${sfz1Pic});background-size: 100% 100%`"
            ></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="" prop="FUSERSFZPIC2">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadSfzPic2"
            :show-file-list="false"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
          >
            <div class="showImg" v-if="sfzPic2Url">
              <img :src="sfzPic2Url" class="avatar sfz" />
              <span ref="showActions" class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click.stop="handlePreview(file, 'sfzPic2')"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click.stop="handleRemove(file, 'sfzPic2')"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <div
              v-else
              class="avatar-uploader-icon sfz"
              :style="`background-image:url(${sfz2Pic});background-size: 100% 100%`"
            ></div>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item style="text-align: center">
      <el-button type="primary" @click="submitForm('form')">{{
        $t("hivuiMain_des_save")
      }}</el-button>
      
    </el-form-item>
    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" ref="dialog">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </el-form>
</template>

Ignore Space Show notes View project/hivuiMain/views/personalCenter/index.vue
<template> <div class="app-container" style="height: 100%;overflow:auto;"> <el-row v-if="user" style="height: 100%;"> <el-col :span="6" :xs="24" style="padding: 10px;height: 100%;box-sizing: border-box"> <user-card :user="userCardInfo" :avatar="avatar" ref="userCard" style="height: 100%;min-height: 772px;"/> </el-col> <el-col :span="18" :xs="24" style="padding: 10px;height: 100%;box-sizing: border-box"> <el-card class="r-card" style="height: 100%;min-height: 772px;" :body-style="{padding:'0 20px',height: '100%'}"> <el-tabs v-model="activeTab"> <el-tab-pane :label="userLabel" :name="userLabel"> <user-update ref="userUpdate" /> </el-tab-pane> <el-tab-pane :label="bzLabel" :name="bzLabel"> <bz-update ref="bzUpdate" /> </el-tab-pane> </el-tabs> </el-card> </el-col> </el-row> </div> </template> <script> import UserCard from './components/UserCard' import UserUpdate from './components/UserUpdate' import BzUpdate from './components/BzUpdate' import { getToken } from '@main/utils/auth' import { query,getBzList } from '@main/api/user.js' export default { name: 'Profile', components: { UserCard,UserUpdate, BzUpdate }, data() { return { user: {}, activeTab: this.$t("hivuiMain_app_user", { default: '用户' }), userInfo:{}, bzList:[], userLabel: this.$t("hivuiMain_app_user", { default: '用户' }), bzLabel: this.$t("hivuiMain_app_orgbz", { default: '岗编' }) } }, computed: { avatar(){ if(this.userInfo && this.userInfo.FUSERPHOTO){ return this._getImageUrl(this.userInfo.FUSERPHOTO) }else{ return false } }, userCardInfo(){ console.log('userInfo', this.userInfo) return Object.assign(this.user, this.userInfo \|\| {}) }, reviewUrl(){ return this.$HI.review.includes(window.HIVUI_SETTING.url) ? this.$HI.review : window.HIVUI_SETTING.url + this.$HI.review } }, created() { this.getUser(); this.getUserInfo(); this.getBzList(); }, methods: { getBzList(){ getBzList().then(res =>{ this.bzList = res.dataPack; let curtBz = this.bzList.filter(res => res.fdefaultbz)[0] this.$refs.userCard.bzList = this.bzList this.$refs.bzUpdate.bzList = this.bzList if(curtBz && curtBz.fbzid){ this.$refs.bzUpdate.curtBzId = curtBz.fbzid } }) }, getUser() { this.user = top.Scp.User }, getUserInfo(){ var param = { modelFilePath: "/platf/user-info/entity/SysUserInfoBizEntity.xml", pageSize: 10, pageNum: 1, __zcQuery: false, __returnCount: true, __bottomSummary: false, } let userId = top.Scp.User && top.Scp.User.fuserid if(userId){ let queryCdions = { join: 'and', items:[ { sign: 'eq', name: 'FUSERID', dataType: 'dbString', value: userId, enable: true } ] } let __body = JSON.stringify({queryCdions: queryCdions}) param.__body = __body query(param).then((res)=>{ let data = res.dataPack && res.dataPack.rows if(data && data.length){ this.userInfo = data[0] let form = { FSEX: "", FBIRTHDAY: "", FMBPHONE: "", FEMAIL: "", FQQ: "", FWEIXIN: "", FUSERSFZ: "", FADDRESS: [], FUSERPHOTO: '', FUSERSFZPIC1: '', FUSERSFZPIC2: '', } form = Object.assign(form, data[0]) this.$refs.userUpdate.form = form this.$refs.userUpdate.copyForm = {...form} } }) } }, _getImageUrl(path) { let token = getToken(); if (typeof path == "string") { path = path.replace(/\\/g, "/"); } return `${this.reviewUrl}?relativePath=${path}&access_token=${token}`; }, } } </script> <template> <div class="app-container" style="height: 100%;"> <el-row v-if="user" style="height: 100%;"> <el-col :span="6" :xs="24" style="height: 100%;"> <user-card :user="userCardInfo" :avatar="avatar" ref="userCard" /> </el-col> <el-col :span="18" :xs="24" style="padding-left: 20px;height: 100%;"> <el-card class="r-card" :body-style="{padding:'0 20px'}"> <el-tabs v-model="activeTab"> <el-tab-pane :label="userLabel" :name="userLabel"> <user-update ref="userUpdate" /> </el-tab-pane> <el-tab-pane :label="bzLabel" :name="bzLabel"> <bz-update ref="bzUpdate" /> </el-tab-pane> </el-tabs> </el-card> </el-col> </el-row> </div> </template> <script> import UserCard from './components/UserCard' import UserUpdate from './components/UserUpdate' import BzUpdate from './components/BzUpdate' import { getToken } from '@main/utils/auth' import { query,getBzList } from '@main/api/user.js' export default { name: 'Profile', components: { UserCard,UserUpdate, BzUpdate }, data() { return { user: {}, activeTab: this.$t("hivuiMain_app_user", { default: '用户' }), userInfo:{}, bzList:[], userLabel: this.$t("hivuiMain_app_user", { default: '用户' }), bzLabel: this.$t("hivuiMain_app_orgbz", { default: '岗编' }) } }, computed: { avatar(){ if(this.userInfo && this.userInfo.FUSERPHOTO){ return this._getImageUrl(this.userInfo.FUSERPHOTO) }else{ return false } }, userCardInfo(){ console.log('userInfo', this.userInfo) return Object.assign(this.user, this.userInfo \|\| {}) }, reviewUrl(){ return this.$HI.review.includes(window.HIVUI_SETTING.url) ? this.$HI.review : window.HIVUI_SETTING.url + this.$HI.review } }, created() { this.getUser(); this.getUserInfo(); this.getBzList(); }, methods: { getBzList(){ getBzList().then(res =>{ this.bzList = res.dataPack; let curtBz = this.bzList.filter(res => res.fdefaultbz)[0] this.$refs.userCard.bzList = this.bzList this.$refs.bzUpdate.bzList = this.bzList if(curtBz && curtBz.fbzid){ this.$refs.bzUpdate.curtBzId = curtBz.fbzid } }) }, getUser() { this.user = top.Scp.User }, getUserInfo(){ var param = { modelFilePath: "/platf/user-info/entity/SysUserInfoBizEntity.xml", pageSize: 10, pageNum: 1, __zcQuery: false, __returnCount: true, __bottomSummary: false, } let userId = top.Scp.User && top.Scp.User.fuserid if(userId){ let queryCdions = { join: 'and', items:[ { sign: 'eq', name: 'FUSERID', dataType: 'dbString', value: userId, enable: true } ] } let __body = JSON.stringify({queryCdions: queryCdions}) param.__body = __body query(param).then((res)=>{ let data = res.dataPack && res.dataPack.rows if(data && data.length){ this.userInfo = data[0] let form = { FSEX: "", FBIRTHDAY: "", FMBPHONE: "", FEMAIL: "", FQQ: "", FWEIXIN: "", FUSERSFZ: "", FADDRESS: [], FUSERPHOTO: '', FUSERSFZPIC1: '', FUSERSFZPIC2: '', } form = Object.assign(form, data[0]) this.$refs.userUpdate.form = form } }) } }, _getImageUrl(path) { let token = getToken(); if (typeof path == "string") { path = path.replace(/\\/g, "/"); } return `${this.reviewUrl}?relativePath=${path}&access_token=${token}`; }, } } </script>

Ignore Space Show notes View

project/hivuiMain/views/personalCenter/index.vue

<el-col :span="18" :xs="24" style="padding: 10px;height: 100%;box-sizing: border-box">
        <el-card class="r-card" style="height: 100%;min-height: 772px;" :body-style="{padding:'0 20px',height: '100%'}">
          <el-tabs v-model="activeTab">
            <el-tab-pane :label="userLabel" :name="userLabel">
              <user-update ref="userUpdate" />
            </el-tab-pane>
            <el-tab-pane :label="bzLabel" :name="bzLabel">
              <bz-update ref="bzUpdate" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

</el-row>
  </div>
</template>

export default {
  name: 'Profile',
  components: { UserCard,UserUpdate, BzUpdate },
  data() {
    return {
      user: {},
      activeTab: this.$t("hivuiMain_app_user", { default: '用户' }),
      userInfo:{},
      bzList:[],
      userLabel: this.$t("hivuiMain_app_user", { default: '用户' }),
      bzLabel: this.$t("hivuiMain_app_orgbz", { default: '岗编' })
    }
  },
  computed: {
    avatar(){
      if(this.userInfo && this.userInfo.FUSERPHOTO){
        return this._getImageUrl(this.userInfo.FUSERPHOTO)
      }else{
        return false
      }
    },
    userCardInfo(){
      console.log('userInfo', this.userInfo)
      return Object.assign(this.user, this.userInfo || {})
    },
    reviewUrl(){
      return this.$HI.review.includes(window.HIVUI_SETTING.url) ? this.$HI.review : window.HIVUI_SETTING.url + this.$HI.review
    }
  },
  created() {
    this.getUser();
    this.getUserInfo();
    this.getBzList();
  },
  methods: {
    getBzList(){
      getBzList().then(res =>{
        this.bzList = res.dataPack;
        let curtBz = this.bzList.filter(res => res.fdefaultbz)[0]
        this.$refs.userCard.bzList = this.bzList
        this.$refs.bzUpdate.bzList = this.bzList
        if(curtBz && curtBz.fbzid){
          this.$refs.bzUpdate.curtBzId = curtBz.fbzid
        }
      })
    },
    getUser() {
      this.user = top.Scp.User
    },
    getUserInfo(){
      var param = {
        modelFilePath: "/platf/user-info/entity/SysUserInfoBizEntity.xml",
        pageSize: 10,
        pageNum: 1,
        __zcQuery: false,
        __returnCount: true,
        __bottomSummary: false,
      }
      let userId = top.Scp.User && top.Scp.User.fuserid
      if(userId){
        let queryCdions = {
          join: 'and',
          items:[
            {
              sign: 'eq',
              name: 'FUSERID',
              dataType: 'dbString',
              value: userId,
              enable: true
            }
          ]
        }
        let __body = JSON.stringify({queryCdions: queryCdions})
        param.__body = __body
        query(param).then((res)=>{
          let data = res.dataPack && res.dataPack.rows
          if(data && data.length){
            this.userInfo = data[0]
            let form = {
              FSEX: "",
              FBIRTHDAY: "",
              FMBPHONE: "",
              FEMAIL: "",
              FQQ: "",
              FWEIXIN: "",
              FUSERSFZ: "",
              FADDRESS: [],
              FUSERPHOTO: '',
              FUSERSFZPIC1: '',
              FUSERSFZPIC2: '',
            }
            form = Object.assign(form, data[0])
            this.$refs.userUpdate.form = form
            this.$refs.userUpdate.copyForm = {...form}
          }
        })
      }
    },
    _getImageUrl(path) {
      let token = getToken();
      if (typeof path == "string") {
        path = path.replace(/\\/g, "/");
      }
      return `${this.reviewUrl}?relativePath=${path}&access_token=${token}`;
    },
  }
}
</script>

<el-col :span="18" :xs="24" style="padding-left: 20px;height: 100%;">
        <el-card class="r-card" :body-style="{padding:'0 20px'}">
          <el-tabs v-model="activeTab">
            <el-tab-pane :label="userLabel" :name="userLabel">
              <user-update ref="userUpdate" />
            </el-tab-pane>
            <el-tab-pane :label="bzLabel" :name="bzLabel">
              <bz-update ref="bzUpdate" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

</el-row>
  </div>
</template>

export default {
  name: 'Profile',
  components: { UserCard,UserUpdate, BzUpdate },
  data() {
    return {
      user: {},
      activeTab: this.$t("hivuiMain_app_user", { default: '用户' }),
      userInfo:{},
      bzList:[],
      userLabel: this.$t("hivuiMain_app_user", { default: '用户' }),
      bzLabel: this.$t("hivuiMain_app_orgbz", { default: '岗编' })
    }
  },
  computed: {
    avatar(){
      if(this.userInfo && this.userInfo.FUSERPHOTO){
        return this._getImageUrl(this.userInfo.FUSERPHOTO)
      }else{
        return false
      }
    },
    userCardInfo(){
      console.log('userInfo', this.userInfo)
      return Object.assign(this.user, this.userInfo || {})
    },
    reviewUrl(){
      return this.$HI.review.includes(window.HIVUI_SETTING.url) ? this.$HI.review : window.HIVUI_SETTING.url + this.$HI.review
    }
  },
  created() {
    this.getUser();
    this.getUserInfo();
    this.getBzList();
  },
  methods: {
    getBzList(){
      getBzList().then(res =>{
        this.bzList = res.dataPack;
        let curtBz = this.bzList.filter(res => res.fdefaultbz)[0]
        this.$refs.userCard.bzList = this.bzList
        this.$refs.bzUpdate.bzList = this.bzList
        if(curtBz && curtBz.fbzid){
          this.$refs.bzUpdate.curtBzId = curtBz.fbzid
        }
      })
    },
    getUser() {
      this.user = top.Scp.User
    },
    getUserInfo(){
      var param = {
        modelFilePath: "/platf/user-info/entity/SysUserInfoBizEntity.xml",
        pageSize: 10,
        pageNum: 1,
        __zcQuery: false,
        __returnCount: true,
        __bottomSummary: false,
      }
      let userId = top.Scp.User && top.Scp.User.fuserid
      if(userId){
        let queryCdions = {
          join: 'and',
          items:[
            {
              sign: 'eq',
              name: 'FUSERID',
              dataType: 'dbString',
              value: userId,
              enable: true
            }
          ]
        }
        let __body = JSON.stringify({queryCdions: queryCdions})
        param.__body = __body
        query(param).then((res)=>{
          let data = res.dataPack && res.dataPack.rows
          if(data && data.length){
            this.userInfo = data[0]
            let form = {
              FSEX: "",
              FBIRTHDAY: "",
              FMBPHONE: "",
              FEMAIL: "",
              FQQ: "",
              FWEIXIN: "",
              FUSERSFZ: "",
              FADDRESS: [],
              FUSERPHOTO: '',
              FUSERSFZPIC1: '',
              FUSERSFZPIC2: '',
            }
            form = Object.assign(form, data[0])
            this.$refs.userUpdate.form = form
          }
        })
      }
    },
    _getImageUrl(path) {
      let token = getToken();
      if (typeof path == "string") {
        path = path.replace(/\\/g, "/");
      }
      return `${this.reviewUrl}?relativePath=${path}&access_token=${token}`;
    },
  }
}
</script>

Show line notes below