forked from github/dataease
feat: 模版管理 优化
This commit is contained in:
dataeaseShu
parent
2d1d0ad774
commit
0934a01275
@ -49,7 +49,6 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
res = await window.SyncComponentCache[this.url]
|
res = await window.SyncComponentCache[this.url]
|
||||||
}
|
}
|
||||||
|
|
||||||
if (res) {
|
if (res) {
|
||||||
const Fn = Function
|
const Fn = Function
|
||||||
const dynamicCode = res.data || res
|
const dynamicCode = res.data || res
|
||||||
|
|||||||
@ -34,7 +34,7 @@ export default {
|
|||||||
return backPath || backName || backTo
|
return backPath || backName || backTo
|
||||||
},
|
},
|
||||||
needInnerPadding() {
|
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 {
|
.layout-inner-padding {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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',
|
engine_mode_setting: 'Engine Setting',
|
||||||
kettle_setting: 'Kettle Setting',
|
kettle_setting: 'Kettle Setting',
|
||||||
cas_selected_warn: 'Selecting CAS will cause you to login again',
|
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: {
|
chart: {
|
||||||
rich_text_view: 'Rich Text View',
|
rich_text_view: 'Rich Text View',
|
||||||
|
|||||||
@ -717,7 +717,82 @@ export default {
|
|||||||
engine_mode_setting: '引擎設置',
|
engine_mode_setting: '引擎設置',
|
||||||
kettle_setting: 'Kettle 設置',
|
kettle_setting: 'Kettle 設置',
|
||||||
cas_selected_warn: '選擇CAS方式保存後會註銷當前回話，重新登錄',
|
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: {
|
chart: {
|
||||||
rich_text_view: '富文本视图',
|
rich_text_view: '富文本视图',
|
||||||
|
|||||||
@ -693,7 +693,7 @@ export default {
|
|||||||
edite_organization: '编辑组织'
|
edite_organization: '编辑组织'
|
||||||
},
|
},
|
||||||
system_parameter_setting: {
|
system_parameter_setting: {
|
||||||
mailbox_service_settings: '邮件设置',
|
mailbox_service_settings: '邮件设置',
|
||||||
test_connection: '测试连接',
|
test_connection: '测试连接',
|
||||||
SMTP_host: 'SMTP主机',
|
SMTP_host: 'SMTP主机',
|
||||||
basic_setting: '基础设置',
|
basic_setting: '基础设置',
|
||||||
@ -718,7 +718,82 @@ export default {
|
|||||||
engine_mode_setting: '引擎设置',
|
engine_mode_setting: '引擎设置',
|
||||||
kettle_setting: 'Kettle 设置',
|
kettle_setting: 'Kettle 设置',
|
||||||
cas_selected_warn: '选择CAS方式保存后会注销当前回话，重新登录',
|
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: {
|
chart: {
|
||||||
rich_text_view: '富文本视图',
|
rich_text_view: '富文本视图',
|
||||||
@ -1914,7 +1989,7 @@ export default {
|
|||||||
title: '系统名称',
|
title: '系统名称',
|
||||||
advice_size: '建议图片大小',
|
advice_size: '建议图片大小',
|
||||||
theme: '主题颜色',
|
theme: '主题颜色',
|
||||||
|
favicon: '网站图标',
|
||||||
topMenuColor: '头部背景',
|
topMenuColor: '头部背景',
|
||||||
topMenuActiveColor: '头部选中背景',
|
topMenuActiveColor: '头部选中背景',
|
||||||
|
|
||||||
|
|||||||
@ -26,6 +26,7 @@ import DeViewSelect from '@/components/DeViewSelect'
|
|||||||
import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
|
import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
|
||||||
import TitleRemark from '@/views/chart/view/TitleRemark'
|
import TitleRemark from '@/views/chart/view/TitleRemark'
|
||||||
import '@/components/canvas/custom-component' // 注册自定义组件
|
import '@/components/canvas/custom-component' // 注册自定义组件
|
||||||
|
import deBtn from '@/components/deCustomCm/deBtn.vue'
|
||||||
|
|
||||||
import '@/utils/DateUtil'
|
import '@/utils/DateUtil'
|
||||||
import draggable from 'vuedraggable'
|
import draggable from 'vuedraggable'
|
||||||
@ -92,6 +93,8 @@ Vue.component('DeComplexSelect', DeComplexSelect)
|
|||||||
Vue.component('DeViewSelect', DeViewSelect)
|
Vue.component('DeViewSelect', DeViewSelect)
|
||||||
Vue.component('RemarkEditor', RemarkEditor)
|
Vue.component('RemarkEditor', RemarkEditor)
|
||||||
Vue.component('TitleRemark', TitleRemark)
|
Vue.component('TitleRemark', TitleRemark)
|
||||||
|
Vue.component('deBtn', deBtn)
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
import vueToPdf from 'vue-to-pdf'
|
import vueToPdf from 'vue-to-pdf'
|
||||||
|
|||||||
@ -854,7 +854,7 @@ div:focus {
|
|||||||
display: none !important;
|
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;
|
color: #1F2329 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -867,6 +867,20 @@ div:focus {
|
|||||||
background-color: rgba(31, 35, 41, 0.15) !important;
|
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) {
|
.el-tabs__item:not(.is-active) {
|
||||||
font-weight: 400 !important;
|
font-weight: 400 !important;
|
||||||
}
|
}
|
||||||
@ -915,19 +929,19 @@ div:focus {
|
|||||||
margin-right: 8.67px;
|
margin-right: 8.67px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.de-message-fail {
|
.de-message-error {
|
||||||
border: 1px solid #f54a45 !important;
|
border: 1px solid var(--deDanger, #f54a45) !important;
|
||||||
background: #fef1f1 !important;
|
background: var(--deWhitemsgDeDanger, #fef1f1) !important;
|
||||||
i {
|
i {
|
||||||
color: #f54a45;
|
color: var(--deDanger, #f54a45);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.de-message-success {
|
.de-message-success {
|
||||||
border: 1px solid #34c724 !important;
|
border: 1px solid var(--deSuccess, #34c724) !important;
|
||||||
background: #f0fbef !important;
|
background: var(--deWhitemsgDeSuccess, #f0fbef) !important;
|
||||||
i {
|
i {
|
||||||
color: #34c724;
|
color: var(--deSuccess, #34c724);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -978,3 +992,178 @@ div:focus {
|
|||||||
.user-import-class>.el-dialog__body {
|
.user-import-class>.el-dialog__body {
|
||||||
padding-bottom: 1px;
|
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>
|
<template>
|
||||||
<el-row v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
<div
|
||||||
<el-row style="margin-top: 5px">
|
class="template-import"
|
||||||
<el-col :span="4">{{ $t('commons.name') }}</el-col>
|
v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
|
||||||
<el-col :span="16">
|
>
|
||||||
<el-input v-model="templateInfo.name" clearable size="mini" />
|
<el-form
|
||||||
</el-col>
|
ref="templateImportForm"
|
||||||
<el-col :span="4">
|
class="de-form-item"
|
||||||
<el-button style="margin-left: 10px" class="el-icon-upload" size="small" type="primary" @click="goFile">{{ $t('panel.upload_template') }}</el-button>
|
:model="templateInfo"
|
||||||
<input id="input" ref="files" type="file" accept=".DET" hidden @change="handleFileChange">
|
:rules="templateInfoRules"
|
||||||
</el-col>
|
>
|
||||||
</el-row>
|
<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="preview" :style="classBackground" />
|
||||||
<el-row class="root-class">
|
<el-row class="de-root-class">
|
||||||
<el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
|
<deBtn secondary @click="cancel()">{{
|
||||||
<el-button type="primary" size="mini" @click="save()">{{ $t('commons.confirm') }}</el-button>
|
$t("commons.cancel")
|
||||||
|
}}</deBtn>
|
||||||
|
<deBtn type="primary" @click="save()">{{
|
||||||
|
$t("commons.confirm")
|
||||||
|
}}</deBtn>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-row>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
|
mixins: [msgCfm],
|
||||||
props: {
|
props: {
|
||||||
pid: {
|
pid: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tableRadio: null,
|
|
||||||
keyWordSearch: '',
|
|
||||||
columnLabel: this.$t('panel.belong_to_category'),
|
|
||||||
templateList: [],
|
|
||||||
importTemplateInfo: {
|
importTemplateInfo: {
|
||||||
snapshot: ''
|
snapshot: "",
|
||||||
},
|
},
|
||||||
|
templateInfoRules: {
|
||||||
|
name: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: this.$t("commons.input_content"),
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
recover: false,
|
||||||
templateInfo: {
|
templateInfo: {
|
||||||
level: '1',
|
level: "1",
|
||||||
pid: this.pid,
|
pid: this.pid,
|
||||||
name: '',
|
name: "",
|
||||||
templateStyle: null,
|
templateStyle: null,
|
||||||
templateData: null,
|
templateData: null,
|
||||||
dynamicData: null,
|
dynamicData: null,
|
||||||
staticResource: null,
|
staticResource: null,
|
||||||
snapshot: ''
|
snapshot: "",
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
classBackground() {
|
classBackground() {
|
||||||
if (this.importTemplateInfo.snapshot) {
|
if (this.importTemplateInfo.snapshot) {
|
||||||
return {
|
return {
|
||||||
background: `url(${this.importTemplateInfo.snapshot}) no-repeat`
|
background: `url(${this.importTemplateInfo.snapshot}) no-repeat`,
|
||||||
}
|
};
|
||||||
} else {
|
} else {
|
||||||
return {}
|
return {};
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.showCurrentTemplate(this.pid);
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
cancel() {
|
||||||
this.$emit('closeEditTemplateDialog')
|
this.$emit("closeEditTemplateDialog");
|
||||||
},
|
},
|
||||||
save() {
|
save() {
|
||||||
if (!this.templateInfo.name) {
|
if (!this.templateInfo.name) {
|
||||||
this.$warning(this.$t('chart.name_can_not_empty'))
|
this.$warning(this.$t("chart.name_can_not_empty"));
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
if (!this.templateInfo.templateData) {
|
if (!this.templateInfo.templateData) {
|
||||||
this.$warning(this.$t('chart.template_can_not_empty'))
|
this.$warning(this.$t("chart.template_can_not_empty"));
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
const nameCheckRequest = {
|
const nameCheckRequest = {
|
||||||
pid: this.templateInfo.pid,
|
pid: this.templateInfo.pid,
|
||||||
name: this.templateInfo.name,
|
name: this.templateInfo.name,
|
||||||
optType: 'insert'
|
optType: "insert",
|
||||||
}
|
};
|
||||||
nameCheck(nameCheckRequest).then(response => {
|
nameCheck(nameCheckRequest).then((response) => {
|
||||||
if (response.data.indexOf('exist') > -1) {
|
if (response.data.indexOf("exist") > -1) {
|
||||||
this.$confirm(this.$t('template.exit_same_template_check'), this.$t('template.confirm_upload'), {
|
const options = {
|
||||||
confirmButtonText: this.$t('template.override'),
|
title: 'commons.prompt',
|
||||||
cancelButtonText: this.$t('template.cancel'),
|
content: "system_parameter_setting.to_overwrite_them",
|
||||||
type: 'warning'
|
type: "primary",
|
||||||
}).then(() => {
|
cb: () => save(this.templateInfo).then((response) => {
|
||||||
save(this.templateInfo).then(response => {
|
this.openMessageSuccess("system_parameter_setting.import_succeeded");
|
||||||
this.$message({
|
this.$emit("closeEditTemplateDialog");
|
||||||
message: this.$t('commons.save_success'),
|
}),
|
||||||
type: 'success',
|
confirmButtonText: this.$t('template.override')
|
||||||
showClose: true
|
};
|
||||||
})
|
this.handlerConfirm(options);
|
||||||
this.$emit('closeEditTemplateDialog')
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
save(this.templateInfo).then(response => {
|
save(this.templateInfo).then((response) => {
|
||||||
this.$message({
|
this.openMessageSuccess("system_parameter_setting.import_succeeded");
|
||||||
message: this.$t('commons.save_success'),
|
this.$emit("closeEditTemplateDialog");
|
||||||
type: 'success',
|
});
|
||||||
showClose: true
|
|
||||||
})
|
|
||||||
this.$emit('closeEditTemplateDialog')
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
handleFileChange(e) {
|
handleFileChange(e) {
|
||||||
const file = e.target.files[0]
|
const file = e.target.files[0];
|
||||||
const reader = new FileReader()
|
const reader = new FileReader();
|
||||||
reader.onload = (res) => {
|
reader.onload = (res) => {
|
||||||
const result = res.target.result
|
const result = res.target.result;
|
||||||
this.importTemplateInfo = JSON.parse(result)
|
this.importTemplateInfo = JSON.parse(result);
|
||||||
this.templateInfo.name = this.importTemplateInfo.name
|
this.templateInfo.name = this.importTemplateInfo.name;
|
||||||
this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle
|
this.templateInfo.templateStyle = this.importTemplateInfo.panelStyle;
|
||||||
this.templateInfo.templateData = this.importTemplateInfo.panelData
|
this.templateInfo.templateData = this.importTemplateInfo.panelData;
|
||||||
this.templateInfo.snapshot = this.importTemplateInfo.snapshot
|
this.templateInfo.snapshot = this.importTemplateInfo.snapshot;
|
||||||
this.templateInfo.dynamicData = this.importTemplateInfo.dynamicData
|
this.templateInfo.dynamicData = this.importTemplateInfo.dynamicData;
|
||||||
this.templateInfo.staticResource = this.importTemplateInfo.staticResource
|
this.templateInfo.staticResource =
|
||||||
this.templateInfo.nodeType = 'template'
|
this.importTemplateInfo.staticResource;
|
||||||
}
|
this.templateInfo.nodeType = "template";
|
||||||
reader.readAsText(file)
|
};
|
||||||
|
reader.readAsText(file);
|
||||||
},
|
},
|
||||||
goFile() {
|
goFile() {
|
||||||
this.$refs.files.click()
|
this.$refs.files.click();
|
||||||
}
|
},
|
||||||
|
},
|
||||||
}
|
};
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.my_table ::v-deep .el-table__row > td {
|
||||||
.my_table ::v-deep .el-table__row>td{
|
|
||||||
/* 去除表格线 */
|
/* 去除表格线 */
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0 0;
|
padding: 0 0;
|
||||||
}
|
}
|
||||||
.my_table ::v-deep .el-table th.is-leaf {
|
.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;
|
height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root-class {
|
.de-root-class {
|
||||||
margin: 15px 0px 5px;
|
margin-top: 24px;
|
||||||
text-align: center;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.preview {
|
.preview {
|
||||||
margin-top: 5px;
|
margin-top: -12px;
|
||||||
border:1px solid #E6E6E6;
|
border: 1px solid #e6e6e6;
|
||||||
height:300px !important;
|
height: 300px !important;
|
||||||
overflow:auto;
|
overflow: auto;
|
||||||
background-size: 100% 100% !important;
|
background-size: 100% 100% !important;
|
||||||
}
|
border-radius: 4px;
|
||||||
.preview-show {
|
}
|
||||||
border-left:1px solid #E6E6E6;
|
.preview-show {
|
||||||
height:300px;
|
border-left: 1px solid #e6e6e6;
|
||||||
background-size: 100% 100% !important;
|
height: 300px;
|
||||||
}
|
background-size: 100% 100% !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,114 +1,127 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="testcase-template">
|
<div class="de-card-model">
|
||||||
<div class="template-img" :style="classBackground">
|
<div class="card-img-model">
|
||||||
<i class="el-icon-error" @click.stop="templateDelete" />
|
<img :src="model.snapshot" alt="" />
|
||||||
<i class="el-icon-edit" @click.stop="templateEdit" />
|
</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>
|
</div>
|
||||||
<el-tooltip class="item" effect="light" :content="template.name" placement="bottom">
|
|
||||||
<span class="demonstration">{{ template.name }}</span>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
import { get, post } from '@/api/panel/panel'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TemplateItem',
|
|
||||||
props: {
|
props: {
|
||||||
template: {
|
model: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {
|
default: () => {},
|
||||||
return {}
|
},
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
classBackground() {
|
|
||||||
if (this.template.snapshot) {
|
|
||||||
return {
|
|
||||||
background: `url(${this.template.snapshot}) no-repeat`,
|
|
||||||
'background-size': `100% 100%`
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
templateDelete() {
|
handleCommand(key) {
|
||||||
this.$alert(this.$t('panel.confirm_delete') + this.$t('panel.template') + ': ' + this.template.name + '？', '', {
|
this.$emit("command", key);
|
||||||
confirmButtonText: this.$t('panel.confirm'),
|
|
||||||
callback: (action) => {
|
|
||||||
if (action === 'confirm') {
|
|
||||||
this.$emit('templateDelete', this.template.id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
templateEdit() {
|
},
|
||||||
this.$emit('templateEdit', this.template)
|
};
|
||||||
},
|
|
||||||
handleDelete() {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</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 {
|
img {
|
||||||
display: inline-block;
|
width: 100%;
|
||||||
margin: 10px 30px;
|
height: 100%;
|
||||||
width: 150px;
|
border-top-left-radius: 4px;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.demonstration {
|
.card-info {
|
||||||
display: block;
|
width: 100%;
|
||||||
font-size: 14px;
|
display: flex;
|
||||||
color: gray;
|
align-items: center;
|
||||||
text-align: center;
|
justify-content: space-between;
|
||||||
margin: 10px auto;
|
padding: 8px 12px 9px 12px;
|
||||||
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;
|
|
||||||
box-sizing: border-box;
|
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 {
|
.de-model-text {
|
||||||
border: solid 1px #4b8fdf;
|
font-family: "PingFang SC";
|
||||||
border-radius: 3px;
|
font-style: normal;
|
||||||
color: deepskyblue;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
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{
|
.de-card-model:hover {
|
||||||
display:none;
|
box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08);
|
||||||
float: right;
|
}
|
||||||
color: gray;
|
|
||||||
margin: 2px;
|
.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>
|
</style>
|
||||||
|
|||||||
@ -1,163 +1,235 @@
|
|||||||
<template xmlns:el-col="http://www.w3.org/1999/html">
|
<template xmlns:el-col="http://www.w3.org/1999/html">
|
||||||
<el-col>
|
<div class="de-template-list">
|
||||||
<el-row>
|
<el-input
|
||||||
<el-button icon="el-icon-folder-add" type="primary" size="mini" @click="add()">
|
v-model="templateFilterText"
|
||||||
{{ $t('panel.add_category') }}
|
:placeholder="$t('panel.filter_keywords')"
|
||||||
</el-button>
|
size="mini"
|
||||||
</el-row>
|
clearable
|
||||||
<el-row style="margin-top: 5px">
|
prefix-icon="el-icon-search"
|
||||||
<el-row>
|
/>
|
||||||
<el-input
|
<el-empty
|
||||||
v-model="templateFilterText"
|
v-if="!templateListComputed.length && templateFilterText === ''"
|
||||||
:placeholder="$t('panel.filter_keywords')"
|
description="暂无分类"
|
||||||
size="mini"
|
></el-empty>
|
||||||
clearable
|
<el-empty
|
||||||
prefix-icon="el-icon-search"
|
v-if="!templateListComputed.length && templateFilterText !== ''"
|
||||||
/>
|
description="没有找到相关内容"
|
||||||
</el-row>
|
></el-empty>
|
||||||
<el-row style="margin-top: 5px">
|
<ul>
|
||||||
<el-tree
|
<li
|
||||||
ref="templateTree"
|
:class="[{ select: activeTemplate === ele.id }]"
|
||||||
:default-expanded-keys="defaultExpandedKeys"
|
@click="nodeClick(ele)"
|
||||||
:data="templateList"
|
v-for="ele in templateListComputed"
|
||||||
node-key="id"
|
:key="ele.name"
|
||||||
:expand-on-click-node="true"
|
>
|
||||||
:filter-node-method="filterNode"
|
<i class="el-icon-folder folder" />
|
||||||
:highlight-current="true"
|
<span>{{ ele.name }}</span>
|
||||||
@node-click="nodeClick"
|
<span @click.stop class="more">
|
||||||
>
|
<el-dropdown
|
||||||
<span slot-scope="{ node, data }" class="custom-tree-node">
|
trigger="click"
|
||||||
<span style="display: flex; flex: 1 1 0%; width: 0px;">
|
size="small"
|
||||||
<span>
|
@command="(type) => clickMore(type, ele)"
|
||||||
<i class="el-icon-folder" />
|
>
|
||||||
</span>
|
<span class="el-dropdown-link">
|
||||||
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
|
<i class="el-icon-more"></i>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<el-dropdown-menu class="de-template-dropdown" slot="dropdown">
|
||||||
<span @click.stop>
|
<el-dropdown-item icon="el-icon-upload2" command="import">
|
||||||
<el-dropdown trigger="click" size="small" @command="clickMore">
|
{{ $t("panel.import") }}
|
||||||
<span class="el-dropdown-link">
|
</el-dropdown-item>
|
||||||
<el-button
|
<el-dropdown-item icon="el-icon-edit" command="edit">
|
||||||
icon="el-icon-more"
|
{{ $t("panel.rename") }}
|
||||||
type="text"
|
</el-dropdown-item>
|
||||||
size="small"
|
<el-dropdown-item icon="el-icon-delete" command="delete">
|
||||||
/>
|
{{ $t("panel.delete") }}
|
||||||
</span>
|
</el-dropdown-item>
|
||||||
<el-dropdown-menu slot="dropdown">
|
</el-dropdown-menu>
|
||||||
<el-dropdown-item icon="el-icon-upload2" :command="beforeClickMore('import',data,node)">
|
</el-dropdown>
|
||||||
{{ $t('panel.import') }}
|
</span>
|
||||||
</el-dropdown-item>
|
</li>
|
||||||
<el-dropdown-item icon="el-icon-edit" :command="beforeClickMore('edit',data,node)">
|
</ul>
|
||||||
{{ $t('panel.rename') }}
|
<deBtn
|
||||||
</el-dropdown-item>
|
v-if="templateFilterText === ''"
|
||||||
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
|
style="width: 100%"
|
||||||
{{ $t('panel.delete') }}
|
icon="el-icon-plus"
|
||||||
</el-dropdown-item>
|
secondary
|
||||||
</el-dropdown-menu>
|
@click="add()"
|
||||||
</el-dropdown>
|
>
|
||||||
</span>
|
{{ $t("panel.add_category") }}
|
||||||
</span>
|
</deBtn>
|
||||||
</span>
|
</div>
|
||||||
|
|
||||||
</el-tree>
|
|
||||||
</el-row>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'TemplateList',
|
name: "TemplateList",
|
||||||
components: { },
|
components: {},
|
||||||
props: {
|
props: {
|
||||||
templateType: {
|
templateType: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: "",
|
||||||
},
|
},
|
||||||
templateList: {
|
templateList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: function() {
|
default: function () {
|
||||||
return []
|
return [];
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
templateFilterText: '',
|
templateFilterText: "",
|
||||||
defaultExpandedKeys: [],
|
activeTemplate: "",
|
||||||
currentTemplateShowList: []
|
};
|
||||||
}
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
templateListComputed() {
|
||||||
},
|
// if (!this.templateFilterText)
|
||||||
watch: {
|
// return [
|
||||||
templateFilterText(val) {
|
// ...this.templateList,
|
||||||
this.$refs.templateTree.filter(val)
|
// ...this.templateList,
|
||||||
}
|
// ...this.templateList,
|
||||||
|
// ...this.templateList,
|
||||||
|
// ];
|
||||||
|
if (!this.templateFilterText) return [...this.templateList];
|
||||||
|
return this.templateList.filter((ele) =>
|
||||||
|
ele.name.includes(this.templateFilterText)
|
||||||
|
);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
clickAdd() {
|
clickMore(type, data) {
|
||||||
|
switch (type) {
|
||||||
},
|
case "edit":
|
||||||
clickMore(param) {
|
this.templateEdit(data);
|
||||||
switch (param.type) {
|
break;
|
||||||
case 'edit':
|
case "delete":
|
||||||
this.templateEdit(param.data)
|
this.templateDelete(data);
|
||||||
break
|
break;
|
||||||
case 'delete':
|
case "import":
|
||||||
this.templateDelete(param.data)
|
this.templateImport(data);
|
||||||
break
|
break;
|
||||||
case 'import':
|
|
||||||
this.templateImport(param.data)
|
|
||||||
break
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeClickMore(type, data, node) {
|
nodeClick({ id, label }) {
|
||||||
return {
|
this.activeTemplate = id;
|
||||||
'type': type,
|
this.$emit("showCurrentTemplate", id, label);
|
||||||
'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)
|
|
||||||
},
|
},
|
||||||
add() {
|
add() {
|
||||||
this.$emit('showTemplateEditDialog', 'new')
|
this.$emit("showTemplateEditDialog", "new");
|
||||||
},
|
},
|
||||||
templateDelete(template) {
|
templateDelete(template) {
|
||||||
this.$alert(this.$t('panel.confirm_delete') + this.$t('panel.category') + ': ' + template.name + '？', '', {
|
this.$alert(
|
||||||
confirmButtonText: this.$t('panel.confirm_delete'),
|
this.$t("panel.confirm_delete") +
|
||||||
callback: (action) => {
|
this.$t("panel.category") +
|
||||||
if (action === 'confirm') {
|
": " +
|
||||||
this.$emit('templateDelete', template.id)
|
template.name +
|
||||||
}
|
"？",
|
||||||
|
"",
|
||||||
|
{
|
||||||
|
confirmButtonText: this.$t("panel.confirm_delete"),
|
||||||
|
callback: (action) => {
|
||||||
|
if (action === "confirm") {
|
||||||
|
this.$emit("templateDelete", template.id);
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
})
|
);
|
||||||
},
|
},
|
||||||
templateEdit(template) {
|
templateEdit(template) {
|
||||||
this.$emit('templateEdit', template)
|
this.$emit("templateEdit", template);
|
||||||
},
|
},
|
||||||
templateImport(template) {
|
templateImport(template) {
|
||||||
this.$emit('templateImport', template.id)
|
this.$emit("templateImport", template.id);
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.custom-tree-node {
|
.de-template-list {
|
||||||
flex: 1;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
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;
|
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>
|
</style>
|
||||||
|
|||||||
@ -1,25 +1,27 @@
|
|||||||
<template>
|
<template>
|
||||||
<de-container class="content-container">
|
<de-layout-content>
|
||||||
<de-aside-container class="template-aside-container" is-template>
|
<div class="de-template">
|
||||||
<el-tabs v-model="currentTemplateType" @tab-click="handleClick">
|
<el-tabs
|
||||||
|
class="de-tabs"
|
||||||
|
v-model="currentTemplateType"
|
||||||
|
@tab-click="handleClick"
|
||||||
|
>
|
||||||
<el-tab-pane name="self">
|
<el-tab-pane name="self">
|
||||||
<span slot="label"><i class="el-icon-star-off tablepanel-i" />{{ $t('panel.user_template') }}</span>
|
<span slot="label">{{ $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"
|
|
||||||
/>
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane v-permission="['sys-template:read']" name="system">
|
<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
|
<template-list
|
||||||
v-if="currentTemplateType==='system'"
|
ref="templateList"
|
||||||
:template-type="currentTemplateType"
|
:template-type="currentTemplateType"
|
||||||
:template-list="templateList"
|
:template-list="templateList"
|
||||||
@templateDelete="templateDelete"
|
@templateDelete="templateDelete"
|
||||||
@ -28,196 +30,370 @@
|
|||||||
@templateImport="templateImport"
|
@templateImport="templateImport"
|
||||||
@showTemplateEditDialog="showTemplateEditDialog"
|
@showTemplateEditDialog="showTemplateEditDialog"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</div>
|
||||||
</el-tabs>
|
<div class="de-tabs-right">
|
||||||
</de-aside-container>
|
<div v-if="currentTemplateLabel" class="active-template">
|
||||||
<de-main-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
{{ currentTemplateLabel }}({{ currentTemplateShowList.length }})
|
||||||
<template-item
|
<deBtn
|
||||||
v-for="item in currentTemplateShowList"
|
type="primary"
|
||||||
:key="item.id"
|
@click="templateImport(currentTemplateId)"
|
||||||
:template="item"
|
icon="el-icon-upload2"
|
||||||
@templateDelete="templateDelete"
|
>
|
||||||
@templateEdit="templateEdit"
|
{{ $t("panel.import") }}
|
||||||
/>
|
</deBtn>
|
||||||
</de-main-container>
|
</div>
|
||||||
<el-dialog :title="dialogTitle" :visible="editTemplate" :show-close="false" width="30%">
|
<el-empty
|
||||||
<el-form ref="templateEditForm" :model="templateEditForm" :rules="templateEditFormRules">
|
v-if="!currentTemplateShowList.length"
|
||||||
<el-form-item :label="$t('commons.name')" prop="name">
|
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-input v-model="templateEditForm.name" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
<el-button size="mini" @click="close()">{{ $t('commons.cancel') }}</el-button>
|
<deBtn secondary @click="close()">{{ $t("commons.cancel") }}</deBtn>
|
||||||
<el-button type="primary" size="mini" @click="saveTemplateEdit(templateEditForm)">{{ $t('commons.confirm') }}
|
<deBtn type="primary" @click="saveTemplateEdit(templateEditForm)"
|
||||||
</el-button>
|
>{{ $t("commons.confirm") }}
|
||||||
|
</deBtn>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<!--导入templatedialog-->
|
<!--导入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
|
<template-import
|
||||||
v-if="templateDialog.visible"
|
v-if="templateDialog.visible"
|
||||||
:pid="templateDialog.pid"
|
:pid="templateDialog.pid"
|
||||||
@closeEditTemplateDialog="closeEditTemplateDialog"
|
@closeEditTemplateDialog="closeEditTemplateDialog"
|
||||||
/>
|
/>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</de-container>
|
</de-layout-content>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
import DeLayoutContent from "@/components/business/DeLayoutContent";
|
||||||
import DeContainer from '@/components/dataease/DeContainer'
|
import TemplateList from "./component/TemplateList";
|
||||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
import TemplateItem from "./component/TemplateItem";
|
||||||
import TemplateList from './component/TemplateList'
|
import TemplateImport from "./component/TemplateImport";
|
||||||
import TemplateItem from './component/TemplateItem'
|
import { save, templateDelete, find } from "@/api/system/template";
|
||||||
import TemplateImport from './component/TemplateImport'
|
import msgCfm from "@/components/msgCfm/index";
|
||||||
import { save, templateDelete, find } from '@/api/system/template'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'PanelMain',
|
name: "PanelMain",
|
||||||
components: { DeMainContainer, DeContainer, DeAsideContainer, TemplateList, TemplateItem, TemplateImport },
|
mixins: [msgCfm],
|
||||||
|
components: { DeLayoutContent, TemplateList, TemplateItem, TemplateImport },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showShare: false,
|
showShare: false,
|
||||||
currentTemplateShowList: [],
|
currentTemplateShowList: [],
|
||||||
currentPid: '',
|
currentPid: "",
|
||||||
currentTemplateType: 'self',
|
currentTemplateType: "self",
|
||||||
templateEditFormRules: {
|
templateEditFormRules: {
|
||||||
name: [
|
name: [
|
||||||
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' },
|
{ required: true, trigger: "blur", validator: this.roleValidator },
|
||||||
{ max: 50, message: this.$t('commons.char_can_not_more_50'), trigger: 'change' }
|
{
|
||||||
]
|
required: true,
|
||||||
|
message: this.$t("commons.input_content"),
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
max: 50,
|
||||||
|
message: this.$t("commons.char_can_not_more_50"),
|
||||||
|
trigger: "change",
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
templateEditForm: {},
|
templateEditForm: {},
|
||||||
editTemplate: false,
|
editTemplate: false,
|
||||||
dialogTitle: '',
|
dialogTitle: "",
|
||||||
|
dialogTitleLabel: "",
|
||||||
|
currentTemplateLabel: "",
|
||||||
|
currentTemplateId: "",
|
||||||
templateList: [],
|
templateList: [],
|
||||||
|
formType: "",
|
||||||
|
originName: "",
|
||||||
templateDialog: {
|
templateDialog: {
|
||||||
title: this.$t('panel.import_template'),
|
title: this.$t("panel.import_template"),
|
||||||
visible: false,
|
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() {
|
mounted() {
|
||||||
this.getTree()
|
this.getTree();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleClick(tab, event) {
|
roleValidator(rule, value, callback) {
|
||||||
this.getTree()
|
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) {
|
nameRepeat(value) {
|
||||||
this.currentTemplateId = pid
|
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) {
|
if (this.currentTemplateId) {
|
||||||
find({ pid: this.currentTemplateId }).then(response => {
|
find({ pid: this.currentTemplateId }).then((response) => {
|
||||||
this.currentTemplateShowList = response.data
|
this.currentTemplateShowList = response.data;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
templateDelete(id) {
|
templateDelete(id) {
|
||||||
if (id) {
|
if (id) {
|
||||||
templateDelete(id).then(response => {
|
templateDelete(id).then((response) => {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: this.$t('commons.delete_success'),
|
message: this.$t("commons.delete_success"),
|
||||||
type: 'success',
|
type: "success",
|
||||||
showClose: true
|
showClose: true,
|
||||||
})
|
});
|
||||||
this.getTree()
|
this.getTree();
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showTemplateEditDialog(type, templateInfo) {
|
showTemplateEditDialog(type, templateInfo) {
|
||||||
if (type === 'edit') {
|
this.templateEditForm = null;
|
||||||
this.dialogTitle = this.$t('commons.edit')
|
this.formType = type;
|
||||||
this.templateEditForm = JSON.parse(JSON.stringify(templateInfo))
|
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 {
|
} else {
|
||||||
this.dialogTitle = this.$t('commons.create')
|
this.dialogTitle = this.$t("panel.add_category");
|
||||||
this.templateEditForm = { name: '', nodeType: 'folder', templateType: this.currentTemplateType, level: 0 }
|
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) {
|
templateEdit(templateInfo) {
|
||||||
this.showTemplateEditDialog('edit', templateInfo)
|
this.showTemplateEditDialog("edit", templateInfo);
|
||||||
},
|
},
|
||||||
saveTemplateEdit(templateEditForm) {
|
saveTemplateEdit(templateEditForm) {
|
||||||
this.$refs['templateEditForm'].validate((valid) => {
|
this.$refs["templateEditForm"].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
save(templateEditForm).then(response => {
|
save(templateEditForm).then((response) => {
|
||||||
this.close()
|
this.close();
|
||||||
this.$message({
|
this.openMessageSuccess(
|
||||||
message: this.$t('commons.save_success'),
|
`system_parameter_setting.${
|
||||||
type: 'success',
|
this.templateEditForm.id
|
||||||
showClose: true
|
? "rename_succeeded"
|
||||||
})
|
: "added_successfully"
|
||||||
this.getTree()
|
}`
|
||||||
})
|
);
|
||||||
|
this.getTree();
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
this.$refs['templateEditForm'].resetFields()
|
this.$refs["templateEditForm"].resetFields();
|
||||||
this.editTemplate = false
|
this.editTemplate = false;
|
||||||
},
|
},
|
||||||
getTree() {
|
getTree() {
|
||||||
const request = {
|
const request = {
|
||||||
templateType: this.currentTemplateType,
|
templateType: this.currentTemplateType,
|
||||||
level: '0'
|
level: "0",
|
||||||
}
|
};
|
||||||
find(request).then(res => {
|
find(request).then((res) => {
|
||||||
this.templateList = res.data
|
this.templateList = res.data;
|
||||||
this.showFirst()
|
this.showFirst();
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
showFirst() {
|
showFirst() {
|
||||||
// 判断是否默认点击第一条
|
// 判断是否默认点击第一条
|
||||||
if (this.templateList && this.templateList.length > 0) {
|
if (this.templateList && this.templateList.length > 0) {
|
||||||
let showFirst = true
|
let showFirst = true;
|
||||||
this.templateList.forEach(template => {
|
this.templateList.forEach((template) => {
|
||||||
if (template.id === this.currentTemplateId) {
|
if (template.id === this.currentTemplateId) {
|
||||||
showFirst = false
|
showFirst = false;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
if (showFirst) {
|
if (showFirst) {
|
||||||
this.$nextTick().then(() => {
|
this.$nextTick().then(() => {
|
||||||
const firstNode = document.querySelector('.el-tree-node')
|
const [obj = {}] = this.templateList;
|
||||||
firstNode.click()
|
this.$refs.templateList.nodeClick(obj);
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
this.showCurrentTemplate(this.currentTemplateId)
|
this.showCurrentTemplate(this.currentTemplateId);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.currentTemplateShowList = []
|
this.currentTemplateShowList = [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
closeEditTemplateDialog() {
|
closeEditTemplateDialog() {
|
||||||
this.templateDialog.visible = false
|
this.templateDialog.visible = false;
|
||||||
this.showCurrentTemplate(this.templateDialog.pid)
|
this.showCurrentTemplate(this.templateDialog.pid);
|
||||||
},
|
},
|
||||||
templateImport(pid) {
|
templateImport(pid) {
|
||||||
this.templateDialog.visible = true
|
this.templateDialog.visible = true;
|
||||||
this.templateDialog.pid = pid
|
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>
|
||||||
|
|
||||||
<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>
|
|
||||||
@ -1,95 +1,87 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<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
|
<el-form ref="formInline" v-loading="loading" :model="formInline" :rules="rules"
|
||||||
ref="formInline"
|
class="demo-form-inline de-form-item" :disabled="show" label-width="80px" label-position="right" size="small">
|
||||||
v-loading="loading"
|
<el-form-item prop="frontTimeOut">
|
||||||
:model="formInline"
|
<template slot="label">
|
||||||
:rules="rules"
|
{{ $t('system_parameter_setting.request_timeout')}}
|
||||||
class="demo-form-inline"
|
<el-tooltip class="item" effect="dark" :content="$t('system_parameter_setting.front_time_out')"
|
||||||
:disabled="show"
|
placement="top">
|
||||||
size="small"
|
<i class="el-icon-warning-outline tips"></i>
|
||||||
>
|
</el-tooltip>
|
||||||
<el-row>
|
</template>
|
||||||
<el-col>
|
<el-input v-model="formInline.frontTimeOut" :placeholder="$t('system_parameter_setting.empty_front')"><template
|
||||||
<el-form-item :label="$t('system_parameter_setting.front_time_out')" prop="frontTimeOut">
|
slot="append">{{ $t("panel.second") }}</template></el-input>
|
||||||
<el-input
|
</el-form-item>
|
||||||
v-model="formInline.frontTimeOut"
|
<el-form-item :label="$t('system_parameter_setting.message_retention_time')" prop="msgTimeOut">
|
||||||
:placeholder="$t('system_parameter_setting.empty_front')"
|
<el-input v-model="formInline.msgTimeOut" :placeholder="$t('system_parameter_setting.empty_msg')"><template
|
||||||
/>
|
slot="append">天</template></el-input>
|
||||||
</el-form-item>
|
</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-row v-if="loginTypes.length > 1">
|
<el-form-item v-if="loginTypes.length > 1" :label="$t('system_parameter_setting.login_type')" prop="loginType">
|
||||||
<el-col>
|
<el-radio-group v-model="formInline.loginType">
|
||||||
<el-form-item :label="$t('system_parameter_setting.login_type')" prop="loginType">
|
<el-radio :label="0" size="mini">{{
|
||||||
<el-radio-group v-model="formInline.loginType">
|
$t("login.default_login")
|
||||||
<el-radio :label="0" size="mini">{{ $t('login.default_login') }}</el-radio>
|
}}</el-radio>
|
||||||
<el-radio v-if="loginTypes.includes(1)" :label="1" size="mini">LDAP</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(2)" :label="2" size="mini">OIDC</el-radio>
|
||||||
<el-radio v-if="loginTypes.includes(3)" :label="3" size="mini">CAS</el-radio>
|
<el-radio v-if="loginTypes.includes(3)" :label="3" size="mini">CAS</el-radio>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
</el-form-item>
|
<!-- <el-row v-if="loginTypes.includes(3)">
|
||||||
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<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-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-form-item :label="
|
||||||
<el-col>
|
$t('commons.yes') + $t('commons.no') + $t('display.openMarketPage')
|
||||||
<el-form-item :label="$t('display.openMarketPage')">
|
">
|
||||||
<el-checkbox v-model="formInline.openMarketPage" true-label="true" false-label="false" />
|
<el-radio-group v-model="formInline.openMarketPage">
|
||||||
</el-form-item>
|
<el-radio label="true" size="mini">{{ $t("commons.yes") }}</el-radio>
|
||||||
</el-col>
|
<el-radio label="false" size="mini">{{ $t("commons.no") }}</el-radio>
|
||||||
</el-row>
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
<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.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>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { basicInfo, updateInfo } from "@/api/system/basic";
|
||||||
import { basicInfo, updateInfo } from '@/api/system/basic'
|
import { ldapStatus, oidcStatus, casStatus } from "@/api/user";
|
||||||
import { ldapStatus, oidcStatus, casStatus } from '@/api/user'
|
import bus from "@/utils/bus";
|
||||||
import bus from '@/utils/bus'
|
import operater from "./operater";
|
||||||
|
import msgCfm from '@/components/msgCfm'
|
||||||
export default {
|
export default {
|
||||||
name: 'EmailSetting',
|
name: "EmailSetting",
|
||||||
|
mixins: [msgCfm],
|
||||||
|
components: {
|
||||||
|
operater,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
formInline: {},
|
formInline: {},
|
||||||
input: '',
|
|
||||||
visible: true,
|
|
||||||
showEdit: true,
|
showEdit: true,
|
||||||
showSave: false,
|
showSave: false,
|
||||||
showCancel: false,
|
showCancel: false,
|
||||||
@ -100,134 +92,175 @@ export default {
|
|||||||
rules: {
|
rules: {
|
||||||
frontTimeOut: [
|
frontTimeOut: [
|
||||||
{
|
{
|
||||||
pattern: '^([0-9]|\\b[1-9]\\d\\b|\\b[1-2]\\d\\d\\b|\\b300\\b)$', // 修改了正则表达式，让其正确匹配0-300的数值
|
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'),
|
message: this.$t("system_parameter_setting.front_error"),
|
||||||
trigger: 'blur'
|
trigger: "blur",
|
||||||
}
|
required: true,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
msgTimeOut: [
|
msgTimeOut: [
|
||||||
{
|
{
|
||||||
pattern: '^([1-9]|[1-9][0-9]|[1-2][0-9][0-9]|3[0-5][0-9]|36[0-5])$',
|
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'),
|
message: this.$t("system_parameter_setting.msg_error"),
|
||||||
trigger: 'blur'
|
trigger: "blur",
|
||||||
}
|
required: true,
|
||||||
]
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
originLoginType: null
|
originLoginType: null,
|
||||||
}
|
};
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
computed: {},
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
ldapStatus().then(res => {
|
ldapStatus().then((res) => {
|
||||||
if (res.success && res.data) {
|
if (res.success && res.data) {
|
||||||
this.loginTypes.push(1)
|
this.loginTypes.push(1);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
oidcStatus().then(res => {
|
oidcStatus().then((res) => {
|
||||||
if (res.success && res.data) {
|
if (res.success && res.data) {
|
||||||
this.loginTypes.push(2)
|
this.loginTypes.push(2);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
casStatus().then(res => {
|
casStatus().then((res) => {
|
||||||
if (res.success && res.data) {
|
if (res.success && res.data) {
|
||||||
this.loginTypes.push(3)
|
this.loginTypes.push(3);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.query()
|
this.query();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
query() {
|
query() {
|
||||||
basicInfo().then(response => {
|
basicInfo().then((response) => {
|
||||||
this.formInline = response.data
|
this.formInline = response.data;
|
||||||
|
|
||||||
if (this.formInline && !this.formInline.loginType) {
|
if (this.formInline && !this.formInline.loginType) {
|
||||||
this.formInline.loginType = 0
|
this.formInline.loginType = 0;
|
||||||
}
|
}
|
||||||
if (!this.originLoginType) {
|
if (!this.originLoginType) {
|
||||||
this.originLoginType = this.formInline.loginType
|
this.originLoginType = this.formInline.loginType;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.formInline.clearValidate()
|
this.$refs.formInline.clearValidate();
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
edit() {
|
edit() {
|
||||||
this.showEdit = false
|
this.showEdit = false;
|
||||||
this.showSave = true
|
this.showSave = true;
|
||||||
this.showCancel = true
|
this.showCancel = true;
|
||||||
this.show = false
|
this.show = false;
|
||||||
},
|
},
|
||||||
save(formInline) {
|
save(formInline) {
|
||||||
const param = [
|
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.frontTimeOut",
|
||||||
{ paramKey: 'basic.loginType', paramValue: this.formInline.loginType, type: 'text', sort: 3 },
|
paramValue: this.formInline.frontTimeOut,
|
||||||
{ paramKey: 'ui.openHomePage', paramValue: this.formInline.openHomePage, type: 'text', sort: 13 },
|
type: "text",
|
||||||
{ paramKey: 'ui.openMarketPage', paramValue: this.formInline.openMarketPage, type: 'text', sort: 14 }
|
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) {
|
if (valid) {
|
||||||
const needWarn = this.formInline.loginType === 3 && this.originLoginType !== 3
|
const needWarn =
|
||||||
|
this.formInline.loginType === 3 && this.originLoginType !== 3;
|
||||||
if (needWarn) {
|
if (needWarn) {
|
||||||
this.$confirm(this.$t('system_parameter_setting.cas_selected_warn'), '', {
|
this.$confirm(
|
||||||
confirmButtonText: this.$t('commons.confirm'),
|
this.$t("system_parameter_setting.cas_selected_warn"),
|
||||||
cancelButtonText: this.$t('commons.cancel'),
|
"",
|
||||||
type: 'warning'
|
{
|
||||||
}).then(() => {
|
confirmButtonText: this.$t("commons.confirm"),
|
||||||
this.saveHandler(param)
|
cancelButtonText: this.$t("commons.cancel"),
|
||||||
}).catch(() => {
|
type: "warning",
|
||||||
// this.$info(this.$t('commons.delete_cancel'))
|
}
|
||||||
})
|
)
|
||||||
return
|
.then(() => {
|
||||||
|
this.saveHandler(param);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// this.$info(this.$t('commons.delete_cancel'))
|
||||||
|
});
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
this.saveHandler(param)
|
this.saveHandler(param);
|
||||||
} else {
|
} else {
|
||||||
// this.result = false
|
// this.result = false
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
saveHandler(param) {
|
saveHandler(param) {
|
||||||
updateInfo(param).then(response => {
|
updateInfo(param).then((response) => {
|
||||||
const flag = response.success
|
const flag = response.success;
|
||||||
if (flag) {
|
if (flag) {
|
||||||
if (response.data && response.data.needLogout) {
|
if (response.data && response.data.needLogout) {
|
||||||
const casEnable = response.data.casEnable
|
const casEnable = response.data.casEnable;
|
||||||
bus.$emit('sys-logout', { casEnable })
|
bus.$emit("sys-logout", { casEnable });
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
this.$success(this.$t('commons.save_success'))
|
this.openMessageSuccess("commons.save_success");
|
||||||
this.showEdit = true
|
this.showEdit = true;
|
||||||
this.showCancel = false
|
this.showCancel = false;
|
||||||
this.showSave = false
|
this.showSave = false;
|
||||||
this.show = true
|
this.show = true;
|
||||||
window.location.reload()
|
window.location.reload();
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(this.$t('commons.save_failed'))
|
} this.openMessageSuccess("commons.save_failed", 'error');
|
||||||
}
|
});
|
||||||
})
|
|
||||||
},
|
},
|
||||||
cancel() {
|
cancel() {
|
||||||
this.showEdit = true
|
this.showEdit = true;
|
||||||
this.showCancel = false
|
this.showCancel = false;
|
||||||
this.showSave = false
|
this.showSave = false;
|
||||||
this.show = true
|
this.show = true;
|
||||||
this.query()
|
this.query();
|
||||||
}
|
},
|
||||||
|
},
|
||||||
}
|
};
|
||||||
}
|
|
||||||
</script>
|
</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>
|
</style>
|
||||||
|
|||||||
@ -1,138 +1,210 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-form ref="form" v-loading="loading"
|
<operater title="system_parameter_setting.engine_mode_setting">
|
||||||
:model="form"
|
<deBtn v-if="showCancel" secondary @click="cancel">
|
||||||
:rules="rules"
|
{{ $t("commons.cancel") }}
|
||||||
class="demo-form-inline"
|
</deBtn>
|
||||||
:disabled="show"
|
<deBtn secondary @click="validaDatasource">
|
||||||
label-width="180px"
|
{{ $t("commons.validate") }}
|
||||||
label-position="top"
|
</deBtn>
|
||||||
size="small"
|
<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-form-item
|
||||||
<el-col>
|
:label="$t('datasource.doris_host')"
|
||||||
<el-form-item :label="$t('datasource.doris_host')" prop="configuration.host">
|
prop="configuration.host"
|
||||||
<el-input v-model="form.configuration.host"/>
|
>
|
||||||
</el-form-item>
|
<el-input v-model="form.configuration.host" />
|
||||||
</el-col>
|
</el-form-item>
|
||||||
</el-row>
|
<el-form-item
|
||||||
<el-row>
|
:label="$t('datasource.data_base')"
|
||||||
<el-col>
|
prop="configuration.dataBase"
|
||||||
<el-form-item :label="$t('datasource.data_base')" prop="configuration.dataBase">
|
>
|
||||||
<el-input v-model="form.configuration.dataBase"/>
|
<el-input v-model="form.configuration.dataBase" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
<el-form-item :label="$t('datasource.user_name')">
|
||||||
</el-row>
|
<el-input v-model="form.configuration.username" />
|
||||||
<el-row>
|
</el-form-item>
|
||||||
<el-col>
|
<el-form-item :label="$t('datasource.password')">
|
||||||
<el-form-item :label="$t('datasource.user_name')">
|
<el-input v-model="form.configuration.password" show-password />
|
||||||
<el-input v-model="form.configuration.username"/>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item
|
||||||
</el-col>
|
:label="$t('datasource.query_port')"
|
||||||
</el-row>
|
prop="configuration.port"
|
||||||
<el-row>
|
>
|
||||||
<el-col>
|
<el-input-number
|
||||||
<el-form-item :label="$t('datasource.password')">
|
controls-position="right"
|
||||||
<el-input v-model="form.configuration.password" show-password/>
|
v-model="form.configuration.port"
|
||||||
</el-form-item>
|
autocomplete="off"
|
||||||
</el-col>
|
type="number"
|
||||||
</el-row>
|
min="0"
|
||||||
<el-row>
|
/>
|
||||||
<el-col>
|
</el-form-item>
|
||||||
<el-form-item :label="$t('datasource.query_port')" prop="configuration.port">
|
<el-form-item
|
||||||
<el-input v-model="form.configuration.port" autocomplete="off" type="number" min="0"/>
|
:label="$t('datasource.http_port')"
|
||||||
</el-form-item>
|
prop="configuration.httpPort"
|
||||||
</el-col>
|
>
|
||||||
</el-row>
|
<el-input-number
|
||||||
<el-row>
|
controls-position="right"
|
||||||
<el-col>
|
v-model="form.configuration.httpPort"
|
||||||
<el-form-item :label="$t('datasource.http_port')" prop="configuration.httpPort">
|
autocomplete="off"
|
||||||
<el-input v-model="form.configuration.httpPort" autocomplete="off" type="number" min="0"/>
|
type="number"
|
||||||
</el-form-item>
|
min="0"
|
||||||
</el-col>
|
/>
|
||||||
</el-row>
|
</el-form-item>
|
||||||
|
|
||||||
<el-collapse>
|
<span @click="showPriority = !showPriority" class="de-expand"
|
||||||
<el-collapse-item :title="$t('datasource.priority')" name="1">
|
>{{ $t("datasource.priority")
|
||||||
<el-form-item :label="$t('datasource.replication_num')" prop="configuration.replicationNum">
|
}}<i v-if="showPriority" class="el-icon-arrow-up"></i>
|
||||||
<el-input v-model="form.configuration.replicationNum" autocomplete="off" type="number" min="1"/>
|
<i v-else class="el-icon-arrow-down"></i
|
||||||
</el-form-item>
|
></span>
|
||||||
<el-form-item :label="$t('datasource.bucket_num')" prop="configuration.bucketNum">
|
<template v-if="showPriority">
|
||||||
<el-input v-model="form.configuration.bucketNum" autocomplete="off" type="number" min="1"/>
|
<el-row :gutter="24">
|
||||||
</el-form-item>
|
<el-col :span="12">
|
||||||
|
<el-form-item
|
||||||
<el-form-item :label="$t('datasource.initial_pool_size')" prop="configuration.initialPoolSize">
|
:label="$t('datasource.replication_num')"
|
||||||
<el-input v-model="form.configuration.initialPoolSize" autocomplete="off" type="number" min="0" size="small"/>
|
prop="configuration.replicationNum"
|
||||||
</el-form-item>
|
>
|
||||||
<el-form-item :label="$t('datasource.min_pool_size')" prop="configuration.minPoolSize">
|
<el-input-number
|
||||||
<el-input v-model="form.configuration.minPoolSize" autocomplete="off" type="number" min="0"/>
|
controls-position="right"
|
||||||
</el-form-item>
|
v-model="form.configuration.replicationNum"
|
||||||
<el-form-item :label="$t('datasource.max_pool_size')" prop="configuration.maxPoolSize">
|
autocomplete="off"
|
||||||
<el-input v-model="form.configuration.maxPoolSize" autocomplete="off" type="number" min="0"/>
|
type="number"
|
||||||
</el-form-item>
|
min="1"
|
||||||
</el-collapse-item>
|
/>
|
||||||
</el-collapse>
|
</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>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { engineInfo, validate, save } from "@/api/system/engine";
|
||||||
import {engineInfo, validate, save} from '@/api/system/engine'
|
|
||||||
import i18n from "@/lang";
|
import i18n from "@/lang";
|
||||||
|
import operater from "./operater";
|
||||||
|
import msgCfm from '@/components/msgCfm'
|
||||||
export default {
|
export default {
|
||||||
name: 'ClusterMode',
|
name: "ClusterMode",
|
||||||
|
mixins: [msgCfm],
|
||||||
|
components: {
|
||||||
|
operater,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
form:
|
showPriority: false,
|
||||||
{
|
form: {
|
||||||
type: 'engine_doris',
|
type: "engine_doris",
|
||||||
configuration: {
|
configuration: {
|
||||||
host: '',
|
host: "",
|
||||||
dataBase: '',
|
dataBase: "",
|
||||||
username: '',
|
username: "",
|
||||||
password: '',
|
password: "",
|
||||||
port: '',
|
port: "",
|
||||||
httpPort: 8030,
|
httpPort: 8030,
|
||||||
extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull',
|
extraParams:
|
||||||
replicationNum: 1,
|
"characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull",
|
||||||
bucketNum: 10,
|
replicationNum: 1,
|
||||||
minPoolSize: 5,
|
bucketNum: 10,
|
||||||
maxPoolSize: 50,
|
minPoolSize: 5,
|
||||||
initialPoolSize: 5
|
maxPoolSize: 50,
|
||||||
}
|
initialPoolSize: 5,
|
||||||
},
|
},
|
||||||
|
},
|
||||||
originConfiguration: {
|
originConfiguration: {
|
||||||
host: '',
|
host: "",
|
||||||
dataBase: '',
|
dataBase: "",
|
||||||
username: '',
|
username: "",
|
||||||
password: '',
|
password: "",
|
||||||
port: '',
|
port: "",
|
||||||
httpPort: 8030,
|
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,
|
replicationNum: 1,
|
||||||
bucketNum: 10,
|
bucketNum: 10,
|
||||||
minPoolSize: 5,
|
minPoolSize: 5,
|
||||||
maxPoolSize: 50,
|
maxPoolSize: 50,
|
||||||
initialPoolSize: 5
|
initialPoolSize: 5,
|
||||||
},
|
},
|
||||||
input: '',
|
input: "",
|
||||||
visible: true,
|
visible: true,
|
||||||
showEdit: true,
|
showEdit: true,
|
||||||
showSave: false,
|
showSave: false,
|
||||||
@ -142,155 +214,224 @@ export default {
|
|||||||
disabledSave: false,
|
disabledSave: false,
|
||||||
loading: false,
|
loading: false,
|
||||||
rules: {
|
rules: {
|
||||||
'configuration.host': [
|
"configuration.host": [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: this.$t('datasource.please_input_host'),
|
message: this.$t("datasource.please_input_host"),
|
||||||
trigger: ['change', 'blur']
|
trigger: ["change", "blur"],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
'configuration.port': [
|
"configuration.port": [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: this.$t('datasource.please_input_port'),
|
message: this.$t("datasource.please_input_port"),
|
||||||
trigger: ['change', 'blur']
|
trigger: ["change", "blur"],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
'configuration.httpPort': [
|
"configuration.httpPort": [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: this.$t('datasource.please_input_port'),
|
message: this.$t("datasource.please_input_port"),
|
||||||
trigger: ['change', 'blur']
|
trigger: ["change", "blur"],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
'configuration.dataBase': [
|
"configuration.dataBase": [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: this.$t('datasource.please_input_data_base'),
|
message: this.$t("datasource.please_input_data_base"),
|
||||||
trigger: ['change', 'blur']
|
trigger: ["change", "blur"],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
'configuration.replicationNum': [
|
"configuration.replicationNum": [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: this.$t('datasource.please_input_replication_num'),
|
message: this.$t("datasource.please_input_replication_num"),
|
||||||
trigger: ['change', 'blur']
|
trigger: ["change", "blur"],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
'configuration.bucketNum': [
|
"configuration.bucketNum": [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: this.$t('datasource.please_input_bucket_num'),
|
message: this.$t("datasource.please_input_bucket_num"),
|
||||||
trigger: ['change', 'blur']
|
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: [
|
allTypes: [
|
||||||
{
|
{
|
||||||
name: 'engine_mysql',
|
name: "engine_mysql",
|
||||||
label: 'MySQL',
|
label: "MySQL",
|
||||||
type: 'jdbc',
|
type: "jdbc",
|
||||||
extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
|
extraParams:
|
||||||
}
|
"characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true",
|
||||||
]
|
},
|
||||||
}
|
],
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
this.query()
|
this.query();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
query() {
|
query() {
|
||||||
engineInfo().then(response => {
|
engineInfo().then((response) => {
|
||||||
if (response.data.id) {
|
if (response.data.id) {
|
||||||
this.form = JSON.parse(JSON.stringify(response.data))
|
this.form = JSON.parse(JSON.stringify(response.data));
|
||||||
this.form.configuration = JSON.parse(this.form.configuration)
|
this.form.configuration = JSON.parse(this.form.configuration);
|
||||||
this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
|
this.originConfiguration = JSON.parse(
|
||||||
|
JSON.stringify(this.form.configuration)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.form.clearValidate()
|
this.$refs.form.clearValidate();
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
edit() {
|
edit() {
|
||||||
this.showEdit = false
|
this.showEdit = false;
|
||||||
this.showSave = true
|
this.showSave = true;
|
||||||
this.showCancel = true
|
this.showCancel = true;
|
||||||
this.show = false
|
this.show = false;
|
||||||
},
|
},
|
||||||
save() {
|
save() {
|
||||||
if (this.form.configuration.dataSourceType === 'jdbc' && (this.form.configuration.port <= 0 || this.form.configuration.httpPort <= 0)) {
|
if (
|
||||||
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
|
this.form.configuration.dataSourceType === "jdbc" &&
|
||||||
return
|
(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) {
|
if (
|
||||||
this.$message.error(i18n.t('datasource.no_less_then_0'))
|
this.form.configuration.initialPoolSize < 0 ||
|
||||||
return
|
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) {
|
if (!valid) {
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
const form = JSON.parse(JSON.stringify(this.form))
|
const form = JSON.parse(JSON.stringify(this.form));
|
||||||
form.configuration = JSON.stringify(form.configuration)
|
form.configuration = JSON.stringify(form.configuration);
|
||||||
save(form).then(res => {
|
save(form).then((res) => {
|
||||||
this.showEdit = true
|
this.showEdit = true;
|
||||||
this.showCancel = false
|
this.showCancel = false;
|
||||||
this.showSave = false
|
this.showSave = false;
|
||||||
this.show = true
|
this.show = true;
|
||||||
this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
|
this.originConfiguration = JSON.parse(
|
||||||
this.$success(i18n.t('commons.save_success'))
|
JSON.stringify(this.form.configuration)
|
||||||
})
|
);
|
||||||
})
|
this.openMessageSuccess("commons.save_success");
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
cancel() {
|
cancel() {
|
||||||
this.showEdit = true
|
this.showEdit = true;
|
||||||
this.showCancel = false
|
this.showCancel = false;
|
||||||
this.showSave = false
|
this.showSave = false;
|
||||||
this.show = true
|
this.show = true;
|
||||||
this.form.configuration = JSON.parse(JSON.stringify(this.originConfiguration))
|
this.form.configuration = JSON.parse(
|
||||||
|
JSON.stringify(this.originConfiguration)
|
||||||
|
);
|
||||||
},
|
},
|
||||||
changeType() {
|
changeType() {
|
||||||
for (let i = 0; i < this.allTypes.length; i++) {
|
for (let i = 0; i < this.allTypes.length; i++) {
|
||||||
if (this.allTypes[i].name === this.form.type) {
|
if (this.allTypes[i].name === this.form.type) {
|
||||||
this.form.configuration.dataSourceType = this.allTypes[i].type
|
this.form.configuration.dataSourceType = this.allTypes[i].type;
|
||||||
this.form.configuration.extraParams = this.allTypes[i].extraParams
|
this.form.configuration.extraParams = this.allTypes[i].extraParams;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
validaDatasource() {
|
validaDatasource() {
|
||||||
if (!this.form.configuration.schema && this.form.type === 'oracle') {
|
if (!this.form.configuration.schema && this.form.type === "oracle") {
|
||||||
this.$message.error(i18n.t('datasource.please_choose_schema'))
|
this.$message.error(i18n.t("datasource.please_choose_schema"));
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
if (this.form.configuration.dataSourceType === 'jdbc' && (this.form.configuration.port <= 0 || this.form.configuration.httpPort <= 0)) {
|
if (
|
||||||
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
|
this.form.configuration.dataSourceType === "jdbc" &&
|
||||||
return
|
(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) {
|
if (valid) {
|
||||||
const data = JSON.parse(JSON.stringify(this.form))
|
const data = JSON.parse(JSON.stringify(this.form));
|
||||||
data.configuration = JSON.stringify(data.configuration)
|
data.configuration = JSON.stringify(data.configuration);
|
||||||
validate(data).then(res => {
|
validate(data).then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.$success(i18n.t('datasource.validate_success'))
|
this.openMessageSuccess("datasource.validate_success");
|
||||||
} else {
|
} else {
|
||||||
if (res.message.length < 2500) {
|
if (res.message.length < 2500) {
|
||||||
this.$error(res.message)
|
this.$error(res.message);
|
||||||
} else {
|
} else {
|
||||||
this.$error(res.message.substring(0, 2500) + '......')
|
this.$error(res.message.substring(0, 2500) + "......");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
} else {
|
} 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>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,111 +1,150 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<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
|
<el-form
|
||||||
ref="formInline"
|
ref="formInline"
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
:model="formInline"
|
:model="formInline"
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
class="demo-form-inline"
|
class="demo-form-inline de-form-item"
|
||||||
:disabled="show"
|
:disabled="show"
|
||||||
size="small"
|
size="small"
|
||||||
>
|
>
|
||||||
<el-row>
|
<el-form-item
|
||||||
<el-col>
|
:label="$t('system_parameter_setting.SMTP_host')"
|
||||||
<el-form-item :label="$t('system_parameter_setting.SMTP_host')" prop="host">
|
prop="host"
|
||||||
<el-input
|
>
|
||||||
v-model="formInline.host"
|
<el-input
|
||||||
:placeholder="$t('system_parameter_setting.SMTP_host')"
|
v-model="formInline.host"
|
||||||
@input="change()"
|
:placeholder="$t('system_parameter_setting.SMTP_host')"
|
||||||
/>
|
@input="change()"
|
||||||
</el-form-item>
|
/>
|
||||||
</el-col>
|
</el-form-item>
|
||||||
</el-row>
|
<el-form-item
|
||||||
<el-row>
|
:label="$t('system_parameter_setting.SMTP_port')"
|
||||||
<el-col>
|
prop="port"
|
||||||
<el-form-item :label="$t('system_parameter_setting.SMTP_port')" prop="port">
|
>
|
||||||
<el-input
|
<el-input
|
||||||
v-model="formInline.port"
|
v-model="formInline.port"
|
||||||
:placeholder="$t('system_parameter_setting.SMTP_port')"
|
:placeholder="$t('system_parameter_setting.SMTP_port')"
|
||||||
@input="change()"
|
@input="change()"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
<el-form-item
|
||||||
</el-row>
|
:label="$t('system_parameter_setting.SMTP_account')"
|
||||||
<el-row>
|
prop="account"
|
||||||
<el-col>
|
>
|
||||||
<el-form-item :label="$t('system_parameter_setting.SMTP_account')" prop="account">
|
<el-input
|
||||||
<el-input
|
v-model="formInline.account"
|
||||||
v-model="formInline.account"
|
:placeholder="$t('system_parameter_setting.SMTP_account')"
|
||||||
:placeholder="$t('system_parameter_setting.SMTP_account')"
|
@input="change()"
|
||||||
@input="change()"
|
/>
|
||||||
/>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item
|
||||||
</el-col>
|
:label="$t('system_parameter_setting.SMTP_password')"
|
||||||
</el-row>
|
prop="password"
|
||||||
<el-row>
|
>
|
||||||
<el-col>
|
<el-input
|
||||||
<el-form-item :label="$t('system_parameter_setting.SMTP_password')" prop="password">
|
ref="input"
|
||||||
<el-input
|
v-model="formInline.password"
|
||||||
ref="input"
|
:placeholder="$t('system_parameter_setting.SMTP_password')"
|
||||||
v-model="formInline.password"
|
autocomplete="new-password"
|
||||||
:placeholder="$t('system_parameter_setting.SMTP_password')"
|
show-password
|
||||||
autocomplete="new-password"
|
type="text"
|
||||||
show-password
|
@focus="changeType"
|
||||||
type="text"
|
/>
|
||||||
@focus="changeType"
|
</el-form-item>
|
||||||
/>
|
<el-form-item :label="$t('system_parameter_setting.test_recipients')">
|
||||||
</el-form-item>
|
<template slot="label">
|
||||||
</el-col>
|
{{ $t("system_parameter_setting.test_recipients") }}
|
||||||
</el-row>
|
<el-tooltip
|
||||||
<el-row>
|
class="item"
|
||||||
<el-col>
|
effect="dark"
|
||||||
<el-form-item :label="$t('system_parameter_setting.test_recipients')">
|
:content="$t('system_parameter_setting.test_mail_recipient')"
|
||||||
<el-input
|
placement="top"
|
||||||
ref="input"
|
>
|
||||||
v-model="formInline.recipient"
|
<i class="el-icon-warning-outline tips-not-absolute"></i>
|
||||||
:placeholder="$t('system_parameter_setting.test_recipients')"
|
</el-tooltip>
|
||||||
autocomplete="new-password"
|
</template>
|
||||||
show-password
|
<el-input
|
||||||
type="text"
|
ref="input"
|
||||||
/>
|
v-model="formInline.recipient"
|
||||||
<p style="color: #8a8b8d">({{ $t('system_parameter_setting.tip') }})</p>
|
:placeholder="$t('system_parameter_setting.test_recipients')"
|
||||||
</el-form-item>
|
autocomplete="new-password"
|
||||||
</el-col>
|
show-password
|
||||||
</el-row>
|
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 />
|
<template v-slot:footer />
|
||||||
</el-form>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
name: 'EmailSetting',
|
name: "EmailSetting",
|
||||||
|
mixins: [msgCfm],
|
||||||
|
components: {
|
||||||
|
operater,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
formInline: {},
|
formInline: {},
|
||||||
input: '',
|
input: "",
|
||||||
visible: true,
|
visible: true,
|
||||||
showEdit: true,
|
showEdit: true,
|
||||||
showSave: false,
|
showSave: false,
|
||||||
@ -118,122 +157,159 @@ export default {
|
|||||||
host: [
|
host: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: this.$t('system_parameter_setting.host'),
|
message: this.$t("system_parameter_setting.host"),
|
||||||
trigger: ['change', 'blur']
|
trigger: ["change", "blur"],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
port: [
|
port: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: this.$t('system_parameter_setting.port'),
|
message: this.$t("system_parameter_setting.port"),
|
||||||
trigger: ['change', 'blur']
|
trigger: ["change", "blur"],
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
account: [
|
account: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: this.$t('system_parameter_setting.account'),
|
message: this.$t("system_parameter_setting.account"),
|
||||||
trigger: ['change', 'blur']
|
trigger: ["change", "blur"],
|
||||||
}]
|
},
|
||||||
}
|
],
|
||||||
}
|
},
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
this.query()
|
this.query();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeType() {
|
changeType() {
|
||||||
this.$refs.input = 'password'
|
this.$refs.input = "password";
|
||||||
},
|
},
|
||||||
query() {
|
query() {
|
||||||
emailInfo().then(response => {
|
emailInfo().then((response) => {
|
||||||
this.formInline = response.data
|
this.formInline = response.data;
|
||||||
this.formInline.ssl = this.formInline.ssl === 'true'
|
this.formInline.ssl = this.formInline.ssl === "true";
|
||||||
this.formInline.tls = this.formInline.tls === 'true'
|
this.formInline.tls = this.formInline.tls === "true";
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.formInline.clearValidate()
|
this.$refs.formInline.clearValidate();
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
change() {
|
change() {
|
||||||
if (!this.formInline.host || !this.formInline.port || !this.formInline.account) {
|
if (
|
||||||
this.disabledConnection = true
|
!this.formInline.host ||
|
||||||
this.disabledSave = true
|
!this.formInline.port ||
|
||||||
|
!this.formInline.account
|
||||||
|
) {
|
||||||
|
this.disabledConnection = true;
|
||||||
|
this.disabledSave = true;
|
||||||
} else {
|
} else {
|
||||||
this.disabledConnection = false
|
this.disabledConnection = false;
|
||||||
this.disabledSave = false
|
this.disabledSave = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
testConnection(formInline) {
|
testConnection(formInline) {
|
||||||
const param = {
|
const param = {
|
||||||
'smtp.host': this.formInline.host,
|
"smtp.host": this.formInline.host,
|
||||||
'smtp.port': this.formInline.port,
|
"smtp.port": this.formInline.port,
|
||||||
'smtp.account': this.formInline.account,
|
"smtp.account": this.formInline.account,
|
||||||
'smtp.password': this.formInline.password,
|
"smtp.password": this.formInline.password,
|
||||||
'smtp.ssl': this.formInline.ssl,
|
"smtp.ssl": this.formInline.ssl,
|
||||||
'smtp.tls': this.formInline.tls,
|
"smtp.tls": this.formInline.tls,
|
||||||
'smtp.recipient': this.formInline.recipient
|
"smtp.recipient": this.formInline.recipient,
|
||||||
}
|
};
|
||||||
this.$refs[formInline].validate((valid) => {
|
this.$refs[formInline].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
validate(param).then(response => {
|
validate(param).then((response) => {
|
||||||
this.$success(this.$t('commons.connection_successful'))
|
this.openMessageSuccess("commons.connection_successful");
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
edit() {
|
edit() {
|
||||||
this.showEdit = false
|
this.showEdit = false;
|
||||||
this.showSave = true
|
this.showSave = true;
|
||||||
this.showCancel = true
|
this.showCancel = true;
|
||||||
this.show = false
|
this.show = false;
|
||||||
},
|
},
|
||||||
save(formInline) {
|
save(formInline) {
|
||||||
this.showEdit = true
|
this.showEdit = true;
|
||||||
this.showCancel = false
|
this.showCancel = false;
|
||||||
this.showSave = false
|
this.showSave = false;
|
||||||
this.show = true
|
this.show = true;
|
||||||
const param = [
|
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.host",
|
||||||
{ paramKey: 'smtp.account', paramValue: this.formInline.account, type: 'text', sort: 3 },
|
paramValue: this.formInline.host,
|
||||||
{ paramKey: 'smtp.password', paramValue: this.formInline.password, type: 'password', sort: 4 },
|
type: "text",
|
||||||
{ paramKey: 'smtp.ssl', paramValue: this.formInline.ssl, type: 'text', sort: 5 },
|
sort: 1,
|
||||||
{ paramKey: 'smtp.tls', paramValue: this.formInline.tls, type: 'text', sort: 6 },
|
},
|
||||||
{ paramKey: 'smtp.recipient', paramValue: this.formInline.recipient, type: 'text', sort: 8 }
|
{
|
||||||
|
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) {
|
if (valid) {
|
||||||
updateInfo(param).then(response => {
|
updateInfo(param).then((response) => {
|
||||||
const flag = response.success
|
const flag = response.success;
|
||||||
if (flag) {
|
if (flag) {
|
||||||
this.$success(this.$t('commons.save_success'))
|
this.openMessageSuccess("commons.save_success");
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(this.$t('commons.save_failed'))
|
this.$message.error(this.$t("commons.save_failed"));
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
// this.result = false
|
// this.result = false
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
cancel() {
|
cancel() {
|
||||||
this.showEdit = true
|
this.showEdit = true;
|
||||||
this.showCancel = false
|
this.showCancel = false;
|
||||||
this.showSave = false
|
this.showSave = false;
|
||||||
this.show = true
|
this.show = true;
|
||||||
this.query()
|
this.query();
|
||||||
}
|
},
|
||||||
|
},
|
||||||
}
|
};
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,232 +1,344 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-col>
|
<div class="kettle-setting">
|
||||||
<el-row style="margin-top: 10px;">
|
<deBtn type="primary" icon="el-icon-plus" @click="create(undefined)">{{
|
||||||
<el-button icon="el-icon-circle-plus-outline" @click="create(undefined)">{{ $t('kettle.add') }}</el-button>
|
$t("kettle.add")
|
||||||
<fu-table :data="data">
|
}}</deBtn>
|
||||||
<el-table-column prop="configuration.carte" :label="$t('kettle.carte')"/>
|
<div class="table-box">
|
||||||
<el-table-column prop="configuration.port" :label="$t('kettle.port')"/>
|
<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')">
|
<el-table-column prop="status" :label="$t('kettle.status')">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span v-if="scope.row.status === 'Error'" style="color: red">{{ $t('datasource.invalid') }}</span>
|
<span
|
||||||
<span v-if="scope.row.status === 'Success'" style="color: green">{{ $t('datasource.valid') }}</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>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
<fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix/>
|
slot="__operation"
|
||||||
</fu-table>
|
:label="$t('commons.operating')"
|
||||||
<div class="pagination">
|
fixed="right"
|
||||||
<fu-table-pagination :current-page.sync="paginationConfig.currentPage"
|
width="168"
|
||||||
:page-size.sync="paginationConfig.pageSize"
|
>
|
||||||
:total="paginationConfig.total"
|
<template slot-scope="scope">
|
||||||
@size-change="sizeChange"
|
<el-button
|
||||||
@current-change="currentChange"/>
|
@click="create(scope.row)"
|
||||||
</div>
|
class="text-btn"
|
||||||
</el-row>
|
type="text"
|
||||||
|
>{{ $t("commons.edit") }}</el-button
|
||||||
|
>
|
||||||
<el-dialog v-dialogDrag :title="edit_dialog_title" :visible="show_dialog" :before-close="closeDialog"
|
<el-button
|
||||||
:show-close="true" width="50%" class="dialog-css" append-to-body>
|
@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-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-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>
|
||||||
<el-form-item :label="$t('kettle.port')" prop="configuration.port">
|
<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>
|
||||||
<el-form-item :label="$t('kettle.user')" prop="configuration.user">
|
<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>
|
||||||
<el-form-item :label="$t('kettle.passwd')" prop="configuration.passwd">
|
<el-form-item
|
||||||
<el-input v-model="form.configuration.passwd" show-password/>
|
:label="$t('kettle.passwd')"
|
||||||
|
prop="configuration.passwd"
|
||||||
|
>
|
||||||
|
<el-input v-model="form.configuration.passwd" show-password />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-col>
|
</el-col>
|
||||||
<div slot="footer" class="dialog-footer">
|
<div slot="footer" class="dialog-footer">
|
||||||
<el-button size="mini" @click="validate()">{{ $t('commons.validate') }}</el-button>
|
<deBtn secondary @click="closeDialog">
|
||||||
<el-button type="primary" size="mini" @click="save()">{{ $t('commons.save') }}</el-button>
|
{{ $t("commons.cancel") }}
|
||||||
|
</deBtn>
|
||||||
|
<deBtn secondary @click="validate()">{{
|
||||||
|
$t("commons.validate")
|
||||||
|
}}</deBtn>
|
||||||
|
<deBtn type="primary" @click="save()">{{
|
||||||
|
$t("commons.confirm")
|
||||||
|
}}</deBtn>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
</el-col>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import {
|
||||||
import {deleteKettle, validate, save, pageList, validateById} from '@/api/system/kettle'
|
deleteKettle,
|
||||||
|
validate,
|
||||||
|
save,
|
||||||
|
pageList,
|
||||||
|
validateById,
|
||||||
|
} from "@/api/system/kettle";
|
||||||
import i18n from "@/lang";
|
import i18n from "@/lang";
|
||||||
|
import GridTable from "@/components/gridTable/index.vue";
|
||||||
|
import msgCfm from '@/components/msgCfm'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'KettleSetting',
|
name: "KettleSetting",
|
||||||
|
components: { GridTable },
|
||||||
|
mixins: [msgCfm],
|
||||||
data() {
|
data() {
|
||||||
return {
|
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: {
|
paginationConfig: {
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0
|
total: 0,
|
||||||
},
|
},
|
||||||
data: [],
|
data: [],
|
||||||
show_dialog: false,
|
show_dialog: false,
|
||||||
edit_dialog_title: '',
|
edit_dialog_title: "",
|
||||||
form: {
|
form: {
|
||||||
configuration: {
|
configuration: {
|
||||||
carte: '',
|
carte: "",
|
||||||
port: '',
|
port: "",
|
||||||
user: '',
|
user: "",
|
||||||
passwd: ''
|
passwd: "",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
rule: {
|
rule: {
|
||||||
'configuration.carte': [{
|
"configuration.carte": [
|
||||||
required: true,
|
{
|
||||||
message: this.$t('commons.required'),
|
required: true,
|
||||||
trigger: 'blur'
|
message: this.$t("commons.required"),
|
||||||
}],
|
trigger: "blur",
|
||||||
'configuration.port': [{
|
},
|
||||||
required: true,
|
],
|
||||||
message: this.$t('commons.required'),
|
"configuration.port": [
|
||||||
trigger: 'blur'
|
{
|
||||||
}],
|
required: true,
|
||||||
'configuration.user': [{
|
message: this.$t("commons.required"),
|
||||||
required: true,
|
trigger: "blur",
|
||||||
message: this.$t('commons.required'),
|
},
|
||||||
trigger: 'blur'
|
],
|
||||||
}],
|
"configuration.user": [
|
||||||
'configuration.passwd': [{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: this.$t('commons.required'),
|
message: this.$t("commons.required"),
|
||||||
trigger: 'blur'
|
trigger: "blur",
|
||||||
}]
|
},
|
||||||
}
|
],
|
||||||
}
|
"configuration.passwd": [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: this.$t("commons.required"),
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
this.search()
|
this.search();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
initSearch() {
|
||||||
currentChange() {
|
this.currentChange(1);
|
||||||
this.search()
|
|
||||||
},
|
},
|
||||||
sizeChange() {
|
currentChange(currentPage) {
|
||||||
this.currentPage = 1;
|
this.paginationConfig.currentPage = currentPage;
|
||||||
this.search()
|
this.search();
|
||||||
|
},
|
||||||
|
sizeChange(pageSize) {
|
||||||
|
this.paginationConfig.pageSize = pageSize;
|
||||||
|
this.paginationConfig.currentPage = 1;
|
||||||
|
this.search();
|
||||||
},
|
},
|
||||||
search() {
|
search() {
|
||||||
const {currentPage, pageSize} = this.paginationConfig
|
const { currentPage, pageSize } = this.paginationConfig;
|
||||||
pageList('/kettle/pageList/' + currentPage + '/' + pageSize, {}).then(response => {
|
pageList("/kettle/pageList/" + currentPage + "/" + pageSize, {}).then(
|
||||||
this.data = response.data.listObject
|
(response) => {
|
||||||
this.data.forEach(item => {
|
this.data = response.data.listObject;
|
||||||
item.configuration = JSON.parse(item.configuration)
|
this.data.forEach((item) => {
|
||||||
})
|
item.configuration = JSON.parse(item.configuration);
|
||||||
this.paginationConfig.total = response.data.itemCount
|
});
|
||||||
})
|
this.paginationConfig.total = response.data.itemCount;
|
||||||
|
}
|
||||||
|
);
|
||||||
},
|
},
|
||||||
delete(item) {
|
del(item) {
|
||||||
deleteKettle(item.id).then(response => {
|
deleteKettle(item.id).then((response) => {
|
||||||
this.search()
|
this.initSearch();
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
create(item) {
|
create(item) {
|
||||||
if (!item) {
|
if (!item) {
|
||||||
this.targetObjs = []
|
this.targetObjs = [];
|
||||||
this.form = {configuration: {carte: '', port: '', user: '', passwd: ''}}
|
this.form = {
|
||||||
this.edit_dialog_title = this.$t('kettle.add')
|
configuration: { carte: "", port: "", user: "", passwd: "" },
|
||||||
|
};
|
||||||
|
this.edit_dialog_title = this.$t("kettle.add");
|
||||||
} else {
|
} else {
|
||||||
this.edit_dialog_title = this.$t('commons.edit')
|
this.edit_dialog_title = this.$t("commons.edit");
|
||||||
this.form = JSON.parse(JSON.stringify(item))
|
this.form = JSON.parse(JSON.stringify(item));
|
||||||
}
|
}
|
||||||
this.show_dialog = true
|
this.show_dialog = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
save() {
|
save() {
|
||||||
this.$refs.kettleform.validate(valid => {
|
this.$refs.kettleform.validate((valid) => {
|
||||||
if (!valid) {
|
if (!valid) {
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
const form = JSON.parse(JSON.stringify(this.form))
|
const form = JSON.parse(JSON.stringify(this.form));
|
||||||
form.configuration = JSON.stringify(form.configuration)
|
form.configuration = JSON.stringify(form.configuration);
|
||||||
save(form).then(res => {
|
save(form).then((res) => {
|
||||||
this.show_dialog = false
|
this.show_dialog = false;
|
||||||
this.$success(i18n.t('commons.save_success'))
|
this.openMessageSuccess("commons.save_success");
|
||||||
this.search()
|
this.initSearch();
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
closeDialog() {
|
closeDialog() {
|
||||||
this.show_dialog = false
|
this.$refs.kettleform.resetFields();
|
||||||
this.form = {configuration: {carte: '', port: '', user: '', passwd: ''}}
|
this.show_dialog = false;
|
||||||
|
this.form = {
|
||||||
|
configuration: { carte: "", port: "", user: "", passwd: "" },
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
validate() {
|
validate() {
|
||||||
this.$refs.kettleform.validate(valid => {
|
this.$refs.kettleform.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
validate(this.form.configuration).then(res => {
|
validate(this.form.configuration)
|
||||||
if (res.success) {
|
.then((res) => {
|
||||||
this.$success(i18n.t('datasource.validate_success'))
|
if (res.success) {
|
||||||
} else {
|
this.openMessageSuccess("datasource.validate_success");
|
||||||
if (res.message.length < 2500) {
|
|
||||||
this.$error(res.message)
|
|
||||||
} else {
|
} 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 => {
|
.catch((res) => {
|
||||||
this.$error(res.message)
|
this.$error(res.message);
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
validateById(item) {
|
validateById(item) {
|
||||||
validateById(item.id).then(res => {
|
validateById(item.id)
|
||||||
if (res.success) {
|
.then((res) => {
|
||||||
item.status = res.data.status
|
if (res.success) {
|
||||||
this.$success(i18n.t('datasource.validate_success'))
|
item.status = res.data.status;
|
||||||
} else {
|
this.openMessageSuccess("datasource.validate_success");
|
||||||
item.status = 'Error'
|
|
||||||
if (res.message.length < 2500) {
|
|
||||||
this.$error(res.message)
|
|
||||||
} else {
|
} 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 => {
|
.catch((res) => {
|
||||||
this.$error(res.message)
|
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>
|
||||||
|
<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>
|
<script>
|
||||||
import { removeMap } from '@/api/map/map'
|
import { removeMap } from '@/api/map/map'
|
||||||
|
import msgCfm from '@/components/msgCfm'
|
||||||
export default {
|
export default {
|
||||||
name: 'MapSettingLeft',
|
name: 'MapSettingLeft',
|
||||||
props: {
|
props: {
|
||||||
@ -77,6 +78,7 @@ export default {
|
|||||||
default: () => []
|
default: () => []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mixins: [msgCfm],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
filterText: '',
|
filterText: '',
|
||||||
@ -154,7 +156,7 @@ export default {
|
|||||||
value: null
|
value: null
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
this.$emit('refresh-tree')
|
this.$emit('refresh-tree')
|
||||||
this.$success(this.$t('commons.delete_success'))
|
this.openMessageSuccess("commons.delete_success");
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
|
|||||||
@ -117,10 +117,12 @@
|
|||||||
import jsonView from 'vue-json-views'
|
import jsonView from 'vue-json-views'
|
||||||
import { geoJson, saveMap } from '@/api/map/map'
|
import { geoJson, saveMap } from '@/api/map/map'
|
||||||
import ElTreeSelect from '@/components/ElTreeSelect'
|
import ElTreeSelect from '@/components/ElTreeSelect'
|
||||||
|
import msgCfm from '@/components/msgCfm'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'MapSettingRight',
|
name: 'MapSettingRight',
|
||||||
components: { jsonView, ElTreeSelect },
|
components: { jsonView, ElTreeSelect },
|
||||||
|
mixins: [msgCfm],
|
||||||
props: {
|
props: {
|
||||||
status: {
|
status: {
|
||||||
type: String,
|
type: String,
|
||||||
@ -271,7 +273,7 @@ export default {
|
|||||||
const flag = response.success
|
const flag = response.success
|
||||||
if (flag) {
|
if (flag) {
|
||||||
this.$emit('refresh-tree', param)
|
this.$emit('refresh-tree', param)
|
||||||
this.$success(this.$t('commons.save_success'))
|
this.openMessageSuccess("commons.save_success");
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(this.$t('commons.save_failed'))
|
this.$message.error(this.$t('commons.save_failed'))
|
||||||
}
|
}
|
||||||
|
|||||||
@ -93,9 +93,11 @@
|
|||||||
|
|
||||||
import {engineInfo, validate, save} from '@/api/system/engine'
|
import {engineInfo, validate, save} from '@/api/system/engine'
|
||||||
import i18n from "@/lang";
|
import i18n from "@/lang";
|
||||||
|
import msgCfm from '@/components/msgCfm'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SimpleMode',
|
name: 'SimpleMode',
|
||||||
|
mixins: [msgCfm],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
form:
|
form:
|
||||||
@ -204,7 +206,7 @@ export default {
|
|||||||
this.showSave = false
|
this.showSave = false
|
||||||
this.show = true
|
this.show = true
|
||||||
this.originConfiguration = JSON.parse(JSON.stringify(this.form.configuration))
|
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)
|
data.configuration = JSON.stringify(data.configuration)
|
||||||
validate(data).then(res => {
|
validate(data).then(res => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.$success(i18n.t('datasource.validate_success'))
|
this.openMessageSuccess("datasource.validate_success");
|
||||||
} else {
|
} else {
|
||||||
if (res.message.length < 2500) {
|
if (res.message.length < 2500) {
|
||||||
this.$error(res.message)
|
this.$error(res.message)
|
||||||
|
|||||||
@ -1,89 +1,181 @@
|
|||||||
<template>
|
<template>
|
||||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
<de-layout-content
|
||||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
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">
|
<el-tab-pane
|
||||||
<basic-setting v-if="activeName === 'zero'" />
|
:lazy="true"
|
||||||
</el-tab-pane>
|
: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">
|
<el-tab-pane :lazy="true" :label="$t('sysParams.map')" name="ten">
|
||||||
<email-setting />
|
</el-tab-pane>
|
||||||
</el-tab-pane>
|
|
||||||
|
|
||||||
<el-tab-pane :lazy="true" :label="$t('sysParams.map')" name="ten">
|
<el-tab-pane
|
||||||
<map-setting v-if="activeName === 'ten'" ref="mapSetting" />
|
v-if="isPluginLoaded"
|
||||||
</el-tab-pane>
|
: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">
|
<el-tab-pane
|
||||||
<plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="DisplaySetting" />
|
v-if="isPluginLoaded"
|
||||||
</el-tab-pane>
|
: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">
|
<el-tab-pane
|
||||||
<plugin-com v-if="isPluginLoaded" ref="ThemeSetting" component-name="ThemeSetting" />
|
v-if="engineMode === 'simple'"
|
||||||
</el-tab-pane>
|
: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">
|
<el-tab-pane
|
||||||
<plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="LdapSetting" />
|
v-if="engineMode === 'cluster'"
|
||||||
</el-tab-pane>
|
: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">
|
<el-tab-pane
|
||||||
<plugin-com v-if="isPluginLoaded" ref="DisplaySetting" component-name="SsoSetting" />
|
v-if="engineMode === 'cluster'"
|
||||||
</el-tab-pane>
|
: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">
|
<el-tab-pane
|
||||||
<simple-mode />
|
v-if="isPluginLoaded"
|
||||||
</el-tab-pane>
|
:lazy="true"
|
||||||
|
:label="$t('sysParams.cas')"
|
||||||
<el-tab-pane v-if="engineMode==='cluster'" :lazy="true" :label="$t('system_parameter_setting.engine_mode_setting')" name="seven">
|
name="nine"
|
||||||
<cluster-mode />
|
>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
<el-tab-pane v-if="engineMode==='cluster'" :lazy="true" :label="$t('system_parameter_setting.kettle_setting')" name="eight">
|
<div
|
||||||
<kettle-setting />
|
class="tabs-container"
|
||||||
</el-tab-pane>
|
:class="[activeName !== 'eight' ? 'is-center' : 'pad-center']"
|
||||||
|
>
|
||||||
<el-tab-pane v-if="isPluginLoaded" :lazy="true" :label="$t('sysParams.cas')" name="nine">
|
<div class="min-w600">
|
||||||
<plugin-com v-if="isPluginLoaded" ref="CasSetting" component-name="CasSetting" />
|
<basic-setting v-if="activeName === 'zero'" />
|
||||||
</el-tab-pane>
|
<email-setting v-if="activeName === 'first'" />
|
||||||
|
<map-setting v-if="activeName === 'ten'" ref="mapSetting" />
|
||||||
</el-tabs>
|
<plugin-com
|
||||||
</layout-content>
|
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>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import BasicSetting from './BasicSetting'
|
import BasicSetting from "./BasicSetting";
|
||||||
import MapSetting from './MapSetting'
|
import MapSetting from "./MapSetting";
|
||||||
import EmailSetting from './EmailSetting'
|
import EmailSetting from "./EmailSetting";
|
||||||
import SimpleMode from './SimpleModeSetting'
|
import SimpleMode from "./SimpleModeSetting";
|
||||||
import ClusterMode from './ClusterModeSetting'
|
import ClusterMode from "./ClusterModeSetting";
|
||||||
import KettleSetting from './KettleSetting'
|
import KettleSetting from "./KettleSetting";
|
||||||
import LayoutContent from '@/components/business/LayoutContent'
|
import DeLayoutContent from "@/components/business/DeLayoutContent";
|
||||||
import PluginCom from '@/views/system/plugin/PluginCom'
|
import PluginCom from "@/views/system/plugin/PluginCom";
|
||||||
import { pluginLoaded } from '@/api/user'
|
import { pluginLoaded } from "@/api/user";
|
||||||
import { engineMode } from '@/api/system/engine'
|
import { engineMode } from "@/api/system/engine";
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
components: { BasicSetting, EmailSetting, LayoutContent, PluginCom, SimpleMode, ClusterMode, KettleSetting, MapSetting },
|
BasicSetting,
|
||||||
|
EmailSetting,
|
||||||
|
DeLayoutContent,
|
||||||
|
PluginCom,
|
||||||
|
SimpleMode,
|
||||||
|
ClusterMode,
|
||||||
|
KettleSetting,
|
||||||
|
MapSetting,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeName: 'zero',
|
activeName: "zero",
|
||||||
isPluginLoaded: false,
|
isPluginLoaded: false,
|
||||||
engineMode: 'local'
|
engineMode: "local",
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
pluginLoaded().then(res => {
|
pluginLoaded().then((res) => {
|
||||||
this.isPluginLoaded = res.success && res.data
|
this.isPluginLoaded = res.success && res.data;
|
||||||
})
|
});
|
||||||
engineMode().then(res => {
|
engineMode().then((res) => {
|
||||||
this.engineMode = res.data
|
this.engineMode = res.data;
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
created() {
|
computed: {
|
||||||
|
btnList() {},
|
||||||
},
|
},
|
||||||
methods: {
|
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>
|
<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" />
|
<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>
|
<div v-else>
|
||||||
<h1>未知组件无法展示</h1>
|
<h1>未知组件无法展示</h1>
|
||||||
</div>
|
</div>
|
||||||
</de-layout-content>
|
</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>
|
<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" />
|
<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>
|
<div v-else>
|
||||||
|
|||||||
@ -1,14 +1,80 @@
|
|||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import DeLayoutContent from "@/components/business/DeLayoutContent";
|
||||||
|
import PluginCom from "@/views/system/plugin/PluginCom";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AppearanceSetting',
|
name: "AppearanceSetting",
|
||||||
|
components: { DeLayoutContent, PluginCom },
|
||||||
data() {
|
data() {
|
||||||
return {
|
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) {},
|
onError(e) {},
|
||||||
handleSizeChange(pageSize) {
|
handleSizeChange(pageSize) {
|
||||||
|
this.paginationConfig.currentPage = 1;
|
||||||
this.paginationConfig.pageSize = pageSize;
|
this.paginationConfig.pageSize = pageSize;
|
||||||
this.search();
|
this.search();
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user