<template> <div class="app-container"> <el-card class="box-card"> <el-form ref="form" :rules="rules" :model="form" label-width="80px"> <el-form-item label="设备名称" prop="username"> <el-input v-model="form.username" style="width: 50%;"></el-input> </el-form-item> <el-form-item label="设备编号" prop="devicenum"> <el-input v-model="form.devicenum" style="width: 50%;"></el-input> </el-form-item> <el-form-item label="设备类型" prop="dtype"> <el-select v-model="form.dtype" placeholder="请选择设备类型"> <el-option v-for="item in devicetype" :key="item.id" :label="item.tname" :value="item.tid"></el-option> </el-select> </el-form-item> <el-form-item label="检测介质" prop="status"> <el-select v-model="form.status" placeholder="请选择检测介质"> <el-option v-for="item in gas" :key="item.id" :label="item.gas" :value="item.id"></el-option> </el-select> <span>/</span> <el-select v-model="form.devicemonad" placeholder="请选择单位" prop="devicemonad"> <el-option v-for="item in danwei" :key="item.id" :label="item.danwei" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item v-if="checkPermission(['manage isadmin'])" label="选择用户" prop="uid"> <el-select v-model="form.uid" placeholder="请选择用户"> <el-option v-for="item in addUserDevice" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item label="设备联系人" prop="devicelinkman" label-width="92px"> <el-input v-model="form.devicelinkman" style="width: 50%;"></el-input> </el-form-item> <el-form-item label="设备手机号" prop="devicephone" label-width="92px"> <el-input v-model="form.devicephone" style="width: 50%;"></el-input> </el-form-item> <el-form-item label="设备坐标" prop="devicecoord"> <el-input v-model="form.devicecoord" style="width: 50%;"></el-input> <el-button type="primary" style="position: relative;left: 18px;z-index: 999;" @click="drawer = true">拾取坐标</el-button> </el-form-item> <el-form-item label="设备详情,设备安装位置" prop="deviceinfo" label-width="167px"> <el-input v-model="form.deviceinfo" style="width: 50%;"></el-input> </el-form-item> <el-form-item label="设备备注" prop="deviceremark"> <el-input v-model="form.deviceremark" type="textarea"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit('form')">立即创建</el-button> <el-button @click="resetForm('form')">重置</el-button> </el-form-item> </el-form> </el-card> <el-drawer title="拾取坐标" :visible.sync="drawer" :direction="direction" :before-close="handleClose"> <span style="color: #E6A23C;" @click="positionUrl">如果找不到坐标!请点击</span> <div><CoordinateMap @giveLnglat="getLnglat"></CoordinateMap></div> </el-drawer> </div> </template> <script> import CoordinateMap from '@/components/coordinateMap'; import { deviceTypeList, addUserDevice, adddevice } from '@/api/device'; import checkPermission from '@/utils/permission'; export default { components: { CoordinateMap }, data() { return { drawer: false, direction: 'rtl', form: { username: undefined, // 设备名称 devicenum: undefined, // 设备编号 dtype: undefined, // 设备类型对应device_type表 status: undefined, // 介质状态对应gas devicemonad: undefined, // 设备单位对应danwei表 uid: undefined, // 用户id devicelinkman: undefined, // 设备联系人 devicephone: undefined, // 设备手机号 devicecoord: undefined, // 设备坐标 deviceinfo: undefined, // 设备详情,设备安装位置 deviceremark: undefined, // 设备备注, isadmin: 1, // 是否管理员添加 }, danwei: [], devicetype: [], gas: [], addUserDevice: [], rules: { username: [ { required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }, ], devicenum: [ { required: true, message: '请输入设备编号', trigger: 'blur' }, { min: 5, max: 22, message: '长度在 5 到 22 个字符', trigger: 'blur' }, ], dtype: [ { type: 'integer', required: true, message: '请选择设备类型', trigger: 'change' }, ], status: [ { type: 'integer', required: true, message: '请选择介质', trigger: 'change' }, ], devicemonad: [ { type: 'integer', required: true, message: '请选择单位', trigger: 'change' }, ], uid: [ { required: true, message: '请选择用户', trigger: 'change' }, ], devicelinkman: [ { required: true, message: '请填设备联系人', trigger: 'blur' }, { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }, ], devicephone: [ { required: true, message: '请填设备联系电话', trigger: 'blur' }, { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }, ], devicecoord: [ { required: true, message: '请填设备坐标', trigger: 'blur' }, ], deviceinfo: [ { required: true, message: '请填设备详情,设备安装位置', trigger: 'blur' }, ], }, }; }, created() { this.deviceTypeList(); this.addUserDevices(); }, methods: { checkPermission, onSubmit(formName) { this.$refs[formName].validate((valid) => { if (valid) { adddevice(this.form) .then(response => { if (response.code === 200) { this.$router.push({ path: '/userdevice/device' }); } }) .catch(err => { console.log(err); }); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, getLnglat(lnglnt) { console.log(lnglnt); }, deviceTypeList() { deviceTypeList() .then(response => { this.danwei = response.data.danwei; this.devicetype = response.data.devicetype; this.gas = response.data.gas; }) .catch(err => { console.log(err); }); }, addUserDevices() { addUserDevice() .then(response => { this.addUserDevice = response.data; }) .catch(err => { console.log(err); }); }, positionUrl() { window.open('latlge.html'); this.drawer = false; }, handleClose(done) { this.$confirm('确认关闭?') .then(_ => { done(); }) .catch(_ => { }); }, }, }; </script> <style> </style>