package.json

@@ -21,11 +21,10 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
-    "@electron/remote": "^2.1.2",
     "@element-plus/icons-vue": "^2.3.1",
+    "@electron/remote": "^2.1.2",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vueuse/core": "^10.11.0",
-    "cropperjs": "^1.6.2",
     "crypto-js": "^4.2.0",
     "electron-dl-manager": "^3.0.0",
     "electron-log": "^5.1.7",
@@ -35,11 +34,12 @@
     "js-cookie": "^3.0.5",
     "jsencrypt": "^3.3.2",
     "jsondiffpatch": "0.6.0",
-    "lodash": "^4.17.21",
     "pdfjs-dist": "4.4.168",
+    "lodash": "^4.17.21",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "spark-md5": "^3.0.2",
+    "vue-cropper": "^1.1.4",
     "vue-router": "^4.4.0",
     "xlsx": "^0.18.5"
   },

src/renderer/src/views/classManage/aside.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import {ref,defineProps,defineEmits} from "vue";
+import {ref,defineProps,defineEmits,onMounted} from "vue";
 const activeIndex = ref('0')
 const props = defineProps({
   classList:{
@@ -43,7 +43,9 @@ const handleSelect = (itemDom,pathKey) => {
   // })
   emits('handleSelect',{index,id})
 }
-
+onMounted(() => {
+  console.log(props.classList,'props.classList')
+})
 </script>
 
 <style scoped>

src/renderer/src/views/classManage/classInfo.vue

@@ -36,6 +36,7 @@
   })
   const isDelClass = delClassDemo()
   const userStore = useUserStore().user
+  console.log(userStore,'userStore')
   //删除教室
   const deleteClassRoom = () => {
     ElMessageBox.alert('确认删除该班级？', {
@@ -63,6 +64,7 @@
           classInfo.student = res.rows.filter(item => item.inrole === 'student')
         })
       })
+      console.log(classInfo,'classInfo')
     }
   }
   onMounted(() => {

src/renderer/src/views/classManage/index.vue

@@ -152,6 +152,7 @@
       //   }
       // })
       classList.value = [...response.rows]
+      console.log(classList.value,'classList')
       if(classList.value.length > 0){
         classId.value = classList.value[0].id
         currentIndex.value = 0

src/renderer/src/views/classManage/studentList.vue

@@ -162,7 +162,7 @@
     ],
     birthday: [
       { required: true, message: '请选择出生日期', trigger: 'blur' }
-    ],
+    ]
   })
 
   // 获取班级学生信息
@@ -225,10 +225,6 @@
       studentForm.id = 0
       studentForm.entpid = 0
       studentForm.name = ''
