7x31
/
cmdb
mirror of https://github.com/veops/cmdb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #609 from veops/dev_ui_240903 

feat: update resource search
This commit is contained in:
Leo Song 2024-09-03 11:30:08 +08:00 committed by GitHub
parent 417e8fe349 5aba1ff257
commit 42ad2b6dde
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
35 changed files with 4079 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

411
cmdb-ui/public/iconfont/demo_index.html
View File

@ -54,93 +54,171 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe9b6;</span>
<div class="name">veops-expand</div>
<div class="code-name">&amp;#xe9b6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9b1;</span>
<div class="name">公有云</div>
<div class="code-name">&amp;#xe9b1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9b2;</span>
<div class="name">操作系统</div>
<div class="code-name">&amp;#xe9b2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9b3;</span>
<div class="name">IPAM</div>
<div class="code-name">&amp;#xe9b3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9b4;</span>
<div class="name">hyperV</div>
<div class="code-name">&amp;#xe9b4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9b5;</span>
<div class="name">数据中心</div>
<div class="code-name">&amp;#xe9b5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9ad;</span>
<div class="name">硬件设备</div>
<div class="code-name">&amp;#xe9ad;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9ae;</span>
<div class="name">计算机</div>
<div class="code-name">&amp;#xe9ae;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9af;</span>
<div class="name">网络设备</div>
<div class="code-name">&amp;#xe9af;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9b0;</span>
<div class="name">存储设备</div>
<div class="code-name">&amp;#xe9b0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9ab;</span>
<div class="name">负载均衡</div>
<div class="code-name">&amp;#xe9ab;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9ac;</span>
<div class="name">消息队列</div>
<div class="code-name">&amp;#xe9ac;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe9aa;</span>
<div class="name">websever</div>
<div class="code-name">&amp;#xe9aa;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe9a9;</span> <span class="icon iconfont">&#xe9a9;</span>
<div class="name">caise-middleware</div> <div class="name">中间件</div>
<div class="code-name">&amp;#xe9a9;</div> <div class="code-name">&amp;#xe9a9;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe9a7;</span> <span class="icon iconfont">&#xe9a7;</span>
<div class="name">caise-database</div> <div class="name">数据库</div>
<div class="code-name">&amp;#xe9a7;</div> <div class="code-name">&amp;#xe9a7;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe9a8;</span> <span class="icon iconfont">&#xe9a8;</span>
<div class="name">caise-business</div> <div class="name">业务</div>
<div class="code-name">&amp;#xe9a8;</div> <div class="code-name">&amp;#xe9a8;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe9a6;</span> <span class="icon iconfont">&#xe9a6;</span>
<div class="name">caise- virtualization</div> <div class="name">虚拟化</div>
<div class="code-name">&amp;#xe9a6;</div> <div class="code-name">&amp;#xe9a6;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe9a4;</span> <span class="icon iconfont">&#xe9a4;</span>
<div class="name">caise-storage_pool</div> <div class="name">存储池</div>
<div class="code-name">&amp;#xe9a4;</div> <div class="code-name">&amp;#xe9a4;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe9a5;</span> <span class="icon iconfont">&#xe9a5;</span>
<div class="name">caise-storage_volume</div> <div class="name">存储卷</div>
<div class="code-name">&amp;#xe9a5;</div> <div class="code-name">&amp;#xe9a5;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe9a3;</span> <span class="icon iconfont">&#xe9a3;</span>
<div class="name">ciase-aix</div> <div class="name">aix</div>
<div class="code-name">&amp;#xe9a3;</div> <div class="code-name">&amp;#xe9a3;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe99b;</span> <span class="icon iconfont">&#xe99b;</span>
<div class="name">caise_pool</div> <div class="name">ip池</div>
<div class="code-name">&amp;#xe99b;</div> <div class="code-name">&amp;#xe99b;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe99c;</span> <span class="icon iconfont">&#xe99c;</span>
<div class="name">caise-ip_address</div> <div class="name">ip地址</div>
<div class="code-name">&amp;#xe99c;</div> <div class="code-name">&amp;#xe99c;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe99d;</span> <span class="icon iconfont">&#xe99d;</span>
<div class="name">caise-computer_room</div> <div class="name">机房</div>
<div class="code-name">&amp;#xe99d;</div> <div class="code-name">&amp;#xe99d;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe99e;</span> <span class="icon iconfont">&#xe99e;</span>
<div class="name">caise-rack</div> <div class="name">机柜</div>
<div class="code-name">&amp;#xe99e;</div> <div class="code-name">&amp;#xe99e;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe99f;</span> <span class="icon iconfont">&#xe99f;</span>
<div class="name">caise-pc</div> <div class="name">PC</div>
<div class="code-name">&amp;#xe99f;</div> <div class="code-name">&amp;#xe99f;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe9a0;</span> <span class="icon iconfont">&#xe9a0;</span>
<div class="name">caise-bandwidth_line</div> <div class="name">带宽线路</div>
<div class="code-name">&amp;#xe9a0;</div> <div class="code-name">&amp;#xe9a0;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe9a1;</span> <span class="icon iconfont">&#xe9a1;</span>
<div class="name">caise-fiber</div> <div class="name">光纤交换机</div>
<div class="code-name">&amp;#xe9a1;</div> <div class="code-name">&amp;#xe9a1;</div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe9a2;</span> <span class="icon iconfont">&#xe9a2;</span>
<div class="name">caise-disk_array</div> <div class="name">磁盘阵列</div>
<div class="code-name">&amp;#xe9a2;</div> <div class="code-name">&amp;#xe9a2;</div>
</li> </li>
@ -5622,9 +5700,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1724834571283') format('woff2'), src: url('iconfont.woff2?t=1725331691589') format('woff2'),
url('iconfont.woff?t=1724834571283') format('woff'), url('iconfont.woff?t=1725331691589') format('woff'),
url('iconfont.ttf?t=1724834571283') format('truetype'); url('iconfont.ttf?t=1725331691589') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -5650,10 +5728,127 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont veops-expand"></span>
<div class="name">
veops-expand
</div>
<div class="code-name">.veops-expand
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-public_cloud"></span>
<div class="name">
公有云
</div>
<div class="code-name">.caise-public_cloud
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-system"></span>
<div class="name">
操作系统
</div>
<div class="code-name">.caise-system
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-IPAM"></span>
<div class="name">
IPAM
</div>
<div class="code-name">.caise-IPAM
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-hyperV"></span>
<div class="name">
hyperV
</div>
<div class="code-name">.caise-hyperV
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-data_center2"></span>
<div class="name">
数据中心
</div>
<div class="code-name">.caise-data_center2
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-hardware"></span>
<div class="name">
硬件设备
</div>
<div class="code-name">.caise-hardware
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-computer"></span>
<div class="name">
计算机
</div>
<div class="code-name">.caise-computer
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-network_devices"></span>
<div class="name">
网络设备
</div>
<div class="code-name">.caise-network_devices
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-storage_device"></span>
<div class="name">
存储设备
</div>
<div class="code-name">.caise-storage_device
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-load_balancing"></span>
<div class="name">
负载均衡
</div>
<div class="code-name">.caise-load_balancing
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-message_queue"></span>
<div class="name">
消息队列
</div>
<div class="code-name">.caise-message_queue
</div>
</li>
<li class="dib">
<span class="icon iconfont caise-websever"></span>
<div class="name">
websever
</div>
<div class="code-name">.caise-websever
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-middleware"></span> <span class="icon iconfont caise-middleware"></span>
<div class="name"> <div class="name">
caise-middleware 中间件
</div> </div>
<div class="code-name">.caise-middleware <div class="code-name">.caise-middleware
</div> </div>
@ -5662,7 +5857,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-database"></span> <span class="icon iconfont caise-database"></span>
<div class="name"> <div class="name">
caise-database 数据库
</div> </div>
<div class="code-name">.caise-database <div class="code-name">.caise-database
</div> </div>
@ -5671,43 +5866,43 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-business"></span> <span class="icon iconfont caise-business"></span>
<div class="name"> <div class="name">
caise-business 业务
</div> </div>
<div class="code-name">.caise-business <div class="code-name">.caise-business
</div> </div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont a-caise-virtualization"></span> <span class="icon iconfont caise-virtualization"></span>
<div class="name"> <div class="name">
caise- virtualization 虚拟化
</div> </div>
<div class="code-name">.a-caise-virtualization <div class="code-name">.caise-virtualization
</div> </div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-storage_pool"></span> <span class="icon iconfont caise-storage_pool"></span>
<div class="name"> <div class="name">
caise-storage_pool 存储池
</div> </div>
<div class="code-name">.caise-storage_pool <div class="code-name">.caise-storage_pool
</div> </div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont a-caise-storage_volume1"></span> <span class="icon iconfont caise-storage_volume1"></span>
<div class="name"> <div class="name">
caise-storage_volume 存储卷
</div> </div>
<div class="code-name">.a-caise-storage_volume1 <div class="code-name">.caise-storage_volume1
</div> </div>
</li> </li>
<li class="dib"> <li class="dib">
<span class="icon iconfont ciase-aix"></span> <span class="icon iconfont ciase-aix"></span>
<div class="name"> <div class="name">
ciase-aix aix
</div> </div>
<div class="code-name">.ciase-aix <div class="code-name">.ciase-aix
</div> </div>
@ -5716,7 +5911,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont caise_pool"></span> <span class="icon iconfont caise_pool"></span>
<div class="name"> <div class="name">
caise_pool ip池
</div> </div>
<div class="code-name">.caise_pool <div class="code-name">.caise_pool
</div> </div>
@ -5725,7 +5920,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-ip_address"></span> <span class="icon iconfont caise-ip_address"></span>
<div class="name"> <div class="name">
caise-ip_address ip地址
</div> </div>
<div class="code-name">.caise-ip_address <div class="code-name">.caise-ip_address
</div> </div>
@ -5734,7 +5929,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-computer_room"></span> <span class="icon iconfont caise-computer_room"></span>
<div class="name"> <div class="name">
caise-computer_room 机房
</div> </div>
<div class="code-name">.caise-computer_room <div class="code-name">.caise-computer_room
</div> </div>
@ -5743,7 +5938,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-rack"></span> <span class="icon iconfont caise-rack"></span>
<div class="name"> <div class="name">
caise-rack 机柜
</div> </div>
<div class="code-name">.caise-rack <div class="code-name">.caise-rack
</div> </div>
@ -5752,7 +5947,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-pc"></span> <span class="icon iconfont caise-pc"></span>
<div class="name"> <div class="name">
caise-pc PC
</div> </div>
<div class="code-name">.caise-pc <div class="code-name">.caise-pc
</div> </div>
@ -5761,7 +5956,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-bandwidth_line"></span> <span class="icon iconfont caise-bandwidth_line"></span>
<div class="name"> <div class="name">
caise-bandwidth_line 带宽线路
</div> </div>
<div class="code-name">.caise-bandwidth_line <div class="code-name">.caise-bandwidth_line
</div> </div>
@ -5770,7 +5965,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-fiber"></span> <span class="icon iconfont caise-fiber"></span>
<div class="name"> <div class="name">
caise-fiber 光纤交换机
</div> </div>
<div class="code-name">.caise-fiber <div class="code-name">.caise-fiber
</div> </div>
@ -5779,7 +5974,7 @@
<li class="dib"> <li class="dib">
<span class="icon iconfont caise-disk_array"></span> <span class="icon iconfont caise-disk_array"></span>
<div class="name"> <div class="name">
caise-disk_array 磁盘阵列
</div> </div>
<div class="code-name">.caise-disk_array <div class="code-name">.caise-disk_array
</div> </div>
@ -14002,11 +14197,115 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#veops-expand"></use>
</svg>
<div class="name">veops-expand</div>
<div class="code-name">#veops-expand</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-public_cloud"></use>
</svg>
<div class="name">公有云</div>
<div class="code-name">#caise-public_cloud</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-system"></use>
</svg>
<div class="name">操作系统</div>
<div class="code-name">#caise-system</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-IPAM"></use>
</svg>
<div class="name">IPAM</div>
<div class="code-name">#caise-IPAM</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-hyperV"></use>
</svg>
<div class="name">hyperV</div>
<div class="code-name">#caise-hyperV</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-data_center2"></use>
</svg>
<div class="name">数据中心</div>
<div class="code-name">#caise-data_center2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-hardware"></use>
</svg>
<div class="name">硬件设备</div>
<div class="code-name">#caise-hardware</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-computer"></use>
</svg>
<div class="name">计算机</div>
<div class="code-name">#caise-computer</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-network_devices"></use>
</svg>
<div class="name">网络设备</div>
<div class="code-name">#caise-network_devices</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-storage_device"></use>
</svg>
<div class="name">存储设备</div>
<div class="code-name">#caise-storage_device</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-load_balancing"></use>
</svg>
<div class="name">负载均衡</div>
<div class="code-name">#caise-load_balancing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-message_queue"></use>
</svg>
<div class="name">消息队列</div>
<div class="code-name">#caise-message_queue</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-websever"></use>
</svg>
<div class="name">websever</div>
<div class="code-name">#caise-websever</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-middleware"></use> <use xlink:href="#caise-middleware"></use>
</svg> </svg>
<div class="name">caise-middleware</div> <div class="name">中间件</div>
<div class="code-name">#caise-middleware</div> <div class="code-name">#caise-middleware</div>
</li> </li>
@ -14014,7 +14313,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-database"></use> <use xlink:href="#caise-database"></use>
</svg> </svg>
<div class="name">caise-database</div> <div class="name">数据库</div>
<div class="code-name">#caise-database</div> <div class="code-name">#caise-database</div>
</li> </li>
@ -14022,39 +14321,39 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-business"></use> <use xlink:href="#caise-business"></use>
</svg> </svg>
<div class="name">caise-business</div> <div class="name">业务</div>
<div class="code-name">#caise-business</div> <div class="code-name">#caise-business</div>
</li> </li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#a-caise-virtualization"></use> <use xlink:href="#caise-virtualization"></use>
</svg> </svg>
<div class="name">caise- virtualization</div> <div class="name">虚拟化</div>
<div class="code-name">#a-caise-virtualization</div> <div class="code-name">#caise-virtualization</div>
</li> </li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-storage_pool"></use> <use xlink:href="#caise-storage_pool"></use>
</svg> </svg>
<div class="name">caise-storage_pool</div> <div class="name">存储池</div>
<div class="code-name">#caise-storage_pool</div> <div class="code-name">#caise-storage_pool</div>
</li> </li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#a-caise-storage_volume1"></use> <use xlink:href="#caise-storage_volume1"></use>
</svg> </svg>
<div class="name">caise-storage_volume</div> <div class="name">存储卷</div>
<div class="code-name">#a-caise-storage_volume1</div> <div class="code-name">#caise-storage_volume1</div>
</li> </li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#ciase-aix"></use> <use xlink:href="#ciase-aix"></use>
</svg> </svg>
<div class="name">ciase-aix</div> <div class="name">aix</div>
<div class="code-name">#ciase-aix</div> <div class="code-name">#ciase-aix</div>
</li> </li>
@ -14062,7 +14361,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise_pool"></use> <use xlink:href="#caise_pool"></use>
</svg> </svg>
<div class="name">caise_pool</div> <div class="name">ip池</div>
<div class="code-name">#caise_pool</div> <div class="code-name">#caise_pool</div>
</li> </li>
@ -14070,7 +14369,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-ip_address"></use> <use xlink:href="#caise-ip_address"></use>
</svg> </svg>
<div class="name">caise-ip_address</div> <div class="name">ip地址</div>
<div class="code-name">#caise-ip_address</div> <div class="code-name">#caise-ip_address</div>
</li> </li>
@ -14078,7 +14377,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-computer_room"></use> <use xlink:href="#caise-computer_room"></use>
</svg> </svg>
<div class="name">caise-computer_room</div> <div class="name">机房</div>
<div class="code-name">#caise-computer_room</div> <div class="code-name">#caise-computer_room</div>
</li> </li>
@ -14086,7 +14385,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-rack"></use> <use xlink:href="#caise-rack"></use>
</svg> </svg>
<div class="name">caise-rack</div> <div class="name">机柜</div>
<div class="code-name">#caise-rack</div> <div class="code-name">#caise-rack</div>
</li> </li>
@ -14094,7 +14393,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-pc"></use> <use xlink:href="#caise-pc"></use>
</svg> </svg>
<div class="name">caise-pc</div> <div class="name">PC</div>
<div class="code-name">#caise-pc</div> <div class="code-name">#caise-pc</div>
</li> </li>
@ -14102,7 +14401,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-bandwidth_line"></use> <use xlink:href="#caise-bandwidth_line"></use>
</svg> </svg>
<div class="name">caise-bandwidth_line</div> <div class="name">带宽线路</div>
<div class="code-name">#caise-bandwidth_line</div> <div class="code-name">#caise-bandwidth_line</div>
</li> </li>
@ -14110,7 +14409,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-fiber"></use> <use xlink:href="#caise-fiber"></use>
</svg> </svg>
<div class="name">caise-fiber</div> <div class="name">光纤交换机</div>
<div class="code-name">#caise-fiber</div> <div class="code-name">#caise-fiber</div>
</li> </li>
@ -14118,7 +14417,7 @@
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#caise-disk_array"></use> <use xlink:href="#caise-disk_array"></use>
</svg> </svg>
<div class="name">caise-disk_array</div> <div class="name">磁盘阵列</div>
<div class="code-name">#caise-disk_array</div> <div class="code-name">#caise-disk_array</div>
</li> </li>

