<template>
|
<a-modal :footer="null" v-model="visible" :title="title" :width="drawerWidth" :visible="visible" style="overflow: auto;padding-bottom: 53px;">
|
<a-spin :spinning="confirmLoading">
|
<a-form :form="form">
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="终端名称">
|
<a-input :disabled="true" placeholder="aibox" v-decorator="['name', validatorRules.name]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="终端厂家">
|
<j-dict-select-tag :disabled="true" :triggerChange="true" v-decorator="['factory', validatorRules.factory]" placeholder="请选择厂家" dictCode="factory"/>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属网关">
|
<a-select :disabled="true" placeholder="请选择网关设备" v-decorator="['deviceId', validatorRules.deviceId]" style="width: 100%" @select="deviceSelect">
|
<a-select-option v-for="device in deviceList" :value="device.id">{{device.name}}</a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属区域">
|
<j-dict-select-tag :triggerChange="true" v-decorator="['installAddress', validatorRules.installAddress]" placeholder="请选择所属区域" dictCode="install_address"/>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="IP地址">
|
<a-input :disabled="true" placeholder="请输入ip地址" v-decorator="['ipAddress', validatorRules.ipAddress]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="协议类型">
|
<j-dict-select-tag :disabled="true" :triggerChange="true" placeholder="请选择协议类型" v-decorator="['buttMethod', validatorRules.buttMethod]" dictCode="butt_method"></j-dict-select-tag>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="取流地址">
|
<a-input :disabled="true" placeholder="请输入streamAddress" v-decorator="['streamAddress', validatorRules.streamAddress]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户名">
|
<a-input :disabled="true" placeholder="请输入userName" v-decorator="['userName', validatorRules.userName]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="密码">
|
<a-input :disabled="true" placeholder="请输入password" v-decorator="['password', validatorRules.password]"></a-input>
|
</a-form-item>
|
</a-form>
|
</a-spin>
|
<div class="drawer-bottom-button" v-show="!disableSubmit">
|
<a-button style="margin-right: 0.8rem" @click="handleCancel">取消</a-button>
|
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
|
</div>
|
</a-modal>
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
import { postAction, putAction, getAction } from '@tievd/cube-block/lib/api/manage'
|
|
export default {
|
name: 'CameraModal',
|
|
data() {
|
return {
|
form: this.$form.createForm(this),
|
title: '操作',
|
visible: false,
|
confirmLoading: false,
|
drawerWidth: 700,
|
disableSubmit: false,
|
model: {},
|
validatorRules: {
|
name: {
|
rules: [{ required: false, message: 'name不能为空' }]
|
},
|
factory: {
|
rules: [{ required: false, message: 'factory不能为空' }]
|
},
|
type: {
|
rules: [{ required: false, message: 'type不能为空' }]
|
},
|
model: {
|
rules: [{ required: false, message: 'model不能为空' }]
|
},
|
ipAddress: {
|
rules: [{ required: false, message: 'ipAddress不能为空' }]
|
},
|
buttMethod: {
|
rules: [{ required: false, message: 'buttMethod不能为空' }]
|
},
|
deviceId: {
|
rules: [{ required: false, message: 'deviceId不能为空' }, { pattern: /^[\d]*$/, message: '只能输入数字' }]
|
},
|
orgCode: {
|
rules: [{ required: false, message: 'orgCode不能为空' }]
|
},
|
operator: {
|
rules: [{ required: false, message: 'operator不能为空' }]
|
},
|
status: {
|
rules: [{ required: false, message: 'status不能为空' }]
|
},
|
label: {
|
rules: [{ required: false, message: 'label不能为空' }]
|
},
|
installAddress: {
|
rules: [{ required: true, message: 'installAddress不能为空' }]
|
},
|
streamAddress: {
|
rules: [{ required: false, message: 'streamAddress不能为空' }]
|
},
|
userName: {
|
rules: [{ required: false, message: 'userName不能为空' }]
|
},
|
password: {
|
rules: [{ required: false, message: 'password不能为空' }]
|
},
|
},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
url: {
|
deviceListUrl: "/jyz/device/allList"
|
},
|
deviceList: []
|
}
|
},
|
created() {
|
this.listDevcie(null);
|
},
|
methods: {
|
// 根据屏幕变化,设置抽屉尺寸
|
resetScreenSize() {
|
let screenWidth = document.body.clientWidth
|
if (screenWidth < 500) {
|
this.drawerWidth = screenWidth
|
} else {
|
this.drawerWidth = 700
|
}
|
},
|
add() {
|
this.edit({})
|
},
|
edit(record) {
|
this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
this.form.resetFields()
|
// if (record.id !== undefined) {
|
// // 新增编辑的特殊操作写在这里
|
// }
|
this.visible = true
|
this.model = Object.assign({}, record)
|
this.$nextTick(() => {
|
this.form.setFieldsValue(
|
pick(this.model, 'name', 'factory', 'type', 'model', 'ipAddress', 'buttMethod', 'deviceId', 'orgCode', 'operator', 'status', 'label', 'installAddress', 'streamAddress', 'userName', 'password')
|
)
|
})
|
},
|
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/camera/add', formData)
|
} else {
|
// 编辑
|
res = await putAction('/jyz/camera/edit', formData)
|
}
|
this.$message.success(res.message)
|
if (res.success) {
|
this.$emit('ok')
|
}
|
} catch (err) {
|
console.log(err)
|
} finally {
|
this.confirmLoading = false
|
this.close()
|
}
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
//----------------------------------------------
|
listDevcie(orgCode) {
|
getAction(this.url.deviceListUrl, {orgCode: orgCode}).then(res => {
|
if (res.code==200) {
|
this.deviceList = res.result;
|
}
|
})
|
},
|
deviceSelect(val, option){
|
for (let i = 0; i < this.deviceList.length; i++) {
|
if (val == this.deviceList[i].id) {
|
this.model.orgCode = this.deviceList[i].orgCode;
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less"></style>
|
