mirror of
https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git
synced 2026-11-08 01:06:59 +08:00
fix: Style optimization
This commit is contained in:
dataeaseShu
@@ -1,135 +1,136 @@
|
||||
<template>
|
||||
<div class="appearance">
|
||||
<p class="router-title">{{ t('system.appearance_settings') }}</p>
|
||||
<div class="appearance-table__content">
|
||||
<el-scrollbar>
|
||||
<div class="theme">
|
||||
<div class="show-theme">{{ $t('system.platform_display_theme') }}</div>
|
||||
<div class="theme-color">
|
||||
<div class="btn-select">
|
||||
<el-button
|
||||
:class="[themeColor === 'default' && 'is-active']"
|
||||
text
|
||||
@click="themeColorChange('default')"
|
||||
>
|
||||
{{ $t('system.default_turquoise') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
:class="[themeColor === 'blue' && 'is-active']"
|
||||
text
|
||||
@click="themeColorChange('blue')"
|
||||
>
|
||||
{{ $t('system.tech_blue') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
:class="[themeColor === 'custom' && 'is-active']"
|
||||
text
|
||||
@click="themeColorChange('custom')"
|
||||
>
|
||||
{{ $t('system.custom') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="themeColor === 'custom'">
|
||||
<div class="theme-bg">{{ t('system.customize_theme_color') }}</div>
|
||||
<el-color-picker
|
||||
v-model="customColor"
|
||||
:trigger-width="28"
|
||||
:predefine="COLOR_PANEL"
|
||||
is-custom
|
||||
effect="light"
|
||||
@change="customColorChange"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="login" :class="themeColor">
|
||||
<div class="platform-login">
|
||||
{{ t('system.platform_login_settings') }}
|
||||
</div>
|
||||
<div class="page-preview">
|
||||
<div class="title">
|
||||
<span class="left">{{ t('system.page_preview') }}</span>
|
||||
<el-button text @click="resetLoginForm(true)">{{
|
||||
t('system.restore_default')
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="page-setting">
|
||||
<div class="page-content">
|
||||
<!-- <img :src="loginPreview" alt="" /> -->
|
||||
<login-preview
|
||||
:navigate-bg="navigateBg"
|
||||
:theme-color="themeColor"
|
||||
:custom-color="customColor"
|
||||
:name="loginForm.name"
|
||||
:slogan="loginForm.slogan"
|
||||
:web="web"
|
||||
:show-slogan="loginForm.showSlogan"
|
||||
:bg="bg"
|
||||
:login="login"
|
||||
:is-blue="isBlue"
|
||||
:height="navigateHeight"
|
||||
:foot="loginForm.foot"
|
||||
:foot-content="loginForm.footContent"
|
||||
/>
|
||||
<div class="tips-page">
|
||||
{{
|
||||
t('system.screen_customization_supported', {
|
||||
msg: loginForm.name || 'SQLBot',
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-list">
|
||||
<div v-for="ele in configList" :key="ele.type" class="config-item">
|
||||
<div class="config-logo">
|
||||
<span class="logo">{{ ele.logo }}</span>
|
||||
<el-upload
|
||||
:name="ele.type"
|
||||
:show-file-list="false"
|
||||
class="upload-demo"
|
||||
accept=".jpeg,.jpg,.png,.gif,.svg"
|
||||
:before-upload="(e: any) => beforeUpload(e, ele)"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
<el-button secondary>{{ t('system.replace_image') }}</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="tips">{{ ele.tips }}</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
require-asterisk-position="right"
|
||||
label-width="120px"
|
||||
class="page-Form form-content_error_a"
|
||||
<div class="appearance no-padding">
|
||||
<el-scrollbar>
|
||||
<div class="scroll-content">
|
||||
<p class="router-title">{{ t('system.appearance_settings') }}</p>
|
||||
<div class="appearance-table__content">
|
||||
<div class="theme">
|
||||
<div class="show-theme">{{ $t('system.platform_display_theme') }}</div>
|
||||
<div class="theme-color">
|
||||
<div class="btn-select">
|
||||
<el-button
|
||||
:class="[themeColor === 'default' && 'is-active']"
|
||||
text
|
||||
@click="themeColorChange('default')"
|
||||
>
|
||||
<el-form-item :label="t('system.website_name')" prop="name">
|
||||
<el-input
|
||||
v-model="loginForm.name"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('system.website_name')
|
||||
"
|
||||
maxlength="20"
|
||||
/>
|
||||
<div class="form-tips">{{ t('system.on_webpage_tabs') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<el-checkbox
|
||||
v-model="loginForm.showSlogan"
|
||||
true-value="0"
|
||||
false-value="1"
|
||||
:label="$t('system.welcome_message')"
|
||||
{{ $t('system.default_turquoise') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
:class="[themeColor === 'blue' && 'is-active']"
|
||||
text
|
||||
@click="themeColorChange('blue')"
|
||||
>
|
||||
{{ $t('system.tech_blue') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
:class="[themeColor === 'custom' && 'is-active']"
|
||||
text
|
||||
@click="themeColorChange('custom')"
|
||||
>
|
||||
{{ $t('system.custom') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="themeColor === 'custom'">
|
||||
<div class="theme-bg">{{ t('system.customize_theme_color') }}</div>
|
||||
<el-color-picker
|
||||
v-model="customColor"
|
||||
:trigger-width="28"
|
||||
:predefine="COLOR_PANEL"
|
||||
is-custom
|
||||
effect="light"
|
||||
@change="customColorChange"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="login" :class="themeColor">
|
||||
<div class="platform-login">
|
||||
{{ t('system.platform_login_settings') }}
|
||||
</div>
|
||||
<div class="page-preview">
|
||||
<div class="title">
|
||||
<span class="left">{{ t('system.page_preview') }}</span>
|
||||
<el-button text @click="resetLoginForm(true)">{{
|
||||
t('system.restore_default')
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="page-setting">
|
||||
<div class="page-content">
|
||||
<!-- <img :src="loginPreview" alt="" /> -->
|
||||
<login-preview
|
||||
:navigate-bg="navigateBg"
|
||||
:theme-color="themeColor"
|
||||
:custom-color="customColor"
|
||||
:name="loginForm.name"
|
||||
:slogan="loginForm.slogan"
|
||||
:web="web"
|
||||
:show-slogan="loginForm.showSlogan"
|
||||
:bg="bg"
|
||||
:login="login"
|
||||
:is-blue="isBlue"
|
||||
:height="navigateHeight"
|
||||
:foot="loginForm.foot"
|
||||
:foot-content="loginForm.footContent"
|
||||
/>
|
||||
<div class="tips-page">
|
||||
{{
|
||||
t('system.screen_customization_supported', {
|
||||
msg: loginForm.name || 'SQLBot',
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-list">
|
||||
<div v-for="ele in configList" :key="ele.type" class="config-item">
|
||||
<div class="config-logo">
|
||||
<span class="logo">{{ ele.logo }}</span>
|
||||
<el-upload
|
||||
:name="ele.type"
|
||||
:show-file-list="false"
|
||||
class="upload-demo"
|
||||
accept=".jpeg,.jpg,.png,.gif,.svg"
|
||||
:before-upload="(e: any) => beforeUpload(e, ele)"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
<el-button secondary>{{ t('system.replace_image') }}</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="tips">{{ ele.tips }}</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
require-asterisk-position="right"
|
||||
label-width="120px"
|
||||
class="page-Form form-content_error_a"
|
||||
>
|
||||
<el-form-item :label="t('system.website_name')" prop="name">
|
||||
<el-input
|
||||
v-model="loginForm.name"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('system.website_name')
|
||||
"
|
||||
maxlength="20"
|
||||
/>
|
||||
</template>
|
||||
<el-input v-model="loginForm.slogan" maxlength="50" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="t('system.footer')" prop="foot">
|
||||
<div class="form-tips">{{ t('system.on_webpage_tabs') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<el-checkbox
|
||||
v-model="loginForm.showSlogan"
|
||||
true-value="0"
|
||||
false-value="1"
|
||||
:label="$t('system.welcome_message')"
|
||||
/>
|
||||
</template>
|
||||
<el-input v-model="loginForm.slogan" maxlength="50" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="t('system.footer')" prop="foot">
|
||||
<el-switch v-model="loginForm.foot" active-value="true" inactive-value="false" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@@ -142,79 +143,82 @@
|
||||
v-model="loginForm.footContent"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login">
|
||||
<div class="platform-login">{{ t('system.platform_settings') }}</div>
|
||||
<div class="page-preview">
|
||||
<div class="title">
|
||||
<span class="left">{{ t('system.page_preview') }}</span>
|
||||
<el-button text @click="resetTopForm(true)">{{
|
||||
t('system.restore_default')
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="page-setting">
|
||||
<div class="page-content">
|
||||
<!-- <div class="navigate-preview" :style="{'height': `${navigateHeight}px`}"> -->
|
||||
<div class="navigate-preview" style="height: 425px">
|
||||
<div class="navigate-head">
|
||||
<div class="header-sql">
|
||||
<img height="30" width="30" v-if="pageLogin" :src="pageLogin" alt="" />
|
||||
<custom_small v-else-if="themeColor === 'custom'" class="logo" />
|
||||
<logo v-else></logo>
|
||||
<span style="margin-left: 8px">{{ loginForm.name }}</span>
|
||||
</div>
|
||||
<div class="bottom-sql">
|
||||
<Person
|
||||
:is-blue="isBlue"
|
||||
:show-about="topForm.showAbout === '0'"
|
||||
:show-doc="topForm.showDoc === '0'"
|
||||
></Person>
|
||||
<el-icon size="20" class="fold">
|
||||
<icon_side_fold_outlined></icon_side_fold_outlined>
|
||||
</el-icon>
|
||||
<div class="login">
|
||||
<div class="platform-login">{{ t('system.platform_settings') }}</div>
|
||||
<div class="page-preview">
|
||||
<div class="title">
|
||||
<span class="left">{{ t('system.page_preview') }}</span>
|
||||
<el-button text @click="resetTopForm(true)">{{
|
||||
t('system.restore_default')
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="page-setting">
|
||||
<div class="page-content">
|
||||
<!-- <div class="navigate-preview" :style="{'height': `${navigateHeight}px`}"> -->
|
||||
<div class="navigate-preview" style="height: 425px">
|
||||
<div class="navigate-head">
|
||||
<div class="header-sql">
|
||||
<img height="30" width="30" v-if="pageLogin" :src="pageLogin" alt="" />
|
||||
<custom_small v-else-if="themeColor === 'custom'" class="logo" />
|
||||
<logo v-else></logo>
|
||||
<span style="margin-left: 8px">{{ loginForm.name }}</span>
|
||||
</div>
|
||||
<div class="bottom-sql">
|
||||
<Person
|
||||
:is-blue="isBlue"
|
||||
:show-about="topForm.showAbout === '0'"
|
||||
:show-doc="topForm.showDoc === '0'"
|
||||
></Person>
|
||||
<el-icon size="20" class="fold">
|
||||
<icon_side_fold_outlined></icon_side_fold_outlined>
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tips-page">
|
||||
{{
|
||||
t('system.screen_customization_settings', {
|
||||
msg: loginForm.name || 'SQLBot',
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tips-page">
|
||||
{{
|
||||
t('system.screen_customization_settings', { msg: loginForm.name || 'SQLBot' })
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-list">
|
||||
<el-checkbox
|
||||
v-model="topForm.showDoc"
|
||||
true-value="0"
|
||||
false-value="1"
|
||||
:label="$t('system.help_documentation')"
|
||||
/>
|
||||
<div class="doc-input">
|
||||
<el-input
|
||||
v-model="topForm.help"
|
||||
style="width: 100%"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('system.help_documentation')
|
||||
"
|
||||
<div class="config-list">
|
||||
<el-checkbox
|
||||
v-model="topForm.showDoc"
|
||||
true-value="0"
|
||||
false-value="1"
|
||||
:label="$t('system.help_documentation')"
|
||||
/>
|
||||
<div class="doc-input">
|
||||
<el-input
|
||||
v-model="topForm.help"
|
||||
style="width: 100%"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('system.help_documentation')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<el-checkbox
|
||||
v-model="topForm.showAbout"
|
||||
true-value="0"
|
||||
false-value="1"
|
||||
:label="$t('system.show_about')"
|
||||
/>
|
||||
</div>
|
||||
<el-checkbox
|
||||
v-model="topForm.showAbout"
|
||||
true-value="0"
|
||||
false-value="1"
|
||||
:label="$t('system.show_about')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="appearance-foot">
|
||||
<el-button secondary @click="giveUp">{{ $t('system.abort_update') }}</el-button>
|
||||
<el-button v-if="showSaveButton" type="primary" @click="saveHandler">{{
|
||||
@@ -610,6 +614,14 @@ onUnmounted(() => {
|
||||
.appearance {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
& > .ed-scrollbar {
|
||||
.scroll-content {
|
||||
padding: 16px 24px 80px 24px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.router-title {
|
||||
color: #1f2329;
|
||||
font-feature-settings:
|
||||
@@ -625,8 +637,7 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
min-width: 840px;
|
||||
margin-top: 16px;
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 180px);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
:deep(.ed-form-item__error) {
|
||||
@@ -910,13 +921,13 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 24px;
|
||||
padding-bottom: 0;
|
||||
background: var(--ContentBG, #ffffff);
|
||||
position: absolute;
|
||||
left: -24px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: calc(100% + 48px);
|
||||
width: 100%;
|
||||
border-top: 1px solid #1f232926;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -697,103 +697,113 @@ const saveHandler = () => {
|
||||
</template>
|
||||
|
||||
<div v-if="activeStep === 0" class="drawer-content">
|
||||
<div class="title">
|
||||
{{ $t('embedded.basic_information') }}
|
||||
</div>
|
||||
<el-scrollbar>
|
||||
<div class="scroll-content">
|
||||
<div class="title">
|
||||
{{ $t('embedded.basic_information') }}
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="embeddedFormRef"
|
||||
:model="currentEmbedded"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
class="form-content_error"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item prop="name" :label="t('embedded.application_name')">
|
||||
<el-input
|
||||
v-model="currentEmbedded.name"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('embedded.application_name')
|
||||
"
|
||||
clearable
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form
|
||||
ref="embeddedFormRef"
|
||||
:model="currentEmbedded"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
class="form-content_error"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item prop="name" :label="t('embedded.application_name')">
|
||||
<el-input
|
||||
v-model="currentEmbedded.name"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('embedded.application_name')
|
||||
"
|
||||
clearable
|
||||
maxlength="50"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="description" :label="t('embedded.application_description')">
|
||||
<el-input
|
||||
v-model="currentEmbedded.description"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
clearable
|
||||
:placeholder="$t('datasource.please_enter')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="description" :label="t('embedded.application_description')">
|
||||
<el-input
|
||||
v-model="currentEmbedded.description"
|
||||
:rows="3"
|
||||
type="textarea"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
clearable
|
||||
:placeholder="$t('datasource.please_enter')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="domain" :label="t('embedded.cross_domain_settings')">
|
||||
<el-input
|
||||
v-model="currentEmbedded.domain"
|
||||
clearable
|
||||
:placeholder="$t('embedded.third_party_address')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form-item prop="domain" :label="t('embedded.cross_domain_settings')">
|
||||
<el-input
|
||||
v-model="currentEmbedded.domain"
|
||||
clearable
|
||||
:placeholder="$t('embedded.third_party_address')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-if="activeStep === 1 && advancedApplication" class="drawer-content">
|
||||
<div class="title">
|
||||
{{ $t('embedded.configure_interface') }}
|
||||
</div>
|
||||
<el-scrollbar>
|
||||
<div class="scroll-content">
|
||||
<div class="title">
|
||||
{{ $t('embedded.configure_interface') }}
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="urlFormRef"
|
||||
:model="urlForm"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
:rules="urlRules"
|
||||
class="form-content_error"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item prop="endpoint" :label="t('embedded.interface_url')">
|
||||
<el-input
|
||||
v-model="urlForm.endpoint"
|
||||
clearable
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('embedded.interface_url')
|
||||
"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="AES" class="custom-require">
|
||||
<template #label>
|
||||
<span class="custom-require_danger">{{ t('embedded.aes_enable') }}</span>
|
||||
</template>
|
||||
<el-form
|
||||
ref="urlFormRef"
|
||||
:model="urlForm"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
:rules="urlRules"
|
||||
class="form-content_error"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item prop="endpoint" :label="t('embedded.interface_url')">
|
||||
<el-input
|
||||
v-model="urlForm.endpoint"
|
||||
clearable
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('embedded.interface_url')
|
||||
"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="AES" class="custom-require">
|
||||
<template #label>
|
||||
<span class="custom-require_danger">{{ t('embedded.aes_enable') }}</span>
|
||||
</template>
|
||||
|
||||
<el-switch v-model="urlForm.encrypt" />
|
||||
<span class="aes-encrypt-tips">{{ t('embedded.aes_enable_tips') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="urlForm.encrypt" prop="aes_key" label="AES Key">
|
||||
<el-input
|
||||
v-model="urlForm.aes_key"
|
||||
clearable
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
' 32 ' +
|
||||
$t('embedded.bit') +
|
||||
' AES Key'
|
||||
"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item v-if="urlForm.encrypt" prop="aes_iv" label="AES IV">
|
||||
<el-switch v-model="urlForm.encrypt" />
|
||||
<span class="aes-encrypt-tips">{{ t('embedded.aes_enable_tips') }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="urlForm.encrypt" prop="aes_key" label="AES Key">
|
||||
<el-input
|
||||
v-model="urlForm.aes_key"
|
||||
clearable
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
' 32 ' +
|
||||
$t('embedded.bit') +
|
||||
' AES Key'
|
||||
"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item v-if="urlForm.encrypt" prop="aes_iv" label="AES IV">
|
||||
<el-input
|
||||
v-model="urlForm.aes_iv"
|
||||
clearable
|
||||
@@ -807,124 +817,135 @@ const saveHandler = () => {
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<el-form-item class="certificate-table_form" prop="certificate">
|
||||
<template #label>
|
||||
<div class="title-content">
|
||||
<span class="title-form">{{ t('embedded.interface_credentials') }}</span>
|
||||
<span class="add btn" @click="initCertificate(null)">
|
||||
<el-icon size="16">
|
||||
<icon_add_outlined></icon_add_outlined>
|
||||
</el-icon>
|
||||
{{ t('model.add') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
class="table-content"
|
||||
:class="!!urlForm.certificate.length && 'no-credentials_yet'"
|
||||
>
|
||||
<el-table
|
||||
:empty-text="$t('embedded.no_credentials_yet')"
|
||||
:data="urlForm.certificate"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="source" :label="t('embedded.credential_name')" width="180" />
|
||||
<el-table-column
|
||||
prop="type"
|
||||
:label="t('embedded.system_credential_type')"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="target_key"
|
||||
:label="t('embedded.target_credential_name')"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column prop="target" :label="t('embedded.target_credential_location')" />
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
width="80"
|
||||
class-name="operation-column_text"
|
||||
:label="$t('ds.actions')"
|
||||
<el-form-item class="certificate-table_form" prop="certificate">
|
||||
<template #label>
|
||||
<div class="title-content">
|
||||
<span class="title-form">{{ t('embedded.interface_credentials') }}</span>
|
||||
<span class="add btn" @click="initCertificate(null)">
|
||||
<el-icon size="16">
|
||||
<icon_add_outlined></icon_add_outlined>
|
||||
</el-icon>
|
||||
{{ t('model.add') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
class="table-content"
|
||||
:class="!!urlForm.certificate.length && 'no-credentials_yet'"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button text type="primary" @click="initCertificate(scope.row)">
|
||||
<el-icon size="16">
|
||||
<icon_edit_outlined></icon_edit_outlined>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button text type="primary" @click="handleCredentialsDel(scope.row)">
|
||||
<el-icon size="16">
|
||||
<icon_delete></icon_delete>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
:empty-text="$t('embedded.no_credentials_yet')"
|
||||
:data="urlForm.certificate"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
prop="source"
|
||||
:label="t('embedded.credential_name')"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
:label="t('embedded.system_credential_type')"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="target_key"
|
||||
:label="t('embedded.target_credential_name')"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="target"
|
||||
:label="t('embedded.target_credential_location')"
|
||||
/>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
width="80"
|
||||
class-name="operation-column_text"
|
||||
:label="$t('ds.actions')"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button text type="primary" @click="initCertificate(scope.row)">
|
||||
<el-icon size="16">
|
||||
<icon_edit_outlined></icon_edit_outlined>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button text type="primary" @click="handleCredentialsDel(scope.row)">
|
||||
<el-icon size="16">
|
||||
<icon_delete></icon_delete>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-if="activeStep === 1 && !advancedApplication" class="drawer-content">
|
||||
<el-scrollbar>
|
||||
<div class="title">
|
||||
{{ $t('embedded.set_data_source') }}
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="title">
|
||||
{{ $t('embedded.set_data_source') }}
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="dsFormRef"
|
||||
:model="dsForm"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
:rules="dsRules"
|
||||
class="form-content_error"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item prop="oid" :label="t('user.workspace')">
|
||||
<el-select
|
||||
v-model="dsForm.oid"
|
||||
filterable
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('user.workspace')
|
||||
"
|
||||
@change="wsChanged"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in workspaces"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form
|
||||
ref="dsFormRef"
|
||||
:model="dsForm"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
:rules="dsRules"
|
||||
class="form-content_error"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item prop="oid" :label="t('user.workspace')">
|
||||
<el-select
|
||||
v-model="dsForm.oid"
|
||||
filterable
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('user.workspace')
|
||||
"
|
||||
@change="wsChanged"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in workspaces"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="private-list_form">
|
||||
<template #label>
|
||||
<div class="private-list">
|
||||
{{ t('embedded.set_data_source') }}
|
||||
<span :title="$t('embedded.open_the_query')" class="open-the_query ellipsis"
|
||||
>{{ $t('embedded.open_the_query') }}
|
||||
</span>
|
||||
<el-form-item class="private-list_form">
|
||||
<template #label>
|
||||
<div class="private-list">
|
||||
{{ t('embedded.set_data_source') }}
|
||||
<span :title="$t('embedded.open_the_query')" class="open-the_query ellipsis"
|
||||
>{{ $t('embedded.open_the_query') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="card-ds_content">
|
||||
<DsCard
|
||||
v-for="(ele, index) in dsListOptions"
|
||||
:id="ele.id"
|
||||
:key="ele.id"
|
||||
:class="[0, 1].includes(index) && 'no-margin_top'"
|
||||
:name="ele.name"
|
||||
:type="ele.type"
|
||||
:type-name="ele.type_name"
|
||||
:description="ele.description"
|
||||
:is-private="!dsForm.public_list.includes(ele.id)"
|
||||
:num="ele.num"
|
||||
@active="handleActive(ele)"
|
||||
@private="handlePrivate(ele)"
|
||||
@public="handlePublic(ele)"
|
||||
></DsCard>
|
||||
</div>
|
||||
</template>
|
||||
<div class="card-ds_content">
|
||||
<DsCard
|
||||
v-for="(ele, index) in dsListOptions"
|
||||
:id="ele.id"
|
||||
:key="ele.id"
|
||||
:class="[0, 1].includes(index) && 'no-margin_top'"
|
||||
:name="ele.name"
|
||||
:type="ele.type"
|
||||
:type-name="ele.type_name"
|
||||
:description="ele.description"
|
||||
:is-private="!dsForm.public_list.includes(ele.id)"
|
||||
:num="ele.num"
|
||||
@active="handleActive(ele)"
|
||||
@private="handlePrivate(ele)"
|
||||
@public="handlePublic(ele)"
|
||||
></DsCard>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
@@ -1175,6 +1196,10 @@ const saveHandler = () => {
|
||||
|
||||
<style lang="less">
|
||||
.embedded-drawer-fullscreen {
|
||||
.ed-drawer__body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
@@ -1218,11 +1243,15 @@ const saveHandler = () => {
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 24px;
|
||||
overflow-y: auto;
|
||||
& > .ed-scrollbar {
|
||||
.scroll-content {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ed-form-item {
|
||||
&:last-child {
|
||||
|
||||
@@ -277,146 +277,148 @@ defineExpose({
|
||||
<template>
|
||||
<div class="model-form" :class="editModel && 'is-edit_model'">
|
||||
<div v-if="!editModel" class="model-name">{{ activeName }}</div>
|
||||
<div class="form-content">
|
||||
<el-form
|
||||
ref="modelRef"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
:model="modelForm"
|
||||
style="width: 100%"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item class="custom-require flex-inline" prop="name">
|
||||
<template #label
|
||||
><span class="custom-require_danger">{{ t('model.model_name') }}</span>
|
||||
<el-tooltip effect="dark" :content="t('model.custom_model_name')" placement="right">
|
||||
<el-icon style="margin-left: 4px" size="16">
|
||||
<dashboard_info></dashboard_info>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="modelForm.name"
|
||||
clearable
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('model.model_name')
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="type" :label="t('model.model_type')">
|
||||
<el-select v-model="modelForm.model_type" style="width: 100%" disabled>
|
||||
<el-option
|
||||
v-for="item in modelTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.i18nKey ? $t(item.i18nKey) : item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="custom-require" prop="base_model">
|
||||
<template #label
|
||||
><span class="custom-require_danger">{{ t('model.basic_model') }}</span>
|
||||
<span class="enter">{{ t('model.enter_to_add') }}</span>
|
||||
</template>
|
||||
<el-select
|
||||
v-model="modelForm['base_model']"
|
||||
style="width: 100%"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
:reserve-keyword="false"
|
||||
@change="baseModelChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in modelList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="modelSelected" prop="api_domain" :label="t('model.api_domain_name')">
|
||||
<el-input
|
||||
v-model="modelForm.api_domain"
|
||||
clearable
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('model.api_domain_name')
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="modelSelected" prop="api_key" label="API Key">
|
||||
<el-input
|
||||
v-model="modelForm.api_key"
|
||||
clearable
|
||||
:placeholder="$t('datasource.please_enter') + $t('common.empty') + 'API Key'"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div
|
||||
v-if="modelSelected"
|
||||
class="advance-setting"
|
||||
:class="configExpand && 'expand'"
|
||||
@click="configExpand = !configExpand"
|
||||
>
|
||||
{{ t('model.advanced_settings') }}
|
||||
<el-icon size="16">
|
||||
<arrow_down></arrow_down>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div v-if="modelSelected && configExpand" class="model-params">
|
||||
{{ t('model.model_parameters') }}
|
||||
<span class="btn" @click="handleParamsCreate">
|
||||
<el-icon size="16">
|
||||
<icon_add_outlined></icon_add_outlined>
|
||||
</el-icon>
|
||||
{{ t('model.add') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="modelSelected && configExpand"
|
||||
class="params-table"
|
||||
:class="!advancedSettingPagination.length && 'bottom-border'"
|
||||
>
|
||||
<el-table :data="advancedSettingPagination" style="width: 100%">
|
||||
<el-table-column prop="key" :label="t('model.parameters')" width="280" />
|
||||
<el-table-column prop="name" :label="t('model.display_name')" width="280" />
|
||||
<el-table-column prop="val" show-overflow-tooltip :label="t('model.parameter_value')" />
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
width="80"
|
||||
class-name="operation-column_text"
|
||||
:label="$t('ds.actions')"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button text type="primary" @click="handleParamsEdite(scope.row)">
|
||||
<el-icon size="16">
|
||||
<icon_edit_outlined></icon_edit_outlined>
|
||||
<el-scrollbar>
|
||||
<div class="form-content">
|
||||
<el-form
|
||||
ref="modelRef"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
:model="modelForm"
|
||||
style="width: 100%"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item class="custom-require flex-inline" prop="name">
|
||||
<template #label
|
||||
><span class="custom-require_danger">{{ t('model.model_name') }}</span>
|
||||
<el-tooltip effect="dark" :content="t('model.custom_model_name')" placement="right">
|
||||
<el-icon style="margin-left: 4px" size="16">
|
||||
<dashboard_info></dashboard_info>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button text type="primary" @click="handleParamsDel(scope.row)">
|
||||
<el-icon size="16">
|
||||
<icon_delete></icon_delete>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-input
|
||||
v-model="modelForm.name"
|
||||
clearable
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('model.model_name')
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="type" :label="t('model.model_type')">
|
||||
<el-select v-model="modelForm.model_type" style="width: 100%" disabled>
|
||||
<el-option
|
||||
v-for="item in modelTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.i18nKey ? $t(item.i18nKey) : item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="custom-require" prop="base_model">
|
||||
<template #label
|
||||
><span class="custom-require_danger">{{ t('model.basic_model') }}</span>
|
||||
<span class="enter">{{ t('model.enter_to_add') }}</span>
|
||||
</template>
|
||||
<el-select
|
||||
v-model="modelForm['base_model']"
|
||||
style="width: 100%"
|
||||
filterable
|
||||
allow-create
|
||||
default-first-option
|
||||
:reserve-keyword="false"
|
||||
@change="baseModelChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in modelList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="modelSelected" prop="api_domain" :label="t('model.api_domain_name')">
|
||||
<el-input
|
||||
v-model="modelForm.api_domain"
|
||||
clearable
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') + $t('common.empty') + $t('model.api_domain_name')
|
||||
"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="modelSelected" prop="api_key" label="API Key">
|
||||
<el-input
|
||||
v-model="modelForm.api_key"
|
||||
clearable
|
||||
:placeholder="$t('datasource.please_enter') + $t('common.empty') + 'API Key'"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div
|
||||
v-if="modelSelected"
|
||||
class="advance-setting"
|
||||
:class="configExpand && 'expand'"
|
||||
@click="configExpand = !configExpand"
|
||||
>
|
||||
{{ t('model.advanced_settings') }}
|
||||
<el-icon size="16">
|
||||
<arrow_down></arrow_down>
|
||||
</el-icon>
|
||||
</div>
|
||||
<div v-if="modelSelected && configExpand" class="model-params">
|
||||
{{ t('model.model_parameters') }}
|
||||
<span class="btn" @click="handleParamsCreate">
|
||||
<el-icon size="16">
|
||||
<icon_add_outlined></icon_add_outlined>
|
||||
</el-icon>
|
||||
{{ t('model.add') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="modelSelected && configExpand"
|
||||
class="params-table"
|
||||
:class="!advancedSettingPagination.length && 'bottom-border'"
|
||||
>
|
||||
<el-table :data="advancedSettingPagination" style="width: 100%">
|
||||
<el-table-column prop="key" :label="t('model.parameters')" width="280" />
|
||||
<el-table-column prop="name" :label="t('model.display_name')" width="280" />
|
||||
<el-table-column prop="val" show-overflow-tooltip :label="t('model.parameter_value')" />
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
width="80"
|
||||
class-name="operation-column_text"
|
||||
:label="$t('ds.actions')"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button text type="primary" @click="handleParamsEdite(scope.row)">
|
||||
<el-icon size="16">
|
||||
<icon_edit_outlined></icon_edit_outlined>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button text type="primary" @click="handleParamsDel(scope.row)">
|
||||
<el-icon size="16">
|
||||
<icon_delete></icon_delete>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div
|
||||
v-if="modelSelected && advancedSetting.length > 5 && configExpand"
|
||||
class="params-table_pagination"
|
||||
>
|
||||
<el-pagination
|
||||
:default-page-size="5"
|
||||
layout="prev, pager, next"
|
||||
:total="advancedSetting.length"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="modelSelected && advancedSetting.length > 5 && configExpand"
|
||||
class="params-table_pagination"
|
||||
>
|
||||
<el-pagination
|
||||
:default-page-size="5"
|
||||
layout="prev, pager, next"
|
||||
:total="advancedSetting.length"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-drawer
|
||||
v-model="paramsFormDrawer"
|
||||
:size="600"
|
||||
@@ -444,11 +446,7 @@ defineExpose({
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 56px;
|
||||
height: 100%;
|
||||
|
||||
&.is-edit_model {
|
||||
width: 100%;
|
||||
}
|
||||
height: calc(100% - 120px);
|
||||
.model-name {
|
||||
height: 56px;
|
||||
width: 100%;
|
||||
@@ -460,137 +458,145 @@ defineExpose({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.form-content {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
padding-top: 24px;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 176px);
|
||||
padding-bottom: 24px;
|
||||
& > .ed-scrollbar {
|
||||
.form-content {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
padding-top: 24px;
|
||||
height: 100%;
|
||||
padding-bottom: 80px;
|
||||
|
||||
.ed-form-item--default {
|
||||
margin-bottom: 16px;
|
||||
.ed-form-item--default {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&.is-error {
|
||||
margin-bottom: 40px;
|
||||
&.is-error {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(
|
||||
.custom-require.ed-form-item.is-required:not(.is-no-asterisk).asterisk-right
|
||||
> .ed-form-item__label:after
|
||||
) {
|
||||
display: none;
|
||||
}
|
||||
:deep(
|
||||
.custom-require.ed-form-item.is-required:not(.is-no-asterisk).asterisk-right
|
||||
> .ed-form-item__label:after
|
||||
) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.flex-inline .ed-form-item__label) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
:deep(.flex-inline .ed-form-item__label) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.enter {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #ff8800;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.custom-require_danger::after {
|
||||
color: var(--ed-color-danger);
|
||||
content: '*';
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.advance-setting {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
|
||||
.ed-icon {
|
||||
.enter {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #ff8800;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&.expand {
|
||||
.ed-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.custom-require_danger::after {
|
||||
color: var(--ed-color-danger);
|
||||
content: '*';
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.model-params {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin: 16px 0 8px 0;
|
||||
|
||||
.btn {
|
||||
height: 26px;
|
||||
.advance-setting {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 4px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #1f23291a;
|
||||
.ed-icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&.expand {
|
||||
.ed-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ed-icon {
|
||||
margin-right: 4px;
|
||||
.model-params {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin: 16px 0 8px 0;
|
||||
|
||||
.btn {
|
||||
height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 4px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #1f23291a;
|
||||
}
|
||||
}
|
||||
|
||||
.ed-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.params-table {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #dee0e3;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
overflow-y: auto;
|
||||
|
||||
&.bottom-border {
|
||||
border-bottom: 1px solid #dee0e3;
|
||||
}
|
||||
:deep(.ed-table .ed-table__cell) {
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
:deep(.ed-table .cell) {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.params-table_pagination {
|
||||
margin-top: 8px;
|
||||
|
||||
.ed-pagination {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:deep(.ed-pager li.number:hover) {
|
||||
background-color: var(--ed-color-primary-1a, #1cba901a);
|
||||
}
|
||||
}
|
||||
|
||||
.operation-column_text {
|
||||
.ed-button {
|
||||
color: #646a73;
|
||||
height: 24px;
|
||||
}
|
||||
.ed-button:not(.is-disabled):hover {
|
||||
background: #1f23291a;
|
||||
}
|
||||
.ed-button + .ed-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.params-table {
|
||||
border-radius: 6px;
|
||||
border: 1px solid #dee0e3;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
overflow-y: auto;
|
||||
|
||||
&.bottom-border {
|
||||
border-bottom: 1px solid #dee0e3;
|
||||
}
|
||||
:deep(.ed-table .ed-table__cell) {
|
||||
padding: 7px 0;
|
||||
}
|
||||
|
||||
:deep(.ed-table .cell) {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.params-table_pagination {
|
||||
margin-top: 8px;
|
||||
|
||||
.ed-pagination {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:deep(.ed-pager li.number:hover) {
|
||||
background-color: var(--ed-color-primary-1a, #1cba901a);
|
||||
}
|
||||
}
|
||||
|
||||
.operation-column_text {
|
||||
.ed-button {
|
||||
color: #646a73;
|
||||
height: 24px;
|
||||
}
|
||||
.ed-button:not(.is-disabled):hover {
|
||||
background: #1f23291a;
|
||||
}
|
||||
.ed-button + .ed-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
&.is-edit_model {
|
||||
width: 100%;
|
||||
.form-content {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -632,129 +632,141 @@ const columnRules = {
|
||||
</template>
|
||||
|
||||
<div v-show="activeStep === 0" class="drawer-content">
|
||||
<div class="title">
|
||||
{{ $t('ds.form.base_info') }}
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
ref="termFormRef"
|
||||
:model="currentPermission"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
class="form-content_error"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item prop="name" :label="t('permission.rule_group_name')">
|
||||
<el-input
|
||||
v-model="currentPermission.name"
|
||||
maxlength="50"
|
||||
clearable
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('permission.rule_group_name')
|
||||
"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="add-permission_form">
|
||||
<template #label>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
"
|
||||
>
|
||||
{{ t('permission.permission_rule') }}
|
||||
|
||||
<el-popover popper-class="system-permission_user" placement="bottom">
|
||||
<template #reference>
|
||||
<el-button class="add-btn" type="primary">
|
||||
{{ $t('model.add') }}
|
||||
<el-icon style="margin-left: 4px" size="16">
|
||||
<icon_down_outlined></icon_down_outlined>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
<div class="popover">
|
||||
<div class="popover-content">
|
||||
<div
|
||||
v-for="ele in userTypeList"
|
||||
:key="ele.name"
|
||||
class="popover-item"
|
||||
@click="handleAddPermission(ele.value)"
|
||||
>
|
||||
<div class="model-name">{{ ele.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
class="table-content"
|
||||
:class="!currentPermission.permissions.length && 'border-bottom'"
|
||||
>
|
||||
<el-table
|
||||
:empty-text="$t('permission.no_rule')"
|
||||
:data="currentPermission.permissions"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="name" :label="$t('permission.rule_name')" />
|
||||
<el-table-column prop="type" :label="$t('permission.type')">
|
||||
<template #default="scope">
|
||||
{{
|
||||
scope.row.type === 'row'
|
||||
? $t('permission.row_permission')
|
||||
: $t('permission.column_permission')
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ds_name" :label="$t('permission.data_source')" />
|
||||
<el-table-column prop="table_name" :label="$t('permission.data_table')" />
|
||||
<el-table-column
|
||||
class-name="actions-methods"
|
||||
fixed="right"
|
||||
width="80"
|
||||
:label="$t('ds.actions')"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tooltip
|
||||
:offset="14"
|
||||
effect="dark"
|
||||
:content="$t('datasource.edit')"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon class="action-btn" size="16" @click="editForm(scope.row)">
|
||||
<IconOpeEdit></IconOpeEdit>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
:offset="14"
|
||||
effect="dark"
|
||||
:content="$t('dashboard.delete')"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon class="action-btn" size="16" @click="deleteRuleHandler(scope.row)">
|
||||
<IconOpeDelete></IconOpeDelete>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-scrollbar>
|
||||
<div class="scroll-content">
|
||||
<div class="title">
|
||||
{{ $t('ds.form.base_info') }}
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-form
|
||||
ref="termFormRef"
|
||||
:model="currentPermission"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
class="form-content_error"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item prop="name" :label="t('permission.rule_group_name')">
|
||||
<el-input
|
||||
v-model="currentPermission.name"
|
||||
maxlength="50"
|
||||
clearable
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('permission.rule_group_name')
|
||||
"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="add-permission_form">
|
||||
<template #label>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
"
|
||||
>
|
||||
{{ t('permission.permission_rule') }}
|
||||
|
||||
<el-popover popper-class="system-permission_user" placement="bottom">
|
||||
<template #reference>
|
||||
<el-button class="add-btn" type="primary">
|
||||
{{ $t('model.add') }}
|
||||
<el-icon style="margin-left: 4px" size="16">
|
||||
<icon_down_outlined></icon_down_outlined>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
<div class="popover">
|
||||
<div class="popover-content">
|
||||
<div
|
||||
v-for="ele in userTypeList"
|
||||
:key="ele.name"
|
||||
class="popover-item"
|
||||
@click="handleAddPermission(ele.value)"
|
||||
>
|
||||
<div class="model-name">{{ ele.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
class="table-content"
|
||||
:class="!currentPermission.permissions.length && 'border-bottom'"
|
||||
>
|
||||
<el-table
|
||||
:empty-text="$t('permission.no_rule')"
|
||||
:data="currentPermission.permissions"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="name" :label="$t('permission.rule_name')" />
|
||||
<el-table-column prop="type" :label="$t('permission.type')">
|
||||
<template #default="scope">
|
||||
{{
|
||||
scope.row.type === 'row'
|
||||
? $t('permission.row_permission')
|
||||
: $t('permission.column_permission')
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ds_name" :label="$t('permission.data_source')" />
|
||||
<el-table-column prop="table_name" :label="$t('permission.data_table')" />
|
||||
<el-table-column
|
||||
class-name="actions-methods"
|
||||
fixed="right"
|
||||
width="80"
|
||||
:label="$t('ds.actions')"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-tooltip
|
||||
:offset="14"
|
||||
effect="dark"
|
||||
:content="$t('datasource.edit')"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon class="action-btn" size="16" @click="editForm(scope.row)">
|
||||
<IconOpeEdit></IconOpeEdit>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
:offset="14"
|
||||
effect="dark"
|
||||
:content="$t('dashboard.delete')"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon
|
||||
class="action-btn"
|
||||
size="16"
|
||||
@click="deleteRuleHandler(scope.row)"
|
||||
>
|
||||
<IconOpeDelete></IconOpeDelete>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div v-show="activeStep !== 0" class="select-permission_content">
|
||||
<SelectPermission ref="selectPermissionRef"></SelectPermission>
|
||||
<el-scrollbar>
|
||||
<div class="scroll-content">
|
||||
<SelectPermission ref="selectPermissionRef"></SelectPermission>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button secondary @click="beforeClose"> {{ $t('common.cancel') }} </el-button>
|
||||
@@ -938,6 +950,10 @@ const columnRules = {
|
||||
|
||||
<style lang="less">
|
||||
.permission-drawer-fullscreen {
|
||||
.ed-drawer__body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
@@ -948,11 +964,15 @@ const columnRules = {
|
||||
|
||||
.select-permission_content,
|
||||
.drawer-content {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 24px;
|
||||
overflow-y: auto;
|
||||
& > .ed-scrollbar {
|
||||
.scroll-content {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
|
||||
Reference in New Issue
Block a user