-      studentForm.address = ''
-      studentForm.birthday = ''
-      studentForm.parentname = ''
-      studentForm.parentmobile = ''
       studentVisible.value = true
     }else{
       getStudentmain(id).then((response) => {
@@ -253,7 +249,7 @@
         confirmButtonText: '确认',
         type: 'warning',
       }).then(() => {
-        leaveClass({ classid: props.classId, studentid: studentForm.id, inrole: 'student' }).then(() => {
+        leaveClass({ classid: props.classId, studentid: studentForm.id, inrole: 'student' }).then((response) => {
           ElMessage({
             type: 'info',
             message: '移出成功',

src/renderer/src/views/profile/cropperImage.vue

@@ -1,266 +0,0 @@
-<!-- 裁剪头像弹窗 -->
-<template>
-  <div class="personal-authentica">
-    <div class="context">
-      <div class="text-box" v-loading="upLoading">
-        <!-- 关闭按钮 -->
-        <!-- 内容 -->
-        <div id="Box">
-          <h3>头像设置</h3>
-
-          <!-- 裁剪+效果 -->
-          <div class="box">
-            <div class="box_1">
-              <img :src="filePath" ref="image" />
-            </div>
-
-            <!--裁剪完的图片-->
-            <div class="box_2">
-              <div class="before"></div>
-            </div>
-          </div>
-
-          <!--  裁剪按钮-->
-          <div class="btn">
-            <el-button style="margin-right: 20px">选择</el-button>
-            <input
-              class="upload"
-              type="file"
-              accept=".png, .jpg, .jpeg"
-              @change="uploadImg"
-            />
-
-            <el-button @click="cancle">取消</el-button>
-            <el-button @click="sureSava">提交</el-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { onMounted, reactive, toRefs, ref } from "vue";
-//引入依赖
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
-import { ElMessage } from "element-plus";
-
-export default {
-  props: {
-    filePath: {
-      type: String,
-    },
-    aspectRatio: { // 裁剪比例，需要可传
-      type: Number,
-      default: 1,
-    },
-    userId: {
-      type: String,
-    },
-  },
-  setup(props, context) {
-
-    // 原生上传的文件
-    const uploadImg = (e) => {
-      if (e.target.files && e.target.files[0]) {
-        const file = e.target.files[0];
-        dataFile.image.src = URL.createObjectURL(file);
-        if (dataFile.myCropper) {
-          dataFile.myCropper.destroy();
-        }
-        copper();
-      }
-    };
-
-    const dataFile = reactive({
-      // 裁剪后的图片
-      afterImg: "",
-      // 裁剪的图片
-      image: null,
-      // 进行裁剪
-      myCropper: null,
-    });
-
-    // 实例化裁剪框
-    const copper = () => {
-      dataFile.myCropper = new Cropper(dataFile.image, {
-        /*
-        * viewMode 视图控制
-          - 0 无限制
-          - 1 限制裁剪框不能超出图片的范围
-          - 2 限制裁剪框不能超出图片的范围 且图片填充模式为 cover 最长边填充
-          - 3 限制裁剪框不能超出图片的范围 且图片填充模式为 contain 最短边填充
-        * */
-        viewMode: 1,
-        // 设置图片是否可以拖拽功能
-        /*
-        * dragMode 拖拽图片模式
-          - crop 形成新的裁剪框
-          - move 图片可移动
-          - none 什么也没有
-        * */
-        dragMode: "move",
-        // 是否显示图片后面的网格背景,一般默认为true
-        background: true,
-        // 进行图片预览的效果
-        preview: ".before",
-        // 设置裁剪区域占图片的大小 值为 0-1 默认 0.8 表示 80%的区域
-        autoCropArea: 0.8,
-        // 设置图片是否可以进行收缩功能
-        zoomOnWheel: true,
-        // 是否显示 + 箭头
-        center: true,
-        // 设置裁剪框为固定的宽高比
-        aspectRatio: props.aspectRatio,
-      });
-    };
-
-    // 裁剪后
-    const sureSava = () => {
-      if (dataFile.myCropper) {
-        // 拿到裁剪后的图片
-        dataFile.afterImg = dataFile.myCropper
-          .getCroppedCanvas({
-            imageSmoothingQuality: "high",
-          })
-          .toDataURL("image/jpeg"); // 设置图片格式
-        context.emit("sureSava",convertDataUrlToBlob(dataFile.afterImg))
-      } else {
-        ElMessage({
-          message: "请先选择图片",
-          type: "warning",
-        });
-      }
-    };
-
-    // 获取上传文件签名
-    const upLoading = ref(false);
-    const convertDataUrlToBlob = (dataUrl) => {
-      const parts = dataUrl.split(';base64,');
-      const contentType = parts[0].split(':')[1];
-      const byteCharacters = atob(parts[1]);
-      const byteArrays = [];
-
-      for (let offset = 0; offset < byteCharacters.length; offset += 512) {
-        const slice = byteCharacters.slice(offset, offset + 512);
-
-        const byteNumbers = new Array(slice.length);
-        for (let i = 0; i < slice.length; i++) {
-          byteNumbers[i] = slice.charCodeAt(i);
-        }
-
-        const byteArray = new Uint8Array(byteNumbers);
-        byteArrays.push(byteArray);
-      }
-
-      return new Blob(byteArrays, { type: contentType });
-    };
-    const cancle = () => {
-      context.emit("cancle");
-    }
-
-    // 页面刷新自动执行
-    onMounted(() => {
-      if (props.filePath) {
-        dataFile.image.src = props.filePath;
-        copper();
-      }
-    });
-
-    return {
-      ...toRefs(dataFile),
-      sureSava,
-      // boxClose,
-      uploadImg,
-      upLoading,
-      cancle,
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-#Box {
-  padding: 20px;
-  margin-top: 20px;
-  border-radius: 5px;
-  height: 100%;
-  > h3 {
-  }
-  > .box {
-    display: flex;
-    align-items: center;
-    margin-top: 20px;
-    > div {
-      width: 400px;
-      height: 200px;
-      > img {
-        display: block;
-      }
-    }
-    > .box_2 {
-      > .before {
-        width: 200px;
-        height: 200px;
-        position: relative;
-        left: 150px;
-        overflow: hidden;
-        border-radius: 50%;
-      }
-    }
-  }
-  > .btn {
-    position: relative;
-    display: flex;
-    > .upload {
-      display: block;
-      width: 60px;
-      height: 32px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      opacity: 0;
-    }
-    margin-top: 30px;
-  }
-}
-.personal-authentica {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 400;
-  font-size: 12px;
-  color: #ccc;
-  > .context {
-    position: absolute;
-    z-index: 400;
-    left: 50%;
-    top: 30%;
-    transform: translate(-50%, -50%);
-    > .text-box {
-      position: relative;
-      // margin: 120px auto 0;
-      width: 720px;
-      height: 350px;
-      background-color: #fff;
-      > i {
-        position: absolute;
-        color: #aaa;
-        right: 20px;
-        top: 8px;
-        font-size: 35px;
-        cursor: pointer;
-      }
-    }
-  }
-  > .mark {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(43, 43, 43, 0.7215686275);
-  }
-}
-</style>

src/renderer/src/views/profile/userAvatar.vue

@@ -2,45 +2,112 @@
   <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"
     >
-      <CropperImage
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{ height: '350px' }">
+          <vue-cropper
             ref="cropper"
-        :filePath="options.img"
+            :img="options.img"
-        @sureSava="uploadImg"
+            :info="true"
-        @cancle="cancle"
+            :autoCrop="options.autoCrop"
-      ></CropperImage>
+            :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">
+            <div v-show="show" class="large" :style="[{backgroundImage:`url(${options.img})`},largePosition]"></div>
+          </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>
+              选择
+              <el-icon class="el-icon--right"><Upload /></el-icon>
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 2 }" :md="2">
+          <el-button :icon="Plus" @click="changeScale(1)"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
+          <el-button :icon="Minus" @click="changeScale(-1)"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
+          <el-button :icon="RefreshLeft" @click="rotateLeft()"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 1, offset: 1 }" :md="2">
+          <el-button :icon="RefreshRight" @click="rotateRight()"></el-button>
+        </el-col>
+        <el-col :lg="{ span: 2, offset: 6 }" :md="2">
+          <el-button type="primary" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
     </el-dialog>
   </div>
 </template>
 
   <script setup>
-import {ref, reactive} from 'vue'
+import { Upload, Plus, Minus, RefreshLeft, RefreshRight } from '@element-plus/icons-vue'
+import {ref, reactive, getCurrentInstance, watch} from 'vue'
+import 'vue-cropper/dist/index.css'
+import { VueCropper } from 'vue-cropper'
 import { uploadAvatar } from '@/api/system/user'
 import useUserStore from '@/store/modules/user'
 import { ElMessage } from 'element-plus'
-import CropperImage from './cropperImage.vue'
+import { useMouseInElement } from '@vueuse/core'
 
 const userStore = useUserStore()
+const { proxy } = getCurrentInstance()
 
 const open = ref(false)
 const visible = ref(false)
+const title = ref('修改头像')
 
 //图片裁剪数据
 const options = reactive({
   img: userStore.user.avatar, // 裁剪图片的地址
   autoCrop: true, // 是否默认生成截图框
-  autoCropWidth: 400, // 默认生成截图框宽度
+  autoCropWidth: 200, // 默认生成截图框宽度
-  autoCropHeight: 400, // 默认生成截图框高度
+  autoCropHeight: 200, // 默认生成截图框高度
   fixedBox: true, // 固定截图框大小 不允许改变
   outputType: 'png', // 默认生成截图为PNG格式
   previews: {} //预览数据
 })
-
+// 是否显示遮罩和大图
+const show = ref(false)
+// 遮罩的坐标(样式)
+const layerPosition = reactive({
+  left: 0,
+  top: 0
+})
+// 大图背景定位(样式)
+const largePosition = reactive({
+  backgroundPositionX: 0,
+  backgroundPositionY: 0
+})
 const cropper = ref(null)
+const { elementX, elementY } = useMouseInElement(cropper)
+//监听是否拖动
+const transform = ref({})
 
 /** 编辑头像 */
 function editCropper() {
@@ -50,8 +117,39 @@ function editCropper() {
 function modalOpened() {
   visible.value = true
 }
+/** 覆盖默认上传行为 */
+function requestUpload() {}
+/** 向左旋转 */
+function rotateLeft() {
+  proxy.$refs.cropper.rotateLeft()
+}
+/** 向右旋转 */
+function rotateRight() {
+  proxy.$refs.cropper.rotateRight()
+}
+/** 图片缩放 */
+function changeScale(num) {
+  num = num || 1
+  proxy.$refs.cropper.changeScale(num)
+}
+/** 上传预处理 */
+function beforeUpload(file) {
+  if (file.type.indexOf('image/') == -1) {
+    ElMessage({
+      message: '文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。',
+      type: 'error',
+    })
+  } else {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => {
+      options.img = reader.result
+    }
+  }
+}
 /** 上传图片 */
-function uploadImg(data) {
+function uploadImg() {
+  proxy.$refs.cropper.getCropBlob((data) => {
     let formData = new FormData()
     formData.append('avatarfile', data)
     uploadAvatar(formData).then((response) => {
@@ -64,16 +162,39 @@ function uploadImg(data) {
       })
       visible.value = false
     })
+  })
+}
+
+/** 实时预览 */
+function realTime(data) {
+  options.previews = data
+  transform.value = Object.assign({}, data.img)
 }
 
 /** 关闭窗口 */
 function closeDialog() {
-  // options.img = userStore.avatar
+  options.img = userStore.avatar
   options.visible = false
 }
-const cancle = () => {
+watch(transform, () => {
-  open.value = false
+  // 根据得到数据设置样式数据和是否显示数据
-}
+  show.value = true
+  // 计算坐标
+  const position = { x: 0, y: 0 }
+
+  if (elementX.value < 100) position.x = 0
+  else if (elementX.value > 300) position.x = 200
+  else position.x = elementX.value - 100
+
+  if (elementY.value < 100) position.y = 0
+  else if (elementY.value > 300) position.y = 200
+  else position.y = elementY.value - 100
+  // 给样式赋值
+  layerPosition.left = position.x + 'px'
+  layerPosition.top = position.y + 'px'
+  largePosition.backgroundPositionX = -2 * position.x + 'px'
+  largePosition.backgroundPositionY = -2 * position.y + 'px'
+},{deep:true})
 </script>
 
   <style lang='scss' scoped>