update 代码规范化

疯狂的狮子Li

2023-12-14 031d83828a20b7bc56c1723fe4eaa67fd9d8cd07

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

@@ -1,20 +1,20 @@
<template>
  <div class="user-info-head" @click="editCropper()">
    <img :src="options.img" title="点击上传头像" class="img-circle img-lg" />
    <el-dialog :title="title" v-model="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
    <el-dialog v-model="open" :title="title" width="800px" append-to-body @opened="modalOpened" @close="closeDialog">
      <el-row>
        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
          <vue-cropper
            v-if="visible"
            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"
            :auto-crop="options.autoCrop"
            :auto-crop-width="options.autoCropWidth"
            :auto-crop-height="options.autoCropHeight"
            :fixed-box="options.fixedBox"
            :output-type="options.outputType"
            @real-time="realTime"
          />
        </el-col>
        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
@@ -56,13 +56,13 @@
</template>

<script setup lang="ts">
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';

interface Options {
  img: string | ArrayBuffer | null; // 裁剪图片的地址
  img: string | any; // 裁剪图片的地址
  autoCrop: boolean; // 是否默认生成截图框
  autoCropWidth: number; // 默认生成截图框宽度
  autoCropHeight: number; // 默认生成截图框高度
@@ -73,13 +73,12 @@
  visible: boolean;
}


const userStore = useUserStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const open = ref(false);
const visible = ref(false);
const title = ref("修改头像");
const title = ref('修改头像');

const cropper = ref<any>({});
//图片裁剪数据
@@ -89,8 +88,8 @@
  autoCropWidth: 200,
  autoCropHeight: 200,
  fixedBox: true,
  outputType: "png",
  fileName: "",
  outputType: 'png',
  fileName: '',
  previews: {},
  visible: false
});
@@ -104,8 +103,7 @@
  visible.value = true;
};
/** 覆盖默认上传行为 */
const requestUpload = (): any => {
};
const requestUpload = (): any => {};
/** 向左旋转 */
const rotateLeft = () => {
  cropper.value.rotateLeft();
@@ -121,8 +119,8 @@
};
/** 上传预处理 */
const beforeUpload = (file: any) => {
  if (file.type.indexOf("image/") == -1) {
    proxy?.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
  if (file.type.indexOf('image/') == -1) {
    proxy?.$modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
  } else {
    const reader = new FileReader();
    reader.readAsDataURL(file);
@@ -136,12 +134,12 @@
const uploadImg = async () => {
  cropper.value.getCropBlob(async (data: any) => {
    let formData = new FormData();
    formData.append("avatarfile", data, options.fileName);
    formData.append('avatarfile', data, options.fileName);
    const res = await uploadAvatar(formData);
    open.value = false;
    options.img = res.data.imgUrl;
    userStore.setAvatar(options.img as string)
    proxy?.$modal.msgSuccess("修改成功");
    userStore.setAvatar(options.img as string);
    proxy?.$modal.msgSuccess('修改成功');
    visible.value = false;
  });
};
@@ -164,7 +162,7 @@
}

.user-info-head:hover:after {
  content: "+";
  content: '+';
  position: absolute;
  left: 0;
  right: 0;