add 设备图
This commit is contained in:
parent
85ada8e9f3
commit
3fcd918153
|
@ -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>
|
|
@ -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'],
|
||||
|
|
Loading…
Reference in New Issue