人员管理-在职员工台账、合同管理联调

gaoluyang

3 天以前 b92ea6fb8b4a75a0d7c561bd045f1a8b1720ddd1

 src/views/system/user/profile/userAvatar.vue

@@ -4,18 +4,9 @@
    <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">

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

            :outputType="options.outputType"

            @realTime="realTime"

            v-if="visible"

          />

          <vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop"

            :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight" :fixedBox="options.fixedBox"

            :outputType="options.outputType" @realTime="realTime" v-if="visible" />

        </el-col>

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

          <div class="avatar-upload-preview">

@@ -26,15 +17,12 @@
      <br />

      <el-row>

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

          <el-upload

            action="#"

            :http-request="requestUpload"

            :show-file-list="false"

            :before-upload="beforeUpload"

          >

          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">

            <el-button>

              选择

              <el-icon class="el-icon--right"><Upload /></el-icon>

              <el-icon class="el-icon--right">

                <Upload />

              </el-icon>

            </el-button>

          </el-upload>

        </el-col>

@@ -59,17 +47,17 @@
</template>



<script setup>

import "vue-cropper/dist/index.css";

import { VueCropper } from "vue-cropper";

import { uploadAvatar } from "@/api/system/user";

import useUserStore from "@/store/modules/user";

import "vue-cropper/dist/index.css"

import { VueCropper } from "vue-cropper"

import { uploadAvatar } from "@/api/system/user"

import useUserStore from "@/store/modules/user"



const userStore = useUserStore();

const { proxy } = getCurrentInstance();

const userStore = useUserStore()

const { proxy } = getCurrentInstance()



const open = ref(false);

const visible = ref(false);

const title = ref("修改头像");

const open = ref(false)

const visible = ref(false)

const title = ref("修改头像")



//图片裁剪数据

const options = reactive({

@@ -81,66 +69,75 @@
  outputType: "png",         // 默认生成截图为PNG格式

  filename: 'avatar',        // 文件名称

  previews: {}               //预览数据

});

})



/** 编辑头像 */

function editCropper() {

  open.value = true;

  open.value = true

}



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

function modalOpened() {

  visible.value = true;

  visible.value = true

}



/** 覆盖默认上传行为 */

function requestUpload() {}

function requestUpload() { }



/** 向左旋转 */

function rotateLeft() {

  proxy.$refs.cropper.rotateLeft();

  proxy.$refs.cropper.rotateLeft()

}



/** 向右旋转 */

function rotateRight() {

  proxy.$refs.cropper.rotateRight();

  proxy.$refs.cropper.rotateRight()

}



/** 图片缩放 */

function changeScale(num) {

  num = num || 1;

  proxy.$refs.cropper.changeScale(num);

  num = num || 1

  proxy.$refs.cropper.changeScale(num)

}



/** 上传预处理 */

function beforeUpload(file) {

  if (file.type.indexOf("image/") == -1) {

    proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");

    proxy.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")

  } else {

    const reader = new FileReader();

    reader.readAsDataURL(file);

    const reader = new FileReader()

    reader.readAsDataURL(file)

    reader.onload = () => {

      options.img = reader.result;

      options.filename = file.name;

    };

      options.img = reader.result

      options.filename = file.name

    }

  }

}



/** 上传图片 */

function uploadImg() {

  proxy.$refs.cropper.getCropBlob(data => {

    let formData = new FormData();

    formData.append("avatarfile", data, options.filename);

    let formData = new FormData()

    formData.append("avatarfile", data, options.filename)

    uploadAvatar(formData).then(response => {

      open.value = false;

      options.img = import.meta.env.VITE_APP_BASE_API + response.imgUrl;

      userStore.avatar = options.img;

      proxy.$modal.msgSuccess("修改成功");

      visible.value = false;

    });

  });

      open.value = false

      options.img = import.meta.env.VITE_APP_BASE_API + '/profile/' + response.imgUrl

      userStore.avatar = options.img

      proxy.$modal.msgSuccess("修改成功")

      visible.value = false

    })

  })

}



/** 实时预览 */

function realTime(data) {

  options.previews = data;

  options.previews = data

}



/** 关闭窗口 */

function closeDialog() {

  options.img = userStore.avatar;

  options.visible = false;

  options.img = userStore.avatar

  options.visible = false

}

</script>