add 设备图

This commit is contained in:
chenbo 2023-12-19 17:58:52 +08:00
parent 85ada8e9f3
commit 3fcd918153
2 changed files with 77 additions and 2 deletions

View File

@ -43,6 +43,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="请选择设备监测项">
<el-option
@ -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>

View File

@ -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'],