【更新】前端更新用户头像上传，个人中心信息修改

_web/src/api/modular/system/loginManage.js

@@ -62,20 +62,6 @@ export function getTenantOpen (parameter) {
  })
}
/**
 * 获取用户头像
 *
 * @author yubaoshan
 * @date 2020/5/26 19:08
 */
export function previewAvatar (parameter) {
  return axios({
    url: '/system/previewAvatar',
    method: 'get',
    params: parameter
  })
}
/**
 * 获取短信验证码
 *

_web/src/api/modular/system/userManage.js

@@ -181,3 +181,31 @@ export function sysUserSelector (parameter) {
    params: parameter
  })
}
/**
 * 修改头像
 *
 * @author yubaoshan
 * @date 2020/9/20 2:21
 */
export function sysUserUpdateAvatar (parameter) {
  return axios({
    url: '/sysUser/updateAvatar',
    method: 'post',
    data: parameter
  })
}
/**
 * 更新基本信息
 *
 * @author yubaoshan
 * @date 2020/9/20 03:12
 */
export function sysUserUpdateInfo (parameter) {
  return axios({
    url: '/sysUser/updateInfo',
    method: 'post',
    data: parameter
  })
}

_web/src/store/modules/user.js

@@ -70,14 +70,16 @@ const user = {
      return new Promise((resolve, reject) => {
        getLoginUser().then(response => {
          if (response.success) {
              const data = response.data
              commit('SET_ADMINTYPE', data.adminType)
              commit('SET_ROLES', 1)
              commit('SET_BUTTONS', data.permissions)
              commit('SET_INFO', data)
              commit('SET_NAME', { name: data.name, welcome: welcome() })
              commit('SET_AVATAR', data.avatar)
              resolve(data)
            const data = response.data
            commit('SET_ADMINTYPE', data.adminType)
            commit('SET_ROLES', 1)
            commit('SET_BUTTONS', data.permissions)
            commit('SET_INFO', data)
            commit('SET_NAME', { name: data.name, welcome: welcome() })
            if (data.avatar != null) {
              commit('SET_AVATAR', process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + data.avatar)
            }
            resolve(data)
          } else {
            // eslint-disable-next-line no-undef
            reject(new Error(data.message))

_web/src/views/system/account/settings/AvatarModal.vue

@@ -48,14 +48,17 @@
        <a-button icon="redo" @click="rotateRight"/>
      </a-col>
      <a-col :lg="{span: 2, offset: 6}" :md="2">
        <a-button type="primary" @click="finish('blob')">保存</a-button>
        <a-button type="primary" @click="finish('blob')" :loading="uploading">保存</a-button>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>
export default {
  import { sysFileInfoUpload } from '@/api/modular/system/fileManage'
  import { sysUserUpdateAvatar } from '@/api/modular/system/userManage'
  export default {
  data () {
    return {
      visible: false,
@@ -64,7 +67,6 @@ export default {
      fileList: [],
      uploading: false,
      options: {
        // img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        img: '',
        autoCrop: true,
        autoCropWidth: 200,
@@ -98,6 +100,7 @@ export default {
      this.$refs.cropper.rotateRight()
    },
    beforeUpload (file) {
      this.fileList = file
      const reader = new FileReader()
      // 把Array Buffer转化为blob 如果是base64不需要
      // 转化为base64
@@ -107,56 +110,52 @@ export default {
      }
      // 转化为blob
      // reader.readAsArrayBuffer(file)
      return false
    },
    // 上传图片（点击上传按钮）
    finish (type) {
      console.log('finish')
      const _this = this
      const formData = new FormData()
      // 输出
      if (type === 'blob') {
        this.uploading = true
        this.$refs.cropper.getCropBlob((data) => {
          const img = window.URL.createObjectURL(data)
          this.model = true
          this.modelSrc = img
          formData.append('file', data, this.fileName)
          this.$http.post('https://www.mocky.io/v2/5cc8019d300000980a055e76', formData, { contentType: false, processData: false, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
            .then((response) => {
              console.log('upload response:', response)
              // var res = response.data
              // if (response.status === 'done') {
              //   _this.imgFile = ''
              //   _this.headImg = res.realPathList[0] // 完整路径
              //   _this.uploadImgRelaPath = res.relaPathList[0] // 非完整路径
              //   _this.$message.success('上传成功')
              //   this.visible = false
              // }
              _this.$message.success('上传成功')
              _this.$emit('ok', response.url)
              _this.visible = false
            })
          const files = new window.File(
            [data],
            this.fileList.name,
            { type: this.fileList.type }
          )
          const formData = new FormData()
          formData.append('file', files)
          sysFileInfoUpload(formData).then((res) => {
            if (res.success) {
              this.updateAvatar(res.data)
              this.$emit('ok', res.data)
            } else {
              this.uploading = false
              this.$message.error(res.message)
            }
          })
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.model = true
          this.modelSrc = data
          console.log(data)
        })
      }
    },
    okHandel () {
      const vm = this
      vm.confirmLoading = true
      setTimeout(() => {
        vm.confirmLoading = false
        vm.close()
        vm.$message.success('上传头像成功')
      }, 2000)
    updateAvatar (data) {
      const params = {
        id: this.id,
        avatar: data
      }
      sysUserUpdateAvatar(params).then((res) => {
        this.uploading = false
        if (res.success) {
          this.visible = false
          this.$message.success('头像上传修改成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    realTime (data) {
      this.previews = data
    }

_web/src/views/system/account/settings/BaseSetting.vue

@@ -3,56 +3,48 @@
    <a-row :gutter="16">
      <a-col :md="24" :lg="16">
        <a-form layout="vertical">
        <a-form layout="vertical" :form="form">
          <a-form-item
            label="昵称"
          >
            <a-input placeholder="给自己起个名字" />
            <a-input placeholder="给自己起个昵称吧" v-decorator="['nickName']"/>
          </a-form-item>
          <a-form-item
            label="Bio"
            label="生日"
          >
            <a-textarea rows="4" placeholder="You are not alone."/>
            <a-date-picker placeholder="请选择生日" @change="onChange" style="width: 100%" v-decorator="['birthday', {rules: [{required: true, message: '请选择生日！'}]}]" />
          </a-form-item>
          <a-form-item
            label="电子邮件"
            :required="false"
            label="性别"
          >
            <a-input placeholder="exp@admin.com"/>
            <a-radio-group v-decorator="['sex',{rules: [{ required: true, message: '请选择性别！' }]}]" >
              <a-radio v-for="(item,index) in sexData" :key="index" :value="item.code">{{ item.name }}</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="加密方式"
            :required="false"
            label="手机"
          >
            <a-select defaultValue="aes-256-cfb">
              <a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
              <a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
              <a-select-option value="chacha20">chacha20</a-select-option>
            </a-select>
            <a-input placeholder="请输入手机号" v-decorator="['phone', {rules: [{required: true, message: '请输入手机号！'}]}]"/>
          </a-form-item>
          <a-form-item
            label="连接密码"
            :required="false"
            label="电话"
          >
            <a-input placeholder="h3gSbecd"/>
            <a-input placeholder="请输入电话" v-decorator="['tel', {rules: [{required: true, message: '请输入电话！'}]}]"/>
          </a-form-item>
          <a-form-item
            label="登录密码"
            label="电子邮件"
            :required="false"
          >
            <a-input placeholder="密码"/>
            <a-input placeholder="请输入电子邮件地址" v-decorator="['email', {type: 'email',message: '请输入正确的邮箱号',rules: [{required: true, message: '请输入正确的邮箱号！'}]}]"/>
          </a-form-item>
          <a-form-item>
            <a-button type="primary">提交</a-button>
            <a-button style="margin-left: 8px">保存</a-button>
            <a-button type="primary" @click="submitUserInfo">更新基本信息</a-button>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
        <div class="ant-upload-preview" @click="$refs.modal.edit(1)" >
        <div class="ant-upload-preview" @click="$refs.modal.edit(userInfo.id)" >
          <a-icon type="cloud-upload-o" class="upload-icon"/>
          <div class="mask">
            <a-icon type="plus" />
@@ -69,8 +61,12 @@
</template>
<script>
import AvatarModal from './AvatarModal'
  import store from '@/store'
  import AvatarModal from './AvatarModal'
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import { sysUserUpdateInfo } from '@/api/modular/system/userManage'
// mapActions
export default {
  components: {
    AvatarModal
@@ -79,6 +75,8 @@ export default {
    return {
      // cropper
      preview: {},
      form: this.$form.createForm(this),
      sexData: [],
      option: {
        img: '/avatar2.jpg',
        info: true,
@@ -92,13 +90,69 @@ export default {
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1]
        fixedNumber: [1, 1],
        // userInfo
        birthdayString: ''
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted () {
    this.initUserInfo()
  },
  methods: {
    // ...mapActions(['GetInfo']),
    /**
     * 初始化用户信息
     */
    initUserInfo () {
      setTimeout(() => {
        this.form.setFieldsValue(
          {
            birthday: moment(this.userInfo.birthday, 'YYYY-MM-DD'),
            nickName: this.userInfo.nickName,
            sex: this.userInfo.sex.toString(),
            email: this.userInfo.email,
            phone: this.userInfo.phone,
            tel: this.userInfo.tel
          }
        )
        this.birthdayString = moment(this.userInfo.birthday).format('YYYY-MM-DD')
        this.option.img = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + this.userInfo.avatar
        this.getSexData()
      }, 100)
    },
    /**
     * 日期需单独转换
     */
    onChange (date, dateString) {
      this.birthdayString = dateString
    },
    submitUserInfo () {
      const { form: { validateFields } } = this
      validateFields((err, values) => {
        if (!err) {
          values.birthday = this.birthdayString
          values.id = this.userInfo.id
          sysUserUpdateInfo(values).then((res) => {
            if (res.success) {
              this.$message.success('个人信息更新成功')
              store.dispatch('GetInfo').then(() => {})
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    getSexData () {
      this.sexData = this.$options.filters['dictData']('sex')
    },
    setavatar (url) {
      this.option.img = url
      this.option.img = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + url
      store.dispatch('GetInfo').then(() => {})
    }
  }
}

_web/src/views/system/dashboard/Workplace.vue

@@ -112,13 +112,10 @@
<script>
  import { timeFix } from '@/utils/util'
  import { mapState } from 'vuex'
  import { PageView } from '@/layouts'
  import HeadInfo from '@/components/tools/HeadInfo'
  import { Radar } from '@/components'
  import { getRoleList, getServiceList } from '@/api/manage'
  const DataSet = require('@antv/data-set')
  export default {
@@ -190,8 +187,7 @@
    },
    created () {
      this.user = this.userInfo
      this.avatar = this.userInfo.avatar
      this.avatar = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + this.userInfo.avatar
      getRoleList().then(res => {
        // console.log('workplace -> call getRoleList()', res)
      })