<template>
|
<GlobalWindow
|
width="50%"
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules">
|
<h3 style="margin: 0 0 20px 0;">设备信息</h3>
|
<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="设备ID" prop="devId">
|
<el-input v-model="form.devId" placeholder="请输入设备ID" v-trim/>
|
</el-form-item>
|
<el-form-item label="序列号" prop="serialNo">
|
<el-input v-model="form.serialNo" placeholder="请输入序列号" v-trim/>
|
</el-form-item>
|
<el-form-item label="通讯地址" prop="linkAddr">
|
<el-input v-model="form.linkAddr" placeholder="请输入通讯地址" v-trim/>
|
</el-form-item>
|
<el-form-item label="端口号" prop="port">
|
<el-input v-model="form.port" placeholder="请输入端口号" v-trim/>
|
</el-form-item>
|
<el-form-item label="设备管理员" prop="managerIdList">
|
<el-select v-model="form.managerIdList" filterable multiple placeholder="请选择设备管理员">
|
<el-option
|
v-for="item in memberList"
|
:key="item.id"
|
:label="item.name+'-'+item.companyName"
|
:value="Number(item.id)">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="使用时长" prop="useTime">
|
<div style="width: 100%; display: flex; align-items: center;">
|
<el-input v-model="form.useTime" placeholder="请输入单次拿取钥匙可使用时长" v-trim style="flex: 1;"/>
|
<span style="margin-left: 20px;">单位：分钟</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="双重验证" prop="doubleAuth">
|
<div style="width: 100%; display: flex; align-items: center;">
|
<el-switch
|
v-model="form.doubleAuth"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
:active-value="1"
|
:inactive-value="0">
|
</el-switch>
|
<span style="margin-left: 20px; color: #999999;">开启双重认证后，钥匙领取时先校验验证人身份，再校验司机身份</span>
|
</div>
|
</el-form-item>
|
<el-form-item label="验证人" prop="authMemberIdList">
|
<el-select v-model="form.authMemberIdList" filterable multiple placeholder="请选择验证人">
|
<el-option
|
v-for="item in memberList"
|
:key="item.id"
|
:label="item.name+'-'+item.companyName"
|
:value="Number(item.id)">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="所在位置" prop="location">
|
<el-input v-model="form.location" placeholder="请输入所在位置" v-trim/>
|
</el-form-item>
|
<el-form-item label="经纬度" prop="jwd">
|
<div style="width: 100%; display: flex; align-items: center;">
|
<el-input v-model="form.jwd" placeholder="请输入经纬度" v-trim/>
|
<a style="margin-left: 20px; flex-shrink: 0;" href="https://lbs.amap.com/tools/picker" target="_blank">经纬度在线拾取地址</a>
|
</div>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-switch
|
v-model="form.status"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
:active-value="0"
|
:inactive-value="1">
|
</el-switch>
|
</el-form-item>
|
<h3 style="margin: 20px 0;">柜组信息</h3>
|
<el-form-item label="排列" prop="rowNum">
|
<div style="width: 100%; display: flex; align-items: center;">
|
<el-input v-model="form.rowNum" :disabled="form.id ? true : false" type="number" placeholder="请输入排数" v-trim>
|
<template slot="append">排</template>
|
</el-input>
|
<span style="margin: 0 20px;">x</span>
|
<el-input v-model="form.columnNum" :disabled="form.id ? true : false" type="number" placeholder="请输入列数" v-trim>
|
<template slot="append">列</template>
|
</el-input>
|
</div>
|
</el-form-item>
|
<el-form-item label="编码" prop="noType">
|
<el-radio-group v-model="form.noType" :disabled="form.id ? true : false" @change="changeNoType">
|
<el-radio :label="0">自动编码</el-radio>
|
<el-radio :label="1">手动编码</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="前缀" prop="noPrefix" v-if="form.noType === 1">
|
<div style="width: 100%; display: flex; align-items: center;">
|
<el-input style="flex: 1;" v-model="form.noPrefix" :disabled="form.id ? true : false" placeholder="请输入数字或字母" v-trim/>
|
<span style="margin: 0 20px;">位数</span>
|
<el-input style="flex: 1;" v-model="form.noLength" :disabled="form.id ? true : false" placeholder="请输入数字" v-trim/>
|
<span style="margin: 0 20px;">起始编号</span>
|
<el-input style="flex: 1;" v-model="form.noIndex" :disabled="form.id ? true : false" placeholder="请输入数字" v-trim/>
|
</div>
|
</el-form-item>
|
<el-form-item label="排列顺序" prop="sortType" v-if="form.noType === 1">
|
<el-radio-group v-model="form.sortType" :disabled="form.id ? true : false">
|
<el-radio :label="0">从左往右</el-radio>
|
<el-radio :label="1">从上向下</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { allList } from '@/api/business/member'
|
import { getInfoById } from '@/api/business/jkCabinet'
|
export default {
|
name: 'OperaJkCabinetWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
var validate = (rule, value, callback) => {
|
if (this.form.noType === 1 && this.form.noLength === '' || this.form.noIndex === '') {
|
callback(new Error('位数和起始编号不能为空！'));
|
} else {
|
callback();
|
}
|
};
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
code: '',
|
name: '',
|
devId: '',
|
serialNo: '',
|
linkAddr: '',
|
status: 0,
|
port: '',
|
managerIdList: '',
|
location: '',
|
useTime: '',
|
doubleAuth: 0,
|
authMemberIdList: '',
|
rowNum: '',
|
columnNum: '',
|
jwd: '',
|
latitude: '',
|
noType: 0,
|
noPrefix: '',
|
noLength: '',
|
noIndex: '',
|
sortType: 0
|
},
|
// 验证规则
|
rules: {
|
code: [
|
{ required: true, message: '请输入设备编号', trigger: 'blur' }
|
],
|
name: [
|
{ required: true, message: '请输入设备名称', trigger: 'blur' }
|
],
|
devId: [
|
{ required: true, message: '请输入设备ID', trigger: 'blur' }
|
],
|
linkAddr: [
|
{ required: true, message: '请输入通讯地址', trigger: 'blur' }
|
],
|
port: [
|
{ required: true, message: '请输入端口号', trigger: 'blur' }
|
],
|
managerIdList: [
|
{ required: true, message: '请选择设备管理员', trigger: 'blur' }
|
],
|
authMemberIdList: [
|
{ required: true, message: '请选择验证人', trigger: 'blur' }
|
],
|
rowNum: [
|
{ required: true, message: '请输入排列', trigger: 'blur' }
|
],
|
noType: [
|
{ required: true, message: '请选择编码', trigger: 'blur' }
|
],
|
noPrefix: [
|
{ required: true, validator: validate, trigger: 'blur' }
|
],
|
sortType: [
|
{ required: true, message: '请输入排列顺序', trigger: 'blur' }
|
]
|
},
|
memberList: []
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/jkCabinet',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.loadMember()
|
if (target) {
|
getInfoById(target.id)
|
.then(res => {
|
res.managerIdList = res.managerIdList.map(item => Number(item))
|
res.authMemberIdList = res.authMemberIdList.map(item => Number(item))
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = res[key]
|
}
|
this.visible = true
|
})
|
})
|
} else {
|
this.$nextTick(() => {
|
this.form = {
|
id: null,
|
code: '',
|
name: '',
|
devId: '',
|
serialNo: '',
|
linkAddr: '',
|
status: 0,
|
port: '',
|
managerIdList: '',
|
useTime: '',
|
doubleAuth: 0,
|
authMemberIdList: '',
|
rowNum: '',
|
columnNum: '',
|
jwd: '',
|
latitude: '',
|
noType: 0,
|
noPrefix: '',
|
noLength: '',
|
noIndex: '',
|
sortType: 0
|
}
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
this.visible = true
|
}
|
},
|
loadMember () {
|
allList({
|
type: 2
|
}).then(res => {
|
this.memberList = res
|
})
|
},
|
changeNoType() {
|
if (this.form.noType === 0) {
|
this.form.noPrefix = ''
|
this.form.noLength = ''
|
this.form.noIndex = ''
|
this.form.sortType = 0
|
}
|
}
|
}
|
}
|
</script>
|
