|
@@ -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>
|