<template>
|
|
<a-modal
|
:title="title"
|
:width="800"
|
:ok="false"
|
:visible="visible"
|
:confirm-loading="confirmLoading"
|
:okButtonProps="{ props: { disabled: disableSubmit } }"
|
@ok="handleSubmit"
|
@cancel="handleCancel"
|
cancelText="关闭"
|
>
|
<a-spin :spinning="confirmLoading">
|
<a-form :form="form">
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="网关名称">
|
<a-input placeholder="请输入网关名称" v-decorator="['name', validatorRules.name]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="网关类型">
|
<j-dict-select-tag placeholder="请选择网关类型" dictCode="gateway_device_type" :triggerChange="true"
|
v-decorator="['deviceType', validatorRules.deviceType]"></j-dict-select-tag>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="序列号">
|
<a-input placeholder="请输入序列号" v-decorator="['sn', validatorRules.sn]" :disabled="condition"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="IP地址">
|
<a-input placeholder="请输入IP地址" v-decorator="['deviceIp', validatorRules.deviceIp]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属机构" hasFeedback>
|
<a-tree-select
|
allow-clear
|
show-search
|
treeNodeFilterProp="title"
|
style="width: 100%"
|
:dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
|
:treeData="departTree"
|
v-decorator="['orgCode', validatorRules.orgCode]"
|
treeDefaultExpandAll
|
placeholder="请选择机构"
|
:disabled="condition"
|
>
|
</a-tree-select>
|
</a-form-item>
|
</a-form>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
import {postAction, putAction} from '@tievd/cube-block/lib/api/manage'
|
import {queryDepartTreeList} from "@tievd/cube-block/lib/api/api";
|
import {validateTxtSpec, validateIPAddress} from "@/utils/util";
|
|
export default {
|
name: 'DeviceModal',
|
props: {},
|
data() {
|
return {
|
form: this.$form.createForm(this),
|
title: '操作',
|
visible: false,
|
confirmLoading: false,
|
drawerWidth: 700,
|
disableSubmit: false,
|
model: {},
|
validatorRules: {
|
name: {
|
rules: [
|
{required: true, message: '网关名称不能为空'},
|
{min: 1, max: 32, message: '名称需在1到32个字符之间'},
|
{required: true, validator: validateTxtSpec}
|
]
|
},
|
deviceType: {
|
rules: [{required: true, message: '网关类型不能为空'}]
|
},
|
sn: {
|
rules: [
|
{required: true, message: '序列号不能为空'},
|
{min: 1, max: 255, message: '序列号需在1到255个字符之间'}
|
]
|
},
|
orgCode: {
|
rules: [{required: true, message: '所属机构不能为空'}]
|
},
|
deviceIp: {
|
rules: [
|
{required: true, message: 'IP地址不能为空'},
|
{required: true, validator: validateIPAddress}
|
]
|
},
|
},
|
url: {
|
add: '/jyz/device//add',
|
edit: '/jyz/device/edit'
|
},
|
labelCol: {
|
xs: {span: 24},
|
sm: {span: 5}
|
},
|
wrapperCol: {
|
xs: {span: 24},
|
sm: {span: 16}
|
},
|
condition: true,
|
departTree: []
|
}
|
},
|
|
methods: {
|
validateTxtSpec,
|
validateIPAddress,
|
loadTreeData() {
|
queryDepartTreeList().then((res) => {
|
if (res.success) {
|
this.departTree = []
|
for (let i = 0; i < res.result.length; i++) {
|
let temp = res.result[i]
|
this.cleanData(temp)
|
this.departTree.push(temp)
|
}
|
}
|
})
|
},
|
|
cleanData(e) {
|
e.key = e.orgCode
|
e.value = e.orgCode
|
e.disabled = e.orgCategory === "3" ? false : true
|
if (e.children != null) {
|
for (let i = 0; i < e.children.length; i++) {
|
this.cleanData(e.children[i])
|
}
|
}
|
},
|
|
// 根据屏幕变化,设置抽屉尺寸
|
resetScreenSize() {
|
let screenWidth = document.body.clientWidth
|
if (screenWidth < 500) {
|
this.drawerWidth = screenWidth
|
} else {
|
this.drawerWidth = 700
|
}
|
},
|
add() {
|
this.edit({})
|
this.condition = false
|
},
|
edit(record) {
|
this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
this.form.resetFields()
|
this.condition = true
|
this.visible = true
|
this.loadTreeData()
|
this.model = Object.assign({}, record)
|
this.$nextTick(() => {
|
this.form.setFieldsValue(
|
pick(this.model, 'name', 'deviceType', 'status', 'sn', 'orgCode', 'deviceIp')
|
)
|
})
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
this.disableSubmit = false
|
this.model = {}
|
},
|
handleSubmit() {
|
// 触发表单验证
|
this.form.validateFields(async (err, values) => {
|
if (!err) {
|
try {
|
this.confirmLoading = true
|
let formData = Object.assign(this.model, values)
|
let res = null
|
if (!this.model.id) {
|
// 新增
|
res = await postAction('/jyz/device/add', formData)
|
} else {
|
// 编辑
|
res = await putAction('/jyz/device/edit', formData)
|
}
|
if (res.success) {
|
this.$message.success(res.message)
|
this.$emit('ok')
|
this.close()
|
} else {
|
this.$message.error(res.message)
|
}
|
} catch (err) {
|
console.log(err)
|
} finally {
|
this.confirmLoading = false
|
}
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
},
|
|
}
|
</script>
|
|
<style scoped lang="less"></style>
|
