修改个人会员

src/api/system/appUser.js

@@ -29,7 +29,7 @@ export function addUser(data) {
 // 修改会员
 export function updateUser(data) {
   return request({
-    url: '/system/appUser',
+    url: '/system/appUser/editAppMember',
     method: 'put',
     data: data
   })

src/views/system/appUser/detail/appUserAvatar.vue

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-lg" />
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <vue-cropper
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :autoCrop="options.autoCrop"
+            :autoCropWidth="options.autoCropWidth"
+            :autoCropHeight="options.autoCropHeight"
+            :fixedBox="options.fixedBox"
+            @realTime="realTime"
+            v-if="visible"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <div class="avatar-upload-preview">
+            <img :src="previews.url" :style="previews.img" />
+          </div>
+        </el-col>
+      </el-row>
+      <br />
+      <el-row>
+        <el-col :lg="2" :md="2">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button size="small">
+              上传
+              <i class="el-icon-upload el-icon--right"></i>
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 2}" :md="2">
+          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 2, offset: 6}" :md="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import { VueCropper } from "vue-cropper";
+import { uploadAvatar } from "@/api/system/appUser";
+import { uploadFile } from "@/api/common/common";
+
+export default {
+  components: { VueCropper },
+  props: {
+    personal: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 是否显示cropper
+      visible: false,
+      // 弹出层标题
+      title: "修改头像", 
+      options: {
+        img: this.personal.avatar, //裁剪图片的地址
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 200, // 默认生成截图框宽度
+        autoCropHeight: 200, // 默认生成截图框高度
+        fixedBox: true // 固定截图框大小 不允许改变
+      },
+      previews: {}
+    };
+  },
+  mounted() {  
+    //  console.log(this.personal)
+  },
+  methods: {
+    // 编辑头像
+    editCropper() {
+      this.open = true;
+    },
+    // 打开弹出层结束时的回调
+    modalOpened() {
+      this.visible = true;
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf("image/") == -1) {
+        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
+      } else {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          this.options.img = reader.result;
+        };
+      }
+    },
+    // 上传图片
+    uploadImg() {
+      this.$refs.cropper.getCropBlob(data => {
+        let formData = new FormData();
+        formData.append("file", data);
+        uploadFile(formData).then(response => {
+          if (response.code === 200) {
+            this.open = false;
+            this.options.img = process.env.VUE_APP_BASE_API + response.fileName;
+            this.personal.avatar = this.options.img;
+            this.msgSuccess("上传成功");
+          }
+          this.visible = false;
+        });
+      });
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.avatar-upload-preview {
+  width: 200px;
+  height: 200px;
+  border-radius: 0%
+}
+</style>

src/views/system/appUser/index.vue

@@ -50,7 +50,7 @@
           v-hasPermi="['system:appUser:remove']"
         >删除</el-button>
       </el-col>
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button
           type="warning"
           icon="el-icon-download"
@@ -58,16 +58,39 @@
           @click="handleExport"
           v-hasPermi="['system:appUser:export']"
         >导出</el-button>
-      </el-col>
+      </el-col> -->
 	  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="selection" width="30" align="center" />
       <el-table-column label="昵称" align="center" prop="nickName" />
-      <el-table-column label="头像" align="center" prop="avatar" />
+      <el-table-column label="头像" align="center" >
+        <template scope="scope">
+            <img width="40" height="40" :src="scope.row.avatar" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="性别"
+        align="center"
+        prop="gender"
+        :formatter="genderFormat"
+        width="50"
+      />
       <el-table-column label="手机号码" align="center" prop="mobile" />
-      <el-table-column label="已加入家族" align="center" prop="join" />
+      <el-table-column
+        label="已加入家族"
+        align="center"
+        prop="joins"
+        :formatter="joinsFormat"
+        width="100"
+      />
+      <el-table-column label="IP地址" align="center" prop="loginIp" />
+      <el-table-column label="最后登录时间" align="center" prop="loginTime" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.loginTime) }}</span>
+            </template>
+          </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -98,31 +121,47 @@
     />
 
     <!-- 添加或修改会员对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body :close-on-click-modal=false>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="页面模板id" prop="templateId">
