|  | @@ -0,0 +1,263 @@
 | 
	
		
			
				|  |  | +<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) {
 | 
	
		
			
				|  |  | +          simpleUpdate(this.form).then((res) => {
 | 
	
		
			
				|  |  | +              this.messageTips("修改", res);
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +        } else {
 | 
	
		
			
				|  |  | +          return;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    messageTips(title, res) {
 | 
	
		
			
				|  |  | +      if (res.code == 200) {
 | 
	
		
			
				|  |  | +        this.$message.success(title + "成功");
 | 
	
		
			
				|  |  | +        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>
 |