<template>
|
<div>
|
<h4 class="font-weight-bold py-3 mb-2">
|
<router-link to="/mapdevice">
|
<span class="text-muted font-weight-light">设备地图管理 /</span>
|
</router-link>
|
地图{{$route.query.id?'编辑':'添加'}}
|
</h4>
|
<b-card no-body class="pt30 pl20 pr20 pb30">
|
<b-form @submit="saveDevice">
|
<h5>地图{{$route.query.id?'编辑':'添加'}}</h5>
|
<div class="row">
|
<div class="col-md-12 col-lg-6">
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="地图应用于："
|
label-for="modules"
|
>
|
<el-select
|
v-model="form.modules"
|
required
|
multiple
|
collapse-tags
|
placeholder="请选择系统">
|
<el-option
|
v-for="item in sysDicts"
|
:key="item.value"
|
:label="item.lable"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<!-- <b-form-select v-model="form.modules" text-field="lable" required :options="sysDicts"/> -->
|
</b-form-group>
|
<b-form-group
|
horizontal
|
required
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="地图名称："
|
label-for="name"
|
:invalid-feedback="requiredValid(form.name)"
|
:valid-feedback="requiredValid(form.name)"
|
:state="requiredState(form.name)"
|
>
|
<b-form-input id="name"
|
type="text"
|
autocomplete="off"
|
v-model="form.name"
|
:state="requiredState(form.name)"
|
placeholder="输入地图名称">
|
</b-form-input>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
required
|
:label-cols="4"
|
label="顺序编码："
|
label-for="no"
|
description="顺序编码控制所对应系统中地图的排序，以小到大"
|
:invalid-feedback="SNValid(form.no)"
|
:valid-feedback="SNValid(form.no)"
|
:state="SNState(form.no)"
|
>
|
<b-form-input id="no"
|
type="text"
|
autocomplete="off"
|
v-model="form.no"
|
:state="SNState(form.no)"
|
placeholder="输入顺序编码">
|
</b-form-input>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label-class="text-sm-right"
|
:label-cols="4"
|
label="导入地图："
|
label-for="description"
|
>
|
<div class="pt-2">
|
{{url}}
|
</div>
|
<upload-common limitSize="10M" :uploadBtntext="url?'修改':'导入'" uploadBtnIcon="fa fa-upload" :isList="false" :isShowHr="false" @addFilesBaBackFN="addFiles"/>
|
</b-form-group>
|
</div>
|
<div class="col-md-12 col-lg-6 check-map-image" v-show="url">
|
<httpImg :src="url" width="100%" height="auto"/>
|
</div>
|
</div>
|
|
<div class="text-right mt-3">
|
<ladda-btn :loading="saveLoading" @click.native="saveDevice" data-style="slide-down" class="btn btn-primary">保存</ladda-btn>
|
|
<b-btn variant="default" @click="$router.push({path:'/mapdevice'})">返回</b-btn>
|
</div>
|
</b-form>
|
</b-card>
|
</div>
|
</template>
|
|
<script>
|
import LaddaBtn from '@/vendor/libs/ladda/Ladda'
|
import { Select, Option } from 'element-ui'
|
import { getSysListWithHome } from '@/server/common.js'
|
import { addMap, updateMap, getMapInfo } from '@/server/mapDeviceManagement.js'
|
/* 上传控件 */
|
import uploadCommon from '@/components/upload/uploadCommon'
|
export default {
|
name: 'mapAdd',
|
metaInfo: {
|
title: '地图添加'
|
},
|
data() {
|
/**
|
* @description 地图添加
|
* @param { string } orgId 分库orgId
|
* @param { string } name 地图名称
|
* @param { string } modules 应用模块 应用于模块如：,checks,
|
* @param { string } url 路径
|
* @param { string } no 编号
|
*/
|
return {
|
userInfo: this.$store.getters.basicUserInfo,
|
form: {
|
name: '',
|
no: '',
|
modules: ''
|
},
|
url: '',
|
sysDicts: [],
|
saveLoading: false,
|
ischeckUp: false
|
}
|
},
|
methods: {
|
/* 表单校验 start */
|
requiredValid(val) {
|
return this.ischeckUp ? (val !== '' ? '' : '此字段为必填项') : ''
|
},
|
requiredState(val) {
|
return this.ischeckUp ? val !== '' : null
|
},
|
SNValid(val) {
|
return this.ischeckUp
|
? val && this.SNState(val) ? '' : '序号必须是小于等于6位的数字'
|
: ''
|
},
|
SNState(val) {
|
if (val === '') {
|
return this.ischeckUp ? false : null
|
}
|
var reg = /^[0-9]{1,6}$/
|
return this.ischeckUp ? reg.test(val) : null
|
},
|
/* 表单校验 end */
|
/* 查询系统字典 */
|
async getSysDicts() {
|
let res = await getSysListWithHome({
|
orgId: this.userInfo.orgId,
|
userId: this.userInfo.id,
|
tags: 'map'
|
})
|
if (res && !res.error) {
|
this.sysDicts = res
|
}
|
},
|
|
/* 获取设备信息 */
|
async getMapInfo(id) {
|
let res = await getMapInfo({ orgId: this.userInfo.orgId, id })
|
if (res) {
|
if (res.url) {
|
this.url = res.url
|
}
|
for (let name in this.form) {
|
if (name === 'modules') {
|
this.form.modules = res.modules.replace(/^,+|,+$/g, '').split(',')
|
} else {
|
this.form[name] = res[name]
|
}
|
}
|
}
|
},
|
async addMap(json) {
|
let res = await addMap(json)
|
this.saveLoading = false
|
if (res && !res.error) {
|
this.$toast({
|
type: 'success',
|
message: '保存成功'
|
})
|
this.$router.push({ path: '/mapdevice' })
|
} else if (res.error) {
|
this.$toast({
|
type: 'error',
|
message: '保存失败' + res.message
|
})
|
}
|
},
|
async updateMap(json) {
|
let res = await updateMap(json)
|
this.saveLoading = false
|
if (res && !res.error) {
|
this.$toast({
|
type: 'success',
|
message: '编辑成功'
|
})
|
this.$router.push({ path: '/mapdevice' })
|
} else if (res.error) {
|
this.$toast({
|
type: 'error',
|
message: '保存失败' + res.message
|
})
|
}
|
},
|
saveDevice(evt) {
|
evt.preventDefault()
|
let json = {
|
orgId: this.userInfo.orgId,
|
...this.form
|
}
|
/* 校验拦截 start */
|
this.ischeckUp = true
|
if (json.modules.length === 0) {
|
this.$notify({
|
group: 'foo',
|
type: 'error',
|
title: '抱歉，《设备应用于》还没选',
|
text: '《设备应用于》为必填字段，必须选择，才能保存'
|
})
|
return false
|
}
|
if (!this.SNState(json.no)) {
|
this.$notify({
|
group: 'foo',
|
type: 'error',
|
title: '抱歉，《顺序编码》不正确',
|
text: '《顺序编码》必须且仅为数字，才能保存'
|
})
|
return false
|
}
|
for (let name in json) {
|
if (json[name] === '') {
|
return false
|
}
|
}
|
|
if (!this.url) {
|
this.$notify({
|
group: 'foo',
|
type: 'error',
|
title: '抱歉，还未导入地图',
|
text: '您可能还未导入地图，无法保存'
|
})
|
return false
|
}
|
/* 校验拦截 end */
|
/* 保存拼接 */
|
json.modules = ',' + json.modules + ','
|
json.url = this.url
|
this.saveLoading = true
|
|
if (this.$route.query.id && this.$route.query.id !== '') {
|
json.id = this.$route.query.id
|
this.updateMap(json)
|
} else {
|
// 添加
|
this.addMap(json)
|
}
|
},
|
/* 上传组件回值函数 start */
|
addFiles({ fileList }) {
|
let file = fileList[fileList.length - 1]
|
this.url = file && file.url ? file.url : ''
|
}
|
/* 上传组件回值函数 end */
|
},
|
created() {
|
/* 查询字典 */
|
this.getSysDicts()
|
/* 初始化 */
|
if (this.$route.query.id && this.$route.query.id !== '') {
|
this.getMapInfo(this.$route.query.id)
|
}
|
},
|
components: {
|
LaddaBtn,
|
uploadCommon,
|
elSelect: Select,
|
elOption: Option
|
}
|
}
|
</script>
|
<style>
|
.check-map-image {
|
overflow: auto;
|
max-height: 680px;
|
}
|
</style>
|
