From b00aa151a29d7aea25ae353309be6ddc3e22f265 Mon Sep 17 00:00:00 2001
From: chris <510148846@qq.com>
Date: Thu, 11 Dec 2025 09:02:45 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E4=BF=AE=E5=A4=8D=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=97=AE=E9=A2=98=EF=BC=9B2=E3=80=81?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0Editor=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Editor/index.vue               | 27 +++++++++-
 .../devices/components/PestFormDialog.vue     | 49 +++++++++++++------
 src/views/devices/config.js                   | 14 +++++-
 src/views/devices/index.vue                   | 17 ++-----
 4 files changed, 75 insertions(+), 32 deletions(-)

diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index 0a696f2..c5e2185 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -27,6 +27,7 @@
 </template>
 
 <script setup>
+import axios from 'axios';
 import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { getToken } from "@/utils/auth";
@@ -108,7 +109,7 @@ const styles = computed(() => {
 const content = ref("");
 watch(() => props.modelValue, (v) => {
   if (v !== content.value) {
-    content.value = v === undefined ? "<p></p>" : v;
+    content.value = v == undefined ? "<p></p>" : v;
   }
 }, { immediate: true });
 
@@ -124,6 +125,7 @@ onMounted(() => {
         quill.format("image", false);
       }
     });
+    quill.root.addEventListener('paste', handlePasteCapture, true);
   }
 });
 
