1、修复设备管理问题;2、更新Editor组件

master
chris 3 days ago
parent b186df32f5
commit b00aa151a2

@ -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>

@ -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

@ -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: "",
};

@ -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)
}
}

Loading…
Cancel
Save