|
|
|
@ -1,15 +1,15 @@ |
|
|
|
<template> |
|
|
|
<ns-drawer |
|
|
|
v-model:visible="visible" |
|
|
|
width="520" |
|
|
|
:title="' '" |
|
|
|
width="600" |
|
|
|
:title="'设置通知联系人'" |
|
|
|
:ok="btnClick" |
|
|
|
:cancel="handleClose" |
|
|
|
placement="right" |
|
|
|
:footer-style="{ textAlign: 'right' }" |
|
|
|
@close="handleClose"> |
|
|
|
<div style="padding: 18px; width: 100%; overflow: hidden"> |
|
|
|
<a-form ref="formRef" :model="infoObject" :rules="rules"> |
|
|
|
<div style="width: 100%; overflow: hidden; overflow-y: hidden; height: 100%"> |
|
|
|
<a-form ref="formRef" :model="infoObject" :rules="rules" style="width: 80%"> |
|
|
|
<a-form-item ref="notification" label="通知方式" name="notification"> |
|
|
|
<a-select |
|
|
|
ref="select" |
|
|
|
@ -22,7 +22,7 @@ |
|
|
|
placeholder="请选择通知方式" |
|
|
|
:filter-option="filterDevicePoint" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="启用规则" name="enableRules"> |
|
|
|
<a-form-item label="启用规则"> |
|
|
|
<a-switch |
|
|
|
:checked="infoObject.enableRules === 1 ? true : false" |
|
|
|
:class="{ |
|
|
|
@ -31,28 +31,57 @@ |
|
|
|
}" |
|
|
|
@click="clickSwitch" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="通知用户" name="user"> |
|
|
|
<a-cascader |
|
|
|
v-model:value="infoObject.user" |
|
|
|
style="width: 100%" |
|
|
|
multiple |
|
|
|
:max-tag-count="1" |
|
|
|
:options="options" |
|
|
|
:load-data="loadData" |
|
|
|
placeholder="请选择通知用户" |
|
|
|
:show-checked-strategy="Cascader.SHOW_CHILD" /> |
|
|
|
</a-form-item> |
|
|
|
</a-form> |
|
|
|
<a-table :dataSource="dataSource" :columns="columns" :pagination="false" /> |
|
|
|
<div style="width: 100%; height: 765px; overflow-y: auto"> |
|
|
|
<div style="margin-bottom: 8px"> |
|
|
|
<div style="width: 100%; display: flex; position: relative"> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
border-width: 0px; |
|
|
|
position: absolute; |
|
|
|
left: 0px; |
|
|
|
top: 5px; |
|
|
|
width: 5px; |
|
|
|
height: 15px; |
|
|
|
background: inherit; |
|
|
|
background-color: rgba(251, 156, 67, 1); |
|
|
|
border: none; |
|
|
|
border-radius: 5px; |
|
|
|
-moz-box-shadow: none; |
|
|
|
-webkit-box-shadow: none; |
|
|
|
box-shadow: none; |
|
|
|
"></div> |
|
|
|
<span style="margin-left: 24px; color: #333333">联系人名单</span> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
style="width: 100%; margin-top: -10px" |
|
|
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" /> |
|
|
|
</div> |
|
|
|
<div style="margin-bottom: 16px"> |
|
|
|
<a-button type="primary" @click="chengUser">选择联系人 </a-button> |
|
|
|
</div> |
|
|
|
<a-table |
|
|
|
:dataSource="dataSource" |
|
|
|
:columns="columns" |
|
|
|
:scroll="{ x: 800, y: 700 }" |
|
|
|
:pagination="pagination"> |
|
|
|
<template #bodyCell="{ record, column }"> |
|
|
|
<template v-if="column.dataIndex === 'operation'"> |
|
|
|
<a style="color: rgb(210, 0, 5)" @click="remove(record)">移除</a> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<linkPeople v-show="visibleModel" ref="linkPeoples" @handleCancel="handleCancel" /> |
|
|
|
</ns-drawer> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { ref } from 'vue'; |
|
|
|
import { Cascader } from 'ant-design-vue'; |
|
|
|
|
|
|
|
import { NsMessage } from '/nerv-lib/component'; |
|
|
|
import { http } from '/nerv-lib/util'; |
|
|
|
// import { NsMessage } from '/nerv-lib/component'; |
|
|
|
// import { http } from '/nerv-lib/util'; |
|
|
|
// import { number } from 'vue-types'; |
|
|
|
import linkPeople from './linkPeople/index.vue'; |
|
|
|
|
|
|
|
// import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms'; |
|
|
|
|
|
|
|
@ -61,25 +90,191 @@ |
|
|
|
{ |
|
|
|
title: '序号', |
|
|
|
dataIndex: 'address', |
|
|
|
width: 80, |
|
|
|
fixed: 'left', |
|
|
|
customRender: (text: any) => { |
|
|
|
return text.index + 1; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '通知名单', |
|
|
|
title: '姓名', |
|
|
|
dataIndex: 'name', |
|
|
|
width: 80, |
|
|
|
fixed: 'left', |
|
|
|
key: 'name', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const dataSource = [ |
|
|
|
{ |
|
|
|
name: '运维>运维1部>张三', |
|
|
|
title: '性别', |
|
|
|
dataIndex: 'sex', |
|
|
|
width: 80, |
|
|
|
key: 'sex', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '组织关系', |
|
|
|
dataIndex: 'site', |
|
|
|
key: 'site', |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '运维>运维1部>李四', |
|
|
|
title: '部门', |
|
|
|
dataIndex: 'department', |
|
|
|
key: 'department', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作', |
|
|
|
width: 80, |
|
|
|
dataIndex: 'operation', |
|
|
|
fixed: 'right', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const visibleModel = ref(false); |
|
|
|
const dataSource = ref([ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
name: '张三1', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
name: '张三2', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
name: '张三3', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 6, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 7, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 8, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 9, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 10, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 11, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 12, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 13, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 14, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 15, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 16, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 17, |
|
|
|
name: '张三', |
|
|
|
sex: '男', |
|
|
|
site: '济阳站', |
|
|
|
department: '济阳站/产品/产品经理', |
|
|
|
}, |
|
|
|
]); |
|
|
|
const visible = ref(false); |
|
|
|
const linkPeoples = ref(null); |
|
|
|
const handleChangePage = (current: number, pageSize: number) => { |
|
|
|
pagination.value.current = current; |
|
|
|
pagination.value.pageSize = pageSize; |
|
|
|
}; |
|
|
|
const pagination = ref({ |
|
|
|
total: 0, |
|
|
|
size: 'small', |
|
|
|
current: 1, |
|
|
|
pageSize: 10, |
|
|
|
showQuickJumper: true, |
|
|
|
showLessItems: true, |
|
|
|
// showSizeChanger: true, |
|
|
|
showTotal: (total: number, range: any) => |
|
|
|
total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '', |
|
|
|
onChange: handleChangePage, |
|
|
|
}); |
|
|
|
//点击联系人 |
|
|
|
const chengUser = () => { |
|
|
|
visibleModel.value = true; |
|
|
|
linkPeoples.value.getData(); |
|
|
|
}; |
|
|
|
//取消弹窗 |
|
|
|
const handleCancel = () => { |
|
|
|
visibleModel.value = false; |
|
|
|
}; |
|
|
|
//表单数据 |
|
|
|
const infoObject = ref({ |
|
|
|
enableRules: 0, |
|
|
|
@ -101,63 +296,10 @@ |
|
|
|
{ label: '站内信息', value: 1 }, |
|
|
|
{ label: '邮件', value: 2 }, |
|
|
|
]); |
|
|
|
//通知用户 |
|
|
|
const options = ref([ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
label: 'Zhejiang', |
|
|
|
isLeaf: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 2, |
|
|
|
label: 'Jiangsu', |
|
|
|
isLeaf: false, |
|
|
|
}, |
|
|
|
]); |
|
|
|
//加载用户 |
|
|
|
const loadData = (selectedOptions: any) => { |
|
|
|
const targetOption = selectedOptions[selectedOptions.length - 1]; |
|
|
|
targetOption.loading = true; |
|
|
|
// load options lazily |
|
|
|
setTimeout(() => { |
|
|
|
targetOption.loading = false; |
|
|
|
console.log(targetOption, '数据'); |
|
|
|
targetOption.children = [ |
|
|
|
{ |
|
|
|
label: `${targetOption.label} Dynamic 1`, |
|
|
|
value: 3, |
|
|
|
isLeaf: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: `${targetOption.label} Dynamic 2`, |
|
|
|
value: 4, |
|
|
|
isLeaf: false, |
|
|
|
}, |
|
|
|
]; |
|
|
|
options.value = [...options.value]; |
|
|
|
}, 1000); |
|
|
|
}; |
|
|
|
|
|
|
|
const rules = { |
|
|
|
notification: [{ required: true, message: '请选择站点', trigger: 'change' }], |
|
|
|
enableRules: [{ required: true, message: '请选择启用规则', trigger: 'change' }], |
|
|
|
notification: [{ required: true, message: '请选择通知方式', trigger: 'change' }], |
|
|
|
user: [{ required: true, message: '请选择通知人', trigger: 'change' }], |
|
|
|
abnormalDescription: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请输入异常描述', |
|
|
|
trigger: 'blur', |
|
|
|
validator: (rules: any, abnormalDescription: any, cbfn: any) => { |
|
|
|
if (abnormalDescription.trim() !== '') { |
|
|
|
cbfn(); |
|
|
|
} else { |
|
|
|
cbfn('告警标题不能为空'); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }], |
|
|
|
number: [{ required: true, message: '请输入数值', trigger: 'blur' }], |
|
|
|
}; |
|
|
|
const formRef = ref(); |
|
|
|
const emit = defineEmits(['editObject']); |
|
|
|
@ -165,7 +307,9 @@ |
|
|
|
//判断 是新增 还是修改 |
|
|
|
if (value) { |
|
|
|
// infoObject.value = value; |
|
|
|
infoObject.value = {}; |
|
|
|
infoObject.value = { |
|
|
|
enableRules: 0, |
|
|
|
}; |
|
|
|
} else { |
|
|
|
infoObject.value = { |
|
|
|
enableRules: 0, |
|
|
|
@ -173,7 +317,15 @@ |
|
|
|
} |
|
|
|
visible.value = !visible.value; |
|
|
|
}; |
|
|
|
|
|
|
|
//移除数据 |
|
|
|
const remove = (data: any) => { |
|
|
|
dataSource.value.forEach((item, index) => { |
|
|
|
if (item.id === data.id) { |
|
|
|
dataSource.value.splice(index, 1); |
|
|
|
} |
|
|
|
}); |
|
|
|
dataSource.value = [...dataSource.value]; |
|
|
|
}; |
|
|
|
const btnClick = () => { |
|
|
|
console.log(infoObject.value); |
|
|
|
//表单校验 |
|
|
|
@ -190,22 +342,13 @@ |
|
|
|
// 清楚校验错误信息 |
|
|
|
formRef.value.resetFields(); |
|
|
|
visible.value = false; |
|
|
|
options.value = [ |
|
|
|
{ |
|
|
|
value: 'zhejiang', |
|
|
|
label: 'Zhejiang', |
|
|
|
isLeaf: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'jiangsu', |
|
|
|
label: 'Jiangsu', |
|
|
|
isLeaf: false, |
|
|
|
}, |
|
|
|
]; |
|
|
|
visibleModel.value = false; |
|
|
|
}; |
|
|
|
defineExpose({ |
|
|
|
toggle, |
|
|
|
handleClose, |
|
|
|
handleCancel, |
|
|
|
handleChangePage, |
|
|
|
formRef, |
|
|
|
}); |
|
|
|
</script> |
|
|
|
@ -240,7 +383,7 @@ |
|
|
|
} |
|
|
|
/deep/ .ant-form-item-label { |
|
|
|
z-index: 20; |
|
|
|
text-align: right; |
|
|
|
width: 23%; |
|
|
|
text-align: left; |
|
|
|
width: 20%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhaohy
4 months ago