supplier_system/src/dashoo.cn/frontend_web/src/pages/system/usersetting.vue

<style>
  .input-with-select .el-select .el-input {
    width: 110px;
  }

  .input-with-select .el-input-group__append {
    background-color: #fff;
  }

</style>

<template>
  <el-card style="min-height: calc(100vh - 92px);">
    <div slot="header" style="height: 20px;">
      <span style="float: left;">
        <i class="icon icon-table2"></i>
      </span>
      <el-breadcrumb class="heading" style="float: left; margin-left: 5px">
        <el-breadcrumb-item :to="{ path: '/' }">平台首页</el-breadcrumb-item>
        <el-breadcrumb-item>账号设置</el-breadcrumb-item>
      </el-breadcrumb>
      <span style="float: right;">
        <el-button size="mini" type="primary" class="el-button--small" style="margin-left: 8px"
          @click="savedata('form')">保存</el-button>
      </span>
    </div>
    <el-row>
      <el-col :span="16">
        <el-form ref="form" :model="form" :rules="rulesform" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="账号">
                <el-input v-model="authUser.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编码">
                <el-input v-model="form.CompanyCode"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item required prop="Realname" label="名称">
              <el-input v-model="form.Realname"></el-input>
            </el-form-item>

            <el-form-item label="单位地址">
              <el-input v-model="form.Address"></el-input>
            </el-form-item>

            <el-col :span="12">
              <el-form-item label="联系人">
                <el-input v-model="form.Manager"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="手机">
                <el-input v-model="form.Telephone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="座机">
                <el-input v-model="form.Mobile"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="Email">
                <el-input v-model="form.Email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="备注">
            <el-input type="textarea" :rows="4" v-model="form.Description"></el-input>
          </el-form-item>

        </el-form>
      </el-col>
      <el-col :span="2">&nbsp;</el-col>
      <el-col :span="5">
        <el-upload class="avatar-uploader" :action="'http://'+host+'/api/users/uploadphoto'" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="usersettingavatar">
          <img v-else class="usersettingavatar" src="../../assets/img/avatar-default.jpg">
        </el-upload>
        <div style="font-size:14px;color:#5D6A76;margin-left:55px;margin-bottom:20px;margin-top:10px;">上传头像</div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: 'usersetting',
    data() {
      return {
        form: {
          CompanyCode: '',
          Realname: '',
          Address: '',
          Manager: '',
          Telephone: '',
          Mobile: '',
          Email: '',
          Description: '',
          Photo: ''
        },
        host: '',
        imageUrl: '',
        rulesform: {
          Realname: [{
            required: true,
            message: '请输入单位名称',
            trigger: 'blur'
          }]
        }
      }
    },
    computed: mapGetters({
      authUser: 'authUser'
    }),
    created() {
      // initial data
      this.form.CompanyCode = this.authUser.Profile.CompanyCode
      this.form.Realname = this.authUser.Profile.Realname
      this.form.Address = this.authUser.Profile.Address
      this.form.Manager = this.authUser.Profile.Manager
      this.form.Telephone = this.authUser.Profile.Telephone
      this.form.Mobile = this.authUser.Profile.Mobile
      this.form.Email = this.authUser.Profile.Email
      this.form.Description = this.authUser.Profile.Description
      this.form.Photo = this.authUser.Profile.Photo
      this.host = this.authUser.Profile.Host
      if (this.form.Photo !== '') {
        this.imageUrl = `http://${this.host}${this.form.Photo}`
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.form.Photo = res
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforeAvatarUpload(file) {
        const isJPG = (file.type.indexOf('image/') === 0)
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 图片 格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 1MB!')
          return false
        }
        return true
      },
      savedata(formName) {
        let _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.put('users/membersetting', _this.form)
              .then(res => {
                // response
                if (res.data.code === 0) {
                  _this.$message({
                    type: 'success',
                    message: res.data.message
                  })
                  this.$store.commit('SET_Profile', this.form)
                } else {
                  _this.$message({
                    type: 'warning',
                    message: res.data.message
                  })
                }
              })
              .catch(() => {})
          }
        })
      }
    }
  }

</script>

<style>
  .page {
    margin: 50px;
    padding: 20px 40px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .usersettingavatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>