You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
3.0 KiB
90 lines
3.0 KiB
<template>
|
|
<a-modal
|
|
v-model:visible="show"
|
|
width="1100px"
|
|
style="top: 50%; transform: translateY(-50%)"
|
|
title="添加联系人"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel">
|
|
<div style="width: 100%; height: 480px; display: flex">
|
|
<div style="width: 300px; height: 100%; overflow-y: auto; padding: 0px, 12px">
|
|
<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" />
|
|
<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>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { ref } from 'vue';
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
setup(props, { emit }) {
|
|
const handleOk = () => {
|
|
// 处理确定按钮的逻辑
|
|
console.log('点击了确定按钮');
|
|
};
|
|
const searchValue = ref<string>('');
|
|
const getData = () => {
|
|
show.value = true;
|
|
};
|
|
const show = ref(false);
|
|
const handleCancel = () => {
|
|
// 处理取消按钮的逻辑
|
|
console.log('点击了取消按钮');
|
|
emit('handleCancel', null);
|
|
show.value = false;
|
|
};
|
|
return {
|
|
handleOk,
|
|
show,
|
|
getData,
|
|
searchValue,
|
|
handleCancel,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|