|
|
@ -2,26 +2,18 @@ |
|
|
|
<ns-modal |
|
|
|
v-model:visible="show" |
|
|
|
width="1100px" |
|
|
|
style="overflow-y: hidden" |
|
|
|
title="添加联系人" |
|
|
|
class="ns-modal-boxs" |
|
|
|
@ok="handleOk" |
|
|
|
@cancel="handleCancel"> |
|
|
|
<div class="ns-title-extra-box" style="position: absolute; top: 28px"></div> |
|
|
|
<div class="box"> |
|
|
|
<div class="box-left"> |
|
|
|
<div style="width: 100%; display: flex; position: relative" class="ns-title-extra-box"> |
|
|
|
<span style="margin-left: 12px; color: #333333">联系人名单</span> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
style="width: 100%; height: 2px" |
|
|
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" /> |
|
|
|
<a-input-search |
|
|
|
<a-input |
|
|
|
v-model:value="searchValue" |
|
|
|
style="margin-bottom: 8px" |
|
|
|
style="margin-bottom: 8px; width: 194px" |
|
|
|
placeholder="请输入关键字" /> |
|
|
|
<img |
|
|
|
style="width: 100%; height: 2px" |
|
|
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" /> |
|
|
|
<div style="width: 100%; height: 370px; overflow-y: auto"> |
|
|
|
<div style="width: 100%; height: 420px; overflow-y: auto"> |
|
|
|
<a-tree |
|
|
|
v-model:selectedKeys="selectedKeys" |
|
|
|
v-model:expandedKeys="expandedKeys" |
|
|
@ -30,19 +22,19 @@ |
|
|
|
/></div> |
|
|
|
</div> |
|
|
|
<div class="box-right"> |
|
|
|
<div style="width: 100%; display: flex; position: relative" class="ns-title-extra-box"> |
|
|
|
<span style="margin-left: 12px; color: #333333">人员列表 </span> |
|
|
|
<div style="width: 100%; display: flex; position: relative"> |
|
|
|
<span style="color: rgba(51, 51, 51, 1); font-size: 16px; font-weight: 700" |
|
|
|
>人员列表 |
|
|
|
</span> |
|
|
|
<a-input-search |
|
|
|
v-model:value="realName" |
|
|
|
style="margin-bottom: 8px; width: 280px; position: absolute; right: 20px" |
|
|
|
placeholder="请输入" |
|
|
|
style="margin-bottom: 2px; width: 210px; margin-left: 12px" |
|
|
|
placeholder="请输入关键字" |
|
|
|
allowClear="true" |
|
|
|
@search="onSearch" /> |
|
|
|
@search="onSearch" |
|
|
|
@pressEnter="onSearch" /> |
|
|
|
</div> |
|
|
|
<img |
|
|
|
style="width: 100%; height: 2px" |
|
|
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" /> |
|
|
|
<div style="width: 100%; height: 450px; overflow-y: auto; padding: 12px 0"> |
|
|
|
<div style="width: 100%; height: 455px; overflow-y: hidden; padding: 12px 0"> |
|
|
|
<a-table |
|
|
|
:row-selection="{ |
|
|
|
selectedRowKeys: selectedRowKey, |
|
|
@ -55,6 +47,7 @@ |
|
|
|
:rowKey="(record: any) => record.userId" |
|
|
|
:pagination="pagination" |
|
|
|
:bordered="true" |
|
|
|
:scroll="{ x: 1000, y: 355 }" |
|
|
|
:size="'middle'"> |
|
|
|
<template #bodyCell="{ record, column }"> |
|
|
|
<template v-if="column.dataIndex === 'address'"> |
|
|
@ -214,8 +207,7 @@ |
|
|
|
showQuickJumper: true, |
|
|
|
showLessItems: true, |
|
|
|
// showSizeChanger: true, |
|
|
|
showTotal: (total: number, range: any) => |
|
|
|
total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '', |
|
|
|
showTotal: (total: number, range: any) => (total && range ? '' : ''), |
|
|
|
onChange: handleChangePage, |
|
|
|
}); |
|
|
|
const onSelectChange = (selectedRowKeys: any, selectedRows: any) => { |
|
|
@ -248,20 +240,24 @@ |
|
|
|
customRender: (text: any) => { |
|
|
|
return text.index + 1; |
|
|
|
}, |
|
|
|
fixed: 'left', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '姓名', |
|
|
|
dataIndex: 'realName', |
|
|
|
width: 100, |
|
|
|
width: 120, |
|
|
|
ellipsis: true, |
|
|
|
fixed: 'left', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '性别', |
|
|
|
dataIndex: 'sex', |
|
|
|
width: 80, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '组织关系', |
|
|
|
dataIndex: 'orgName', |
|
|
|
width: 220, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '部门 ', |
|
|
@ -345,22 +341,44 @@ |
|
|
|
}, |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<style scoped lang="less"> |
|
|
|
<style lang="less"> |
|
|
|
.ns-modal-boxs { |
|
|
|
overflow-y: hidden; |
|
|
|
position: relative; |
|
|
|
height: 650px; |
|
|
|
.ant-modal-title { |
|
|
|
font-size: 16px !important; |
|
|
|
font-weight: 700 !important; |
|
|
|
letter-spacing: 0 !important; |
|
|
|
line-height: 24px !important; |
|
|
|
color: rgba(51, 51, 51, 1) !important; |
|
|
|
margin: 0 16px !important; |
|
|
|
} |
|
|
|
.ant-pagination-prev { |
|
|
|
border: 1px solid rgba(207, 212, 219, 1) !important; |
|
|
|
margin-right: 6px !important; |
|
|
|
} |
|
|
|
.ant-pagination-next { |
|
|
|
border: 1px solid rgba(207, 212, 219, 1) !important; |
|
|
|
margin-left: 6px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
.box { |
|
|
|
width: 100%; |
|
|
|
height: 500px; |
|
|
|
height: 490px; |
|
|
|
display: flex; |
|
|
|
overflow: hidden; |
|
|
|
.box-left { |
|
|
|
width: 300px; |
|
|
|
height: 100%; |
|
|
|
overflow-y: auto; |
|
|
|
padding: 0, 12px; |
|
|
|
border: 1px solid rgba(235, 238, 245, 1); |
|
|
|
padding: 16px; |
|
|
|
width: 226px; |
|
|
|
height: 490px; |
|
|
|
gap: 5px; |
|
|
|
} |
|
|
|
.box-right { |
|
|
|
width: calc(100% - 200px); |
|
|
|
width: calc(100% - 226px); |
|
|
|
height: 100%; |
|
|
|
padding: 0 12px; |
|
|
|
padding: 0 20px; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
} |
|
|
|