<template>
|
<GlobalWindow :title="title" :visible.sync="visible" width="620px" :confirm-working="isWorking" @confirm="confirm">
|
<el-form :model="form" ref="form" :rules="rules">
|
<el-form-item label="巡检点编码" prop="code">
|
<el-input v-model="form.code" placeholder="请输入名称" v-trim />
|
</el-form-item>
|
<el-form-item label="巡检点名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入巡检点名称" v-trim />
|
</el-form-item>
|
<el-form-item label="巡检设备">
|
<el-select v-model="form.deviceId">
|
<el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="所属区域" prop="areaId">
|
<el-cascader v-model="form.areaIds" @change="changeSel" placeholder="请选择巡检区域" clearable :options="cateList"
|
:props="{
|
label: 'name',
|
value: 'id',
|
children: 'childCategoryList',
|
}"></el-cascader>
|
</el-form-item>
|
<el-form-item label="经纬度">
|
<el-input v-model="form.lnglat" disabled v-trim />
|
</el-form-item>
|
<el-form-item>
|
<mapDrag class="mapbox" @center="getCenter" />
|
</el-form-item>
|
<el-form-item label="巡检内容" prop="content">
|
<el-input type="textarea" :rows="4" v-model="form.content" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="上传图片" prop="imgurl">
|
<UploadAvatarImage :file="{ 'imgurlfull': form.fileFullUrl, 'imgurl': form.fileUrl }"
|
:uploadData="{ folder: 'ywPatrol/' }" @uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false"
|
@uploadBegin="isUploading = true" />
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
|
import mapDrag from '@/components/common/map/mapDrag.vue'
|
import { fetchList } from '@/api/business/category'
|
import { detail } from '@/api/Inspection/ywPatrolPoint'
|
import { fetchList as getDeiceList } from '@/api/Inspection/device'
|
export default {
|
name: 'OperaYwPatrolPointWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, UploadAvatarImage, mapDrag },
|
data() {
|
return {
|
// 表单数据
|
form: {
|
name: '',
|
code: '',
|
content: '',
|
imgurl: '',
|
areaId: 0,
|
areaIds: [],
|
addr: ''
|
},
|
deviceList: [],
|
cateList: [],
|
// 验证规则
|
rules: {
|
name: [{ required: true, message: '请输入' }],
|
code: [{ required: true, message: '请输入' }],
|
},
|
isUploading: false,
|
}
|
},
|
created() {
|
this.config({
|
api: '/Inspection/ywPatrolPoint',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open(title, row) {
|
this.title = title
|
this.visible = true
|
this.initData()
|
if (row == null) {
|
this.$nextTick(() => {
|
this.form = {
|
name: '',
|
code: '',
|
content: '',
|
imgurl: '',
|
areaId: 0,
|
areaIds: [],
|
addr: ''
|
}
|
this.$refs.form.resetFields()
|
|
this.form[this.configData['field.id']] = null
|
})
|
fetchList({
|
model: { type: 4 },
|
capacity: 1000,
|
page: 1,
|
}).then(res => {
|
this.cateList = res.records || []
|
})
|
return
|
}
|
if (row && row.id) {
|
this.getDetail(row)
|
}
|
},
|
getDetail(row) {
|
detail(row.id).then(res => {
|
this.form = { ...res }
|
if (res.longitude && res.latitude) {
|
this.$set(this.form, 'lnglat', res.longitude + ',' + res.latitude)
|
}
|
fetchList({
|
model: { type: 4 },
|
capacity: 1000,
|
page: 1,
|
}).then(ress => {
|
this.cateList = ress.records || []
|
const areaId = res.areaId
|
if (areaId) {
|
this.cateList.forEach(item => {
|
if (item.childCategoryList) {
|
item.childCategoryList.forEach(item2 => {
|
if (item2.id == areaId) {
|
this.$set(this.form, 'areaIds', [item.id, item2.id])
|
|
}
|
})
|
}
|
})
|
}
|
})
|
|
})
|
},
|
initData() {
|
getDeiceList({
|
model: {},
|
capacity: 1000,
|
page: 1,
|
}).then(res => {
|
this.deviceList = res.records
|
})
|
|
},
|
getCenter(data) {
|
// console.log(data)
|
// this.$set(this.form, 'postion', data.address)
|
if (data.lng) {
|
this.$set(this.form, 'lnglat', data.lng + ',' + data.lat)
|
} else {
|
this.$set(this.form, 'lnglat', '')
|
}
|
this.$set(this.form, 'longitude', data.lng)
|
this.$set(this.form, 'latitude', data.lat)
|
},
|
changeSel(e) {
|
if (e && e.length == 2) {
|
this.$set(this.form, 'areaId', e[1])
|
} else {
|
this.$set(this.form, 'areaId', '')
|
}
|
},
|
uploadAvatarSuccess(file) {
|
this.$set(this.form, 'fileUrl', file.imgurl)
|
this.$set(this.form, 'fileFullUrl', file.imgurlfull)
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.mapbox {
|
width: 100%;
|
height: 400px;
|
margin-bottom: 20px;
|
float: left;
|
}
|
</style>
|
