|
@ -1,15 +1,58 @@ |
|
|
<template> |
|
|
<template> |
|
|
<a-modal |
|
|
<a-modal |
|
|
v-model:visible="show" |
|
|
v-model:visible="show" |
|
|
width="1000px" |
|
|
width="1100px" |
|
|
style="top: 50%; transform: translateY(-50%)" |
|
|
style="top: 50%; transform: translateY(-50%)" |
|
|
title="添加联系人" |
|
|
title="添加联系人" |
|
|
@ok="handleOk" |
|
|
@ok="handleOk" |
|
|
@cancel="handleCancel"> |
|
|
@cancel="handleCancel"> |
|
|
<div style="width: 100%; height: 100%"> |
|
|
<div style="width: 100%; height: 480px; display: flex"> |
|
|
<p>Some contents...</p> |
|
|
<div style="width: 300px; height: 100%; overflow-y: auto; padding: 0px, 12px"> |
|
|
<p>Some contents...</p> |
|
|
<div style="width: 100%; display: flex; position: relative"> |
|
|
<p>Some contents...</p> |
|
|
<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" /> |
|
|
|
|
|
<a-input-search |
|
|
|
|
|
v-model:value="searchValue" |
|
|
|
|
|
style="margin-bottom: 8px" |
|
|
|
|
|
placeholder="请输入关键字" /> |
|
|
|
|
|
<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" /> |
|
|
|
|
|
<a-tree |
|
|
|
|
|
:expanded-keys="expandedKeys" |
|
|
|
|
|
:auto-expand-parent="autoExpandParent" |
|
|
|
|
|
:tree-data="gData" |
|
|
|
|
|
@expand="onExpand"> |
|
|
|
|
|
<template #title="{ title }"> |
|
|
|
|
|
<span v-if="title.indexOf(searchValue) > -1"> |
|
|
|
|
|
{{ title.substr(0, title.indexOf(searchValue)) }} |
|
|
|
|
|
<span style="color: #f50">{{ searchValue }}</span> |
|
|
|
|
|
{{ title.substr(title.indexOf(searchValue) + searchValue.length) }} |
|
|
|
|
|
</span> |
|
|
|
|
|
<span v-else>{{ title }}</span> |
|
|
|
|
|
</template> |
|
|
|
|
|
</a-tree> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style="width: calc(100% - 200px); height: 100%; padding: 12px"> 2</div> |
|
|
</div> |
|
|
</div> |
|
|
</a-modal> |
|
|
</a-modal> |
|
|
</template> |
|
|
</template> |
|
@ -24,6 +67,7 @@ |
|
|
// 处理确定按钮的逻辑 |
|
|
// 处理确定按钮的逻辑 |
|
|
console.log('点击了确定按钮'); |
|
|
console.log('点击了确定按钮'); |
|
|
}; |
|
|
}; |
|
|
|
|
|
const searchValue = ref<string>(''); |
|
|
const getData = () => { |
|
|
const getData = () => { |
|
|
show.value = true; |
|
|
show.value = true; |
|
|
}; |
|
|
}; |
|
@ -38,6 +82,7 @@ |
|
|
handleOk, |
|
|
handleOk, |
|
|
show, |
|
|
show, |
|
|
getData, |
|
|
getData, |
|
|
|
|
|
searchValue, |
|
|
handleCancel, |
|
|
handleCancel, |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|