forked from github/dataease
feat: 模版管理 优化
This commit is contained in:
dataeaseShu
parent
2d1d0ad774
commit
0934a01275
@ -49,7 +49,6 @@ export default {
|
||||
} else {
|
||||
res = await window.SyncComponentCache[this.url]
|
||||
}
|
||||
|
||||
if (res) {
|
||||
const Fn = Function
|
||||
const dynamicCode = res.data || res
|
||||
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
return backPath || backName || backTo
|
||||
},
|
||||
needInnerPadding() {
|
||||
return ['system-dept', 'system-dept-form', 'system-auth'].includes(this.$route.name)
|
||||
return ['system-dept', 'system-dept-form', 'system-auth', 'sys-appearance', 'system-param', 'system-template'].includes(this.$route.name)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -77,6 +77,7 @@ export default {
|
||||
.layout-inner-padding {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
355
frontend/src/components/deCustomCm/deBtn.vue
Normal file
355
frontend/src/components/deCustomCm/deBtn.vue
Normal file
@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<button
|
||||
class="de-button"
|
||||
@click="handleClick"
|
||||
:disabled="buttonDisabled || loading"
|
||||
:class="[
|
||||
type ? 'de-button--' + type : '',
|
||||
{
|
||||
'is-de-plain': plain,
|
||||
'is-de-secondary': secondary,
|
||||
'is-de-disabled': buttonDisabled,
|
||||
'is-de-loading': loading,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<!-- <svg
|
||||
class="de-circular"
|
||||
v-if="loading"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3.04575 3.00511C3.11074 2.94007 3.1879 2.88847 3.27283 2.85326C3.35776 2.81804 3.4488 2.7999 3.54074 2.79987C3.63269 2.79983 3.72374 2.81791 3.80869 2.85306C3.89365 2.88822 3.97085 2.93976 4.03589 3.00475C4.10093 3.06974 4.15253 3.14691 4.18774 3.23184C4.22296 3.31677 4.2411 3.40781 4.24113 3.49975C4.24117 3.5917 4.22309 3.68275 4.18794 3.7677C4.15278 3.85266 4.10124 3.92986 4.03625 3.9949C3.64356 4.38689 3.33222 4.85263 3.12013 5.36535C2.90804 5.87807 2.79938 6.42765 2.80039 6.9825C2.80039 9.31246 4.68128 11.2 7.00039 11.2C9.3195 11.2 11.2004 9.31246 11.2004 6.9825C11.2004 6.79685 11.2741 6.6188 11.4054 6.48753C11.5367 6.35625 11.7147 6.2825 11.9004 6.2825C12.086 6.2825 12.2641 6.35625 12.3954 6.48753C12.5266 6.6188 12.6004 6.79685 12.6004 6.9825C12.6004 10.0846 10.0937 12.6 7.00039 12.6C3.90709 12.6 1.40039 10.0846 1.40039 6.9825C1.40039 5.4705 1.99959 4.05195 3.04575 3.00511Z"
|
||||
fill="#3370ff"
|
||||
/>
|
||||
</svg> -->
|
||||
<svg v-if="loading" viewBox="25 25 50 50" class="de-circular">
|
||||
<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
|
||||
</svg>
|
||||
<i :class="icon" v-if="icon && !loading"></i>
|
||||
<span :class="[{'de-btn-mar5': icon || loading }]" v-if="$slots.default"><slot></slot></span>
|
||||
</button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "DeButton",
|
||||
inject: {
|
||||
elForm: {
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "default",
|
||||
},
|
||||
size: String,
|
||||
icon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
plain: Boolean,
|
||||
secondary: Boolean,
|
||||
},
|
||||
|
||||
computed: {
|
||||
buttonDisabled() {
|
||||
return this.$options.propsData.hasOwnProperty("disabled")
|
||||
? this.disabled
|
||||
: (this.elForm || {}).disabled;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(evt) {
|
||||
this.$emit("click", evt);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
$namespace: "de";
|
||||
$state-prefix: "is-de-";
|
||||
$modifier-separator: "--";
|
||||
@mixin b($block) {
|
||||
$B: $namespace + "-" + $block !global;
|
||||
|
||||
.#{$B} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin when($state) {
|
||||
@at-root {
|
||||
&.#{$state-prefix + $state} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin m($modifier) {
|
||||
$selector: &;
|
||||
$currentSelector: "";
|
||||
@each $unit in $modifier {
|
||||
$currentSelector: #{$currentSelector +
|
||||
& +
|
||||
$modifier-separator +
|
||||
$unit +
|
||||
","};
|
||||
}
|
||||
|
||||
@at-root {
|
||||
#{$currentSelector} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-variant($color, $background-color, $hover, $active, $loading) {
|
||||
color: $color;
|
||||
background-color: $background-color;
|
||||
border-color: $background-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $hover;
|
||||
border-color: $hover;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $active;
|
||||
border-color: $active;
|
||||
color: $color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.is-de-loading {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $color;
|
||||
background-color: $loading;
|
||||
border-color: $loading;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-de-disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $color;
|
||||
background-color: mix(#fff, #bbbfc4, 40%);
|
||||
border-color: mix(#fff, #bbbfc4, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(button) {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
height: 32px;
|
||||
transition: 0.1s;
|
||||
min-width: 80px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0 16px;
|
||||
|
||||
.de-circular {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
animation: loading-rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.path {
|
||||
animation: loading-dash 1.5s ease-in-out infinite;
|
||||
stroke-dasharray: 90, 150;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-width: 3;
|
||||
stroke: #3370ff;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.de-btn-mar5 {
|
||||
margin-left: 5.17px;
|
||||
}
|
||||
|
||||
@include when(secondary) {
|
||||
color: var(--deTextPrimary, #1F2329);
|
||||
background-color: var(--deWhite, #ffffff);
|
||||
border: 1px solid;
|
||||
border-color: var(--deComponentStrokeColor, #BBBFC4);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--deComBorderColorHover, #ffffff);
|
||||
border-color: var(--deComponentStrokeColor, #BBBFC4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--deComBorderColorActive, #ffffff);
|
||||
border-color: var(--deComponentStrokeColor, #BBBFC4);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.is-de-loading {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--deTextPlaceholder, #3370FF);
|
||||
background-color: var(--deWhite, #ffffff);
|
||||
border-color: var(--deComponentStrokeColor, #BBBFC4);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-de-disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #8f959e;
|
||||
background-color: #ffffff;
|
||||
border-color: #8f959e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include when(plain) {
|
||||
color: var(--primary, #3370FF);
|
||||
background-color: var(--deWhite, #ffffff);
|
||||
border: 1px solid;
|
||||
border-color: var(--primary, #3370FF);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--deWhiteHover, #ffffff);
|
||||
border-color: var(--primary, #3370FF);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--deWhiteActive, #ffffff);
|
||||
border-color: var(--primary, #3370FF);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.is-de-loading {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--primary, #3370FF);
|
||||
background-color: var(--deWhite, #ffffff);
|
||||
border-color: var(--primary, #3370FF);
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-de-disabled {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #8f959e;
|
||||
background-color: #ffffff;
|
||||
border-color: #8f959e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include when(disabled) {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: not-allowed;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// @include when(loading) {
|
||||
// position: relative;
|
||||
// pointer-events: none;
|
||||
|
||||
// &:before {
|
||||
// pointer-events: none;
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: -1px;
|
||||
// top: -1px;
|
||||
// right: -1px;
|
||||
// bottom: -1px;
|
||||
// border-radius: inherit;
|
||||
// background-color: rgba(255,255,255,.35);
|
||||
// }
|
||||
// }
|
||||
@include m(primary) {
|
||||
@include button-variant(#fff, var(--primary, #3370ff), var(--primaryHover, #3370ff), var(--primaryActive, #3370ff), var(--primaryloading, #3370ff));
|
||||
}
|
||||
// @include m(success) {
|
||||
// @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
|
||||
// }
|
||||
// @include m(warning) {
|
||||
// @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
|
||||
// }
|
||||
@include m(danger) {
|
||||
@include button-variant(#fff, var(--deDanger, #f54a45), var(--deDangerHover, #f54a45), var(--deDangerActive, #f54a45), var(--deDangerloading, #f54a45));
|
||||
}
|
||||
// @include m(info) {
|
||||
// @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
|
||||
// }
|
||||
// @include m(text) {
|
||||
// border-color: transparent;
|
||||
// color: $--color-primary;
|
||||
// background: transparent;
|
||||
// padding-left: 0;
|
||||
// padding-right: 0;
|
||||
|
||||
// &:hover,
|
||||
// &:focus {
|
||||
// color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
|
||||
// border-color: transparent;
|
||||
// background-color: transparent;
|
||||
// }
|
||||
// &:active {
|
||||
// color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
|
||||
// border-color: transparent;
|
||||
// background-color: transparent;
|
||||
// }
|
||||
|
||||
// &.is-disabled,
|
||||
// &.is-disabled:hover,
|
||||
// &.is-disabled:focus {
|
||||
// border-color: transparent;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
40
frontend/src/components/msgCfm/index.js
Normal file
40
frontend/src/components/msgCfm/index.js
Normal file
@ -0,0 +1,40 @@
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
openMessageSuccess(text, type) {
|
||||
const h = this.$createElement;
|
||||
const iconClass = `el-icon-${ type || 'success'}`;
|
||||
const customClass = `de-message-${ type || 'success'} de-message`;
|
||||
this.$message({
|
||||
message: h("p", null, [h("span", null, this.$t(text))]),
|
||||
iconClass,
|
||||
customClass,
|
||||
});
|
||||
},
|
||||
handlerConfirm(options) {
|
||||
let { title, content, type = 'danger', cb, confirmButtonText = this.$t('commons.delete'), showCancelButton = true, cancelButtonText = this.$t("commons.cancel") } = options;
|
||||
let text = content ? `<span>${ this.$t(title) }</span><br><span class="use-html">${ this.$t(content) }</span>` : this.$t(title);
|
||||
const dangerouslyUseHTMLString = Boolean(content);
|
||||
let customClass = `de-confirm de-confirm-fail ${ dangerouslyUseHTMLString && 'de-use-html'}`
|
||||
let confirmButtonClass = `de-confirm-${type}-btn de-confirm-btn`
|
||||
this.$confirm(
|
||||
text,
|
||||
"",
|
||||
{
|
||||
confirmButtonText,
|
||||
cancelButtonText,
|
||||
showCancelButton,
|
||||
cancelButtonClass: "de-confirm-btn de-confirm-plain-cancel",
|
||||
dangerouslyUseHTMLString,
|
||||
confirmButtonClass,
|
||||
customClass,
|
||||
iconClass: "el-icon-warning",
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
cb();
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -716,7 +716,82 @@ export default {
|
||||
engine_mode_setting: 'Engine Setting',
|
||||
kettle_setting: 'Kettle Setting',
|
||||
cas_selected_warn: 'Selecting CAS will cause you to login again',
|
||||
cas_reset: 'CAS switches back to the default login mode to access API:'
|
||||
cas_reset: 'CAS switches back to the default login mode to access API:',
|
||||
main_color: 'Main color',
|
||||
success_color: 'Success color',
|
||||
warning_color: 'Warning color:',
|
||||
wrong_color: 'Wrong color',
|
||||
main_text_color: 'Main text color',
|
||||
secondary_font_color: 'Secondary font color',
|
||||
prompt_font_color: 'Prompt font color',
|
||||
disable_font_color: 'Disable font color',
|
||||
component_stroke_color: 'Component stroke color',
|
||||
card_stroke_color: 'Card stroke color',
|
||||
basic_white: 'Basic white',
|
||||
page_background_color: 'Page background color',
|
||||
disable_background_color: 'Input box: disable background color',
|
||||
basic_black: 'Basic black',
|
||||
label_color: 'Label color:',
|
||||
system_theme: 'System theme',
|
||||
custom_theme: 'Custom theme',
|
||||
color_settings: 'Color settings',
|
||||
add_theme: 'Add theme',
|
||||
subject_based: 'Subject based',
|
||||
the_subject_name: 'Please enter the subject name',
|
||||
name_already_exists: 'The subject name already exists',
|
||||
successfully_and_apply: 'Save successfully and apply',
|
||||
sure_to_exit: 'The information you filled in has not been saved. Are you sure to exit?',
|
||||
copy_theme: 'Copy theme',
|
||||
advanced_configuration: 'Advanced configuration',
|
||||
no_custom_theme: 'No custom theme',
|
||||
recommended_size: 'Recommended size:',
|
||||
support: 'support',
|
||||
no_more_than: 'Size no more than',
|
||||
request_timeout: 'Request timeout',
|
||||
message_retention_time: 'Message retention time',
|
||||
test_mail_recipient: 'Used only as a test mail recipient',
|
||||
to_enable_tsl: 'If the SMTP port is 587, you usually need to enable TSL',
|
||||
to_enable_ssl: 'If the SMTP port is 465, you usually need to enable SSL',
|
||||
added_successfully: 'Added successfully',
|
||||
text_link_etc: 'Applicable scenarios: call to action, selected status, information highlight, general prompt information, text link, etc',
|
||||
prompt_and_icon: 'Applicable scenario: success status prompt and Icon',
|
||||
prompt_and_icon_danger: 'Applicable scenario: warning status prompt and Icon',
|
||||
icon_danger_button: 'Applicable scenario: error status prompt and icon, danger button',
|
||||
first_level_icon: 'Applicable scenario: first level title, first level text, important information display, first level Icon',
|
||||
copy_secondary_icon: 'Applicable scenario: secondary title, secondary copy, secondary Icon',
|
||||
radio_checkbox_unchecked: 'Applicable scenario: input box guide, auxiliary copy, prompt copy, three-level icon, radio, checkbox unchecked',
|
||||
button_background_color: 'Applicable scenario: disable copy, disable icon, disable button background color',
|
||||
background_header_background: 'Applicable scenario: page background, header background',
|
||||
scenario_component_stroking: 'Applicable scenario: component stroking',
|
||||
main_background: 'Main background',
|
||||
content_background: 'Content background',
|
||||
select_font: 'Select font',
|
||||
no_font_selected: 'No font selected',
|
||||
head_background: 'Head background',
|
||||
head_font: 'Head font',
|
||||
menu_floating_background: 'Menu floating background',
|
||||
menu_selection_background: 'Menu selection background',
|
||||
left_menu_background: 'Left menu background',
|
||||
left_menu_font: 'Left menu font',
|
||||
table_background: 'Table background',
|
||||
table_font: 'Table font',
|
||||
table_borders: 'Table borders',
|
||||
subject_name: 'Subject name',
|
||||
template_name: 'Template name',
|
||||
search_keywords: 'Search keywords:',
|
||||
delete_this_topic: 'Are you sure to delete this topic?',
|
||||
network_error: 'network error',
|
||||
to_overwrite_them: 'There are templates with the same name in the current classification. Do you want to overwrite them?',
|
||||
import_succeeded: 'Import succeeded',
|
||||
name_already_exists_type: 'Classification name already exists',
|
||||
rename_succeeded: 'Rename succeeded',
|
||||
the_same_category: 'The template name already exists under the same category',
|
||||
delete_this_template: 'Are you sure to delete this template?',
|
||||
also_be_deleted: 'After deletion, all templates in this category will also be deleted.',
|
||||
delete_this_category: 'Are you sure to delete this category?',
|
||||
edit_template: 'Edit template',
|
||||
edit_classification: 'Edit classification',
|
||||
classification_name: 'Classification Name:'
|
||||
},
|
||||
chart: {
|
||||
rich_text_view: 'Rich Text View',
|
||||
|
||||
@ -717,7 +717,82 @@ export default {
|
||||
engine_mode_setting: '引擎設置',
|
||||
kettle_setting: 'Kettle 設置',
|
||||
cas_selected_warn: '選擇CAS方式保存後會註銷當前回話，重新登錄',
|
||||
cas_reset: 'CAS切換回默認登錄方式訪問API：'
|
||||
cas_reset: 'CAS切換回默認登錄方式訪問API：',
|
||||
main_color: '主色',
|
||||
success_color: '成功顏色',
|
||||
warning_color: '警示顏色',
|
||||
wrong_color: '錯誤顏色',
|
||||
main_text_color: '主要文字顏色',
|
||||
secondary_font_color: '二級字體顏色',
|
||||
prompt_font_color: '提示字體顏色',
|
||||
disable_font_color: '禁用字體顏色',
|
||||
component_stroke_color: '組件描邊顏色',
|
||||
card_stroke_color: '卡片描邊顏色',
|
||||
basic_white: '基礎白色',
|
||||
page_background_color: '頁面背景色',
|
||||
disable_background_color: '輸入框禁用背景色',
|
||||
basic_black: '基礎黑色',
|
||||
label_color: '標籤顏色',
|
||||
system_theme: '系統主題',
|
||||
custom_theme: '自定義主題',
|
||||
color_settings: '配色設定',
|
||||
add_theme: '添加主題',
|
||||
subject_based: '基於主題',
|
||||
the_subject_name: '請輸入主題名稱',
|
||||
name_already_exists: '主題名稱已存在',
|
||||
successfully_and_apply: '保存成功並應用',
|
||||
sure_to_exit: '你填寫的資訊未保存，確認退出嗎？',
|
||||
copy_theme: '複製主題',
|
||||
advanced_configuration: '高級配寘',
|
||||
no_custom_theme: '暫無自定義主題',
|
||||
recommended_size: '建議尺寸',
|
||||
support: '支持',
|
||||
no_more_than: '大小不超過',
|
||||
request_timeout: '請求超時時間',
|
||||
message_retention_time: '消息保留時間',
|
||||
test_mail_recipient: '僅用來作為測試郵件收件人',
|
||||
to_enable_tsl: '如果SMTP埠是587，通常需要啟用TSL',
|
||||
to_enable_ssl: '如果SMTP埠是465，通常需要啟用SSL',
|
||||
added_successfully: '添加成功',
|
||||
text_link_etc: '適用場景：行動號召、選中態、資訊高亮、常規提示資訊、文字連結等',
|
||||
prompt_and_icon: '適用場景：成功狀態提示及圖標',
|
||||
prompt_and_icon_danger: '適用場景：警示狀態提示及圖標',
|
||||
icon_danger_button: '適用場景：錯誤狀態提示及圖標、危險按鈕',
|
||||
first_level_icon: '適用場景：一級標題、一級正文、重要資訊展示、一級圖標',
|
||||
copy_secondary_icon: '適用場景：二級標題、二級文案、二級圖標',
|
||||
radio_checkbox_unchecked: '適用場景：輸入框引導語、輔助文案、提示文案、三級圖標、radio、checkbox未選中態',
|
||||
button_background_color: '適用場景：禁用文案、禁用圖標、禁用按鈕背景色',
|
||||
background_header_background: '適用場景：頁面背景、表頭背景',
|
||||
scenario_component_stroking: '適用場景：組件描邊',
|
||||
main_background: '主背景',
|
||||
content_background: '內容背景',
|
||||
select_font: '選中字體',
|
||||
no_font_selected: '未選中字體',
|
||||
head_background: '頭部背景',
|
||||
head_font: '頭部字體',
|
||||
menu_floating_background: '選單懸浮背景',
|
||||
menu_selection_background: '選單選中背景',
|
||||
left_menu_background: '左側選單背景',
|
||||
left_menu_font: '左側選單字體',
|
||||
table_background: '表格背景',
|
||||
table_font: '表格字體',
|
||||
table_borders: '表格邊框',
|
||||
subject_name: '主題名稱',
|
||||
template_name: '模版名稱',
|
||||
search_keywords: '蒐索關鍵字',
|
||||
delete_this_topic: '確定删除該主題嗎？',
|
||||
network_error: '網絡錯誤',
|
||||
to_overwrite_them: '當前分類存在相同名稱模版，是否覆蓋？',
|
||||
import_succeeded: '導入成功',
|
||||
name_already_exists_type: '分類名稱已存在',
|
||||
rename_succeeded: '重命名成功',
|
||||
the_same_category: '同一分類下，該模版名稱已存在',
|
||||
delete_this_template: '確定删除該模版嗎？',
|
||||
also_be_deleted: '删除後，該分類中所有的模版也將被删除。',
|
||||
delete_this_category: '確定删除該分類嗎？',
|
||||
edit_template: '編輯模版',
|
||||
edit_classification: '編輯分類',
|
||||
classification_name: '分類名稱'
|
||||
},
|
||||
chart: {
|
||||
rich_text_view: '富文本视图',
|
||||
|
||||
@ -693,7 +693,7 @@ export default {
|
||||
edite_organization: '编辑组织'
|
||||
},
|
||||
system_parameter_setting: {
|
||||
mailbox_service_settings: '邮件设置',
|
||||
mailbox_service_settings: '邮件设置',
|
||||
test_connection: '测试连接',
|
||||
SMTP_host: 'SMTP主机',
|
||||
basic_setting: '基础设置',
|
||||
@ -718,7 +718,82 @@ export default {
|
||||
engine_mode_setting: '引擎设置',
|
||||
kettle_setting: 'Kettle 设置',
|
||||
cas_selected_warn: '选择CAS方式保存后会注销当前回话，重新登录',
|
||||
cas_reset: 'CAS切换回默认登录方式访问API：'
|
||||
cas_reset: 'CAS切换回默认登录方式访问API：',
|
||||
main_color: '主色',
|
||||
success_color: '成功颜色',
|
||||
warning_color: '警示颜色',
|
||||
wrong_color: '错误颜色',
|
||||
main_text_color: '主要文字颜色',
|
||||
secondary_font_color: '二级字体颜色',
|
||||
prompt_font_color: '提示字体颜色',
|
||||
disable_font_color: '禁用字体颜色',
|
||||
component_stroke_color: '组件描边颜色',
|
||||
card_stroke_color: '卡片描边颜色',
|
||||
basic_white: '基础白色',
|
||||
page_background_color: '页面背景色',
|
||||
disable_background_color: '输入框禁用背景色',
|
||||
basic_black: '基础黑色',
|
||||
label_color: '标签颜色',
|
||||
system_theme: '系统主题',
|
||||
custom_theme: '自定义主题',
|
||||
color_settings: '配色设置',
|
||||
add_theme: '添加主题',
|
||||
subject_based: '基于主题',
|
||||
the_subject_name: '请输入主题名称',
|
||||
name_already_exists: '主题名称已存在',
|
||||
successfully_and_apply: '保存成功并应用',
|
||||
sure_to_exit: '你填写的信息未保存，确认退出吗？',
|
||||
copy_theme: '复制主题',
|
||||
advanced_configuration: '高级配置',
|
||||
no_custom_theme: '暂无自定义主题',
|
||||
recommended_size: '建议尺寸 ',
|
||||
support: '支持',
|
||||
no_more_than: '大小不超过',
|
||||
request_timeout: '请求超时时间',
|
||||
message_retention_time: '消息保留时间',
|
||||
test_mail_recipient: '仅用来作为测试邮件收件人',
|
||||
to_enable_tsl: '如果SMTP端口是587，通常需要启用TSL',
|
||||
to_enable_ssl: '如果SMTP端口是465，通常需要启用SSL',
|
||||
added_successfully: '添加成功',
|
||||
text_link_etc: '适用场景：行动号召、选中态、信息高亮、常规提示信息、文字链接等',
|
||||
prompt_and_icon: '适用场景：成功状态提示及图标',
|
||||
prompt_and_icon_danger: '适用场景：警示状态提示及图标',
|
||||
icon_danger_button: '适用场景：错误状态提示及图标、危险按钮',
|
||||
first_level_icon: '适用场景：一级标题、一级正文、重要信息展示、一级图标',
|
||||
copy_secondary_icon: '适用场景：二级标题、二级文案、二级图标',
|
||||
radio_checkbox_unchecked: '适用场景：输入框引导语、辅助文案、提示文案、三级图标、radio、checkbox未选中态',
|
||||
button_background_color: '适用场景：禁用文案、禁用图标、禁用按钮背景色',
|
||||
scenario_component_stroking: '适用场景：组件描边',
|
||||
background_header_background: '适用场景：页面背景、表头背景',
|
||||
main_background: '主背景',
|
||||
content_background: '内容背景',
|
||||
select_font: '选中字体',
|
||||
no_font_selected: '未选中字体',
|
||||
head_background: '头部背景',
|
||||
head_font: '头部字体',
|
||||
menu_floating_background: '菜单悬浮背景',
|
||||
menu_selection_background: '菜单选中背景',
|
||||
left_menu_background: '左侧菜单背景',
|
||||
left_menu_font: '左侧菜单字体',
|
||||
table_background: '表格背景',
|
||||
table_font: '表格字体',
|
||||
table_borders: '表格边框',
|
||||
subject_name: '主题名称',
|
||||
template_name: '模版名称',
|
||||
search_keywords: '搜索关键词',
|
||||
delete_this_topic: '确定删除该主题吗？',
|
||||
network_error: '网络错误',
|
||||
to_overwrite_them: '当前分类存在相同名称模版，是否覆盖？',
|
||||
import_succeeded: '导入成功',
|
||||
name_already_exists_type: '分类名称已存在',
|
||||
rename_succeeded: '重命名成功',
|
||||
the_same_category: '同一分类下，该模版名称已存在',
|
||||
delete_this_template: '确定删除该模版吗？',
|
||||
also_be_deleted: '删除后，该分类中所有的模版也将被删除。',
|
||||
delete_this_category: '确定删除该分类吗？',
|
||||
edit_template: '编辑模版',
|
||||
edit_classification: '编辑分类',
|
||||
classification_name: '分类名称'
|
||||
},
|
||||
chart: {
|
||||
rich_text_view: '富文本视图',
|
||||
@ -1914,7 +1989,7 @@ export default {
|
||||
title: '系统名称',
|
||||
advice_size: '建议图片大小',
|
||||
theme: '主题颜色',
|
||||
|
||||
favicon: '网站图标',
|
||||
topMenuColor: '头部背景',
|
||||
topMenuActiveColor: '头部选中背景',
|
||||
|
||||
|
||||
@ -26,6 +26,7 @@ import DeViewSelect from '@/components/DeViewSelect'
|
||||
import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
|
||||
import TitleRemark from '@/views/chart/view/TitleRemark'
|
||||
import '@/components/canvas/custom-component' // 注册自定义组件
|
||||
import deBtn from '@/components/deCustomCm/deBtn.vue'
|
||||
|
||||
import '@/utils/DateUtil'
|
||||
import draggable from 'vuedraggable'
|
||||
@ -92,6 +93,8 @@ Vue.component('DeComplexSelect', DeComplexSelect)
|
||||
Vue.component('DeViewSelect', DeViewSelect)
|
||||
Vue.component('RemarkEditor', RemarkEditor)
|
||||
Vue.component('TitleRemark', TitleRemark)
|
||||
Vue.component('deBtn', deBtn)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
import vueToPdf from 'vue-to-pdf'
|
||||
|
||||
@ -854,7 +854,7 @@ div:focus {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
.el-checkbox__input.is-checked:not(.is-disabled) + .el-checkbox__label {
|
||||
color: #1F2329 !important;
|
||||
}
|
||||
|
||||
@ -867,6 +867,20 @@ div:focus {
|
||||
background-color: rgba(31, 35, 41, 0.15) !important;
|
||||
}
|
||||
|
||||
.de-tabs {
|
||||
.el-tabs__header {
|
||||
margin: 0 0 12px !important;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
margin-bottom: 9px !important;
|
||||
padding: 0 12px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item:not(.is-active) {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
@ -915,19 +929,19 @@ div:focus {
|
||||
margin-right: 8.67px;
|
||||
}
|
||||
}
|
||||
.de-message-fail {
|
||||
border: 1px solid #f54a45 !important;
|
||||
background: #fef1f1 !important;
|
||||
.de-message-error {
|
||||
border: 1px solid var(--deDanger, #f54a45) !important;
|
||||
background: var(--deWhitemsgDeDanger, #fef1f1) !important;
|
||||
i {
|
||||
color: #f54a45;
|
||||
color: var(--deDanger, #f54a45);
|
||||
}
|
||||
}
|
||||
|
||||
.de-message-success {
|
||||
border: 1px solid #34c724 !important;
|
||||
background: #f0fbef !important;
|
||||
border: 1px solid var(--deSuccess, #34c724) !important;
|
||||
background: var(--deWhitemsgDeSuccess, #f0fbef) !important;
|
||||
i {
|
||||
color: #34c724;
|
||||
color: var(--deSuccess, #34c724);
|
||||
}
|
||||
}
|
||||
|
||||
@ -978,3 +992,178 @@ div:focus {
|
||||
.user-import-class>.el-dialog__body {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
|
||||
.de-form-item {
|
||||
.el-form-item__label {
|
||||
width: 100% !important;
|
||||
text-align: left;
|
||||
margin-bottom: 8px;
|
||||
height: 22px;
|
||||
line-height: 22px !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.el-form-item.is-required:not(.is-no-asterisk)
|
||||
> .el-form-item__label:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-form-item.is-required:not(.is-no-asterisk)
|
||||
> .el-form-item__label::after {
|
||||
content: "*";
|
||||
color: #f54a45;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 28px !important;
|
||||
}
|
||||
|
||||
.tips-not-absolute {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.de-dialog-form {
|
||||
.el-dialog__body {
|
||||
padding: 0 24px 24px 24px;
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.de-confirm {
|
||||
border: none;
|
||||
.el-message-box__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-message-box__content {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.el-message-box__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.el-message-box__status {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
font-size: 22px !important;
|
||||
margin-right: 17px;
|
||||
}
|
||||
|
||||
.el-message-box__message {
|
||||
//styleName: 中文/桌面端/四级标题 16 24 Medium;
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
.el-message-box__btns {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.de-confirm-btn {
|
||||
height: 32px;
|
||||
width: 80px;
|
||||
border-radius: 4px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.de-confirm-fail {
|
||||
padding: 0 24px 24px 0 !important;
|
||||
.el-message-box__status {
|
||||
color: #ff8800 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.de-use-html {
|
||||
min-width: 420px;
|
||||
width: auto !important;
|
||||
|
||||
.el-message-box__container {
|
||||
position: relative;
|
||||
|
||||
.use-html {
|
||||
//styleName: 中文/桌面端/正文 14 22 Regular;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: left;
|
||||
color: #1f2329;
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-message-box__status {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.de-confirm-primary-btn {
|
||||
background: var(--deSuccess, #3370ff) !important;
|
||||
border: none !important;
|
||||
color: #ffffff !important;
|
||||
|
||||
&:hover {
|
||||
background: var(--deSuccessHover, #3370ff) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--deSuccessActive, #3370ff) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.de-confirm-plain-cancel {
|
||||
background: #ffffff !important;
|
||||
border: 1px solid #bbbfc4 !important;
|
||||
color: #1f2329 !important;
|
||||
}
|
||||
|
||||
.de-confirm-danger-btn {
|
||||
background: var(--deDanger, #f54a45) !important;
|
||||
border: none !important;
|
||||
color: #ffffff !important;
|
||||
&:hover {
|
||||
background: var(--deDangerHover, #f54a45) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--deDangerActive, #f54a45) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-switch__label.is-active {
|
||||
color: var(--deTextPrimary, #1F2329) !important;
|
||||
}
|
||||
|
||||
.el-radio__input.is-checked:not(.is-disabled)+.el-radio__label {
|
||||
color: var(--deTextPrimary, #1F2329) !important;
|
||||
}
|
||||
|
||||
@ -1,169 +1,222 @@
|
||||
<template>
|
||||
<el-row v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<el-row style="margin-top: 5px">
|
||||
<el-col :span="4">{{ $t('commons.name') }}</el-col>
|
||||
<el-col :span="16">
|
||||
<el-input v-model="templateInfo.name" clearable size="mini" />
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button style="margin-left: 10px" class="el-icon-upload" size="small" type="primary" @click="goFile">{{ $t('panel.upload_template') }}</el-button>
|
||||
<input id="input" ref="files" type="file" accept=".DET" hidden @change="handleFileChange">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div
|
||||
class="template-import"
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
>
|
||||
<el-form
|
||||
ref="templateImportForm"
|
||||
class="de-form-item"
|
||||
:model="templateInfo"
|
||||
:rules="templateInfoRules"
|
||||
>
|
||||
<el-form-item :label="$t('system_parameter_setting.template_name')" prop="name">
|
||||
<el-row>
|
||||
<el-col :span="19" style="padding-right: 2px;">
|
||||
<el-input v-model="templateInfo.name" clearable size="small" />
|
||||
</el-col>
|
||||
<el-col :span="5" >
|
||||
<deBtn
|
||||
style="margin-left: 10px"
|
||||
class="el-icon-upload2"
|
||||
secondary
|
||||
@click="goFile"
|
||||
>{{ $t("panel.upload_template") }}</deBtn
|
||||
>
|
||||
<input
|
||||
id="input"
|
||||
ref="files"
|
||||
type="file"
|
||||
accept=".DET"
|
||||
hidden
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row class="preview" :style="classBackground" />
|
||||
<el-row class="root-class">
|
||||
<el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="save()">{{ $t('commons.confirm') }}</el-button>
|
||||
<el-row class="de-root-class">
|
||||
<deBtn secondary @click="cancel()">{{
|
||||
$t("commons.cancel")
|
||||
}}</deBtn>
|
||||
<deBtn type="primary" @click="save()">{{
|
||||
$t("commons.confirm")
|
||||
}}</deBtn>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { save, nameCheck } from '@/api/system/template'
|
||||
import { save, nameCheck } from "@/api/system/template";
|
||||
import msgCfm from "@/components/msgCfm/index";
|
||||
import { find } from "@/api/system/template";
|
||||
|
||||
export default {
|
||||
|
||||
mixins: [msgCfm],
|
||||
props: {
|
||||
pid: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableRadio: null,
|
||||
keyWordSearch: '',
|
||||
columnLabel: this.$t('panel.belong_to_category'),
|
||||
templateList: [],
|
||||
importTemplateInfo: {
|
||||
snapshot: ''
|
||||
snapshot: "",
|
||||
},
|
||||
templateInfoRules: {
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("commons.input_content"),
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
},
|
||||
recover: false,
|
||||
templateInfo: {
|
||||
level: '1',
|
||||
level: "1",
|
||||
pid: this.pid,
|
||||
name: '',
|
||||
name: "",
|
||||
templateStyle: null,
|
||||
templateData: null,
|
||||
dynamicData: null,
|
||||
staticResource: null,
|
||||
snapshot: ''
|
||||
}
|
||||
}
|
||||
snapshot: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classBackground() {
|
||||
if (this.importTemplateInfo.snapshot) {
|
||||
return {
|
||||
background: `url(${this.importTemplateInfo.snapshot}) no-repeat`
|
||||
}
|
||||
background: `url(${this.importTemplateInfo.snapshot}) no-repeat`,
|
||||
};
|
||||
} else {
|
||||
return {}
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.showCurrentTemplate(this.pid);
|
||||
},
|
||||
methods: {
|
||||
handleExceed(file) {
|
||||
// selectRecover() {
|
||||
// this.recover = true;
|
||||
// this.templateInfo
|
||||
// this.$refs.templateImportForm.clearValidate();
|
||||
// },
|
||||
// validator(rule, value, callback) {
|
||||
// if (this.nameRepeat(value)) {
|
||||
|
||||
// callback(new Error(this.$t('commons.already_exists')));
|
||||
// } else {
|
||||
// callback();
|
||||
// }
|
||||
// },
|
||||
showCurrentTemplate(pid) {
|
||||
find({ pid }).then((response) => {
|
||||
this.nameList = response.data;
|
||||
});
|
||||
},
|
||||
// nameRepeat(value) {
|
||||
// if (!this.nameList || this.nameList.length === 0 || this.recover) {
|
||||
// return false;
|
||||
// }
|
||||
// return this.nameList.some((ele) => ele.name === value);
|
||||
// },
|
||||
cancel() {
|
||||
this.$emit('closeEditTemplateDialog')
|
||||
this.$emit("closeEditTemplateDialog");
|
||||
},
|
||||
save() {
|
||||
if (!this.templateInfo.name) {
|
||||
this.$warning(this.$t('chart.name_can_not_empty'))
|
||||
return false
|
||||
this.$warning(this.$t("chart.name_can_not_empty"));
|
||||
return false;
|
||||
}
|
||||
if (!this.templateInfo.templateData) {
|
||||
this.$warning(this.$t('chart.template_can_not_empty'))
|
||||
return false
|
||||
this.$warning(this.$t("chart.template_can_not_empty"));
|
||||
return false;
|
||||
}
|
||||
const nameCheckRequest = {
|
||||
pid: this.templateInfo.pid,
|
||||
name: this.templateInfo.name,
|
||||
optType: 'insert'
|
||||
}
|
||||
nameCheck(nameCheckRequest).then(response => {
|
||||
if (response.data.indexOf('exist') > -1) {
|
||||
this.$confirm(this.$t('template.exit_same_template_check'), this.$t('template.confirm_upload'), {
|
||||
confirmButtonText: this.$t('template.override'),
|
||||
cancelButtonText: this.$t('template.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
save(this.templateInfo).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('commons.save_success'),
|
||||
type: 'success',
|
||||
showClose: true
|
||||
})
|
||||
this.$emit('closeEditTemplateDialog')
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
optType: "insert",
|
||||
};
|
||||
nameCheck(nameCheckRequest).then((response) => {
|
||||
if (response.data.indexOf("exist") > -1) {
|
||||
const options = {
|
||||
title: 'commons.prompt',
|
||||
content: "system_parameter_setting.to_overwrite_them",
|
||||
type: "primary",
|
||||
cb: () => save(this.templateInfo).then((response) => {
|
||||
this.openMessageSuccess("system_parameter_setting.import_succeeded");
|
||||
this.$emit("closeEditTemplateDialog");
|
||||
}),
|
||||
confirmButtonText: this.$t('template.override')
|
||||
};
|
||||
this.handlerConfirm(options);
|
||||
} else {
|
||||
save(this.templateInfo).then(response => {
|
||||
this.$message({
|
||||
message: this.$t('commons.save_success'),
|
||||
type: 'success',
|
||||
showClose: true
|
||||
})
|
||||
this.$emit('closeEditTemplateDialog')
|
||||
})
|
||||
save(this.templateInfo).then((response) => {
|
||||
this.openMessageSuccess("system_parameter_setting.import_succeeded");
|
||||
this.$emit("closeEditTemplateDialog");
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
handleFileChange(e) {
|
||||
const file = e.target.files[0]
|
||||
const reader = new FileReader()
|
||||
const file = e.target.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.onload = (res) => {
|
||||
const result = res.target.result
|
||||
this.importTemplateInfo = JSON.parse(result)
|
||||
this.templateInfo.name = this.importTemplateInfo.name
|
||||
this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle
|
||||
this.templateInfo.templateData = this.importTemplateInfo.panelData
|
||||
this.templateInfo.snapshot = this.importTemplateInfo.snapshot
|
||||
this.templateInfo.dynamicData = this.importTemplateInfo.dynamicData
|
||||
this.templateInfo.staticResource = this.importTemplateInfo.staticResource
|
||||
this.templateInfo.nodeType = 'template'
|
||||
}
|
||||
reader.readAsText(file)
|
||||
const result = res.target.result;
|
||||
this.importTemplateInfo = JSON.parse(result);
|
||||
this.templateInfo.name = this.importTemplateInfo.name;
|
||||
this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle;
|
||||
this.templateInfo.templateData = this.importTemplateInfo.panelData;
|
||||
this.templateInfo.snapshot = this.importTemplateInfo.snapshot;
|
||||
this.templateInfo.dynamicData = this.importTemplateInfo.dynamicData;
|
||||
this.templateInfo.staticResource =
|
||||
this.importTemplateInfo.staticResource;
|
||||
this.templateInfo.nodeType = "template";
|
||||
};
|
||||
reader.readAsText(file);
|
||||
},
|
||||
goFile() {
|
||||
this.$refs.files.click()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
this.$refs.files.click();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.my_table ::v-deep .el-table__row>td{
|
||||
.my_table ::v-deep .el-table__row > td {
|
||||
/* 去除表格线 */
|
||||
border: none;
|
||||
padding: 0 0;
|
||||
}
|
||||
.my_table ::v-deep .el-table th.is-leaf {
|
||||
/* 去除上边框 */
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
.my_table ::v-deep .el-table::before{
|
||||
.my_table ::v-deep .el-table::before {
|
||||
/* 去除下边框 */
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.root-class {
|
||||
margin: 15px 0px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.preview {
|
||||
margin-top: 5px;
|
||||
border:1px solid #E6E6E6;
|
||||
height:300px !important;
|
||||
overflow:auto;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
.preview-show {
|
||||
border-left:1px solid #E6E6E6;
|
||||
height:300px;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
.de-root-class {
|
||||
margin-top: 24px;
|
||||
text-align: right;
|
||||
}
|
||||
.preview {
|
||||
margin-top: -12px;
|
||||
border: 1px solid #e6e6e6;
|
||||
height: 300px !important;
|
||||
overflow: auto;
|
||||
background-size: 100% 100% !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.preview-show {
|
||||
border-left: 1px solid #e6e6e6;
|
||||
height: 300px;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,114 +1,127 @@
|
||||
<template>
|
||||
<div class="testcase-template">
|
||||
<div class="template-img" :style="classBackground">
|
||||
<i class="el-icon-error" @click.stop="templateDelete" />
|
||||
<i class="el-icon-edit" @click.stop="templateEdit" />
|
||||
<div class="de-card-model">
|
||||
<div class="card-img-model">
|
||||
<img :src="model.snapshot" alt="" />
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="model.name"
|
||||
placement="top"
|
||||
>
|
||||
<span class="de-model-text">{{ model.name }}</span>
|
||||
</el-tooltip>
|
||||
<el-dropdown size="medium" trigger="click" @command="handleCommand">
|
||||
<i class="el-icon-more"></i>
|
||||
<el-dropdown-menu class="de-card-dropdown" slot="dropdown">
|
||||
<slot>
|
||||
<el-dropdown-item command="rename">
|
||||
<i class="el-icon-edit"></i>
|
||||
重命名
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="delete">
|
||||
<i class="el-icon-delete"></i>
|
||||
删除
|
||||
</el-dropdown-item>
|
||||
</slot>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<el-tooltip class="item" effect="light" :content="template.name" placement="bottom">
|
||||
<span class="demonstration">{{ template.name }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { get, post } from '@/api/panel/panel'
|
||||
export default {
|
||||
name: 'TemplateItem',
|
||||
props: {
|
||||
template: {
|
||||
model: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classBackground() {
|
||||
if (this.template.snapshot) {
|
||||
return {
|
||||
background: `url(${this.template.snapshot}) no-repeat`,
|
||||
'background-size': `100% 100%`
|
||||
}
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
templateDelete() {
|
||||
this.$alert(this.$t('panel.confirm_delete') + this.$t('panel.template') + ': ' + this.template.name + '？', '', {
|
||||
confirmButtonText: this.$t('panel.confirm'),
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this.$emit('templateDelete', this.template.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
handleCommand(key) {
|
||||
this.$emit("command", key);
|
||||
},
|
||||
templateEdit() {
|
||||
this.$emit('templateEdit', this.template)
|
||||
},
|
||||
handleDelete() {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss">
|
||||
.de-card-model {
|
||||
width: 258px;
|
||||
height: 184px;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
border-radius: 4px;
|
||||
margin: 0 25px 25px 0;
|
||||
.card-img-model {
|
||||
border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
|
||||
height: 144px;
|
||||
width: 100%;
|
||||
|
||||
.testcase-template {
|
||||
display: inline-block;
|
||||
margin: 10px 30px;
|
||||
width: 150px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.demonstration {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
margin: 10px auto;
|
||||
width: 150px;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
.template-img {
|
||||
height: 112px;
|
||||
width: 200px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
|
||||
border: solid 2px #fff;
|
||||
.card-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px 9px 12px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
|
||||
.el-icon-more {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #646a73;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-icon-more:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.el-icon-more:active {
|
||||
background: rgba(31, 35, 41, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.template-img:hover {
|
||||
border: solid 1px #4b8fdf;
|
||||
border-radius: 3px;
|
||||
color: deepskyblue;
|
||||
cursor: pointer;
|
||||
.de-model-text {
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #1f2329;
|
||||
display: inline-block;
|
||||
width: 90%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.template-img > i{
|
||||
display:none;
|
||||
float: right;
|
||||
color: gray;
|
||||
margin: 2px;
|
||||
.de-card-model:hover {
|
||||
box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08);
|
||||
}
|
||||
|
||||
.de-card-dropdown {
|
||||
margin-top: 0 !important;
|
||||
.popper__arrow {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.template-img > i:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.template-img:hover > .el-icon-error {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.template-img:hover > .el-icon-edit {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,163 +1,235 @@
|
||||
<template xmlns:el-col="http://www.w3.org/1999/html">
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-button icon="el-icon-folder-add" type="primary" size="mini" @click="add()">
|
||||
{{ $t('panel.add_category') }}
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 5px">
|
||||
<el-row>
|
||||
<el-input
|
||||
v-model="templateFilterText"
|
||||
:placeholder="$t('panel.filter_keywords')"
|
||||
size="mini"
|
||||
clearable
|
||||
prefix-icon="el-icon-search"
|
||||
/>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 5px">
|
||||
<el-tree
|
||||
ref="templateTree"
|
||||
:default-expanded-keys="defaultExpandedKeys"
|
||||
:data="templateList"
|
||||
node-key="id"
|
||||
:expand-on-click-node="true"
|
||||
:filter-node-method="filterNode"
|
||||
:highlight-current="true"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node">
|
||||
<span style="display: flex; flex: 1 1 0%; width: 0px;">
|
||||
<span>
|
||||
<i class="el-icon-folder" />
|
||||
</span>
|
||||
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
|
||||
<div class="de-template-list">
|
||||
<el-input
|
||||
v-model="templateFilterText"
|
||||
:placeholder="$t('panel.filter_keywords')"
|
||||
size="mini"
|
||||
clearable
|
||||
prefix-icon="el-icon-search"
|
||||
/>
|
||||
<el-empty
|
||||
v-if="!templateListComputed.length && templateFilterText === ''"
|
||||
description="暂无分类"
|
||||
></el-empty>
|
||||
<el-empty
|
||||
v-if="!templateListComputed.length && templateFilterText !== ''"
|
||||
description="没有找到相关内容"
|
||||
></el-empty>
|
||||
<ul>
|
||||
<li
|
||||
:class="[{ select: activeTemplate === ele.id }]"
|
||||
@click="nodeClick(ele)"
|
||||
v-for="ele in templateListComputed"
|
||||
:key="ele.name"
|
||||
>
|
||||
<i class="el-icon-folder folder" />
|
||||
<span>{{ ele.name }}</span>
|
||||
<span @click.stop class="more">
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
size="small"
|
||||
@command="(type) => clickMore(type, ele)"
|
||||
>
|
||||
<span class="el-dropdown-link">
|
||||
<i class="el-icon-more"></i>
|
||||
</span>
|
||||
<span>
|
||||
<span @click.stop>
|
||||
<el-dropdown trigger="click" size="small" @command="clickMore">
|
||||
<span class="el-dropdown-link">
|
||||
<el-button
|
||||
icon="el-icon-more"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-upload2" :command="beforeClickMore('import',data,node)">
|
||||
{{ $t('panel.import') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-edit" :command="beforeClickMore('edit',data,node)">
|
||||
{{ $t('panel.rename') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
|
||||
{{ $t('panel.delete') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</el-tree>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-dropdown-menu class="de-template-dropdown" slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-upload2" command="import">
|
||||
{{ $t("panel.import") }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-edit" command="edit">
|
||||
{{ $t("panel.rename") }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-delete" command="delete">
|
||||
{{ $t("panel.delete") }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<deBtn
|
||||
v-if="templateFilterText === ''"
|
||||
style="width: 100%"
|
||||
icon="el-icon-plus"
|
||||
secondary
|
||||
@click="add()"
|
||||
>
|
||||
{{ $t("panel.add_category") }}
|
||||
</deBtn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TemplateList',
|
||||
components: { },
|
||||
name: "TemplateList",
|
||||
components: {},
|
||||
props: {
|
||||
templateType: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: "",
|
||||
},
|
||||
templateList: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
default: function () {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
templateFilterText: '',
|
||||
defaultExpandedKeys: [],
|
||||
currentTemplateShowList: []
|
||||
}
|
||||
templateFilterText: "",
|
||||
activeTemplate: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
templateFilterText(val) {
|
||||
this.$refs.templateTree.filter(val)
|
||||
}
|
||||
templateListComputed() {
|
||||
// if (!this.templateFilterText)
|
||||
// return [
|
||||
// ...this.templateList,
|
||||
// ...this.templateList,
|
||||
// ...this.templateList,
|
||||
// ...this.templateList,
|
||||
// ];
|
||||
if (!this.templateFilterText) return [...this.templateList];
|
||||
return this.templateList.filter((ele) =>
|
||||
ele.name.includes(this.templateFilterText)
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickAdd() {
|
||||
|
||||
},
|
||||
clickMore(param) {
|
||||
switch (param.type) {
|
||||
case 'edit':
|
||||
this.templateEdit(param.data)
|
||||
break
|
||||
case 'delete':
|
||||
this.templateDelete(param.data)
|
||||
break
|
||||
case 'import':
|
||||
this.templateImport(param.data)
|
||||
break
|
||||
clickMore(type, data) {
|
||||
switch (type) {
|
||||
case "edit":
|
||||
this.templateEdit(data);
|
||||
break;
|
||||
case "delete":
|
||||
this.templateDelete(data);
|
||||
break;
|
||||
case "import":
|
||||
this.templateImport(data);
|
||||
break;
|
||||
}
|
||||
},
|
||||
beforeClickMore(type, data, node) {
|
||||
return {
|
||||
'type': type,
|
||||
'data': data,
|
||||
'node': node
|
||||
}
|
||||
},
|
||||
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.label.indexOf(value) !== -1
|
||||
},
|
||||
nodeClick(data, node) {
|
||||
this.$emit('showCurrentTemplate', data.id)
|
||||
nodeClick({ id, label }) {
|
||||
this.activeTemplate = id;
|
||||
this.$emit("showCurrentTemplate", id, label);
|
||||
},
|
||||
add() {
|
||||
this.$emit('showTemplateEditDialog', 'new')
|
||||
this.$emit("showTemplateEditDialog", "new");
|
||||
},
|
||||
templateDelete(template) {
|
||||
this.$alert(this.$t('panel.confirm_delete') + this.$t('panel.category') + ': ' + template.name + '？', '', {
|
||||
confirmButtonText: this.$t('panel.confirm_delete'),
|
||||
callback: (action) => {
|
||||
if (action === 'confirm') {
|
||||
this.$emit('templateDelete', template.id)
|
||||
}
|
||||
this.$alert(
|
||||
this.$t("panel.confirm_delete") +
|
||||
this.$t("panel.category") +
|
||||
": " +
|
||||
template.name +
|
||||
"？",
|
||||
"",
|
||||
{
|
||||
confirmButtonText: this.$t("panel.confirm_delete"),
|
||||
callback: (action) => {
|
||||
if (action === "confirm") {
|
||||
this.$emit("templateDelete", template.id);
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
);
|
||||
},
|
||||
templateEdit(template) {
|
||||
this.$emit('templateEdit', template)
|
||||
this.$emit("templateEdit", template);
|
||||
},
|
||||
templateImport(template) {
|
||||
this.$emit('templateImport', template.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$emit("templateImport", template.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
<style scoped lang="scss">
|
||||
.de-template-list {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
ul {
|
||||
margin: 16px 0 20px 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100% - 90px);
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
padding: 0 30px 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 4px;
|
||||
color: var(--deTextPrimary, #1F2329);
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.folder {
|
||||
color: #8f959e;
|
||||
margin-right: 9px;
|
||||
}
|
||||
.more {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
.el-icon-more {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #646a73;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-icon-more:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.el-icon-more:active {
|
||||
background: rgba(31, 35, 41, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(31, 35, 41, 0.1);
|
||||
|
||||
.more {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.select {
|
||||
background: var(--deWhiteHover, #3370ff);
|
||||
color: var(--primary, #3370ff);
|
||||
}
|
||||
.de-btn-fix {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.de-template-dropdown {
|
||||
margin-top: 0 !important;
|
||||
.popper__arrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,25 +1,27 @@
|
||||
<template>
|
||||
<de-container class="content-container">
|
||||
<de-aside-container class="template-aside-container" is-template>
|
||||
<el-tabs v-model="currentTemplateType" @tab-click="handleClick">
|
||||
<de-layout-content>
|
||||
<div class="de-template">
|
||||
<el-tabs
|
||||
class="de-tabs"
|
||||
v-model="currentTemplateType"
|
||||
@tab-click="handleClick"
|
||||
>
|
||||
<el-tab-pane name="self">
|
||||
<span slot="label"><i class="el-icon-star-off tablepanel-i" />{{ $t('panel.user_template') }}</span>
|
||||
<!--v-if 重新渲染 强制刷新首行高亮属性-->
|
||||
<template-list
|
||||
v-if="currentTemplateType==='self'"
|
||||
:template-type="currentTemplateType"
|
||||
:template-list="templateList"
|
||||
@templateDelete="templateDelete"
|
||||
@templateEdit="templateEdit"
|
||||
@showCurrentTemplate="showCurrentTemplate"
|
||||
@templateImport="templateImport"
|
||||
@showTemplateEditDialog="showTemplateEditDialog"
|
||||
/>
|
||||
<span slot="label">{{ $t("panel.user_template") }}</span>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-permission="['sys-template:read']" name="system">
|
||||
<span slot="label" v-permission="['sys-template:read']"><i class="el-icon-document tablepanel-i" /> {{ $t('panel.sys_template') }}</span>
|
||||
<span slot="label" v-permission="['sys-template:read']">
|
||||
{{ $t("panel.sys_template") }}</span
|
||||
>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div
|
||||
class="tabs-container flex-tabs"
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
>
|
||||
<div class="de-tabs-left">
|
||||
<template-list
|
||||
v-if="currentTemplateType==='system'"
|
||||
ref="templateList"
|
||||
:template-type="currentTemplateType"
|
||||
:template-list="templateList"
|
||||
@templateDelete="templateDelete"
|
||||
@ -28,196 +30,370 @@
|
||||
@templateImport="templateImport"
|
||||
@showTemplateEditDialog="showTemplateEditDialog"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</de-aside-container>
|
||||
<de-main-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<template-item
|
||||
v-for="item in currentTemplateShowList"
|
||||
:key="item.id"
|
||||
:template="item"
|
||||
@templateDelete="templateDelete"
|
||||
@templateEdit="templateEdit"
|
||||
/>
|
||||
</de-main-container>
|
||||
<el-dialog :title="dialogTitle" :visible="editTemplate" :show-close="false" width="30%">
|
||||
<el-form ref="templateEditForm" :model="templateEditForm" :rules="templateEditFormRules">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
</div>
|
||||
<div class="de-tabs-right">
|
||||
<div v-if="currentTemplateLabel" class="active-template">
|
||||
{{ currentTemplateLabel }}({{ currentTemplateShowList.length }})
|
||||
<deBtn
|
||||
type="primary"
|
||||
@click="templateImport(currentTemplateId)"
|
||||
icon="el-icon-upload2"
|
||||
>
|
||||
{{ $t("panel.import") }}
|
||||
</deBtn>
|
||||
</div>
|
||||
<el-empty
|
||||
v-if="!currentTemplateShowList.length"
|
||||
description="暂无模版"
|
||||
></el-empty>
|
||||
<div v-if="currentTemplateId !== ''" class="template-box">
|
||||
<template-item
|
||||
v-for="item in currentTemplateShowList"
|
||||
:key="item.id"
|
||||
:model="item"
|
||||
@command="(key) => handleCommand(key, item)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
:visible="editTemplate"
|
||||
append-to-body
|
||||
class="de-dialog-form"
|
||||
width="600px"
|
||||
>
|
||||
<el-form
|
||||
ref="templateEditForm"
|
||||
class="de-form-item"
|
||||
:model="templateEditForm"
|
||||
:rules="templateEditFormRules"
|
||||
>
|
||||
<el-form-item
|
||||
:label="dialogTitleLabel"
|
||||
prop="name"
|
||||
>
|
||||
<el-input v-model="templateEditForm.name" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="close()">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="saveTemplateEdit(templateEditForm)">{{ $t('commons.confirm') }}
|
||||
</el-button>
|
||||
<deBtn secondary @click="close()">{{ $t("commons.cancel") }}</deBtn>
|
||||
<deBtn type="primary" @click="saveTemplateEdit(templateEditForm)"
|
||||
>{{ $t("commons.confirm") }}
|
||||
</deBtn>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--导入templatedialog-->
|
||||
<el-dialog :title="templateDialog.title" :visible.sync="templateDialog.visible" :show-close="true" width="600px">
|
||||
<el-dialog
|
||||
:title="templateDialog.title"
|
||||
:visible.sync="templateDialog.visible"
|
||||
:show-close="true"
|
||||
class="de-dialog-form"
|
||||
width="600px"
|
||||
>
|
||||
<template-import
|
||||
v-if="templateDialog.visible"
|
||||
:pid="templateDialog.pid"
|
||||
@closeEditTemplateDialog="closeEditTemplateDialog"
|
||||
/>
|
||||
</el-dialog>
|
||||
</de-container>
|
||||
</de-layout-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||||
import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
import TemplateList from './component/TemplateList'
|
||||
import TemplateItem from './component/TemplateItem'
|
||||
import TemplateImport from './component/TemplateImport'
|
||||
import { save, templateDelete, find } from '@/api/system/template'
|
||||
|
||||
import DeLayoutContent from "@/components/business/DeLayoutContent";
|
||||
import TemplateList from "./component/TemplateList";
|
||||
import TemplateItem from "./component/TemplateItem";
|
||||
import TemplateImport from "./component/TemplateImport";
|
||||
import { save, templateDelete, find } from "@/api/system/template";
|
||||
import msgCfm from "@/components/msgCfm/index";
|
||||
export default {
|
||||
name: 'PanelMain',
|
||||
components: { DeMainContainer, DeContainer, DeAsideContainer, TemplateList, TemplateItem, TemplateImport },
|
||||
name: "PanelMain",
|
||||
mixins: [msgCfm],
|
||||
components: { DeLayoutContent, TemplateList, TemplateItem, TemplateImport },
|
||||
data() {
|
||||
return {
|
||||
showShare: false,
|
||||
currentTemplateShowList: [],
|
||||
currentPid: '',
|
||||
currentTemplateType: 'self',
|
||||
currentPid: "",
|
||||
currentTemplateType: "self",
|
||||
templateEditFormRules: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' },
|
||||
{ max: 50, message: this.$t('commons.char_can_not_more_50'), trigger: 'change' }
|
||||
]
|
||||
{ required: true, trigger: "blur", validator: this.roleValidator },
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("commons.input_content"),
|
||||
trigger: "change",
|
||||
},
|
||||
{
|
||||
max: 50,
|
||||
message: this.$t("commons.char_can_not_more_50"),
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
},
|
||||
templateEditForm: {},
|
||||
editTemplate: false,
|
||||
dialogTitle: '',
|
||||
dialogTitle: "",
|
||||
dialogTitleLabel: "",
|
||||
currentTemplateLabel: "",
|
||||
currentTemplateId: "",
|
||||
templateList: [],
|
||||
formType: "",
|
||||
originName: "",
|
||||
templateDialog: {
|
||||
title: this.$t('panel.import_template'),
|
||||
title: this.$t("panel.import_template"),
|
||||
visible: false,
|
||||
pid: ''
|
||||
pid: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
nameList() {
|
||||
const { nodeType } = this.templateEditForm || {};
|
||||
if ("template" === nodeType) {
|
||||
return this.currentTemplateShowList.map((ele) => ele.label);
|
||||
}
|
||||
}
|
||||
|
||||
if ("folder" === nodeType) {
|
||||
return this.templateList.map((ele) => ele.label);
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getTree()
|
||||
this.getTree();
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
this.getTree()
|
||||
roleValidator(rule, value, callback) {
|
||||
if (this.nameRepeat(value)) {
|
||||
const { nodeType } = this.templateEditForm || {};
|
||||
callback(
|
||||
new Error(
|
||||
this.$t(
|
||||
`system_parameter_setting.${
|
||||
"folder" === nodeType
|
||||
? "name_already_exists_type"
|
||||
: "the_same_category"
|
||||
}`
|
||||
)
|
||||
)
|
||||
);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
showCurrentTemplate(pid) {
|
||||
this.currentTemplateId = pid
|
||||
nameRepeat(value) {
|
||||
if (!this.nameList || this.nameList.length === 0) {
|
||||
return false;
|
||||
}
|
||||
// 编辑场景 不能 因为名称重复而报错
|
||||
if (this.formType === "edit" && this.originName === value) {
|
||||
return false;
|
||||
}
|
||||
return this.nameList.some((name) => name === value);
|
||||
},
|
||||
handleCommand(key, data) {
|
||||
switch (key) {
|
||||
case "rename":
|
||||
this.templateEdit(data);
|
||||
break;
|
||||
case "delete":
|
||||
this.templateDeleteConfirm(data);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
templateDeleteConfirm(template) {
|
||||
// const options = {
|
||||
// title: 'jkjhjjhhkh',
|
||||
// showCancelButton: false,
|
||||
// type: 'primary',
|
||||
// }
|
||||
// this.handlerConfirm(options);
|
||||
// return
|
||||
this.$alert(
|
||||
this.$t("panel.confirm_delete") +
|
||||
this.$t("panel.template") +
|
||||
": " +
|
||||
this.template.name +
|
||||
"？",
|
||||
"",
|
||||
{
|
||||
confirmButtonText: this.$t("panel.confirm"),
|
||||
callback: (action) => {
|
||||
if (action === "confirm") {
|
||||
this.templateDelete(template.id);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
this.getTree();
|
||||
},
|
||||
showCurrentTemplate(pid, label) {
|
||||
this.currentTemplateId = pid;
|
||||
this.currentTemplateLabel = label;
|
||||
if (this.currentTemplateId) {
|
||||
find({ pid: this.currentTemplateId }).then(response => {
|
||||
this.currentTemplateShowList = response.data
|
||||
})
|
||||
find({ pid: this.currentTemplateId }).then((response) => {
|
||||
this.currentTemplateShowList = response.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
templateDelete(id) {
|
||||
if (id) {
|
||||
templateDelete(id).then(response => {
|
||||
templateDelete(id).then((response) => {
|
||||
this.$message({
|
||||
message: this.$t('commons.delete_success'),
|
||||
type: 'success',
|
||||
showClose: true
|
||||
})
|
||||
this.getTree()
|
||||
})
|
||||
message: this.$t("commons.delete_success"),
|
||||
type: "success",
|
||||
showClose: true,
|
||||
});
|
||||
this.getTree();
|
||||
});
|
||||
}
|
||||
},
|
||||
showTemplateEditDialog(type, templateInfo) {
|
||||
if (type === 'edit') {
|
||||
this.dialogTitle = this.$t('commons.edit')
|
||||
this.templateEditForm = JSON.parse(JSON.stringify(templateInfo))
|
||||
this.templateEditForm = null;
|
||||
this.formType = type;
|
||||
if (type === "edit") {
|
||||
this.templateEditForm = JSON.parse(JSON.stringify(templateInfo));
|
||||
this.dialogTitle = this.$t(`system_parameter_setting.${"folder" === this.templateEditForm.nodeType ? 'edit_classification' : 'edit_template'}`);
|
||||
this.originName = this.templateEditForm.label;
|
||||
} else {
|
||||
this.dialogTitle = this.$t('commons.create')
|
||||
this.templateEditForm = { name: '', nodeType: 'folder', templateType: this.currentTemplateType, level: 0 }
|
||||
this.dialogTitle = this.$t("panel.add_category");
|
||||
this.templateEditForm = {
|
||||
name: "",
|
||||
nodeType: "folder",
|
||||
templateType: this.currentTemplateType,
|
||||
level: 0,
|
||||
};
|
||||
}
|
||||
this.editTemplate = true
|
||||
this.dialogTitleLabel = this.$t(`system_parameter_setting.${ "folder" === this.templateEditForm.nodeType ? 'classification_name' : 'template_name'}`)
|
||||
this.editTemplate = true;
|
||||
},
|
||||
templateEdit(templateInfo) {
|
||||
this.showTemplateEditDialog('edit', templateInfo)
|
||||
this.showTemplateEditDialog("edit", templateInfo);
|
||||
},
|
||||
saveTemplateEdit(templateEditForm) {
|
||||
this.$refs['templateEditForm'].validate((valid) => {
|
||||
this.$refs["templateEditForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
save(templateEditForm).then(response => {
|
||||
this.close()
|
||||
this.$message({
|
||||
message: this.$t('commons.save_success'),
|
||||
type: 'success',
|
||||
showClose: true
|
||||
})
|
||||
this.getTree()
|
||||
})
|
||||
save(templateEditForm).then((response) => {
|
||||
this.close();
|
||||
this.openMessageSuccess(
|
||||
`system_parameter_setting.${
|
||||
this.templateEditForm.id
|
||||
? "rename_succeeded"
|
||||
: "added_successfully"
|
||||
}`
|
||||
);
|
||||
this.getTree();
|
||||
});
|
||||
} else {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.$refs['templateEditForm'].resetFields()
|
||||
this.editTemplate = false
|
||||
this.$refs["templateEditForm"].resetFields();
|
||||
this.editTemplate = false;
|
||||
},
|
||||
getTree() {
|
||||
const request = {
|
||||
templateType: this.currentTemplateType,
|
||||
level: '0'
|
||||
}
|
||||
find(request).then(res => {
|
||||
this.templateList = res.data
|
||||
this.showFirst()
|
||||
})
|
||||
level: "0",
|
||||
};
|
||||
find(request).then((res) => {
|
||||
this.templateList = res.data;
|
||||
this.showFirst();
|
||||
});
|
||||
},
|
||||
showFirst() {
|
||||
// 判断是否默认点击第一条
|
||||
if (this.templateList && this.templateList.length > 0) {
|
||||
let showFirst = true
|
||||
this.templateList.forEach(template => {
|
||||
let showFirst = true;
|
||||
this.templateList.forEach((template) => {
|
||||
if (template.id === this.currentTemplateId) {
|
||||
showFirst = false
|
||||
showFirst = false;
|
||||
}
|
||||
})
|
||||
});
|
||||
if (showFirst) {
|
||||
this.$nextTick().then(() => {
|
||||
const firstNode = document.querySelector('.el-tree-node')
|
||||
firstNode.click()
|
||||
})
|
||||
const [obj = {}] = this.templateList;
|
||||
this.$refs.templateList.nodeClick(obj);
|
||||
});
|
||||
} else {
|
||||
this.showCurrentTemplate(this.currentTemplateId)
|
||||
this.showCurrentTemplate(this.currentTemplateId);
|
||||
}
|
||||
} else {
|
||||
this.currentTemplateShowList = []
|
||||
this.currentTemplateShowList = [];
|
||||
}
|
||||
},
|
||||
closeEditTemplateDialog() {
|
||||
this.templateDialog.visible = false
|
||||
this.showCurrentTemplate(this.templateDialog.pid)
|
||||
this.templateDialog.visible = false;
|
||||
this.showCurrentTemplate(this.templateDialog.pid);
|
||||
},
|
||||
templateImport(pid) {
|
||||
this.templateDialog.visible = true
|
||||
this.templateDialog.pid = pid
|
||||
this.templateDialog.visible = true;
|
||||
this.templateDialog.pid = pid;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.de-template {
|
||||
height: 100%;
|
||||
background-color: var(--MainBG, #f5f6f7);
|
||||
|
||||
.tabs-container {
|
||||
height: calc(100% - 48px);
|
||||
background: var(--ContentBG, #ffffff);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.flex-tabs {
|
||||
display: flex;
|
||||
background: #f5f6f7;
|
||||
}
|
||||
|
||||
.de-tabs-left {
|
||||
background: #fff;
|
||||
width: 269px;
|
||||
border-right: 1px solid rgba(31, 35, 41, 0.15);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.de-tabs-right {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
overflow: hidden;
|
||||
|
||||
.template-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 10px);
|
||||
width: 100%;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.active-template {
|
||||
margin: 4px 0 20px 0;
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--deTextPrimary, #1f2329);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-card-template {
|
||||
min-width: 260px;
|
||||
min-width: 460px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content-container{
|
||||
padding: 20px!important;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 56px)!important;
|
||||
}
|
||||
|
||||
.template-aside-container{
|
||||
height: calc(100vh - 96px)!important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -1,95 +1,87 @@
|
||||
<template>
|
||||
<div>
|
||||
<operater title="system_parameter_setting.basic_setting">
|
||||
<deBtn type="primary" v-if="showEdit" @click="edit">{{
|
||||
$t("commons.edit")
|
||||
}}</deBtn>
|
||||
<deBtn v-if="showCancel" secondary @click="cancel">{{
|
||||
$t("commons.cancel")
|
||||
}}</deBtn>
|
||||
<deBtn v-if="showSave" type="primary" :disabled="disabledSave" size="small" @click="save('formInline')">
|
||||
{{ $t("commons.save") }}
|
||||
</deBtn>
|
||||
</operater>
|
||||
|
||||
<!--基础配置表单-->
|
||||
<el-form
|
||||
ref="formInline"
|
||||
v-loading="loading"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
class="demo-form-inline"
|
||||
:disabled="show"
|
||||
size="small"
|
||||
>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('system_parameter_setting.front_time_out')" prop="frontTimeOut">
|
||||
<el-input
|
||||
v-model="formInline.frontTimeOut"
|
||||
:placeholder="$t('system_parameter_setting.empty_front')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('system_parameter_setting.msg_time_out')" prop="msgTimeOut">
|
||||
<el-input
|
||||
v-model="formInline.msgTimeOut"
|
||||
:placeholder="$t('system_parameter_setting.empty_msg')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form ref="formInline" v-loading="loading" :model="formInline" :rules="rules"
|
||||
class="demo-form-inline de-form-item" :disabled="show" label-width="80px" label-position="right" size="small">
|
||||
<el-form-item prop="frontTimeOut">
|
||||
<template slot="label">
|
||||
{{ $t('system_parameter_setting.request_timeout')}}
|
||||
<el-tooltip class="item" effect="dark" :content="$t('system_parameter_setting.front_time_out')"
|
||||
placement="top">
|
||||
<i class="el-icon-warning-outline tips"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input v-model="formInline.frontTimeOut" :placeholder="$t('system_parameter_setting.empty_front')"><template
|
||||
slot="append">{{ $t("panel.second") }}</template></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('system_parameter_setting.message_retention_time')" prop="msgTimeOut">
|
||||
<el-input v-model="formInline.msgTimeOut" :placeholder="$t('system_parameter_setting.empty_msg')"><template
|
||||
slot="append">天</template></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-row v-if="loginTypes.length > 1">
|
||||
<el-col>
|
||||
<el-form-item :label="$t('system_parameter_setting.login_type')" prop="loginType">
|
||||
<el-radio-group v-model="formInline.loginType">
|
||||
<el-radio :label="0" size="mini">{{ $t('login.default_login') }}</el-radio>
|
||||
<el-radio v-if="loginTypes.includes(1)" :label="1" size="mini">LDAP</el-radio>
|
||||
<el-radio v-if="loginTypes.includes(2)" :label="2" size="mini">OIDC</el-radio>
|
||||
<el-radio v-if="loginTypes.includes(3)" :label="3" size="mini">CAS</el-radio>
|
||||
</el-radio-group>
|
||||
<el-form-item v-if="loginTypes.length > 1" :label="$t('system_parameter_setting.login_type')" prop="loginType">
|
||||
<el-radio-group v-model="formInline.loginType">
|
||||
<el-radio :label="0" size="mini">{{
|
||||
$t("login.default_login")
|
||||
}}</el-radio>
|
||||
<el-radio v-if="loginTypes.includes(1)" :label="1" size="mini">LDAP</el-radio>
|
||||
<el-radio v-if="loginTypes.includes(2)" :label="2" size="mini">OIDC</el-radio>
|
||||
<el-radio v-if="loginTypes.includes(3)" :label="3" size="mini">CAS</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="loginTypes.includes(3)">
|
||||
<!-- <el-row v-if="loginTypes.includes(3)">
|
||||
<el-button class="pwd-tips" type="text">{{ $t('system_parameter_setting.cas_reset') + '[/cas/reset/{adminAcount}/{adminPwd}]' }}</el-button>
|
||||
</el-row>
|
||||
</el-row> -->
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('display.openMarketPage')">
|
||||
<el-checkbox v-model="formInline.openMarketPage" true-label="true" false-label="false" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('display.openHomePage')">
|
||||
<el-checkbox v-model="formInline.openHomePage" true-label="true" false-label="false" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item :label="
|
||||
$t('commons.yes') + $t('commons.no') + $t('display.openMarketPage')
|
||||
">
|
||||
<el-radio-group v-model="formInline.openMarketPage">
|
||||
<el-radio label="true" size="mini">{{ $t("commons.yes") }}</el-radio>
|
||||
<el-radio label="false" size="mini">{{ $t("commons.no") }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="
|
||||
$t('commons.yes') + $t('commons.no') + $t('display.openHomePage')
|
||||
" prop="openHomePage">
|
||||
<el-radio-group v-model="formInline.openHomePage">
|
||||
<el-radio label="true" size="mini">{{ $t("commons.yes") }}</el-radio>
|
||||
<el-radio label="false" size="mini">{{ $t("commons.no") }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div>
|
||||
|
||||
<el-button v-if="showEdit" size="small" @click="edit">{{ $t('commons.edit') }}</el-button>
|
||||
<el-button v-if="showSave" type="success" :disabled="disabledSave" size="small" @click="save('formInline')">
|
||||
{{ $t('commons.save') }}
|
||||
</el-button>
|
||||
<el-button v-if="showCancel" type="info" size="small" @click="cancel">{{ $t('commons.cancel') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { basicInfo, updateInfo } from '@/api/system/basic'
|
||||
import { ldapStatus, oidcStatus, casStatus } from '@/api/user'
|
||||
import bus from '@/utils/bus'
|
||||
import { basicInfo, updateInfo } from "@/api/system/basic";
|
||||
import { ldapStatus, oidcStatus, casStatus } from "@/api/user";
|
||||
import bus from "@/utils/bus";
|
||||
import operater from "./operater";
|
||||
import msgCfm from '@/components/msgCfm'
|
||||
export default {
|
||||
name: 'EmailSetting',
|
||||
name: "EmailSetting",
|
||||
mixins: [msgCfm],
|
||||
components: {
|
||||
operater,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formInline: {},
|
||||
input: '',
|
||||
visible: true,
|
||||
showEdit: true,
|
||||
showSave: false,
|
||||
showCancel: false,
|
||||
@ -100,134 +92,175 @@ export default {
|
||||
rules: {
|
||||
frontTimeOut: [
|
||||
{
|
||||
pattern: '^([0-9]|\\b[1-9]\\d\\b|\\b[1-2]\\d\\d\\b|\\b300\\b)$', // 修改了正则表达式，让其正确匹配0-300的数值
|
||||
message: this.$t('system_parameter_setting.front_error'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
pattern: "^([0-9]|\\b[1-9]\\d\\b|\\b[1-2]\\d\\d\\b|\\b300\\b)$", // 修改了正则表达式，让其正确匹配0-300的数值
|
||||
message: this.$t("system_parameter_setting.front_error"),
|
||||
trigger: "blur",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
msgTimeOut: [
|
||||
{
|
||||
pattern: '^([1-9]|[1-9][0-9]|[1-2][0-9][0-9]|3[0-5][0-9]|36[0-5])$',
|
||||
message: this.$t('system_parameter_setting.msg_error'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
pattern: "^([1-9]|[1-9][0-9]|[1-2][0-9][0-9]|3[0-5][0-9]|36[0-5])$",
|
||||
message: this.$t("system_parameter_setting.msg_error"),
|
||||
trigger: "blur",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
originLoginType: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
originLoginType: null,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
beforeCreate() {
|
||||
ldapStatus().then(res => {
|
||||
ldapStatus().then((res) => {
|
||||
if (res.success && res.data) {
|
||||
this.loginTypes.push(1)
|
||||
this.loginTypes.push(1);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
oidcStatus().then(res => {
|
||||
oidcStatus().then((res) => {
|
||||
if (res.success && res.data) {
|
||||
this.loginTypes.push(2)
|
||||
this.loginTypes.push(2);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
casStatus().then(res => {
|
||||
casStatus().then((res) => {
|
||||
if (res.success && res.data) {
|
||||
this.loginTypes.push(3)
|
||||
this.loginTypes.push(3);
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
created() {
|
||||
this.query()
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
|
||||
query() {
|
||||
basicInfo().then(response => {
|
||||
this.formInline = response.data
|
||||
basicInfo().then((response) => {
|
||||
this.formInline = response.data;
|
||||
|
||||
if (this.formInline && !this.formInline.loginType) {
|
||||
this.formInline.loginType = 0
|
||||
this.formInline.loginType = 0;
|
||||
}
|
||||
if (!this.originLoginType) {
|
||||
this.originLoginType = this.formInline.loginType
|
||||
this.originLoginType = this.formInline.loginType;
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.formInline.clearValidate()
|
||||
})
|
||||
})
|
||||
this.$refs.formInline.clearValidate();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
edit() {
|
||||
this.showEdit = false
|
||||
this.showSave = true
|
||||
this.showCancel = true
|
||||
this.show = false
|
||||
this.showEdit = false;
|
||||
this.showSave = true;
|
||||
this.showCancel = true;
|
||||
this.show = false;
|
||||
},
|
||||
save(formInline) {
|
||||
const param = [
|
||||
{ paramKey: 'basic.frontTimeOut', paramValue: this.formInline.frontTimeOut, type: 'text', sort: 1 },
|
||||
{ paramKey: 'basic.msgTimeOut', paramValue: this.formInline.msgTimeOut, type: 'text', sort: 2 },
|
||||
{ paramKey: 'basic.loginType', paramValue: this.formInline.loginType, type: 'text', sort: 3 },
|
||||
{ paramKey: 'ui.openHomePage', paramValue: this.formInline.openHomePage, type: 'text', sort: 13 },
|
||||
{ paramKey: 'ui.openMarketPage', paramValue: this.formInline.openMarketPage, type: 'text', sort: 14 }
|
||||
]
|
||||
{
|
||||
paramKey: "basic.frontTimeOut",
|
||||
paramValue: this.formInline.frontTimeOut,
|
||||
type: "text",
|
||||
sort: 1,
|
||||
},
|
||||
{
|
||||
paramKey: "basic.msgTimeOut",
|
||||
paramValue: this.formInline.msgTimeOut,
|
||||
type: "text",
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
paramKey: "basic.loginType",
|
||||
paramValue: this.formInline.loginType,
|
||||
type: "text",
|
||||
sort: 3,
|
||||
},
|
||||
{
|
||||
paramKey: "ui.openHomePage",
|
||||
paramValue: this.formInline.openHomePage,
|
||||
type: "text",
|
||||
sort: 13,
|
||||
},
|
||||
{
|
||||
paramKey: "ui.openMarketPage",
|
||||
paramValue: this.formInline.openMarketPage,
|
||||
type: "text",
|
||||
sort: 14,
|
||||
},
|
||||
];
|
||||
|
||||
this.$refs[formInline].validate(valid => {
|
||||
this.$refs[formInline].validate((valid) => {
|
||||
if (valid) {
|
||||
const needWarn = this.formInline.loginType === 3 && this.originLoginType !== 3
|
||||
const needWarn =
|
||||
this.formInline.loginType === 3 && this.originLoginType !== 3;
|
||||
if (needWarn) {
|
||||
this.$confirm(this.$t('system_parameter_setting.cas_selected_warn'), '', {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
cancelButtonText: this.$t('commons.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.saveHandler(param)
|
||||
}).catch(() => {
|
||||
// this.$info(this.$t('commons.delete_cancel'))
|
||||
})
|
||||
return
|
||||
this.$confirm(
|
||||
this.$t("system_parameter_setting.cas_selected_warn"),
|
||||
"",
|
||||
{
|
||||
confirmButtonText: this.$t("commons.confirm"),
|
||||
cancelButtonText: this.$t("commons.cancel"),
|
||||
type: "warning",
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
this.saveHandler(param);
|
||||
})
|
||||
.catch(() => {
|
||||
// this.$info(this.$t('commons.delete_cancel'))
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.saveHandler(param)
|
||||
this.saveHandler(param);
|
||||
} else {
|
||||
// this.result = false
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
saveHandler(param) {
|
||||
updateInfo(param).then(response => {
|
||||
const flag = response.success
|
||||
updateInfo(param).then((response) => {
|
||||
const flag = response.success;
|
||||
if (flag) {
|
||||
if (response.data && response.data.needLogout) {
|
||||
const casEnable = response.data.casEnable
|
||||
bus.$emit('sys-logout', { casEnable })
|
||||
return
|
||||
const casEnable = response.data.casEnable;
|
||||
bus.$emit("sys-logout", { casEnable });
|
||||
return;
|
||||
}
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
this.showEdit = true
|
||||
this.showCancel = false
|
||||
this.showSave = false
|
||||
this.show = true
|
||||
window.location.reload()
|
||||
this.openMessageSuccess("commons.save_success");
|
||||
this.showEdit = true;
|
||||
this.showCancel = false;
|
||||
this.showSave = false;
|
||||
this.show = true;
|
||||
window.location.reload();
|
||||
} else {
|
||||
this.$message.error(this.$t('commons.save_failed'))
|
||||
}
|
||||
})
|
||||
} this.openMessageSuccess("commons.save_failed", 'error');
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.showEdit = true
|
||||
this.showCancel = false
|
||||
this.showSave = false
|
||||
this.show = true
|
||||
this.query()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
this.showEdit = true;
|
||||
this.showCancel = false;
|
||||
this.showSave = false;
|
||||
this.show = true;
|
||||
this.query();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.demo-form-inline {
|
||||
.tips {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 5px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
margin-right: 0;
|
||||
width: 156px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,138 +1,210 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" v-loading="loading"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="demo-form-inline"
|
||||
:disabled="show"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
size="small"
|
||||
<operater title="system_parameter_setting.engine_mode_setting">
|
||||
<deBtn v-if="showCancel" secondary @click="cancel">
|
||||
{{ $t("commons.cancel") }}
|
||||
</deBtn>
|
||||
<deBtn secondary @click="validaDatasource">
|
||||
{{ $t("commons.validate") }}
|
||||
</deBtn>
|
||||
<deBtn v-if="showEdit" type="primary" @click="edit">
|
||||
{{ $t("commons.edit") }}
|
||||
</deBtn>
|
||||
<deBtn v-if="showSave" type="primary" @click="save">
|
||||
{{ $t("commons.save") }}
|
||||
</deBtn>
|
||||
</operater>
|
||||
<el-form
|
||||
ref="form"
|
||||
v-loading="loading"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
class="de-form-item"
|
||||
:disabled="show"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
size="small"
|
||||
>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('datasource.doris_host')" prop="configuration.host">
|
||||
<el-input v-model="form.configuration.host"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('datasource.data_base')" prop="configuration.dataBase">
|
||||
<el-input v-model="form.configuration.dataBase"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('datasource.user_name')">
|
||||
<el-input v-model="form.configuration.username"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('datasource.password')">
|
||||
<el-input v-model="form.configuration.password" show-password/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('datasource.query_port')" prop="configuration.port">
|
||||
<el-input v-model="form.configuration.port" autocomplete="off" type="number" min="0"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('datasource.http_port')" prop="configuration.httpPort">
|
||||
<el-input v-model="form.configuration.httpPort" autocomplete="off" type="number" min="0"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item
|
||||
:label="$t('datasource.doris_host')"
|
||||
prop="configuration.host"
|
||||
>
|
||||
<el-input v-model="form.configuration.host" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('datasource.data_base')"
|
||||
prop="configuration.dataBase"
|
||||
>
|
||||
<el-input v-model="form.configuration.dataBase" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('datasource.user_name')">
|
||||
<el-input v-model="form.configuration.username" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('datasource.password')">
|
||||
<el-input v-model="form.configuration.password" show-password />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('datasource.query_port')"
|
||||
prop="configuration.port"
|
||||
>
|
||||
<el-input-number
|
||||
controls-position="right"
|
||||
v-model="form.configuration.port"
|
||||
autocomplete="off"
|
||||
type="number"
|
||||
min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('datasource.http_port')"
|
||||
prop="configuration.httpPort"
|
||||
>
|
||||
<el-input-number
|
||||
controls-position="right"
|
||||
v-model="form.configuration.httpPort"
|
||||
autocomplete="off"
|
||||
type="number"
|
||||
min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-collapse>
|
||||
<el-collapse-item :title="$t('datasource.priority')" name="1">
|
||||
<el-form-item :label="$t('datasource.replication_num')" prop="configuration.replicationNum">
|
||||
<el-input v-model="form.configuration.replicationNum" autocomplete="off" type="number" min="1"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('datasource.bucket_num')" prop="configuration.bucketNum">
|
||||
<el-input v-model="form.configuration.bucketNum" autocomplete="off" type="number" min="1"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('datasource.initial_pool_size')" prop="configuration.initialPoolSize">
|
||||
<el-input v-model="form.configuration.initialPoolSize" autocomplete="off" type="number" min="0" size="small"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('datasource.min_pool_size')" prop="configuration.minPoolSize">
|
||||
<el-input v-model="form.configuration.minPoolSize" autocomplete="off" type="number" min="0"/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('datasource.max_pool_size')" prop="configuration.maxPoolSize">
|
||||
<el-input v-model="form.configuration.maxPoolSize" autocomplete="off" type="number" min="0"/>
|
||||
</el-form-item>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<span @click="showPriority = !showPriority" class="de-expand"
|
||||
>{{ $t("datasource.priority")
|
||||
}}<i v-if="showPriority" class="el-icon-arrow-up"></i>
|
||||
<i v-else class="el-icon-arrow-down"></i
|
||||
></span>
|
||||
<template v-if="showPriority">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="$t('datasource.replication_num')"
|
||||
prop="configuration.replicationNum"
|
||||
>
|
||||
<el-input-number
|
||||
controls-position="right"
|
||||
v-model="form.configuration.replicationNum"
|
||||
autocomplete="off"
|
||||
type="number"
|
||||
min="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="$t('datasource.bucket_num')"
|
||||
prop="configuration.bucketNum"
|
||||
>
|
||||
<el-input-number
|
||||
controls-position="right"
|
||||
v-model="form.configuration.bucketNum"
|
||||
autocomplete="off"
|
||||
type="number"
|
||||
min="1"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="$t('datasource.initial_pool_size')"
|
||||
prop="configuration.initialPoolSize"
|
||||
>
|
||||
<el-input-number
|
||||
controls-position="right"
|
||||
v-model="form.configuration.initialPoolSize"
|
||||
autocomplete="off"
|
||||
type="number"
|
||||
min="0"
|
||||
size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="$t('datasource.min_pool_size')"
|
||||
prop="configuration.minPoolSize"
|
||||
>
|
||||
<el-input-number
|
||||
controls-position="right"
|
||||
v-model="form.configuration.minPoolSize"
|
||||
autocomplete="off"
|
||||
type="number"
|
||||
min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
:label="$t('datasource.max_pool_size')"
|
||||
prop="configuration.maxPoolSize"
|
||||
>
|
||||
<el-input-number
|
||||
controls-position="right"
|
||||
v-model="form.configuration.maxPoolSize"
|
||||
autocomplete="off"
|
||||
type="number"
|
||||
min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-form>
|
||||
<div>
|
||||
<el-button type="primary" size="small" @click="validaDatasource">
|
||||
{{ $t('commons.validate') }}
|
||||
</el-button>
|
||||
<el-button v-if="showEdit" size="small" @click="edit">
|
||||
{{ $t('commons.edit') }}
|
||||
</el-button>
|
||||
<el-button v-if="showSave" type="success" size="small" @click="save">
|
||||
{{ $t('commons.save') }}
|
||||
</el-button>
|
||||
<el-button v-if="showCancel" type="info" size="small" @click="cancel">
|
||||
{{ $t('commons.cancel') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {engineInfo, validate, save} from '@/api/system/engine'
|
||||
import { engineInfo, validate, save } from "@/api/system/engine";
|
||||
import i18n from "@/lang";
|
||||
|
||||
import operater from "./operater";
|
||||
import msgCfm from '@/components/msgCfm'
|
||||
export default {
|
||||
name: 'ClusterMode',
|
||||
name: "ClusterMode",
|
||||
mixins: [msgCfm],
|
||||
components: {
|
||||
operater,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form:
|
||||
{
|
||||
type: 'engine_doris',
|
||||
configuration: {
|
||||
host: '',
|
||||
dataBase: '',
|
||||
username: '',
|
||||
password: '',
|
||||
port: '',
|
||||
httpPort: 8030,
|
||||
extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull',
|
||||
replicationNum: 1,
|
||||
bucketNum: 10,
|
||||
minPoolSize: 5,
|
||||
maxPoolSize: 50,
|
||||
initialPoolSize: 5
|
||||
}
|
||||
showPriority: false,
|
||||
form: {
|
||||
type: "engine_doris",
|
||||
configuration: {
|
||||
host: "",
|
||||
dataBase: "",
|
||||
username: "",
|
||||
password: "",
|
||||
port: "",
|
||||
httpPort: 8030,
|
||||
extraParams:
|
||||
"characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull",
|
||||
replicationNum: 1,
|
||||
bucketNum: 10,
|
||||
minPoolSize: 5,
|
||||
maxPoolSize: 50,
|
||||
initialPoolSize: 5,
|
||||
},
|
||||
},
|
||||
originConfiguration: {
|
||||
host: '',
|
||||
dataBase: '',
|
||||
username: '',
|
||||
password: '',
|
||||
port: '',
|
||||
host: "",
|
||||
dataBase: "",
|
||||
username: "",
|
||||
password: "",
|
||||
port: "",
|
||||
httpPort: 8030,
|
||||
extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull',
|
||||
extraParams:
|
||||
"characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull",
|
||||
replicationNum: 1,
|
||||
bucketNum: 10,
|
||||
minPoolSize: 5,
|
||||
maxPoolSize: 50,
|
||||
initialPoolSize: 5
|
||||
initialPoolSize: 5,
|
||||
},
|
||||
input: '',
|
||||
input: "",
|
||||
visible: true,
|
||||
showEdit: true,
|
||||
showSave: false,
|
||||
@ -142,155 +214,224 @@ export default {
|
||||
disabledSave: false,
|
||||
loading: false,
|
||||
rules: {
|
||||
'configuration.host': [
|
||||
"configuration.host": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('datasource.please_input_host'),
|
||||
trigger: ['change', 'blur']
|
||||
}
|
||||
message: this.$t("datasource.please_input_host"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
'configuration.port': [
|
||||
"configuration.port": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('datasource.please_input_port'),
|
||||
trigger: ['change', 'blur']
|
||||
}
|
||||
message: this.$t("datasource.please_input_port"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
'configuration.httpPort': [
|
||||
"configuration.httpPort": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('datasource.please_input_port'),
|
||||
trigger: ['change', 'blur']
|
||||
}
|
||||
message: this.$t("datasource.please_input_port"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
'configuration.dataBase': [
|
||||
"configuration.dataBase": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('datasource.please_input_data_base'),
|
||||
trigger: ['change', 'blur']
|
||||
}
|
||||
message: this.$t("datasource.please_input_data_base"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
'configuration.replicationNum': [
|
||||
"configuration.replicationNum": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('datasource.please_input_replication_num'),
|
||||
trigger: ['change', 'blur']
|
||||
}
|
||||
message: this.$t("datasource.please_input_replication_num"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
'configuration.bucketNum': [
|
||||
"configuration.bucketNum": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('datasource.please_input_bucket_num'),
|
||||
trigger: ['change', 'blur']
|
||||
}
|
||||
]
|
||||
message: this.$t("datasource.please_input_bucket_num"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
"configuration.minPoolSize": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("datasource.commons.cannot_be_null"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
"configuration.initialPoolSize": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("commons.cannot_be_null"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
"configuration.maxPoolSize": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("datasource.commons.cannot_be_null"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
},
|
||||
allTypes: [
|
||||
{
|
||||
name: 'engine_mysql',
|
||||
label: 'MySQL',
|
||||
type: 'jdbc',
|
||||
extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
|
||||
}
|
||||
]
|
||||
}
|
||||
name: "engine_mysql",
|
||||
label: "MySQL",
|
||||
type: "jdbc",
|
||||
extraParams:
|
||||
"characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.query()
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
query() {
|
||||
engineInfo().then(response => {
|
||||
engineInfo().then((response) => {
|
||||
if (response.data.id) {
|
||||
this.form = JSON.parse(JSON.stringify(response.data))
|
||||
this.form.configuration = JSON.parse(this.form.configuration)
|
||||
this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
|
||||
this.form = JSON.parse(JSON.stringify(response.data));
|
||||
this.form.configuration = JSON.parse(this.form.configuration);
|
||||
this.originConfiguration = JSON.parse(
|
||||
JSON.stringify(this.form.configuration)
|
||||
);
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.$refs.form.clearValidate()
|
||||
})
|
||||
})
|
||||
this.$refs.form.clearValidate();
|
||||
});
|
||||
});
|
||||
},
|
||||
edit() {
|
||||
this.showEdit = false
|
||||
this.showSave = true
|
||||
this.showCancel = true
|
||||
this.show = false
|
||||
this.showEdit = false;
|
||||
this.showSave = true;
|
||||
this.showCancel = true;
|
||||
this.show = false;
|
||||
},
|
||||
save() {
|
||||
if (this.form.configuration.dataSourceType === 'jdbc' && (this.form.configuration.port <= 0 || this.form.configuration.httpPort <= 0)) {
|
||||
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
|
||||
return
|
||||
if (
|
||||
this.form.configuration.dataSourceType === "jdbc" &&
|
||||
(this.form.configuration.port <= 0 ||
|
||||
this.form.configuration.httpPort <= 0)
|
||||
) {
|
||||
this.$message.error(i18n.t("datasource.port_no_less_then_0"));
|
||||
return;
|
||||
}
|
||||
if (this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0) {
|
||||
this.$message.error(i18n.t('datasource.no_less_then_0'))
|
||||
return
|
||||
if (
|
||||
this.form.configuration.initialPoolSize < 0 ||
|
||||
this.form.configuration.minPoolSize < 0 ||
|
||||
this.form.configuration.maxPoolSize < 0
|
||||
) {
|
||||
this.$message.error(i18n.t("datasource.no_less_then_0"));
|
||||
return;
|
||||
}
|
||||
this.$refs.form.validate(valid => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
const form = JSON.parse(JSON.stringify(this.form))
|
||||
form.configuration = JSON.stringify(form.configuration)
|
||||
save(form).then(res => {
|
||||
this.showEdit = true
|
||||
this.showCancel = false
|
||||
this.showSave = false
|
||||
this.show = true
|
||||
this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
|
||||
this.$success(i18n.t('commons.save_success'))
|
||||
})
|
||||
})
|
||||
const form = JSON.parse(JSON.stringify(this.form));
|
||||
form.configuration = JSON.stringify(form.configuration);
|
||||
save(form).then((res) => {
|
||||
this.showEdit = true;
|
||||
this.showCancel = false;
|
||||
this.showSave = false;
|
||||
this.show = true;
|
||||
this.originConfiguration = JSON.parse(
|
||||
JSON.stringify(this.form.configuration)
|
||||
);
|
||||
this.openMessageSuccess("commons.save_success");
|
||||
});
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.showEdit = true
|
||||
this.showCancel = false
|
||||
this.showSave = false
|
||||
this.show = true
|
||||
this.form.configuration = JSON.parse(JSON.stringify(this.originConfiguration))
|
||||
this.showEdit = true;
|
||||
this.showCancel = false;
|
||||
this.showSave = false;
|
||||
this.show = true;
|
||||
this.form.configuration = JSON.parse(
|
||||
JSON.stringify(this.originConfiguration)
|
||||
);
|
||||
},
|
||||
changeType() {
|
||||
for (let i = 0; i < this.allTypes.length; i++) {
|
||||
if (this.allTypes[i].name === this.form.type) {
|
||||
this.form.configuration.dataSourceType = this.allTypes[i].type
|
||||
this.form.configuration.extraParams = this.allTypes[i].extraParams
|
||||
this.form.configuration.dataSourceType = this.allTypes[i].type;
|
||||
this.form.configuration.extraParams = this.allTypes[i].extraParams;
|
||||
}
|
||||
}
|
||||
},
|
||||
validaDatasource() {
|
||||
if (!this.form.configuration.schema && this.form.type === 'oracle') {
|
||||
this.$message.error(i18n.t('datasource.please_choose_schema'))
|
||||
return
|
||||
if (!this.form.configuration.schema && this.form.type === "oracle") {
|
||||
this.$message.error(i18n.t("datasource.please_choose_schema"));
|
||||
return;
|
||||
}
|
||||
if (this.form.configuration.dataSourceType === 'jdbc' && (this.form.configuration.port <= 0 || this.form.configuration.httpPort <= 0)) {
|
||||
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
|
||||
return
|
||||
if (
|
||||
this.form.configuration.dataSourceType === "jdbc" &&
|
||||
(this.form.configuration.port <= 0 ||
|
||||
this.form.configuration.httpPort <= 0)
|
||||
) {
|
||||
this.$message.error(i18n.t("datasource.port_no_less_then_0"));
|
||||
return;
|
||||
}
|
||||
this.$refs.form.validate(valid => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.configuration = JSON.stringify(data.configuration)
|
||||
validate(data).then(res => {
|
||||
const data = JSON.parse(JSON.stringify(this.form));
|
||||
data.configuration = JSON.stringify(data.configuration);
|
||||
validate(data).then((res) => {
|
||||
if (res.success) {
|
||||
this.$success(i18n.t('datasource.validate_success'))
|
||||
this.openMessageSuccess("datasource.validate_success");
|
||||
} else {
|
||||
if (res.message.length < 2500) {
|
||||
this.$error(res.message)
|
||||
this.$error(res.message);
|
||||
} else {
|
||||
this.$error(res.message.substring(0, 2500) + '......')
|
||||
this.$error(res.message.substring(0, 2500) + "......");
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.de-expand {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: #3370ff;
|
||||
cursor: pointer;
|
||||
margin: 12px 0 16px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
::v-deep .el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
::v-deep.el-input-number__decrease,
|
||||
::v-deep.el-input-number__increase {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
.el-input-number__decrease {
|
||||
border-right-color: #e4e7ed;
|
||||
}
|
||||
|
||||
.el-input-number__increase {
|
||||
border-bottom-color: #e4e7ed;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
@ -1,111 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<operater title="system_parameter_setting.mailbox_service_settings">
|
||||
<deBtn v-if="showCancel" secondary @click="cancel">{{
|
||||
$t("commons.cancel")
|
||||
}}</deBtn>
|
||||
<deBtn
|
||||
secondary
|
||||
:disabled="disabledConnection"
|
||||
@click="testConnection('formInline')"
|
||||
>
|
||||
{{ $t("system_parameter_setting.test_connection") }}
|
||||
</deBtn>
|
||||
<deBtn type="primary" v-if="showEdit" @click="edit">{{
|
||||
$t("commons.edit")
|
||||
}}</deBtn>
|
||||
<deBtn
|
||||
v-if="showSave"
|
||||
type="primary"
|
||||
:disabled="disabledSave"
|
||||
|
||||
@click="save('formInline')"
|
||||
>
|
||||
{{ $t("commons.save") }}
|
||||
</deBtn>
|
||||
</operater>
|
||||
<!--邮件表单-->
|
||||
<el-form
|
||||
ref="formInline"
|
||||
v-loading="loading"
|
||||
:model="formInline"
|
||||
:rules="rules"
|
||||
class="demo-form-inline"
|
||||
class="demo-form-inline de-form-item"
|
||||
:disabled="show"
|
||||
size="small"
|
||||
>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('system_parameter_setting.SMTP_host')" prop="host">
|
||||
<el-input
|
||||
v-model="formInline.host"
|
||||
:placeholder="$t('system_parameter_setting.SMTP_host')"
|
||||
@input="change()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('system_parameter_setting.SMTP_port')" prop="port">
|
||||
<el-input
|
||||
v-model="formInline.port"
|
||||
:placeholder="$t('system_parameter_setting.SMTP_port')"
|
||||
@input="change()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('system_parameter_setting.SMTP_account')" prop="account">
|
||||
<el-input
|
||||
v-model="formInline.account"
|
||||
:placeholder="$t('system_parameter_setting.SMTP_account')"
|
||||
@input="change()"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('system_parameter_setting.SMTP_password')" prop="password">
|
||||
<el-input
|
||||
ref="input"
|
||||
v-model="formInline.password"
|
||||
:placeholder="$t('system_parameter_setting.SMTP_password')"
|
||||
autocomplete="new-password"
|
||||
show-password
|
||||
type="text"
|
||||
@focus="changeType"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item :label="$t('system_parameter_setting.test_recipients')">
|
||||
<el-input
|
||||
ref="input"
|
||||
v-model="formInline.recipient"
|
||||
:placeholder="$t('system_parameter_setting.test_recipients')"
|
||||
autocomplete="new-password"
|
||||
show-password
|
||||
type="text"
|
||||
/>
|
||||
<p style="color: #8a8b8d">({{ $t('system_parameter_setting.tip') }})</p>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item
|
||||
:label="$t('system_parameter_setting.SMTP_host')"
|
||||
prop="host"
|
||||
>
|
||||
<el-input
|
||||
v-model="formInline.host"
|
||||
:placeholder="$t('system_parameter_setting.SMTP_host')"
|
||||
@input="change()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('system_parameter_setting.SMTP_port')"
|
||||
prop="port"
|
||||
>
|
||||
<el-input
|
||||
v-model="formInline.port"
|
||||
:placeholder="$t('system_parameter_setting.SMTP_port')"
|
||||
@input="change()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('system_parameter_setting.SMTP_account')"
|
||||
prop="account"
|
||||
>
|
||||
<el-input
|
||||
v-model="formInline.account"
|
||||
:placeholder="$t('system_parameter_setting.SMTP_account')"
|
||||
@input="change()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('system_parameter_setting.SMTP_password')"
|
||||
prop="password"
|
||||
>
|
||||
<el-input
|
||||
ref="input"
|
||||
v-model="formInline.password"
|
||||
:placeholder="$t('system_parameter_setting.SMTP_password')"
|
||||
autocomplete="new-password"
|
||||
show-password
|
||||
type="text"
|
||||
@focus="changeType"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('system_parameter_setting.test_recipients')">
|
||||
<template slot="label">
|
||||
{{ $t("system_parameter_setting.test_recipients") }}
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="$t('system_parameter_setting.test_mail_recipient')"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-warning-outline tips-not-absolute"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input
|
||||
ref="input"
|
||||
v-model="formInline.recipient"
|
||||
:placeholder="$t('system_parameter_setting.test_recipients')"
|
||||
autocomplete="new-password"
|
||||
show-password
|
||||
type="text"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱服务器配置">
|
||||
<el-checkbox v-model="formInline.ssl"
|
||||
>开启SSL
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="$t('system_parameter_setting.to_enable_ssl')"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-warning-outline tips-not-absolute"></i>
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
|
||||
<el-checkbox v-model="formInline.tls">
|
||||
开启TSL
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="$t('system_parameter_setting.to_enable_tsl')"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-warning-outline tips-not-absolute"></i>
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<!---->
|
||||
<div style="border: 0px;margin-bottom: 20px">
|
||||
<el-checkbox v-model="formInline.ssl" :label="$t('system_parameter_setting.SSL')" />
|
||||
</div>
|
||||
<div style="border: 0px;margin-bottom: 20px">
|
||||
<el-checkbox v-model="formInline.tls" :label="$t('system_parameter_setting.TLS')" />
|
||||
</div>
|
||||
<template v-slot:footer />
|
||||
</el-form>
|
||||
<div>
|
||||
<el-button type="primary" :disabled="disabledConnection" size="small" @click="testConnection('formInline')">
|
||||
{{ $t('system_parameter_setting.test_connection') }}
|
||||
</el-button>
|
||||
<el-button v-if="showEdit" size="small" @click="edit">{{ $t('commons.edit') }}</el-button>
|
||||
<el-button v-if="showSave" type="success" :disabled="disabledSave" size="small" @click="save('formInline')">
|
||||
{{ $t('commons.save') }}
|
||||
</el-button>
|
||||
<el-button v-if="showCancel" type="info" size="small" @click="cancel">{{ $t('commons.cancel') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { emailInfo, updateInfo, validate } from '@/api/system/email'
|
||||
import { emailInfo, updateInfo, validate } from "@/api/system/email";
|
||||
import operater from "./operater";
|
||||
import msgCfm from '@/components/msgCfm'
|
||||
|
||||
export default {
|
||||
name: 'EmailSetting',
|
||||
name: "EmailSetting",
|
||||
mixins: [msgCfm],
|
||||
components: {
|
||||
operater,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formInline: {},
|
||||
input: '',
|
||||
input: "",
|
||||
visible: true,
|
||||
showEdit: true,
|
||||
showSave: false,
|
||||
@ -118,122 +157,159 @@ export default {
|
||||
host: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('system_parameter_setting.host'),
|
||||
trigger: ['change', 'blur']
|
||||
}
|
||||
message: this.$t("system_parameter_setting.host"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
port: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('system_parameter_setting.port'),
|
||||
trigger: ['change', 'blur']
|
||||
}
|
||||
message: this.$t("system_parameter_setting.port"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
account: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t('system_parameter_setting.account'),
|
||||
trigger: ['change', 'blur']
|
||||
}]
|
||||
}
|
||||
}
|
||||
message: this.$t("system_parameter_setting.account"),
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.query()
|
||||
this.query();
|
||||
},
|
||||
methods: {
|
||||
changeType() {
|
||||
this.$refs.input = 'password'
|
||||
this.$refs.input = "password";
|
||||
},
|
||||
query() {
|
||||
emailInfo().then(response => {
|
||||
this.formInline = response.data
|
||||
this.formInline.ssl = this.formInline.ssl === 'true'
|
||||
this.formInline.tls = this.formInline.tls === 'true'
|
||||
emailInfo().then((response) => {
|
||||
this.formInline = response.data;
|
||||
this.formInline.ssl = this.formInline.ssl === "true";
|
||||
this.formInline.tls = this.formInline.tls === "true";
|
||||
this.$nextTick(() => {
|
||||
this.$refs.formInline.clearValidate()
|
||||
})
|
||||
})
|
||||
this.$refs.formInline.clearValidate();
|
||||
});
|
||||
});
|
||||
},
|
||||
change() {
|
||||
if (!this.formInline.host || !this.formInline.port || !this.formInline.account) {
|
||||
this.disabledConnection = true
|
||||
this.disabledSave = true
|
||||
if (
|
||||
!this.formInline.host ||
|
||||
!this.formInline.port ||
|
||||
!this.formInline.account
|
||||
) {
|
||||
this.disabledConnection = true;
|
||||
this.disabledSave = true;
|
||||
} else {
|
||||
this.disabledConnection = false
|
||||
this.disabledSave = false
|
||||
this.disabledConnection = false;
|
||||
this.disabledSave = false;
|
||||
}
|
||||
},
|
||||
testConnection(formInline) {
|
||||
const param = {
|
||||
'smtp.host': this.formInline.host,
|
||||
'smtp.port': this.formInline.port,
|
||||
'smtp.account': this.formInline.account,
|
||||
'smtp.password': this.formInline.password,
|
||||
'smtp.ssl': this.formInline.ssl,
|
||||
'smtp.tls': this.formInline.tls,
|
||||
'smtp.recipient': this.formInline.recipient
|
||||
}
|
||||
"smtp.host": this.formInline.host,
|
||||
"smtp.port": this.formInline.port,
|
||||
"smtp.account": this.formInline.account,
|
||||
"smtp.password": this.formInline.password,
|
||||
"smtp.ssl": this.formInline.ssl,
|
||||
"smtp.tls": this.formInline.tls,
|
||||
"smtp.recipient": this.formInline.recipient,
|
||||
};
|
||||
this.$refs[formInline].validate((valid) => {
|
||||
if (valid) {
|
||||
validate(param).then(response => {
|
||||
this.$success(this.$t('commons.connection_successful'))
|
||||
})
|
||||
validate(param).then((response) => {
|
||||
this.openMessageSuccess("commons.connection_successful");
|
||||
});
|
||||
} else {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
edit() {
|
||||
this.showEdit = false
|
||||
this.showSave = true
|
||||
this.showCancel = true
|
||||
this.show = false
|
||||
this.showEdit = false;
|
||||
this.showSave = true;
|
||||
this.showCancel = true;
|
||||
this.show = false;
|
||||
},
|
||||
save(formInline) {
|
||||
this.showEdit = true
|
||||
this.showCancel = false
|
||||
this.showSave = false
|
||||
this.show = true
|
||||
this.showEdit = true;
|
||||
this.showCancel = false;
|
||||
this.showSave = false;
|
||||
this.show = true;
|
||||
const param = [
|
||||
{ paramKey: 'smtp.host', paramValue: this.formInline.host, type: 'text', sort: 1 },
|
||||
{ paramKey: 'smtp.port', paramValue: this.formInline.port, type: 'text', sort: 2 },
|
||||
{ paramKey: 'smtp.account', paramValue: this.formInline.account, type: 'text', sort: 3 },
|
||||
{ paramKey: 'smtp.password', paramValue: this.formInline.password, type: 'password', sort: 4 },
|
||||
{ paramKey: 'smtp.ssl', paramValue: this.formInline.ssl, type: 'text', sort: 5 },
|
||||
{ paramKey: 'smtp.tls', paramValue: this.formInline.tls, type: 'text', sort: 6 },
|
||||
{ paramKey: 'smtp.recipient', paramValue: this.formInline.recipient, type: 'text', sort: 8 }
|
||||
{
|
||||
paramKey: "smtp.host",
|
||||
paramValue: this.formInline.host,
|
||||
type: "text",
|
||||
sort: 1,
|
||||
},
|
||||
{
|
||||
paramKey: "smtp.port",
|
||||
paramValue: this.formInline.port,
|
||||
type: "text",
|
||||
sort: 2,
|
||||
},
|
||||
{
|
||||
paramKey: "smtp.account",
|
||||
paramValue: this.formInline.account,
|
||||
type: "text",
|
||||
sort: 3,
|
||||
},
|
||||
{
|
||||
paramKey: "smtp.password",
|
||||
paramValue: this.formInline.password,
|
||||
type: "password",
|
||||
sort: 4,
|
||||
},
|
||||
{
|
||||
paramKey: "smtp.ssl",
|
||||
paramValue: this.formInline.ssl,
|
||||
type: "text",
|
||||
sort: 5,
|
||||
},
|
||||
{
|
||||
paramKey: "smtp.tls",
|
||||
paramValue: this.formInline.tls,
|
||||
type: "text",
|
||||
sort: 6,
|
||||
},
|
||||
{
|
||||
paramKey: "smtp.recipient",
|
||||
paramValue: this.formInline.recipient,
|
||||
type: "text",
|
||||
sort: 8,
|
||||
},
|
||||
];
|
||||
|
||||
]
|
||||
|
||||
this.$refs[formInline].validate(valid => {
|
||||
this.$refs[formInline].validate((valid) => {
|
||||
if (valid) {
|
||||
updateInfo(param).then(response => {
|
||||
const flag = response.success
|
||||
updateInfo(param).then((response) => {
|
||||
const flag = response.success;
|
||||
if (flag) {
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
this.openMessageSuccess("commons.save_success");
|
||||
} else {
|
||||
this.$message.error(this.$t('commons.save_failed'))
|
||||
this.$message.error(this.$t("commons.save_failed"));
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
// this.result = false
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
cancel() {
|
||||
this.showEdit = true
|
||||
this.showCancel = false
|
||||
this.showSave = false
|
||||
this.show = true
|
||||
this.query()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
this.showEdit = true;
|
||||
this.showCancel = false;
|
||||
this.showSave = false;
|
||||
this.show = true;
|
||||
this.query();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,232 +1,344 @@
|
||||
<template>
|
||||
<el-col>
|
||||
<el-row style="margin-top: 10px;">
|
||||
<el-button icon="el-icon-circle-plus-outline" @click="create(undefined)">{{ $t('kettle.add') }}</el-button>
|
||||
<fu-table :data="data">
|
||||
<el-table-column prop="configuration.carte" :label="$t('kettle.carte')"/>
|
||||
<el-table-column prop="configuration.port" :label="$t('kettle.port')"/>
|
||||
<div class="kettle-setting">
|
||||
<deBtn type="primary" icon="el-icon-plus" @click="create(undefined)">{{
|
||||
$t("kettle.add")
|
||||
}}</deBtn>
|
||||
<div class="table-box">
|
||||
<grid-table
|
||||
:tableData="data"
|
||||
:pagination="paginationConfig"
|
||||
@size-change="sizeChange"
|
||||
@current-change="currentChange"
|
||||
>
|
||||
<el-table-column
|
||||
prop="configuration.carte"
|
||||
:label="$t('kettle.carte')"
|
||||
/>
|
||||
<el-table-column prop="configuration.port" :label="$t('kettle.port')" />
|
||||
<el-table-column prop="status" :label="$t('kettle.status')">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.status === 'Error'" style="color: red">{{ $t('datasource.invalid') }}</span>
|
||||
<span v-if="scope.row.status === 'Success'" style="color: green">{{ $t('datasource.valid') }}</span>
|
||||
<span
|
||||
v-if="scope.row.status === 'Error'"
|
||||
class="de-tag"
|
||||
style="color: #646a73; background: rgba(31, 35, 41, 0.1)"
|
||||
>{{ $t("datasource.invalid") }}</span
|
||||
>
|
||||
<span
|
||||
v-if="scope.row.status === 'Success'"
|
||||
class="de-tag"
|
||||
style="color: green; background: rgba(52, 199, 36, 0.2)"
|
||||
>{{ $t("datasource.valid") }}</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix/>
|
||||
</fu-table>
|
||||
<div class="pagination">
|
||||
<fu-table-pagination :current-page.sync="paginationConfig.currentPage"
|
||||
:page-size.sync="paginationConfig.pageSize"
|
||||
:total="paginationConfig.total"
|
||||
@size-change="sizeChange"
|
||||
@current-change="currentChange"/>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-dialog v-dialogDrag :title="edit_dialog_title" :visible="show_dialog" :before-close="closeDialog"
|
||||
:show-close="true" width="50%" class="dialog-css" append-to-body>
|
||||
<el-table-column
|
||||
slot="__operation"
|
||||
:label="$t('commons.operating')"
|
||||
fixed="right"
|
||||
width="168"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="create(scope.row)"
|
||||
class="text-btn"
|
||||
type="text"
|
||||
>{{ $t("commons.edit") }}</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="validateById(scope.row)"
|
||||
class="text-btn"
|
||||
type="text"
|
||||
>{{ $t("commons.validate") }}</el-button
|
||||
>
|
||||
<el-button @click="del(scope.row)" class="text-btn" type="text">{{
|
||||
$t("commons.delete")
|
||||
}}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</grid-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:title="edit_dialog_title"
|
||||
:visible="show_dialog"
|
||||
:before-close="closeDialog"
|
||||
:show-close="true"
|
||||
width="50%"
|
||||
class="dialog-css de-kettle"
|
||||
append-to-body
|
||||
>
|
||||
<el-col>
|
||||
<el-form ref="kettleform" :form="form" :model="form" label-width="120px" :rules="rule">
|
||||
<el-form
|
||||
class="de-form-item"
|
||||
ref="kettleform"
|
||||
:form="form"
|
||||
:model="form"
|
||||
label-width="120px"
|
||||
:rules="rule"
|
||||
>
|
||||
<el-form-item :label="$t('kettle.carte')" prop="configuration.carte">
|
||||
<el-input v-model="form.configuration.carte"/>
|
||||
<el-input v-model="form.configuration.carte" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('kettle.port')" prop="configuration.port">
|
||||
<el-input v-model="form.configuration.port" autocomplete="off" type="number" min="0"/>
|
||||
<el-input-number
|
||||
v-model="form.configuration.port"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('kettle.user')" prop="configuration.user">
|
||||
<el-input v-model="form.configuration.user"/>
|
||||
<el-input v-model="form.configuration.user" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('kettle.passwd')" prop="configuration.passwd">
|
||||
<el-input v-model="form.configuration.passwd" show-password/>
|
||||
<el-form-item
|
||||
:label="$t('kettle.passwd')"
|
||||
prop="configuration.passwd"
|
||||
>
|
||||
<el-input v-model="form.configuration.passwd" show-password />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</el-col>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="validate()">{{ $t('commons.validate') }}</el-button>
|
||||
<el-button type="primary" size="mini" @click="save()">{{ $t('commons.save') }}</el-button>
|
||||
<deBtn secondary @click="closeDialog">
|
||||
{{ $t("commons.cancel") }}
|
||||
</deBtn>
|
||||
<deBtn secondary @click="validate()">{{
|
||||
$t("commons.validate")
|
||||
}}</deBtn>
|
||||
<deBtn type="primary" @click="save()">{{
|
||||
$t("commons.confirm")
|
||||
}}</deBtn>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</el-col>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {deleteKettle, validate, save, pageList, validateById} from '@/api/system/kettle'
|
||||
import {
|
||||
deleteKettle,
|
||||
validate,
|
||||
save,
|
||||
pageList,
|
||||
validateById,
|
||||
} from "@/api/system/kettle";
|
||||
import i18n from "@/lang";
|
||||
import GridTable from "@/components/gridTable/index.vue";
|
||||
import msgCfm from '@/components/msgCfm'
|
||||
|
||||
export default {
|
||||
name: 'KettleSetting',
|
||||
name: "KettleSetting",
|
||||
components: { GridTable },
|
||||
mixins: [msgCfm],
|
||||
data() {
|
||||
return {
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
label: this.$t('commons.edit'),
|
||||
icon: 'el-icon-edit',
|
||||
type: 'primary',
|
||||
click: this.create
|
||||
},
|
||||
{
|
||||
label: this.$t('commons.validate'),
|
||||
icon: 'el-icon-success',
|
||||
type: 'success',
|
||||
click: this.validateById
|
||||
},
|
||||
{
|
||||
label: this.$t('commons.delete'),
|
||||
icon: 'el-icon-delete',
|
||||
type: 'danger',
|
||||
click: this.delete,
|
||||
}
|
||||
],
|
||||
last_condition: null,
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
data: [],
|
||||
show_dialog: false,
|
||||
edit_dialog_title: '',
|
||||
edit_dialog_title: "",
|
||||
form: {
|
||||
configuration: {
|
||||
carte: '',
|
||||
port: '',
|
||||
user: '',
|
||||
passwd: ''
|
||||
}
|
||||
carte: "",
|
||||
port: "",
|
||||
user: "",
|
||||
passwd: "",
|
||||
},
|
||||
},
|
||||
rule: {
|
||||
'configuration.carte': [{
|
||||
required: true,
|
||||
message: this.$t('commons.required'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.port': [{
|
||||
required: true,
|
||||
message: this.$t('commons.required'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.user': [{
|
||||
required: true,
|
||||
message: this.$t('commons.required'),
|
||||
trigger: 'blur'
|
||||
}],
|
||||
'configuration.passwd': [{
|
||||
required: true,
|
||||
message: this.$t('commons.required'),
|
||||
trigger: 'blur'
|
||||
}]
|
||||
}
|
||||
}
|
||||
"configuration.carte": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("commons.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
"configuration.port": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("commons.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
"configuration.user": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("commons.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
"configuration.passwd": [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("commons.required"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.search()
|
||||
this.search();
|
||||
},
|
||||
methods: {
|
||||
|
||||
currentChange() {
|
||||
this.search()
|
||||
initSearch() {
|
||||
this.currentChange(1);
|
||||
},
|
||||
sizeChange() {
|
||||
this.currentPage = 1;
|
||||
this.search()
|
||||
currentChange(currentPage) {
|
||||
this.paginationConfig.currentPage = currentPage;
|
||||
this.search();
|
||||
},
|
||||
sizeChange(pageSize) {
|
||||
this.paginationConfig.pageSize = pageSize;
|
||||
this.paginationConfig.currentPage = 1;
|
||||
this.search();
|
||||
},
|
||||
search() {
|
||||
const {currentPage, pageSize} = this.paginationConfig
|
||||
pageList('/kettle/pageList/' + currentPage + '/' + pageSize, {}).then(response => {
|
||||
this.data = response.data.listObject
|
||||
this.data.forEach(item => {
|
||||
item.configuration = JSON.parse(item.configuration)
|
||||
})
|
||||
this.paginationConfig.total = response.data.itemCount
|
||||
})
|
||||
const { currentPage, pageSize } = this.paginationConfig;
|
||||
pageList("/kettle/pageList/" + currentPage + "/" + pageSize, {}).then(
|
||||
(response) => {
|
||||
this.data = response.data.listObject;
|
||||
this.data.forEach((item) => {
|
||||
item.configuration = JSON.parse(item.configuration);
|
||||
});
|
||||
this.paginationConfig.total = response.data.itemCount;
|
||||
}
|
||||
);
|
||||
},
|
||||
delete(item) {
|
||||
deleteKettle(item.id).then(response => {
|
||||
this.search()
|
||||
})
|
||||
del(item) {
|
||||
deleteKettle(item.id).then((response) => {
|
||||
this.initSearch();
|
||||
});
|
||||
},
|
||||
create(item) {
|
||||
if (!item) {
|
||||
this.targetObjs = []
|
||||
this.form = {configuration: {carte: '', port: '', user: '', passwd: ''}}
|
||||
this.edit_dialog_title = this.$t('kettle.add')
|
||||
this.targetObjs = [];
|
||||
this.form = {
|
||||
configuration: { carte: "", port: "", user: "", passwd: "" },
|
||||
};
|
||||
this.edit_dialog_title = this.$t("kettle.add");
|
||||
} else {
|
||||
this.edit_dialog_title = this.$t('commons.edit')
|
||||
this.form = JSON.parse(JSON.stringify(item))
|
||||
this.edit_dialog_title = this.$t("commons.edit");
|
||||
this.form = JSON.parse(JSON.stringify(item));
|
||||
}
|
||||
this.show_dialog = true
|
||||
this.show_dialog = true;
|
||||
},
|
||||
|
||||
save() {
|
||||
this.$refs.kettleform.validate(valid => {
|
||||
this.$refs.kettleform.validate((valid) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
const form = JSON.parse(JSON.stringify(this.form))
|
||||
form.configuration = JSON.stringify(form.configuration)
|
||||
save(form).then(res => {
|
||||
this.show_dialog = false
|
||||
this.$success(i18n.t('commons.save_success'))
|
||||
this.search()
|
||||
})
|
||||
})
|
||||
const form = JSON.parse(JSON.stringify(this.form));
|
||||
form.configuration = JSON.stringify(form.configuration);
|
||||
save(form).then((res) => {
|
||||
this.show_dialog = false;
|
||||
this.openMessageSuccess("commons.save_success");
|
||||
this.initSearch();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
closeDialog() {
|
||||
this.show_dialog = false
|
||||
this.form = {configuration: {carte: '', port: '', user: '', passwd: ''}}
|
||||
this.$refs.kettleform.resetFields();
|
||||
this.show_dialog = false;
|
||||
this.form = {
|
||||
configuration: { carte: "", port: "", user: "", passwd: "" },
|
||||
};
|
||||
},
|
||||
|
||||
validate() {
|
||||
this.$refs.kettleform.validate(valid => {
|
||||
this.$refs.kettleform.validate((valid) => {
|
||||
if (valid) {
|
||||
validate(this.form.configuration).then(res => {
|
||||
if (res.success) {
|
||||
this.$success(i18n.t('datasource.validate_success'))
|
||||
} else {
|
||||
if (res.message.length < 2500) {
|
||||
this.$error(res.message)
|
||||
validate(this.form.configuration)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
this.openMessageSuccess("datasource.validate_success");
|
||||
} else {
|
||||
this.$error(res.message.substring(0, 2500) + '......')
|
||||
if (res.message.length < 2500) {
|
||||
this.$error(res.message);
|
||||
} else {
|
||||
this.$error(res.message.substring(0, 2500) + "......");
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch(res => {
|
||||
this.$error(res.message)
|
||||
})
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$error(res.message);
|
||||
});
|
||||
} else {
|
||||
return
|
||||
return;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
validateById(item) {
|
||||
validateById(item.id).then(res => {
|
||||
if (res.success) {
|
||||
item.status = res.data.status
|
||||
this.$success(i18n.t('datasource.validate_success'))
|
||||
} else {
|
||||
item.status = 'Error'
|
||||
if (res.message.length < 2500) {
|
||||
this.$error(res.message)
|
||||
validateById(item.id)
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
item.status = res.data.status;
|
||||
this.openMessageSuccess("datasource.validate_success");
|
||||
} else {
|
||||
this.$error(res.message.substring(0, 2500) + '......')
|
||||
item.status = "Error";
|
||||
if (res.message.length < 2500) {
|
||||
this.$error(res.message);
|
||||
} else {
|
||||
this.$error(res.message.substring(0, 2500) + "......");
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch(res => {
|
||||
this.$error(res.message)
|
||||
})
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$error(res.message);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.kettle-setting {
|
||||
height: 100%;
|
||||
.table-box {
|
||||
height: calc(100% - 52px);
|
||||
margin-top: 16px;
|
||||
|
||||
.text-btn {
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0px;
|
||||
text-align: center;
|
||||
margin-left: 2px;
|
||||
border: none;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.text-btn:hover {
|
||||
background: rgba(51, 112, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.de-kettle {
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
.el-input__inner {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.el-input-number__decrease,
|
||||
.el-input-number__increase {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.de-tag {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
}
|
||||
</style>
|
||||
@ -69,6 +69,7 @@
|
||||
|
||||
<script>
|
||||
import { removeMap } from '@/api/map/map'
|
||||
import msgCfm from '@/components/msgCfm'
|
||||
export default {
|
||||
name: 'MapSettingLeft',
|
||||
props: {
|
||||
@ -77,6 +78,7 @@ export default {
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
mixins: [msgCfm],
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
@ -154,7 +156,7 @@ export default {
|
||||
value: null
|
||||
}).then(() => {
|
||||
this.$emit('refresh-tree')
|
||||
this.$success(this.$t('commons.delete_success'))
|
||||
this.openMessageSuccess("commons.delete_success");
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
@ -117,10 +117,12 @@
|
||||
import jsonView from 'vue-json-views'
|
||||
import { geoJson, saveMap } from '@/api/map/map'
|
||||
import ElTreeSelect from '@/components/ElTreeSelect'
|
||||
import msgCfm from '@/components/msgCfm'
|
||||
|
||||
export default {
|
||||
name: 'MapSettingRight',
|
||||
components: { jsonView, ElTreeSelect },
|
||||
mixins: [msgCfm],
|
||||
props: {
|
||||
status: {
|
||||
type: String,
|
||||
@ -271,7 +273,7 @@ export default {
|
||||
const flag = response.success
|
||||
if (flag) {
|
||||
this.$emit('refresh-tree', param)
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
this.openMessageSuccess("commons.save_success");
|
||||
} else {
|
||||
this.$message.error(this.$t('commons.save_failed'))
|
||||
}
|
||||
|
||||
@ -93,9 +93,11 @@
|
||||
|
||||
import {engineInfo, validate, save} from '@/api/system/engine'
|
||||
import i18n from "@/lang";
|
||||
import msgCfm from '@/components/msgCfm'
|
||||
|
||||
export default {
|
||||
name: 'SimpleMode',
|
||||
mixins: [msgCfm],
|
||||
data() {
|
||||
return {
|
||||
form:
|
||||
@ -204,7 +206,7 @@ export default {
|
||||
this.showSave = false
|
||||
this.show = true
|
||||
this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
|
||||
this.$success(i18n.t('commons.save_success'))
|
||||
this.openMessageSuccess("commons.save_success");
|
||||
})
|
||||
})
|
||||
},
|
||||
@ -238,7 +240,7 @@ export default {
|
||||
data.configuration = JSON.stringify(data.configuration)
|
||||
validate(data).then(res => {
|
||||
if (res.success) {
|
||||
this.$success(i18n.t('datasource.validate_success'))
|
||||
this.openMessageSuccess("datasource.validate_success");
|
||||
} else {
|
||||
if (res.message.length < 2500) {
|
||||
this.$error(res.message)
|
||||
|
||||
@ -1,89 +1,181 @@
|
||||
<template>
|
||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<de-layout-content
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
>
|
||||
<div class="sys-setting">
|
||||
<el-tabs v-model="activeName" class="de-tabs">
|
||||
<el-tab-pane
|
||||
:lazy="true"
|
||||
:label="$t('system_parameter_setting.basic_setting')"
|
||||
name="zero"
|
||||
>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane :lazy="true" :label="$t('system_parameter_setting.basic_setting')" name="zero">
|
||||
<basic-setting v-if="activeName === 'zero'" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
:lazy="true"
|
||||
:label="$t('system_parameter_setting.mailbox_service_settings')"
|
||||
name="first"
|
||||
>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane :lazy="true" :label="$t('system_parameter_setting.mailbox_service_settings')" name="first">
|
||||
<email-setting />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :lazy="true" :label="$t('sysParams.map')" name="ten">
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane :lazy="true" :label="$t('sysParams.map')" name="ten">
|
||||
<map-setting v-if="activeName === 'ten'" ref="mapSetting" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="isPluginLoaded"
|
||||
:lazy="true"
|
||||
:label="$t('sysParams.ldap')"
|
||||
name="fourth"
|
||||
>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.display')" name="second">
|
||||
<plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="DisplaySetting" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="isPluginLoaded"
|
||||
:lazy="true"
|
||||
:label="$t('sysParams.oidc')"
|
||||
name="five"
|
||||
>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.theme')" name="third">
|
||||
<plugin-com v-if="isPluginLoaded" ref="ThemeSetting" component-name="ThemeSetting" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="engineMode === 'simple'"
|
||||
:lazy="true"
|
||||
:label="$t('system_parameter_setting.engine_mode_setting')"
|
||||
name="six"
|
||||
>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.ldap')" name="fourth">
|
||||
<plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="LdapSetting" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="engineMode === 'cluster'"
|
||||
:lazy="true"
|
||||
:label="$t('system_parameter_setting.engine_mode_setting')"
|
||||
name="seven"
|
||||
>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.oidc')" name="five">
|
||||
<plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="SsoSetting" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
v-if="engineMode === 'cluster'"
|
||||
:lazy="true"
|
||||
:label="$t('system_parameter_setting.kettle_setting')"
|
||||
name="eight"
|
||||
>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-if="engineMode==='simple'" :lazy="true" :label="$t('system_parameter_setting.engine_mode_setting')" name="six">
|
||||
<simple-mode />
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-if="engineMode==='cluster'" :lazy="true" :label="$t('system_parameter_setting.engine_mode_setting')" name="seven">
|
||||
<cluster-mode />
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-if="engineMode==='cluster'" :lazy="true" :label="$t('system_parameter_setting.kettle_setting')" name="eight">
|
||||
<kettle-setting />
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.cas')" name="nine">
|
||||
<plugin-com v-if="isPluginLoaded" ref="CasSetting" component-name="CasSetting" />
|
||||
</el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
</layout-content>
|
||||
<el-tab-pane
|
||||
v-if="isPluginLoaded"
|
||||
:lazy="true"
|
||||
:label="$t('sysParams.cas')"
|
||||
name="nine"
|
||||
>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div
|
||||
class="tabs-container"
|
||||
:class="[activeName !== 'eight' ? 'is-center' : 'pad-center']"
|
||||
>
|
||||
<div class="min-w600">
|
||||
<basic-setting v-if="activeName === 'zero'" />
|
||||
<email-setting v-if="activeName === 'first'" />
|
||||
<map-setting v-if="activeName === 'ten'" ref="mapSetting" />
|
||||
<plugin-com
|
||||
v-if="activeName === 'fourth'"
|
||||
ref="DisplaySetting"
|
||||
component-name="LdapSetting"
|
||||
/>
|
||||
<plugin-com
|
||||
v-if="activeName === 'five'"
|
||||
ref="DisplaySetting"
|
||||
component-name="SsoSetting"
|
||||
/>
|
||||
<simple-mode v-if="activeName === 'six'" />
|
||||
<cluster-mode v-if="activeName === 'seven'" />
|
||||
<kettle-setting v-if="activeName === 'eight'" />
|
||||
<plugin-com
|
||||
v-if="activeName === 'nine'"
|
||||
ref="CasSetting"
|
||||
component-name="CasSetting"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</de-layout-content>
|
||||
</template>
|
||||
<script>
|
||||
import BasicSetting from './BasicSetting'
|
||||
import MapSetting from './MapSetting'
|
||||
import EmailSetting from './EmailSetting'
|
||||
import SimpleMode from './SimpleModeSetting'
|
||||
import ClusterMode from './ClusterModeSetting'
|
||||
import KettleSetting from './KettleSetting'
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import PluginCom from '@/views/system/plugin/PluginCom'
|
||||
import { pluginLoaded } from '@/api/user'
|
||||
import { engineMode } from '@/api/system/engine'
|
||||
import BasicSetting from "./BasicSetting";
|
||||
import MapSetting from "./MapSetting";
|
||||
import EmailSetting from "./EmailSetting";
|
||||
import SimpleMode from "./SimpleModeSetting";
|
||||
import ClusterMode from "./ClusterModeSetting";
|
||||
import KettleSetting from "./KettleSetting";
|
||||
import DeLayoutContent from "@/components/business/DeLayoutContent";
|
||||
import PluginCom from "@/views/system/plugin/PluginCom";
|
||||
import { pluginLoaded } from "@/api/user";
|
||||
import { engineMode } from "@/api/system/engine";
|
||||
export default {
|
||||
|
||||
components: { BasicSetting, EmailSetting, LayoutContent, PluginCom, SimpleMode, ClusterMode, KettleSetting, MapSetting },
|
||||
components: {
|
||||
BasicSetting,
|
||||
EmailSetting,
|
||||
DeLayoutContent,
|
||||
PluginCom,
|
||||
SimpleMode,
|
||||
ClusterMode,
|
||||
KettleSetting,
|
||||
MapSetting,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'zero',
|
||||
activeName: "zero",
|
||||
isPluginLoaded: false,
|
||||
engineMode: 'local'
|
||||
}
|
||||
engineMode: "local",
|
||||
};
|
||||
},
|
||||
beforeCreate() {
|
||||
pluginLoaded().then(res => {
|
||||
this.isPluginLoaded = res.success && res.data
|
||||
})
|
||||
engineMode().then(res => {
|
||||
this.engineMode = res.data
|
||||
})
|
||||
pluginLoaded().then((res) => {
|
||||
this.isPluginLoaded = res.success && res.data;
|
||||
});
|
||||
engineMode().then((res) => {
|
||||
this.engineMode = res.data;
|
||||
});
|
||||
},
|
||||
created() {
|
||||
|
||||
computed: {
|
||||
btnList() {},
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
handlerBtn(btn) {
|
||||
console.log(1, btn);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.sys-setting {
|
||||
height: 100%;
|
||||
background-color: var(--MainBG, #f5f6f7);
|
||||
|
||||
.tabs-container {
|
||||
height: calc(100% - 48px);
|
||||
background: var(--ContentBG, #ffffff);
|
||||
overflow-x: auto;
|
||||
|
||||
.min-w600 {
|
||||
min-width: 600px;
|
||||
height: 100%;
|
||||
& > :nth-child(1) {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.pad-center {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
|
||||
36
frontend/src/views/system/SysParam/operater.vue
Normal file
36
frontend/src/views/system/SysParam/operater.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="operater-bar">
|
||||
<p class="title">{{ $t(title) }}</p>
|
||||
<div class="btn-grounp">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.operater-bar {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.title {
|
||||
font-family: PingFang SC;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: #1f2329;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +1,16 @@
|
||||
<template>
|
||||
<de-layout-content v-if="!noLayout" v-loading="jsname && !innerLoadingNames.includes(jsname) && $store.getters.loadingMap[$store.getters.currentPath]" :header="header" :back-name="backName">
|
||||
<de-layout-content v-if="!noLayout && menuid !== 740" v-loading="jsname && !innerLoadingNames.includes(jsname) && $store.getters.loadingMap[$store.getters.currentPath]" :header="header" :back-name="backName">
|
||||
<async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
|
||||
<div v-else>
|
||||
<h1>未知组件无法展示</h1>
|
||||
</div>
|
||||
</de-layout-content>
|
||||
<div v-else-if="menuid === 740">
|
||||
<async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
|
||||
<div v-else>
|
||||
<h1>未知组件无法展示</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<async-component v-if="showAsync" :url="url" @execute-axios="executeAxios" @on-add-languanges="addLanguages" @on-plugin-layout="setLayoutInfo" @plugin-call-back="pluginCallBack" />
|
||||
<div v-else>
|
||||
|
||||
@ -1,14 +1,80 @@
|
||||
<template>
|
||||
<div>外观配置</div>
|
||||
<de-layout-content
|
||||
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||
>
|
||||
<div class="display-setting">
|
||||
<el-tabs v-model="activeName" class="de-tabs">
|
||||
<el-tab-pane :label="$t('sysParams.display')" name="display">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('sysParams.theme')" name="theme"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
<div
|
||||
class="tabs-container"
|
||||
:class="[activeName !== 'theme' ? 'is-center' : 'pad-center']"
|
||||
>
|
||||
<div class="min-w600">
|
||||
<plugin-com
|
||||
v-if="activeName === 'display'"
|
||||
ref="DisplaySetting"
|
||||
component-name="DisplaySetting"
|
||||
/>
|
||||
<plugin-com
|
||||
v-if="activeName === 'theme'"
|
||||
ref="ThemeSetting"
|
||||
component-name="ThemeSetting"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</de-layout-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeLayoutContent from "@/components/business/DeLayoutContent";
|
||||
import PluginCom from "@/views/system/plugin/PluginCom";
|
||||
|
||||
export default {
|
||||
name: 'AppearanceSetting',
|
||||
name: "AppearanceSetting",
|
||||
components: { DeLayoutContent, PluginCom },
|
||||
data() {
|
||||
return {
|
||||
activeName: "display",
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.display-setting {
|
||||
height: 100%;
|
||||
background-color: var(--MainBG, #f5f6f7);
|
||||
|
||||
.tabs-container {
|
||||
height: calc(100% - 48px);
|
||||
background: var(--ContentBG, #ffffff);
|
||||
overflow-x: auto;
|
||||
|
||||
.min-w600 {
|
||||
min-width: 600px;
|
||||
height: 100%;
|
||||
|
||||
& > :nth-child(1) {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.pad-center {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
|
||||
@ -499,6 +499,7 @@ export default {
|
||||
},
|
||||
onError(e) {},
|
||||
handleSizeChange(pageSize) {
|
||||
this.paginationConfig.currentPage = 1;
|
||||
this.paginationConfig.pageSize = pageSize;
|
||||
this.search();
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user