@@ -168,6 +170,29 @@ function handleUploadSuccess(res, file) {
 function handleUploadError() {
   proxy.$modal.msgError("图片插入失败");
 }
+
+// 复制粘贴图片处理
+function handlePasteCapture(e) {
+  const clipboard = e.clipboardData || window.clipboardData;
+  if (clipboard && clipboard.items) {
+    for (let i = 0; i < clipboard.items.length; i++) {
+      const item = clipboard.items[i];
+      if (item.type.indexOf('image') !== -1) {
+        e.preventDefault();
+        const file = item.getAsFile();
+        insertImage(file);
+      }
+    }
+  }
+}
+
+function insertImage(file) {
+  const formData = new FormData();
+  formData.append("file", file);
+  axios.post(uploadUrl.value, formData, { headers: { "Content-Type": "multipart/form-data", Authorization: headers.value.Authorization } }).then(res => {
+    handleUploadSuccess(res.data);
+  })
+}
 </script>
 
 <style>
diff --git a/src/views/devices/components/PestFormDialog.vue b/src/views/devices/components/PestFormDialog.vue
index 3b16274..1e0270c 100644
--- a/src/views/devices/components/PestFormDialog.vue
+++ b/src/views/devices/components/PestFormDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog :title="title" v-model="dialogOpen" width="600px" append-to-body>
-    <el-form :model="props.form" :rules="rules" ref="deviceRef" label-width="80px">
+    <el-form :model="form" :rules="rules" ref="deviceRef" label-width="80px">
       <el-row :gutter="10">
         <el-col :span="24">
           <el-form-item label="设备图片" prop="imgUrl">
@@ -9,46 +9,46 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备类型" prop="type">
-            <el-select v-model="props.form.type" placeholder="请选择设备类型" clearable style="width: 200px">
+            <el-select v-model="form.type" placeholder="请选择设备类型" clearable style="width: 200px">
               <el-option v-for="dict in deviceTypes" :key="dict.value" :label="dict.label" :value="dict.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备号" prop="deviceNo">
-            <el-input v-model="props.form.deviceNo" placeholder="请输入设备号" maxlength="100" />
+            <el-input v-model="form.deviceNo" placeholder="请输入设备号" maxlength="100" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号" prop="model">
-            <el-input v-model="props.form.model" placeholder="请输入设备型号" maxlength="50" />
+            <el-input v-model="form.model" placeholder="请输入设备型号" maxlength="50" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备地址" prop="deviceAddr">
-            <el-input v-model="props.form.deviceAddr" placeholder="请输入设备地址" maxlength="100" />
+            <el-input v-model="form.deviceAddr" placeholder="请输入设备地址" maxlength="100" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备点位" prop="installPointDes">
-            <el-input v-model="props.form.installPointDes" placeholder="请输入设备点位" maxlength="100" />
+            <el-input v-model="form.installPointDes" placeholder="请输入设备点位" maxlength="100" />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="状态">
-            <el-radio-group v-model="props.form.status">
+            <el-radio-group v-model="form.status">
               <el-radio v-for="item in statusOptions" :key="item.value" :value="item.value">{{ item.label }}</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
-        <el-col :span="24" v-if="props.form.type === '4'">
+        <el-col :span="24" v-if="form.type === '4'">
           <el-form-item label="视频流" prop="videoPlayUrl">
-            <el-input v-model="props.form.videoPlayUrl" placeholder="请输入视频流地址" maxlength="200" />
+            <el-input v-model="form.videoPlayUrl" placeholder="请输入视频流地址" maxlength="200" />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="备注">
-            <el-input v-model="props.form.remark" type="textarea" placeholder="请输入备注内容"></el-input>
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注内容"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
@@ -64,10 +64,15 @@
 
 <script setup>
 import { addDevice, updateDevice } from '@/api/device'
+import { defaultForm } from '../config'
+
+defineExpose({
+  setForm,
+  resetForm
+})
 
 const props = defineProps({
   open: { type: Boolean, required: true },
-  form: { type: Object, required: true },
   title: { type: String, required: true },
   deviceTypes: { type: Array, required: true },
   statusOptions: { type: Array, required: true },
@@ -78,13 +83,15 @@ const emits = defineEmits(['update:open', 'success'])
 // 创建本地状态来响应open属性的变化
 const dialogOpen = ref(props.open)
 
+const form = ref({ ...defaultForm })
+
 const uploadImg = ref('')
 
 watch(() => uploadImg.value, (newVal) => {
-  props.form.imgUrl = newVal
+  form.value.imgUrl = newVal
 })
 
-watch(() => props.form.imgUrl, (newVal) => {
+watch(() => form.value.imgUrl, (newVal) => {
   uploadImg.value = newVal
 })
 
@@ -136,15 +143,16 @@ async function submitForm() {
   try {
     await deviceRef.value.validate()
 
-    if (props.form.id) {
-      await updateDevice(props.form)
+    if (form.id) {
+      await updateDevice(form)
       proxy.$modal.msgSuccess('修改成功')
     } else {
-      await addDevice(props.form)
+      await addDevice(form)
       proxy.$modal.msgSuccess('新增成功')
     }
 
     dialogOpen.value = false
+    resetForm()
     emits('success')
   } catch (error) {
     // 表单验证失败不提示错误
@@ -154,6 +162,15 @@ async function submitForm() {
   }
 }
 
+function setForm(data) {
+  form.value = { ...data }
+}
+
+function resetForm() {
+  form.value = { ...defaultForm }
+  deviceRef.value?.resetFields()
+}
+
 // 取消按钮操作
 function cancel() {
   dialogOpen.value = false
diff --git a/src/views/devices/config.js b/src/views/devices/config.js
index fc981b7..29b833c 100644
--- a/src/views/devices/config.js
+++ b/src/views/devices/config.js
@@ -2,9 +2,8 @@
  * @Author: chris
  * @Date: 2025-09-05 10:12:41
  * @LastEditors: chris
- * @LastEditTime: 2025-09-18 17:26:54
+ * @LastEditTime: 2025-12-10 09:35:30
  */
-import request from "@/utils/request";
 // 列配置
 export const columnsConfig = [
   { key: 0, label: "设备号", visible: true },
@@ -19,3 +18,14 @@ export const statusColorMap = {
   0: "success",
   1: "danger",
 };
+
+export const defaultForm = {
+  deviceNo: "",
+  deviceAddr: "",
+  model: "",
+  installPointDes: "",
+  imgUrl: "",
+  type: null,
+  status: "0",
+  videoPlayUrl: "",
+};
diff --git a/src/views/devices/index.vue b/src/views/devices/index.vue
index 6cf0ceb..840508b 100644
--- a/src/views/devices/index.vue
+++ b/src/views/devices/index.vue
@@ -39,10 +39,10 @@
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     <!-- 添加或修改果园对话框 -->
     <device-form-dialog
+      ref="formDialogRef"
       v-model:open="open"
       :device-types="deviceTypes"
       :status-options="statusOptions"
-      :form="form"
       :title="title"
       @success="getList"
     />
@@ -69,6 +69,7 @@ import { useDict } from '@/utils/dict'
 // 获取组件实例代理
 const { proxy } = getCurrentInstance()
 const columns = reactive(columnsConfig)
+const formDialogRef = ref(null)
 
 // 状态管理
 const deviceList = ref([])
@@ -88,16 +89,6 @@ const { device_status: statusOptions } = useDict('device_status')
 
 // 表单和查询参数
 const data = reactive({
-  form: {
-    deviceNo: '',
-    deviceAddr: '',
-    model: '',
-    installPointDes: '',
-    imgUrl: '',
-    type: null,
-    status: '0',
-    videoPlayUrl: ''
-  },
   queryParams: {
     type: null,
     status: null,
@@ -145,7 +136,7 @@ function resetQuery() {
 function handleAdd() {
   open.value = true
   title.value = '新增虫情设备'
-  // form.value = { status: '1' } // 默认状态为正常
+  formDialogRef.value.resetForm()
 }
 
 /** 修改按钮操作 */
@@ -155,7 +146,7 @@ function handleUpdate(row) {
   // 如果传入了row，则编辑特定行，否则编辑选中的行
   const targetRow = row || (selectedRows.value.length ? selectedRows.value[0] : null)
   if (targetRow) {
-    form.value = { ...targetRow }
+    formDialogRef.value.setForm(targetRow)
   }
 }