✨ 电脑、人员图片查看修改

src/views/computer-information/components/ComputerDetail.vue

@@ -178,7 +178,7 @@ onMounted(async () => {
 	<div class="p-2.5">
 		<!-- overview-card -->
 		<el-card v-loading="overviewLoading" body-class="flex items-center" shadow="hover" style="border: none">
-			<el-image :src="getImageSrc()" class="mr-7 rounded-2xl" style="height: 100px; width: 100px; object-fit: contain">
+			<el-image :src="getImageSrc()" :preview-src-list="[getImageSrc()]" class="mr-7 rounded-2xl" style="height: 100px; width: 100px; object-fit: contain">
 				<template #error>
 					<div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5">
 						<el-icon>

src/views/computer-information/components/CreateComputer.vue

@@ -7,6 +7,7 @@
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
+import { ref } from 'vue';
 
 const showDialog = defineModel({ default: false });
 const emit = defineEmits([ 'refresh' ]);
@@ -53,6 +54,14 @@ const rules = reactive<FormRules<RuleForm>>({
 	ipaddress: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
 });
 
+const previewVisible = ref(false); // 控制预览对话框的显示
+const previewImage = ref('');
+
+const handlePreview = (file) => {
+  previewImage.value = file.url || URL.createObjectURL(file.raw); // 获取图片 URL
+  previewVisible.value = true; // 显示对话框
+};
+
 // 超过图片限制时触发的回调
 const handleExceed: UploadProps['onExceed'] = (files) => {
 	upload.value!.clearFiles();
@@ -99,6 +108,7 @@ async function handleSave() {
 const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   formEl.resetFields();
+  formData.images = [];
   showDialog.value = false;
 };
 
@@ -144,6 +154,7 @@ onMounted(() => {});
 					action="#"
 					list-type="picture-card"
           accept="image/*"
+          :on-preview="handlePreview"
 				>
 					<el-icon>
 						<Plus />
@@ -158,6 +169,10 @@ onMounted(() => {});
 			</div>
 		</template>
 	</el-dialog>
+  <!-- 预览对话框 -->
+  <el-dialog v-model="previewVisible" width="30%" height="30%">
+    <img :src="previewImage" alt="预览图" style="width: 100%; height: auto;" />
+  </el-dialog>
 </template>
 
 <style scoped>

src/views/computer-information/components/EditComputerInfo.vue

@@ -45,6 +45,9 @@ const rules = reactive<FormRules<RuleForm>>({
   ipaddress: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
 });
 
+const previewVisible = ref(false); // 控制预览对话框的显示
+const previewImage = ref('');
+
 onBeforeMount(() => {
   replaceCol();
 });
@@ -57,6 +60,11 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
 	upload.value!.handleStart(file);
 };
 
+const handlePreview = (file) => {
+  previewImage.value = file.url || URL.createObjectURL(file.raw); // 获取图片 URL
+  previewVisible.value = true; // 显示对话框
+};
+
 // 保存操作
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
@@ -175,6 +183,7 @@ function handleImageError(file) {
 						action="#"
 						list-type="picture-card"
             accept="image/*"
+            :on-preview="handlePreview"
 					>
 						<el-icon>
 							<Plus />
@@ -188,6 +197,10 @@ function handleImageError(file) {
           <el-button @click="resetForm(ruleFormRef)">取消</el-button>
 				</el-form-item>
 			</el-form>
+    <!-- 预览对话框 -->
+    <el-dialog v-model="previewVisible" width="30%" height="30%">
+      <img :src="previewImage" alt="预览图" style="width: 100%; height: auto;" />
+    </el-dialog>
 	</el-drawer>
 </template>
 

src/views/employee-information/components/CreateEmployee.vue

@@ -7,6 +7,7 @@
 import { ElMessage, FormInstance, FormRules } from 'element-plus';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
+import { ref } from 'vue';
 
 const showDialog = defineModel({ default: false });
 const emit = defineEmits(['refresh']);
@@ -50,6 +51,14 @@ const rules = reactive<FormRules<RuleForm>>({
 	],
 });
 
+const previewVisible = ref(false); // 控制预览对话框的显示
+const previewImage = ref('');
+
+const handlePreview = (file) => {
+  previewImage.value = file.url || URL.createObjectURL(file.raw); // 获取图片 URL
+  previewVisible.value = true; // 显示对话框
+};
+
 // 超过图片限制时触发的回调
 const handleExceed: UploadProps['onExceed'] = (files) => {
 	upload.value!.clearFiles();
@@ -92,8 +101,9 @@ async function handleSave() {
 // 取消操作
 const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return;
-  showDialog.value = false;
   formEl.resetFields();
+  formData.images = [];
+  showDialog.value = false;
 };
 
 onMounted(() => {});
@@ -125,6 +135,7 @@ onMounted(() => {});
 					action="#"
 					list-type="picture-card"
           accept="image/*"
+          :on-preview="handlePreview"
 				>
 					<el-icon>
 						<Plus />
@@ -139,6 +150,10 @@ onMounted(() => {});
 			</div>
 		</template>
 	</el-dialog>
+  <!-- 预览对话框 -->
+  <el-dialog v-model="previewVisible" width="30%" height="30%">
+    <img :src="previewImage" alt="预览图" style="width: 100%; height: auto;" />
+  </el-dialog>
 </template>
 
 <style scoped>

src/views/employee-information/components/EditEmployeeInfo.vue

@@ -52,6 +52,10 @@ const rules = reactive<FormRules<RuleForm>>({
     { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }],
 });
 
+
+const previewVisible = ref(false); // 控制预览对话框的显示
+const previewImage = ref('');
+
 onBeforeMount(() => {
 	replaceCol();
 });
@@ -64,6 +68,11 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
 	upload.value!.handleStart(file);
 };
 
+const handlePreview = (file) => {
+  previewImage.value = file.url || URL.createObjectURL(file.raw); // 获取图片 URL
+  previewVisible.value = true; // 显示对话框
+};
+
 const submitForm = async (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 
@@ -155,6 +164,7 @@ onMounted(() => {});
 					action="#"
 					list-type="picture-card"
           accept="image/*"
+          :on-preview="handlePreview"
 				>
 					<el-icon>
 						<Plus />
@@ -168,6 +178,10 @@ onMounted(() => {});
 				<el-button @click="resetForm(ruleFormRef)">取消</el-button>
 			</el-form-item>
 		</el-form>
+    <!-- 预览对话框 -->
+    <el-dialog v-model="previewVisible" width="30%" height="30%">
+      <img :src="previewImage" alt="预览图" style="width: 100%; height: auto;" />
+    </el-dialog>
 	</el-drawer>
 </template>
 

src/views/employee-information/components/EmployeeDetail.vue

@@ -135,7 +135,7 @@ onMounted(() => {
   <div class="p-2.5">
     <!-- overview-card -->
     <el-card v-loading="overviewLoading" body-class="flex items-center" shadow="hover" style="border: none">
-      <el-image :src="getImageSrc()" class="mr-7 rounded-2xl" style="height: 100px; width: 100px; object-fit: contain">
+      <el-image :src="getImageSrc()" :preview-src-list="[getImageSrc()]" class="mr-7 rounded-2xl" style="height: 100px; width: 100px; object-fit: contain">
         <template #error>
           <div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5">
             <el-icon>