fix personal avatar

src/api/system/personalPage.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 
 // 查询个人页列表
-export function listPage(query) {
+export function listPersonal(query) {
   return request({
     url: '/system/personalPage/list',
     method: 'get',
@@ -10,7 +10,7 @@ export function listPage(query) {
 }
 
 // 查询个人页详细
-export function getPage(id) {
+export function getPersonal(id) {
   return request({
     url: '/system/personalPage/' + id,
     method: 'get'
@@ -18,7 +18,7 @@ export function getPage(id) {
 }
 
 // 新增个人页
-export function addPage(data) {
+export function addPersonal(data) {
   return request({
     url: '/system/personalPage',
     method: 'post',
@@ -27,7 +27,7 @@ export function addPage(data) {
 }
 
 // 修改个人页
-export function updatePage(data) {
+export function updatePersonal(data) {
   return request({
     url: '/system/personalPage',
     method: 'put',
@@ -36,7 +36,7 @@ export function updatePage(data) {
 }
 
 // 删除个人页
-export function delPage(id) {
+export function delPersonal(id) {
   return request({
     url: '/system/personalPage/' + id,
     method: 'delete'
@@ -44,10 +44,31 @@ export function delPage(id) {
 }
 
 // 导出个人页
-export function exportPage(query) {
+export function exportPersonal(query) {
   return request({
     url: '/system/personalPage/export',
     method: 'get',
     params: query
   })
+}
+// 是否启用修改
+export function changeEnable(id, enable) {
+  const data = {
+    id,
+    enable
+  }
+  return request({
+    url: '/system/personalPage/changeEnable',
+    method: 'put',
+    data: data
+  })
+}
+
+// 个人头像上传
+export function uploadAvatar(data) {
+  return request({
+    url: '/system/personalPage/avatar',
+    method: 'post',
+    data: data
+  })
 }

src/api/system/templatePage.js

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 
 // 查询个人页列表
-export function listPage(query) {
+export function listTemplate(query) {
   return request({
     url: '/system/templatePage/list',
     method: 'get',
@@ -10,7 +10,7 @@ export function listPage(query) {
 }
 
 // 查询个人页详细
-export function getPage(id) {
+export function getTemplate(id) {
   return request({
     url: '/system/templatePage/' + id,
     method: 'get'
@@ -18,7 +18,7 @@ export function getPage(id) {
 }
 
 // 新增个人页
-export function addPage(data) {
+export function addTemplate(data) {
   return request({
     url: '/system/templatePage',
     method: 'post',
@@ -27,7 +27,7 @@ export function addPage(data) {
 }
 
 // 修改个人页
-export function updatePage(data) {
+export function updateTemplate(data) {
   return request({
     url: '/system/templatePage',
     method: 'put',
@@ -36,7 +36,7 @@ export function updatePage(data) {
 }
 
 // 删除个人页
-export function delPage(id) {
+export function delTemplate(id) {
   return request({
     url: '/system/templatePage/' + id,
     method: 'delete'
@@ -44,7 +44,7 @@ export function delPage(id) {
 }
 
 // 导出个人页
-export function exportPage(query) {
+export function exportTemplate(query) {
   return request({
     url: '/system/templatePage/export',
     method: 'get',

src/components/Editor/index.vue

@@ -49,7 +49,6 @@ export default {
     return {
       Quill: null,
       currentValue: "",
-      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
       content: null,
       serverUrl: process.env.VUE_APP_BASE_API+'/common/upload',
       header:{
@@ -214,7 +213,6 @@ export default {
       if (!isLt2M) {
         this.$message.error('上传头像图片大小不能超过 2MB!');
       }
-      this.quillUpdateImg = true
       return isJPG && isLt2M;
     },
     uploadSuccess(res, file) {
@@ -232,17 +230,13 @@ export default {
         quill.setSelection(length + 1)
       } else {
         this.$message.error('图片插入失败')
-      }npm
-      // loading动画消失
-      this.quillUpdateImg = false
+      }
     },
     uploadFile(){
       return process.env.VUE_APP_BASE_API+'/common/uploadImg'
     },
     // 富文本图片上传失败
     uploadError() {
-      // loading动画消失
-      this.quillUpdateImg = false
       this.$message.error('图片插入失败')
     }
   },

src/views/system/personalPage/detail/personalAvatar.vue

@@ -0,0 +1,148 @@
+<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/personalPage";
+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>

src/views/system/personalPage/index.vue

@@ -20,13 +20,9 @@
         />
       </el-form-item>
       <el-form-item label="是否启用" prop="enable">
-        <el-input
-          v-model="queryParams.enable"
-          placeholder="请输入是否启用"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-select v-model="queryParams.enable" placeholder="是否启用" clearable size="small" style="width: 240px">
+          <el-option v-for="dict in enableOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -78,7 +74,6 @@
 
     <el-table v-loading="loading" :data="pageList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键id" align="center" prop="id" />
       <el-table-column label="客户姓名" align="center" prop="customer" />
       <el-table-column label="干系人姓名" align="center" prop="stakeholder" />
       <el-table-column label="干系人生日" align="center" prop="stakeholderBirthday" width="180">
@@ -86,7 +81,11 @@
           <span>{{ parseTime(scope.row.stakeholderBirthday, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="是否启用  1是，0否" align="center" prop="enable" />
+      <el-table-column label="启用" align="center">
+        <template slot-scope="scope">
+          <el-switch v-model="scope.row.enable" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+        </template>
+      </el-table-column>
       <el-table-column label="修改人" align="center" prop="modifyBy" />
       <el-table-column label="修改时间" align="center" prop="modifyTime" width="180">
         <template slot-scope="scope">
@@ -123,14 +122,30 @@
     />
 
     <!-- 添加或修改个人页对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="客户姓名" prop="customer">
-          <el-input v-model="form.customer" placeholder="请输入客户姓名" />
-        </el-form-item>
-        <el-form-item label="干系人姓名" prop="stakeholder">
-          <el-input v-model="form.stakeholder" placeholder="请输入干系人姓名" />
-        </el-form-item>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal=false>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="干系人姓名" prop="stakeholder">
+              <el-input v-model="form.stakeholder" placeholder="请输入干系人姓名" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="" prop="avatar">
+            <div class="text-center">
+              <personalAvatar :personal="form" :key="reFresh" />
+            </div>
+            </el-form-item>
+          </el-col>
+          </el-row>
+          <el-row>
+          <el-col :span="12">
+            <el-form-item label="客户姓名" prop="customer">
+              <el-input v-model="form.customer" placeholder="请输入客户姓名" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
         <el-form-item label="干系人生日" prop="stakeholderBirthday">
           <el-date-picker clearable size="small" style="width: 200px"
             v-model="form.stakeholderBirthday"
@@ -143,12 +158,18 @@
           <el-input v-model="form.avatar" placeholder="请输入头像" />
         </el-form-item>
         <el-form-item label="模板id" prop="templateId">
-          <el-select v-model="form.templateId" placeholder="请选择模板" @change="templateChange">
-            <el-option v-for="item in templateList" :key="item.value" :label="item.label" :value="item.value"/>
+          <el-select v-model="form.templateId" placeholder="请选择模板" >
+            <el-option v-for="item in templateList" :key="item.id" :label="item.title" :value="item.id"/>
           </el-select>
         </el-form-item>
         <el-form-item label="启用" prop="enable">
-          <el-input v-model="form.enable" placeholder="请输入是否启用" />
+          <el-radio-group v-model="form.enable">
+            <el-radio
+              v-for="dict in enableOptions"
+              :key="dict.dictValue"
+              :label="dict.dictValue"
+            >{{dict.dictLabel}}</el-radio>
+          </el-radio-group>
         </el-form-item>
         <el-form-item label="修改人" prop="modifyBy">
           <el-input v-model="form.modifyBy" placeholder="请输入修改人" />
@@ -174,14 +195,16 @@
 </template>
 
 <script>
-import { listPage, getPage, delPage, addPage, updatePage, exportPage } from "@/api/system/personalPage";
-import { templateList } from "@/api/system/templatePage";
+import { listPersonal, getPersonal, delPersonal, addPersonal, updatePersonal, exportPersonal,changeEnable } from "@/api/system/personalPage";
+import { listTemplate } from "@/api/system/templatePage";
 import Editor from '@/components/Editor';
+import personalAvatar from "./detail/personalAvatar";
 
 export default {
   name: "personalPage",
   components: {
-    Editor
+    Editor,
+    personalAvatar
   },
   data() {
     return {
@@ -203,6 +226,8 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // 是否启用数据字典
+      enableOptions: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -218,8 +243,8 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      },
+      rules: {},
+      reFresh: 1,
 
       templateParam:{
         enable: 0
@@ -228,22 +253,32 @@ export default {
 
     };
   },
+  watch:{
+    // 监听form值，只要有改变，则key值reFresh变更。
+    // 然后自定义上传图片组件personalAvatar重新渲染
+    form(){
+      ++this.reFresh
+    }
+  },
   created() {
     this.getList();
     this.getTemplateList();
+    this.getDicts("sys_normal_disable").then((response) => {
+      this.enableOptions = response.data;
+    });
   },
   methods: {
     /** 查询个人页列表 */
     getList() {
       this.loading = true;
-      listPage(this.queryParams).then(response => {
+      listPersonal(this.queryParams).then(response => {
         this.pageList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
     },
     getTemplateList(){
-      templateList(this.templateParam).then(response => {
+      listTemplate(this.templateParam).then(response => {
         this.templateList = response.rows;
       });
     },
@@ -257,6 +292,7 @@ export default {
       this.form = {
         id: null,
         customer: null,
+        avatar : null,
         stakeholder: null,
         stakeholderBirthday: null,
         enable: null,
@@ -284,6 +320,28 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
+    // 用户状态修改
+    handleStatusChange(row) {
+      let text = row.enable === "0" ? "启用" : "停用";
+      this.$confirm(
+        '确认要 ' + text + ' [' + row.title + ']吗?',
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(function () {
+          return changeEnable(row.id, row.enable);
+        })
+        .then(() => {
+          this.msgSuccess(text + "成功");
+        })
+        .catch(function () {
+          row.enable = row.enable === "0" ? "1" : "0";
+        });
+    },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
@@ -291,10 +349,10 @@ export default {
       this.title = "添加个人页";
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    handleUpdate(row) { 
       this.reset();
       const id = row.id || this.ids
-      getPage(id).then(response => {
+      getPersonal(id).then(response => { 
         this.form = response.data;
         this.open = true;
         this.title = "修改个人页";
@@ -305,7 +363,7 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            updatePage(this.form).then(response => {
+            updatePersonal(this.form).then(response => {
               if (response.code === 200) {
                 this.msgSuccess("修改成功");
                 this.open = false;
@@ -313,7 +371,7 @@ export default {
               }
             });
           } else {
-            addPage(this.form).then(response => {
+            addPersonal(this.form).then(response => {
               if (response.code === 200) {
                 this.msgSuccess("新增成功");
                 this.open = false;
@@ -332,7 +390,7 @@ export default {
           cancelButtonText: "取消",
           type: "warning"
         }).then(function() {
-          return delPage(ids);
+          return delPersonal(ids);
         }).then(() => {
           this.getList();
           this.msgSuccess("删除成功");
@@ -346,7 +404,7 @@ export default {
           cancelButtonText: "取消",
           type: "warning"
         }).then(function() {
-          return exportPage(queryParams);
+          return exportPersonal(queryParams);
         }).then(response => {
           this.download(response.msg);
         }).catch(function() {});

src/views/system/templatePage/index.vue

@@ -10,11 +10,11 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-          <el-form-item label="启用" prop="enable">
-            <el-select v-model="queryParams.enable" placeholder="是否启用" clearable size="small" style="width: 240px">
-              <el-option v-for="dict in enableOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
-            </el-select>
-          </el-form-item>
+      <el-form-item label="启用" prop="enable">
+        <el-select v-model="queryParams.enable" placeholder="是否启用" clearable size="small" style="width: 240px">
+          <el-option v-for="dict in enableOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
+        </el-select>
+      </el-form-item>
       <el-form-item label="备注" prop="remarks">
         <el-input
           v-model="queryParams.remarks"
@@ -153,7 +153,11 @@
         </el-form-item>
         <el-form-item label="启用" prop="enable">
           <el-radio-group v-model="form.enable">
-            <el-radio v-for="dict in enableOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+            <el-radio
+              v-for="dict in enableOptions"
+              :key="dict.dictValue"
+              :label="dict.dictValue"
+            >{{dict.dictLabel}}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remarks">
@@ -172,7 +176,7 @@
 </template>
 
 <script>
-import { listPage, getPage, delPage, addPage, updatePage, exportPage } from "@/api/system/templatePage";
+import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate, exportTemplate,changeEnable } from "@/api/system/templatePage";
 import Editor from '@/components/Editor';
 
 export default {
@@ -224,6 +228,7 @@ export default {
     };
   },
   created() {
+    debugger
     this.getList();
     this.getDicts("sys_normal_disable").then((response) => {
       this.enableOptions = response.data;
@@ -233,7 +238,8 @@ export default {
     /** 查询个人页模板列表 */
     getList() {
       this.loading = true;
-      listPage(this.queryParams).then(response => {
+      listTemplate(this.queryParams).then(response => {
+        debugger
         this.pageList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -306,7 +312,7 @@ export default {
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids
-      getPage(id).then(response => {
+      getTemplate(id).then(response => {
         this.form = response.data;
         this.open = true;
         this.title = "修改个人页模板";
@@ -317,7 +323,7 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            updatePage(this.form).then(response => {
+            updateTemplate(this.form).then(response => {
               if (response.code === 200) {
                 this.msgSuccess("修改成功");
                 this.open = false;
@@ -325,7 +331,7 @@ export default {
               }
             });
           } else {
-            addPage(this.form).then(response => {
+            addTemplate(this.form).then(response => {
               if (response.code === 200) {
                 this.msgSuccess("新增成功");
                 this.open = false;
@@ -344,7 +350,7 @@ export default {
           cancelButtonText: "取消",
           type: "warning"
         }).then(function() {
-          return delPage(ids);
+          return delTemplate(ids);
         }).then(() => {
           this.getList();
           this.msgSuccess("删除成功");
@@ -358,7 +364,7 @@ export default {
           cancelButtonText: "取消",
           type: "warning"
         }).then(function() {
-          return exportPage(queryParams);
+          return exportTemplate(queryParams);
         }).then(response => {
           this.download(response.msg);
         }).catch(function() {});