62
cmdb-ui/public/iconfont/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3857903 */ font-family: "iconfont"; /* Project id 3857903 */
src: url('iconfont.woff2?t=1724834571283') format('woff2'), src: url('iconfont.woff2?t=1725331691589') format('woff2'),
url('iconfont.woff?t=1724834571283') format('woff'), url('iconfont.woff?t=1725331691589') format('woff'),
url('iconfont.ttf?t=1724834571283') format('truetype'); url('iconfont.ttf?t=1725331691589') format('truetype');
} }
.iconfont { .iconfont {
@ -13,6 +13,58 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.veops-expand:before {
content: "\e9b6";
}
.caise-public_cloud:before {
content: "\e9b1";
}
.caise-system:before {
content: "\e9b2";
}
.caise-IPAM:before {
content: "\e9b3";
}
.caise-hyperV:before {
content: "\e9b4";
}
.caise-data_center2:before {
content: "\e9b5";
}
.caise-hardware:before {
content: "\e9ad";
}
.caise-computer:before {
content: "\e9ae";
}
.caise-network_devices:before {
content: "\e9af";
}
.caise-storage_device:before {
content: "\e9b0";
}
.caise-load_balancing:before {
content: "\e9ab";
}
.caise-message_queue:before {
content: "\e9ac";
}
.caise-websever:before {
content: "\e9aa";
}
.caise-middleware:before { .caise-middleware:before {
content: "\e9a9"; content: "\e9a9";
} }
@ -25,7 +77,7 @@
content: "\e9a8"; content: "\e9a8";
} }
.a-caise-virtualization:before { .caise-virtualization:before {
content: "\e9a6"; content: "\e9a6";
} }
@ -33,7 +85,7 @@
content: "\e9a4"; content: "\e9a4";
} }
.a-caise-storage_volume1:before { .caise-storage_volume1:before {
content: "\e9a5"; content: "\e9a5";
} }

2
cmdb-ui/public/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

125
cmdb-ui/public/iconfont/iconfont.json
View File

