<template>
|
<div class="FormArea">
|
<el-form :model="reportTask" label-position="left" label-width="90px" class="alarmSetting" ref="report-task">
|
<el-form-item class="selectItem" label="事件名称">
|
<el-select class="h32" v-model="reportTask.taskName" size="small" placeholder="请选择事件" style="width: 400px">
|
<el-option
|
v-for="item in eventsOptions"
|
:key="item.value"
|
:label="item.label"
|
size="small"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="selectItem" label="事件等级">
|
<el-select class="h32" v-model="reportTask.level" size="small" placeholder="请选择" style="width: 400px">
|
<el-option
|
v-for="item in levelOptions"
|
:key="item.value"
|
:label="item.label"
|
size="small"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="关联区域">
|
<el-cascader
|
size="mini"
|
style="width:400px"
|
v-model="tmpOrg"
|
:options="menu"
|
:props="{ value: 'id', label: 'name', checkStrictly: true }"
|
collapse-tags
|
clearable
|
@change="handleTreeChange"
|
ref="cascader"
|
></el-cascader>
|
</el-form-item>
|
|
<el-form-item label="责任人" prop="person">
|
<el-input
|
class="h32"
|
v-model="reportTask.person"
|
placeholder="请输入"
|
size="small"
|
style="width: 400px"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="手机号" prop="tel">
|
<el-input
|
class="h32"
|
v-model="reportTask.tel"
|
placeholder="请输入"
|
size="small"
|
style="width: 400px"
|
></el-input>
|
</el-form-item>
|
|
<!-- <el-form-item label="推送方式">
|
<el-select v-model="pushType" placeholder="请选择" style="width: 400px">
|
<el-option label="短信" value="msg"> </el-option>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item label="开启任务">
|
<el-switch v-model="reportTask.enable" active-color="#13ce66" inactive-color="#bbbbbb"> </el-switch>
|
</el-form-item>
|
</el-form>
|
|
<div class="btnArea">
|
<div class="button cancel" @click="$emit('close')">取消</div>
|
<div class="button submit" @click="submit">保存</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { createTask, updateTask } from "@/api/report"
|
|
export default {
|
props: {
|
id: {
|
type: String,
|
default: ""
|
},
|
node: {},
|
camera: {},
|
menu: {}
|
},
|
data() {
|
return {
|
reportTask: {},
|
eventsOptions: [
|
{ value: "明火", label: "明火" },
|
{ value: "烟雾", label: "烟雾" },
|
{ value: "离岗", label: "离岗" },
|
{ value: "人员聚集", label: "人员聚集" },
|
{ value: "未穿工装", label: "未穿工装" },
|
{ value: "未戴安全帽", label: "未戴安全帽" }
|
],
|
levelOptions: [
|
{ value: "一级", label: "一级" },
|
{ value: "二级", label: "二级" },
|
{ value: "三级", label: "三级" },
|
{ value: "四级", label: "四级" },
|
{ value: "五级", label: "五级" }
|
],
|
pushType: "msg",
|
selectedOrg: {},
|
tmpOrg: []
|
}
|
},
|
mounted() {
|
this.reportTask = this.node
|
},
|
methods: {
|
handleTreeChange(value) {
|
this.selectedOrg = value[value.length - 1]
|
},
|
collSelectedNodes() {
|
let selectedNodeId = this.selectedOrg
|
let selectedNode = {}
|
let orgNodeIds = []
|
|
if (this.selectedOrg == "") {
|
return orgNodeIds
|
}
|
|
function findNode(node) {
|
if (node.id == selectedNodeId) {
|
selectedNode = node
|
|
return
|
}
|
|
if (node.children) {
|
node.children.forEach((n) => {
|
findNode(n)
|
})
|
}
|
}
|
|
function collNode(node) {
|
if (node.type != "MENU") {
|
orgNodeIds.push(node.id)
|
return
|
}
|
|
if (node.children) {
|
node.children.forEach((n) => {
|
collNode(n)
|
})
|
}
|
}
|
|
this.camera.forEach((n) => {
|
findNode(n)
|
})
|
|
collNode(selectedNode)
|
|
return orgNodeIds
|
},
|
|
submit() {
|
if (this.reportTask.tel.length != 11) {
|
this.$message.error("手机号码不正确")
|
return
|
}
|
this.$refs["report-task"].validate((valid) => {
|
if (valid) {
|
if (this.tmpOrg.length > 0) {
|
this.reportTask["cameraIds"] = this.collSelectedNodes().join(",")
|
this.reportTask.org = this.$refs["cascader"].getCheckedNodes()[0].pathLabels.join("/")
|
}
|
if (this.id == "") {
|
createTask(this.reportTask).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "保存成功"
|
})
|
this.$emit("close")
|
}
|
})
|
} else {
|
updateTask(this.reportTask).then((rsp) => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "保存成功"
|
})
|
this.$emit("close")
|
}
|
})
|
}
|
} else {
|
console.log("error submit!!")
|
return false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.FormArea {
|
position: relative;
|
height: 565px;
|
.el-form {
|
padding: 20px;
|
padding-top: 34px;
|
|
.el-form-item {
|
margin-bottom: 34px;
|
}
|
|
.h32 {
|
border-radius: 3px;
|
|
::v-deep input {
|
border-radius: 3px;
|
border-color: #c0c5cc;
|
}
|
}
|
|
.el-input {
|
width: 410px;
|
}
|
|
.el-radio-group {
|
margin-bottom: 34px;
|
|
::v-deep .el-radio__label {
|
color: #3d3d3d;
|
}
|
}
|
|
.selectItem ::v-deep {
|
.el-form-item__content {
|
display: flex;
|
|
.el-select {
|
margin-right: 10px;
|
width: 200px;
|
}
|
|
.button {
|
margin-left: 10px;
|
line-height: 32px;
|
color: #0065ff;
|
}
|
}
|
}
|
}
|
|
.el-form-item.is-required {
|
::v-deep .el-form-item__label:before {
|
display: none;
|
}
|
|
::v-deep .el-form-item__label::after {
|
content: "*";
|
color: #f52323;
|
margin-right: 4px;
|
}
|
}
|
|
.btnArea {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 20px 0;
|
border-top: 1px solid #e9ebee;
|
display: flex;
|
justify-content: flex-end;
|
text-align: center;
|
|
.cancel {
|
margin-right: 10px;
|
padding: 6px 16px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
|
.submit {
|
padding: 6px 16px;
|
border: 1px solid #0065ff;
|
color: #fff;
|
background-color: #0065ff;
|
}
|
}
|
}
|
</style>
|
