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

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述: 个人中心修改 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 51beb29 commit eeaab1743bfdca9799ec62a2de8bf9ef6c3b9410 hhb authored on 29 May 2023

Showing 1 changed file

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="性别" prop="FSEX"> <el-radio-group v-model="form.FSEX"> <el-radio :label="1">男</el-radio> <el-radio :label="0">女</el-radio> </el-radio-group> </el-form-item> <el-form-item label="出生年月" 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="手机号码" prop="FMBPHONE"> <el-input v-model="form.FMBPHONE"></el-input> </el-form-item> <el-form-item label="邮箱" 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="微信" prop="FWEIXIN"> <el-input v-model="form.FWEIXIN"></el-input> </el-form-item> <el-form-item label="身份证正面" prop="FUSERSFZPIC1"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic1" :show-file-list="false"> <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> <i v-else class="el-icon-plus avatar-uploader-icon sfz"></i> </el-upload> </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"> <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"></i> </el-upload> </el-form-item> <el-form-item label="身份证号" prop="FUSERSFZ"> <el-input v-model="form.FUSERSFZ"></el-input> </el-form-item> <el-form-item label="地址" prop="FADDRESS"> <el-input type="textarea" :rows="5" v-model="form.FADDRESS"></el-input> </el-form-item> <el-form-item label="身份证反面" prop="FUSERSFZPIC2"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic2" :show-file-list="false"> <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> <i v-else class="el-icon-plus avatar-uploader-icon sfz"></i> </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' export default { data(){ return { form:{ 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: '' } }, 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 '' } }, }, mounted(){ debugger }, 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.$HI.review}?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) } let data = {...form} data.$old = {...form} data.$m = '/platf/user-info/entity/SysUserInfoBizEntity.xml' update(data).then(res =>{ this.$message({ type: 'success', message: '修改成功' }) }) } 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"> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; 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; } </style> <template> <el-form :model="form" :rules="rules" ref="form"> <el-row> <el-col :span="12"> <el-form-item label="性别" prop="FSEX"> <el-radio-group v-model="form.FSEX"> <el-radio :label="1">男</el-radio> <el-radio :label="0">女</el-radio> </el-radio-group> </el-form-item> <el-form-item label="出生年月" 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="手机号码" prop="FMBPHONE"> <el-input v-model="form.FMBPHONE"></el-input> </el-form-item> <el-form-item label="邮箱" 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="微信" prop="FWEIXIN"> <el-input v-model="form.FWEIXIN"></el-input> </el-form-item> <el-form-item label="身份证号" prop="FUSERSFZ"> <el-input v-model="form.FUSERSFZ"></el-input> </el-form-item> <el-form-item label="地址" prop="FADDRESS"> <el-input type="textarea" v-model="form.FADDRESS"></el-input> </el-form-item> </el-col> <el-col :span="12" style="padding-left: 20px;text-align:center;"> <el-form-item label="用户头像" prop="FUSERPHOTO"> <el-upload class="avatar-uploader" :http-request="uploadUserPhoto" :show-file-list="false"> <div class="showImg" v-if="userPhotoUrl"> <img :src="userPhotoUrl" class="avatar"> <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"></i> </el-upload> </el-form-item> <el-form-item label="身份证正面" prop="FUSERSFZPIC1"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic1" :show-file-list="false"> <div class="showImg" v-if="sfzPic1Url"> <img :src="sfzPic1Url" class="avatar"> <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> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> <el-form-item label="身份证反面" prop="FUSERSFZPIC2"> <el-upload class="avatar-uploader" :http-request="uploadSfzPic2" :show-file-list="false"> <div class="showImg" v-if="sfzPic2Url"> <img :src="sfzPic2Url" class="avatar"> <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> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </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' export default { data(){ return { form:{ 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: '' } }, 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 '' } }, }, mounted(){ debugger }, 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.$HI.review}?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) } let data = {...form} data.$old = {...form} data.$m = '/platf/user-info/entity/SysUserInfoBizEntity.xml' update(data).then(res =>{ this.$message({ type: 'success', message: '修改成功' }) }) } 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"> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; 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; } </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="性别" prop="FSEX">
           <el-radio-group v-model="form.FSEX">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="出生年月" 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="手机号码" prop="FMBPHONE">
          <el-input v-model="form.FMBPHONE"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" 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="微信" prop="FWEIXIN">
          <el-input v-model="form.FWEIXIN"></el-input>
        </el-form-item>
        <el-form-item label="身份证正面" prop="FUSERSFZPIC1">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadSfzPic1"
            :show-file-list="false">
            <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>
            <i v-else class="el-icon-plus avatar-uploader-icon sfz"></i>
          </el-upload>
        </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">
            <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"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证号" prop="FUSERSFZ">
          <el-input v-model="form.FUSERSFZ"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="FADDRESS">
          <el-input type="textarea" :rows="5" v-model="form.FADDRESS"></el-input>
        </el-form-item>
        <el-form-item label="身份证反面" prop="FUSERSFZPIC2">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadSfzPic2"
            :show-file-list="false">
            <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>
            <i v-else class="el-icon-plus avatar-uploader-icon sfz"></i>
          </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>

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-row>
      <el-col :span="12">
        <el-form-item label="性别" prop="FSEX">
           <el-radio-group v-model="form.FSEX">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="出生年月" 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="手机号码" prop="FMBPHONE">
          <el-input v-model="form.FMBPHONE"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" 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="微信" prop="FWEIXIN">
          <el-input v-model="form.FWEIXIN"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="FUSERSFZ">
          <el-input v-model="form.FUSERSFZ"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="FADDRESS">
          <el-input type="textarea" v-model="form.FADDRESS"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" style="padding-left: 20px;text-align:center;">
        <el-form-item label="用户头像" prop="FUSERPHOTO">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadUserPhoto"
            :show-file-list="false">
            <div class="showImg" v-if="userPhotoUrl">
              <img :src="userPhotoUrl" class="avatar">
              <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"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证正面" prop="FUSERSFZPIC1">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadSfzPic1"
            :show-file-list="false">
            <div class="showImg" v-if="sfzPic1Url">
              <img :src="sfzPic1Url" class="avatar">
              <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>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证反面" prop="FUSERSFZPIC2">
          <el-upload
            class="avatar-uploader"
            :http-request="uploadSfzPic2"
            :show-file-list="false">
            <div class="showImg" v-if="sfzPic2Url">
              <img :src="sfzPic2Url" class="avatar">
              <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>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </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>

Show line notes below