@ -5,107 +5,198 @@
"css_prefix_text": "", "css_prefix_text": "",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "41681675",
"name": "veops-expand",
"font_class": "veops-expand",
"unicode": "e9b6",
"unicode_decimal": 59830
},
{
"icon_id": "41672951",
"name": "公有云",
"font_class": "caise-public_cloud",
"unicode": "e9b1",
"unicode_decimal": 59825
},
{
"icon_id": "41672952",
"name": "操作系统",
"font_class": "caise-system",
"unicode": "e9b2",
"unicode_decimal": 59826
},
{
"icon_id": "41673309",
"name": "IPAM",
"font_class": "caise-IPAM",
"unicode": "e9b3",
"unicode_decimal": 59827
},
{
"icon_id": "41673312",
"name": "hyperV",
"font_class": "caise-hyperV",
"unicode": "e9b4",
"unicode_decimal": 59828
},
{
"icon_id": "41673320",
"name": "数据中心",
"font_class": "caise-data_center2",
"unicode": "e9b5",
"unicode_decimal": 59829
},
{
"icon_id": "41669141",
"name": "硬件设备",
"font_class": "caise-hardware",
"unicode": "e9ad",
"unicode_decimal": 59821
},
{
"icon_id": "41669249",
"name": "计算机",
"font_class": "caise-computer",
"unicode": "e9ae",
"unicode_decimal": 59822
},
{
"icon_id": "41669250",
"name": "网络设备",
"font_class": "caise-network_devices",
"unicode": "e9af",
"unicode_decimal": 59823
},
{
"icon_id": "41669278",
"name": "存储设备",
"font_class": "caise-storage_device",
"unicode": "e9b0",
"unicode_decimal": 59824
},
{
"icon_id": "41659452",
"name": "负载均衡",
"font_class": "caise-load_balancing",
"unicode": "e9ab",
"unicode_decimal": 59819
},
{
"icon_id": "41659446",
"name": "消息队列",
"font_class": "caise-message_queue",
"unicode": "e9ac",
"unicode_decimal": 59820
},
{
"icon_id": "41659424",
"name": "websever",
"font_class": "caise-websever",
"unicode": "e9aa",
"unicode_decimal": 59818
},
{ {
"icon_id": "41655608", "icon_id": "41655608",
"name": "caise-middleware", "name": "中间件",
"font_class": "caise-middleware", "font_class": "caise-middleware",
"unicode": "e9a9", "unicode": "e9a9",
"unicode_decimal": 59817 "unicode_decimal": 59817
}, },
{ {
"icon_id": "41655599", "icon_id": "41655599",
"name": "caise-database", "name": "数据库",
"font_class": "caise-database", "font_class": "caise-database",
"unicode": "e9a7", "unicode": "e9a7",
"unicode_decimal": 59815 "unicode_decimal": 59815
}, },
{ {
"icon_id": "41655591", "icon_id": "41655591",
"name": "caise-business", "name": "业务",
"font_class": "caise-business", "font_class": "caise-business",
"unicode": "e9a8", "unicode": "e9a8",
"unicode_decimal": 59816 "unicode_decimal": 59816
}, },
{ {
"icon_id": "41655550", "icon_id": "41655550",
"name": "caise- virtualization", "name": "虚拟化",
"font_class": "a-caise-virtualization", "font_class": "caise-virtualization",
"unicode": "e9a6", "unicode": "e9a6",
"unicode_decimal": 59814 "unicode_decimal": 59814
}, },
{ {
"icon_id": "41654680", "icon_id": "41654680",
"name": "caise-storage_pool", "name": "存储池",
"font_class": "caise-storage_pool", "font_class": "caise-storage_pool",
"unicode": "e9a4", "unicode": "e9a4",
"unicode_decimal": 59812 "unicode_decimal": 59812
}, },
{ {
"icon_id": "41654676", "icon_id": "41654676",
"name": "caise-storage_volume", "name": "存储卷",
"font_class": "a-caise-storage_volume1", "font_class": "caise-storage_volume1",
"unicode": "e9a5", "unicode": "e9a5",
"unicode_decimal": 59813 "unicode_decimal": 59813
}, },
{ {
"icon_id": "41654608", "icon_id": "41654608",
"name": "ciase-aix", "name": "aix",
"font_class": "ciase-aix", "font_class": "ciase-aix",
"unicode": "e9a3", "unicode": "e9a3",
"unicode_decimal": 59811 "unicode_decimal": 59811
}, },
{ {
"icon_id": "41654233", "icon_id": "41654233",
"name": "caise_pool", "name": "ip池",
"font_class": "caise_pool", "font_class": "caise_pool",
"unicode": "e99b", "unicode": "e99b",
"unicode_decimal": 59803 "unicode_decimal": 59803
}, },
{ {
"icon_id": "41654237", "icon_id": "41654237",
"name": "caise-ip_address", "name": "ip地址",
"font_class": "caise-ip_address", "font_class": "caise-ip_address",
"unicode": "e99c", "unicode": "e99c",
"unicode_decimal": 59804 "unicode_decimal": 59804
}, },
{ {
"icon_id": "41654249", "icon_id": "41654249",
"name": "caise-computer_room", "name": "机房",
"font_class": "caise-computer_room", "font_class": "caise-computer_room",
"unicode": "e99d", "unicode": "e99d",
"unicode_decimal": 59805 "unicode_decimal": 59805
}, },
{ {
"icon_id": "41654271", "icon_id": "41654271",
"name": "caise-rack", "name": "机柜",
"font_class": "caise-rack", "font_class": "caise-rack",
"unicode": "e99e", "unicode": "e99e",
"unicode_decimal": 59806 "unicode_decimal": 59806
}, },
{ {
"icon_id": "41654276", "icon_id": "41654276",
"name": "caise-pc", "name": "PC",
"font_class": "caise-pc", "font_class": "caise-pc",
"unicode": "e99f", "unicode": "e99f",
"unicode_decimal": 59807 "unicode_decimal": 59807
}, },
{ {
"icon_id": "41654305", "icon_id": "41654305",
"name": "caise-bandwidth_line", "name": "带宽线路",
"font_class": "caise-bandwidth_line", "font_class": "caise-bandwidth_line",
"unicode": "e9a0", "unicode": "e9a0",
"unicode_decimal": 59808 "unicode_decimal": 59808
}, },
{ {
"icon_id": "41654323", "icon_id": "41654323",
"name": "caise-fiber", "name": "光纤交换机",
"font_class": "caise-fiber", "font_class": "caise-fiber",
"unicode": "e9a1", "unicode": "e9a1",
"unicode_decimal": 59809 "unicode_decimal": 59809
}, },
{ {
"icon_id": "41654369", "icon_id": "41654369",
"name": "caise-disk_array", "name": "磁盘阵列",
"font_class": "caise-disk_array", "font_class": "caise-disk_array",
"unicode": "e9a2", "unicode": "e9a2",
"unicode_decimal": 59810 "unicode_decimal": 59810

BIN
cmdb-ui/public/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
cmdb-ui/public/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
cmdb-ui/public/iconfont/iconfont.woff2
View File

Binary file not shown.

12
cmdb-ui/src/App.vue
View File

@ -61,12 +61,12 @@ export default {
) )
// 注册富文本自定义元素 // 注册富文本自定义元素
const resume = { // const resume = {
type: 'attachment', // type: 'attachment',
attachmentLabel: '', // attachmentLabel: '',
attachmentValue: '', // attachmentValue: '',
children: [{ text: '' }], // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！ // children: [{ text: '' }], // void 元素必须有一个 children ，其中只有一个空字符串，重要！！！
} // }
function withAttachment(editor) { function withAttachment(editor) {
// JS 语法 // JS 语法

78
cmdb-ui/src/components/CustomIconSelect/constants.js
View File

@ -905,6 +905,84 @@ export const multicolorIconList = [
value: 'caise-application', value: 'caise-application',
label: '应用', label: '应用',
list: [{ list: [{
value: 'caise-disk_array',
label: '磁盘阵列'
}, {
value: 'caise-fiber',
label: '光纤交换机'
}, {
value: 'caise-bandwidth_line',
label: '带宽线路'
}, {
value: 'caise-pc',
label: 'PC'
}, {
value: 'caise-rack',
label: '机柜'
}, {
value: 'caise-computer_room',
label: '机房'
}, {
value: 'caise-ip_address',
label: 'ip地址'
}, {
value: 'caise_pool',
label: 'ip池'
}, {
value: 'ciase-aix',
label: 'aix'
}, {
value: 'caise-storage_volume1',
label: '存储卷'
}, {
value: 'caise-virtualization',
label: '虚拟化'
}, {
value: 'caise-business',
label: '业务'
}, {
value: 'caise-database',
label: '数据库'
}, {
value: 'caise-middleware',
label: '中间件'
}, {
value: 'caise-websever',
label: 'websever'
}, {
value: 'caise-message_queue',
label: '消息队列'
}, {
value: 'caise-load_balancing',
label: '负载均衡'
}, {
value: 'caise-storage_device',
label: '存储设备'
}, {
value: 'caise-network_devices',
label: '网络设备'
}, {
value: 'caise-computer',
label: '计算机'
}, {
value: 'caise-hardware',
label: '硬件设备'
}, {
value: 'caise-data_center2',
label: '数据中心'
}, {
value: 'caise-hyperV',
label: 'hyperV'
}, {
value: 'caise-IPAM',
label: 'IPAM'
}, {
value: 'caise-system',
label: '操作系统'
}, {
value: 'caise-public_cloud',
label: '公有云'
}, {
value: 'caise-data_center', value: 'caise-data_center',
label: '数据中心' label: '数据中心'
}, { }, {

BIN
cmdb-ui/src/modules/cmdb/assets/no_permission.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
cmdb-ui/src/modules/cmdb/assets/resourceSearch/resource_search_bg_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

BIN
cmdb-ui/src/modules/cmdb/assets/resourceSearch/resource_search_bg_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 444 KiB

85
cmdb-ui/src/modules/cmdb/components/ciIcon/index.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<div
v-if="icon || title"
class="ci-icon"
:style="{
'--size': size + 'px'
}"
>
<template v-if="icon">
<img
v-if="icon.split('$$')[2]"
:src="`/api/common-setting/v1/file/${icon.split('$$')[3]}`"
/>
<ops-icon
v-else
:style="{
color: icon.split('$$')[1],
}"
:type="icon.split('$$')[0]"
/>
</template>
<span
class="ci-icon-letter"
v-else
>
<span>
{{ title[0].toUpperCase() }}
</span>
</span>
</div>
</template>
<script>
export default {
name: 'CIIcon',
props: {
icon: {
type: String,
default: ''
},
// 如果没有icon, 默认以title 的第一个字符
title: {
type: String,
default: ''
},
size: {
type: [String, Number],
default: '12'
}
}
}
</script>
<style lang="less" scoped>
.ci-icon {
font-size: var(--size);
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
& > img {
width: var(--size);
height: var(--size);
}
&-letter {
background-color: #FFFFFF;
color: #2f54eb;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
& > span {
transform-origin: center;
transform: scale(0.7);
}
}
}
</style>

4
cmdb-ui/src/modules/cmdb/components/ciTable/index.vue
View File

@ -179,7 +179,7 @@
<a @click="openDetail(row.ci_id || row._id)"> <a @click="openDetail(row.ci_id || row._id)">
<a-icon type="unordered-list" /> <a-icon type="unordered-list" />
</a> </a>
<a-tooltip :title="$t('cmdb.ci.addRelation')"> <a-tooltip :title="$t('cmdb.ci.viewRelation')">
<a @click="openDetail(row.ci_id || row._id, 'tab_2', '2')"> <a @click="openDetail(row.ci_id || row._id, 'tab_2', '2')">
<a-icon type="retweet" /> <a-icon type="retweet" />
</a> </a>
@ -375,7 +375,7 @@ export default {
}, },
jsonEditorOk(row, column, jsonData) { jsonEditorOk(row, column, jsonData) {
this.$attrs.data.forEach((item) => { this.data.forEach((item) => {
if (item._id === row._id) { if (item._id === row._id) {
item[column.property] = JSON.stringify(jsonData) item[column.property] = JSON.stringify(jsonData)
} }

41
cmdb-ui/src/modules/cmdb/components/conditionFilter/constants.js Normal file
View File

@ -0,0 +1,41 @@
import i18n from '@/lang'
export const ruleTypeList = () => {
return [
{ value: 'and', label: i18n.t('cmdbFilterComp.and') },
{ value: 'or', label: i18n.t('cmdbFilterComp.or') },
// { value: 'not', label: '非' },
]
}
export const expList = () => {
return [
{ value: 'is', label: i18n.t('cmdbFilterComp.is') },
{ value: '~is', label: i18n.t('cmdbFilterComp.~is') },
{ value: 'contain', label: i18n.t('cmdbFilterComp.contain') },
{ value: '~contain', label: i18n.t('cmdbFilterComp.~contain') },
{ value: 'start_with', label: i18n.t('cmdbFilterComp.start_with') },
{ value: '~start_with', label: i18n.t('cmdbFilterComp.~start_with') },
{ value: 'end_with', label: i18n.t('cmdbFilterComp.end_with') },
{ value: '~end_with', label: i18n.t('cmdbFilterComp.~end_with') },
{ value: '~value', label: i18n.t('cmdbFilterComp.~value') }, // 为空的定义有点绕
{ value: 'value', label: i18n.t('cmdbFilterComp.value') },
]
}
export const advancedExpList = () => {
return [
{ value: 'in', label: i18n.t('cmdbFilterComp.in') },
{ value: '~in', label: i18n.t('cmdbFilterComp.~in') },
{ value: 'range', label: i18n.t('cmdbFilterComp.range') },
{ value: '~range', label: i18n.t('cmdbFilterComp.~range') },
{ value: 'compare', label: i18n.t('cmdbFilterComp.compare') },
]
}
export const compareTypeList = [
{ value: '1', label: '>' },
{ value: '2', label: '>=' },
{ value: '3', label: '<' },
{ value: '4', label: '<=' },
]

320
cmdb-ui/src/modules/cmdb/components/conditionFilter/expression.vue Normal file
View File

@ -0,0 +1,320 @@
<template>
<div :style="{ lineHeight: rowHeight }">
<a-space :style="{ display: 'flex', marginBottom: '10px' }" v-for="(item, index) in ruleList" :key="item.id">
<div v-if="ruleList.length > 1" :style="{ width: '60px', height: rowHeight, position: 'relative' }">
<treeselect
v-if="index !== 0"
class="custom-treeselect"
:style="{ width: '60px', '--custom-height': rowHeight, position: 'absolute', top: '-24px' }"
v-model="item.type"
:multiple="false"
:clearable="false"
searchable
:options="ruleTypeList"
:normalizer="
(node) => {
return {
id: node.value,
label: node.label,
children: node.children,
}
}
"
:disabled="disabled"
>
</treeselect>
</div>
<treeselect
class="custom-treeselect"
:style="{ width: '120px', '--custom-height': rowHeight }"
v-model="item.property"
:multiple="false"
:clearable="false"
searchable
:options="canSearchPreferenceAttrList"
:normalizer="
(node) => {
return {
id: node.name,
label: node.alias || node.name,
children: node.children,
}
}
"
appendToBody
:zIndex="1050"
:disabled="disabled"
>
<div
v-if="node.id !== '$count'"
:title="node.label"
slot="option-label"
slot-scope="{ node }"
class="property-label"
>
<ValueTypeMapIcon :attr="node.raw" />
{{ node.label }}
</div>
<div
v-else
:title="node.label"
slot="option-label"
slot-scope="{ node }"
class="property-label"
:style="{ borderBottom: '1px solid #E4E7ED', marginBottom: '8px' }"
>
<ValueTypeMapIcon :attr="node.raw" />
{{ node.label }}
</div>
<div
class="property-label"
slot="value-label"
slot-scope="{ node }"
>
<ValueTypeMapIcon :attr="node.raw" /> {{ node.label }}
</div>
</treeselect>
<treeselect
class="custom-treeselect"
:style="{ width: '90px', '--custom-height': rowHeight }"
v-model="item.exp"
:multiple="false"
:clearable="false"
searchable
:options="getExpListByProperty(item.property)"
:normalizer="
(node) => {
return {
id: node.value,
label: node.label,
children: node.children,
}
}
"
appendToBody
@select="(value) => handleChangeExp(value, item, index)"
:zIndex="1050"
:disabled="disabled"
>
</treeselect>
<ValueControls
:rule="ruleList[index]"
:attrList="canSearchPreferenceAttrList"
:disabled="disabled"
:curModelAttrList="curModelAttrList"
:rowHeight="rowHeight"
@change="(value) => handleChangeValue(value, index)"
/>
<template v-if="!disabled">
<a-tooltip :title="$t('copy')">
<a class="operation" @click="handleCopyRule(item)"><ops-icon type="veops-copy"/></a>
</a-tooltip>
<a-tooltip :title="$t('delete')">
<a class="operation" @click="handleDeleteRule(item)"><a-icon type="minus-circle"/></a>
</a-tooltip>
<a-tooltip :title="$t('cmdbFilterComp.addHere')">
<a class="operation" @click="handleAddRuleAt(item)"><a-icon type="plus-circle"/></a>
</a-tooltip>
</template>
</a-space>
<div class="table-filter-add" v-if="!disabled && ruleList.length === 0">
<a @click="handleAddRule">+ {{ $t('new') }}</a>
</div>
</div>
</template>
<script>
import _ from 'lodash'
import { v4 as uuidv4 } from 'uuid'
import { ruleTypeList, expList, advancedExpList, compareTypeList } from './constants.js'
import ValueTypeMapIcon from '@/components/CMDBValueTypeMapIcon'
import ValueControls from './valueControls.vue'
export default {
name: 'Expression',
components: {
ValueTypeMapIcon,
ValueControls
},
model: {
prop: 'value',
event: 'change',
},
props: {
value: {
type: Array,
default: () => [],
},
canSearchPreferenceAttrList: {
type: Array,
required: true,
default: () => [],
},
disabled: {
type: Boolean,
default: false,
},
curModelAttrList: {
type: Array,
default: () => []
}
},
data() {
return {
compareTypeList,
rowHeight: '36px',
}
},
computed: {
ruleList: {
get() {
return this.value
},
set(val) {
this.$emit('change', val)
return val
},
},
ruleTypeList() {
return ruleTypeList()
},
expList() {
return expList()
},
advancedExpList() {
return advancedExpList()
}
},
methods: {
getExpListByProperty(property) {
if (property === '$count') {
return [
{ value: 'is', label: this.$t('cmdbFilterComp.is') },
{ value: '~is', label: this.$t('cmdbFilterComp.~is') },
{ value: 'compare', label: this.$t('cmdbFilterComp.compare') }
]
}
if (property) {
const _find = this.canSearchPreferenceAttrList.find((item) => item.name === property)
if (_find && ['0', '1', '3', '4', '5'].includes(_find.value_type)) {
return [
{ value: 'is', label: this.$t('cmdbFilterComp.is') },
{ value: '~is', label: this.$t('cmdbFilterComp.~is') },
{ value: '~value', label: this.$t('cmdbFilterComp.~value') }, // 为空的定义有点绕
{ value: 'value', label: this.$t('cmdbFilterComp.value') },
...this.advancedExpList
]
}
}
return [...this.expList, ...this.advancedExpList]
},
isChoiceByProperty(property) {
const _find = this.canSearchPreferenceAttrList.find((item) => item.name === property)
if (_find) {
return _find.is_choice
}
return false
},
handleAddRule() {
this.ruleList.push({
id: uuidv4(),
type: 'and',
property: this.canSearchPreferenceAttrList[0]?.name,
exp: 'is',
value: null,
})
this.$emit('change', this.ruleList)
},
handleCopyRule(item) {
this.ruleList.push({ ...item, id: uuidv4() })
this.$emit('change', this.ruleList)
},
handleDeleteRule(item) {
const idx = this.ruleList.findIndex((r) => r.id === item.id)
if (idx > -1) {
this.ruleList.splice(idx, 1)
}
this.$emit('change', this.ruleList)
},
handleAddRuleAt(item) {
const idx = this.ruleList.findIndex((r) => r.id === item.id)
if (idx > -1) {
this.ruleList.splice(idx + 1, 0, {
id: uuidv4(),
type: 'and',
property: this.canSearchPreferenceAttrList[0]?.name,
exp: 'is',
value: null,
})
}
this.$emit('change', this.ruleList)
},
getChoiceValueByProperty(property) {
const _find = this.canSearchPreferenceAttrList.find((item) => item.name === property)
if (_find) {
return _find.choice_value
}
return []
},
handleChangeExp({ value }, item, index) {
const _ruleList = _.cloneDeep(this.ruleList)
if (value === 'range') {
_ruleList[index] = {
..._ruleList[index],
min: '',
max: '',
exp: value,
}
} else if (value === 'compare') {
_ruleList[index] = {
..._ruleList[index],
compareType: '1',
exp: value,
}
} else {
_ruleList[index] = {
..._ruleList[index],
exp: value,
}
}
this.ruleList = _ruleList
this.$emit('change', this.ruleList)
},
handleChangeValue(value, index) {
const _ruleList = _.cloneDeep(this.ruleList)
_ruleList[index] = value
this.$emit('change', _ruleList)
},
},
}
</script>
<style lang="less" scoped>
.input-group {
display: flex;
align-items: center;
width: 150px;
&-range-icon {
margin: 0 8px;
}
input {
height: 36px;
}
}
.property-label {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
}
.attr-filter-tip {
color: #86909C;
font-size: 12px;
font-weight: 400;
}
</style>

211
cmdb-ui/src/modules/cmdb/components/conditionFilter/index.vue Normal file
View File

@ -0,0 +1,211 @@
<template>
<div>
<Expression
v-model="ruleList"
:canSearchPreferenceAttrList="canSearchPreferenceAttrList.filter((attr) => !attr.is_password)"
:disabled="false"
:curModelAttrList="curModelAttrList"
/>
</div>
</template>
<script>
import { v4 as uuidv4 } from 'uuid'
import { compareTypeList } from './constants.js'
import Expression from './expression.vue'
export default {
name: 'AttrFilter',
components: {
Expression
},
props: {
canSearchPreferenceAttrList: {
type: Array,
required: true,
default: () => [],
},
expression: {
type: String,
default: '',
},
regQ: {
type: String,
default: '(?<=q=).+(?=&)|(?<=q=).+$',
},
CITypeIds: {
type: Array,
default: () => [],
},
curModelAttrList: {
type: Array,
default: () => []
}
},
data() {
return {
compareTypeList,
visible: false,
ruleList: [],
filterExp: '',
}
},
methods: {
init(open, isInitOne = true) {
// isInitOne 初始化exp为空时，ruleList是否默认给一条
// const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
const exp = this.expression.match(new RegExp(this.regQ, 'g'))
? this.expression.match(new RegExp(this.regQ, 'g'))[0]
: null
if (open && exp) {
const expArray = exp.split(',').map((item) => {
let has_not = ''
const key = item.split(':')[0]
const val = item
.split(':')
.slice(1)
.join(':')
let type, property, exp, value, min, max, compareType
if (key.includes('-')) {
type = 'or'
if (key.includes('~')) {
property = key.substring(2)
has_not = '~'
} else {
property = key.substring(1)
}
} else {
type = 'and'
if (key.includes('~')) {
property = key.substring(1)
has_not = '~'
} else {
property = key
}
}
const in_reg = /(?<=\().+(?=\))/g
const range_reg = /(?<=\[).+(?=\])/g
const compare_reg = /(?<=>=|<=|>(?!=)|<(?!=)).+/
if (val === '*') {
exp = has_not + 'value'
value = ''
} else if (in_reg.test(val)) {
exp = has_not + 'in'
value = val.match(in_reg)[0]
} else if (range_reg.test(val)) {
exp = has_not + 'range'
value = val.match(range_reg)[0]
min = value.split('_TO_')[0]
max = value.split('_TO_')[1]
} else if (compare_reg.test(val)) {
exp = has_not + 'compare'
value = val.match(compare_reg)[0]
const _compareType = val.substring(0, val.match(compare_reg)['index'])
const idx = compareTypeList.findIndex((item) => item.label === _compareType)
compareType = compareTypeList[idx].value
} else if (!val.includes('*')) {
exp = has_not + 'is'
value = val
} else {
const resList = [
['contain', /(?<=\*).*(?=\*)/g],
['end_with', /(?<=\*).+/g],
['start_with', /.+(?=\*)/g],
]
for (let i = 0; i < 3; i++) {
const reg = resList[i]
if (reg[1].test(val)) {
exp = has_not + reg[0]
value = val.match(reg[1])[0]
break
}
}
}
return {
id: uuidv4(),
type,
property,
exp,
value,
min,
max,
compareType,
}
})
this.ruleList = [...expArray]
} else if (open) {
const _canSearchPreferenceAttrList = this.canSearchPreferenceAttrList.filter((attr) => !attr.is_password)
this.ruleList = isInitOne
? [
{
id: uuidv4(),
type: 'and',
property:
_canSearchPreferenceAttrList && _canSearchPreferenceAttrList.length
? _canSearchPreferenceAttrList[0].name
: undefined,
exp: 'is',
value: null,
},
]
: []
}
},
handleSubmit() {
if (this.ruleList && this.ruleList.length) {
this.ruleList[0].type = 'and' // 增删后，以防万一第一个不是and
this.filterExp = ''
const expList = this.ruleList.filter((rule) => rule?.property).map((rule) => {
let singleRuleExp = ''
let _exp = rule.exp
if (rule.type === 'or') {
singleRuleExp += '-'
}
if (rule.exp.includes('~')) {
singleRuleExp += '~'
_exp = rule.exp.split('~')[1]
}
singleRuleExp += `${rule.property}:`
if (_exp === 'is') {
singleRuleExp += `${rule.value ?? ''}`
}
if (_exp === 'contain') {
singleRuleExp += `*${rule.value ?? ''}*`
}
if (_exp === 'start_with') {
singleRuleExp += `${rule.value ?? ''}*`
}
if (_exp === 'end_with') {
singleRuleExp += `*${rule.value ?? ''}`
}
if (_exp === 'value') {
singleRuleExp += `*`
}
if (_exp === 'in') {
singleRuleExp += `(${rule.value ?? ''})`
}
if (_exp === 'range') {
singleRuleExp += `[${rule.min}_TO_${rule.max}]`
}
if (_exp === 'compare') {
const idx = compareTypeList.findIndex((item) => item.value === rule.compareType)
singleRuleExp += `${compareTypeList[idx].label}${rule.value ?? ''}`
}
return singleRuleExp
})
this.filterExp = expList.join(',')
this.$emit('setExpFromFilter', this.filterExp)
} else {
this.$emit('setExpFromFilter', '')
}
this.visible = false
},
},
}
</script>
<style lang="less" scoped>
</style>

267
cmdb-ui/src/modules/cmdb/components/conditionFilter/valueControls.vue Normal file
View File

@ -0,0 +1,267 @@
<template>
<div class="control-group">
<CIReferenceAttr
v-if="getAttr(rule.property).is_reference && (rule.exp === 'is' || rule.exp === '~is')"
class="select-filter"
:referenceTypeId="getAttr(rule.property).reference_type_id"
:value="rule.value"
:disabled="disabled"
@change="(value) => handleChange('value', value)"
/>
<a-select
v-else-if="getAttr(rule.property).is_bool && (rule.exp === 'is' || rule.exp === '~is')"
class="select-filter"
:disabled="disabled"
:placeholder="$t('placeholder2')"
:value="rule.value"
@change="(value) => handleChange('value', value)"
>
<a-select-option key="1">
true
</a-select-option>
<a-select-option key="0">
false
</a-select-option>
</a-select>
<div
class="input-group"
v-else-if="isChoiceByProperty(rule.property) && (rule.exp === 'is' || rule.exp === '~is')"
>
<CIBuiltInAttr
v-if="getAttr(rule.property).choice_builtin"
:choice_builtin="getAttr(rule.property).choice_builtin"
class="select-filter"
:treeselectCustomStyle="{ width: '136px', '--custom-height': '36px' }"
:value="rule.value"
@change="(value) => handleChange('value', value)"
/>
<a-select
v-else
class="select-filter"
:style="{ width: '175px' }"
showSearch
:placeholder="$t('placeholder2')"
:disabled="disabled"
:value="rule.value"
@change="(value) => handleChange('value', value)"
>
<a-select-option
v-for="(node) in getChoiceValueByProperty(rule.property)"
:key="String(node[0])"
:title="node[1] ? node[1].label || node[0] : node[0]"
>
<a-tooltip placement="topLeft" :title="node[1] ? node[1].label || node[0] : node[0]" >
{{ node[1] ? node[1].label || node[0] : node[0] }}
</a-tooltip>
</a-select-option>
</a-select>
<!-- <treeselect
class="custom-treeselect"
:style="{ '--custom-height': rowHeight }"
:value="rule.value"
@input="(value) => handleChange('value', value)"
:multiple="false"
:clearable="false"
searchable
:options="getChoiceValueByProperty(rule.property)"
:placeholder="$t('placeholder2')"
:normalizer="
(node) => {
return {
id: node[0],
label: node[1] ? node[1].label || node[0] : node[0],
children: node.children,
}
}
"
:zIndex="1050"
:disabled="disabled"
appendToBody
>
<div
:title="node.label"
slot="option-label"
slot-scope="{ node }"
:style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
>
{{ node.label }}
</div>
</treeselect> -->
</div>
<div
compact
v-else-if="rule.exp === 'range' || rule.exp === '~range'"
class="input-group"
>
<a-input
class="ops-input"
:placeholder="$t('min')"
:disabled="disabled"
:value="rule.min"
@change="(e) => handleChange('min', e.target.value)"
/>
<span class="input-group-range-icon">~</span>
<a-input
class="ops-input"
v-model="rule.max"
:placeholder="$t('max')"
:disabled="disabled"
:value="rule.max"
@change="(e) => handleChange('max', e.target.value)"
/>
</div>
<div class="input-group" compact v-else-if="rule.exp === 'compare'">
<treeselect
class="custom-treeselect"
:style="{ width: '70px', '--custom-height': rowHeight, 'flex-shrink': 0 }"
:value="rule.compareType"
@input="(value) => handleChange('compareType', value)"
:multiple="false"
:clearable="false"
searchable
:options="compareTypeList"
:normalizer="
(node) => {
return {
id: node.value,
label: node.label,
children: node.children,
}
}
"
:zIndex="1050"
:disabled="disabled"
appendToBody
>
</treeselect>
<a-input :value="rule.value" @change="(e) => handleChange('value', e.target.value)" class="ops-input"/>
</div>
<div class="input-group" v-else-if="rule.exp !== 'value' && rule.exp !== '~value'">
<a-input
:value="rule.value"
@change="(e) => handleChange('value', e.target.value)"
:placeholder="rule.exp === 'in' || rule.exp === '~in' ? $t('cmdbFilterComp.split', { separator: ';' }) : ''"
class="ops-input"
:disabled="disabled"
></a-input>
</div>
<div v-else :style="{ width: '136px' }"></div>
</div>
</template>
<script>
import { compareTypeList } from './constants.js'
import CIReferenceAttr from '@/components/ciReferenceAttr/index.vue'
import CIBuiltInAttr from '@/components/ciBuiltInAttr/index.vue'
export default {
name: 'ValueControls',
components: {
CIReferenceAttr,
CIBuiltInAttr
},
props: {
rule: {
type: Object,
default: () => {},
},
attrList: {
type: Array,
default: () => [],
},
disabled: {
type: Boolean,
default: false,
},
// 当前模型属性
curModelAttrList: {
type: Array,
default: () => []
},
// 行高
rowHeight: {
type: String,
default: ''
},
},
data() {
return {
compareTypeList,
}
},
computed: {
choiceValue() {
const val = /\{\{([^}]+)\}\}/g.exec(this?.rule?.value || '')
return val ? val?.[1]?.trim() || '' : this?.value?.value
}
},
methods: {
isChoiceByProperty(property) {
const _find = this.attrList.find((item) => item.name === property)
if (_find) {
return _find.is_choice
}
return false
},
getChoiceValueByProperty(property) {
const _find = this.attrList.find((item) => item.name === property)
if (_find) {
return _find.choice_value
}
return []
},
handleChange(key, value) {
this.$emit('change', {
...this.rule,
[key]: value
})
},
getAttr(property) {
return this.attrList.find((item) => item.name === property) || {}
},
}
}
</script>
<style lang="less" scoped>
.control-group {
display: flex;
}
.input-group {
display: flex;
align-items: center;
width: 136px;
&-range-icon {
margin: 0 8px;
}
input {
height: 36px;
}
}
.select-filter {
height: 36px;
width: 136px;
/deep/ .ant-select-selection {
height: 36px;
background: #f7f8fa;
line-height: 36px;
border: none;
.ant-select-selection__rendered {
height: 36px;
line-height: 36px;
}
}
/deep/ .vue-treeselect__control {
background: #f7f8fa;
border: none;
}
}
</style>

13
cmdb-ui/src/modules/cmdb/lang/en.js
View File

@ -307,6 +307,18 @@ const cmdb_en = {
filterUsers: 'Filter Users', filterUsers: 'Filter Users',
enum: 'Enum', enum: 'Enum',
ciGrantTip: `Filter conditions can be changed dynamically using {{}} referenced variables, currently user variables are supported, such as {{user.uid}},{{user.username}},{{user.email}},{{user.nickname}}`, ciGrantTip: `Filter conditions can be changed dynamically using {{}} referenced variables, currently user variables are supported, such as {{user.uid}},{{user.username}},{{user.email}},{{user.nickname}}`,
searchInputTip: 'Please search for resource keywords',
resourceSearch: 'Resource Search',
recentSearch: 'Recent Search',
myCollection: 'My Collection',
keyword: 'Keywords',
CIType: 'CIType',
filterPopoverLabel: 'Filter',
conditionFilter: 'Condition Filter',
advancedFilter: 'Advanced Filter',
saveCondition: 'Save Condition',
confirmClear: 'Confirm to clear?',
currentPage: 'Current Page'
}, },
components: { components: {
unselectAttributes: 'Unselected', unselectAttributes: 'Unselected',
@ -629,6 +641,7 @@ if __name__ == "__main__":
attributeDesc: 'Attribute Description', attributeDesc: 'Attribute Description',
selectRows: 'Select: {rows} items', selectRows: 'Select: {rows} items',
addRelation: 'Add Relation', addRelation: 'Add Relation',
viewRelation: 'View Relation',
all: 'All', all: 'All',
batchUpdate: 'Batch Update', batchUpdate: 'Batch Update',
batchUpdateConfirm: 'Are you sure you want to make batch updates?', batchUpdateConfirm: 'Are you sure you want to make batch updates?',

13
cmdb-ui/src/modules/cmdb/lang/zh.js
View File

@ -307,6 +307,18 @@ const cmdb_zh = {
filterUsers: '筛选用户', filterUsers: '筛选用户',
enum: '枚举', enum: '枚举',
ciGrantTip: `筛选条件可使用{{}}引用变量实现动态变化，目前支持用户变量，如{{user.uid}},{{user.username}},{{user.email}},{{user.nickname}}`, ciGrantTip: `筛选条件可使用{{}}引用变量实现动态变化，目前支持用户变量，如{{user.uid}},{{user.username}},{{user.email}},{{user.nickname}}`,
searchInputTip: '请搜索资源关键字',
resourceSearch: '资源搜索',
recentSearch: '最近搜索',
myCollection: '我的收藏',
keyword: '关键字',
CIType: '模型',
filterPopoverLabel: '条件过滤',
conditionFilter: '条件过滤',
advancedFilter: '高级筛选',
saveCondition: '保存条件',
confirmClear: '确认清空?',
currentPage: '当前页'
}, },
components: { components: {
unselectAttributes: '未选属性', unselectAttributes: '未选属性',
@ -628,6 +640,7 @@ if __name__ == "__main__":
attributeDesc: '查看属性配置', attributeDesc: '查看属性配置',
selectRows: '选取：{rows} 项', selectRows: '选取：{rows} 项',
addRelation: '添加关系', addRelation: '添加关系',
viewRelation: '查看关系',
all: '全部', all: '全部',
batchUpdate: '批量修改', batchUpdate: '批量修改',
batchUpdateConfirm: '确认要批量修改吗？', batchUpdateConfirm: '确认要批量修改吗？',

26
cmdb-ui/src/modules/cmdb/router/index.js
View File

@ -54,7 +54,7 @@ const genCmdbRoutes = async () => {
path: '/cmdb/resourcesearch', path: '/cmdb/resourcesearch',
name: 'cmdb_resource_search', name: 'cmdb_resource_search',
meta: { title: 'cmdb.menu.ciSearch', icon: 'ops-cmdb-search', selectedIcon: 'ops-cmdb-search', keepAlive: false }, meta: { title: 'cmdb.menu.ciSearch', icon: 'ops-cmdb-search', selectedIcon: 'ops-cmdb-search', keepAlive: false },
component: () => import('../views/resource_search/index.vue') component: () => import('../views/resource_search_2/index.vue')
}, },
{ {
path: '/cmdb/adc', path: '/cmdb/adc',
@ -117,11 +117,10 @@ const genCmdbRoutes = async () => {
meta: { title: 'cmdb.menu.serviceTreeDefine', keepAlive: false, icon: 'ops-cmdb-preferencerelation', selectedIcon: 'ops-cmdb-preferencerelation-selected' } meta: { title: 'cmdb.menu.serviceTreeDefine', keepAlive: false, icon: 'ops-cmdb-preferencerelation', selectedIcon: 'ops-cmdb-preferencerelation-selected' }
}, },
{ {
path: '/cmdb/modelrelation', path: '/cmdb/discovery',
name: 'model_relation', name: 'discovery',
hideChildrenInMenu: true, component: () => import('../views/discovery/index'),
component: () => import('../views/model_relation/index'), meta: { title: 'cmdb.menu.ad', keepAlive: false, icon: 'ops-cmdb-adr', selectedIcon: 'ops-cmdb-adr-selected' }
meta: { title: 'cmdb.menu.citypeRelation', keepAlive: false, icon: 'ops-cmdb-modelrelation', selectedIcon: 'ops-cmdb-modelrelation-selected' }
}, },
{ {
path: '/cmdb/operationhistory', path: '/cmdb/operationhistory',
@ -130,19 +129,20 @@ const genCmdbRoutes = async () => {
component: () => import('../views/operation_history/index'), component: () => import('../views/operation_history/index'),
meta: { title: 'cmdb.menu.operationHistory', keepAlive: false, icon: 'ops-cmdb-operation', selectedIcon: 'ops-cmdb-operation-selected' } meta: { title: 'cmdb.menu.operationHistory', keepAlive: false, icon: 'ops-cmdb-operation', selectedIcon: 'ops-cmdb-operation-selected' }
}, },
{
path: '/cmdb/modelrelation',
name: 'model_relation',
hideChildrenInMenu: true,
component: () => import('../views/model_relation/index'),
meta: { title: 'cmdb.menu.citypeRelation', keepAlive: false, icon: 'ops-cmdb-modelrelation', selectedIcon: 'ops-cmdb-modelrelation-selected' }
},
{ {
path: '/cmdb/relationtype', path: '/cmdb/relationtype',
name: 'relation_type', name: 'relation_type',
hideChildrenInMenu: true, hideChildrenInMenu: true,
component: () => import('../views/relation_type/index'), component: () => import('../views/relation_type/index'),
meta: { title: 'cmdb.menu.relationType', keepAlive: false, icon: 'ops-cmdb-relationtype', selectedIcon: 'ops-cmdb-relationtype-selected' } meta: { title: 'cmdb.menu.relationType', keepAlive: false, icon: 'ops-cmdb-relationtype', selectedIcon: 'ops-cmdb-relationtype-selected' }
}, }
{
path: '/cmdb/discovery',
name: 'discovery',
component: () => import('../views/discovery/index'),
meta: { title: 'cmdb.menu.ad', keepAlive: false, icon: 'ops-cmdb-adr', selectedIcon: 'ops-cmdb-adr-selected' }
},
] ]
} }
] ]

1
cmdb-ui/src/modules/cmdb/views/ci/modules/createInstanceFormByGroup.vue
View File

@ -148,7 +148,6 @@
</template> </template>
<script> <script>
import _ from 'lodash'
import moment from 'moment' import moment from 'moment'
import JsonEditor from '../../../components/JsonEditor/jsonEditor.vue' import JsonEditor from '../../../components/JsonEditor/jsonEditor.vue'
import CIReferenceAttr from '@/components/ciReferenceAttr/index.vue' import CIReferenceAttr from '@/components/ciReferenceAttr/index.vue'

4
cmdb-ui/src/modules/cmdb/views/ci_types/newCiTypeAttrModal.vue
View File

@ -103,7 +103,7 @@ export default {
await this.handleLinkAttrToCiType({ attr_id: this.targetKeys.map((i) => Number(i)) }) await this.handleLinkAttrToCiType({ attr_id: this.targetKeys.map((i) => Number(i)) })
if (this.currentGroup) { if (this.currentGroup) {
await this.updateCurrentGroup() await this.updateCurrentGroup()
const { id, name, order, attributes } = this.currentGroup const { name, order, attributes } = this.currentGroup
const attrIds = attributes.filter((i) => !i.inherited).map((i) => i.id) const attrIds = attributes.filter((i) => !i.inherited).map((i) => i.id)
this.targetKeys.forEach((key) => { this.targetKeys.forEach((key) => {
attrIds.push(Number(key)) attrIds.push(Number(key))
@ -141,7 +141,7 @@ export default {
}) })
if (this.currentGroup) { if (this.currentGroup) {
await this.updateCurrentGroup() await this.updateCurrentGroup()
const { id, name, order, attributes } = this.currentGroup const { name, order, attributes } = this.currentGroup
const attrIds = attributes.filter((i) => !i.inherited).map((i) => i.id) const attrIds = attributes.filter((i) => !i.inherited).map((i) => i.id)
attrIds.push(newAttrId) attrIds.push(newAttrId)
await createCITypeGroupById(this.CITypeId, { name, order, attributes: attrIds }) await createCITypeGroupById(this.CITypeId, { name, order, attributes: attrIds })

1
cmdb-ui/src/modules/cmdb/views/ci_types/preValueAttr/define/defineLabel.vue
View File

@ -121,7 +121,6 @@
</template> </template>
<script> <script>
import _ from 'lodash'
import { ColorPicker } from 'element-ui' import { ColorPicker } from 'element-ui'
import CustomIconSelect from '@/components/CustomIconSelect' import CustomIconSelect from '@/components/CustomIconSelect'
import { defautValueColor, defaultBGColors } from '@/modules/cmdb/utils/const.js' import { defautValueColor, defaultBGColors } from '@/modules/cmdb/utils/const.js'

2
cmdb-ui/src/modules/cmdb/views/custom_dashboard/chartForm.vue
View File

@ -407,7 +407,7 @@ export default {
this.visible = true this.visible = true
this.type = type this.type = type
this.item = item this.item = item
const { category = 0, name, type_id, attr_id, level } = item const { category = 0, name, type_id, level } = item
const chartType = (item.options || {}).chartType || 'count' const chartType = (item.options || {}).chartType || 'count'
const fontColor = (item.options || {}).fontColor || '#ffffff' const fontColor = (item.options || {}).fontColor || '#ffffff'
const bgColor = (item.options || {}).bgColor || ['#6ABFFE', '#5375EB'] const bgColor = (item.options || {}).bgColor || ['#6ABFFE', '#5375EB']

2
cmdb-ui/src/modules/cmdb/views/model_relation/index.vue
View File

@ -131,7 +131,7 @@ import ModelRelationTable from './modules/modelRelationTable.vue'
import { searchResourceType } from '@/modules/acl/api/resource' import { searchResourceType } from '@/modules/acl/api/resource'
import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup' import { getCITypeGroupsConfig } from '@/modules/cmdb/api/ciTypeGroup'
import { getCITypes } from '@/modules/cmdb/api/CIType' import { getCITypes } from '@/modules/cmdb/api/CIType'
import { createRelation, deleteRelation, getCITypeChildren, getRelationTypes } from '@/modules/cmdb/api/CITypeRelation' import { createRelation, deleteRelation, getRelationTypes } from '@/modules/cmdb/api/CITypeRelation'
import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr' import { getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from 'uuid'

4
cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
View File

@ -588,7 +588,7 @@ export default {
this.calcColumns() this.calcColumns()
} }
if (refreshType === 'refreshNumber') { if (refreshType === 'refreshNumber') {
const promises = this.treeKeys.map((key, index) => { this.treeKeys.map((key, index) => {
let ancestor_ids let ancestor_ids
if ( if (
Object.keys(this.level2constraint).some( Object.keys(this.level2constraint).some(
@ -1432,7 +1432,7 @@ export default {
content: (h) => <div>{that.$t('confirmDelete')}</div>, content: (h) => <div>{that.$t('confirmDelete')}</div>,
async onOk() { async onOk() {
for (let i = 0; i < that.batchTreeKey.length; i++) { for (let i = 0; i < that.batchTreeKey.length; i++) {
const { splitTreeKey, firstCIObj, firstCIId, _tempTree, ancestor_ids } = that.calculateParamsFromTreeKey( const { splitTreeKey, _tempTree, ancestor_ids } = that.calculateParamsFromTreeKey(
that.batchTreeKey[i], that.batchTreeKey[i],
'delete' 'delete'
) )

210
cmdb-ui/src/modules/cmdb/views/relation_views/modules/ReadPermissionsModal.vue
View File

@ -1,105 +1,105 @@
<template> <template>
<a-modal <a-modal
width="600px" width="600px"
:bodyStyle="{ :bodyStyle="{
paddingTop: 0, paddingTop: 0,
}" }"
:visible="visible" :visible="visible"
:footer="null" :footer="null"
@cancel="handleCancel" @cancel="handleCancel"
:title="$t('view')" :title="$t('view')"
> >
<div> <div>
<template v-if="readCIIdFilterPermissions && readCIIdFilterPermissions.length"> <template v-if="readCIIdFilterPermissions && readCIIdFilterPermissions.length">
<p> <p>
<strong>{{ $t('cmdb.serviceTree.idAuthorizationPolicy') }}</strong> <strong>{{ $t('cmdb.serviceTree.idAuthorizationPolicy') }}</strong>
<a <a
@click=" @click="
() => { () => {
showAllReadCIIdFilterPermissions = !showAllReadCIIdFilterPermissions showAllReadCIIdFilterPermissions = !showAllReadCIIdFilterPermissions
} }
" "
v-if="readCIIdFilterPermissions.length > 10" v-if="readCIIdFilterPermissions.length > 10"
><a-icon ><a-icon
:type="showAllReadCIIdFilterPermissions ? 'caret-down' : 'caret-up'" :type="showAllReadCIIdFilterPermissions ? 'caret-down' : 'caret-up'"
/></a> /></a>
</p> </p>
<a-tag <a-tag
v-for="item in showAllReadCIIdFilterPermissions v-for="item in showAllReadCIIdFilterPermissions
? readCIIdFilterPermissions ? readCIIdFilterPermissions
: readCIIdFilterPermissions.slice(0, 10)" : readCIIdFilterPermissions.slice(0, 10)"
:key="item.name" :key="item.name"
color="blue" color="blue"
:style="{ marginBottom: '5px' }" :style="{ marginBottom: '5px' }"
>{{ item.name }}</a-tag >{{ item.name }}</a-tag
> >
<a-tag <a-tag
:style="{ marginBottom: '5px' }" :style="{ marginBottom: '5px' }"
v-if="readCIIdFilterPermissions.length > 10 && !showAllReadCIIdFilterPermissions" v-if="readCIIdFilterPermissions.length > 10 && !showAllReadCIIdFilterPermissions"
>+{{ readCIIdFilterPermissions.length - 10 }}</a-tag >+{{ readCIIdFilterPermissions.length - 10 }}</a-tag
> >
</template> </template>
<a-empty v-else> <a-empty v-else>
<img slot="image" :src="require('@/assets/data_empty.png')" /> <img slot="image" :src="require('@/assets/data_empty.png')" />
<span slot="description"> {{ $t('noData') }} </span> <span slot="description"> {{ $t('noData') }} </span>
</a-empty> </a-empty>
</div> </div>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { ciTypeFilterPermissions, getCIType } from '../../../api/CIType' import { ciTypeFilterPermissions } from '../../../api/CIType'
import FilterComp from '@/components/CMDBFilterComp' import FilterComp from '@/components/CMDBFilterComp'
import { searchRole } from '@/modules/acl/api/role' import { searchRole } from '@/modules/acl/api/role'
export default { export default {
name: 'ReadPermissionsModal', name: 'ReadPermissionsModal',
components: { FilterComp }, components: { FilterComp },
data() { data() {
return { return {
visible: false, visible: false,
filerPerimissions: {}, filerPerimissions: {},
readCIIdFilterPermissions: [], readCIIdFilterPermissions: [],
canSearchPreferenceAttrList: [], canSearchPreferenceAttrList: [],
showAllReadCIIdFilterPermissions: false, showAllReadCIIdFilterPermissions: false,
allRoles: [], allRoles: [],
} }
}, },
mounted() { mounted() {
this.loadRoles() this.loadRoles()
}, },
methods: { methods: {
async loadRoles() { async loadRoles() {
const res = await searchRole({ page_size: 9999, app_id: 'cmdb', is_all: true }) const res = await searchRole({ page_size: 9999, app_id: 'cmdb', is_all: true })
this.allRoles = res.roles this.allRoles = res.roles
}, },
async open(treeKey) { async open(treeKey) {
this.visible = true this.visible = true
const _splitTreeKey = treeKey.split('@^@').filter((item) => !!item) const _splitTreeKey = treeKey.split('@^@').filter((item) => !!item)
const _treeKey = _splitTreeKey.slice(_splitTreeKey.length - 1, _splitTreeKey.length)[0].split('%') const _treeKey = _splitTreeKey.slice(_splitTreeKey.length - 1, _splitTreeKey.length)[0].split('%')
const typeId = _treeKey[1] const typeId = _treeKey[1]
const _treeKeyPath = _splitTreeKey.map((item) => item.split('%')[0]).join(',') const _treeKeyPath = _splitTreeKey.map((item) => item.split('%')[0]).join(',')
await ciTypeFilterPermissions(typeId).then((res) => { await ciTypeFilterPermissions(typeId).then((res) => {
this.filerPerimissions = res this.filerPerimissions = res
}) })
const readCIIdFilterPermissions = [] const readCIIdFilterPermissions = []
Object.entries(this.filerPerimissions).forEach(([k, v]) => { Object.entries(this.filerPerimissions).forEach(([k, v]) => {
const { id_filter } = v const { id_filter } = v
if (id_filter && Object.keys(id_filter).includes(_treeKeyPath)) { if (id_filter && Object.keys(id_filter).includes(_treeKeyPath)) {
const _find = this.allRoles.find((item) => item.id === Number(k)) const _find = this.allRoles.find((item) => item.id === Number(k))
readCIIdFilterPermissions.push({ name: _find?.name ?? k, rid: k }) readCIIdFilterPermissions.push({ name: _find?.name ?? k, rid: k })
} }
}) })
this.readCIIdFilterPermissions = readCIIdFilterPermissions this.readCIIdFilterPermissions = readCIIdFilterPermissions
console.log(readCIIdFilterPermissions) console.log(readCIIdFilterPermissions)
}, },
handleCancel() { handleCancel() {
this.showAllReadCIIdFilterPermissions = false this.showAllReadCIIdFilterPermissions = false
this.visible = false this.visible = false
}, },
}, },
} }
</script> </script>
<style></style> <style></style>

156
cmdb-ui/src/modules/cmdb/views/resource_search_2/components/attrDisplay.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<div :class="['attr-display', isEllipsis ? 'attr-display-ellipsis' : '']">
<template v-if="attr.is_reference && ci[attr.name]" >
<a
v-for="(ciId) in (attr.is_list ? ci[attr.name] : [ci[attr.name]])"
:key="ciId"
:href="`/cmdb/cidetail/${attr.reference_type_id}/${ciId}`"
target="_blank"
>
{{ getReferenceAttrValue(ciId) }}
</a>
</template>
<span v-else-if="attr.value_type === '6' && ci[attr.name]">{{ JSON.stringify(ci[attr.name]) }}</span>
<template v-else-if="attr.is_link && ci[attr.name]">
<a
v-for="(item, linkIndex) in (attr.is_list ? ci[attr.name] : [ci[attr.name]])"
:key="linkIndex"
:href="
item.startsWith('http') || item.startsWith('https')
? `${item}`
: `http://${item}`
"
target="_blank"
>
{{ getChoiceValueLabel(item) || item }}
</a>
</template>
<PasswordField
v-else-if="attr.is_password && ci[attr.name]"
:ci_id="ci._id"
:attr_id="attr.id"
></PasswordField>
<template v-else-if="attr.is_choice">
<span
v-for="value in (attr.is_list ? ci[attr.name] : [ci[attr.name]])"
:key="value"
:style="{
borderRadius: '4px',
padding: '1px 5px',
margin: '2px',
...getChoiceValueStyle(value),
}"
>
<ops-icon
:style="{ color: getChoiceValueIcon(attr, value).color }"
:type="getChoiceValueIcon(attr, value).name"
/>
<span
v-html="markSearchValue(getChoiceValueLabel(value) || value)"
></span>
</span>
</template>
<span
v-else
v-html="markSearchValue((attr.is_list && Array.isArray(ci[attr.name])) ? ci[attr.name].join(',') : ci[attr.name])"
></span>
</div>
</template>
<script>
import PasswordField from '@/modules/cmdb/components/passwordField/index.vue'
export default {
name: 'AttrDisplay',
components: {
PasswordField
},
props: {
attr: {
type: Object,
default: () => {}
},
ci: {
type: Object,
default: () => {}
},
isEllipsis: {
type: Boolean,
default: false
},
referenceShowAttrNameMap: {
type: Object,
default: () => {}
},
referenceCIIdMap: {
type: Object,
default: () => {}
},
searchValue: {
type: String,
default: ''
}
},
methods: {
markSearchValue(text) {
if (!text || !this.searchValue) {
return text
}
const regex = new RegExp(`(${this.searchValue})`, 'gi')
return String(text).replace(
regex,
`<span style="background-color: #D3EEFE; padding: 0 2px;">$1</span>`
)
},
getChoiceValueStyle(attrValue) {
const _find = this?.attr?.choice_value?.find?.((item) => String(item?.[0]) === String(attrValue))
if (_find) {
return _find?.[1]?.style || {}
}
return {}
},
getChoiceValueIcon(attrValue) {
const _find = this?.attr?.choice_value?.find((item) => String(item?.[0]) === String(attrValue))
if (_find) {
return _find?.[1]?.icon || {}
}
return {}
},
getChoiceValueLabel(attrValue) {
const _find = this?.attr?.choice_value?.find((item) => String(item?.[0]) === String(attrValue))
if (_find) {
return _find?.[1]?.label || ''
}
return ''
},
getReferenceAttrValue(id) {
if (this.attr.referenceShowAttrNameMap?.[id]) {
return this.attr.referenceShowAttrNameMap[id]
}
const ci = this?.referenceCIIdMap?.[this?.attr?.reference_type_id]?.[id]
if (!ci) {
return id
}
const attrName = this.referenceShowAttrNameMap?.[this?.attr.reference_type_id]
return ci?.[attrName] || id
},
}
}
</script>
<style lang="less" scoped>
.attr-display {
width: 100%;
font-size: 14px;
font-weight: 400;
word-break: break-all;
&-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
}
}
</style>

235
cmdb-ui/src/modules/cmdb/views/resource_search_2/components/filterPopover.vue Normal file
View File

@ -0,0 +1,235 @@
<template>
<a-popover
v-model="visible"
trigger="click"
placement="bottom"
@visibleChange="handleVisibleChange"
>
<div class="filter-btn">
<a-icon class="filter-btn-icon" type="filter" />
<span class="filter-btn-title">{{ $t('cmdb.ciType.advancedFilter') }}</span>
</div>
<template slot="content">
<div class="filter-content">
<a-form :form="form">
<a-form-item
:label="$t('cmdb.ciType.ciType')"
:label-col="formLayout.labelCol"
:wrapper-col="formLayout.wrapperCol"
>
<treeselect
:value="selectCITypeIds"
class="custom-treeselect custom-treeselect-bgcAndBorder filter-content-ciTypes"
:style="{
width: '400px',
zIndex: '1000',
'--custom-height': '32px',
'--custom-bg-color': '#FFF',
'--custom-border': '1px solid #d9d9d9',
'--custom-multiple-lineHeight': '32px',
}"
:multiple="true"
:clearable="true"
searchable
:options="CITypeGroup"
:limit="1"
:limitText="(count) => `+ ${count}`"
value-consists-of="LEAF_PRIORITY"
:placeholder="$t('cmdb.ciType.ciType')"
@close="closeCiTypeGroup"
@open="openCiTypeGroup"
@input="inputCiTypeGroup"
:normalizer="
(node) => {
return {
id: node.id || -1,
label: node.alias || node.name || $t('other'),
title: node.alias || node.name || $t('other'),
children: node.ci_types,
}
}
"
>
<div
:title="node.label"
slot="option-label"
slot-scope="{ node }"
:style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
>
{{ node.label }}
</div>
</treeselect>
</a-form-item>
<a-form-item
:label="$t('cmdb.ciType.filterPopoverLabel')"
:label-col="formLayout.labelCol"
:wrapper-col="formLayout.wrapperCol"
class="filter-content-condition-filter"
>
<ConditionFilter
ref="conditionFilterRef"
:canSearchPreferenceAttrList="allAttributesList"
:expression="expression"
:CITypeIds="selectCITypeIds"
:isDropdown="false"
@setExpFromFilter="setExpFromFilter"
/>
</a-form-item>
</a-form>
<div class="filter-content-action">
<a-button
size="small"
@click="saveCondition(false)"
>
{{ $t('cmdb.ciType.saveCondition') }}
</a-button>
<a-button
type="primary"
size="small"
@click="saveCondition(true)"
>
{{ $t('confirm') }}
</a-button>
</div>
</div>
</template>
</a-popover>
</template>
<script>
import _ from 'lodash'
import ConditionFilter from '@/modules/cmdb/components/conditionFilter/index.vue'
export default {
name: 'FilterPopover',
components: {
ConditionFilter
},
data() {
return {
visible: false,
form: this.$form.createForm(this),
formLayout: {
labelCol: { span: 3 },
wrapperCol: { span: 15 },
},
lastCiType: [],
}
},
props: {
expression: {
type: String,
default: ''
},
selectCITypeIds: {
type: Array,
default: () => []
},
CITypeGroup: {
type: Array,
default: () => []
},
allAttributesList: {
type: Array,
default: () => []
}
},
methods: {
handleVisibleChange(open) {
if (open) {
this.$nextTick(() => {
this.$refs.conditionFilterRef.init(true, false)
})
}
},
openCiTypeGroup() {
this.lastCiType = _.cloneDeep(this.selectCITypeIds)
},
closeCiTypeGroup(value) {
if (!_.isEqual(value, this.lastCiType)) {
this.$emit('updateAllAttributesList', value)
}
},
inputCiTypeGroup(value) {
if (!value || !value.length) {
this.$emit('updateAllAttributesList', value)
}
this.$emit('changeFilter', {
name: 'selectCITypeIds',
value
})
},
setExpFromFilter(filterExp) {
const regSort = /(?<=sort=).+/g
const expSort = this.expression.match(regSort) ? this.expression.match(regSort)[0] : undefined
let expression = ''
if (filterExp) {
expression = `q=${filterExp}`
}
if (expSort) {
expression += `&sort=${expSort}`
}
this.$emit('changeFilter', {
name: 'expression',
value: expression
})
},
saveCondition(isSubmit) {
this.$refs.conditionFilterRef.handleSubmit()
this.$nextTick(() => {
this.$emit('saveCondition', isSubmit)
this.visible = false
})
},
}
}
</script>
<style lang="less" scoped>
.filter-btn {
flex-shrink: 0;
display: flex;
align-items: center;
margin-left: 13px;
cursor: pointer;
&-icon {
color: #2F54EB;
font-size: 12px;
}
&-title {
font-size: 14px;
font-weight: 400;
color: #2F54EB;
margin-left: 3px;
}
}
.filter-content {
width: 600px;
&-ciTypes {
/deep/ .vue-treeselect__value-container {
line-height: 32px;
}
}
&-condition-filter {
max-height: 250px;
// overflow-y: auto;
margin-bottom: 0px;
}
&-action {
width: 100%;
margin-top: 12px;
display: flex;
justify-content: flex-end;
align-items: center;
column-gap: 21px;
}
}
</style>

310
cmdb-ui/src/modules/cmdb/views/resource_search_2/components/historyList.vue Normal file
View File

@ -0,0 +1,310 @@
<template>
<div class="history-list">
<div
class="history-recent"
v-if="recentList.length"
>
<div class="history-title">
<a-icon type="eye" class="history-title-icon" />
<div class="history-title-text">{{ $t('cmdb.ciType.recentSearch') }}</div>
<a-popconfirm
:title="$t('cmdb.ciType.confirmClear')"
placement="topRight"
@confirm="clearRecent"
>
<a-tooltip :title="$t('clear')" >
<a-icon
type="delete"
class="history-title-clear"
/>
</a-tooltip>
</a-popconfirm>
</div>
<div class="recent-list">
<div
v-for="(item) in recentList.slice(0, 10)"
:key="item.id"
class="recent-list-item"
@click="clickRecent(item.option)"
>
<div class="recent-list-item-text">
{{ getRecentSearchText(item.option) }}
</div>
<a-icon
type="close"
class="recent-list-item-close"
@click.stop="deleteRecent(item.id)"
/>
</div>
</div>
</div>
<div
class="history-favor"
v-if="favorList.length"
>
<div class="history-title">
<ops-icon type="veops-collect" class="history-title-icon" />
<div class="history-title-text">{{ $t('cmdb.ciType.myCollection') }}</div>
<div class="history-title-count">({{ favorList.length }})</div>
<ops-icon
type="veops-expand"
class="history-title-expand"
:style="{
transform: `rotate(${isExpand ? '180deg' : '0deg'})`
}"
@click="isExpand = !isExpand"
/>
</div>
<div
class="favor-list"
:style="{ height: isExpand ? 'auto' : '30px' }"
>
<div
v-for="(item) in favorList"
:key="item.id"
:class="['favor-list-item', detailCIId === item.option.CIId ? 'favor-list-item-selected' : '']"
@click="showDetail(item.option)"
>
<CIIcon
:icon="item.option.icon"
:title="item.option.CITypeTitle"
/>
<div class="favor-list-item-title">
{{ item.option.title }}
</div>
<ops-icon
type="veops-collected"
class="favor-list-item-collected"
@click.stop="deleteCollect(item.id)"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import CIIcon from '@/modules/cmdb/components/ciIcon/index.vue'
export default {
name: 'HistoryList',
components: {
CIIcon
},
props: {
recentList: {
type: Array,
default: () => []
},
favorList: {
type: Array,
default: () => []
},
detailCIId: {
type: [String, Number],
default: -1
}
},
data() {
return {
isExpand: false,
}
},
methods: {
getRecentSearchText(option) {
const textArray = []
if (option.searchValue) {
textArray.push(`${this.$t('cmdb.ciType.keyword')}: ${option.searchValue}`)
}
if (option?.ciTypeNames?.length) {
textArray.push(`${this.$t('cmdb.ciType.CIType')}: ${option.ciTypeNames.join(',')}`)
}
if (option.expression) {
textArray.push(`${this.$t('cmdb.ciType.conditionFilter')}: ${option.expression}`)
}
return textArray.join('; ')
},
clickRecent(data) {
this.$emit('clickRecent', data)
},
deleteRecent(id) {
this.$emit('deleteRecent', id)
},
deleteCollect(id) {
this.$emit('deleteCollect', id)
},
showDetail(data) {
this.$emit('showDetail', {
id: data.CIId,
ciTypeId: data.CITypeId
})
},
clearRecent() {
this.$emit('clearRecent')
}
}
}
</script>
<style lang="less" scoped>
.history-list {
width: 100%;
.history-title {
display: flex;
align-items: center;
&-icon {
font-size: 12px;
color: #2F54EB;
}
&-text {
font-size: 14px;
font-weight: 400;
color: #4E5969;
margin-left: 4px;
}
&-count {
font-size: 14px;
font-weight: 400;
color: #86909C;
}
&-clear {
margin-left: auto;
cursor: pointer;
}
&-expand {
margin-left: auto;
cursor: pointer;
}
}
.history-recent {
width: 100%;
margin-top: 15px;
.recent-list {
margin-top: 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 16px;
row-gap: 8px;
&-item {
flex-shrink: 0;
padding: 4px 13px;
display: flex;
align-items: center;
border-radius: 22px;
background: rgba(255, 255, 255, 0.50);
cursor: pointer;
max-width: calc((100% - 16px) / 2);
&-text {
font-size: 12px;
font-weight: 400;
color: #1D2129;
max-width: 100%;
text-wrap: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&-close {
font-size: 12px;
margin-left: 4px;
color: #A5A9BC;
display: none;
}
&:hover {
.recent-list-item-text {
color: #2F54EB;
}
.recent-list-item-close {
display: inline-block;
}
}
}
}
}
.history-favor {
width: 100%;
margin-top: 15px;
.favor-list {
margin-top: 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 16px;
row-gap: 8px;
overflow: hidden;
min-height: 30px;
&-item {
flex-shrink: 0;
padding: 4px 13px;
display: flex;
align-items: center;
border-radius: 22px;
background: rgba(255, 255, 255, 0.90);
cursor: pointer;
max-width: calc((100% - 16px) / 2);
&-title {
font-size: 12px;
font-weight: 400;
margin-left: 4px;
color: #1D2129;
max-width: 100%;
text-overflow: ellipsis;
text-wrap: nowrap;
overflow: hidden;
}
&-collected {
font-size: 14px;
margin-left: 4px;
color: #FAD337;
}
&-selected {
border: 1px solid #7F97FA;
background-color: rgba(255, 255, 255, 0.90);
.favor-list-item-title {
color: #2F54EB;
}
}
&:hover {
.favor-list-item-title {
color: #2F54EB;
}
}
}
}
}
}
</style>

438
cmdb-ui/src/modules/cmdb/views/resource_search_2/components/instanceDetail.vue Normal file
View File

@ -0,0 +1,438 @@
<template>
<div class="instance-detail">
<div
class="instance-detail-hide"
@click="hideDetail"
>
<a-icon class="instance-detail-hide-icon" type="right" />
</div>
<div class="instance-detail-null" v-if="!ci._id" >
<img
:src="require('@/modules/cmdb/assets/no_permission.png')"
class="instance-detail-null-img"
/>
<span class="instance-detail-null-text" >{{ $t('noData') }}</span>
</div>
<template v-else>
<div
class="instance-detail-header"
>
<div class="instance-detail-header-line-1"></div>
<div class="instance-detail-header-line-2"></div>
<div class="instance-detail-header-row">
<CIIcon
:icon="ciType.icon"
:title="ciType.name || ''"
:size="20"
/>
<div class="instance-detail-header-title">
{{ detailTitle }}
</div>
<ops-icon
:type="favorId ? 'veops-collected' : 'veops-collect'"
:style="{ color: favorId ? '#FAD337' : '#A5A9BC' }"
class="instance-detail-header-collect"
@click="clickCollect"
/>
<a class="instance-detail-header-share" @click="shareCi">
<a-icon type="share-alt" />
{{ $t('cmdb.ci.share') }}
</a>
</div>
</div>
<div class="instance-detail-attr">
<div
v-for="(group) in attributeGroups"
:key="group.id"
class="instance-detail-attr-group"
>
<span class="instance-detail-attr-group-name">{{ group.name || $t('other') }}</span>
<div class="instance-detail-attr-list">
<div
v-for="(attr) in group.attributes"
:key="attr.id"
class="instance-detail-attr-item"
>
<a-tooltip :title="attr.alias || attr.name || ''">
<div class="instance-detail-attr-item-label">
<span class="instance-detail-attr-item-label-text">
{{ attr.alias || attr.name || '' }}
</span>
<span class="instance-detail-attr-item-label-colon">:</span>
</div>
</a-tooltip>
<div class="instance-detail-attr-item-value">
<AttrDisplay
:attr="attr"
:ci="ci"
/>
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</template>
<script>
import _ from 'lodash'
import { getCIById, searchCI } from '@/modules/cmdb/api/ci'
import { getCITypeGroupById, getCITypes, getCIType } from '@/modules/cmdb/api/CIType'
import AttrDisplay from './attrDisplay.vue'
import CIIcon from '@/modules/cmdb/components/ciIcon/index.vue'
export default {
name: 'InstanceDetail',
components: {
AttrDisplay,
CIIcon
},
props: {
CIId: {
type: [String, Number],
default: -1
},
CITypeId: {
type: [String, Number],
default: -1
},
favorList: {
type: Array,
default: () => []
}
},
data() {
return {
ci: {},
ciType: {},
attributeGroups: [],
isNullData: false,
}
},
computed: {
watchParams() {
return {
CIId: this.CIId,
CITypeId: this.CITypeId
}
},
detailTitle() {
const attrName = this?.ciType?.show_name || this?.ciType?.unique_name || ''
return attrName ? (this?.ci?.[attrName] || '') : ''
},
favorId() {
const id = this.favorList.find((item) => item?.option?.CIId === this.CIId)?.id
return id ?? null
}
},
watch: {
watchParams: {
immediate: true,
deep: true,
handler(newVal) {
if (newVal?.CIId !== -1 && newVal?.CITypeId !== -1) {
this.initData()
}
}
}
},
methods: {
async initData() {
const ci = await this.getCI()
if (!ci) {
this.isNullData = true
return
}
await this.getCIType()
await this.getAttributes()
},
async getCI() {
const res = await getCIById(this.CIId)
const ci = res.result?.[0] || {}
this.ci = ci
return ci
},
async getCIType() {
const res = await getCIType(this.CITypeId)
this.ciType = res?.ci_types?.[0] || {}
},
async getAttributes() {
const res = await getCITypeGroupById(this.CITypeId, { need_other: 1 })
this.attributeGroups = res
this.handleReferenceAttr()
},
async handleReferenceAttr() {
const map = {}
this.attributeGroups.forEach((group) => {
group.attributes.forEach((attr) => {
if (attr?.is_reference && attr?.reference_type_id && this.ci[attr.name]) {
const ids = Array.isArray(this.ci[attr.name]) ? this.ci[attr.name] : this.ci[attr.name] ? [this.ci[attr.name]] : []
if (ids.length) {
if (!map?.[attr.reference_type_id]) {
map[attr.reference_type_id] = {}
}
ids.forEach((id) => {
map[attr.reference_type_id][id] = {}
})
}
}
})
})
if (!Object.keys(map).length) {
return
}
const ciTypesRes = await getCITypes({
type_ids: Object.keys(map).join(',')
})
const showAttrNameMap = {}
ciTypesRes.ci_types.forEach((ciType) => {
showAttrNameMap[ciType.id] = ciType?.show_name || ciType?.unique_name || ''
})
const allRes = await Promise.all(
Object.keys(map).map((key) => {
return searchCI({
q: `_type:${key},_id:(${Object.keys(map[key]).join(';')})`,
count: 9999
})
})
)
const ciNameMap = {}
allRes.forEach((res) => {
res.result.forEach((item) => {
ciNameMap[item._id] = item
})
})
const newAttrGroups = _.cloneDeep(this.attributeGroups)
newAttrGroups.forEach((group) => {
group.attributes.forEach((attr) => {
if (attr?.is_reference && attr?.reference_type_id) {
attr.showAttrName = showAttrNameMap?.[attr?.reference_type_id] || ''
const referenceShowAttrNameMap = {}
const referenceCIIds = this.ci[attr.name];
(Array.isArray(referenceCIIds) ? referenceCIIds : referenceCIIds ? [referenceCIIds] : []).forEach((id) => {
referenceShowAttrNameMap[id] = ciNameMap?.[id]?.[attr.showAttrName] ?? id
})
attr.referenceShowAttrNameMap = referenceShowAttrNameMap
}
})
})
this.$set(this, 'attributeGroups', newAttrGroups)
},
shareCi() {
const text = `${document.location.host}/cmdb/cidetail/${this.CITypeId}/${this.CIId}`
this.$copyText(text)
.then(() => {
this.$message.success(this.$t('copySuccess'))
})
.catch(() => {
this.$message.error(this.$t('cmdb.ci.copyFailed'))
})
},
clickCollect() {
if (this.favorId) {
this.$emit('deleteCollect', this.favorId)
} else {
this.$emit('addCollect', {
CIId: this.CIId,
CITypeId: this.CITypeId,
title: this.detailTitle,
icon: this.ciType?.icon,
CITypeTitle: this.ciType?.name || ''
})
}
},
hideDetail() {
this.$emit('hideDetail')
}
}
}
</script>
<style lang="less" scoped>
.instance-detail {
width: 100%;
height: 100%;
border-radius: 2px;
border: 1px solid #E4E7ED;
background-color: #FFFFFF;
display: flex;
flex-direction: column;
position: relative;
&-hide {
position: absolute;
left: 0;
top: 50%;
margin-top: -21px;
border-radius: 0px 2px 2px 0px;
background-color: #2f54eb;
width: 13px;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
cursor: pointer;
&-icon {
color: #FFFFFF;
font-size: 12px;
}
&:hover {
background-color: #597ef7;
}
}
&-null {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
padding-top: 100px;
&-img {
width: 180px;
}
&-text {
color: #86909C;
margin-top: 20px;
}
}
&-header {
width: 100%;
height: 75px;
background-color: #EBF0F9;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
padding: 0 20px;
flex-shrink: 0;
&-line-1 {
height: 44px;
width: 300px;
position: absolute;
right: -20px;
top: 0px;
transform: rotate(40deg);
background: rgba(248, 249, 253, 0.60);
}
&-line-2 {
height: 44px;
width: 300px;
position: absolute;
right: -110px;
top: 0px;
transform: rotate(40deg);
background: rgba(248, 249, 253, 0.60);
}
&-row {
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: relative;
z-index: 2;
}
&-title {
font-size: 16px;
font-weight: 700;
color: #1D2129;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
margin-left: 9px;
}
&-collect {
margin-left: 8px;
margin-right: 8px;
}
&-share {
margin-left: auto;
flex-shrink: 0;
}
}
&-attr {
width: 100%;
overflow-y: auto;
height: 100%;
padding: 20px;
&-group {
&:not(:first-child) {
margin-top: 15px;
}
&-name {
font-size: 14px;
font-weight: 700;
color: #1D2129;
}
}
&-item {
margin-top: 15px;
display: flex;
align-items: flex-start;
&-label {
font-size: 14px;
font-weight: 400;
color: #86909C;
width: 25%;
flex-shrink: 0;
display: flex;
align-items: center;
&-text {
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
}
&-colon {
flex-shrink: 0;
}
}
&-value {
margin-left: 12px;
}
}
}
}
</style>

443
cmdb-ui/src/modules/cmdb/views/resource_search_2/components/instanceList.vue Normal file
View File

@ -0,0 +1,443 @@
<template>
<div class="list-wrap">
<div class="list-wrap-bg" v-if="!filterList.length">
<img :src="require('@/modules/cmdb/assets/resourceSearch/resource_search_bg_2.png')" />
</div>
<div v-if="tabList.length" class="list-tab">
<div class="list-tab-left">
<div class="list-tab-label">{{ $t('cmdb.ciType.currentPage') }}: </div>
<div
v-for="(tab) in tabList"
:key="tab.id"
:class="['list-tab-item', tab.id === currentTab ? 'list-tab-item-active' : '']"
@click="clickTab(tab.id)"
>
<span class="list-tab-item-title">{{ tab.title }}</span>
(<span class="list-tab-item-count">{{ tab.count }}</span>)
</div>
</div>
<a-button
icon="download"
type="primary"
class="ops-button-ghost list-tab-export"
ghost
@click="handleExport"
>
{{ $t('download') }}
</a-button>
</div>
<div v-if="filterList.length" class="list-container">
<div
v-for="(item) in filterList"
:key="item._id"
:class="['list-card', detailCIId === item.ci._id ? 'list-card-selected' : '']"
@click="clickInstance(item.ci._id, item.ciTypeObj.id)"
>
<div class="list-card-header">
<div class="list-card-model">
<CIIcon
:icon="item.ciTypeObj.icon"
:title="item.ciTypeObj.name"
/>
<span class="list-card-model-title">{{ item.ciTypeObj.title }}</span>
</div>
<div class="list-card-title">{{ item.ci[item.ciTypeObj.showAttrName] }}</div>
<ops-icon
v-if="getFavorId(item.ci._id)"
type="veops-collected"
class="list-card-collect"
:style="{ color: '#FAD337' }"
@click.stop="deleteCollect(item.ci._id)"
/>
<ops-icon
v-else
type="veops-collect"
class="list-card-collect"
:style="{ color: '#A5A9BC' }"
@click.stop="addCollect(item)"
/>
</div>
<div class="list-card-attr">
<div
v-for="(attr) in item.attributes"
:key="attr.name"
class="list-card-attr-item"
>
<div class="list-card-attr-item-label">{{ attr.alias || attr.name || '' }}: </div>
<div class="list-card-attr-item-value">
<AttrDisplay
:attr="attr"
:ci="item.ci"
:referenceShowAttrNameMap="referenceShowAttrNameMap"
:referenceCIIdMap="referenceCIIdMap"
:isEllipsis="true"
:searchValue="searchValue"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ExcelJS from 'exceljs'
import FileSaver from 'file-saver'
import moment from 'moment'
import AttrDisplay from './attrDisplay.vue'
import CIIcon from '@/modules/cmdb/components/ciIcon/index.vue'
export default {
name: 'InstanceList',
components: {
AttrDisplay,
CIIcon
},
props: {
list: {
type: Array,
default: () => []
},
tabList: {
type: Array,
default: () => []
},
referenceShowAttrNameMap: {
type: Object,
default: () => {}
},
referenceCIIdMap: {
type: Object,
default: () => {}
},
favorList: {
type: Array,
default: () => []
},
detailCIId: {
type: [String, Number],
default: -1
},
searchValue: {
type: String,
default: ''
}
},
data() {
return {
currentTab: ''
}
},
computed: {
filterList() {
if (!this.currentTab || this.currentTab === -1) {
return this.list
}
return this.list.filter((item) => item.ciTypeObj.id === this.currentTab)
}
},
watch: {
tabList: {
immediate: true,
deep: true,
handler(newVal) {
this.currentTab = newVal?.[0]?.id ?? ''
}
}
},
methods: {
clickTab(id) {
this.currentTab = id
},
getAttrLabel(attrName, attributes) {
const label = attributes.find((attr) => attr.name === attrName)?.alias
return label || attrName
},
clickInstance(id, ciTypeId) {
this.$emit('showDetail', {
id,
ciTypeId,
})
},
getFavorId(ciId) {
const id = this.favorList.find((item) => item?.option?.CIId === ciId)?.id
return id ?? null
},
addCollect(data) {
this.$emit('addCollect', {
CIId: data.ci._id,
CITypeId: data.ciTypeObj.id,
title: data.ci[data.ciTypeObj.showAttrName],
icon: data.ciTypeObj.icon,
CITypeTitle: data.ciTypeObj.name
})
},
deleteCollect(ciId) {
const favorId = this.getFavorId(ciId)
if (favorId) {
this.$emit('deleteCollect', favorId)
}
},
handleExport() {
const excel_name = `cmdb-${this.$t('cmdb.ciType.resourceSearch')}-${moment().format('YYYYMMDDHHmmss')}.xlsx`
const wb = new ExcelJS.Workbook()
this.tabList.map((sheet) => {
if (sheet.id === -1) {
return
}
const ws = wb.addWorksheet(sheet.title)
this.handleSheetData({
ws,
sheet
})
})
wb.xlsx.writeBuffer().then((buffer) => {
const file = new Blob([buffer], {
type: 'application/octet-stream',
})
FileSaver.saveAs(file, excel_name)
})
},
handleSheetData({
ws,
sheet
}) {
const listData = this.list.filter((item) => item.ciTypeObj.id === sheet.id)
if (!listData.length) {
return
}
const columnMap = new Map()
const columns = listData[0].attributes.filter((attr) => !attr.is_password).map((attr) => {
columnMap.set(attr.name, attr)
return {
header: attr.alias || attr.name || '',
key: attr.name,
width: 20,
}
})
ws.columns = columns
listData.forEach((data) => {
const row = {}
columns.forEach(({ key }) => {
const value = data?.ci?.[key] ?? null
const attr = columnMap.get(key)
if (attr.valueType === '6') {
row[key] = value ? JSON.stringify(value) : value
} else if (attr.is_list && Array.isArray(value)) {
row[key] = value.join(',')
} else {
row[key] = value
}
})
ws.addRow(row)
})
}
}
}
</script>
<style lang="less" scoped>
.list-wrap {
width: 100%;
height: 100%;
flex-shrink: 1 !important;
overflow: hidden;
display: flex;
flex-direction: column;
&-bg {
width: 100%;
padding-top: 90px;
display: flex;
justify-content: center;
img {
width: 300px;
}
}
.list-tab {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
column-gap: 14px;
&-left {
display: flex;
align-items: center;
column-gap: 14px;
row-gap: 7px;
overflow-x: auto;
max-width: 100%;
}
&-label {
font-size: 14px;
font-weight: 400;
color: #4E5969;
flex-shrink: 0;
}
&-item {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
color: #4E5969;
cursor: pointer;
flex-shrink: 0;
&-count {
color: #2F54EB;
}
&-active {
color: #2F54EB;
}
&:hover {
color: #2F54EB;
}
}
&-export {
margin-left: auto;
flex-shrink: 0;
}
}
.list-container {
width: 100%;
margin-top: 12px;
height: 100%;
overflow-y: auto;
flex-shrink: 1;
flex-grow: 0;
.list-card {
width: 100%;
background-color: #FFF;
border-radius: 4px;
padding: 15px;
cursor: pointer;
&:not(:first-child) {
margin-top: 16px;
}
&-selected {
border: 1px solid #7F97FA;
background-color: #F9FBFF;
}
&-header {
display: flex;
align-items: center;
}
&-model {
border-radius: 24px;
border: 1px solid #E4E7ED;
background-color: #FFF;
display: flex;
align-items: center;
justify-content: center;
height: 24px;
padding: 0 13px;
flex-shrink: 0;
&-title {
font-size: 12px;
font-weight: 400;
line-height: 24px;
color: #1D2129;
margin-left: 4px;
}
}
&-title {
margin-left: 11px;
font-size: 14px;
font-weight: 700;
color: #1D2129;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
}
&-collect {
font-size: 12px;
margin-left: 9px;
display: none;
}
&-attr {
display: flex;
flex-wrap: wrap;
align-items: center;
overflow: hidden;
height: 25px;
column-gap: 40px;
row-gap: 20px;
margin-top: 12px;
&-item {
flex-shrink: 0;
max-width: calc((100% - 160px) / 5);
display: flex;
align-items: center;
overflow: hidden;
&-label {
color: #86909C;
font-size: 14px;
font-weight: 400;
flex-shrink: 0;
}
&-value {
color: #1D2129;
font-size: 14px;
font-weight: 400;
margin-left: 12px;
overflow: hidden;
}
}
}
&:hover {
box-shadow: 0px 2px 12px 0px rgba(147, 168, 223, 0.20);
.list-card-collect {
display: inline-block;
}
}
}
}
}
</style>

201
cmdb-ui/src/modules/cmdb/views/resource_search_2/components/searchInput.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<div :class="['search-input', classType ? 'search-input-' + classType : '']">
<a-input
:value="searchValue"
class="search-input-component"
:placeholder="$t('cmdb.ciType.searchInputTip')"
@change="handleChangeSearchValue"
@pressEnter="saveCondition(true)"
>
<a-icon
class="search-input-component-icon"
slot="prefix"
type="search"
@click="saveCondition(true)"
/>
</a-input>
<FilterPopover
ref="filterPpoverRef"
:CITypeGroup="CITypeGroup"
:allAttributesList="allAttributesList"
:expression="expression"
:selectCITypeIds="selectCITypeIds"
@changeFilter="changeFilter"
@updateAllAttributesList="updateAllAttributesList"
@saveCondition="saveCondition"
/>
<div v-if="copyText" class="expression-display">
<span class="expression-display-text">{{ copyText }}</span>
<a-icon
slot="suffix"
type="check-circle"
class="expression-display-icon"
@click="handleCopyExpression"
/>
</div>
</div>
</template>
<script>
import FilterPopover from './filterPopover.vue'
export default {
name: 'SearchInput',
components: {
FilterPopover
},
props: {
searchValue: {
type: String,
default: ''
},
expression: {
type: String,
default: ''
},
selectCITypeIds: {
type: Array,
default: () => []
},
CITypeGroup: {
type: Array,
default: () => []
},
allAttributesList: {
type: Array,
default: () => []
},
classType: {
type: String,
default: ''
}
},
data() {
return {}
},
computed: {
// 复制文字展示，与实际文本复制内容区别在于，未选择模型时不展示所有模型拼接数据
copyText() {
const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
const exp = this.expression.match(regQ) ? this.expression.match(regQ)[0] : null
const textArray = []
if (this.selectCITypeIds?.length) {
textArray.push(`_type:(${this.selectCITypeIds.join(';')})`)
}
if (exp) {
textArray.push(exp)
}
if (this.searchValue) {
textArray.push(`*${this.searchValue}*`)
}
return textArray.length ? `q=${textArray.join(',')}` : ''
},
},
methods: {
updateAllAttributesList(value) {
this.$emit('updateAllAttributesList', value)
},
saveCondition(isSubmit) {
this.$emit('saveCondition', isSubmit)
},
handleChangeSearchValue(e) {
const value = e.target.value
this.changeFilter({
name: 'searchValue',
value
})
},
changeFilter(data) {
this.$emit('changeFilter', data)
},
handleCopyExpression() {
const { selectCITypeIds, expression, searchValue } = this
const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
const ciTypeIds = [...selectCITypeIds]
if (!ciTypeIds.length) {
this.CITypeGroup.forEach((item) => {
const ids = item.ci_types.map((ci_type) => ci_type.id)
ciTypeIds.push(...ids)
})
}
const copyText = `${ciTypeIds?.length ? `_type:(${ciTypeIds.join(';')})` : ''}${exp ? `,${exp}` : ''}${searchValue ? `,*${searchValue}*` : ''}`
this.$copyText(copyText)
.then(() => {
this.$message.success(this.$t('copySuccess'))
})
.catch(() => {
this.$message.error(this.$t('cmdb.ci.copyFailed'))
})
}
}
}
</script>
<style lang="less" scoped>
.search-input {
width: 100%;
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
&-component {
height: 100%;
flex-grow: 1;
background-color: #FFFFFF;
border: none;
font-size: 14px;
border-radius: 48px;
overflow: hidden;
&-icon {
color: #2F54EB;
font-size: 14px;
}
/deep/ & > input {
height: 100%;
margin-left: 10px;
border: none;
box-shadow: none;
}
}
&-after {
height: 38px;
justify-content: flex-start;
.search-input-component {
max-width: 524px;
}
}
.expression-display {
display: flex;
align-items: center;
margin-left: 20px;
max-width: 30%;
&-text {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
text-wrap: nowrap;
}
&-icon {
margin-left: 8px;
color: #00b42a;
cursor: pointer;
}
}
}
</style>

615
cmdb-ui/src/modules/cmdb/views/resource_search_2/index.vue Normal file
View File

@ -0,0 +1,615 @@
<template>
<div
class="resource-search"
:style="{ height: `${windowHeight - 93}px` }"
>
<div v-if="!isSearch" class="resource-search-before">
<div class="resource-search-title">
<ops-icon class="resource-search-title-icon" type="veops-resource11" />
<span class="resource-search-title-text">{{ $t('cmdb.ciType.resourceSearch') }}</span>
</div>
<SearchInput
ref="searchInputRef"
:CITypeGroup="CITypeGroup"
:allAttributesList="allAttributesList"
:searchValue="searchValue"
:selectCITypeIds="selectCITypeIds"
:expression="expression"
@changeFilter="changeFilter"
@updateAllAttributesList="updateAllAttributesList"
@saveCondition="saveCondition"
/>
<HistoryList
:recentList="recentList"
:favorList="favorList"
:detailCIId="detailCIId"
@clickRecent="clickRecent"
@deleteRecent="deleteRecent"
@clearRecent="clearRecent"
@deleteCollect="deleteCollect"
@showDetail="clickFavor"
/>
<img class="resource-search-before-bg" :src="require('@/modules/cmdb/assets/resourceSearch/resource_search_bg_1.png')" />
</div>
<div class="resource-search-after" v-else>
<div
class="resource-search-after-left"
:style="{ width: showInstanceDetail ? '70%' : '100%' }"
>
<SearchInput
ref="searchInputRef"
classType="after"
:CITypeGroup="CITypeGroup"
:allAttributesList="allAttributesList"
:searchValue="searchValue"
:selectCITypeIds="selectCITypeIds"
:expression="expression"
@changeFilter="changeFilter"
@updateAllAttributesList="updateAllAttributesList"
@saveCondition="saveCondition"
/>
<HistoryList
:recentList="recentList"
:favorList="favorList"
:detailCIId="detailCIId"
@clickRecent="clickRecent"
@deleteRecent="deleteRecent"
@clearRecent="clearRecent"
@deleteCollect="deleteCollect"
@showDetail="clickFavor"
/>
<div class="resource-search-divider"></div>
<InstanceList
:list="instanceList"
:tabList="ciTabList"
:referenceShowAttrNameMap="referenceShowAttrNameMap"
:referenceCIIdMap="referenceCIIdMap"
:favorList="favorList"
:detailCIId="detailCIId"
:searchValue="currentSearchValue"
@showDetail="showDetail"
@addCollect="addCollect"
@deleteCollect="deleteCollect"
/>
<div class="resource-search-pagination">
<a-pagination
:showSizeChanger="true"
:current="currentPage"
size="small"
:total="totalNumber"
show-quick-jumper
:page-size="pageSize"
:page-size-options="pageSizeOptions"
@showSizeChange="handlePageSizeChange"
:show-total="
(total, range) =>
$t('pagination.total', {
range0: range[0],
range1: range[1],
total,
})
"
@change="changePage"
>
<template slot="buildOptionText" slot-scope="props">
<span v-if="props.value !== '100000'">{{ props.value }}{{ $t('itemsPerPage') }}</span>
<span v-if="props.value === '100000'">{{ $t('all') }}</span>
</template>
</a-pagination>
</div>
</div>
<div v-if="showInstanceDetail" class="resource-search-after-right">
<InstanceDetail
:CIId="detailCIId"
:CITypeId="detailCITypeId"
:favorList="favorList"
@addCollect="addCollect"
@deleteCollect="deleteCollect"
@hideDetail="hideDetail"
/>
</div>
</div>
</div>
</template>
<script>
import _ from 'lodash'
import { getPreferenceSearch, savePreferenceSearch, getSubscribeAttributes, deletePreferenceSearch } from '@/modules/cmdb/api/preference'
import { getCITypeGroups } from '@/modules/cmdb/api/ciTypeGroup'
import { searchAttributes, getCITypeAttributesByTypeIds } from '@/modules/cmdb/api/CITypeAttr'
import { searchCI } from '@/modules/cmdb/api/ci'
import { getCITypes } from '@/modules/cmdb/api/CIType'
import SearchInput from './components/searchInput.vue'
import HistoryList from './components/historyList.vue'
import InstanceList from './components/instanceList.vue'
import InstanceDetail from './components/instanceDetail.vue'
export default {
name: 'ResourceSearch',
components: {
SearchInput,
HistoryList,
InstanceList,
InstanceDetail
},
data() {
return {
// 筛选条件
searchValue: '', // 搜索框
selectCITypeIds: [], // 已选模型
expression: '', // 筛选语句
currentSearchValue: '', // 当前已搜索语句
recentList: [], // 最近搜索
favorList: [], // 我的收藏
CITypeGroup: [], // CIType 分组
CITypes: [],
allAttributesList: [],
isSearch: false, // 是否搜索过
currentPage: 1,
pageSizeOptions: ['50', '100', '200', '100000'],
pageSize: 50,
totalNumber: 0,
ciTabList: [],
instanceList: [],
referenceShowAttrNameMap: {},
referenceCIIdMap: {},
showInstanceDetail: false,
detailCIId: -1,
detailCITypeId: -1,
}
},
computed: {
windowHeight() {
return this.$store.state.windowHeight
},
},
mounted() {
this.initData()
},
methods: {
async initData() {
await this.getRecentList()
await this.getFavorList()
await this.getCITypeGroups()
await this.getAllCITypes()
await this.getAllAttr()
},
async getRecentList() {
const recentList = await getPreferenceSearch({
name: '__recent__'
})
recentList.sort((a, b) => b.id - a.id)
this.recentList = recentList
},
async getFavorList() {
const favorList = await getPreferenceSearch({
name: '__favor__'
})
favorList.sort((a, b) => b.id - a.id)
this.favorList = favorList
},
async getCITypeGroups() {
const res = await getCITypeGroups({ need_other: true })
this.CITypeGroup = res
.filter((item) => item.ci_types && item.ci_types.length)
.map((item) => {
item.id = `parent_${item.id || -1}`
return { ..._.cloneDeep(item) }
})
},
async getAllCITypes() {
const res = await getCITypes()
this.CITypes = res?.ci_types
},
async getAllAttr() {
const res = await searchAttributes({ page_size: 9999 })
this.allAttributesList = res.attributes
this.originAllAttributesList = res.attributes
},
async updateAllAttributesList(value) {
if (value && value.length) {
const res = await getCITypeAttributesByTypeIds({ type_ids: value.join(',') })
this.allAttributesList = res.attributes
} else {
this.allAttributesList = this.originAllAttributesList
}
},
async saveCondition(isSubmit) {
if (
this.searchValue ||
this.expression ||
this.selectCITypeIds.length
) {
const needDeleteList = []
const differentList = []
this.recentList.forEach((item) => {
const option = item.option
if (
option.searchValue === this.searchValue &&
option.expression === this.expression &&
_.isEqual(option.ciTypeIds, this.selectCITypeIds)
) {
needDeleteList.push(item.id)
} else {
differentList.push(item.id)
}
})
if (differentList.length >= 10) {
needDeleteList.push(...differentList.slice(9))
}
if (needDeleteList.length) {
await Promise.all(
needDeleteList.map((id) => deletePreferenceSearch(id))
)
}
const ciTypeNames = this.selectCITypeIds.map((id) => {
const ciType = this.CITypes.find((item) => item.id === id)
return ciType?.alias || ciType?.name || id
})
await savePreferenceSearch({
option: {
searchValue: this.searchValue,
expression: this.expression,
ciTypeIds: this.selectCITypeIds,
ciTypeNames
},
name: '__recent__'
})
this.getRecentList()
}
if (isSubmit) {
this.isSearch = true
this.currentPage = 1
this.hideDetail()
this.loadInstance()
}
},
async deleteRecent(id) {
await deletePreferenceSearch(id)
this.getRecentList()
},
async clearRecent() {
const deletePromises = this.recentList.map((item) => {
return deletePreferenceSearch(item.id)
})
await Promise.all(deletePromises)
this.getRecentList()
},
async loadInstance() {
const { selectCITypeIds, expression, searchValue } = this
const regQ = /(?<=q=).+(?=&)|(?<=q=).+$/g
const exp = expression.match(regQ) ? expression.match(regQ)[0] : null
const ciTypeIds = [...selectCITypeIds]
if (!ciTypeIds.length) {
this.CITypeGroup.forEach((item) => {
const ids = item.ci_types.map((ci_type) => ci_type.id)
ciTypeIds.push(...ids)
})
}
const res = await searchCI({
q: `${ciTypeIds?.length ? `_type:(${ciTypeIds.join(';')})` : ''}${exp ? `,${exp}` : ''}${
searchValue ? `,*${searchValue}*` : ''
}`,
count: this.pageSize,
page: this.currentPage,
sort: '_type'
})
this.currentSearchValue = searchValue
this.totalNumber = res?.numfound ?? 0
if (!res?.result?.length) {
this.ciTabList = []
this.instanceList = []
}
const ciTabMap = new Map()
let list = res.result
list.forEach((item) => {
const ciType = this.CITypes.find((type) => type.id === item._type)
if (ciTabMap.has(item._type)) {
ciTabMap.get(item._type).count++
} else {
ciTabMap.set(item._type, {
id: item._type,
count: 1,
title: ciType?.alias || ciType?.name || '',
})
}
})
const mapEntries = [...ciTabMap.entries()]
const subscribedPromises = mapEntries.map((item) => {
return getSubscribeAttributes(item[0])
})
const subscribedRes = await Promise.all(subscribedPromises)
list = list.map((item) => {
const subscribedIndex = mapEntries.findIndex((mapValue) => mapValue[0] === item._type)
const subscribedAttr = subscribedRes?.[subscribedIndex]?.attributes || []
const obj = {
ci: item,
ciTypeObj: {},
attributes: subscribedAttr
}
const ciType = this.CITypes.find((type) => type.id === item._type)
obj.ciTypeObj = {
showAttrName: ciType?.show_name || ciType?.unique_key || '',
icon: ciType?.icon || '',
title: ciType?.alias || ciType?.name || '',
name: ciType?.name || '',
id: ciType.id
}
return obj
})
this.instanceList = list
const ciTabList = [...ciTabMap.values()]
if (list?.length) {
ciTabList.unshift({
id: -1,
title: this.$t('all'),
count: list?.length
})
}
this.ciTabList = ciTabList
// 处理引用属性
const allAttr = []
subscribedRes.map((item) => {
allAttr.push(...item.attributes)
})
this.handlePerference(_.uniqBy(allAttr, 'id'))
},
handlePerference(allAttr) {
let needRequiredCIType = []
allAttr.forEach((attr) => {
if (attr?.is_reference && attr?.reference_type_id) {
needRequiredCIType.push(attr)
}
})
needRequiredCIType = _.uniq(needRequiredCIType, 'id')
if (!needRequiredCIType.length) {
this.referenceShowAttrNameMap = {}
this.referenceCIIdMap = {}
return
}
this.handleReferenceShowAttrName(needRequiredCIType)
this.handleReferenceCIIdMap(needRequiredCIType)
},
async handleReferenceShowAttrName(needRequiredCIType) {
const res = await getCITypes({
type_ids: needRequiredCIType.map((col) => col.reference_type_id).join(',')
})
const map = {}
res.ci_types.forEach((ciType) => {
map[ciType.id] = ciType?.show_name || ciType?.unique_name || ''
})
this.referenceShowAttrNameMap = map
},
async handleReferenceCIIdMap(needRequiredCIType) {
const map = {}
this.instanceList.forEach(({ ci }) => {
needRequiredCIType.forEach((col) => {
const ids = Array.isArray(ci[col.name]) ? ci[col.name] : ci[col.name] ? [ci[col.name]] : []
if (ids.length) {
if (!map?.[col.reference_type_id]) {
map[col.reference_type_id] = {}
}
ids.forEach((id) => {
map[col.reference_type_id][id] = {}
})
}
})
})
if (!Object.keys(map).length) {
this.referenceCIIdMap = {}
return
}
const allRes = await Promise.all(
Object.keys(map).map((key) => {
return searchCI({
q: `_type:${key},_id:(${Object.keys(map[key]).join(';')})`,
count: 9999
})
})
)
allRes.forEach((res) => {
res.result.forEach((item) => {
if (map?.[item._type]?.[item._id]) {
map[item._type][item._id] = item
}
})
})
this.referenceCIIdMap = map
},
clickRecent(data) {
this.updateAllAttributesList(data.ciTypeIds || [])
this.isSearch = true
this.currentPage = 1
this.searchValue = data?.searchValue || ''
this.expression = data?.expression || ''
this.selectCITypeIds = data?.ciTypeIds || []
this.hideDetail()
this.loadInstance()
},
handlePageSizeChange(_, pageSize) {
this.pageSize = pageSize
this.currentPage = 1
this.loadInstance()
},
changePage(page) {
this.currentPage = page
this.loadInstance()
},
changeFilter(data) {
this[data.name] = data.value
},
showDetail(data) {
this.detailCIId = data.id
this.detailCITypeId = data.ciTypeId
this.showInstanceDetail = true
},
hideDetail() {
this.detailCIId = -1
this.detailCITypeId = -1
this.showInstanceDetail = false
},
async addCollect(data) {
if (this?.favorList?.length >= 10) {
const deletePromises = this.favorList.slice(9).map((item) => {
return deletePreferenceSearch(item.id)
})
await Promise.all(deletePromises)
}
await savePreferenceSearch({
option: {
...data
},
name: '__favor__'
})
this.getFavorList()
},
async deleteCollect(id) {
await deletePreferenceSearch(id)
this.getFavorList()
},
clickFavor(data) {
this.isSearch = true
this.showDetail(data)
}
}
}
</script>
<style lang="less" scoped>
.resource-search {
width: 100%;
height: 100%;
position: relative;
&-before {
width: 100%;
max-width: 725px;
height: 100%;
margin: 0 auto;
padding-top: 100px;
display: flex;
flex-direction: column;
align-items: center;
& > div {
position: relative;
z-index: 1;
}
&-bg {
position: absolute;
left: -24px;
bottom: -24px;
width: calc(100% + 48px);
z-index: 0;
}
}
&-title {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
&-icon {
font-size: 28px;
}
&-text {
margin-left: 10px;
font-size: 20px;
font-weight: 700;
color: #1D2129;
}
}
&-after {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
&-left {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
& > div {
flex-shrink: 0;
}
}
&-right {
margin-left: 20px;
width: calc(30% - 20px);
flex-shrink: 0;
}
}
&-divider {
width: 100%;
height: 1px;
background-color: #E4E7ED;
margin: 20px 0;
}
&-pagination {
text-align: right;
margin: 12px 0px;
}
}
</style>