CN-1551 feat: element-plus升级后样式调整
This commit is contained in:
chenjinsong
@@ -49,6 +49,19 @@
|
||||
.top-tool-btn {
|
||||
border-left: none;
|
||||
}
|
||||
.top-tool-btn--search {
|
||||
width: 28px !important;
|
||||
height:28px !important;
|
||||
padding:unset !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $--text-color-2;
|
||||
margin-right:unset !important;
|
||||
}
|
||||
}
|
||||
.top-tool-btn--search:hover {
|
||||
border-left: none !important;
|
||||
}
|
||||
@@ -59,6 +72,14 @@
|
||||
height: 28px !important;
|
||||
border-radius: 2px 0 0 2px !important;
|
||||
}
|
||||
.el-input--small{
|
||||
width: 214px !important;
|
||||
line-height: 27px;
|
||||
}
|
||||
.el-input--small .el-input__inner {
|
||||
height: 28px;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-tool-right {
|
||||
@@ -92,7 +113,6 @@
|
||||
transition: background-color linear .1s;
|
||||
font-size:12px;
|
||||
font-weight: 500;
|
||||
font-family: NotoSansHans-Medium !important;
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: #575757;
|
||||
@@ -167,10 +187,10 @@
|
||||
}
|
||||
|
||||
.btn-customize {
|
||||
color:$blue;
|
||||
color: #2E88A6;
|
||||
font-size: 12px;
|
||||
.icon-gear{
|
||||
color:#2C72C6;
|
||||
color: #2E88A6;
|
||||
width:12px;
|
||||
height:12px;
|
||||
margin-right:2px;
|
||||
@@ -188,7 +208,31 @@
|
||||
min-width: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.cn-table {
|
||||
padding: 0 20px;
|
||||
height: calc(100% - 48px);
|
||||
|
||||
.el-table:not(.chart-table) {
|
||||
height: calc(100% - 58px);
|
||||
width: calc(100% - 2px); // 防止出现横向滚动条
|
||||
border: 1px solid var(--el-table-border-color);
|
||||
border-bottom: none;
|
||||
|
||||
thead {
|
||||
color: #333;
|
||||
}
|
||||
.el-switch {
|
||||
height: auto;
|
||||
--el-switch-on-color: #38ACD2;
|
||||
--el-switch-off-color: #C0CEDB;
|
||||
}
|
||||
.el-checkbox__input {
|
||||
--el-checkbox-checked-bg-color: #38ACD2;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*.cn-table {
|
||||
position: relative;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
@@ -306,7 +350,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
/* start--覆盖el-table边框、gutter等样式 */
|
||||
!* start--覆盖el-table边框、gutter等样式 *!
|
||||
.el-table__body-wrapper, .el-table__fixed-body-wrapper {
|
||||
box-shadow: 1px 0 $--right-box-border-color;
|
||||
|
||||
@@ -321,8 +365,8 @@
|
||||
.el-table--border td {
|
||||
border-right: none !important;
|
||||
}
|
||||
/* 最后一列用box-shadow模拟边框 */
|
||||
/*.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
|
||||
!* 最后一列用box-shadow模拟边框 *!
|
||||
!*.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__body-wrapper td:nth-last-child(2) {
|
||||
box-shadow: 1px 0 $--right-box-border-color;
|
||||
}
|
||||
.el-table:not(.no-operation):not(.chart-table).el-table--border .el-table__header-wrapper th:nth-last-child(3) {
|
||||
@@ -341,7 +385,7 @@
|
||||
th:last-of-type {
|
||||
border-right: none !important;
|
||||
}
|
||||
}*/
|
||||
}*!
|
||||
.el-table--border:not(.chart-table)::after, .el-table--group:not(.chart-table)::after {
|
||||
// width: 0;
|
||||
}
|
||||
@@ -355,7 +399,7 @@
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
/* end--覆盖el-table边框、gutter等样式 */
|
||||
.cn-pagination{
|
||||
position: absolute;
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
.advanced-search {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 66px;
|
||||
|
||||
.el-input__suffix {
|
||||
right: 0;
|
||||
}
|
||||
&.advanced-search--show-list {
|
||||
max-height: 40px;
|
||||
|
||||
.el-input__inner {
|
||||
padding-right: 0;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.el-input__inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #CECECE;
|
||||
border-radius: 2px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.search__suffixes, .search__suffixes--show-list {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
.search__suffix {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.search__suffixes {
|
||||
justify-content: space-evenly;
|
||||
width: 100px;
|
||||
|
||||
.search__suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.cn-icon-search-advance {
|
||||
color: #A6AAAE;
|
||||
font-size: 20px;
|
||||
}
|
||||
.cn-icon-filter {
|
||||
color: #A6AAAE;
|
||||
font-size: 20px;
|
||||
}
|
||||
.el-icon-search {
|
||||
color: #3976CB;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search__suffixes--show-list {
|
||||
.search__suffix {
|
||||
padding: 0 12px;
|
||||
|
||||
&:last-of-type {
|
||||
background-color: $--color-primary;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
.cn-icon-search-advance {
|
||||
color: #A6AAAE;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cn-icon-filter {
|
||||
color: #A6AAAE;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-icon-search {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -73,6 +73,34 @@
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
.HintInfo {
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
|
||||
ul {
|
||||
min-width: 300px;
|
||||
height:auto;
|
||||
width: fit-content;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.relative-item {
|
||||
text-indent: 1em;
|
||||
font-size: 14px !important;
|
||||
color: #575757;
|
||||
height: 24px;
|
||||
line-height: 24px !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f5fa;
|
||||
color: #046ECA;
|
||||
}
|
||||
}
|
||||
.hint-clear {
|
||||
text-indent: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detections {
|
||||
.tag-search, .CodeMirror {
|
||||
|
||||
@@ -66,48 +66,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.unshow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-page .top-tools .top-tool-btn {
|
||||
height: 33px;
|
||||
width: 36px;
|
||||
border: 1px solid #DEDEDE;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
background-color: #F9F9F9;
|
||||
transition: background-color linear .1s;
|
||||
padding-left:10px;
|
||||
}
|
||||
|
||||
|
||||
.list-page .top-tools .top-tool-btn--search{
|
||||
width:28px !important;
|
||||
height:28px !important;
|
||||
padding:unset !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $--text-color-2;
|
||||
margin-right:unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list-page {
|
||||
.el-input--small{
|
||||
width: 214px !important;
|
||||
line-height: 27px;
|
||||
}
|
||||
.el-input--small .el-input__inner {
|
||||
height: 28px;
|
||||
border-radius: 2px 0px 0px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
// 自定义列
|
||||
.drag-list {
|
||||
list-style: none;
|
||||
padding-inline-start: 0 !important;
|
||||
max-height: 358px !important;
|
||||
|
||||
@@ -3,11 +3,13 @@
|
||||
height: 18px;
|
||||
}
|
||||
.administration-container {
|
||||
height: calc(100% - 26px);
|
||||
height: calc(100% - 86px);
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.list-page {
|
||||
.main-container {
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
.cn-pagination {
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
@@ -80,9 +80,13 @@
|
||||
border: 1px solid #E2E5EC;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding: 1px;
|
||||
|
||||
.data-click:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-table__inner-wrapper {
|
||||
width: calc(100% + 2px);
|
||||
}
|
||||
.el-table__header {
|
||||
width:100% !important;
|
||||
}
|
||||
@@ -129,6 +133,9 @@
|
||||
.data-click:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-table__inner-wrapper {
|
||||
width: calc(100% + 2px);
|
||||
}
|
||||
.el-table__header {
|
||||
width:100% !important;
|
||||
}
|
||||
@@ -380,10 +387,10 @@
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
.el-tabs__item{
|
||||
width:50%;
|
||||
text-align:center;
|
||||
padding:0px;
|
||||
height:30px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
@@ -400,68 +407,13 @@
|
||||
border-left: 1px #E2E5EC solid !important;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__item{
|
||||
border-bottom: 0px ;
|
||||
border-bottom: 0;
|
||||
border-top: 3px solid white;
|
||||
color: #353636;
|
||||
}
|
||||
.el-tabs--card > .el-tabs__header .el-tabs__nav {
|
||||
border:0px ;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
padding-inline-start: 0px !important;
|
||||
/*height:375px;*/
|
||||
max-height: 358px !important;
|
||||
overflow:auto;
|
||||
margin:0 0;
|
||||
.drag-move {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.list-item {
|
||||
width:100%;
|
||||
color: #575757;
|
||||
margin-bottom: 0px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
font-weight:400;
|
||||
font-size:12px;
|
||||
|
||||
.icon-drag{
|
||||
cursor: move;
|
||||
margin-left:6px;
|
||||
margin-right:3px;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: #38ACD2;
|
||||
border-color: #38ACD2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-checkbox__input .el-checkbox__inner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-color: #F2F7F9;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label,.el-checkbox__input + .el-checkbox__label {
|
||||
font-size: 12px;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*top:0px !important;
|
||||
right:200px !important;
|
||||
transform: translateY(126px) !important;*/
|
||||
}
|
||||
.fixed-row {
|
||||
display:flex;
|
||||
|
||||
@@ -677,57 +677,43 @@
|
||||
}
|
||||
.list-mode__row {
|
||||
width: 100%;
|
||||
height:calc(100% - 102px);
|
||||
margin-bottom:0px;
|
||||
padding-bottom:30px;
|
||||
.el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
border-color: #38ACD2;
|
||||
background: #38ACD2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
||||
background-color: #38ACD2;
|
||||
border-color: #38ACD2;
|
||||
}
|
||||
.el-table--border {
|
||||
border: 1px solid rgba(226,229,236,1);
|
||||
border-radius: 4px;
|
||||
border-bottom:none;
|
||||
}
|
||||
.el-table--border th ,.el-table--border td {
|
||||
border-right: none;
|
||||
}
|
||||
height: calc(100% - 80px);
|
||||
margin-bottom: 0;
|
||||
|
||||
.el-table {
|
||||
&::after {
|
||||
width: 0;
|
||||
}
|
||||
height: 100%;
|
||||
width: calc(100% - 2px); // 防止出现横向滚动条
|
||||
border: 1px solid var(--el-table-border-color);
|
||||
border-bottom: none;
|
||||
|
||||
th {
|
||||
padding-top:6px;
|
||||
padding-bottom:6px;
|
||||
font-size:12px;
|
||||
line-height:12px;
|
||||
color: #353636;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
td {
|
||||
padding-top:8px;
|
||||
padding-bottom:8px;
|
||||
font-size:12px;
|
||||
line-height:12px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
color: #353636;
|
||||
font-weight: 400;
|
||||
}
|
||||
.cell {
|
||||
height: fit-content;
|
||||
/*max-height:64px;
|
||||
min-height:32px;*/
|
||||
line-height: 20px;
|
||||
|
||||
.reference-tag__show {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.reference-tag__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.reference-tag {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
@@ -737,19 +723,27 @@
|
||||
border-radius: 12px;
|
||||
margin-bottom: 8px;
|
||||
width: fit-content;
|
||||
min-width:fit-content;
|
||||
min-width: fit-content;
|
||||
}
|
||||
.reference-tag:last-of-type {
|
||||
margin-bottom:0px !important;
|
||||
margin-right:6px;
|
||||
margin-bottom: 0 !important;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.reference-more {
|
||||
display:flex;
|
||||
flex-direction:column-reverse;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-switch {
|
||||
height: auto;
|
||||
--el-switch-on-color: #38ACD2;
|
||||
--el-switch-off-color: #C0CEDB;
|
||||
}
|
||||
.el-checkbox__input {
|
||||
--el-checkbox-checked-bg-color: #38ACD2;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-mode__card {
|
||||
@@ -958,10 +952,15 @@
|
||||
}
|
||||
}
|
||||
.knowledge-pagination {
|
||||
height:56px;
|
||||
width:100%;
|
||||
position: relative;
|
||||
height: 56px;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.07);
|
||||
|
||||
.el-pagination {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
|
||||
/*@font-face { // 由于主题嵌套原因，原ele的icon图标字体加载会出错，需重写
|
||||
font-family: 'element-icons';
|
||||
src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), /* chrome, firefox */
|
||||
url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||
src: url('~@/assets/css/themes/src/fonts/element-icons.woff') format('woff'), !* chrome, firefox *!
|
||||
url('~@/assets/css/themes/src/fonts/element-icons.ttf') format('truetype'); !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!
|
||||
font-weight: normal;
|
||||
font-display: auto;
|
||||
font-style: normal;
|
||||
}
|
||||
$--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语句出错
|
||||
$--font-path: '~@/assets/css/themes/src/fonts'; // 避免ele原字体加载语句出错*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'NotoSansSChineseRegular';
|
||||
|
||||
@@ -100,28 +100,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.HintInfo {
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
ul {
|
||||
min-width: 300px;
|
||||
height:auto;
|
||||
width: fit-content;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.el-dropdown-menu__item{
|
||||
text-indent: 1em;
|
||||
font-size: 12px !important;
|
||||
font-family: NotoSansSChineseRegular;
|
||||
color: #575757;
|
||||
font-weight: 400;
|
||||
}
|
||||
.hint-clear{
|
||||
text-indent: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="pop-custom" v-ele-click-outside="esc">
|
||||
<transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
|
||||
<transition-group name="dragTabs" class="drag-list" tag="ul" ref="tabs">
|
||||
<li v-for="(item, index) in custom"
|
||||
:key="item.label"
|
||||
class="list-item"
|
||||
|
||||
@@ -1,165 +0,0 @@
|
||||
<template>
|
||||
<el-table
|
||||
id="chartTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
border
|
||||
empty-text=" "
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="item in customTableTitles"
|
||||
:key="item.prop"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
:min-width="`${item.minWidth}`"
|
||||
:prop="item.prop"
|
||||
:resizable="true"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
:sortable="item.sortable"
|
||||
:width="`${item.width}`"
|
||||
class="data-column"
|
||||
>
|
||||
<template #header>
|
||||
<span class="data-column__span">{{item.label}}</span>
|
||||
<div class="col-resize-area"></div>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<template v-if="item.prop === 'name'">
|
||||
<template v-if="scope.row.i18n">
|
||||
<span>{{$t(scope.row.i18n)}}</span>
|
||||
</template>
|
||||
<template v-else-if="scope.row.name">
|
||||
<span>{{scope.row.name}}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>-</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'buildIn'">
|
||||
<template v-if="scope.row[item.prop]==1">
|
||||
{{$t('config.chart.buildIn.yes')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==0">
|
||||
{{$t('config.chart.buildIn.no')}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{scope.row[item.prop]}}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'panelId'">
|
||||
<template v-if="scope.row[item.prop]==panelTypeAndRouteMapping.trafficSummary">
|
||||
{{$t('trafficSummary.trafficSummary')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.networkAppPerformance">
|
||||
{{$t('networkAppPerformance.networkAppPerformance')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.dnsServiceInsights">
|
||||
{{$t('dnsServiceInsights.dnsServiceInsights')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.ipEntityDetail">
|
||||
{{$t('entities.ipEntityDetail')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.domainEntityDetail">
|
||||
{{$t('entities.domainEntityDetail')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.appEntityDetail">
|
||||
{{$t('entities.appEntityDetail')}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{scope.row[item.prop]}}
|
||||
</template>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-slot:empty >
|
||||
<div class="table-no-data" v-if="isNoData">
|
||||
<div class="table-no-data__title">{{ $t('npm.noData') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import table from '@/mixins/table'
|
||||
import { panelTypeAndRouteMapping } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'chartTable',
|
||||
mixins: [table],
|
||||
props: {
|
||||
isNoData: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
panelTypeAndRouteMapping: panelTypeAndRouteMapping,
|
||||
tableTitle: [ // 原table列
|
||||
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 110,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('config.chart.name'),
|
||||
prop: 'name',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.params'),
|
||||
prop: 'params',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.panel'),
|
||||
prop: 'panelId',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.i18n'),
|
||||
prop: 'i18n',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.type'),
|
||||
prop: 'type',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.x'),
|
||||
prop: 'x',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.y'),
|
||||
prop: 'y',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.w'),
|
||||
prop: 'w',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.h'),
|
||||
prop: 'h',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.buildIn'),
|
||||
prop: 'buildIn',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.remark'),
|
||||
prop: 'remark',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,198 +0,0 @@
|
||||
<template>
|
||||
<el-table
|
||||
class="galaxy-proxy-table"
|
||||
id="userTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
tooltip-effect="light"
|
||||
border
|
||||
empty-text=" "
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="item in customTableTitles"
|
||||
:key="item.prop"
|
||||
:fixed="item.fixed"
|
||||
:label="item.label"
|
||||
:min-width="`${item.minWidth}`"
|
||||
:prop="item.prop"
|
||||
:resizable="true"
|
||||
:sort-orders="['ascending', 'descending']"
|
||||
:sortable="item.sortable"
|
||||
:width="`${item.width}`"
|
||||
:show-overflow-tooltip="['targetParam', 'targetHeader', 'preHandle', 'postHandle'].indexOf(item.prop) === -1"
|
||||
>
|
||||
<template #header>
|
||||
<span class="data-column__span">{{item.label}}</span>
|
||||
<div class="col-resize-area"></div>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<template v-if="item.prop === 'targetParam' || item.prop === 'targetHeader'">
|
||||
<template v-if="scope.row[item.prop]">
|
||||
<el-popover
|
||||
width="250px"
|
||||
popper-class="js-code-highlight"
|
||||
placement="left"
|
||||
trigger="hover"
|
||||
>
|
||||
<template #reference>
|
||||
<span style="color: #41ABFD">{...}</span>
|
||||
</template>
|
||||
<div class="highlight-box">
|
||||
<span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><el-icon><CopyDocument /></el-icon></span>
|
||||
<highlightjs
|
||||
language="json"
|
||||
:code="scope.row[item.prop]"
|
||||
/>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'preHandle' || item.prop === 'postHandle'">
|
||||
<template v-if="scope.row[item.prop]">
|
||||
<el-popover
|
||||
width="250px"
|
||||
popper-class="js-code-highlight"
|
||||
placement="left"
|
||||
trigger="hover"
|
||||
>
|
||||
<template #reference>
|
||||
<span style="color: #41ABFD">{...}</span>
|
||||
</template>
|
||||
<div class="highlight-box">
|
||||
<span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><el-icon><CopyDocument /></el-icon></span>
|
||||
<highlightjs
|
||||
language="js"
|
||||
:code="scope.row[item.prop]"
|
||||
/>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
:width="operationWidth"
|
||||
fixed="right">
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div class="table-operation-items">
|
||||
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="cn-icon cn-icon-more-arrow-down"></i>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu >
|
||||
<el-dropdown-item :command="['copy', scope.row]"><i class="cn-icon cn-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item :command="['debug', scope.row]"><i class="cn-icon cn-icon-debug"></i><span class="operation-dropdown-text">{{$t('overall.debug')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-slot:empty >
|
||||
<div class="table-no-data" v-if="isNoData">
|
||||
<div class="table-no-data__title">{{ $t('npm.noData') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import table from '@/mixins/table'
|
||||
import { copyValue } from '@/utils/tools'
|
||||
|
||||
export default {
|
||||
name: 'galaxyProxyTable',
|
||||
mixins: [table],
|
||||
props: {
|
||||
isNoData: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [ // 原始table列
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 100,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('overall.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
sortable: 'custom',
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('overall.path'),
|
||||
prop: 'path',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('overall.method'),
|
||||
prop: 'method',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('overall.version'),
|
||||
prop: 'version',
|
||||
show: true,
|
||||
minWidth: 150
|
||||
}, {
|
||||
label: this.$t('galaxyProxy.targetUrl'),
|
||||
prop: 'targetUrl',
|
||||
show: true,
|
||||
width: 250
|
||||
}, {
|
||||
label: this.$t('galaxyProxy.targetParam'),
|
||||
prop: 'targetParam',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('galaxyProxy.targetHeader'),
|
||||
prop: 'targetHeader',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: 'Pre handle',
|
||||
prop: 'preHandle',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: 'Post handle',
|
||||
prop: 'postHandle',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('overall.remark'),
|
||||
prop: 'remark',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
return {
|
||||
copyValue
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -3,7 +3,7 @@
|
||||
id="i18nTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
border
|
||||
tooltip-effect="light"
|
||||
empty-text=" "
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
|
||||
@@ -4,10 +4,7 @@
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
tooltip-effect="light"
|
||||
:height="height"
|
||||
border
|
||||
empty-text=" "
|
||||
class="no-operation"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -3,8 +3,7 @@
|
||||
id="roleTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
tooltip-effect="light"
|
||||
empty-text=" "
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
|
||||
@@ -3,9 +3,8 @@
|
||||
id="userTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
tooltip-effect="light"
|
||||
empty-text=" "
|
||||
border
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
|
||||
@@ -3,8 +3,6 @@
|
||||
id="knowledgeBaseTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
border
|
||||
empty-text=" "
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
|
||||
@@ -3,9 +3,7 @@
|
||||
id="pluginTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
empty-text=" "
|
||||
border
|
||||
class="plugin"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
|
||||
@@ -92,7 +92,7 @@ export const operationLogStateMapping = {
|
||||
|
||||
export const position = {
|
||||
tableHeight: {
|
||||
normal: 'calc(100% - 48px)' // 常规高度，特例在下方定义
|
||||
normal: 'calc(100% - 58px)' // 常规高度，特例在下方定义
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
@orderBy="tableDataSort"
|
||||
@reload="getTableData"
|
||||
@selectionChange="selectionChange"
|
||||
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
|
||||
@search="search"
|
||||
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template #pagination>
|
||||
|
||||
@@ -36,7 +36,6 @@
|
||||
:api="url"
|
||||
:isNoData="isNoData"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="mainTableHeight"
|
||||
:table-data="tableData"
|
||||
@delete="del"
|
||||
@edit="edit"
|
||||
|
||||
@@ -21,7 +21,6 @@
|
||||
:id="`tabTable_${tabIndex}`"
|
||||
:ref="`dataTable_${tab.prop}`"
|
||||
:data="tableData.slice(0,showRecordNum)"
|
||||
border
|
||||
:cell-style="tableCellStyle"
|
||||
:header-cell-style="tableHeaderCellStyle"
|
||||
:row-class-name="rowClassName"
|
||||
@@ -249,7 +248,7 @@
|
||||
type="card"
|
||||
>
|
||||
<el-tab-pane :label="$t('network.tabs')" name="tabs" width="50%" v-if="showCustomizeTabs" >
|
||||
<transition-group name="dragTabs" class="list" tag="ul" ref="tabs">
|
||||
<transition-group name="dragTabs" class="drag-list" tag="ul" ref="tabs">
|
||||
<li v-for="(item, index) in list"
|
||||
:key="item.label"
|
||||
class="list-item"
|
||||
@@ -265,7 +264,7 @@
|
||||
</transition-group>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="tableType==='networkOverview'?$t('network.direction'):$t('network.metrics')" name="metrics" width="50%" >
|
||||
<transition-group name="dragMetric" class="list" tag="ul" ref="metric">
|
||||
<transition-group name="dragMetric" class="drag-list" tag="ul" ref="metric">
|
||||
<template v-for="(item, index) in customTableTitles" :key="item.label">
|
||||
<li v-if="index>0"
|
||||
class="list-item"
|
||||
|
||||
@@ -44,7 +44,6 @@
|
||||
<loading :loading="loading"></loading>
|
||||
<knowledge-base-table-for-row
|
||||
ref="dataTable"
|
||||
height="100%"
|
||||
:api="url"
|
||||
:isNoData="isNoData"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
|
||||
Reference in New Issue
Block a user