<template>
|
<GlobalWindow :title="param.id ? '编辑设备' : '新建设备'" :confirmWorking="subLoading" :visible.sync="isShowModal"
|
width="100%" @close="close" @confirm="handleSub">
|
<el-form :model="param" ref="paramRef" :rules="rules">
|
<div style="width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 20px; box-sizing: border-box;">
|
<div class="title">基础信息</div>
|
<div style="width: 31%;">
|
<el-form-item label="设备编码" prop="code">
|
<el-input v-model="param.code" placeholder="请输入" v-trim />
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="设备名称" prop="name">
|
<el-input v-model="param.name" placeholder="请输入" v-trim />
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="设备型号" prop="modelNo">
|
<el-input v-model="param.modelNo" placeholder="请输入" v-trim />
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="设备分类" prop="cateIds">
|
<el-cascader v-model="param.cateIds" @change="changeSel" placeholder="请选择设备分类" clearable :options="cateList"
|
:props="{
|
label: 'name',
|
value: 'id',
|
children: 'childCategoryList'
|
}"></el-cascader>
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="设备管理员" prop="userId">
|
<el-select v-model="param.userId" clearable filterable>
|
<el-option v-for="item in staffList" :label="item.realname" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="所在位置" prop="addr">
|
<el-input v-model="param.addr" placeholder="请输入" v-trim />
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="所属项目" prop="projectId">
|
<el-select v-model="param.projectId" @change="changeProject" filterable>
|
<el-option v-for="item in projectList" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="关联房源" prop="rooms">
|
<el-cascader v-model="param.rooms" :disabled="!param.projectId" ref="cascader" @change="getHouseVal" placeholder="请选择关联房源" :options="houseList"
|
:props="{
|
label: 'name',
|
value: 'id',
|
children: 'projectDataVOList'
|
}"></el-cascader>
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="购入时间" prop="buyDate">
|
<el-date-picker
|
v-model="param.buyDate"
|
type="date"
|
value-format="yyyy-MM-dd"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="设备状态" prop="status">
|
<el-select v-model="param.status" filterable>
|
<el-option :value="0" label="正常"></el-option>
|
<el-option :value="1" label="损坏"></el-option>
|
<el-option :value="2" label="报废"></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div style="width: 100%;">
|
<el-form-item label="运维内容" prop="content">
|
<el-input type="textarea" :rows="4" v-model="param.content" placeholder="请输入" />
|
</el-form-item>
|
</div>
|
<div style="width: 100%;">
|
<el-form-item label="照片" prop="">
|
<UploadAvatarImage :file="{ 'imgurlfull': param.fileFullUrl, 'imgurl': param.fileUrl }"
|
:uploadData="{ folder: 'ywDevice/' }" @uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false"
|
@uploadBegin="isUploading = true" />
|
<div style="width: 100%; height: 40px;"></div>
|
</el-form-item>
|
</div>
|
<div style="width: 100%;">
|
<el-form-item label="附件" prop="multifileList">
|
<div style="display: flex; flex-direction: column; align-items: flex-start;">
|
<el-button type="text" @click="$refs.uploadFile.click()">+添加附件</el-button>
|
<el-table
|
:data="param.multifileList"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="name"
|
label="附件名称">
|
</el-table-column>
|
<el-table-column
|
prop="createUserName"
|
label="操作人">
|
</el-table-column>
|
<el-table-column
|
prop="createTime"
|
label="操作时间">
|
</el-table-column>
|
<el-table-column
|
label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" @click="deleFile(scope.$index)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-form-item>
|
</div>
|
|
<div class="title">供应商信息</div>
|
<div style="width: 31%;">
|
<el-form-item label="供应商" prop="supplier">
|
<el-input v-model="param.supplier" placeholder="请输入" v-trim />
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="联系人" prop="supplierLinker">
|
<el-input v-model="param.supplierLinker" placeholder="请输入" v-trim />
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="联系方式" prop="supplierPhone">
|
<el-input v-model="param.supplierPhone" placeholder="请输入" v-trim />
|
</el-form-item>
|
</div>
|
|
<div class="title">维保信息</div>
|
<div style="width: 31%;">
|
<el-form-item label="维保负责人" prop="maintenanceUserId">
|
<el-select v-model="param.maintenanceUserId" clearable filterable>
|
<el-option v-for="item in staffList" :label="item.realname" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div style="width: 31%;">
|
<el-form-item label="维保到期日" prop="maintenanceOverDate">
|
<el-date-picker
|
v-model="param.maintenanceOverDate"
|
type="date"
|
value-format="yyyy-MM-dd"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</div>
|
<div style="width: 31%;"></div>
|
<div style="width: 100%;">
|
<el-form-item label="维保说明" prop="maintenanceContent">
|
<el-input v-model="param.maintenanceContent" type="textarea" placeholder="请输入" v-trim />
|
</el-form-item>
|
</div>
|
</div>
|
</el-form>
|
<input type="file" ref="uploadFile" style="position: fixed; top: -20px; left: 0;" @change="getFile" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
|
import { fetchList } from '@/api/business/category'
|
import { create, updateById, detailById } from '@/api/Inspection/device'
|
import { getUserList } from '@/api/system/user'
|
import { uploadBatch } from '@/api/system/common'
|
import { getProjectList, tree } from '@/api/project/ywProject'
|
import { Loading, Message } from 'element-ui'
|
import { mapState } from 'vuex'
|
export default {
|
components: { GlobalWindow, UploadAvatarImage },
|
data() {
|
return {
|
isShowModal: false,
|
subLoading: false,
|
param: {
|
code: '',
|
name: '',
|
modelNo: '',
|
cateIds: '',
|
userId: '',
|
addr: '',
|
projectId: '',
|
rooms: [],
|
buildingId: '',
|
floorId: '',
|
roomId: '',
|
|
supplier: '',
|
buyDate: '',
|
content: '',
|
supplierLinker: '',
|
supplierPhone: '',
|
maintenanceUserId: '',
|
maintenanceOverDate: '',
|
maintenanceContent: '',
|
status: 0,
|
multifileList: []
|
},
|
rules: {
|
name: [{ required: true, message: '请输入', trigger: 'blur' }],
|
code: [{ required: true, message: '请输入', trigger: 'blur' }],
|
cateId: [{ required: true, message: '请选择', trigger: 'blur' }],
|
projectId: [{ required: true, message: '请选择', trigger: 'blur' }],
|
rooms: [{ required: true, message: '请选择', trigger: 'blur' }]
|
},
|
loadings: false,
|
cateList: [],
|
houseList: [],
|
staffList: [],
|
projectList: []
|
}
|
},
|
computed: {
|
...mapState(['userInfo'])
|
},
|
created() {
|
this.initData()
|
this.getProjectLists()
|
},
|
methods: {
|
getHouseVal(e) {
|
this.param.buildingId = e[1]
|
this.param.floorId = e[2]
|
this.param.roomId = e[3]
|
},
|
changeProject(e) {
|
this.getHouseTree()
|
},
|
getHouseTree() {
|
tree({
|
projectId: this.param.projectId
|
}).then(res => {
|
this.addParamToArray(res)
|
this.houseList = res
|
})
|
},
|
addParamToArray(arr) {
|
for (let i = 0; i < arr.length; i++) {
|
const currentItem = arr[i].projectDataVOList
|
if (currentItem && currentItem.length >= 0) {
|
currentItem.forEach(item => {
|
if (item.lv === 3) {
|
delete item.projectDataVOList
|
}
|
})
|
}
|
if (currentItem && currentItem.length > 0) {
|
this.addParamToArray(currentItem)
|
}
|
}
|
},
|
deleFile(index) {
|
this.param.multifileList.splice(index, 1)
|
},
|
// 获取项目
|
getProjectLists() {
|
getProjectList({})
|
.then(res => {
|
this.projectList = res
|
})
|
},
|
// 上传附件
|
getFile(e) {
|
this.loadings = Loading.service({
|
lock: true,
|
text: 'Loading',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
let formDate = new FormData()
|
formDate.append('folder', 'YW_DEVICE')
|
formDate.append('file', e.target.files[0])
|
uploadBatch(formDate)
|
.then(res => {
|
this.param.multifileList.push({ ...res[0], fileurl: res[0].imgaddr, name: res[0].originname, createUserName: this.userInfo.realname, createTime: this.getDate() })
|
})
|
.finally(() => {
|
e.target.files = null
|
this.loadings.close()
|
})
|
},
|
getDate() {
|
const currentDate = new Date();
|
|
const year = currentDate.getFullYear(); // 获取当前年份
|
const month = currentDate.getMonth() + 1; // 获取当前月份 (0-11，所以需要 +1)
|
const day = currentDate.getDate(); // 获取当前日期
|
const hours = currentDate.getHours(); // 获取当前小时
|
const minutes = currentDate.getMinutes(); // 获取当前分钟
|
const seconds = currentDate.getSeconds(); // 获取当前秒钟
|
|
return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} `
|
+ `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
|
},
|
handleSub() {
|
const { param, subLoading } = this
|
this.$refs['paramRef'].validate((valid) => {
|
if (valid) {
|
let fn = param.id ? updateById : create
|
this.subLoading = true
|
fn(param).then(res => {
|
this.subLoading = false
|
this.$emit('success')
|
Message.success('保存成功')
|
this.close()
|
}).catch(() => {
|
this.subLoading = false
|
})
|
}
|
})
|
},
|
getDetail(id) {
|
detailById(id).then(res => {
|
this.param = res
|
this.param.rooms = [res.projectId, res.buildingId, res.floorId, res.roomId]
|
console.log(this.param.rooms)
|
if (res.multifileList && res.multifileList.length > 0) {
|
this.param.multifileList = res.multifileList.map(item => {
|
return {
|
...item,
|
createUserName: item.userName,
|
createTime: item.createDate
|
}
|
})
|
}
|
this.changeProject()
|
this.getHouseTree()
|
const cateId = this.param.cateId || ''
|
setTimeout(() => {
|
if (cateId) {
|
this.cateList.forEach(item => {
|
if (item.childCategoryList) {
|
item.childCategoryList.forEach(item2 => {
|
if (item2.id == cateId) {
|
this.$set(this.param, 'cateIds', [item.id, item2.id])
|
}
|
})
|
}
|
})
|
}
|
},1000)
|
})
|
},
|
getStaff() {
|
getUserList({}).then(res => {
|
this.staffList = res
|
})
|
},
|
initData() {
|
fetchList({
|
model: { type: 5 },
|
capacity: 1000,
|
page: 1,
|
}).then(res => {
|
this.cateList = res.records || []
|
})
|
this.getStaff()
|
},
|
changeSel(e) {
|
if (e && e.length == 2) {
|
this.$set(this.param, 'cateId', e[1])
|
} else {
|
this.$set(this.param, 'cateId', '')
|
}
|
},
|
uploadAvatarSuccess(file) {
|
this.$set(this.param, 'fileUrl', file.imgurl)
|
this.$set(this.param, 'fileFullUrl', file.imgurlfull)
|
},
|
close() {
|
this.isShowModal = false
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/style/variables.scss';
|
.title {
|
width: 100%;
|
font-weight: 500;
|
font-size: 18px;
|
color: $primary-color;
|
margin-bottom: 10px;
|
display: flex;
|
align-items: center;
|
}
|
</style>
|
