add 设备图

admin/src/views/device/edit.vue

@@ -42,6 +42,30 @@
 
 <el-form-item label="设备编码" prop="code">
     <el-input v-model="formData.code" clearable placeholder="请输入设备编码" />
+</el-form-item>
+              <el-form-item label="产品图" prop="image">
+                <el-upload
+                    class="avatar-uploader"
+                    :accept="acceptFileTypes"
+                    v-model="formData.image"
+                    :data="{ cid: 1 }"
+                    :headers="{ Token: userStore.token }"
+                    :action="action"
+                    :show-file-list="false"
+                    :on-success="handleAvatarSuccessAvatar"
+                >
+                  <img
+                      v-if="formData.image"
+                      :src="formData.image"
+                      class="avatar"
+                  />
+                  <div v-else class="avatar-uploader-icon">
+                    <el-icon>
+                      <Plus />
+                    </el-icon>
+                  </div>
+                </el-upload>
+
               </el-form-item>
 <el-form-item label="监测项" prop="monitor_item">
     <el-select class="flex-1" v-model="formData.monitor_item" multiple clearable placeholder="请选择设备监测项">
@@ -83,11 +107,15 @@
 
 <script lang="ts" setup name="deviceEdit">
 import { useDictOptions } from '@/hooks/useDictOptions'
-import type { FormInstance } from 'element-plus'
+import {type  FormInstance } from 'element-plus'
 import Popup from '@/components/popup/index.vue'
 import { apiDeviceAdd, apiDeviceEdit, apiDeviceDetail, getUserList, apiProductLists} from '@/api/device'
 import { timeFormat } from '@/utils/util'
 import type { PropType } from 'vue'
+import {ref} from "vue";
+import config from "@/config";
+import useUserStore from "@/stores/modules/user";
+import {ElMessage, type UploadProps} from "element-plus";
 defineProps({
     dictData: {
         type: Object as PropType<Record<string, any[]>>,
@@ -98,7 +126,19 @@ const emit = defineEmits(['success', 'close'])
 const formRef = shallowRef<FormInstance>()
 const popupRef = shallowRef<InstanceType<typeof Popup>>()
 const mode = ref('add')
-
+const acceptFileTypes = ref(".png, .jpg, .jpeg, image/png, image/jpeg")
+const action = ref(`${config.baseUrl}${config.urlPrefix}/upload/image`)
+const userStore = useUserStore()
+const handleAvatarSuccessAvatar: UploadProps["onSuccess"] = (
+    response,
+    uploadFile
+) => {
+  if (response.code == 0) {
+    ElMessage.error(response.msg);
+    return;
+  }
+  formData.image = response.data.uri;
+}
 
 // 弹窗标题
 const popupTitle = computed(() => {
@@ -116,6 +156,7 @@ const formData = reactive({
     monitor_item: '',
     status: '',
     is_online: '',
+    image: ''
 })
 
 // 表单验证
@@ -219,3 +260,35 @@ defineExpose({
     getDetail
 })
 </script>
+<style scoped>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  width: 200px;
+  height: 130px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>

app/adminapi/logic/device/DeviceLogic.php

@@ -54,6 +54,7 @@ class DeviceLogic extends BaseLogic
                 'code' => $params['code'],
                 'name' => $params['name'],
                 'type' => $params['type'],
+                'image' => $params['image'],
                 'monitor_item' => $params['monitor_item'],
                 'video_url' => $params['video_url'],
                 'status' => $params['status'],
@@ -103,6 +104,7 @@ class DeviceLogic extends BaseLogic
                 'code' => $params['code'],
                 'name' => $params['name'],
                 'type' => $params['type'],
+                'image' => $params['image'],
                 'monitor_item' => $params['monitor_item'],
                 'video_url' => $params['video_url'],
                 'status' => $params['status'],