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 c3ce96ace [Improve]: table style (#4018)
c3ce96ace is described below
commit c3ce96aceea26524f1cce0ae99aafdfecde9d5df
Author: Kriszu <[email protected]>
AuthorDate: Mon Sep 2 11:40:22 2024 +0800
[Improve]: table style (#4018)
---
.../.vscode/settings.json | 3 +
.../src/views/flink/project/View.vue | 2 +-
.../src/views/flink/variable/View.vue | 20 +-
.../src/views/flink/variable/variable.data.ts | 18 +-
.../src/views/setting/FlinkCluster/index.vue | 284 +++++++++------------
.../src/views/setting/FlinkHome/index.vue | 2 +-
.../{YarnQueueDrawer.vue => YarnQueueModal.vue} | 27 +-
.../src/views/setting/YarnQueue/index.data.ts | 15 +-
.../src/views/setting/YarnQueue/index.vue | 41 +--
.../src/views/system/member/Member.vue | 54 ++--
.../member/{MemberDrawer.vue => MemberModal.vue} | 76 +++---
.../src/views/system/role/Role.vue | 23 +-
.../src/views/system/role/role.data.ts | 15 +-
.../src/views/system/team/Team.vue | 37 +--
.../system/team/{TeamDrawer.vue => TeamModal.vue} | 27 +-
.../src/views/system/team/team.data.ts | 15 +-
.../src/views/system/token/Token.vue | 2 +-
.../src/views/system/user/User.vue | 23 +-
.../src/views/system/user/user.data.ts | 15 +-
19 files changed, 378 insertions(+), 321 deletions(-)
diff --git a/streampark-console/streampark-console-webapp/.vscode/settings.json
b/streampark-console/streampark-console-webapp/.vscode/settings.json
new file mode 100644
index 000000000..07388b7de
--- /dev/null
+++ b/streampark-console/streampark-console-webapp/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "eslint.useFlatConfig": false
+}
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/project/View.vue
b/streampark-console/streampark-console-webapp/src/views/flink/project/View.vue
index 879204808..8338a47d5 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/project/View.vue
+++
b/streampark-console/streampark-console-webapp/src/views/flink/project/View.vue
@@ -15,7 +15,7 @@
limitations under the License.
-->
<template>
- <PageWrapper contentFullHeight fixed-height content-background
contentClass="px-20px">
+ <PageWrapper contentFullHeight fixed-height content-background
contentClass="px-10px">
<a-card class="header" :bordered="false">
<template #title>
<div class="flex items-center justify-between">
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 2a2522a62..432c66914 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
@@ -17,11 +17,13 @@
<template>
<PageWrapper contentFullHeight fixed-height>
<BasicTable @register="registerTable" class="flex flex-col">
- <template #toolbar>
- <a-button type="primary" @click="handleCreate" v-auth="'variable:add'">
- <Icon icon="ant-design:plus-outlined" />
- {{ t('common.add') }}
- </a-button>
+ <template #form-formFooter>
+ <Col :span="4" :offset="11" class="text-right">
+ <a-button type="primary" @click="handleCreate"
v-auth="'variable:add'">
+ <Icon icon="ant-design:plus-outlined" />
+ {{ t('common.add') }}
+ </a-button>
+ </Col>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
@@ -72,6 +74,7 @@
import { columns, searchFormSchema } from './variable.data';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
+ import { Col } from 'ant-design-vue';
import { fetchVariableDelete, fetchVariableList } from
'/@/api/flink/variable';
import Icon from '/@/components/Icon';
import { useRouter } from 'vue-router';
@@ -86,12 +89,15 @@
const { createMessage } = useMessage();
const { t } = useI18n();
const [registerTable, { reload }] = useTable({
- title: t('flink.variable.table.title'),
api: fetchVariableList,
columns,
formConfig: {
- baseColProps: { style: { paddingRight: '30px' } },
schemas: searchFormSchema,
+ rowProps: {
+ gutter: 14,
+ },
+ submitOnChange: true,
+ showActionButtonGroup: false,
},
sortFn: (sortInfo: SorterResult) => {
const { field, order } = sortInfo;
diff --git
a/streampark-console/streampark-console-webapp/src/views/flink/variable/variable.data.ts
b/streampark-console/streampark-console-webapp/src/views/flink/variable/variable.data.ts
index d3e6851e6..e869ae8d9 100644
---
a/streampark-console/streampark-console-webapp/src/views/flink/variable/variable.data.ts
+++
b/streampark-console/streampark-console-webapp/src/views/flink/variable/variable.data.ts
@@ -36,16 +36,22 @@ export const columns: BasicColumn[] = [
export const searchFormSchema: FormSchema[] = [
{
field: 'variableCode',
- label: t('flink.variable.table.variableCode'),
+ label: '',
component: 'Input',
- componentProps: { placeholder:
t('flink.variable.table.variableCodePlaceholder') },
- colProps: { span: 8 },
+ componentProps: {
+ placeholder: t('flink.variable.table.variableCode'),
+ allowClear: true,
+ },
+ colProps: { span: 4 },
},
{
field: 'description',
- label: t('common.description'),
+ label: '',
component: 'Input',
- componentProps: { placeholder:
t('flink.variable.table.descriptionPlaceholder') },
- colProps: { span: 8 },
+ componentProps: {
+ placeholder: t('flink.variable.table.description'),
+ allowClear: true,
+ },
+ colProps: { span: 5 },
},
];
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/index.vue
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/index.vue
index cb82fa709..7c55c463e 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/index.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkCluster/index.vue
@@ -15,19 +15,12 @@
limitations under the License.
-->
<script lang="ts" setup name="FlinkClusterSetting">
- import { onUnmounted } from 'vue';
+ import { nextTick, onUnmounted } from 'vue';
import { useTimeoutFn } from '@vueuse/core';
- import { onMounted, ref } from 'vue';
- import { Icon, SvgIcon } from '/@/components/Icon';
- import { List, Popconfirm, Tooltip, Tag } from 'ant-design-vue';
+ import { SvgIcon } from '/@/components/Icon';
+ import { Tag } from 'ant-design-vue';
import { ClusterStateEnum, ExecModeEnum } from '/@/enums/flinkEnum';
- import {
- PauseCircleOutlined,
- EyeOutlined,
- PlusOutlined,
- PlayCircleOutlined,
- DeleteOutlined,
- } from '@ant-design/icons-vue';
+ import { PlusOutlined } from '@ant-design/icons-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import {
fetchClusterRemove,
@@ -39,18 +32,49 @@
import { useGo } from '/@/hooks/web/usePage';
import { useI18n } from '/@/hooks/web/useI18n';
import { PageWrapper } from '/@/components/Page';
- import { BasicTitle } from '/@/components/Basic';
+ import { BasicTable, TableAction, useTable } from '/@/components/Table';
defineOptions({
name: 'FlinkClusterSetting',
});
- const ListItem = List.Item;
- const ListItemMeta = ListItem.Meta;
+ const executionModeMap = {
+ [ExecModeEnum.STANDALONE]: {
+ color: '#2db7f5',
+ text: 'standalone',
+ },
+ [ExecModeEnum.YARN_SESSION]: {
+ color: '#87d068',
+ text: 'yarn session',
+ },
+ [ExecModeEnum.KUBERNETES_SESSION]: {
+ color: '#108ee9',
+ text: 'k8s session',
+ },
+ };
const go = useGo();
const { t } = useI18n();
const { Swal, createMessage } = useMessage();
- const clusters = ref<FlinkCluster[]>([]);
- const loading = ref(false);
+ const [registerTable, { reload, getLoading }] = useTable({
+ // title: t('setting.flinkCluster.title'),
+ api: fetchFlinkCluster,
+ columns: [
+ { dataIndex: 'clusterName', title:
t('setting.flinkCluster.form.clusterName') },
+ { dataIndex: 'executionMode', title:
t('setting.flinkCluster.form.executionMode') },
+ { dataIndex: 'address', title: t('setting.flinkCluster.form.address') },
+ { dataIndex: 'description', title: t('setting.flinkHome.description') },
+ ],
+ useSearchForm: false,
+ striped: false,
+ bordered: false,
+ canResize: false,
+ showIndexColumn: false,
+ pagination: false,
+ actionColumn: {
+ width: 200,
+ title: t('component.table.operation'),
+ dataIndex: 'action',
+ },
+ });
function handleIsStart(item) {
return item.clusterState === ClusterStateEnum.STARTED;
}
@@ -82,7 +106,7 @@
/* delete */
async function handleDelete(item: FlinkCluster) {
await fetchClusterRemove(item.id);
- await getFlinkCluster();
+ reload();
createMessage.success('The current cluster is remove');
}
/* shutdown */
@@ -98,163 +122,109 @@
}
}
- async function getFlinkCluster() {
- try {
- loading.value = true;
- clusters.value = await fetchFlinkCluster();
- } catch (error) {
- console.error(error);
- } finally {
- loading.value = false;
- }
+ function handlePageDataReload(polling = false) {
+ nextTick(() => {
+ reload({ polling });
+ });
}
const { start, stop } = useTimeoutFn(() => {
// Prevent another request from being initiated while the previous request
is pending
- if (!loading.value) {
- getFlinkCluster();
+ if (!getLoading()) {
+ handlePageDataReload(true);
}
start();
}, 1000 * 3);
- onMounted(() => {
- getFlinkCluster();
- });
onUnmounted(() => {
stop();
});
</script>
<template>
<PageWrapper contentFullHeight fixed-height content-class="flex flex-col">
- <div class="bg-white py-16px px-24px">
- <BasicTitle class="!inline-block" style="margin: 0 !important; height:
initial">
- {{ t('setting.flinkCluster.title') }}
- </BasicTitle>
- <div v-auth="'project:create'">
- <a-button type="dashed" class="w-full mt-10px"
@click="go('/setting/add_cluster')">
- <PlusOutlined />
- {{ t('common.add') }}
- </a-button>
- </div>
- </div>
- <div class="flex-1">
- <List class="cluster-card-list !mt-10px">
- <ListItem v-for="(item, index) in clusters" :key="index">
- <ListItemMeta
- :title="item.clusterName"
- style="width: 20%"
- :description="item.description"
+ <BasicTable @register="registerTable" class="flex flex-col">
+ <template #toolbar>
+ <div v-auth="'project:create'">
+ <a-button type="primary" class="w-full mt-10px" @click="() =>
go('/setting/add_cluster')">
+ <PlusOutlined />
+ {{ t('common.add') }}
+ </a-button>
+ </div>
+ </template>
+ <template #bodyCell="{ column, record }">
+ <template v-if="column.dataIndex === 'clusterName'">
+ <svg-icon class="avatar" name="flink" :size="20" />
+ {{ record.clusterName }}
+ </template>
+ <template v-if="column.dataIndex === 'executionMode'">
+ <Tag
+ v-if="executionModeMap[record.executionMode]"
+ :color="executionModeMap[record.executionMode]?.color"
>
- <template #avatar>
- <SvgIcon class="avatar p-15px" name="flink" size="60" />
- </template>
- </ListItemMeta>
- <div class="list-content" style="width: 20%">
- <div class="list-content-item">
- <span>{{ t('setting.flinkCluster.form.executionMode') }}</span>
- <p style="margin-top: 10px" v-if="item.executionMode ===
ExecModeEnum.STANDALONE">
- <Tag color="#2db7f5">standalone</Tag>
- </p>
- <p
- style="margin-top: 10px"
- v-else-if="item.executionMode === ExecModeEnum.YARN_SESSION"
- >
- <Tag color="#87d068">yarn session</Tag>
- </p>
- <p
- style="margin-top: 10px"
- v-else-if="item.executionMode ===
ExecModeEnum.KUBERNETES_SESSION"
- >
- <Tag color="#108ee9">k8s session</Tag>
- </p>
- </div>
- </div>
- <div
- class="list-content"
- style="width: 35%"
+ {{ executionModeMap[record.executionMode]?.text }}
+ </Tag>
+ </template>
+ <template v-if="column.dataIndex === 'address'">
+ <a
+ :href="`/proxy/cluster/${record.id}/`"
+ target="_blank"
v-if="
- item.executionMode === ExecModeEnum.STANDALONE ||
- item.executionMode === ExecModeEnum.YARN_SESSION
+ record.executionMode === ExecModeEnum.STANDALONE ||
+ record.executionMode === ExecModeEnum.YARN_SESSION
"
>
- <div class="list-content-item">
- <span>{{ t('setting.flinkCluster.form.address') }}</span>
- <p style="margin-top: 10px">
- <a :href="`/proxy/cluster/${item.id}/`" target="_blank">
- {{ item.address }}
- </a>
- </p>
- </div>
- </div>
- <template #actions>
- <Tooltip :title="t('setting.flinkCluster.edit')">
- <a-button
- v-auth="'cluster:update'"
- :disabled="handleIsStart(item)"
- @click="handleEditCluster(item)"
- shape="circle"
- size="large"
- class="control-button"
- >
- <Icon icon="clarity:note-edit-line" />
- </a-button>
- </Tooltip>
- <template v-if="handleIsStart(item)">
- <Tooltip :title="t('setting.flinkCluster.stop')">
- <a-button
- :disabled="item.executionMode === ExecModeEnum.STANDALONE"
- v-auth="'cluster:create'"
- @click="handleShutdownCluster(item)"
- shape="circle"
- size="large"
- style="margin-left: 3px"
- class="control-button"
- >
- <PauseCircleOutlined />
- </a-button>
- </Tooltip>
- </template>
- <template v-else>
- <Tooltip :title="t('setting.flinkCluster.start')">
- <a-button
- :disabled="item.executionMode === ExecModeEnum.STANDALONE"
- v-auth="'cluster:create'"
- @click="handleDeployCluster(item)"
- shape="circle"
- size="large"
- class="control-button"
- >
- <PlayCircleOutlined />
- </a-button>
- </Tooltip>
- </template>
- <Tooltip :title="t('setting.flinkCluster.detail')">
- <a-button
- :disabled="!handleIsStart(item)"
- v-auth="'app:detail'"
- shape="circle"
- :href="`/proxy/cluster/${item.id}/`"
- target="_blank"
- size="large"
- class="control-button"
- >
- <EyeOutlined />
- </a-button>
- </Tooltip>
-
- <Popconfirm
- :title="t('setting.flinkCluster.delete')"
- :cancel-text="t('common.no')"
- :ok-text="t('common.yes')"
- @confirm="handleDelete(item)"
- >
- <a-button type="danger" shape="circle" size="large"
class="control-button">
- <DeleteOutlined />
- </a-button>
- </Popconfirm>
- </template>
- </ListItem>
- </List>
- </div>
+ {{ record.address }}
+ </a>
+ <span v-else> - </span>
+ </template>
+ <template v-if="column.dataIndex === 'action'">
+ <TableAction
+ :actions="[
+ {
+ icon: 'clarity:note-edit-line',
+ auth: 'cluster:update',
+ tooltip: t('setting.flinkCluster.edit'),
+ disabled: handleIsStart(record),
+ onClick: handleEditCluster.bind(null, record),
+ },
+ {
+ icon: 'ant-design:pause-circle-outlined',
+ auth: 'cluster:create',
+ ifShow: handleIsStart(record),
+ disabled: record.executionMode === ExecModeEnum.STANDALONE,
+ tooltip: t('setting.flinkCluster.stop'),
+ onClick: handleShutdownCluster.bind(null, record),
+ },
+ {
+ icon: 'ant-design:play-circle-outlined',
+ auth: 'cluster:create',
+ ifShow: !handleIsStart(record),
+ disabled: record.executionMode === ExecModeEnum.STANDALONE,
+ tooltip: t('setting.flinkCluster.start'),
+ onClick: handleDeployCluster.bind(null, record),
+ },
+ {
+ icon: 'ant-design:eye-outlined',
+ auth: 'app:detail',
+ disabled: !handleIsStart(record),
+ tooltip: t('setting.flinkCluster.detail'),
+ href: `/proxy/cluster/${record.id}/`,
+ target: '_blank',
+ },
+ {
+ icon: 'ant-design:delete-outlined',
+ color: 'error',
+ tooltip: t('common.delText'),
+ popConfirm: {
+ title: t('setting.flinkCluster.delete'),
+ placement: 'left',
+ confirm: handleDelete.bind(null, record),
+ },
+ },
+ ]"
+ />
+ </template>
+ </template>
+ </BasicTable>
</PageWrapper>
</template>
<style lang="less" scoped>
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/index.vue
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/index.vue
index e73434568..10177eb2f 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/index.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/FlinkHome/index.vue
@@ -44,7 +44,7 @@
const [registerModal, { openModal: openFlinkModal }] = useModal();
const [registerFlinkDraw, { openDrawer: openEnvDrawer }] = useDrawer();
const [registerTable, { reload, getDataSource }] = useTable({
- title: t('setting.flinkHome.title'),
+ // title: t('setting.flinkHome.title'),
api: fetchFlinkEnv,
columns: [
{ dataIndex: 'flinkName', title: t('setting.flinkHome.flinkName') },
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/YarnQueueDrawer.vue
b/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/YarnQueueModal.vue
similarity index 88%
rename from
streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/YarnQueueDrawer.vue
rename to
streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/YarnQueueModal.vue
index 47059ef52..b9380e32f 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/YarnQueueDrawer.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/YarnQueueModal.vue
@@ -15,17 +15,24 @@
limitations under the License.
-->
<template>
- <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter
width="650" @ok="handleSubmit">
+ <BasicModal
+ v-bind="$attrs"
+ centered
+ @register="registerModal"
+ showFooter
+ :width="900"
+ @ok="handleSubmit"
+ >
<template #title>
{{ getTitle }}
</template>
<BasicForm @register="registerForm" :schemas="getYarnQueueFormSchema" />
- </BasicDrawer>
+ </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form';
- import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+ import { BasicModal, useModalInner } from '/@/components/Modal';
import {
fetchCheckYarnQueue,
@@ -37,7 +44,7 @@
export default defineComponent({
name: 'YarnQueueDrawer',
- components: { BasicDrawer, BasicForm },
+ components: { BasicModal, BasicForm },
emits: ['success', 'register'],
setup(_, { emit }) {
const { t } = useI18n();
@@ -102,10 +109,10 @@
wrapperCol: { lg: { span: 16, offset: 0 }, sm: { span: 17, offset: 0 }
},
});
- const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(
+ const [registerModal, { setModalProps, closeModal }] = useModalInner(
async (data: Recordable) => {
resetFields();
- setDrawerProps({ confirmLoading: false });
+ setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
// if (isUpdate.value) teamId.value = data.record.id;
if (unref(isUpdate)) {
@@ -123,21 +130,21 @@
async function handleSubmit() {
try {
const values = await validate();
- setDrawerProps({ confirmLoading: true });
+ setModalProps({ confirmLoading: true });
if (isUpdate.value) {
await fetchYarnQueueUpdate(values);
} else {
delete values.id;
await fetchYarnQueueCreate(values);
}
- closeDrawer();
+ closeModal();
emit('success', isUpdate.value);
} finally {
- setDrawerProps({ confirmLoading: false });
+ setModalProps({ confirmLoading: false });
}
}
- return { registerDrawer, registerForm, getTitle, getYarnQueueFormSchema,
handleSubmit };
+ return { registerModal, registerForm, getTitle, getYarnQueueFormSchema,
handleSubmit };
},
});
</script>
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/index.data.ts
b/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/index.data.ts
index cd30ece43..b21ec7c33 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/index.data.ts
+++
b/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/index.data.ts
@@ -49,14 +49,21 @@ export const columns: BasicColumn[] = [
export const searchFormSchema: FormSchema[] = [
{
field: 'queueLabel',
- label: t('setting.yarnQueue.yarnQueueLabelExpression'),
+ label: '',
component: 'Input',
- colProps: { span: 8 },
+ componentProps: {
+ placeholder: t('setting.yarnQueue.yarnQueueLabelExpression'),
+ allowClear: true,
+ },
+ colProps: { span: 6 },
},
{
field: 'createTime',
- label: t('common.createTime'),
+ label: '',
component: 'RangePicker',
- colProps: { span: 8 },
+ componentProps: {
+ allowClear: true,
+ },
+ colProps: { span: 6 },
},
];
diff --git
a/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/index.vue
b/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/index.vue
index 4737aaa8b..6f1196ea2 100644
---
a/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/index.vue
+++
b/streampark-console/streampark-console-webapp/src/views/setting/YarnQueue/index.vue
@@ -17,11 +17,13 @@
<template>
<PageWrapper content-full-height fixed-height>
<BasicTable @register="registerTable" class="flex flex-col">
- <template #toolbar>
- <a-button type="primary" @click="handleCreate"
v-auth="'yarnQueue:create'">
- <Icon icon="ant-design:plus-outlined" />
- {{ t('common.add') }}
- </a-button>
+ <template #form-formFooter>
+ <Col :span="4" :offset="8" class="text-right">
+ <a-button type="primary" @click="handleCreate"
v-auth="'yarnQueue:create'">
+ <Icon icon="ant-design:plus-outlined" />
+ {{ t('common.add') }}
+ </a-button>
+ </Col>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
@@ -48,19 +50,15 @@
</template>
</template>
</BasicTable>
- <YarnQueueDrawer
- :okText="t('common.okText')"
- @register="registerDrawer"
- @success="handleSuccess"
- />
+ <YarnQueueModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
-
+ import { Col } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
- import YarnQueueDrawer from './YarnQueueDrawer.vue';
- import { useDrawer } from '/@/components/Drawer';
+ import YarnQueueModal from './YarnQueueModal.vue';
+ import { useModal } from '/@/components/Modal';
import Icon from '/@/components/Icon';
import { columns, searchFormSchema } from './index.data';
import { fetchYarnQueueList, fetchYarnQueueDelete } from
'/@/api/flink/setting/yarnQueue';
@@ -70,19 +68,22 @@
export default defineComponent({
name: 'YarnQueue',
- components: { BasicTable, YarnQueueDrawer, TableAction, Icon, PageWrapper
},
+ components: { BasicTable, YarnQueueModal, TableAction, Icon, PageWrapper,
Col },
setup() {
- const [registerDrawer, { openDrawer }] = useDrawer();
+ const [registerModal, { openModal }] = useModal();
const { createMessage } = useMessage();
const { t } = useI18n();
const [registerTable, { reload }] = useTable({
- title: t('setting.yarnQueue.tableTitle'),
api: fetchYarnQueueList,
columns,
formConfig: {
- baseColProps: { style: { paddingRight: '30px' } },
schemas: searchFormSchema,
fieldMapToTime: [['createTime', ['createTimeFrom', 'createTimeTo'],
'YYYY-MM-DD']],
+ rowProps: {
+ gutter: 14,
+ },
+ submitOnChange: true,
+ showActionButtonGroup: false,
},
rowKey: 'id',
pagination: true,
@@ -98,13 +99,13 @@
});
function handleCreate() {
- openDrawer(true, {
+ openModal(true, {
isUpdate: false,
});
}
function handleYarnQueueEdit(record: Recordable) {
- openDrawer(true, {
+ openModal(true, {
record,
isUpdate: true,
});
@@ -135,7 +136,7 @@
return {
t,
registerTable,
- registerDrawer,
+ registerModal,
handleCreate,
handleYarnQueueEdit,
handleDelete,
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/member/Member.vue
b/streampark-console/streampark-console-webapp/src/views/system/member/Member.vue
index 33429c954..7c019c8fe 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/member/Member.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/member/Member.vue
@@ -18,11 +18,13 @@
<template>
<PageWrapper content-full-height fixed-height>
<BasicTable @register="registerTable" :formConfig="formConfig" class="flex
flex-col">
- <template #toolbar>
- <a-button type="primary" @click="handleCreate" v-auth="'member:add'">
- <Icon icon="ant-design:plus-outlined" />
- {{ t('common.add') }}
- </a-button>
+ <template #form-formFooter>
+ <Col :span="4" :offset="5" class="text-right">
+ <a-button type="primary" @click="handleCreate" v-auth="'member:add'">
+ <Icon icon="ant-design:plus-outlined" />
+ {{ t('common.add') }}
+ </a-button>
+ </Col>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
@@ -49,23 +51,23 @@
</template>
</template>
</BasicTable>
- <MemberDrawer
- @register="registerDrawer"
+ <MemberModal
+ @register="registerModal"
@success="handleSuccess"
:roleOptions="roleListOptions"
- okText="Submit"
/>
</PageWrapper>
</template>
<script setup lang="ts" name="member">
import { computed, onMounted, ref, unref } from 'vue';
+ import { Col } from 'ant-design-vue';
import { useUserStoreWithOut } from '/@/store/modules/user';
import { RoleListItem } from '/@/api/base/model/systemModel';
import { useGo } from '/@/hooks/web/usePage';
import { BasicTable, useTable, TableAction, FormProps } from
'/@/components/Table';
- import MemberDrawer from './MemberDrawer.vue';
- import { useDrawer } from '/@/components/Drawer';
+ import MemberModal from './MemberModal.vue';
+ import { useModal } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { getRoleListByPage } from '/@/api/base/system';
@@ -77,43 +79,55 @@
});
const roleListOptions = ref<Array<Partial<RoleListItem>>>([]);
- const [registerDrawer, { openDrawer }] = useDrawer();
+ const [registerModal, { openModal }] = useModal();
const { createMessage } = useMessage();
const go = useGo();
const { t } = useI18n();
const userStore = useUserStoreWithOut();
const formConfig = computed((): Partial<FormProps> => {
return {
- baseColProps: { style: { paddingRight: '30px' } },
schemas: [
{
field: 'userName',
- label: t('system.member.table.userName'),
+ label: '',
component: 'Input',
- colProps: { span: 6 },
+ componentProps: {
+ placeholder: t('system.member.table.userName'),
+ allowClear: true,
+ },
+ colProps: { span: 4 },
},
{
field: 'roleName',
- label: t('system.member.table.roleName'),
+ label: '',
component: 'Select',
componentProps: {
+ placeholder: t('system.member.table.roleName'),
options: unref(roleListOptions),
fieldNames: { label: 'roleName', value: 'roleName' },
+ allowClear: true,
},
- colProps: { span: 6 },
+ colProps: { span: 5 },
},
{
field: 'createTime',
- label: t('common.createTime'),
+ label: '',
component: 'RangePicker',
+ componentProps: {
+ allowClear: true,
+ },
colProps: { span: 6 },
},
],
fieldMapToTime: [['createTime', ['createTimeFrom', 'createTimeTo'],
'YYYY-MM-DD']],
+ rowProps: {
+ gutter: 14,
+ },
+ submitOnChange: true,
+ showActionButtonGroup: false,
};
});
const [registerTable, { reload }] = useTable({
- title: t('system.member.table.title'),
api: fetchMemberList,
columns: [
{ title: t('system.member.table.userName'), dataIndex: 'userName',
sorter: true },
@@ -136,13 +150,13 @@
});
function handleCreate() {
- openDrawer(true, {
+ openModal(true, {
isUpdate: false,
});
}
function handleEdit(record: Recordable) {
- openDrawer(true, {
+ openModal(true, {
record,
isUpdate: true,
});
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/member/MemberDrawer.vue
b/streampark-console/streampark-console-webapp/src/views/system/member/MemberModal.vue
similarity index 78%
rename from
streampark-console/streampark-console-webapp/src/views/system/member/MemberDrawer.vue
rename to
streampark-console/streampark-console-webapp/src/views/system/member/MemberModal.vue
index b46beb1f1..2df40cf16 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/member/MemberDrawer.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/member/MemberModal.vue
@@ -15,27 +15,27 @@
limitations under the License.
-->
<template>
- <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter
width="650" @ok="handleSubmit">
+ <BasicModal
+ v-bind="$attrs"
+ @register="registerModal"
+ centered
+ showFooter
+ width="650"
+ @ok="handleSubmit"
+ :minHeight="150"
+ >
<template #title>
<Icon icon="ant-design:user-add-outlined" />
{{ getTitle }}
</template>
<BasicForm @register="registerForm" :schemas="getMemberFormSchema" />
- </BasicDrawer>
+ </BasicModal>
</template>
-<script lang="ts">
- import { defineComponent } from 'vue';
-
- export default defineComponent({
- name: 'MemberDrawer',
- });
-</script>
-
<script setup lang="ts" name="MemberDrawer">
import { ref, computed, unref } 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';
@@ -43,7 +43,9 @@
import { useUserStoreWithOut } from '/@/store/modules/user';
import { fetchAddMember, fetchCandidateUsers, fetchUpdateMember } from
'/@/api/system/member';
import { useFormValidate } from '/@/hooks/web/useFormValidate';
-
+ defineOptions({
+ name: 'MemberDrawer',
+ });
const { t } = useI18n();
const userStore = useUserStoreWithOut();
const { getItemProp, setValidateStatus, setHelp } = useFormValidate();
@@ -115,29 +117,27 @@
wrapperCol: { lg: { span: 16, offset: 0 }, sm: { span: 17, offset: 0 } },
});
- const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(
- async (data: Recordable) => {
- setValidateStatus('');
- setHelp('');
- Object.assign(editParams, { userId: null, id: null });
- resetFields();
- setDrawerProps({ confirmLoading: false });
- isUpdate.value = !!data?.isUpdate;
- if (isUpdate.value) {
- Object.assign(editParams, {
- userId: data.record.userId,
- id: data.record.id,
- teamId: userStore.getTeamId,
- });
- }
- if (unref(isUpdate)) {
- setFieldsValue({
- userName: data.record.userName,
- roleId: data.record.roleId,
- });
- }
- },
- );
+ const [registerModal, { setModalProps, closeModal }] = useModalInner(async
(data: Recordable) => {
+ setValidateStatus('');
+ setHelp('');
+ Object.assign(editParams, { userId: null, id: null });
+ resetFields();
+ setModalProps({ confirmLoading: false });
+ isUpdate.value = !!data?.isUpdate;
+ if (isUpdate.value) {
+ Object.assign(editParams, {
+ userId: data.record.userId,
+ id: data.record.id,
+ teamId: userStore.getTeamId,
+ });
+ }
+ if (unref(isUpdate)) {
+ setFieldsValue({
+ userName: data.record.userName,
+ roleId: data.record.roleId,
+ });
+ }
+ });
const getTitle = computed(() =>
!unref(isUpdate) ? t('system.member.addMember') :
t('system.member.modifyMember'),
@@ -146,16 +146,16 @@
async function handleSubmit() {
try {
const values = await validate();
- setDrawerProps({ confirmLoading: true });
+ setModalProps({ confirmLoading: true });
await (isUpdate.value
? fetchUpdateMember({ ...editParams, ...values })
: fetchAddMember({ ...values }));
- closeDrawer();
+ closeModal();
emit('success', isUpdate.value);
} catch (e) {
console.error(e);
} finally {
- setDrawerProps({ confirmLoading: false });
+ setModalProps({ confirmLoading: false });
}
}
</script>
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/role/Role.vue
b/streampark-console/streampark-console-webapp/src/views/system/role/Role.vue
index 6d490aff0..95ecbc176 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/role/Role.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/role/Role.vue
@@ -17,11 +17,13 @@
<template>
<PageWrapper content-full-height fixed-height>
<BasicTable @register="registerTable" class="flex flex-col">
- <template #toolbar>
- <a-button type="primary" @click="handleCreate" v-auth="'role:add'">
- <Icon icon="ant-design:plus-outlined" />
- {{ t('common.add') }}
- </a-button>
+ <template #form-formFooter>
+ <Col :span="4" :offset="10" class="text-right">
+ <a-button type="primary" @click="handleCreate" v-auth="'role:add'">
+ <Icon icon="ant-design:plus-outlined" />
+ {{ t('common.add') }}
+ </a-button>
+ </Col>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
@@ -67,7 +69,7 @@
<script lang="ts">
import { defineComponent } from 'vue';
-
+ import { Col } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { getRoleListByPage } from '/@/api/base/system';
@@ -87,7 +89,7 @@
export default defineComponent({
name: 'RoleManagement',
- components: { BasicTable, RoleInfo, RoleDrawer, TableAction, Icon,
PageWrapper },
+ components: { BasicTable, RoleInfo, RoleDrawer, TableAction, Icon,
PageWrapper, Col },
setup() {
const { t } = useI18n();
const [registerDrawer, { openDrawer }] = useDrawer();
@@ -95,13 +97,16 @@
const { createMessage } = useMessage();
const useStore = useUserStoreWithOut();
const [registerTable, { reload }] = useTable({
- title: t('system.role.tableTitle'),
api: getRoleListByPage,
columns,
formConfig: {
- baseColProps: { style: { paddingRight: '30px' } },
schemas: searchFormSchema,
fieldMapToTime: [['createTime', ['createTimeFrom', 'createTimeTo'],
'YYYY-MM-DD']],
+ rowProps: {
+ gutter: 14,
+ },
+ submitOnChange: true,
+ showActionButtonGroup: false,
},
showTableSetting: false,
useSearchForm: true,
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/role/role.data.ts
b/streampark-console/streampark-console-webapp/src/views/system/role/role.data.ts
index 70b6cb3e2..533b06319 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/role/role.data.ts
+++
b/streampark-console/streampark-console-webapp/src/views/system/role/role.data.ts
@@ -45,15 +45,22 @@ export const columns: BasicColumn[] = [
export const searchFormSchema: FormSchema[] = [
{
field: 'roleName',
- label: t('system.role.form.roleName'),
+ label: '',
component: 'Input',
- colProps: { span: 8 },
+ componentProps: {
+ placeholder: t('system.role.form.roleName'),
+ allowClear: true,
+ },
+ colProps: { span: 4 },
},
{
field: 'createTime',
- label: t('common.createTime'),
+ label: '',
component: 'RangePicker',
- colProps: { span: 8 },
+ componentProps: {
+ allowClear: true,
+ },
+ colProps: { span: 6 },
},
];
export async function handleRoleCheck(_rule: RuleObject, value: StoreValue) {
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/team/Team.vue
b/streampark-console/streampark-console-webapp/src/views/system/team/Team.vue
index 06a30d723..0da828cae 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/team/Team.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/team/Team.vue
@@ -17,11 +17,13 @@
<template>
<PageWrapper content-full-height fixed-height>
<BasicTable @register="registerTable" class="flex flex-col">
- <template #toolbar>
- <a-button type="primary" @click="handleCreate" v-auth="'team:add'">
- <Icon icon="ant-design:plus-outlined" />
- {{ t('common.add') }}
- </a-button>
+ <template #form-formFooter>
+ <Col :span="4" :offset="10" class="text-right">
+ <a-button type="primary" @click="handleCreate" v-auth="'team:add'">
+ <Icon icon="ant-design:plus-outlined" />
+ {{ t('common.add') }}
+ </a-button>
+ </Col>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
@@ -48,15 +50,15 @@
</template>
</template>
</BasicTable>
- <TeamDrawer okText="Submit" @register="registerDrawer"
@success="handleSuccess" />
+ <TeamModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
-
+ import { Col } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
- import TeamDrawer from './TeamDrawer.vue';
- import { useDrawer } from '/@/components/Drawer';
+ import TeamModal from './TeamModal.vue';
+ import { useModal } from '/@/components/Modal';
import { columns, searchFormSchema } from './team.data';
import { fetTeamList, fetchTeamDelete } from '/@/api/system/team';
import { useMessage } from '/@/hooks/web/useMessage';
@@ -65,19 +67,22 @@
import { PageWrapper } from '/@/components/Page';
export default defineComponent({
name: 'Team',
- components: { BasicTable, TeamDrawer, TableAction, Icon, PageWrapper },
+ components: { BasicTable, TeamModal, TableAction, Icon, PageWrapper, Col },
setup() {
- const [registerDrawer, { openDrawer }] = useDrawer();
+ const [registerModal, { openModal }] = useModal();
const { createMessage } = useMessage();
const { t } = useI18n();
const [registerTable, { reload }] = useTable({
- title: t('system.team.table.title'),
api: fetTeamList,
columns,
formConfig: {
- baseColProps: { style: { paddingRight: '30px' } },
schemas: searchFormSchema,
fieldMapToTime: [['createTime', ['createTimeFrom', 'createTimeTo'],
'YYYY-MM-DD']],
+ rowProps: {
+ gutter: 14,
+ },
+ submitOnChange: true,
+ showActionButtonGroup: false,
},
rowKey: 'id',
pagination: true,
@@ -93,13 +98,13 @@
});
function handleCreate() {
- openDrawer(true, {
+ openModal(true, {
isUpdate: false,
});
}
function handleTeamEdit(record: Recordable) {
- openDrawer(true, {
+ openModal(true, {
record,
isUpdate: true,
});
@@ -129,7 +134,7 @@
return {
t,
registerTable,
- registerDrawer,
+ registerModal,
handleCreate,
handleTeamEdit,
handleDelete,
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/team/TeamDrawer.vue
b/streampark-console/streampark-console-webapp/src/views/system/team/TeamModal.vue
similarity index 85%
rename from
streampark-console/streampark-console-webapp/src/views/system/team/TeamDrawer.vue
rename to
streampark-console/streampark-console-webapp/src/views/system/team/TeamModal.vue
index 859cfe6fb..971a0ef14 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/team/TeamDrawer.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/team/TeamModal.vue
@@ -15,18 +15,25 @@
limitations under the License.
-->
<template>
- <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter
width="650" @ok="handleSubmit">
+ <BasicModal
+ v-bind="$attrs"
+ @register="registerModal"
+ showFooter
+ width="650"
+ @ok="handleSubmit"
+ centered
+ >
<template #title>
<Icon icon="ant-design:team-outlined" />
{{ getTitle }}
</template>
<BasicForm @register="registerForm" :schemas="getTeamFormSchema" />
- </BasicDrawer>
+ </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';
import { BasicForm, FormSchema, useForm } from '/@/components/Form';
- import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+ import { BasicModal, useModalInner } from '/@/components/Modal';
import { fetchTeamCreate, fetchTeamUpdate } from '/@/api/system/team';
import { Icon } from '/@/components/Icon';
@@ -34,7 +41,7 @@
export default defineComponent({
name: 'TeamDrawer',
- components: { BasicDrawer, BasicForm, Icon },
+ components: { BasicModal, BasicForm, Icon },
emits: ['success', 'register'],
setup(_, { emit }) {
const { t } = useI18n();
@@ -77,11 +84,11 @@
wrapperCol: { lg: { span: 16, offset: 0 }, sm: { span: 17, offset: 0 }
},
});
- const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(
+ const [registerModal, { setModalProps, closeModal }] = useModalInner(
async (data: Recordable) => {
teamId.value = null;
resetFields();
- setDrawerProps({ confirmLoading: false });
+ setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (isUpdate.value) teamId.value = data.record.id;
if (unref(isUpdate)) {
@@ -99,18 +106,18 @@
async function handleSubmit() {
try {
const values = await validate();
- setDrawerProps({ confirmLoading: true });
+ setModalProps({ confirmLoading: true });
await (isUpdate.value
? fetchTeamUpdate({ id: teamId.value, ...values })
: fetchTeamCreate(values));
- closeDrawer();
+ closeModal();
emit('success', isUpdate.value);
} finally {
- setDrawerProps({ confirmLoading: false });
+ setModalProps({ confirmLoading: false });
}
}
- return { registerDrawer, registerForm, getTitle, getTeamFormSchema,
handleSubmit };
+ return { registerModal, registerForm, getTitle, getTeamFormSchema,
handleSubmit };
},
});
</script>
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 0c236b28b..e298022c4 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
@@ -44,14 +44,21 @@ export const columns: BasicColumn[] = [
export const searchFormSchema: FormSchema[] = [
{
field: 'teamName',
- label: t('system.team.table.teamName'),
+ label: '',
component: 'Input',
- colProps: { span: 8 },
+ componentProps: {
+ placeholder: t('system.team.table.teamName'),
+ allowClear: true,
+ },
+ colProps: { span: 4 },
},
{
field: 'createTime',
- label: t('common.createTime'),
+ label: '',
component: 'RangePicker',
- colProps: { span: 8 },
+ componentProps: {
+ allowClear: true,
+ },
+ colProps: { span: 6 },
},
];
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 dc12403e6..97504cc5e 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
@@ -73,7 +73,7 @@
const [registerDrawer, { openDrawer }] = useDrawer();
const { clipboardRef, copiedRef } = useCopyToClipboard();
const [registerTable, { reload, updateTableDataRecord }] = useTable({
- title: t('system.token.table.title'),
+ // title: t('system.token.table.title'),
api: fetTokenList,
// beforeFetch: (params) => {
// if (params.user) {
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/user/User.vue
b/streampark-console/streampark-console-webapp/src/views/system/user/User.vue
index 7a6dfc789..12829d4ea 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/user/User.vue
+++
b/streampark-console/streampark-console-webapp/src/views/system/user/User.vue
@@ -17,11 +17,13 @@
<template>
<PageWrapper content-full-height fixed-height>
<BasicTable @register="registerTable" class="flex flex-col">
- <template #toolbar>
- <a-button type="primary" @click="handleCreate" v-auth="'user:add'">
- <Icon icon="ant-design:plus-outlined" />
- {{ t('common.add') }}
- </a-button>
+ <template #form-formFooter>
+ <Col :span="4" :offset="10" class="text-right">
+ <a-button type="primary" @click="handleCreate" v-auth="'user:add'">
+ <Icon icon="ant-design:plus-outlined" />
+ {{ t('common.add') }}
+ </a-button>
+ </Col>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
@@ -35,7 +37,7 @@
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
-
+ import { Col } from 'ant-design-vue';
import { BasicTable, useTable, TableAction, ActionItem } from
'/@/components/Table';
import UserDrawer from './components/UserDrawer.vue';
import UserModal from './components/UserModal.vue';
@@ -54,7 +56,7 @@
export default defineComponent({
name: 'User',
- components: { BasicTable, UserModal, UserDrawer, TableAction, Icon,
PageWrapper },
+ components: { BasicTable, UserModal, UserDrawer, TableAction, Icon,
PageWrapper, Col },
setup() {
const { t } = useI18n();
const userStore = useUserStoreWithOut();
@@ -65,14 +67,17 @@
const [registerModal, { openModal }] = useModal();
const { createMessage, Swal } = useMessage();
const [registerTable, { reload }] = useTable({
- title: t('system.user.table.title'),
api: getUserList,
columns,
formConfig: {
// labelWidth: 120,
- baseColProps: { style: { paddingRight: '30px' } },
schemas: searchFormSchema,
fieldMapToTime: [['createTime', ['createTimeFrom', 'createTimeTo'],
'YYYY-MM-DD']],
+ rowProps: {
+ gutter: 14,
+ },
+ submitOnChange: true,
+ showActionButtonGroup: false,
},
rowKey: 'userId',
pagination: true,
diff --git
a/streampark-console/streampark-console-webapp/src/views/system/user/user.data.ts
b/streampark-console/streampark-console-webapp/src/views/system/user/user.data.ts
index b01884559..fe58ca6ce 100644
---
a/streampark-console/streampark-console-webapp/src/views/system/user/user.data.ts
+++
b/streampark-console/streampark-console-webapp/src/views/system/user/user.data.ts
@@ -70,15 +70,22 @@ export const columns: BasicColumn[] = [
export const searchFormSchema: FormSchema[] = [
{
field: 'username',
- label: t('system.user.form.userName'),
+ label: '',
component: 'Input',
- colProps: { span: 8 },
+ componentProps: {
+ placeholder: t('system.user.form.userName'),
+ allowClear: true,
+ },
+ colProps: { span: 4 },
},
{
field: 'createTime',
- label: t('common.createTime'),
+ label: '',
component: 'RangePicker',
- colProps: { span: 8 },
+ componentProps: {
+ allowClear: true,
+ },
+ colProps: { span: 6 },
},
];
