dy-admin-manager/src/layout/components/modal/userModal.vue

<template>
  <div class="userModal">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      :label-width="formLabelWidth"
    >
      <el-form-item label="用户头像" prop="avatar">
        <div style="width: 150px !important">
          <el-upload
            class="avatar-uploader"
            action="/api-web/uploadFile"
            accept=".png, .jpg, .jpeg, .gif"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div
            class="tips"
            style="line-height: 1;color: red;"
          >
            支持的格式：png, jpg, jpeg, gif；
          </div>
      </el-form-item>
      <el-form-item label="姓名" prop="realName">
        <el-input
          v-model.trim="form.realName"
          placeholder="请输入姓名"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model.trim.number="form.phone"
          disabled
          placeholder="请输入手机号"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮政编码" prop="postalCode">
        <el-input
          v-model.trim="form.postalCode"
          placeholder="请输入邮政编码"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="通讯地址" prop="contactAddress">
        <el-input
          v-model.trim="form.contactAddress"
          placeholder="请输入通讯地址"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$listeners.close()">取 消</el-button>
      <el-button @click="onRoleSubmit('ruleForm')" type="primary"
        >确 定</el-button
      >
    </span>
  </div>
</template>

<script>
import { getInfo } from "@/api/user";
import { simpleUpdate } from "@/api/systemManage";
import { isvalidPhone } from "@/utils/validate";
import { getToken } from "@/utils/auth";
let validPhone = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入电话号码"));
  } else if (!isvalidPhone(value)) {
    callback(new Error("请输入正确的11位手机号码"));
  } else {
    callback();
  }
};
export default {
  name: "userModel",
  data() {
    return {
      headers: {
        Authorization: getToken(),
      },
      formLabelWidth: "100px",
      form: {
        id: null,
        avatar: null,
        realName: null,
        gender: null,
        phone: null,
        contactAddress: null,
        postalCode: null
      },
      rules: {
        avatar: [
          { required: true, message: "请上传用户头像", trigger: "blur, change" }
        ],
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        phone: [
          {
            type: "number",
            required: true,
            validator: validPhone,
            trigger: "blur"
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.__init();
  },
  methods: {
    async __init() {
      try {
        const res = await getInfo()
        const { id, avatar,realName,gender,phone,contactAddress,postalCode } = res.data
        this.form = {
          id,
          avatar,
          realName,
          gender,
          phone,
          contactAddress,
          postalCode
        }
      } catch(e) {}
    },
    handleAvatarSuccess(res) {
      this.form.avatar = res.data.url;
    },
    beforeAvatarUpload(file) {
      const imageType = {
        "image/png": true,
        "image/jpg": true,
        "image/jpeg": true,
        "image/gif": true
      };
      const isImage = imageType[file.type];
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImage) {
        this.$message.error("只能上传图片格式!");
        return false
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false
      }
      // const imageWidth = this.imageWidthM;
      // const imageHeigh = this.imageHeightM;
      // const _URL = window.URL || window.webkitURL;
      // const isSize = new Promise((resolve, reject) => {
      //   const img = new Image();
      //   img.onload = function () {
      //     if (imageWidth && imageHeigh) {
      //       this.width === imageWidth && this.height === imageHeigh
      //         ? resolve()
      //         : reject(`请上传${imageWidth}x${imageHeigh}尺寸图片`);
      //     } else if (imageWidth && !imageHeigh) {
      //       this.width === imageWidth
      //         ? resolve()
      //         : reject(`请上传宽为${imageWidth}的图片`);
      //     } else if (!imageWidth && imageHeigh) {
      //       this.height === imageHeigh
      //         ? resolve()
      //         : reject(`请上传高为${imageHeigh}的图片`);
      //     } else {
      //       resolve();
      //     }
      //   };
      //   img.src = _URL.createObjectURL(file);
      // }).then(
      //   () => {
      //     return file;
      //   },
      //   (src) => {
      //     this.$message.error(src);
      //     this.uploadImgLoading = false;
      //     return Promise.reject();
      //   }
      // );
      //  && isSize
      return isImage && isLt2M;
    },
    onRoleSubmit() {
      // employee/simpleUpdate
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          const { phone, ...res } = this.form
          simpleUpdate({...res}).then((res) => {
              this.messageTips("修改", res);
            });
        } else {
          return;
        }
      });
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success(title + "成功");
        const { realName, avatar } = this.form
        this.$store.dispatch('user/setUserName', realName)
        this.$store.dispatch('user/setUserAvatar', avatar)
        this.$listeners.close();
      } else {
        this.$message.error(res.msg);
      }
    },
  }
};
</script>

<style lang="less" scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #e7e7e7;
  width: 150px;
  height: 150px;
}
.avatar {
  width: 100%;
  height: 100%;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.dialog-footer {
  width: 100%;
  display: block;
  text-align: right;
}
/deep/.el-select,
/deep/.el-date-editor.el-input {
  width: 100% !important;
}
.setWidth {
  display: inline-block;
}
</style>