|
<template>
<!-- 请假对话框 -->
<t-modal :visibled.sync="visibled" :mask-closable="false" width="600px" height="560px">
<template slot="header">
<div class="device-modal-title">{{ isEdit?'设备编辑':'设备新增' }}</div>
</template>
<template slot="close">
<i @click="resetModalData">
<t-icon icon="close"></t-icon>
</i>
</template>
<t-form ref="addDeviceModalForm" :model="addDeviceModalForm" :rules="addDeviceModalFormRules" :label-span="2" label-position="right">
<t-form-item label="设备编号：" prop="deviceId">
<t-input v-model="addDeviceModalForm.deviceId" placeholder="请输入设备编号"></t-input>
</t-form-item>
<t-form-item label="设备名称：" prop="deviceName">
<t-input v-model="addDeviceModalForm.deviceName" placeholder="请输入设备名称"></t-input>
</t-form-item>
<t-form-item label="设备类型：" prop="deviceTypeId">
<t-select v-model="addDeviceModalForm.deviceTypeId" placeholder="请选择设备类型">
<t-option v-for="item in types" :value="item.id" :key="item.id">{{ item.name }}</t-option>
</t-select>
</t-form-item>
<t-form-item label="视频地址：" prop="videoUrl">
<t-input v-model="addDeviceModalForm.videoUrl" placeholder="请输入视频地址"></t-input>
</t-form-item>
<t-form-item label="图片上传：">
<div style="display:flex;flex-direction:row">
<t-upload ref="uploader" :format="['jpg','jpeg','png']" :show-uploaded="false" :before-upload="$_onUploadBeforeUpload" :action="action" :data="{pictureUrl:addDeviceModalForm.pictureUrl}" multiple type="drag" style="width:180px;height:180px" @success="$_onUploadSuccess" @remove-file="$_onUploadRemoveFile" @error="$_onUploadError" @file-ext-error="$_onUploadFormatError" @file-exceeded-size="$_onUploadExceededSize">
<div style="width: 180px;height:180px;line-height: 180px">
<t-icon icon="plus-outline" size="40"></t-icon>
</div>
</t-upload>
<img v-show="imgUrl?true:false" :src="imgUrl" style="margin-left:20px;width: 180px;height:180px;">
</div>
</t-form-item>
</t-form>
<template slot="footer">
<t-button @click="resetModalData">取消</t-button>
<t-button v-if="isEdit" :loading="loadingSubmit" color="primary" @click="submitModalData">修改</t-button>
<t-button v-else :loading="loadingSubmit" color="primary" @click="submitModalData">提交</t-button>
</template>
</t-modal>
</template>
<script>
import sysapi from '@/api/system'
const defaultAddDeviceModalForm = {
deviceId: '', // 设备id
deviceName: '', // 设备名称
deviceTypeId: '', // 设备类型id
videoUrl: '', // 视频地址
pictureUrl: '' // 图片标识
}
export default {
props: {
// 显示 / 隐藏新增设备对话框
addDeviceModal: {
type: Boolean,
default: false
},
// 设备类型列表
types: {
type: Array,
default: () => []
},
// 当前编辑的设备
currentEditDevice: {
type: Object,
default: () => { }
}
},
data () {
return {
// 新增设备对话框表单
addDeviceModalForm: JSON.parse(JSON.stringify(defaultAddDeviceModalForm)),
imgUrl: '',
// 请假对话框表单验证规则
addDeviceModalFormRules: {
deviceId: [
{ required: true, message: '设备编号不能为空', trigger: 'blur' }
],
deviceName: [
{ required: true, message: '设备名称不能为空', trigger: 'blur' }
],
videoUrl: [
{ required: true, message: '视频地址不能为空', trigger: 'blur' }
],
deviceTypeId: [
{ required: true, message: '设备类型不能为空' }
]
},
// 提交表单是否显示loading
loadingSubmit: false,
action: 'http://10.19.90.34:8018/sp/resourceTool/uploadResourceToolPicture',
uploadList: () => []
}
},
computed: {
// 显示/隐藏对话框
visibled: {
set (val) {
this.$emit('update:add-device-modal', val)
},
get () {
return this.addDeviceModal
}
},
// 是否为编辑状态
isEdit: {
get () {
return this.addDeviceModalForm.resourceToolId != null
}
}
},
watch: {
// 当前编辑设备
currentEditDevice (val) {
this.addDeviceModalForm = val
this.imgUrl = val.imgUrl
}
},
mounted () {
this.uploadList = this.$refs.uploader.files
},
methods: {
// 重置表单数据
resetModalData () {
this.addDeviceModalForm = JSON.parse(JSON.stringify(defaultAddDeviceModalForm))
this.imgUrl = ''
this.visibled = false
},
// 提交表单数据
submitModalData () {
this.loadingSubmit = true
this.$refs['addDeviceModalForm'].validate((valid) => {
if (valid) {
if (this.isEdit) {
this.editDeviceData()
} else {
this.addDeviceData()
}
} else {
console.log('error--------->请输入完整的表单信息！')
this.loadingSubmit = false
}
})
},
// 向服务器发送请求 添加设备数据
async addDeviceData () {
const res = await sysapi.addDeviceData(this.addDeviceModalForm)
if (res.status === 200) {
this.resetModalData()
// 如果数据有误
if (res.data.fail) {
this.$Message.warning(res.data.fail)
} else {
this.$emit('refresh-data')
this.$Message.success('提交成功！')
}
} else {
this.$Message.danger('提交失败！')
}
this.loadingSubmit = false
},
// 向服务器发送请求 添加设备数据
async editDeviceData () {
const res = await sysapi.editDeviceData(this.addDeviceModalForm)
if (res.status === 200) {
this.resetModalData()
// 如果数据有误
if (res.data.fail) {
this.$Message.warning(res.data.fail)
} else {
this.$emit('refresh-data')
this.$Message.success('修改成功！')
}
} else {
this.$Message.danger('修改失败！')
}
this.loadingSubmit = false
},
$_onDeleteIconClick (file) {
this.$refs.uploader.removeFile(file)
},
$_onUploadRemoveFlie (file, fileList) {
this.uploadList = fileList
},
$_onUploadPreviewFlie (file) {
console.log(file)
},
$_onUploadProgress (e, file) {
console.log(e)
console.log(file)
},
$_onUploadSuccess (res, file) {
this.imgUrl = res.data.toolPictureUrl
this.addDeviceModalForm.pictureUrl = res.data.pictureUrl
// 因为演示用的上传服务器返回数据格式的原因，这里模拟添加 url
this.uploadList.push(file)
},
$_onUploadRemoveFile () { },
$_onUploadExceededSize () { },
$_onUploadError (errMsg, response, file) {
console.log(file)
console.log(errMsg.message)
this.$Notice.warning({
title: `文件${file.name}上传失败`,
desc:
'原因：' + errMsg
})
},
$_onUploadFileExtError (file, files) {
this.$Notice.warning({
title: '文件格式不正确',
desc:
'文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
})
console.log(files)
},
$_onUploadFileExceededSize (file) {
this.$Notice.warning({
title: '超出文件大小限制',
desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
})
},
$_onUploadFormatError () { },
$_onUploadBeforeUpload () {
const check = this.uploadList.length < 5
if (!check) {
this.$Notice.warning({
title: '最多只能上传 5 张图片。'
})
}
return check
}
}
}
</script>
|
