This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev-2.1.5
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev-2.1.5 by this push:
new a78f1eab9 [Improve]: Created form drawer changed to modal (#4024)
a78f1eab9 is described below
commit a78f1eab97181d222bc77c709778cf514c479138
Author: Kriszu <[email protected]>
AuthorDate: Mon Sep 2 20:10:41 2024 +0800
[Improve]: Created form drawer changed to modal (#4024)
* [Improve]: Created form drawer changed to modal
* [Fix]: modal height
---
.../src/api/flink/setting/flinkEnv.ts | 2 +-
.../src/locales/lang/en/system/member.ts | 4 +-
.../src/locales/lang/zh-CN/system/member.ts | 4 +-
.../src/views/flink/app/Add.vue | 7 +---
.../src/views/flink/variable/DependApps.vue | 5 +--
.../src/views/flink/variable/View.vue | 16 ++++----
.../flink/variable/components/VariableInfo.vue | 22 +++-------
.../{VariableDrawer.vue => VariableModal.vue} | 47 +++++++++-------------
.../setting/FlinkCluster/useClusterSetting.ts | 4 +-
.../views/setting/FlinkHome/components/Modal.vue | 13 ++----
.../src/views/setting/YarnQueue/YarnQueueModal.vue | 11 +++--
.../src/views/system/member/MemberModal.vue | 7 +++-
.../src/views/system/team/TeamModal.vue | 4 +-
.../src/views/system/team/team.data.ts | 2 +-
.../src/views/system/token/Token.vue | 14 +++----
.../components/{TokenDrawer.vue => TokenModal.vue} | 28 +++++++------
.../src/views/system/token/token.data.ts | 1 +
17 files changed, 87 insertions(+), 104 deletions(-)
diff --git
a/streampark-console/streampark-console-webapp/src/api/flink/setting/flinkEnv.ts
b/streampark-console/streampark-console-webapp/src/api/flink/setting/flinkEnv.ts
index 240a0ba18..ac20f96f0 100644
---
a/streampark-console/streampark-console-webapp/src/api/flink/setting/flinkEnv.ts
+++
b/streampark-console/streampark-console-webapp/src/api/flink/setting/flinkEnv.ts
@@ -48,7 +48,7 @@ export function pageFlinkEnv(data: BasicTableParams) {
* flink environment data
* @returns Promise<FlinkEnv[]>
*/
-export function fetchFlinkEnv(data: BasicTableParams) {
+export function fetchFlinkEnv(data?: BasicTableParams) {
return defHttp.post<FlinkEnv[]>({
url: FLINK_API.LIST,
data,
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/en/system/member.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/en/system/member.ts
index c5f8de414..f8679a744 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/en/system/member.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/en/system/member.ts
@@ -26,8 +26,8 @@ export default {
searchByRole: 'Search by role',
table: {
title: 'Member List',
- userName: 'Search by username',
- roleName: 'Search by role',
+ userName: 'user Name',
+ roleName: 'role Name',
createTime: 'Create Time',
modifyTime: 'Modify Time',
},
diff --git
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/system/member.ts
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/system/member.ts
index 7a07d27d9..aad04483a 100644
---
a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/system/member.ts
+++
b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/system/member.ts
@@ -26,8 +26,8 @@ export default {
searchByRole: '根据角色名称搜索',
table: {
title: '成员列表',
- userName: '根据用户名搜索',
- roleName: '根据角色名称搜索',
+ userName: '用户名',
+ roleName: '角色名称',
createTime: '创建时间',
modifyTime: '修改时间',
},
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue
b/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue
index c18f52633..974ca7dde 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue
@@ -14,11 +14,6 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<script lang="ts">
- export default {
- name: 'AppCreate',
- };
-</script>
<script setup lang="ts" name="AppCreate">
import { useGo } from '/@/hooks/web/usePage';
import ProgramArgs from './components/ProgramArgs.vue';
@@ -105,7 +100,7 @@
options.forEach((item) => {
defaultValue[item.key] = item.defaultValue;
});
- const v = flinkEnvs.value.filter((v) => v.isDefault)[0];
+ const v = flinkEnvs.value.filter((v) => v.isDefault)?.[0];
if (v) {
Object.assign(defaultValue, { versionId: v.id });
}
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/variable/DependApps.vue
b/streampark-console/streampark-console-webapp/src/views/flink/variable/DependApps.vue
index 53fbf841b..d848aab23 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/variable/DependApps.vue
+++
b/streampark-console/streampark-console-webapp/src/views/flink/variable/DependApps.vue
@@ -30,7 +30,6 @@
const route = useRoute();
const router = useRouter();
const [registerTable] = useTable({
- title: t('flink.variable.depend.title'),
api: fetchDependApps,
canResize: false,
showIndexColumn: false,
@@ -51,7 +50,7 @@
</script>
<template>
- <PageWrapper content-full-height>
+ <PageWrapper content-full-height fixed-height class="flex flex-col">
<div class="mb-15px py-24px px-10px bg-white">
<a-button
type="primary"
@@ -65,6 +64,6 @@
{{ t('flink.variable.depend.headerTitle', [route.query.id]) }}
</span>
</div>
- <BasicTable @register="registerTable" />
+ <BasicTable @register="registerTable" class="flex flex-col" />
</PageWrapper>
</template>
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/variable/View.vue
b/streampark-console/streampark-console-webapp/src/views/flink/variable/View.vue
index 432c66914..6ea42d782 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/variable/View.vue
+++
b/streampark-console/streampark-console-webapp/src/views/flink/variable/View.vue
@@ -61,16 +61,15 @@
</template>
</template>
</BasicTable>
- <VariableDrawer @register="registerDrawer" @success="handleSuccess" />
+ <VariableModal @register="registerModal" @success="handleSuccess" />
<VariableInfo @register="registerInfo" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { BasicTable, useTable, TableAction, SorterResult } from
'/@/components/Table';
- import VariableDrawer from './components/VariableDrawer.vue';
+ import VariableModal from './components/VariableModal.vue';
import VariableInfo from './components/VariableInfo.vue';
- import { useDrawer } from '/@/components/Drawer';
import { columns, searchFormSchema } from './variable.data';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
@@ -79,13 +78,14 @@
import Icon from '/@/components/Icon';
import { useRouter } from 'vue-router';
import { PageWrapper } from '/@/components/Page';
+ import { useModal } from '/@/components/Modal';
defineOptions({
name: 'Variable',
});
const router = useRouter();
- const [registerDrawer, { openDrawer }] = useDrawer();
- const [registerInfo, { openDrawer: openInfoDraw }] = useDrawer();
+ const [registerModal, { openModal }] = useModal();
+ const [registerInfo, { openModal: openInfoModal }] = useModal();
const { createMessage } = useMessage();
const { t } = useI18n();
const [registerTable, { reload }] = useTable({
@@ -126,19 +126,19 @@
});
function handleCreate() {
- openDrawer(true, {
+ openModal(true, {
isUpdate: false,
});
}
function handleEdit(record: Recordable) {
- openDrawer(true, {
+ openModal(true, {
record,
isUpdate: true,
});
}
function handleView(record: Recordable) {
- openInfoDraw(true, record);
+ openInfoModal(true, record);
}
/* Delete the organization */
async function handleDelete(record: Recordable) {
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/variable/components/VariableInfo.vue
b/streampark-console/streampark-console-webapp/src/views/flink/variable/components/VariableInfo.vue
index da95178fa..2672efc97 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/variable/components/VariableInfo.vue
+++
b/streampark-console/streampark-console-webapp/src/views/flink/variable/components/VariableInfo.vue
@@ -15,31 +15,19 @@
limitations under the License.
-->
<template>
- <BasicDrawer
- :showOkBtn="false"
- @register="registerDrawer"
- showFooter
- width="40%"
- @ok="closeDrawer"
- >
+ <BasicModal :showOkBtn="false" @register="registerModal" showFooter
:width="600" @ok="closeModal">
<template #title>
<Icon icon="ant-design:code-outlined" />
{{ t('flink.variable.variableInfoTitle') }}
</template>
<Description class="variable-desc" :column="1" :data="variableInfo"
:schema="roleColumn" />
- </BasicDrawer>
+ </BasicModal>
</template>
-<script lang="ts">
- export default defineComponent({
- name: 'VariableInfo',
- });
-</script>
-
<script setup lang="ts">
- import { defineComponent, h, ref } from 'vue';
+ import { h, ref } from 'vue';
import { Description, DescItem } from '/@/components/Description';
import Icon from '/@/components/Icon';
- import { useDrawerInner, BasicDrawer } from '/@/components/Drawer';
+ import { useModalInner, BasicModal } from '/@/components/Modal';
import { fetchVariableInfo } from '/@/api/flink/variable';
import { usePermission } from '/@/hooks/web/usePermission';
import { useI18n } from '/@/hooks/web/useI18n';
@@ -48,7 +36,7 @@
const showVariableDetail = ref(false);
let realVariable = '';
let desenVariable = '';
- const [registerDrawer, { closeDrawer }] = useDrawerInner((data: Recordable)
=> {
+ const [registerModal, { closeModal }] = useModalInner((data: Recordable) => {
data && onReceiveModalData(data);
});
const { t } = useI18n();
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/variable/components/VariableDrawer.vue
b/streampark-console/streampark-console-webapp/src/views/flink/variable/components/VariableModal.vue
similarity index 90%
rename from
streampark-console/streampark-console-webapp/src/views/flink/variable/components/VariableDrawer.vue
rename to
streampark-console/streampark-console-webapp/src/views/flink/variable/components/VariableModal.vue
index 1a90ffd80..7987dde01 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/variable/components/VariableDrawer.vue
+++
b/streampark-console/streampark-console-webapp/src/views/flink/variable/components/VariableModal.vue
@@ -15,30 +15,19 @@
limitations under the License.
-->
<template>
- <BasicDrawer
- :okText="t('common.submitText')"
- @register="registerDrawer"
- showFooter
- width="650"
- @ok="handleSubmit"
- >
+ <BasicModal @register="registerModal" showFooter :width="750"
@ok="handleSubmit">
<template #title>
<Icon icon="ant-design:code-outlined" />
{{ getTitle }}
</template>
<BasicForm @register="registerForm" :schemas="getTeamFormSchema" />
- </BasicDrawer>
+ </BasicModal>
</template>
-<script lang="ts">
- export default {
- name: 'TeamDrawer',
- };
-</script>
<script lang="ts" setup>
import { ref, h, computed, unref, reactive } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form';
- import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+ import { BasicModal, useModalInner } from '/@/components/Modal';
import { Icon } from '/@/components/Icon';
import { useI18n } from '/@/hooks/web/useI18n';
import { useFormValidate } from '/@/hooks/web/useFormValidate';
@@ -101,7 +90,11 @@
field: 'variableCode',
label: t('flink.variable.table.variableCode'),
component: 'Input',
- componentProps: { disabled: unref(isUpdate), onblur:
handleVariableCodeBlur },
+ componentProps: {
+ placeholder: t('flink.variable.table.variableCode'),
+ disabled: unref(isUpdate),
+ onblur: handleVariableCodeBlur,
+ },
itemProps: getItemProp.value,
rules: unref(isUpdate) ? [] : [{ required: true }],
},
@@ -115,13 +108,6 @@
},
rules: [{ required: true, message:
t('flink.variable.table.variableValuePlaceholder') }],
},
- {
- field: 'description',
- label: t('common.description'),
- component: 'InputTextArea',
- componentProps: { rows: 4 },
- rules: [{ max: 100, message:
t('flink.variable.form.descriptionMessage') }],
- },
{
field: 'desensitization',
label: t('flink.variable.form.desensitization'),
@@ -134,6 +120,13 @@
afterItem: () =>
h('span', { class: 'conf-switch' },
t('flink.variable.form.desensitizationDesc')),
},
+ {
+ field: 'description',
+ label: t('common.description'),
+ component: 'InputTextArea',
+ componentProps: { rows: 4 },
+ rules: [{ max: 100, message:
t('flink.variable.form.descriptionMessage') }],
+ },
];
});
@@ -146,14 +139,14 @@
wrapperCol: { lg: { span: 16, offset: 0 }, sm: { span: 17, offset: 0 } },
});
- const [registerDrawer, { setDrawerProps, changeLoading, closeDrawer }] =
useDrawerInner(
+ const [registerModal, { setModalProps, changeLoading, closeModal }] =
useModalInner(
async (data: Recordable) => {
try {
variableId.value = null;
resetFields();
setValidateStatus('');
setHelp('');
- setDrawerProps({ confirmLoading: false });
+ setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// is desensitization variable
@@ -183,14 +176,14 @@
async function handleSubmit() {
try {
const values = await validate();
- setDrawerProps({ confirmLoading: true });
+ setModalProps({ confirmLoading: true });
await (isUpdate.value
? fetchUpdateVariable({ id: variableId.value, ...values })
: fetchAddVariable(values));
- closeDrawer();
+ closeModal();
emit('success', isUpdate.value);
} finally {
- setDrawerProps({ confirmLoading: false });
+ setModalProps({ confirmLoading: false });
}
}
</script>
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useClusterSetting.ts
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useClusterSetting.ts
index 7dd966d1d..da3c33a0c 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useClusterSetting.ts
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/useClusterSetting.ts
@@ -1,4 +1,3 @@
-import { ExecModeEnum } from '/@/enums/flinkEnum';
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
@@ -15,6 +14,7 @@ import { ExecModeEnum } from '/@/enums/flinkEnum';
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+import { ExecModeEnum } from '/@/enums/flinkEnum';
import { RuleObject } from 'ant-design-vue/lib/form';
import { StoreValue } from 'ant-design-vue/lib/form/interface';
import { computed, onMounted, reactive, ref, unref } from 'vue';
@@ -162,7 +162,7 @@ export const useClusterSetting = () => {
label: t('setting.flinkCluster.form.k8sClusterId'),
ifShow: ({ values }) => values.executionMode ==
ExecModeEnum.KUBERNETES_SESSION,
component: 'Input',
- defaultValue: unref(flinkEnvs).filter((v) => v.isDefault)[0],
+ defaultValue: unref(flinkEnvs).filter((v) => v.isDefault)?.[0],
render: (renderCallbackParams) =>
renderClusterId(renderCallbackParams),
rules: [{ required: true, message:
t('setting.flinkCluster.required.clusterId') }],
},
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/components/Modal.vue
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/components/Modal.vue
index 7e3c501c7..6a7cc35d4 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/components/Modal.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/components/Modal.vue
@@ -14,16 +14,9 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<script lang="ts">
- import { defineComponent } from 'vue';
- import { useI18n } from '/@/hooks/web/useI18n';
-
- export default defineComponent({
- name: 'FlinkModal',
- });
-</script>
<script lang="ts" setup name="FlinkModal">
import { h, ref } from 'vue';
+ import { useI18n } from '/@/hooks/web/useI18n';
import { BasicForm, useForm } from '/@/components/Form';
import { SvgIcon } from '/@/components/Icon';
import { BasicModal, useModalInner } from '/@/components/Modal';
@@ -176,7 +169,9 @@
<SvgIcon name="flink" />
{{ t('common.add') }}
</template>
- <BasicForm @register="registerForm" />
+ <div class="mt-3">
+ <BasicForm @register="registerForm" />
+ </div>
</BasicModal>
</template>
<style lang="less">
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/YarnQueueModal.vue
b/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/YarnQueueModal.vue
index b9380e32f..e55dc851c 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/YarnQueueModal.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/YarnQueueModal.vue
@@ -20,13 +20,15 @@
centered
@register="registerModal"
showFooter
- :width="900"
+ :width="750"
@ok="handleSubmit"
>
<template #title>
{{ getTitle }}
</template>
- <BasicForm @register="registerForm" :schemas="getYarnQueueFormSchema" />
+ <div class="mt-3">
+ <BasicForm @register="registerForm" :schemas="getYarnQueueFormSchema" />
+ </div>
</BasicModal>
</template>
<script lang="ts">
@@ -95,7 +97,10 @@
field: 'description',
label: t('common.description'),
component: 'InputTextArea',
- componentProps: { rows: 4 },
+ componentProps: {
+ placeholder: t('setting.yarnQueue.placeholder.description'),
+ rows: 4,
+ },
rules: [{ max: 512, message:
t('setting.yarnQueue.descriptionMessage') }],
},
];
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/member/MemberModal.vue
b/streampark-console/streampark-console-webapp/src/views/system/member/MemberModal.vue
index 2df40cf16..7c9b5e55d 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/member/MemberModal.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/member/MemberModal.vue
@@ -22,13 +22,15 @@
showFooter
width="650"
@ok="handleSubmit"
- :minHeight="150"
+ :minHeight="120"
>
<template #title>
<Icon icon="ant-design:user-add-outlined" />
{{ getTitle }}
</template>
- <BasicForm @register="registerForm" :schemas="getMemberFormSchema" />
+ <div class="mt-4">
+ <BasicForm @register="registerForm" :schemas="getMemberFormSchema" />
+ </div>
</BasicModal>
</template>
@@ -103,6 +105,7 @@
options: props.roleOptions,
fieldNames: { label: 'roleName', value: 'roleId' },
placeholder: t('system.member.roleRequire'),
+ getPopupContainer: () => document.body,
},
rules: [{ required: true, message: t('system.member.roleRequire') }],
},
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/team/TeamModal.vue
b/streampark-console/streampark-console-webapp/src/views/system/team/TeamModal.vue
index 971a0ef14..dfba0c329 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/team/TeamModal.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/team/TeamModal.vue
@@ -27,7 +27,9 @@
<Icon icon="ant-design:team-outlined" />
{{ getTitle }}
</template>
- <BasicForm @register="registerForm" :schemas="getTeamFormSchema" />
+ <div class="mt-3">
+ <BasicForm @register="registerForm" :schemas="getTeamFormSchema" />
+ </div>
</BasicModal>
</template>
<script lang="ts">
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/team/team.data.ts
b/streampark-console/streampark-console-webapp/src/views/system/team/team.data.ts
index 159cad0f5..d06326ee0 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/team/team.data.ts
+++
b/streampark-console/streampark-console-webapp/src/views/system/team/team.data.ts
@@ -19,7 +19,7 @@ import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
export const columns: BasicColumn[] = [
{
- title: t('system.team.teamName'),
+ title: t('system.team.table.teamName'),
dataIndex: 'teamName',
sorter: true,
},
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/token/Token.vue
b/streampark-console/streampark-console-webapp/src/views/system/token/Token.vue
index cf30b2ef9..698304a99 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/token/Token.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/token/Token.vue
@@ -50,16 +50,16 @@
</template>
</template>
</BasicTable>
- <TokenDrawer @register="registerDrawer" @success="handleSuccess" />
+ <TokenModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent, unref } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
- import TokenDrawer from './components/TokenDrawer.vue';
+ import TokenModal from './components/TokenModal.vue';
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
- import { useDrawer } from '/@/components/Drawer';
+ import { useModal } from '/@/components/Modal';
import { fetchTokenDelete, fetTokenList } from '/@/api/system/token';
import { columns, searchFormSchema } from './token.data';
import { useMessage } from '/@/hooks/web/useMessage';
@@ -69,11 +69,11 @@
import { Col } from 'ant-design-vue';
export default defineComponent({
name: 'UserToken',
- components: { Col, BasicTable, TokenDrawer, TableAction, Icon, PageWrapper
},
+ components: { Col, BasicTable, TokenModal, TableAction, Icon, PageWrapper
},
setup() {
const { t } = useI18n();
const { createMessage } = useMessage();
- const [registerDrawer, { openDrawer }] = useDrawer();
+ const [registerModal, { openModal }] = useModal();
const { clipboardRef, copiedRef } = useCopyToClipboard();
const [registerTable, { reload, updateTableDataRecord }] = useTable({
api: fetTokenList,
@@ -109,7 +109,7 @@
});
function handleCreate() {
- openDrawer(true, {
+ openModal(true, {
isUpdate: false,
});
}
@@ -142,7 +142,7 @@
return {
t,
registerTable,
- registerDrawer,
+ registerModal,
handleCreate,
handleCopy,
handleDelete,
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/token/components/TokenDrawer.vue
b/streampark-console/streampark-console-webapp/src/views/system/token/components/TokenModal.vue
similarity index 80%
rename from
streampark-console/streampark-console-webapp/src/views/system/token/components/TokenDrawer.vue
rename to
streampark-console/streampark-console-webapp/src/views/system/token/components/TokenModal.vue
index 0b2a49be8..f81e67be9 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/token/components/TokenDrawer.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/token/components/TokenModal.vue
@@ -15,29 +15,31 @@
limitations under the License.
-->
<template>
- <BasicDrawer
- :okText="t('common.submitText')"
+ <BasicModal
@register="registerDrawer"
showFooter
:title="getTitle"
- width="40%"
+ :width="600"
+ :minHeight="140"
@ok="handleSubmit"
>
- <BasicForm @register="registerForm" />
- </BasicDrawer>
+ <div class="mt-18px">
+ <BasicForm @register="registerForm" />
+ </div>
+ </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form';
import { formSchema } from '../token.data';
- import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+ import { BasicModal, useModalInner } from '/@/components/Modal';
import { fetchTokenCreate } from '/@/api/system/token';
import { useI18n } from '/@/hooks/web/useI18n';
export default defineComponent({
- name: 'TokenDrawer',
- components: { BasicDrawer, BasicForm },
+ name: 'TokenModal',
+ components: { BasicModal, BasicForm },
emits: ['success', 'register'],
setup(_, { emit }) {
const isUpdate = ref(true);
@@ -51,9 +53,9 @@
baseColProps: { lg: 22, md: 22 },
});
- const [registerDrawer, { setDrawerProps, closeDrawer }] =
useDrawerInner(async (data) => {
+ const [registerDrawer, { setModalProps, closeModal }] =
useModalInner(async (data) => {
resetFields();
- setDrawerProps({ confirmLoading: false });
+ setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
@@ -70,12 +72,12 @@
async function handleSubmit() {
try {
const values = await validate();
- setDrawerProps({ confirmLoading: true });
+ setModalProps({ confirmLoading: true });
const res = await fetchTokenCreate(values);
- closeDrawer();
+ closeModal();
emit('success', { isUpdate: unref(isUpdate), values: res });
} finally {
- setDrawerProps({ confirmLoading: false });
+ setModalProps({ confirmLoading: false });
}
}
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/token/token.data.ts
b/streampark-console/streampark-console-webapp/src/views/system/token/token.data.ts
index f7426d370..d56507e8c 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/token/token.data.ts
+++
b/streampark-console/streampark-console-webapp/src/views/system/token/token.data.ts
@@ -106,6 +106,7 @@ export const formSchema: FormSchema[] = [
resultField: 'records',
labelField: 'username',
valueField: 'userId',
+ getPopupContainer: () => document.body,
},
rules: [{ required: true, message:
t('system.token.selectUserAlertMessage'), trigger: 'blur' }],
},
