图片 可裁剪

src/components/scCropper/index.vue

@@ -1,11 +1,8 @@
 <!--
  * @Descripttion: 图像裁剪组件
  * @version: 1.0
- * @Author: sakuya
  * @Date: 2021年7月24日17:05:43
- * @LastEditors:
- * @LastEditTime:
- * @other: 代码完全开源，欢迎参考，也欢迎PR
+ * @LastEditTime: 2025年9月9日13:40:10
 -->
 
 <template>
@@ -21,64 +18,67 @@
 </template>
 
 <script>
-	import Cropper from 'cropperjs'
-	import 'cropperjs/dist/cropper.css'
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
 
-	export default {
-		props: {
-			src: { type: String, default: "" },
-			compress: {type: Number, default: 1},
-			aspectRatio:  {type: Number, default: NaN},
-		},
-		data() {
-			return {
-				crop: null
-			}
-		},
-		watch:{
-			aspectRatio(val){
-				this.crop.setAspectRatio(val)
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		methods: {
-			init(){
-				this.crop = new Cropper(this.$refs.img, {
-					viewMode: 0,
-					dragMode: 'move',
-					responsive: false,
-					aspectRatio: this.aspectRatio,
-					preview: this.$refs.preview
-				})
-			},
-			setAspectRatio(aspectRatio){
-				this.crop.setAspectRatio(aspectRatio)
-			},
-			getCropData(cb, type='image/jpeg'){
-				cb(this.crop.getCroppedCanvas().toDataURL(type, this.compress))
-			},
-			getCropBlob(cb, type='image/jpeg'){
-				this.crop.getCroppedCanvas().toBlob((blob) => {
-					cb(blob)
-				}, type, this.compress)
-			},
-			getCropFile(cb, fileName='fileName.jpg', type='image/jpeg'){
-				this.crop.getCroppedCanvas().toBlob((blob) => {
-					let file = new File([blob], fileName, {type: type})
-					cb(file)
-				}, type, this.compress)
-			}
-		}
-	}
+export default {
+    props: {
+        src: { type: String, default: "" },
+        compress: { type: Number, default: 1 },
+        aspectRatio: { type: Number, default: NaN }
+    },
+
+    data() {
+        return {
+            crop: null
+        }
+    },
+
+    watch: {
+        aspectRatio(val) {
+            this.crop.setAspectRatio(val);
+        }
+    },
+
+    mounted() {
+        this.init();
+    },
+
+    methods: {
+        init() {
+            this.crop = new Cropper(this.$refs.img, {
+                viewMode: 2,
+                autoCropArea: 1,
+                dragMode: "move",
+                responsive: false,
+                aspectRatio: this.aspectRatio,
+                preview: this.$refs.preview
+            });
+        },
+        setAspectRatio(aspectRatio) {
+            this.crop.setAspectRatio(aspectRatio);
+        },
+        getCropData(cb, type = "image/jpeg") {
+            cb(this.crop.getCroppedCanvas().toDataURL(type, this.compress));
+        },
+        getCropBlob(cb, type = "image/jpeg") {
+            this.crop.getCroppedCanvas().toBlob(blob => cb(blob), type, this.compress);
+        },
+        getCropFile(cb, fileName = "fileName.jpg", type = "image/jpeg") {
+            this.crop.getCroppedCanvas().toBlob(blob => {
+                const file = new File([blob], fileName, { type });
+                cb(file);
+            }, type, this.compress);
+        }
+    }
+}
 </script>
 
 <style scoped>
-	.sc-cropper {height:300px;}
-	.sc-cropper__img {height:100%;width:400px;float: left;background: #EBEEF5;}
-	.sc-cropper__img img {display: none;}
-	.sc-cropper__preview {width: 120px;margin-left: 20px;float: left;}
-	.sc-cropper__preview h4 {font-weight: normal;font-size: 12px;color: #999;margin-bottom: 20px;}
-	.sc-cropper__preview__img {overflow: hidden;width: 120px;height: 120px;border: 1px solid #ebeef5;}
-</style>
+.sc-cropper {height:300px;}
+.sc-cropper__img {height:100%;width:400px;float: left;background: #EBEEF5;}
+.sc-cropper__img img {display: none;}
+.sc-cropper__preview {width: 120px;margin-left: 20px;float: left;}
+.sc-cropper__preview h4 {font-weight: normal;font-size: 12px;color: #999;margin-bottom: 20px;}
+.sc-cropper__preview__img {overflow: hidden;width: 120px;height: 120px;border: 1px solid #ebeef5;}
+</style>

src/components/scUpload/index.vue

@@ -47,11 +47,11 @@
 			</slot>
 		</el-upload>
 		<span style="display:none!important"><el-input v-model="value"></el-input></span>
-		<el-dialog title="剪裁" draggable v-model="cropperDialogVisible" :width="580" @closed="cropperClosed" destroy-on-close>
-			<sc-cropper :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
+		<el-dialog v-model="cropperDialogVisible" title="剪裁" :width="580" draggable destroy-on-close @closed="cropperClosed">
+			<sc-cropper ref="cropper" :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio"></sc-cropper>
 			<template #footer>
-				<el-button @click="cropperDialogVisible=false" >取 消</el-button>
-				<el-button type="primary" @click="cropperSave">确 定</el-button>
+				<el-button auto-insert-space @click="cropperDialogVisible = false">取消</el-button>
+				<el-button type="primary" auto-insert-space @click="cropperSave">确定</el-button>
 			</template>
 		</el-dialog>
 	</div>
@@ -204,7 +204,7 @@ export default {
 
         handleExceed(files) {
             const file = files[0];
-            file.uid = genFileId();
+            file.uid = Date.now();
             this.$refs.uploader.handleStart(file);
         },
 

src/components/scUpload/minio.vue

@@ -46,8 +46,8 @@
 			</slot>
 		</el-upload>
 		<span style="display:none!important"><el-input v-model="value"></el-input></span>
-		<el-dialog title="剪裁" draggable v-model="cropperDialogVisible" :width="580" @closed="cropperClosed" destroy-on-close>
-			<sc-cropper :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
+		<el-dialog v-model="cropperDialogVisible" title="剪裁" :width="580" draggable destroy-on-close @closed="cropperClosed">
+			<sc-cropper ref="cropper" :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio"></sc-cropper>
 			<template #footer>
 				<el-button @click="cropperDialogVisible = false" >取 消</el-button>
 				<el-button type="primary" @click="cropperSave">确 定</el-button>
@@ -191,7 +191,7 @@ export default {
 
         handleExceed(files) {
             const file = files[0];
-            file.uid = genFileId();
+            file.uid = Date.now();
             this.$refs.uploader.handleStart(file);
         },
 

src/views/dataMock/aihazard/components/record/detail.vue

@@ -114,6 +114,7 @@ const submit = () => {
             API.aihazard.record[mode.value](data).then(() => {
                 isSaving.value = false;
                 ElMessage.success("操作成功");
+                isDel.value = false;
                 visible.value = false;
                 $emit("success", mode.value);
             }).catch(() => isSaving.value = false);

src/views/dataMock/carwash/components/record/detail.vue

@@ -163,6 +163,7 @@ const submit = () => {
             API.car_rinse.record[mode.value](data).then(() => {
                 isSaving.value = false;
                 ElMessage.success("操作成功");
+                isDel.value = false;
                 visible.value = false;
                 $emit("success", mode.value);
             }).catch(() => isSaving.value = false);

src/views/dataMock/parking/components/record/detail.vue

@@ -150,6 +150,7 @@ const submit = () => {
             API.parking.record[mode.value](data).then(() => {
                 isSaving.value = false;
                 ElMessage.success("操作成功");
+                isDel.value = false;
                 visible.value = false;
                 $emit("success", mode.value);
             }).catch(() => isSaving.value = false);

src/views/dataMock/perimeter/components/record/detail.vue

@@ -107,6 +107,7 @@ const submit = () => {
             API.aihazard.record[mode.value](data).then(() => {
                 isSaving.value = false;
                 ElMessage.success("操作成功");
+                isDel.value = false;
                 visible.value = false;
                 $emit("success", mode.value);
             }).catch(() => isSaving.value = false);

src/views/system/milestone/components/record/detail.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="visible" :title="titleMap[mode]" :width="480" :close-on-click-modal="false" @closed="$emit('closed', isDel)">
+    <el-dialog v-model="visible" :title="titleMap[mode]" :width="480" :close-on-click-modal="false" @closed="$emit('closed')">
         <el-form ref="formRef" :model="form" :rules="rules" label-width="120">
             <el-row>
                 <el-col :md="12" :xs="24">
@@ -80,7 +80,6 @@ const props = defineProps({
 
 const visible = ref(false);
 const isSaving = ref(false);
-const isDel = ref(false);
 
 const mode = ref("add");
 const titleMap = reactive({