表格右侧工具栏组件

RuoYi

2020-08-10 74f52677be7718d63eef89e01c367058a2e43e57

 ruoyi-ui/src/views/system/user/profile/userAvatar.vue

@@ -1,7 +1,7 @@
<template>

  <div>

    <img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" />

    <el-dialog :title="title" :visible.sync="open" width="800px">

    <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

@@ -13,6 +13,7 @@
            :autoCropHeight="options.autoCropHeight"

            :fixedBox="options.fixedBox"

            @realTime="realTime"

            v-if="visible"

          />

        </el-col>

        <el-col :xs="24" :md="12" :style="{height: '350px'}">

@@ -24,7 +25,7 @@
      <br />

      <el-row>

        <el-col :lg="2" :md="2">

          <el-upload :show-file-list="false" :before-upload="beforeUpload">

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

@@ -44,7 +45,7 @@
          <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-button type="primary" size="small" @click="uploadImg()">提 交</el-button>

        </el-col>

      </el-row>

    </el-dialog>

@@ -67,6 +68,8 @@
    return {

      // 是否显示弹出层

      open: false,

      // 是否显示cropper

      visible: false,

      // 弹出层标题

      title: "修改头像",

      options: {

@@ -83,6 +86,13 @@
    // 编辑头像

    editCropper() {

      this.open = true;

    },

    // 打开弹出层结束时的回调

    modalOpened() {

      this.visible = true;

    },

    // 覆盖默认的上传行为

    requestUpload() {

    },

    // 向左旋转

    rotateLeft() {

@@ -118,11 +128,10 @@
          if (response.code === 200) {

            this.open = false;

            this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;

            store.commit('SET_AVATAR', this.options.img);

            this.msgSuccess("修改成功");

          } else {

            this.msgError(response.msg);

          }

          this.$refs.cropper.clearCrop();

          this.visible = false;

        });

      });

    },