-          <el-input v-model="form.templateId" placeholder="请输入页面模板id" />
-        </el-form-item>
-        <el-form-item label="昵称" prop="nickName">
-          <el-input v-model="form.nickName" placeholder="请输入昵称" />
-        </el-form-item>
-        <el-form-item label="头像url" prop="avatar">
-          <el-input v-model="form.avatar" placeholder="请输入头像url" />
-        </el-form-item>
-        <el-form-item label="二维码code" prop="qrcode">
-          <el-input v-model="form.qrcode" placeholder="请输入二维码code" />
-        </el-form-item>
-        <el-form-item label="手机号码" prop="mobile">
-          <el-input v-model="form.mobile" placeholder="请输入手机号码" />
-        </el-form-item>
-        <el-form-item label="openid" prop="openid">
-          <el-input v-model="form.openid" placeholder="请输入openid" />
-        </el-form-item>
-        <el-form-item label="openid" prop="verCode">
-          <el-input v-model="form.verCode" placeholder="请输入openid" />
-        </el-form-item>
+        <el-row :gutter="0" type="flex" justify="start">
+          <el-col :span="8">
+            <el-form-item label="昵称" prop="nickName">
+              <el-input v-model="form.nickName" placeholder="请输入昵称" />
+            </el-form-item>
+            <el-form-item label="手机" prop="mobile">
+              <el-input v-model="form.mobile" placeholder="请输入手机号码" :readonly="readonly" />
+            </el-form-item>
+            <el-form-item label="页面模板" prop="templateId">
+              <el-input v-model="form.templateId" placeholder="请选择页面模板" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="性别">
+              <el-select v-model="form.gender" placeholder="请选择">
+                <el-option v-for="dict in genderOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="状态">
+              <el-select v-model="form.state" placeholder="请选择">
+                <el-option v-for="dict in stateOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          
+          <el-col :span="8">
+            <el-form-item label-width="0px" prop="avatar">
+              <div class="text-center">
+                <appUserAvatar :personal="form" :key="reFresh" />
+                ID: {{form.qrcode}}
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -135,15 +174,20 @@
 
 <script>
 import { listUser, getUser, delUser, addUser, updateUser, exportUser } from "@/api/system/appUser";
+import appUserAvatar from "./detail/appUserAvatar";
 
 export default {
   name: "AppUser",
+  components: {
+    appUserAvatar
+  },
   data() {
     return {
       // 遮罩层
       loading: true,
       // 选中数组
       ids: [],
+      nicknames: [],
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -160,12 +204,20 @@ export default {
       open: false,
       // 日期范围
       dateRange: [],
+      // 加入 数据字典
+      joinsOptions: [],
+      // 性别 数据字典
+      genderOptions: [],
+      // 状态 数据字典
+      stateOptions: [],
+      readonly: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         searchValue: null,
       },
+      reFresh: 1,
       // 表单参数
       form: {},
       // 表单校验
@@ -173,8 +225,24 @@ export default {
       }
     };
   },
+  watch:{
+    // 监听form值，只要有改变，则key值reFresh变更。
+    // 然后自定义上传图片组件apUserAvatar重新渲染
+    form(){
+      ++this.reFresh
+    }
+  },
   created() {
     this.getList();
+    this.getDicts("sys_yes_no").then(response => {
+      this.joinsOptions = response.data;
+    });
+    this.getDicts("sys_user_sex").then((response) => {
+      this.genderOptions = response.data;
+    });
+    this.getDicts("app_member_state").then((response) => {
+      this.stateOptions = response.data;
+    });
   },
   methods: {
     /** 查询会员列表 */
@@ -186,6 +254,15 @@ export default {
         this.loading = false;
       });
     },
+    // 加入 字典翻译
+    joinsFormat(row, column) {
+      return this.selectDictLabel(this.joinsOptions, row.joins);
+    },
+    // 性别 字典翻译
+    genderFormat(row, column) {
+      debugger
+      return this.selectDictLabel(this.genderOptions, row.gender);
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -202,11 +279,9 @@ export default {
         mobile: null,
         openid: null,
         verCode: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-        remark: null
+        remark: null,
+        gender: null,
+        state: null,
       };
       this.resetForm("form");
     },
@@ -223,21 +298,25 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
+      this.ids = selection.map(item => item.userId)
+      this.nicknames = selection.map(item => item.nickName)
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
     handleAdd() {
+      this.readonly = false;
       this.reset();
       this.open = true;
       this.title = "添加会员";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      this.readonly = true;
       this.reset();
-      const id = row.id || this.ids
+      const id = row.userId || this.ids;
       getUser(id).then(response => {
+        debugger
         this.form = response.data;
         this.open = true;
         this.title = "修改会员";
@@ -247,30 +326,21 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
-          if (this.form.id != null) {
-            updateUser(this.form).then(response => {
-              if (response.code === 200) {
-                this.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              }
-            });
-          } else {
-            addUser(this.form).then(response => {
-              if (response.code === 200) {
-                this.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              }
-            });
-          }
+          updateUser(this.form).then(response => {
+            if (response.code === 200) {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }
+          });
         }
       });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$confirm('是否确认删除会员编号为"' + ids + '"的数据项?', "警告", {
+      const ids = row.userId || this.ids;
+      const nicknames = row.nickName || this.nicknames;
+      this.$confirm('是否确认删除会员[' + nicknames + ']?', "警告", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"