<template>
|
<a-drawer :title="title" :maskClosable="true" :width="drawerWidth" placement="right" :closable="true" @close="close" :visible="visible" style="overflow: auto;padding-bottom: 53px;">
|
<a-spin :spinning="confirmLoading">
|
<a-form :form="form">
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="eventType">
|
<a-input placeholder="请输入eventType" v-decorator="['eventType', validatorRules.eventType]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="eventAddress">
|
<a-input placeholder="请输入eventAddress" v-decorator="['eventAddress', validatorRules.eventAddress]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="eventTime">
|
<a-input placeholder="请输入eventTime" v-decorator="['eventTime', validatorRules.eventTime]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="algorithmCode">
|
<a-input placeholder="请输入algorithmCode" v-decorator="['algorithmCode', validatorRules.algorithmCode]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="cameraId">
|
<a-input placeholder="请输入cameraId" v-decorator="['cameraId', validatorRules.cameraId]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="cameraName">
|
<a-input placeholder="请输入cameraName" v-decorator="['cameraName', validatorRules.cameraName]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="deviceId">
|
<a-input placeholder="请输入deviceId" v-decorator="['deviceId', validatorRules.deviceId]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="orgCode">
|
<a-input placeholder="请输入orgCode" v-decorator="['orgCode', validatorRules.orgCode]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="orgName">
|
<a-input placeholder="请输入orgName" v-decorator="['orgName', validatorRules.orgName]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="imgUid">
|
<a-input placeholder="请输入imgUid" v-decorator="['imgUid', validatorRules.imgUid]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="imgPath">
|
<a-input placeholder="请输入imgPath" v-decorator="['imgPath', validatorRules.imgPath]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="videoPath">
|
<a-input placeholder="请输入videoPath" v-decorator="['videoPath', validatorRules.videoPath]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="auditUser">
|
<a-input placeholder="请输入auditUser" v-decorator="['auditUser', validatorRules.auditUser]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="auditResult">
|
<a-input placeholder="请输入auditResult" v-decorator="['auditResult', validatorRules.auditResult]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="auditComment">
|
<a-input placeholder="请输入auditComment" v-decorator="['auditComment', validatorRules.auditComment]"></a-input>
|
</a-form-item>
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="auditTime">
|
<a-input placeholder="请输入auditTime" v-decorator="['auditTime', validatorRules.auditTime]"></a-input>
|
</a-form-item>
|
</a-form>
|
</a-spin>
|
<div class="drawer-bottom-button" v-show="!disableSubmit">
|
<a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
|
<a-button style="margin-right: 0.8rem">取消</a-button>
|
</a-popconfirm>
|
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
|
</div>
|
</a-drawer>
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
import { postAction, putAction } from '@tievd/cube-block/lib/api/manage'
|
|
export default {
|
name: 'OilEventModal',
|
|
data() {
|
return {
|
form: this.$form.createForm(this),
|
title: '操作',
|
visible: false,
|
confirmLoading: false,
|
drawerWidth: 700,
|
disableSubmit: false,
|
model: {},
|
validatorRules: {
|
eventType: {
|
rules: [{ required: true, message: 'eventType不能为空' }]
|
},
|
eventAddress: {
|
rules: [{ required: true, message: 'eventAddress不能为空' }]
|
},
|
eventTime: {
|
rules: [{ required: true, message: 'eventTime不能为空' }]
|
},
|
algorithmCode: {
|
rules: [{ required: true, message: 'algorithmCode不能为空' }]
|
},
|
cameraId: {
|
rules: [{ required: true, message: 'cameraId不能为空' }]
|
},
|
cameraName: {
|
rules: [{ required: true, message: 'cameraName不能为空' }]
|
},
|
deviceId: {
|
rules: [{ required: true, message: 'deviceId不能为空' }]
|
},
|
orgCode: {
|
rules: [{ required: true, message: 'orgCode不能为空' }]
|
},
|
orgName: {
|
rules: [{ required: true, message: 'orgName不能为空' }]
|
},
|
imgUid: {
|
rules: [{ required: true, message: 'imgUid不能为空' }]
|
},
|
imgPath: {
|
rules: [{ required: true, message: 'imgPath不能为空' }]
|
},
|
videoPath: {
|
rules: [{ required: true, message: 'videoPath不能为空' }]
|
},
|
auditUser: {
|
rules: [{ required: true, message: 'auditUser不能为空' }]
|
},
|
auditResult: {
|
rules: [{ required: true, message: 'auditResult不能为空' }]
|
},
|
auditComment: {
|
rules: [{ required: true, message: 'auditComment不能为空' }]
|
},
|
auditTime: {
|
rules: [{ required: true, message: 'auditTime不能为空' }]
|
},
|
},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
},
|
}
|
},
|
|
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, 'eventType', 'eventAddress', 'eventTime', 'algorithmCode', 'cameraId', 'cameraName', 'deviceId', 'orgCode', 'orgName', 'imgUid', 'imgPath', 'videoPath', 'auditUser', 'auditResult', 'auditComment', 'auditTime')
|
)
|
})
|
},
|
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/oilEvent/add', formData)
|
} else {
|
// 编辑
|
res = await putAction('/jyz/oilEvent/edit', formData)
|
}
|
if (res.success) {
|
this.$message.success(res.message)
|
this.$emit('ok')
|
}
|
} catch (err) {
|
console.log(err)
|
} finally {
|
this.confirmLoading = false
|
this.close()
|
}
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="less"></style>
|
